HTML5 - 4ªEd. Atualizada e Aumentada (eBook)

HTML5

4.ª EDIÇÃO ATUALIZADA E AUMENTADA

Luís Abreu

FCA – Editora de Informática, Lda www.fca.pt

EDIÇÃO FCA – Editora de Informática, Lda. www.fca.pt Copyright © 2016, FCA – Editora de Informática, Lda. ISBN eBook: 978-972-722-758-7 1.ª edição impressa: março 2011 4.ª edição atualizada e aumentada impressa: setembro 2015 4.ª edição atualizada e aumentada eBook: abril 2016

Capa: José M. Ferrão – Look-Ahead Todos os nossos livros passam por um rigoroso controlo de qualidade, no entanto aconselhamos a consulta periódica do nosso site (www.fca.pt) para fazer o download de eventuais correções.

Não nos responsabilizamos por desatualizações das hiperligações presentes nesta obra, que foram verificadas à data de publicação da mesma.

Os nomes comerciais referenciados neste livro têm patente registada.

Reservados todos os direitos. Esta publicação não pode ser reproduzida, nem transmitida, no todo ou em parte, por qualquer processo eletrónico, mecânico, fotocópia, digitalização, gravação, sistema de armazenamento e disponibilização de informação, sítio Web, blogue ou outros, sem prévia autorização escrita da Editora.

Este livro ĂŠ dedicado Ă minha esposa, Marina.

AGRADECIMENTOS Em primeiro lugar, quero começar por agradecer à FCA por todas as oportunidades que me tem proporcionado ao longo dos últimos anos. Neste particular, não posso deixar de salientar o trabalho editorial efetuado pela Ana Correia, cujo contributo foi decisivo para este livro.

A qualidade final deste livro teria sido, certamente, inferior caso os vários manuscritos não tivessem sido revistos minuciosamente por um conjunto de revisores que, de uma forma generosa e abnegada, prescindiram dos seus tempos livres para me ajudarem a concluir este projeto. Assim, deixo aqui o meu agradecimento público a Carlos Farinha, Miguel Alho (http://www.miguelalho.com), Bruno Moniz (http://twitter.com/brunomoniz), Magno Andrade e Luís F. S. Costa por toda a ajuda prestada e dicas fornecidas ao longo do processo de escrita deste livro.

Uma vez mais, não posso terminar a secção dedicada aos revisores sem voltar a mencionar o meu bom amigo João Paulo Carreiro. Desde que nos conhecemos (já há alguns anos), o João tem sido simplesmente fantástico e tem-me ajudado em todos os livros que tenho escrito. E este livro de HTML não foi exceção. Por isso, cá fica uma vez mais um muito obrigado pela ajuda e paciência que tens tido para comigo ao longo destes anos. Dito isto, vai começando já a preparar-te, porque, como já sabes, eu não tenciono ficar muito tempo “parado” !

Finalmente, não poderia, uma vez mais, deixar de agradecer à minha esposa Marina. Este já é o sétimo projeto de escrita em que me envolvo e, muito sinceramente, não consigo lembrar-me de uma única vez em que não me tivesses apoiado, mesmo à custa de “sacrifícios” pessoais que, como sempre acontece, eu tinha prometido não serem necessários. Que não fiquem quaisquer dúvidas: este livro (à semelhança de todos os restantes

projetos onde obtive sucesso) só foi possível graças à tua compreensão e apoio. Muito obrigado por tudo!

O AUTOR Luís Abreu

ÍNDICE GERAL AGRADECIMENTOS 0. INTRODUÇÃO 0.1 O que posso encontrar neste livro 0.2 Requisitos 0.3 A quem se dirige este livro?

0.4 Código e samples 0.5 Convenções 0.6 Organização do livro 0.6.1 Capítulo 1: Introdução ao HTML 0.6.2 Capítulo 2: Melhorias Semânticas 0.6.3 Capítulo 3: Canvas 0.6.4 Capítulo 4: SVG 0.6.5 Capítulo 5: Vídeo e áudio 0.6.6 Capítulo 6: Geolocalização 0.6.7 Capítulo 7: Web Storage 0.6.8 Capítulo 8: Formulários Web 0.6.9 Capítulo 9: Microdata 0.6.10 Capítulo 10: Aplicações offline 0.6.11 Capítulo 11: Comunicação 0.6.12 Capítulo 12: Web Sockets 0.6.13 Capítulo 13: Web Workers 0.6.14 Capítulo 14: HTML5 no Mundo Real 0.7 Suporte 1. INTRODUÇÃO AO HTML 1.1 Um pouco de história 1.2 Princípios associados ao HTML5

1.3 Afinal, o que é o HTML5?

1.4 Estrutura básica de uma página HTML 1.4.1 Elementos e atributos 1.4.2 Árvore do DOM 1.4.3 Utilização de scripts 1.4.4 Utilização de CSS Conclusão 2. MELHORIAS SEMÂNTICAS 2.1 Semântica: o que é e porque precisamos dela?

2.2 Uma página HTML4 2.3 Página convertida para HTML5 2.3.1 Doctype 2.3.2 Elemento HTML 2.3.3 Elemento head 2.3.3.1 Definição do encoding 2.3.3.2 Elemento link 2.3.4 Alterações no elemento body 2.3.4.1 Cabeçalho da página 2.3.4.2 Cabeçalho e outlines 2.3.4.3 Criação de artigos 2.3.4.4 Criação de rodapés 2.3.5 Página final 2.3.6 Aplicação de estilos CSS Conclusão 3. CANVAS 3.1 Introdução ao elemento canvas 3.2 Utilização do elemento canvas 3.2.1 Deteção do suporte ao elemento 3.2.2 Utilização de conteúdo de fallback 3.2.3 Sistema de coordenadas 3.2.4 Figuras simples

3.2.5 Paths 3.2.6 Transformações 3.2.7 Utilização de texto 3.2.8 Gradientes 3.2.9 Imagens 3.2.10 Aplicação de sombras 3.2.11 Manipulação de pixéis 3.2.12 Animações 3.2.12.1 O método requestAnimatonFrame 3.2.12.2 Mais algumas observações sobre animações Conclusão 4. SVG 4.1 Introdução ao SVG 4.1.1 Uso de ficheiros SVG externos 4.1.2 Elemento SVG 4.1.3 Interação através de script e CSS 4.1.4 Algumas observações gerais sobre SVG 4.2 Figuras simples 4.3 Viewport 4.4 Preenchimentos e contornos 4.4.1 Gradientes 4.4.2 Padrões 4.5 Paths 4.6 Texto 4.7 Filtros 4.8 Transformações 4.8.1 Atributo transform 4.8.2 Atributo viewBox 4.9 Animações 4.9.1 Uso de JavaScript 4.9.2 Uso de animate Conclusão

5. VÍDEO E ÁUDIO 5.1 Introdução aos elementos vídeo e áudio 5.1.1 Vídeo, áudio, contentores e codecs 5.1.1.1 Codecs de vídeo 5.1.1.2 Codecs de áudio 5.1.1.3 Que codecs usar?

5.1.1.4 O elemento track 5.1.1.5 Limitações na distribuição de média 5.1.2 Codificar vídeo e áudio 5.2 Elemento vídeo 5.2.1 Detetar o suporte ao elemento vídeo 5.2.2 Carregamento de um vídeo 5.2.2.1 Carregamento de formatos diferentes 5.2.2.2 Controlar o elemento através de scripts 5.2.2.3 Construção de um leitor 5.3 Interface HtmlMediaElement 5.4 Vídeo e canvas 5.5 Elemento áudio Conclusão 6. GEOLOCALIZAÇÃO 6.1 Introdução à geolocalização 6.2 Coordenadas fornecidas pelo serviço 6.3 Como o browser obtém as coordenadas 6.3.1 Triangulação por endereço IP 6.3.2 Triangulação por GPS 6.3.3 Triangulação por WI-FI 6.3.4 Triangulação por GSM 6.3.5 Informação disponibilizada pelo utilizador 6.4 Detetar o suporte nos browsers 6.5 Obter as coordenadas atuais 6.6 Tratamento de erros 6.7 Influenciar a obtenção de coordenadas

6.8 Atualização das coordenadas de localização 6.9 Geolocalização no Internet Explorer 8 6.10 Exemplo concreto Conclusão 7. WEB STORAGE 7.1 Um pouco de história 7.2 Detetar o suporte no browser 7.3 Objeto storage 7.3.1 Deteção de alterações 7.3.2 Análise da informação de storage 7.3.3 Observações finais 7.4 Para além do storage 7.4.1 Web SQL Database 7.4.2 Indexed Db 7.4.3 File API 7.4.3.1 Upload de ficheiros 7.4.3.2 Esconder o controlo file 7.4.3.3 Operações de drag-n-drop 7.4.3.4 Leitura de ficheiros 7.4.3.5 Tratamento de erros 7.4.3.6 Uso do método createObjectUrl 7.4.3.7 Obtenção de informação progresso 7.4.3.8 Leituras parciais 7.4.3.9 Blobs: observações finais Conclusão 8. FORMULÁRIOS WEB 8.1 Construção de um formulário 8.2 Deteção de formulários em HTML5 8.3 Novos atributos 8.3.1 Placeholder 8.3.2 Autofocus

8.3.3 Autocomplete 8.3.4 List e datalist 8.3.5 Required 8.3.6 Multiple 8.4 Novos controlos 8.4.1 Endereços de email 8.4.2 URL 8.4.3 Números 8.4.4 Sliders 8.4.5 Datas e horas 8.4.6 Pesquisa 8.4.7 Telefone 8.4.8 Cores 8.5 Validação de formulários 8.5.1 Objeto ValidityState 8.5.2 Feedback na validação 8.5.3 Cancelar a validação Conclusão 9. MICRODATA 9.1 Um pouco de história 9.2 Princípios básicos 9.3 Âmbito 9.4 Criação de um vocabulário personalizado 9.5 Vocabulários existentes 9.6 Microdata no “mundo real” 9.6.1 Interação a partir de script 9.6.2 Interação com motores de pesquisa Conclusão 10. APLICAÇÕES OFFLINE 10.1 Principais características 10.2 Deteção do suporte offline

10.3 Ficheiro de manifesto 10.3.1 Conteúdo do ficheiro de manifesto 10.3.2 Secção Cache 10.3.3 Secção network 10.3.4 Secção fallback 10.3.5 Um exemplo especial 10.4 Fluxo de eventos associado ao caching 10.4.1 Atualização do ficheiro de manifesto 10.5 Utilização de scripting 10.5.1 Verificar o estado do browser 10.6 Considerações finais Conclusão 11. COMUNICAÇÃO 11.1 Introdução à comunicação entre documentos 11.1.1 Um exemplo teórico: comunicação entre uma página e uma iframe 11.1.2 Cross-document e suporte dos browsers 11.1.3 Exemplo prático 11.1.3.1 Configurações preliminares 11.1.3.2 Construção da página principal 11.2 XMLHttpRequest 11.2.1 Recursos cross-origin 11.2.2 Eventos de progresso 11.2.3 Suporte dos browsers 11.2.3.1 Internet Explorer 11.2.4 Um exemplo prático 11.3 Eventos no lado servidor 11.3.1 Suporte dos browsers 11.3.2 Um exemplo prático 11.3.3 Algumas observações finais Conclusão

12. WEB SOCKETS 12.1 Introdução aos Web Sockets 12.1.1 Deteção do suporte dos browsers 12.1.2 Objeto WebSocket 12.1.3 Handshaking 12.2 Um exemplo prático 12.2.1 Construção do servidor 12.2.2 Construção da página 12.3 Outro exemplo: utilização de WCF Conclusão 13. WEB WORKERS 13.1 Introdução às Web Workers 13.2 Suporte dos browsers 13.3 Objeto worker 13.3.1 Importação de scripts 13.3.2 Sub-workers 13.4 Objeto Sharedworker 13.4.1 Utilização de várias shared workers Conclusão 14. HTML5 NO MUNDO REAL 14.1 Projeto Ace 14.2 Projeto VideoJS 14.3 Projeto noVNC 14.4 Projeto SketchPad 14.5 Projeto Google Pacman 14.6 Outros projetos Conclusão BIBLIOGRAFIA SOBRE O AUTOR

COMPLEMENTOS NA WEB

0

INTRODUÇÃO

O HTML5 veio para ficar! Apesar de ainda só ter atingido o estado de candidate Recommendation (aquando da escrita do livro, a última versão era a de 4 de fevereiro de 2014), a verdade é que as novidades introduzidas pela especificação atual já se encontram relativamente estáveis e os principais browsers têm efetuado um esforço para as implementarem. Até mesmo o Internet Explorer, que durante anos permaneceu obstinado em defender a sua própria API (em vez de se aproximar dos standards vigentes), tem acompanhado a tendência e já disponibiliza muitas das funcionalidades introduzidas pela especificação atual. Se a este conjunto de browsers juntarmos os usados nos dispositivos móveis (que, muito provavelmente, estão tão ou mais adiantados neste suporte), é fácil perceber a importância desta nova versão do HTML.

0.1

O QUE POSSO ENCONTRAR NESTE LIVRO

O livro recorre a vários exemplos práticos para apresentar as principais novidades introduzidas pela especificação do HTML5. Se retirarmos o Capítulo 1, onde analisamos um pouco da história do HTML ao longo dos anos e apresentamos um breve tutorial que ilustra o papel das principais tecnologias usadas na construção de páginas Web, todos os restantes 13 capítulos são dedicados inteiramente à apresentação das novidades introduzidas ou associadas ao HTML5. Finalmente, temos ainda espaço para um capítulo que apresenta vários exemplos práticos que ilustram o uso do HTML5 no mundo real.

0.2

REQUISITOS

A utilização do código que acompanha este livro não pressupõe nenhum requisito especial (para além da utilização de um browser compatível com o HTML5). Apesar de todo o código ter sido escrito com o Visual Studio 2013, a verdade é que um simples editor de texto (como, por exemplo, o Notepad2 ou o Komodo Edit, que podem ser obtidos, respetivamente, a partir de http://bit.ly/9nVOHT e http://bit.ly/cdVQW6) será mais do que suficiente para que o leitor interessado possa reproduzir o código apresentado.

Refira-se ainda a existência das ferramentas do Visual Studio Express que, apesar de gratuitas, fornecem uma experiência muito semelhante à obtida no Visual Studio (claro, com algumas limitações que não são importantes na escrita do código usado neste livro).

A execução de alguns dos exemplos pressupõe, ainda, a utilização de um servidor Web para alojar as páginas e os serviços usados. Neste caso, optámos por recorrer ao IIS, já que é disponibilizado por todas as versões atuais do Windows. Os leitores que usem outros sistemas operativos poderão recorrer a outras aplicações, como, por exemplo, o Apache (http://bit.ly/9kT0sH). Nestes casos, poderá ainda ser necessário adaptar o código C#, usado como suporte à ilustração de algumas funcionalidades HTML (ex.: código servidor usado para ilustrar a utilização de eventos servidor e de Web Sockets).

0.3

A QUEM SE DIRIGE ESTE LIVRO?

Este livro é dirigido a leitores que já possuem alguns conhecimentos básicos sobre HTML. O tutorial rápido apresentado no Capítulo 1 poderá servir de base e de introdução ao HTML para aqueles que têm muito pouca experiência nesta área.

A partir do Capítulo 2, o livro concentra-se apenas em apresentar e exemplificar as novas funcionalidades do HTML5, sendo, assim, ideal para

todos aqueles conhecimentos.

0.4

que

pretendem

melhorar

rapidamente

os

seus

CÓDIGO E SAMPLES

As páginas que acompanham este livro são, na sua maioria, páginas HTML simples, que apenas recorrem a JavaScript e estilos CSS. Contudo, algumas das funcionalidades ilustradas necessitam de interagir com serviços remotos. Nesses casos, optámos por recorrer à linguagem C# para construir esses serviços.

Esta linguagem não deverá constituir um obstáculo, já que todos os exemplos estão devidamente comentados e o código C# usado é facilmente compreendido por qualquer pessoa com alguma experiência na escrita de código .NET. O leitor interessado pode obter todo o código que acompanha este livro a partir do site da editora FCA (http://www.fca.pt).

0.5

CONVENÇÕES

Ao longo do livro, optou-se por seguir um conjunto de convenções que devem facilitar a interpretação do texto e do código. Assim, todos os excertos de código são apresentados com a formatação que se segue, e são legendados de acordo com o seu tipo: HTML <TextBlock Text=”Olá, mundo!” /> C# var c = “uma string em C#”; JavaScript var c = 10;

O caráter -> é usado para indicar que a linha atual não deve ser dividida em duas linhas (essa divisão ocorreu apenas porque a página física

do livro não possui o espaço suficiente para apresentar numa única linha).

Todas as notas e observações importantes poderão ser encontradas no interior de uma secção semelhante à seguinte:

Nota importante sobre um tópico.

0.6

ORGANIZAÇÃO DO LIVRO

O livro está dividido em vários capítulos e pode ser lido sequencialmente, levando o leitor numa “viagem“, que começa com um pequeno tutorial que ilustra os conceitos básicos associados à construção de uma página HTML para, em seguida, se debruçar sobre cada uma das funcionalidades mais importantes introduzidas pelo HTML5. Por outro lado, este livro também pode ser usado como referência, permitindo, assim, a leitura “desordenada” dos capítulos que mais interessam ao leitor num determinado momento.

0.6.1 CAPÍTULO 1: INTRODUÇÃO AO HTML Este capítulo começa por apresentar um pouco da história associada à evolução e desenvolvimento do HTML ao longo dos anos. Para além de justificar a introdução de uma nova versão (que “roubou as luzes da ribalta” ao XHTML), o capítulo disponibiliza, ainda, um pequeno tutorial que apresenta alguns dos conceitos básicos associados à construção de uma página HTML. 0.6.2 CAPÍTULO 2: MELHORIAS SEMÂNTICAS Neste capítulo, começamos por apresentar o conceito de semântica para, em seguida, ilustrarmos novos elementos introduzidos pelo HTML5,

que contribuem para uma melhoria da semântica através da adaptação de uma página HTML já existente.

0.6.3 CAPÍTULO 3: CANVAS O elemento canvas colmata uma falha grave das versões anteriores do HTML: a falta de um bitmap que forneça uma superfície que permita renderizar gráficos e texto on the fly no chamado modo imediato (immediate mode). Neste capítulo, apresentamos de modo aprofundado as principais características e funcionalidades deste elemento, ilustradas com vários exemplos simples.

0.6.4 CAPÍTULO 4: SVG Hoje em dia, praticamente todos os browsers suportam o uso de SVG (Scalable Vector Graphics). O SVG é uma linguagem que permite a criação de gráficos 2D com recurso a uma sintaxe declarativa (baseada em XML). Como veremos, o SVG permite a renderização de gráficos, texto e imagens e pode ser uma boa opção para quem pretende construir jogos, mapas ou gráficos (barras, pie, etc.) numa página HTML. Neste capítulo, efetuamos uma abordagem rápida às principais características e funcionalidades desta linguagem.

0.6.5 CAPÍTULO 5: VÍDEO E ÁUDIO Os elementos video e audio são novos e evitam ter de se recorrer a plugins para efetuar a reprodução de conteúdos multimédia. Neste capítulo, começamos por analisar alguns conceitos teóricos relacionados com a codificação de áudio e vídeo para, em seguida, apresentarmos as principais funcionalidades disponibilizadas por estes elementos.

0.6.6 CAPÍTULO 6: GEOLOCALIZAÇÃO Cada vez mais as empresas usam a localização geográfica de um utilizador para adaptar as propostas de produtos que lhe são fornecidos.

Com a nova API de geolocalização, os programadores Web passam também a poder obter informação sobre a localização do utilizador. Neste capítulo, analisamos algumas das principais funcionalidades associadas à utilização desta API. 0.6.7 CAPÍTULO 7: WEB STORAGE O Web Storage é outra das novidades do HTML5 apresentadas neste livro. No Capítulo 7, vemos como este novo mecanismo permite efetuar a persistência local de dados, resolvendo um dos problemas crónicos das versões anteriores do HTML no que diz respeito à manutenção de dados no cliente. Para além do Web Storage, o capítulo analisa ainda outras soluções disponíveis para armazenar dados no lado cliente (ex.: Indexed Db ou a File API).

0.6.8 CAPÍTULO 8: FORMULÁRIOS WEB Neste capítulo, apresentamos todas as novidades introduzidas pela especificação relativas à construção de formulários. O capítulo começa por efetuar uma introdução breve aos formulários para, em seguida, apresentar detalhadamente os novos controlos de introdução de dados. Antes de encerrar, existe ainda espaço para analisarmos algumas das novidades relacionadas com a validação de formulários que são suportadas pela especificação.

0.6.9 CAPÍTULO 9: MICRODATA A microdata é um mecanismo que permite a fácil extensibilidade do HTML. Apesar de a especificação introduzir imensos elementos e

atributos, a verdade é que existem situações onde é necessário melhorar a semântica dos elementos existentes para que estes reproduzam os conteúdos apresentados com maior fidelidade. O Capítulo 9 aborda vários desses aspetos, mostrando como a microdata contribui para resolver esses problemas.

0.6.10 CAPÍTULO 10: APLICAÇÕES OFFLINE À primeira vista, pode parecer um contrassenso, mas a verdade é que as aplicações Web também podem ser configuradas para serem usadas em modo offline (isto é, sem uma ligação de rede ativa). Este capítulo começa por justificar esta opção e termina com uma análise aprofundada das configurações e API usadas para suportar cenários offline.

0.6.11 CAPÍTULO 11: COMUNICAÇÃO A interação com recursos remotos foi popularizada pelo aparecimento do AJAX. Neste capítulo, analisamos algumas das opções suportadas pelo HTML para permitir este tipo de comunicação. Após analisarmos a comunicação entre documentos carregados em janelas diferentes, examinamos as novidades introduzidas na API disponibilizada pelo objeto XMLHttpRequest e terminamos com a apresentação dos eventos servidor, que definem um mecanismo de comunicação baseado num modelo push, onde a informação é enviada do servidor para o cliente. Este modelo colmata alguns dos problemas inerentes ao modelo de polling, usado predominantemente até agora, onde o cliente era obrigado, de x em x segundos, a estabelecer uma ligação ao servidor para verificar se existiam novos dados.

0.6.12 CAPÍTULO 12: WEB SOCKETS Este capítulo apresenta as principais funcionalidades associadas ao uso dos novos Web Sockets. Considerada por muitos como a grande inovação do HTML5, os Web Sockets permitem o estabelecimento de um

canal de comunicação bidirecional entre browser e servidor que possibilita a troca de informação entre ambos em tempo real.

0.6.13 CAPÍTULO 13: WEB WORKERS O livro termina com a apresentação de outra nova funcionalidade: Web Workers. As Workers introduzem uma API que permite a execução de tarefas em paralelo, permitindo, assim, tirar partido das máquinas multicore, que começam a dominar o mercado de PC desktop. Para além disso, as Workers podem ainda ser usadas para efetuar a propagação de mensagens por uma ou mais janelas interessadas em receber essa informação.

0.6.14 CAPÍTULO 14: HTML5 NO MUNDO REAL O livro termina com a apresentação de alguns projetos que ilustram o uso de vários dos tópicos apresentados neste livro no mundo real. Como é possível verificar, as funcionalidades introduzidas pelo HTML5 são mais do que suficientes para criarmos várias aplicações avançadas.

0.7

SUPORTE

Este livro foi escrito originalmente com base no draft de 15 julho de 2011 e revisto com base no draft de 4 de fevereiro de 2014 da especificação do HTML5 (http://bit.ly/1ny3GHp). Apesar de ainda não existir uma versão final, parece-nos que muita da informação apresentada neste livro não sofrerá qualquer alteração. Se, por acaso, o leitor encontrar informação que lhe pareça incorreta, ou se tiver sugestões em relação ao conteúdo, então, não hesite e envie um email com as suas questões para labreu@gmail.com. Eventuais atualizações e erratas serão publicadas no site da editora, em http://www.fca.pt.

1

INTRODUÇÃO AO HTML

A linguagem HTML (HyperText Markup Language) é uma linguagem de markup que permite a construção de páginas Web. Esta linguagem, criada por Tim Berners-Lee no início dos anos 90, introduz um conjunto de elementos (também conhecidos por tags) usados para descrever um documento apresentado por uma página Web. Neste capítulo, vamos começar por abordar um pouco da história desta linguagem para, em seguida, analisar algumas das principais características do HTML5.

1.1

UM POUCO DE HISTÓRIA

Apesar de ainda ter poucos anos, a verdade é que a linguagem HTML já possui uma história muito rica. O ano de 1995 assistiu à criação de um novo consórcio (W3C – World Wide Web Consortium) que levou à estandardização desta linguagem. A primeira versão deste standard, conhecida como HTML 3.0, foi rapidamente substituída pela versão 3.2, publicada em 1997. O ano de 1998 assistiu à última grande evolução da linguagem, que culminou com o lançamento do HTML4 e com a desmobilização do grupo de trabalho dedicado à evolução do HTML. Com a introdução do XML, o consórcio optou por apostar na conversão de aplicações HTML em XML já que, segundo a sua opinião, a evolução do HTML seria “muito difícil”. Assim, foi sem surpresa que, ainda em 1998, se assistiu ao lançamento da especificação do XHTML 1.0.

Apesar de não ter adicionado grandes novidades ao HTML 4.0 (não

acrescentou nenhum elemento ou atributo novos aos “herdados” do HTML 4.0), esta primeira versão “XMLificou” o HTML e introduziu um novo tipo MIME para identificar as páginas deste tipo (application/ xhtml+xml).

De forma a promover a fácil migração, esta especificação (XHTML 1.0) continha algumas recomendações (anexo C) que permitiam aos browsers aplicar as regras “caóticas” do HTML na renderização de documentos XHTML. Por outras palavras, o anexo C dizia que, se uma página XHTML fosse servida com o tipo MIME text/html, então, deveria ser tratada como uma página HTML, fazendo, assim, com que as regras mais restritas associadas ao XHTML não fossem aplicadas.

O que é um tipo MIME? O tipo MIME (também conhecido como content type ou media type – Multipurpose Internet Mail Extensions) de um pedido é um pormenor técnico de grande importância no tratamento de recursos obtidos através do protocolo HTTP. Quando o browser pede um recurso remoto (ex.: página HTML), o servidor Web retorna um conjunto de cabeçalhos (também conhecidos por headers) que precedem o conteúdo desse recurso. Um dos mais importantes indica o chamado tipo MIME, que identifica o tipo de conteúdo devolvido pelo servidor Web. Por exemplo, quando o browser pede uma página HTML, esse header contém o seguinte valor: Content-type: text/html Este header é consumido pelos browsers e serve para determinar a verdadeira natureza de um recurso. Ou seja, o que determina o processamento de um determinado recurso é o seu tipo MIME e não, por exemplo, a sua extensão. Para além do tipo MIME text/html, existem ainda outros que são muito usados. Por exemplo, os tipos image/jpeg e image/png identificam imagens no formato JPEG e PNG. Portanto, todos os recursos obtidos através de HTTP possuem sempre um tipo MIME associado. No caso de páginas HTML, o tipo MIME é o text/html. Por

sua vez, as páginas XHTML são identificadas pelo tipo MIME application/ xhtml+xml.

Para além da especificação do XHTML 1.0, o consórcio trabalhava ainda noutras especificações como, por exemplo, a de XForms 1.0. Esta tinha como objetivo especificar os controlos necessários à construção de formulários Web. Após a conclusão da especificação do XHTML 1.0, o grupo começou imediatamente a preparar a sua próxima versão, designada por XHTML 1.1. A principal novidade desta especificação era a eliminação do anexo C e a obrigatoriedade de todo o conteúdo XHTML ser servido com o tipo MIME application/xhtml+xml.

O leitor atento terá, porventura, reparado que já nos referimos por várias vezes aos tipos MIME neste texto. A identificação do conteúdo é fundamental para determinar como os browsers reagem a eventuais erros existentes nos conteúdos recebidos. Para o bem e para o mal, os browsers sempre foram muito compreensivos, no que diz respeito ao tratamento de erros existentes no HTML. Por exemplo, quando um browser está perante um recurso HTML (isto é, um recurso identificado pelo tipo MIME text/html) que não cumpre as regras associadas à utilização de elementos (ex.: o autor da página esqueceu-se de encerrar uma tag), o browser tenta interpretar o HTML e nunca termina o processamento com a apresentação de um erro ao utilizador. Claro está que o resultado final pode não ter nada a ver com o pretendido… e também é verdade que, nestes casos, o resultado pode variar de browser para browser. Apesar de tudo, este comportamento permitia ao utilizador obter a informação desejada (podendo a formatação da página apresentada não corresponder à formatação idealizada pelo autor).

Como o consórcio considerou este comportamento inaceitável, então optou por “obrigar” todos os browsers que recebem conteúdo XHTML a tratar os erros de má formação como erros fatais. Por outras palavras, com conteúdo XHTML (sempre identificado pelo tipo MIME application/xhtml+xml), se um autor se esquecer de, por exemplo, encerrar

uma tag p, então o browser deveria tratar este erro como fatal em vez de tentar encerrar a tag (como acontecia com conteúdo HTML). Esta decisão foi fulcral para que o XHTML nunca tivesse a adesão esperada. Se tivermos em atenção que a maior parte das páginas contém um ou mais erros, é fácil percebermos porque a maior parte dos sites Web continuou a servir o seu conteúdo associado ao tipo MIME text/html.

Na verdade, muitos dos autores de páginas passaram a ter alguma atenção às regras introduzidas pelo XHTML (pelo menos, as regras associadas à boa formação de documentos XML). Contudo, no momento de servir o conteúdo, valiam-se do anexo C da especificação XHTML 1.0 para fazerem com que o browser continuasse a interpretar o conteúdo dessas páginas como HTML (evitando, assim, alguns erros relacionados com documentos inválidos). É interessante verificarmos que muitas das páginas que se orgulham de serem XHTML (refiro-me a páginas que começam com o DOCTYPE, definem os nomes das tags em minúsculas, definem os valores dos atributos entre aspas e encerram as tags vazias com o caráter /, etc.) são sempre interpretadas como HTML já que são servidas com o tipo MIME text/html (para serem interpretadas como XHTML tinham de ser servidas com o tipo MIME application/xhtml+xml). Mais interessante, ainda, é verificarmos que muitas pessoas nem se dão conta deste pequeno (grande!) pormenor e continuam a pensar que as suas páginas são servidas como XHTML. Não é, pois, de admirar que a especificação do XHTML 2.0 nunca tenha sido finalizada e tenha sido suplantada por uma visão “alternativa”, que surgiu em 2004 num workshop do W3C. Nesse workshop, um grupo liderado pela Mozilla Foundation e pelo Opera Software apresentou uma nova visão para o HTML com os seguintes objetivos: Manter a compatibilidade e facilitar a migração para o “novo” HTML;

Identificar todos os erros e as formas como os browsers devem tratá-los de forma a não expor os utilizadores a esses problemas; Reduzir a utilização de profiles. Os autores deveriam encontrar as mesmas “funcionalidades” nos browsers usados no desktop e em clientes móveis; Definir um processo aberto, onde todos podem participar e dar a sua contribuição para a evolução do HTML. Após a sessão, o W3C decidiu por votação que não deveria despender tempo e recursos nesta visão. Foi na sequência desta decisão que surgiu o grupo WHATWG (Web Hypertext Applications Technology Working Group), que se descreve como sendo um grupo não oficial e aberto, constituído pelas empresas que desenvolvem browsers e outras entidades interessadas que tentam evoluir a especificação do HTML, garantindo a sua compatibilidade com versões anteriores.

Uma das principais tarefas desenvolvidas pelo grupo nos primeiros anos consistiu na documentação dos algoritmos de erro associados ao processamento de documentos HTML. Infelizmente, não havia nada na especificação HTML que definisse qual o comportamento dos browsers perante erros de processamento e esta lacuna contribuiu para o caos, onde cada browser tentava replicar o comportamento de um outro browser mais antigo, mas sempre sem o conseguir imitar na perfeição.

Para além da documentação desses algoritmos (tarefa esta que, como seria de esperar, levou muito tempo, não estando ainda totalmente completa), o grupo trabalhou ainda noutras áreas como, por exemplo, na construção de formulários Web (Web Forms 2.0) e de aplicações Web (Web Applications 1.0). Esta última foi responsável pelo surgimento de muitas das novidades associadas ao HTML5, como, por exemplo, o suporte ao áudio e vídeo, ou a introdução de novos elementos que melhoram a semântica associada a uma página HTML.

O esforço do grupo WHATWG acabou por ser recompensado no final de 2006, quando o W3C reconsiderou a sua posição inicial e achou prioritária a criação de um novo grupo para trabalhar na evolução do HTML. Tinha nascido finalmente o HTML5!

1.2

PRINCÍPIOS ASSOCIADOS AO HTML5

A visão delineada para o HTML5 assenta num conjunto de princípios. Em primeiro lugar, e como vimos na secção anterior, o HTML5 tenta manter a compatibilidade com as versões anteriores sempre que tal for possível. Este será, talvez, o princípio fundamental que serviu de guia aos trabalhos do grupo. Afinal, para que esta especificação tenha o sucesso desejado, é importante permitir a convivência com cerca de 20 anos de HTML, onde nem todas as páginas respeitaram as regras definidas em especificações anteriores.

Outro dos princípios seguidos prende-se com o reconhecimento de que o utilizador não deve ser prejudicado por markup inconsistente (sempre que tal seja possível). Por isso, e como veremos em seguida, a especificação flexibilizou várias regras introduzidas pelo XHTML (ex.: a definição do atributo id de um elemento pode ser feita de qualquer uma das formas seguintes id=”teste” e ID=teste).

O HTML5 reforçou os esforços iniciados nas versões anteriores da linguagem e melhorou o suporte da separação entre conteúdo e apresentação. Por outras palavras, o autor de páginas HTML deve recorrer a elementos para definir conteúdos e determinar todo o aspeto gráfico de cada um desses elementos através da utilização de CSS (Cascading Style Sheets).

A simplificação da sintaxe foi outra das preocupações consideradas na escrita da especificação do HTML5. Como veremos no Capítulo 2 (onde analisamos algumas das novidades semânticas introduzidas pela

linguagem), a sintaxe de muitos dos elementos introduzidos anteriormente foi simplificada, facilitando, assim, o trabalho dos autores de páginas.

Finalmente, o grupo que escreveu a especificação não se esqueceu de referir o “acesso universal” a páginas HTML5. Para tal, trabalhou em conjunto com outros grupos para suportar a acessibilidade, facilitando, desta forma, o consumo de informação por parte de utilizadores com deficiências (que, geralmente, usam agentes – user agents – especiais para interpretarem o HTML de uma página). Para além disso, tentaram ainda garantir o correto processamento de páginas HTML em diferentes plataformas e dispositivos.

O que é a WAI-ARIA? A especificação WAI-ARIA (Accessible Rich Internet Application Suite) tenta adaptar o conteúdo Web de uma página, cada vez mais rico e dinâmico, tornando-o acessível a pessoas com deficiências. A especificação introduz vários atributos que podem ser usados para definir a forma como, por exemplo, as opções de um menu são apresentadas num user agent usado por pessoas com deficiência. O leitor interessado poderá obter mais informação sobre esta especificação em http://bit.ly/lhTqz.

1.3

AFINAL, O QUE É O HTML5?

Atualmente, a sigla HTML5 é usada para descrever uma vasta gama de funcionalidades definidas em várias especificações. Na verdade, alguns dos tópicos analisados neste livro não pertencem à especificação do HTML5 (ex.: geolocalização). Estas funcionalidades foram, de facto, introduzidas na especificação desenvolvida pelo grupo WHATWG, mas, depois, foram “movidas” para as suas próprias especificações de forma a poderem ter a atenção necessária.

Mas, então, o que é o HTML5? Neste livro, quando falamos no HTML5, referimo-nos a várias funcionalidades introduzidas pelas últimas

especificações do HTML, CSS e JavaScript. Ou seja, estamos a seguir a tendência internacional de reutilizar a sigla como sinónimo para a nova geração de aplicações Web.

Quais os browsers que suportam o HTML5?

Ainda faltam alguns anos até a especificação do HTML5 ser definitiva. Atualmente, a versão atual da especificação está no estado Candidate Recommendation (http://bit.ly/1ny3GHp). Quando uma especificação chega a este estado, isto significa que o grupo responsável pela sua manutenção está satisfeito com as funcionalidades definidas por essa especificação. Portanto, apesar de as alterações ainda serem possíveis, as principais funcionalidades descritas encontram-se fechadas e o grupo procura obter feedback sobre a melhor forma de implementar as funcionalidades descritas pela especificação. O lançamento desta versão marca a estabilização de uma especificação que, mesmo em draft, tem vindo a ser seguida pela maioria dos browsers. Atualmente, cada browser encontra-se num determinado nível de compatibilidade com a especificação, não havendo garantias sobre a implementação de todas as funcionalidades introduzidas pela especificação.

Ao longo dos capítulos, vamos apresentar várias estratégias que permitem detetar se uma determinada funcionalidade é, ou não, suportada. Contudo, existem alguns sites úteis que disponibilizam informações sobre a compatibilidade dos browsers atuais com cada uma dessas funcionalidades. Um desses sites é o http://caniuse.com. Outra boa opção é o site http://www.html5test.com/, que efetua uma avaliação do browser que carrega a página principal de teste desse site.

1.4

ESTRUTURA BÁSICA DE UMA PÁGINA HTML

Antes de terminarmos o primeiro capítulo, temos ainda tempo e espaço para construirmos a nossa primeira página de HTML. O excerto seguinte ilustra uma página muito simples: HTML

<!DOCTYPE html> <html> <head> <title>Olá HTML5</title> </head> <body> <h1>Primeira página de HTML5</h1> <p>Olá mundo!</p> </body> </html>

O leitor experiente terá, porventura, notado que esta página simplifica imenso a markup usada nas versões anteriores (ex.: instrução DOCTYPE). Todas as páginas de HTML5 devem usar uma instrução de processamento DOCTYPE semelhante à anterior para indicarem que a página deve ser processada de acordo com as regras definidas na especificação do HTML5.

A história da instrução DOCTYPE De acordo com a “lenda”, a Microsoft deparou-se com um problema interessante durante o desenvolvimento do IE5. Com as alterações efetuadas, a nova versão do browser tinha, de facto, melhorado imenso a sua compatibilidade com o standard HTML. Contudo, surgiu um problema: as páginas antigas deixaram de ser renderizadas corretamente. Na verdade, não era um problema do browser, mas sim das próprias páginas, que tinham sido construídas de forma incorreta. Como o IE4 conseguia renderizá-las corretamente (ou melhor, incorretamente), todos esperavam que esse comportamento se mantivesse com a nova versão do IE. Portanto, apesar de a nova versão do browser estar muito mais próxima da especificação existente na época, ninguém quereria refazer milhares de páginas HTML que tinham sido construídas de forma incorreta, mas que funcionavam perfeitamente no IE4.

Se a Microsoft quisesse que o seu browser continuasse a ser líder de mercado, teria de fazer algo para resolver a situação. E foi aí que se lembraram de utilizar a instrução DOCTYPE para definir o tipo de processamento a aplicar a uma página.

Antes de iniciar o processamento do HTML da página, o browser tentava encontrar a instrução DOCTYPE (colocada sempre como primeiro elemento da página).

Se não fosse encontrada, então o conteúdo da página deveria ser tratado no chamado quirks mode (ou seja, deveria ser processado como no IE4). Por outro lado, se a instrução fosse encontrada, então o HTML seria tratado no modo standard, de acordo com as regras definidas no standard do HTML4.

Não demorou muito tempo até que os restantes browsers reutilizassem esta ideia.

Como consequência, passámos a ter muitos modos de renderização (demasiados até!). Os interessados em ler um pouco mais sobre os vários DOCTYPE e suas implicações podem consultar http://bit.ly/m0PVv.

O elemento html é usado sempre como elemento de topo de uma página HTML e delimita outros dois elementos: head e body. No interior do elemento head, é também normal definirmos o elemento title, que indica o título da página atual. Para além desse elemento, podemos ainda encontrar outros, como, por exemplo, base, meta, style, script ou link.

O conteúdo HTML renderizado pelo browser encontra-se sempre no interior do elemento body. No exemplo anterior, limitámo-nos a usar um elemento h1 para definir o cabeçalho da nossa página e um elemento p para delimitar o conteúdo do único parágrafo da nossa página.

1.4.1 ELEMENTOS E ATRIBUTOS Como vimos, o conteúdo de uma página HTML é definido através de vários elementos, que, por sua vez, são representados por tags. Existem elementos que possuem tag de início e de encerramento, e outros que apenas possuem a tag de início. Ao contrário do que acontecia com o XHTML, a capitulação usada nos nomes dos elementos não é importante (ou seja, os nomes head e HEAD identificam precisamente o mesmo