html5 - web, Notas de estudo de Informática

Baixe html5 - web e outras Notas de estudo em PDF para Informática, somente na Docsity!

HTML

Curso W3C Escritório Brasil

Autores: Elcio Ferreira e Diego Eis

Markup HTML 5 - Curso W3C Escritório Brasil 7

1. VISÃO GERAL DO HTML

De acordo com o W3C a Web é baseada em 3 pilares:

• Um esquema de nomes para localização de fontes de informação na Web, esse esquema cha- ma-se URI.
• Um Protocolo de acesso para acessar estas fontes, hoje o HTTP.
• Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML. Vamos nos focar no terceiro pilar, o HTML.

Hypertexto

HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto, imagem, vídeo, áudio e etc) na Web. O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós

• ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes elementos conectados formam uma grande rede de informação. Eles não estão conecta- dos linearmente como se fossem textos de um livro, onde um assunto é ligado ao outro seguida- mente. A conexão feita em um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e guardando informações relacionadas. Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem. Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A partir daí, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenções.

O começo e a interoperabilidade

Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanças para enriquecer as possibilidades da linguagem. Contudo, até aqui o HTML ain- da não era tratado como um padrão. Apenas em 1997, o grupo de trabalho do W3C responsável por manter o padrão do código, trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada como prática comum. Você pode ver: http://www.w3.org/TR/html401/appendix/changes.html. Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas, bro- wsers e outros meios de acesso. Interoperabilidade significa menos custo. Você cria apenas um código HTML e este código pode ser lido por diversos meios, ao invés de versões diferentes para diversos dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprie- tária, com formatos incompatíveis e limitada. Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a in- formação publicada por meio deste código fosse acessível por dispositivos e outros meios com ca- racterísticas diferentes, não importando o tamanho da tela, resolução, variação de cor. Dispositivos próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis. O HTML deve ser entendido universalmente, dando a possibilidade para a reutilização dessa informação de acordo com as limitações de cada meio de acesso.

WHAT Working Group

Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas basea- dos na web. O WHATWG ( http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004. Eles não estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje de HTML5.

Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja transparente para o usuário final. Ao contrário das versões anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript faze- rem seu trabalho da melhor maneira possível. O HTML5 permite por meio de suas APIs a mani- pulação das características destes elementos, de forma que o website ou a aplicação continue leve e funcional. O HTML5 também cria novas tags e modifica a função de outras. As versões antigas do HTML não continham um padrão universal para a criação de seções comuns e específicas como rodapé, cabeçalho, sidebar, menus e etc. Não havia um padrão de nomenclatura de IDs, Classes ou tags. Não havia um método de capturar de maneira automática as informações localizadas nos rodapés dos websites. Há outros elementos e atributos que sua função e significado foram modificados e que agora po- dem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram des- continuados em versões anteriores do HTML agora assumem funções diferentes e entregam mais significado para os usuários. O HTML5 modifica a forma de como escrevemos código e organizamos a informação na página. Seria mais semântica com menos código. Seria mais interatividade sem a necessidade de instalação de plugins e perda de performance. É a criação de código interoperável, pronto para futuros dispo- sitivos e que facilita a reutilização da informação de diversas formas. O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site deverá ter de ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML5 está sendo criado para que seja compatível com os browsers recentes, possibilitando a utilização das novas caracte- rísticas imediatamente.

Markup HTML 5 - Curso W3C Escritório Brasil 11

2. ANÁLISE DO SUPORTE ATUAL PELOS

NAVEGADORES E ESTRATÉGIAS DE USO

O desenvolvimento modular

Antigamente, para que uma nova versão do HTML ou do CSS fosse lançada, todas as ideias listadas na especificação deveriam ser testadas e desenvolvidas para então serem publicadas para o uso dos browsers e os desenvolvedores. Esse método foi mudado com o lançamento do HTML5 e o CSS3. A partir de agora, as duas tec- nologias foram divididas em módulos. Isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers não precisam esperar que todo o padrão seja escrito e publicado para utili- zarem as novidades das linguagens. As propriedades do CSS3, por exemplo, foram divididas em pequenos grupos. Há um grupo cui- dando da propriedade Background, outro da propriedade Border, outro das propriedades de Texto e etc. Cada um destes grupos são independentes e podem lançar suas novidades a qualquer mo- mento. Logo, o desenvolvimento para web ficou mais dinâmico, com novidades mais constantes. O ponto negativo nesse formato, é que problemas de compatibilidade podem ocorrer com mais frequencia. Por exemplo, um browser pode adotar bordas arredondadas e outro não. Ou um bro- wser pode escolher suportar um API diferente do API que o concorrente implementou. Contudo, os browsers tem mostrado grande interesse em se manterem atualizados em relação aos seus concorrentes.

Motores de Renderização

Há uma grande diversidade de dispositivos que acessam a internet. Entre eles, há uma série de ta- blets, smartphones, pc’s e etc. Cada um destes meios de acesso utilizam um determinado browser para navegar na web. Não há como os desenvolvedores manterem um bom nível de compatibilida- de com todos estes browsers levando em consideração a particularidade de cada um. Uma maneira

Markup HTML 5 - Curso W3C Escritório Brasil 13 Abaixo segue uma tabela simples de compatibilidade entre os browsers e alguns módulos do HTML5: Safari Chrome Opera Firefox IE 8 IE 9 Local Storage s s s s s s Histórico de Sessão s s s s s s Aplicações Offline s s n s n n Novos tipos de campos s s s n n n Form: Autofocus s s s n n n Form: Autocomplete n n s n n n Form: Required s s s n n n Video, Audio e Canvas Text s s s s n s

Técnicas de detectação

Pode ser que o usuário não utilize um browser que suporta HTML5. Neste caso, você pode redire- cioná-lo para uma versão do site mais simples, ou talvez apenas mostrar uma mensagem alertando o usuário sobre a importância da atualização do browser. Para isso temos algumas técnicas de de- tectação para conferir se o browser suporta ou não HTML5. Quando o browser visita um website, ele constrói uma coleção de objetos que representam ele- mentos HTML na página. Cada elemento no código é representado no DOM como um objeto diferente. Todo objeto DOM tem propriedades em comum, mas alguns objetos tem características específicas. Usaremos estes objetos para fazermos a detectação. Abaixo segue 4 meios que você poderá utilizar para detectar o suporte do browser:

1. Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou NAVIGATOR. Nesse caso, verificamos o suporte a geolocalização.
2. Crie um elemento e verifique se uma determinada propriedade existe neste elemento.
3. Crie um elemento e verifique se um determinado método existe neste elemento, então cha- me o método e verifique se o valor retorna. Por exemplo, teste quais formatos de vídeo são suportados.
4. Crie um elemento e defina um atributo com um determinado valor, então verifique se o atri- buto suporta este valor. Por exemplo, crie um input e verifique quais types são suportados. Utilizando o Modernizr O Modernizr ( http://www.modernizr.com/) é uma biblioteca de detectação que lhe permite veri- ficar o suporte da maioria das características do HTML5 e CSS3. O Modernizr roda automaticamente assim que você o adiciona no head do documento. Assim, se você quiser verificar se o browser suporta Geolocalização, por exemplo, basta inserir este script na página. Se o browser suportar a feature testada, ele retornará true: if (Modernizr.geolocation) { // Aceita a feature } else { // Não aceita a feature testada. }

O elemento HTML

O código HTML é uma série de elementos em árvore onde alguns elementos são filhos de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag HTML.

O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento. Lembre-se que o atributo LANG não é restrito ao elemento HTML, ele pode ser utilizado em qual- quer outro elemento para indicar o idioma do texto representado. Para encontrar a listagem de códigos das linguagens, acesse: http://www.w3.org/International/questions/qa-choosing-language-tags.

HEAD

A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os metadados. Metadados são informações sobre a página e o conteúdo ali publicado. Metatag Charset No nosso exemplo há uma metatag responsável por chavear qual tabela de caractéres a página está utilizando.

Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo:

Markup HTML 5 - Curso W3C Escritório Brasil 17 Essa forma antiga será também suportada no HTML5. Contudo, é melhor que você utilize a nova forma. A Web é acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros países é algo que vai contra a tradição e os ideais da internet. Por isso, foi cria- do uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milhão de caracteres. Ao invés de cada região ter sua tabela de ca- racteres, é muito mais sensato haver uma tabela padrão com o maior número de caracteres possí- vel. Atualmente a maioria dos sistemas e browsers utilizados por usuários suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode você garante que ele será bem visualizado aqui, na China ou em qualquer outro lugar do mundo. O que o Unicode faz é fornecer um único número para cada caractere, não importa a plataforma, nem o programa, nem a língua. Tag LINK Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros documen- tos e a tag LINK, que são links para fontes externas que serão usadas no documento. No nosso exemplo há uma tag LINK que importa o CSS para nossa página:

O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo. Há outros valores para o atributo REL, como por exemplo o ALTERNATE:

Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um cami- nho alternativo via Atom FEED.

Markup HTML 5 - Curso W3C Escritório Brasil 19

4. MODELOS DE CONTEÚDO

Há pequenas regras básicas que nós já conhecemos e que estão no HTML desde o início. Estas regras definem onde os elementos podem ou não estar. Se eles podem ser filhos ou pais de outros elementos e quais os seus comportamentos. Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos: elementos de linha e de bloco. Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a, strong, em, img, input, abbr, span. Os elementos de blocos são como caixas, que dividem o conteúdo nas seções do layout. Abaixo segue algumas premissas que você precisa relembrar e conhecer:

• Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label.
• Os elementos de linha nunca podem conter elementos de bloco.
• Elementos de bloco sempre podem conter elementos de linha.
• Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível. Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo de conteúdo o elemento trabalha e como pode ser seu comportamento.

Categorias

Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características similares. As categorias estão a seguir. Manteremos os nomes das categorias em inglês para que haja um melhor entendimento:

• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content

• Embedded content
• Interactive content Abaixo segue como as categorias estão relacionadas de acordo com o WHATWG:

Metadata content

Os elementos que compõe a categoria Metadata são:

• base
• command
• link
• meta
• noscript
• script
• style
• title Este conteúdo vem antes da apresentação, formando uma relação com o documento e seu conteú- do com outros documentos que distribuem informação por outros meios.

Flow content

A maioria dos elementos utilizados no body e aplicações são categorizados como Flow Content. São eles:

• a
• abbr
• address
• area (se for um decendente de um elemento de mapa)
• article
• aside