HTML5 em Ação

Rob Crowther | Joe Lennon | Ash Blue | Greg Wanish

Novatec

Original English language edition published by Manning Publications Co., Copyright © 2013 by Manning Publications Co.. Portuguese-language edition for Brazil copyright © 2014 by Novatec Editora. All rights reserved.

Edição original em inglês publicada pela Manning Publications Co., Copyright © 20103 pela Manning Publications Co.. Edição em português para o Brasil copyright © 2014 pela Novatec Editora. Todos os direitos reservados. © Novatec Editora Ltda. 2014.

Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora.

Editor: Rubens Prates Tradução: Aldir José Coelho Corrêa Revisão gramatical: Marta Almeida de Sá Editoração eletrônica: Carolina Kuwabata ISBN: 978-85-7522-399-4 OG20141110 Histórico de impressões: Novembro/2014

Primeira edição

Novatec Editora Ltda.

Rua Luís Antônio dos Santos 110 02460-000 – São Paulo, SP – Brasil Tel.: +55 11 2959-6529 Email: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec

capítulo 1

HTML5: de documentos a aplicativos

Este capítulo aborda • Os aspectos básicos do uso de HTML5 • Novos recursos de mídia e marcação semântica • Novas APIs JavaScript • Especificações web relacionadas O HTML5 é um dos tópicos mais falados do desenvolvimento web, e por uma boa razão. Além de ser a última versão da linguagem de marcação da web, também define um padrão totalmente novo para o desenvolvimento de aplicativos web. Versões anteriores do HTML (e de seu rígido parente com base em XML, o XHTML) enfocavam principalmente o conceito de HTML como uma linguagem de marcação para documentos. O HTML5 é a primeira versão a adotar a web como uma plataforma para o desenvolvimento de aplicativos web.

A nova versão define uma série de novos elementos que você pode usar para desenvolver aplicativos de Internet rica assim como um conjunto de APIs JavaScript padrão para os navegadores implementarem nativamente. Um bom exemplo dos novos elementos do HTML5 é <video>, que fornece um meio de reproduzirmos conteúdo de vídeo no navegador sem necessidade de um plugin adicional. O HTML5 também fornece a Media Element Interface que nos permite controlar a reprodução de vídeo com JavaScript. Podemos criar jogos, construir aplicativos móveis e muito mais.

25

26

HTML5 em ação

Neste capítulo, você aprenderá • Os excelentes recursos novos introduzidos no HTML5 e como usá-los imediatamente em seus aplicativos web.

• Como fornecer alternativas e soluções provisórias para usuários com navegadores mais antigos ou incompatíveis.

• Como usar as funções e os microdados do ARIA (Accessible Rich Internet Applications) para melhorar a semântica de suas páginas HTML. • O amplo conjunto de APIs JavaScript disponível no próprio HTML5, assim como várias especificações de APIs intimamente relacionadas que você pode usar em seus aplicativos.

No fim do capítulo, você terá uma ideia abrangente do que o HTML5 tem a oferecer e poderá usá-lo em seus próprios aplicativos web.

Documentos (HTML4) versus aplicativos (HTML5) Inicialmente a web só tinha documentos. Os formulários foram adicionados pelo navegador Mosaic em 1993, mas só havia entrada de dados; toda a lógica do aplicativo permanecia no servidor. A introdução de JavaScript em 1995 tornou teoricamente possível a existência de aplicativos com base no navegador, mas a ideia só foi realmente adotada após a chegada do objeto XMLHTTPRequest em 1999. A última grande versão da especificação HTML, a de número 4.01, só se tornou uma recomendação em 1999.

Logo, não é de surpreender que a especificação 4.01 ainda se dedicasse quase totalmente ao uso de marcação para descrever documentos, o que normalmente agora chamamos de marcação semântica.

Levou tempo para surgir a nova versão do HTML, e enquanto isso a web mudou muito. Como você verá nas seções a seguir, o HTML5 apresenta melhorias na área de marcação semântica. No entanto a maioria das diferenças e melhorias do HTML5 em relação ao HTML4 está nos recursos para a construção de aplicativos com base em navegador com o uso de JavaScript. Por isso, e porque este livro é dedicado aos novos recursos do HTML5, passamos muito mais tempo lidando com JavaScript do que com marcação. É claro que vamos abordar alguma marcação, mas, como você verá, o JavaScript é a grande estrela do HTML5.

Para começar, mostraremos como você pode se atualizar com a criação de um documento HTML5.

Capítulo 1 ■ HTML5: de documentos a aplicativos

27

1.1 Explorando a marcação: um passeio relâmpago pelo HTML5 A melhor maneira de aprender o que há de novo no HTML5 é passar logo à utilização. O objetivo desta seção é não só fazer uma demonstração de alto nível dos novos recursos, mas também lhe dar conhecimento suficiente para que você possa atualizar seus aplicativos para usarem convenções HTML5 sem prejudicar usuários que não tenham os navegadores mais recentes e melhores.

Nesta seção, você aprenderá • Como criar uma estrutura de documento HTML5 básica.

• Como usar os novos elementos de semântica para estruturar uma página.

• Como lidar com versões mais antigas do Internet Explorer que não reconheçam os novos elementos.

• Os novos recursos de formulários que podem ser implementados imediatamente em HTML5.

• Como usar os novos elementos de UI, como as barras de progresso e as seções colapsáveis.

Começaremos examinando a estrutura básica de um documento HTML5. Se não estiver interessado no básico, você pode ler rapidamente até chegar à seção 1.2, que vai além da marcação semântica e entra no ambiente HTML5.

1.1.1 Criando a estrutura básica de um documento HTML5 Os documentos HTML5 são estruturados da mesma forma que nas versões anteriores do HTML: colocamos uma declaração <!DOCTYPE> no topo do documento e abrimos e fechamos o documento HTML com as tags <html> e </html> correspondentes. Entre essas tags, há uma seção <head>, onde inserimos informações <meta> e outros itens não referentes ao conteúdo, como folhas de estilos, e uma seção <body>, onde o conteúdo da página deve entrar. Se você já criou páginas ou aplicativos HTML, não há novidades aqui, mas é preciso conhecer algumas diferenças sutis, que abordaremos nesta seção: • A sintaxe da declaração DOCTYPE em HTML5.

• Como usar o elemento de abertura <html>.

• Como usar as versões mais curtas dos diversos elementos na seção <head>.

Vejamos mais detalhadamente essas diferenças examinando hello.html, o equivalente HTML5 a um aplicativo “Hello, World!”, mostrado na listagem a seguir.

28 u

HTML5 em ação

Listagem 1.1 hello.html – A estrutura básica de um documento HTML5

<!DOCTYPE html> ❶ <html lang="en"> ❷ <head> <meta charset="utf-8"> ❸ <title>Hello, HTML5!</title> <link rel="stylesheet" href="style.css"> ❹ <script src="app.js"></script> ❺ </head> <body> <h1>Hello, HTML5!</h1> </body> </html> ❶ A

declaração DOCTYPE em HTML5 é curta – não precisamos lembrar de DTDs e URLs ridiculamente longos. Ela força o uso do modo-padrão em todos os navegadores modernos, logo, você pode começar a usá-la em seus aplicativos imediatamente, sem consequências negativas.

❷

O atributo xmlns do XHTML não é válido na serialização de HTML do HTML5, logo, não use-o (consulte a caixa de observação “HTML e XML”). Você deve sempre usar o atributo lang para especificar o idioma de seus documentos.

❸

Agora o elemento <meta> dá suporte a um atributo charset, permitindo o uso de uma sintaxe mais fácil de lembrar do que a antiga combinação de atributos http-equiv e content para a definição do conjunto de caracteres da página (nesse caso, estamos usando o Unicode de 8 bits). É bom ressaltar que, na serialização de XML do HTML5, essa tag precisa ter autofechamento (como em <meta charset="utf-8"/>). Consulte a caixa de observação “HTML e XML” para ver mais detalhes.

❹

Todos os navegadores modernos assumem que o elemento <link> de uma folha de estilos é de tipo text/css por padrão, logo, você pode omitir esse atributo seguramente em seus documentos HTML5.

❺

Os navegadores assumem que os elementos <script> sejam de tipo text/javascript, logo, você não precisa especificar o atributo a menos que não o esteja usando para código JavaScript.

Essa é uma estrutura de página básica. A seguir, mostraremos como você deve usar os novos elementos semânticos para construir uma página – nesse caso, o exemplo de uma página de postagem de um blog.

Capítulo 1 ■ HTML5: de documentos a aplicativos

29

HTML e XML Versões anteriores do que consideramos como especificação HTML eram ou para HTML ou para XHTML. A marcação HTML foi projetada para ser abrangente, enquanto o XHTML foi construído a partir de XML e de um rigoroso modelo de análise. O XHTML exigia que todos os elementos tivessem tags de fechamento (<br/> em vez de <br>, por exemplo) e todas as tags e os atributos estivessem em letras minúsculas. Um único erro fazia a página inteira falhar. Devido a essa manipulação de erros draconiana, a maioria dos sites nunca implementou apropriadamente o XHTML. Eles tendiam a usar formulários na sintaxe XHTML, mas enviar páginas com um tipo de conteúdo text/html, causando uma análise HTML na marcação XML. O HTML5 unifica tudo em uma única especificação, permitindo serializações tanto de HTML quanto de XML; isto é, a especificação fornece um vocabulário que pode ser expresso em HTML ou XML. A serialização do XHTML deve ser enviada com um tipo de conteúdo XML, como application/xml+xhtml. Ela também obedece às regras de análise XML em vez de HTML, requerendo uma declaração xlmns, tags de fechamento e assim por diante. No download de códigos há duas versões adicionais da listagem 1.1 mostrando a mesma marcação em código XHTML válido e inválido: hello-invalid.xhtml, que usa sintaxe HTML em um documento XML e hello-valid. xhtml, que corrige a marcação para um XML válido.

1.1.2 Usando os novos elementos semânticos Se você leu sobre HTML5 antes de comprar este livro, deve ter ouvido muita coisa sobre os novos elementos semânticos. Eles são importantes, principalmente se você quiser que mecanismos de busca e tecnologias assistenciais como os leitores de tela entendam melhor suas páginas, mas não são mais difíceis de usar do que os elementos que você conhece e aprecia no HTML4.

Não se empolgue muito com esse novo conjunto de tags. Se você espera que esses novos elementos façam alguma mágica em termos de sua aparência na página, vai se decepcionar. O uso dos novos elementos em uma página é equivalente em funcionalidade ao uso de uma série de elementos <div>; eles se comportam como elementos de bloco por padrão e podem ser estilizados como necessário com o uso de CSS. Sua importância vem do significado semântico padrão que eles têm.

Considere, por exemplo, um post de blog típico, em que a página web contém várias seções. Primeiro, você teria o cabeçalho e a navegação do site, talvez alguma navegação por barra lateral, uma área de conteúdo principal, uma área de rodapé com links de navegação adicionais e talvez alguns links de direitos autorais e conteúdo legal. A listagem a seguir demonstra como o post desse blog poderia ter sido marcado em HTML4 ou XHTML.

30 u

HTML5 em ação

Listagem 1.2 html4-blog.html – Marcação HTML4 para o post de um blog

<div class="header"> <h1>My Site Name</h1> <h2>My Site Slogan</h2> <div class="nav"> <ul><!-- A navegação principal entra aqui --></ul> </div> </div> <div class="sidebar"> <h3>Links Heading</h3> <ul><!-- Links de barra lateral --></ul> </div> <div class="main"> <h4>Blog Post Title</h4> <div class="meta"> Published by Joe on 01 May 2011 @ 12:30pm </div> <div class="post"> <!-- Post do blog --> </div> </div> <div class="footer"> <ul><!-- Links de rodapé --></ul> <!-- Informações de direitos autorais --> </div>

O código anterior não está errado. É perfeitamente válido usá-lo em HTML5 e é claro que você pode continuar usando elementos <div> com nomes de classe semânticos se quiser. Mas, do ponto de vista semântico, essa abordagem traz dois problemas: • Usando o padrão antigo, acabamos separando áreas do post usando classes nomeadas. Isso é correto, mas a convenção de nomeação de classes é definida pelo autor. O que para nós é “header” para você pode ser “heading”; chamamos a seção principal de “main”, mas você poderia chamá-la de “body” ou “article”.

• Algumas pessoas podem preferir usar IDs em vez de classes. Elas poderiam usar id="header" enquanto outras usariam class="header".

Capítulo 1 ■ HTML5: de documentos a aplicativos

31

Resumindo, um mecanismo de busca ou outro aplicativo controlado por computador não tem como determinar de maneira confiável o que cada seção representa. É aí que os novos elementos semânticos entram em cena. Em vez de usar classes e IDs para seções como cabeçalhos, navegação e rodapés, agora você pode usar vários elementos HTML diferentes, mostrados na listagem a seguir. Adicione esse código entre as tags <body> do arquivo hello.html. u

Listagem 1.3 html5-blog.html – Marcação HTML5 para o post de um blog

<header> ❶ <hgroup> ❷ <h1>My Site Name</h1> ❸ <h2>My Site Slogan</h2> </hgroup> <nav> <ul><!-- A navegação principal entra aqui --></ul> ❹ </nav> </header> <nav> <h1>Links Heading</h1> <ul><!-- Links de barra lateral --></ul> </nav> <section> ❺ <article> ❻ <header> <h1>Blog Post Title</h1> <div class="meta"> Published by Joe on <time datetime="2012-05-01T12:30+00:00"> ❼ 01 May 2012 @ 12:30pm ❽ </time> ❼ </div> </header> <section> <!-- Post do blog --> </section> </article> </section>

32

HTML5 em ação

<footer> ❾ <ul><!-- Links de rodapé --></ul> <!-- Informações de direitos autorais --> </footer> ❶ Elemento

reutilizável para o título e outros detalhes importantes (nome do post, permalink, metainformações).

❷ Cabeçalhos

numerados de grupo (<h1> a <h6>).

❸ Você

pode ter um <h1> em <hgroup> e outro <h1> em <article>. A estrutura de cabeçalho não funciona da mesma forma que no HTML4.

❹ Seção

de links dentro da página. A especificação diz que só os “blocos de navegação principais” devem usar o elemento <nav>, como a barra de navegação principal ou o sumário.

❺ Define

um bloco de conteúdo, como a seção principal de um artigo de wiki ou um formulário importante. As seções podem ter seus próprios cabeçalhos, navegação e rodapés.

❻ Marca

um componente publicável autônomo, que pode ser redistribuído independentemente, como no caso de entradas RSS, posts de blogs, comentários, posts de fóruns, novas entradas e assim por diante. Elementos <article> também permitem cabeçalhos, navegação e elementos de rodapé.

❼ É

difícil analisar datas, devido às diversas maneiras como elas podem ser apresentadas. <time> permite que você apresente o formato data/hora de sua preferência para o usuário junto a um valor que os computadores possam entender facilmente no atributo datetime.

❽

Se o atributo datetime for usado, o conteúdo do elemento <time> poderá ter o texto que você quiser (por exemplo, "next Tuesday"), mas se ele for omitido, o conteúdo terá de ser um formato de data e/ou hora válido (consulte o apêndice B para ver exemplos).

❾ Geralmente

esse elemento aparece na parte inferior de uma página ou seção, usado para coisas como posts ou links relacionados, informações de direitos autorais e metadados.

dois outros importantes elementos html: <aside> e <mark>

Não queremos prosseguir sem mencionar dois outros importantes elementos HTML que você usará muito: <aside> e <mark>. Você pode usar o elemento <aside> para estabelecer uma seção da página que seja separada da área de conteúdo em que é definida.

Capítulo 1 ■ HTML5: de documentos a aplicativos

33

Em um livro ou uma revista, a seção pode ser representada como uma barra lateral contendo informações sobre o mesmo tópico que não se enquadrem muito bem no artigo principal. Por exemplo, se você tivesse um blog, poderia haver anúncios ao lado dos posts – eles poderiam ser inseridos em um elemento <aside>. Em um aplicativo web, você pode usar <aside> para uma janela pop-up ou flutuante que apareça sobre a parte principal do aplicativo.

O elemento <mark> pode ser usado para representar uma parte do texto de seu documento que deva ser marcada ou realçada. Um uso comum para esse recurso seria no realce dos termos de uma pesquisa dentro do documento.

Com os novos elementos semânticos, além de a marcação ficar com uma aparência mais limpa, os spiders dos mecanismos de busca e as tecnologias assistenciais também entenderão as páginas mais facilmente. Falar de tecnologias assistenciais nos leva a nosso próximo tópico importante: os papéis do ARIA.

1.1.3 Melhorando a acessibilidade usando papéis do ARIA Ao construir aplicativos web, você deve assegurar que seu aplicativo possa ser acessado por todos os usuários, inclusive os que precisem de tecnologias assistenciais como os leitores de tela. Assegurar que seus documentos sejam acessíveis requer um cuidado especial no que diz respeito ao significado semântico da marcação.

Usar uma marcação HTML simples torna essa tarefa relativamente fácil, e os novos elementos HTML5 melhoram ainda mais a semântica. Mas quando você estiver criando aplicativos web, será muito mais difícil se adequar à tecnologia assistencial. A crescente quantidade de código JavaScript usada na modificação dinâmica de páginas web nos aplicativos web modernos torna muito mais difícil distribuir acessibilidade somente através de uma boa marcação. É aí que entram em cena os padrões da Web Accessibility Initiative (WAI) e do ARIA. A especificação WAI-ARIA visa melhorar os aplicativos web expandindo as informações de acessibilidade fornecidas pelo autor de um documento HTML. Os papéis, relacionamentos, estados e as propriedades do ARIA permitem que você defina exatamente como seu aplicativo web funciona de uma maneira que uma tecnologia assistencial como um leitor de tela possa entender. Se, por exemplo, você construir uma lista suspensa a partir de uma entrada de texto e uma lista não ordenada, poderá aplicar o papel combobox do ARIA ao elemento de entrada para que ele seja renderizado apropriadamente no dispositivo do usuário. A listagem a seguir mostra um exemplo desse estilo de marcação tirado diretamente da especificação WAI-ARIA 1.0.

34 u

HTML5 em ação

Listagem 1.4 Exemplo do papel combobox do ARIA tirado de www.w3.org/TR/wai-aria/roles#combobox

<input type="text" aria-label="Tag" role="combobox" ❶ aria-autocomplete="list" ❷ aria-owns="owned_listbox"> ❸ <ul role="listbox" ❹ id="owned_listbox"> ❺ <li role="option">Zebra</li> <li role="option">Zoom</li> </ul> ❶ O atributo role permite que você declare que tipo de widget está manipulando. ❷

O ARIA tem vários tipos de autoconclusão; nesse caso, uma lista fornecerá os valores das opções.

❸ O ❹

elemento que fornece as opções de autoconclusão terá essa ID.

A lista não ordenada tem o papel listbox, para complementar o tipo fornecido na anotação do ARIA.

❺ Essa

ID corresponde à fornecida anteriormente.

A especificação HTML5 declara explicitamente que podemos usar os atributos role e aria-* do ARIA em elementos HTML como descrito na especificação do ARIA; isso não era permitido em HTML4. O HTML5 também define um conjunto de papéis padrão do ARIA aplicáveis a certos elementos HTML. Por exemplo, é sugerido que o elemento <input> de uma caixa de seleção terá um papel checkbox do ARIA, e você não deve usar explicitamente atributos role ou aria-* diferentes dos sugeridos nesse caso.

Você também encontrará elementos HTML onde a semântica nativa pode ser modificada para que eles se comportem diferentemente. Por exemplo, você poderia criar um elemento <a> que se comportasse como um botão e usá-lo para enviar um formulário após executar alguma validação. A especificação HTML5 define uma lista de semânticas válidas para esses elementos. Quando você usar o elemento <a> para criar um hiperlink, ele assumirá o papel link por padrão, e se for modificado, seu papel só poderá ser alterado para um dos descritos a seguir: button, checkbox, menuitem, menuitemcheckbox, menuitemradio, tab ou treeitem.

Para ver uma lista completa das semânticas-padrão sugeridas do ARIA, e as restrições a como você pode modificar a semântica de certos elementos, consulte a seção do WAI-ARIA na especificação HTML5 em http://mng.bz/6hb2.

Capítulo 1 ■ HTML5: de documentos a aplicativos

35

1.1.4 Permitindo o suporte no Internet Explorer versões 6 a 8 Um assunto que pode lhe preocupar, e com razão, no que diz respeito aos elementos HTML5 é a compatibilidade com navegadores mais antigos. Cada nova versão do HTML traz com ela novos elementos que podemos usar nos documentos. O HTML5 não é diferente. A maioria dos navegadores modernos é mais do que capaz de renderizar esses elementos, até mesmo em versões que não lhes deem suporte especificamente. A maneira como a maioria dos navegadores manipula elementos não reconhecidos é renderizando-os como simples elementos <span> inline. Só é preciso configurá-los para exibir block with CSS. Infelizmente, o Internet Explorer (IE) é uma exceção. Em versões anteriores ao IE9, o navegador renderizava elementos não reconhecidos, mas não permitia que fossem estilizados com o uso de Folhas de Estilo em Cascata (CSS). Como você pode imaginar, isso torna difícil começar a usar os novos elementos HTML5 em um aplicativo de produção, porque os usuários ainda podem estar usando o IE6, 7 ou 8. renderizando os novos elementos apropriadamente no ie

Ainda bem que esse problema tem uma solução simples. Se quiser usar o elemento <header> em sua página e precisar aplicar estilos CSS, inclua o fragmento a seguir na seção <head> da página. Isso forçará o IE a aplicar as regras CSS à tag, mesmo se a versão do IE usada não der suporte a um elemento específico nativamente: <!--[if lte IE 8]> <script>document.createElement("header");</script> <![endif]-->

Você terá de executar um equivalente dessa instrução JavaScript para cada elemento específico do HTML5 que quiser usar em sua página. Assim fará com que o IE versões 6 a 8 renderize o estilo corretamente, com o problema persistindo se tentar imprimir a página. renderizando os novos elementos apropriadamente em páginas impressas pelo ie

Felizmente, uma solução conhecida como IE Print Protector resolve o problema da impressão. Mas, em vez de reinventar a roda, recomendamos que você use um script HTML shiv. O HTML5 shiv mais popular foi criado originalmente por Remy Sharp e desde então foi aperfeiçoado por outras pessoas. Para ver mais informações e obter a última versão do script, acesse http://mng.bz/50dt.

36

HTML5 em ação ATENÇÃO: A solução HTML5 shiv requer JavaScript. Se quiser uma solução sem JavaScript, use a solução equivalente com base em XML do HTML5. Consulte o post de Eric Klingen sobre o assunto em http://mng.bz/QBIw.

O que mais você pode fazer para incrementar seus aplicativos usando HTML5?

Que tal integrar recursos fáceis que modernizem seus formulários? Mesmo estando em todos os lugares, em HTML5 isso não significa que eles tenham de ser tediosos e singelos.

1.1.5 Introduzindo os novos recursos de formulários do HTML5 Raramente ele recebe crédito, mas o simples formulário web tem desempenhado um papel importante na transformação da web em uma plataforma para o desenvolvimento de aplicativos. O direcionamento do HTML5 aos aplicativos web levou a muitas melhorias nos formulários web, e você pode usar todas hoje, sem romper a compatibilidade com navegadores web mais antigos. melhorando a semântica de entrada de dados usando os novos tipos de entrada dos formulários

O campo de texto básico tem sido usado para finalidades que vão muito além de seus recursos primitivos. Da mesma forma que o elemento <div> foi usado em HTML4 para qualquer tipo de conteúdo de bloco, a entrada de texto é usada para qualquer tipo de entrada textual. O HTML5 tenta facilitar sua carga oferecendo vários tipos novos e com compatibilidade regressiva, todos apresentando melhorias em relação ao campo de texto simples. A Tabela 1.1 identifica os novos tipos de entrada em HTML5.

Tabela 1.1 – Os novos tipos de entrada dos formulários introduzidos no HTML5 color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

Você pode usar esses novos tipos de entrada em suas páginas web imediatamente porque os navegadores mais antigos usarão um tipo de entrada de texto padrão quando encontrarem um tipo que não entendam. Alguns dos novos tipos de entrada também permitem que os navegadores forneçam widgets-padrão para determinados tipos de campos de formulário. A figura 1.1 mostra exemplos desses novos widgets.

Capítulo 1 ■ HTML5: de documentos a aplicativos

37

Figura 1.1 – Exemplos de alguns dos novos widgets de entrada de formulário introduzidos no HTML5. É bom ressaltar que não são todos os navegadores que já dão suporte aos widgets.

No capítulo 2, você conhecerá o Modernizr, um script HTML5 de detecção de recursos. Usando o Modernizr, você poderá detectar se um navegador dá suporte a um determinado tipo de entrada, fornecendo um widget alternativo com JavaScript se necessário.

38

HTML5 em ação

novos atributos para a alteração do comportamento dos campos

Além dos novos tipos de campo dos formulários, o HTML5 introduz dez atributos comuns, mostrados na tabela 1.2, que nos permitem alterar o comportamento de um campo específico. O atributo placeholder é um exemplo de um desses novos atributos e nos permite definir o texto que aparecerá no campo antes de ele conter um valor. Isso é ilustrado na figura 1.2.

Figura 1.2 – Você pode usar o novo atributo placeholder para fornecer um fragmento de texto para ser exibido em um campo quando ele estiver vazio. Normalmente esse texto aparece em cinza e é removido quando o campo é preenchido com um valor.

A tabela 1.2 fornece uma lista dos novos atributos de entrada introduzidos no HTML5. Você verá que atributos são aplicados a que tipos de entrada no capítulo 2.

Tabela 1.2 – Novos atributos do elemento de entrada do HTML5 autocomplete

autofocus

list

multiple

pattern placeholder required

max

min

step

novos atributos para a execução de validação no lado do cliente

Alguns desses atributos permitem que o navegador execute validação no lado do cliente sem JavaScript. Por exemplo, o atributo required especifica que um campo deve ser preenchido ou o navegador gerará um erro. O atributo pattern nos permite definir uma expressão regular de acordo com a qual o valor da entrada será testado. Os atributos max e min nos permitem restringir os valores máximo de mínimo nos tipos de campos number e date.

Além disso, o navegador executará a validação em alguns dos novos tipos de entrada para avisar aos usuários se eles tiverem inserido valores no formato incorreto.

Se o usuário inserir um endereço de email inválido em um campo de entrada email, por exemplo, o navegador indicará o erro e impedirá que o formulário seja enviado para o servidor.

ATENÇÃO: Você nunca deve confiar somente na validação no lado do cliente, seja ela a nova validação HTML5 nativa do navegador ou um código de validação JavaScript. É fácil burlar a validação no lado do cliente, logo, você deve sempre verificar a entrada no lado do servidor. A validação no lado do cliente deve ser usada para melhorar a experiência do usuário e não como segurança do aplicativo.

Capítulo 1 ■ HTML5: de documentos a aplicativos

39

Você aprenderá muito mais sobre os novos tipos e atributos de entrada no capítulo 2. Primeiro, mostraremos os outros novos elementos introduzidos no HTML5 que você pode integrar fácil e imediatamente em seus aplicativos.

1.1.6 Barras de progresso, medidores e conteúdo colapsável O HTML5 define uma série de novos elementos que você pode usar para dar informações para o usuário. São widgets, como barras de progresso, medidores e seções colapsáveis, que no passado os desenvolvedores precisavam tirar de bibliotecas JavaScript de terceiros. usando barras de progresso para exibir o percentual de conclusão

O elemento <progress> nos permite apresentar para o usuário uma barra de progresso determinada ou indeterminada. Uma barra de progresso determinada tem um valor específico e é preenchida até esse valor – isso é útil para exibir o progresso do upload de um arquivo, em que atualizamos dinamicamente o valor da barra de progresso à medida que ocorre o upload. Uma barra de progresso indeterminada não tem um valor específico e a barra aparece cheia, mas animada – ela é útil para informar ao usuário que o aplicativo está sendo carregado quando você não tiver certeza do progresso exato da operação. Um exemplo dos dois tipos de barra de progresso é mostrado na figura 1.3.

Figura 1.3 – A barra de progresso da esquerda é um exemplo de barra determinada.

Nesse exemplo, o valor da barra está configurado com 50% e a aparência reflete isso porque está preenchida até a metade. A barra de progresso da direita é uma barra indeterminada e não tem um valor. Ela é exibida como uma barra cheia e animada para indicar que algo está ocorrendo, mas o percentual de conclusão não é conhecido.

O código para a criação das barras de progresso da figura 1.3 é o seguinte: <progress value="50" max="100"></progress> ❶ <progress></progress> ❷ ❶ A

barra de progresso determinada deve ter um valor e opcionalmente um atributo max.

❷ A barra

de progresso indeterminada não tem um valor.

40

HTML5 em ação

usando medidores para exibir medidas dentro de intervalos conhecidos

O elemento <meter> segue o mesmo caminho do elemento <progress>. Você usaria o elemento <progress> principalmente para exibir o percentual de conclusão de uma tarefa e usaria o elemento <meter> para fornecer a representação de uma medida escalar dentro de um intervalo conhecido. Além de exibir o valor usando um gráfico de barras preenchido, o elemento <meter> permite definir os intervalos baixo, alto e ótimo que você pode usar para dar mais exatidão. Quando o valor está no intervalo baixo, o medidor é exibido em vermelho; no intervalo médio, ele é exibido em amarelo; e nos intervalos alto e ótimo, é exibido em verde. A figura 1.4 ilustra as aparências que o elemento <meter> pode ter.

Figura 1.4 – Uma tomada de tela dos estados em que você pode representar um elemento <meter>: vazio, baixo, médio, alto e cheio.

A seguir temos o código do elemento <meter> da figura 1.4: <meter <meter <meter <meter <meter

min="0" min="0" min="0" min="0" min="0"

max="10" max="10" max="10" max="10" max="10"

low="3" low="3" low="3" low="3" low="3"

high="7" high="7" high="7" high="7" high="7"

optimum="9" optimum="9" optimum="9" optimum="9" optimum="9"

value="0"></meter> ❶ value="1"></meter> value="4"></meter> value="7"></meter> value="10"></meter>

❶ Defina os intervalos de um medidor usando os atributos min, max, low, high e optimum.

usando details e summary para criar conteúdo colapsável sem javascript

No passado, a única maneira de criar seções de conteúdo colapsáveis era usando JavaScript para alternar a propriedade CSS display da seção e exibi-la ou ocultá-la. O HTML5 introduziu os elementos <details> e <summary> como um meio de proporcionar essa funcionalidade sem script. A figura 1.5 ilustra esses novos elementos em ação:

Capítulo 1 ■ HTML5: de documentos a aplicativos

41

Figura 1.5 – Um exemplo dos elementos <details> e <summary> em ação, primeiro no estado fechado, em que só o código do elemento <summary> fica visível, e depois no estado aberto, em que todo o conteúdo do elemento <details> pode ser visto.

O código que cria o exemplo de <details> e <summary> é: <details> <summary>Section Heading</summary> This is an example of using &lt;details&gt; and &lt;summary&gt; to create collapsible content without using JavaScript. </details>

Infelizmente, o suporte dos navegadores a esses novos elementos tem sido bem lento até agora. Felizmente, é simples fornecer uma alternativa com o uso de JavaScript e várias podem ser encontradas em http://mng.bz/cJhc. Usando as técnicas aprendidas nesta seção, você deve poder atualizar seus aplicativos para que usem convenções HTML5 sem produzir um impacto negativo sobre os usuários que não tiverem o navegador mais moderno. Na próxima seção, aprenderá como levar as coisas um passo adiante indo além da marcação HTML e usando conceitos relacionados como CSS3 e JavaScript para melhorar o estilo e a interatividade de seus documentos.

1.2 Além da marcação: padrões web adicionais Como mencionamos, a web não é mais apenas para documentos; é uma plataforma para o desenvolvimento de aplicativos. Portanto o HTML5 não inclui apenas marcação para a descrição da estrutura de documentos; ele também engloba muitos outros recursos e especificações associadas para assegurar que os aplicativos tenham uma ótima aparência e forneçam a melhor experiência possível para o usuário. Um exemplo disso são os microdados e a API Microdata associada, que permitem que você forneça semânticas adicionais em seus documentos e depois as recupere e modifique. Outro exemplo é o CSS3; suas folhas de estilos aperfeiçoadas permitem que você aplique o que há de mais novo em estilização e efeitos – sem depender de imagens externas e hacks JavaScript.

42

HTML5 em ação

Nesta seção, você aprenderá • Como usar microdados e vocabulários de microdados para fornecer aos mecanismos de busca melhores informações sobre suas páginas.

• A API de microdados do DOM que permite a recuperação e a modificação dinâmica de itens de microdados com o uso de JavaScript.

• Vários dos novos recursos CSS3 que permitem melhorar o apelo visual dos aplicativos e ao mesmo tempo fornecem melhor interação e feedback para o usuário.

• Como o HTML5 considera o JavaScript um recurso de primeira classe com especificações detalhadas e APIs avançadas.

Para começar, examinemos os microdados.

1.2.1 Microdados Os microdados do HTML5 permitem que você adicione informações semânticas a uma página web, que por sua vez podem ser usadas por aplicativos como mecanismos de busca e navegadores web no fornecimento de funcionalidades adicionais para o usuário com base nesses dados. Um exemplo de como o Google usa microdados para fornecer resultados de pesquisa inteligentes é ilustrado na figura 1.6.

Figura 1.6 – O Google lê microdados de documentos HTML para fornecer melhores resultados de pesquisa para os usuários. Usando microdados em suas páginas, você permitirá que o Google forneça listagens de resultados de pesquisa semelhantes para seu site ou aplicativo.

Para usar microdados, você precisa de um vocabulário que defina a semântica a ser usada. Você pode definir seus próprios vocabulários, mas provavelmente vai querer usar um vocabulário publicado, como os fornecidos pelo Google em www.data-vocabulary.org/, que incluem Event, Organization, Person, Product,

Capítulo 1 ■ HTML5: de documentos a aplicativos

43

Review, Review-aggregate, Breadcrumb, Offer e AggregateOffer. Usando um vocabulário publicado, você terá certeza de que os mecanismos de busca e outros aplicativos interpretarão seus microdados consistentemente.

A listagem 1.5 ilustra os microdados em ação usando um item de evento que adota o vocabulário Event do Google tirado de www.data-vocabulary.org/Event. Essa listagem cria um fragmento de código HTML para um evento, com a definição de propriedades de microdados que permitirão que um mecanismo de busca interprete sem ambiguidade as informações do evento e use-as para melhorar os resultados da pesquisa, talvez exibindo a data do evento em um calendário ou como um local em um mapa. u

Listagem 1.5 html5-microdata.html – Os microdados em ação

<div itemscope itemtype="http://data-vocabulary.org/Event"> ❶ <a href="http://example.com/event/1" itemprop="url"> ❷ <span itemprop="summary">John's 40th Birthday Party</span> </a> <span itemprop="description">To celebrate John turning 40, we're throwing a BBQ party in his honour this Friday evening at close of business. Please come and bring your friends and family!</span> Location: <span itemprop="location"

itemscope

itemtype=http://data-vocabulary.org/Address> <span itemprop="street-address">500 Market Way</span> <span itemprop="locality">Ballincollig</span> <span itemprop="region">Cork</span> </span> Date and Time: <time itemprop="startDate" datetime="2011-05-06T18:00+00:00"> Fri, May 6th @ 6pm </time> </div> ❶ O atributo itemscope informa ao analisador que esse elemento e tudo que existe

dentro dele descrevem a entidade que está sendo referenciada. O valor desse atributo é booleano e geralmente é omitido. O atributo itemtype define o URL em que o vocabulário para o item que está sendo especificado é encontrado.

44

HTML5 em ação

❷ O

atributo itemprop indica o nome da propriedade de microdados à qual o conteúdo do elemento deve ser atribuído. Esse atributo é o que provavelmente você usará mais quando estiver trabalhando com microdados.

A especificação HTML5 também define uma API do DOM que você pode usar para recuperar e modificar itens de dados dinamicamente usando JavaScript. As descrições da API são fornecidas na tabela 1.3.

Tabela 1.3 – A API de microdados do DOM Método/propriedade

Descrição Obtém todos os elementos que sejam itens de microdados de nível superior (elementos com um atributo itemscope). Você pode document.getItems([types]) usar o argumento types para filtrar por um ou mais valores do atributo itemtype.

Obtém todas as propriedades (elementos com um atributo element.properties itemprop) de um determinado item de microdados (element). element.itemValue [= value] Obtém ou configura o valor da propriedade de um item.

Usar microdados é uma ótima maneira de melhorar como seu aplicativo (ou documento) aparecerá nos resultados de pesquisas. Na próxima seção, você aprenderá como pode usar o CSS3 para tornar seu aplicativo visualmente interessante com os novos estilos e efeitos que ele tem para oferecer.

1.2.2 CSS3 Se você já faz desenvolvimento na web há muito tempo, deve se lembrar de quando a estilização de documentos HTML era facilitada pelo uso de elementos como <font> e o uso inteligente de elementos <table>. A introdução das Folhas de Estilo em Cascata tornou essas abordagens desnecessárias.

Com a evolução da web, os desenvolvedores inventaram novas maneiras de apresentar conteúdo, usando efeitos como sombras projetadas, cantos arredondados e degradês para melhorar o apelo visual de seus aplicativos. Mais impressionante ainda foi o uso de transição e animação para prover o usuário com um feedback e uma interação melhores. O principal problema de todas essas maravilhosas melhorias é que tradicionalmente sua implementação requeria alguns artifícios com o uso de imagens e JavaScript (ou pelo menos o uso de uma biblioteca JavaScript).

O CSS3 surgiu para mudar isso. A tabela 1.4 lista alguns dos novos recursos de estilo disponíveis em CSS3 – todos sem JavaScript ou o uso inteligente de imagens.

Capítulo 1 ■ HTML5: de documentos a aplicativos

45

Tabela 1.4 – Uma lista parcial dos novos recursos CSS3 Novos seletores

Novas pseudoclasses

Bordas arredondadas Imagens de borda Dimensionamento Dimensionamento de caixa de plano de fundo

Degradês

Sombra de caixa

Sombra de texto

Quebra automática Múltiplas colunas de linha

Fontes da web

Múltiplos planos de Canais de cor alfa fundo

Consultas de mídia

Estilo de voz

Transições

Transformações 3D

Transformações 2D

Animações

À medida que você percorrer os exemplos deste livro, aprenderá a construir aplicativos usando principalmente HTML e JavaScript. Usamos CSS3 na estilização, mas não o examinaremos nos capítulos. Você pode baixar o código CSS de todos os exemplos a partir da página web do livro. Se quiser obter uma visão mais detalhada do CSS3, procure em Hello! HTML5 and CSS3 (Manning, 2012). Rob Crowther, o autor, é um dos coautores do livro que você tem em mãos.

1.2.3 O JavaScript e o DOM O JavaScript e o Document Object Model (DOM) desempenham um papel muito importante nos aplicativos web modernos. A possibilidade de interagir dinamicamente com elementos da página permitiu que os desenvolvedores fornecessem rica funcionalidade e interatividade anteriormente encontradas apenas em aplicativos desktop. O advento do Asynchronous JavaScript and XML (AJAX) eliminou a necessidade das atualizações de página, permitindo que ações no lado do servidor sejam atualizadas inline, o que fornece uma experiência de usuário muito melhor. O JavaScript Object Notation (JSON) se tornou o formato-padrão de intercâmbio de dados para aplicativos web e a maioria das linguagens e frameworks de servidor já dá suporte a ele nativamente. Além disso, surgiram poderosos frameworks e bibliotecas para fornecer uma abstração de JavaScript que permite que os desenvolvedores se preocupem menos com as inconsistências entre navegadores existentes nos primórdios do desenvolvimento web e se concentrem mais na construção de aplicativos altamente funcionais.

ATENÇÃO: Todos os capítulos do livro mostram como construir aplicativos poderosos com o uso de HTML5 e JavaScript. Mas este não é um livro para iniciantes em JavaScript. No mínimo, você deve conhecer a sintaxe e aspectos básicos do JavaScript como as declarações de variáveis, instruções condicionais, funções, closures. callbacks e escopos assim como outros conceitos como AJAX, JSON e a interação com o DOM. Se você tiver experiência no uso de bibliotecas

46

HTML5 em ação JavaScript como o jQuery, deve conseguir acompanhar. Para aprender mais sobre JavaScript ou se estiver se sentindo desatualizado, leia o livro Ajax in Action (Manning, 2005) de David Crane, Eric Pascarello e Darren James e Segredos do Ninja JavaScript (Novatec, 2013) de John Resig e Bear Bibeault.

Em versões anteriores da especificação HTML (e XHTML), a única menção feita ao JavaScript aparecia em uma seção menor sobre o uso do elemento <script> e alguns dos atributos que poderiam ser adicionados a elementos HTML para fornecer funcionalidade de manipulação de eventos. Em HTML5, o JavaScript é tratado como um recurso de primeira classe, com cada seção da especificação detalhando quais métodos e propriedades de APIs do DOM estão disponíveis para cada elemento. Além disso, o HTML5 define APIs avançadas que permitem que você desenvolva aplicativos que usem áudio e vídeo, trabalhem offline, armazenem dados localmente no cliente e muito mais. Abordaremos essas APIs brevemente mais adiante neste capítulo e com mais detalhes no decorrer do livro.

HTML5 vs. HTML Living Standard vs. HTML5 para desenvolvedores web A especificação HTML5 tem uma longa história. Se não nos prendermos a detalhes, o resultado final é que ela tem duas versões, ambas com o mesmo editor: Ian Hickson do Google. A especificação HTML5 é publicada pelo W3C, enquanto a especificação HTML Living Standard é publicada pelo WHATWG (Web Hypertext Application Technology Working Group). Para deixar as coisas ainda mais confusas, o WHATWG também publicou um documento, “HTML5: A technical specification for web developers”, que é mais conciso e fácil de ler.

As especificações são semelhantes em muitos aspectos, mas você encontrará diferenças consideráveis. Por exemplo, a especificação HTML Living Standard inclui várias APIs que são publicadas como especificações totalmente separadas pelo W3C, como Microdata, Web Storage e Web Workers. Para ver as últimas diferenças entre as especificações, consulte “Is this HTML5?” na especificação HTML Living Standard em http://mng.bz/PraC. Neste capítulo, estamos tratando das APIs que existem no HTML Living Standard como “parte do próprio HTML5” e de qualquer API de fora dessa especificação separadamente. Conforme você avançar no livro, verá que não estamos tão preocupados com as diferenças e que todas as novas especificações são tratadas como pertencentes ao “HTML5”. Para ver uma discussão adicional sobre as diferenças entre as versões do WHATWG e do W3C assim como as diferenças de abordagem entre esses dois grupos, consulte o Apêndice A.

Na próxima seção, examinaremos as APIs do DOM incluídas atualmente na especificação HTML5.

Capítulo 1 ■ HTML5: de documentos a aplicativos

47

1.3 As APIs do DOM incluídas no HTML5 Existem APIs do DOM para quase tudo em HTML5. Na verdade, muitas já existem há bastante tempo, mas nunca foram definidas na especificação HTML. Elas incluem recursos que nos permitem acessar um elemento do DOM por seu atributo ID e manipular valores de elementos de formulário. Tudo isso foi incluído no HTML5 e a especificação também define novas APIs do DOM para o desenvolvimento de aplicativos avançados, muitas das quais não estão de forma alguma associadas a elementos HTML.

Esta seção fornece uma visão geral das novas APIs do DOM incluídas no HTML5: • • • • • • • • •

Canvas 2D (2D Canvas) Áudio e vídeo (Audio and Video) Arrastar e soltar (Drag and Drop) Troca de mensagens entre documentos (Cross-Document Messaging) Eventos enviados pelo sevidor (Server-Sent Events) WebSockets Edição de documentos (Document Editing) Armazenamento web (Web Storage) Aplicativos web offline (Offline Web Applications)

Abordaremos todos esses tópicos com mais detalhes no decorrer do livro, com exemplos totalmente funcionais que geralmente integram várias APIs ao mesmo tempo. Neste capítulo, você terá uma visão geral do que está para vir, começando com o novo elemento <canvas> e a API associada.

1.3.1 Canvas O HTML5 fornece vários elementos que nos permitem apresentar informações em uma página web. Podemos estilizá-los de muitas maneiras diferentes e usar JavaScript para animá-los e aplicar efeitos dinâmicos. Se você se sente confortável com códigos JavaScript complexos (e acha que seus usuários estarão executando navegadores de alto desempenho), saiba que é possível fazer coisas fantásticas com HTML e JavaScript.

O problema é que os designers e desenvolvedores podem querer implementar algo que o HTML não forneça. E se você quiser inserir um círculo, um quadrado ou outra forma? E se quiser exibir uma imagem e alterá-la dinamicamente de acordo com as seleções do usuário? Você poderia usar imagens estáticas ou uma solução no lado do servidor, mas essas alternativas não são ótimas. A única solução viável tem sido usar um plugin de terceiros como o Adobe Flash.

48

HTML5 em ação

O HTML5 introduz o elemento <canvas> e uma série de APIs de desenho relacionadas que permitirão que você faça coisas maravilhosas, sem requerer que o usuário instale um plugin. O nome do elemento <canvas> descreve bem esse novo recurso: ele é uma tela para o desenho de páginas web. A figura 1.7 mostra um jogo, “Canvas Break”, que criamos totalmente em HTML5 e JavaScript, com os recursos visuais do jogo sendo exibidos em um elemento <canvas>. Excelente, não?

Você aprenderá como usar a API Canvas ao construir esse jogo por sua própria conta no capítulo 6.

Figura 1.7 – O elemento <canvas> permite que os desenvolvedores apresentem informações de maneiras mais criativas. Você aprenderá como construir esse jogo no capítulo 6.

A API Canvas define um contexto 2D, que fornece uma série de métodos para o desenho na tela. São métodos para a criação de formas, definição de caminhos, uso de cores e degradês, fornecimento de texto e muito mais. A API também fornece para os desenvolvedores uma maneira de exportar o conteúdo atual da tela como uma imagem no formato PNG ou JPG usando URLs de dados ou objetos Blob.

1.3.2 Áudio e vídeo Grande parte da banda larga da Internet nos últimos anos tem sido direcionada à distribuição de conteúdo multimídia: vídeo e áudio. Atualmente, a maioria dos vídeos da web é distribuída no formato de vídeo Flash (FLV), um contêiner do Adobe Flash para vários tipos de codec de vídeo. Se os usuários tiverem um plugin Flash instalado, poderão ver o vídeo. Alguns desenvolvedores levantaram questões sobre a segurança e o desempenho do Flash como plataforma para a distribuição de vídeo e estão procurando soluções alternativas. Além disso, a falta de suporte ao Flash nos dispositivos móveis significa que se você quiser que seu conteúdo multimídia esteja disponível em dispositivos como o iPad, isso não vai ocorrer.

Capítulo 1 ■ HTML5: de documentos a aplicativos

49

O HTML5 fornece uma solução para isso com os novos elementos <video> e <audio>, que permitem que arquivos multimídia com suporte sejam reproduzidos nativamente pelo navegador, sem a necessidade de plugins de terceiros. Um exemplo é mostrado na figura 1.8.

Figura 1.8 – Vídeo sobre HTML5 do YouTube em ação. Como você pode ver pelo código no inspetor, o vídeo do YouTube dessa tomada de tela não usa o plugin Adobe Flash e é totalmente implementado com o uso do elemento HTML5 <video> e de APIs relacionadas.

Tanto o elemento <video> quanto o elemento <audio> dão suporte ao elemento <track>, que você pode usar para distribuir conteúdo de texto associado, como as legendas.

Você pode usar o elemento <source> para fornecer vários formatos de arquivo e assegurar que os visitantes consigam desfrutar do conteúdo, independentemente do sistema operacional ou navegador que estiverem usando.

O HTML5 também define uma API com uma série de métodos para o controle da reprodução de um arquivo de vídeo ou áudio. São métodos para reprodução, pausa, avanço, retrocesso, ajuste do volume e outros. Você conhecerá essas APIs com detalhes quando construir uma jukebox de vídeo funcional com recursos de teleilustração no capítulo 8.

1.3.3 Arrastar e soltar A falta de interatividade fornecida pelo recurso de “arrastar e soltar” é um problema que há muito tempo aflige os desenvolvedores de aplicativos web. Esse tipo de funcionalidade tem predominado em aplicativos desktop desde o surgimento das UIs gráficas. Como resultado, os usuários esperam poder arrastar objetos pelos aplicativos e às vezes ficam surpresos ao ver que seus aplicativos web favoritos não fazem isso.

50

HTML5 em ação

As tentativas de implementar o recurso de arrastar e soltar no navegador começaram no fim dos anos 90, com o Netscape 4.0 fornecendo uma implementação básica e a Microsoft vindo a seguir com uma oferta mais completa no IE 5.0. Na época, ela foi vista como uma extensão do IE, não padrão e específica do navegador, mas com o tempo outros fornecedores de navegador adotaram a mesma API, levando à sua eventual inclusão no HTML5.

A boa notícia é que o recurso de arrastar e soltar do HTML5 tem suporte em todos os navegadores modernos, inclusive no IE desde a versão 5.0. E a má notícia é que a implementação original da Microsoft que foi usada é, na verdade, terrível. Ian Hickson, o editor da especificação HTML5, uma vez tuitou: “A API de arrastar e soltar é horrível, mas tem uma coisa a seu favor: o IE a implementa, assim como o Safari e o Firefox.”

Para usar o recurso de arrastar e soltar em HTML5, você pode empregar o atributo draggable em um elemento para definir explicitamente que ele pode ser arrastado.

(Muitos elementos, como as imagens, podem ser arrastados por padrão.) Você pode então usar uma série de eventos para escutar alterações quando o usuário arrastar o elemento para dentro e para fora de outros elementos e, claro, quando o usuário soltar o elemento. A API permite que você defina os dados que deseja associar à operação de arrastar e leia-os novamente ao soltar.

Um novo recurso da operação de arrastar e soltar do HTML5 é que você pode arrastar arquivos de seu computador e soltá-los em um aplicativo web. Um exemplo dessa funcionalidade pode ser visto no Gmail, como mostrado na figura 1.9.

Figura 1.9 – O Gmail permite que você arraste arquivos para a janela do navegador e solte-os em uma área designada para adicioná-los como anexos a suas mensagens.

Você aprenderá como usar o recurso de arrastar e soltar para importar e exportar arquivos a partir de um aplicativo no capítulo 3.

Capítulo 1 ■ HTML5: de documentos a aplicativos

51

1.3.4 Troca de mensagens entre documentos, eventos enviados pelo servidor e WebSockets Os aplicativos web funcionam em um modelo de solicitação e resposta em que o cliente emite uma solicitação para o servidor e esse envia uma resposta para o cliente. Se depois o cliente precisar de mais informações do servidor, ele tem de iniciar outra solicitação. Isso torna difícil enviar alterações do servidor para o cliente sem ser preciso enviar frequentemente solicitações para a procura dessas alterações. Nesta seção, você conhecerá alguns dos novos recursos de troca de mensagens do HTML5 que permitem que o servidor se comunique com o cliente. Mas antes examinaremos como usar a troca de mensagens para enviar atualizações entre documentos. permitindo a comunicação entre clientes com a troca de mensagens entre documentos e por canais

Quando trabalhar com aplicativos web que usem múltiplas janelas do navegador, com frequência você vai querer passar mensagens entre os documentos de cada janela. Normalmente, isso era feito com o uso da manipulação direta do DOM. Por exemplo, um sistema antigo de reservas aéreas poderia abrir um widget de calendário em uma nova janela do navegador, e quando o usuário clicasse em uma data, ele manipularia diretamente o valor do campo de data do formulário na janela-pai.

Um problema da manipulação direta do DOM é que ela conecta diretamente os dois documentos; cada documento precisa ter um conhecimento detalhado da estrutura do outro documento para manipularem um ao outro e compartilhar informações.

O HTML5 fornece uma solução muito melhor na forma da troca de mensagens entre documentos e da troca de mensagens por canais, ilustrada na figura 1.10.

A troca de mensagens entre documentos permite que os documentos se comuniquem um com o outro via mensagens – um documento envia uma mensagem e o outro tem um manipulador de eventos registrado para escutar qualquer mensagem enviada pelo primeiro documento.

Outro problema da manipulação direta do DOM surge se considerarmos a segurança da inclusão de arquivos de script remotos no aplicativo – um caso de uso comum na implementação de coisas como os botões “Curtir” do Facebook e do Google Analytics nos aplicativos. Esses scripts têm acesso total ao DOM – não é possível dar a eles apenas acesso parcial quando carregados dessa forma. A troca de mensagens entre documentos funciona entre domínios, permitindo que mensagens sejam enviadas entre os aplicativos sem expormos o DOM de cada aplicativo.

52

HTML5 em ação

Figura 1.10 – Um aplicativo simples que demonstra a troca de mensagens por canais.

Você o construirá no apêndice J, um dos apêndices que acompanham o capítulo 4. permitindo comunicações unidirecionais do servidor para o cliente com eventos enviados pelo servidor

A troca de mensagens entre documentos é um ótimo meio de comunicação entre dois clientes – mas e se você quiser permitir que seu servidor web envie mensagens que possam ser lidas pelo navegador? Os eventos enviados pelo servidor foram projetados para isso. Usando a interface EventSource, seu aplicativo poderá se registrar em um fluxo de eventos do lado do servidor, que só receberá mensagens quando o servidor enviar uma atualização. Essa é uma melhoria considerável em comparação com abordagens como a sondagem longa do AJAX, que pode ser difícil de implementar. Ela funciona bem para um aplicativo de bate-papo, em que você pode postar novas mensagens usando o AJAX e receber mensagens de outros usuários pelo fluxo de eventos. A figura 1.11 é uma tomada de tela desse tipo de aplicativo, que você construirá posteriormente.

Figura 1.11 – Um aplicativo de bate-papo implementado com o uso de eventos enviados pelo servidor.

Capítulo 1 ■ HTML5: de documentos a aplicativos

53

permitindo comunicações bidirecionais entre servidor e cliente com websockets

A desvantagem óbvia dos eventos enviados pelo servidor é que eles só facilitam a comunicação unidirecional – as mensagens só podem ser enviadas do servidor para o cliente, e não vice-versa. Se você precisa de comunicação bidirecional, o HTML5 fornece os WebSockets – bare-bones em rede entre clientes e servidores, sem o overhead associado ao HTTP. Os WebSockets são ótimos para a passagem de pequenas quantidades de dados rapidamente, o que é crucial em aplicativos como os jogos multiplayer online e sistemas financeiros de tempo crítico.

No capítulo 4, você aprenderá como usar todas essas três novas tecnologias de troca de mensagens ao construir um aplicativo de bate-papo simples e um quadro de planejamento multiusuário, com o uso de eventos enviados pelo servidor e WebSockets via Node.js, e permitir que eles se comuniquem através da troca de mensagens entre documentos.

1.3.5 Edição de documentos Anteriormente neste capítulo, falamos sobre os novos recursos de formulário do HTML5. Os formulários web são uma ótima maneira de capturar entradas de usuário simples sem criptografia, mas eles não permitem que o usuário edite conteúdo HTML. É claro que você poderia carregar o código-fonte HTML em um elemento <textarea> e permitir que o usuário o editasse, mas não seria ótimo se pudesse permitir que o usuário editasse o conteúdo usando uma série de controles de edição de rich-text?

O HTML5 define dois novos atributos que nos permitem fornecer a edição de rich-text em documentos HTML. O primeiro, contenteditable, pode ser definido em qualquer elemento HTML da página para tornar esse elemento editável. O segundo, designMode, pode ser definido no próprio documento HTML para tornar o documento inteiro editável.

Esses atributos têm suporte em todos os navegadores modernos e foram introduzidos originalmente pela Microsoft no IE 5.5.

Quando um elemento ou documento é editável, podemos manipular seu conteúdo usando o método document.execCommand, que faz parte da API de edição do DOM incluída no HTML5. Esse método aceita uma ampla seleção de comandos que serão aplicados à seleção ou ao bloco atual, como Bold, Italic, CreateLink e muitos outros. Um exemplo do tipo de editor que você pode criar com essa funcionalidade é mostrado na figura 1.12; e o que é melhor, você aprenderá como usar esses novos recursos quando construir o editor de rich-text no capítulo 3.

54

HTML5 em ação

Figura 1.12 – O aplicativo Super HTML5 Editor que você aprenderá a construir no capítulo 3 usa o atributo designMode e a API de edição do DOM para permitir que os usuários editem marcação HTML usando um conjunto de controles de edição de rich-text. A barra de ferramentas dessa tomada de tela permite que você use os comandos de formatação Bold, Italic, Underline, Strikethrough, List, Link e Image no conteúdo da área abaixo da barra.

1.3.6 Armazenamento web Por muitos anos, os aplicativos web usaram cookies para armazenar no cliente pequenos grupos de dados que persistiam durante a sessão ou entre várias sessões. Essa é a tecnologia existente por trás dos sistemas de autenticação na web – eles armazenam no cliente um cookie que contém algum tipo de identificador usado para que o aplicativo saiba quem fez login. Os cookies apresentam vários problemas, que os tornam menos úteis para o armazenamento de qualquer coisa que não seja os grupos menores de dados.

O primeiro problema é que a maioria dos navegadores limita o tamanho dos cookies a 4 quilobytes e o número de cookies armazenados por domínio a 20. Ao alcançar esses limites, o navegador começa a descartar os cookies mais antigos para abrir caminho para os mais novos, o que significa que não há garantia de que os manterá. Outro problema é que, quando um aplicativo usa cookies, eles

Capítulo 1 ■ HTML5: de documentos a aplicativos

55

são enviados em cada solicitação HTTP feita para a sessão, adicionando overhead a todas as transações. Isso talvez não seja um problema se você estiver usando um ou dois cookies, mas e se usar vários? E considere que os cookies serão enviados junto com cada solicitação HTTP – retardando cada carregamento de página e solicitação AJAX que seu aplicativo fizer.

A API Web Storage do DOM fornece um substituto JavaScript aos cookies para ser usado nos aplicativos web. Ela define duas interfaces: • sessionStorage – Armazenamento de dados no lado do cliente que só persiste durante a sessão atual • localStorage – Armazenamento de dados no lado do cliente que persiste por várias sessões Essas APIs expõem métodos que permitem que os desenvolvedores armazenem simples dados de pares chave/valor em um depósito no lado do cliente. Os itens de dados armazenados com o uso dessas interfaces só podem ser acessados por páginas do mesmo domínio. No capítulo 5, você construirá o aplicativo mostrado na figura 1.13, que armazena configurações de usuário no armazenamento local.

Figura 1.13 – No capítulo 5, você aprenderá como usar a interface localStorage para fazer as configurações do usuário persistirem em um aplicativo móvel de gerenciamento de tarefas.

Embora a API Web Storage possa armazenar megabytes de dados (5 megabytes é o limite imposto pela maioria dos navegadores), ela não é ideal para o armazenamento de estruturas de dados complexas que normalmente seriam armazenadas em

56

HTML5 em ação

um banco de dados. Posteriormente neste capítulo, você conhecerá o IndexedDB, que define uma API de banco de dados totalmente indexado para o armazenamento de dados localmente no cliente.

1.3.7 Aplicativos web offline Atualmente, parece que estamos permanentemente online – nossas conexões de Internet estão sempre ativas, nossos dispositivos móveis têm planos de dados que operam por redes de dados de celular, e agora podemos nos conectar até mesmo em viagens aéreas. Mesmo assim, em alguns momentos ainda podemos ter de conseguir trabalhar offline. Sua conexão de rede pode estar inoperante ou você poderia estar no exterior e não querer pagar taxas exorbitantes de roaming de dados. Também poderia estar usando um dos poucos dispositivos que não têm conexão de dados wireless. Há muito tempo já existem soluções para o salvamento de documentos HTML para uso offline. Embora sejam úteis para a leitura de conteúdo estático, como notícias, elas são inúteis quando se trata de aplicativos web. O HTML5 dá um passo adiante no salvamento de documentos, dando aos desenvolvedores a oportunidade de definir um arquivo de manifesto de cache para estabelecer como os arquivos de seus aplicativos devem ser armazenados em cache para uso offline.

O arquivo de manifesto de cache também pode definir os arquivos que não devem ser armazenados em cache para uso offline. Nesse caso, uma alternativa pode ser fornecida para ser carregada pelo navegador quando o usuário estiver offline. Isso permite que você forneça arquivos separados para uso online e offline.

Um exemplo de caso de uso poderia ser o de um aplicativo que salvasse dados no banco de dados de um servidor. Quando online, o aplicativo executaria solicitações AJAX para recuperar e atualizar dados nesse banco de dados. Em segundo plano, ele armazenaria dados localmente em um banco de dados IndexedDB, sobre o qual falaremos em uma seção posterior. Quando o usuário estivesse offline, o aplicativo carregaria um arquivo JavaScript projetado especificamente para uso no modo offline. Em vez de disparar solicitações AJAX para o servidor, ele recuperaria e modificaria os dados no banco de dados IndexedDB local. Na próxima vez que o usuário se conectasse com a rede, o aplicativo poderia então enviar os dados do banco de dados local para o banco de dados no lado do servidor.

No capítulo 5, você aprenderá como desenvolver o aplicativo web capaz de operar offline mostrado na figura 1.14.

Capítulo 1 ■ HTML5: de documentos a aplicativos

57

Figura 1.14 – Uma tomada de tela do aplicativo móvel com recursos offline que você criará no capítulo 5.

1.4 APIs e especificações adicionais Como já vimos, a família HTML5 não para na especificação HTML5. Existem várias outras tecnologias e especificações que definem novas funcionalidades, que os fornecedores de navegadores modernos estão incluindo regularmente em suas últimas versões, como a API Geolocation; a API IndexedDB; as APIs File Reader, File Writer e File System; o SVG e o WebGL.

Nesta seção, você aprenderá • A API Geolocation e como usá-la para determinar a localização geográfica de um usuário • A API IndexedDB e como ela permite armazenar um bando de dados inteiro no lado do cliente • Especificações orientadas a arquivos e como você pode usá-las para manipular e armazenar arquivos localmente no sistema de arquivos do usuário • O SVG e o WebGL e como eles estão permitindo que os desenvolvedores produzam elementos gráficos vetoriais e animações 3D de altíssima qualidade na web

Falaremos sobre cada especificação auxiliar, mas ainda assim importante, começando com a de geolocalização.

58

HTML5 em ação

1.4.1 API Geolocation À medida que o uso de dispositivos móveis aumentava nos últimos anos, o mesmo ocorria com o uso de aplicativos de informações de localização. Os sensores do Global Positioning System (GPS) encontrados nos smartphones modernos permitem que os aplicativos localizem os usuários com alto grau de precisão. Quando o GPS não está disponível (se o dispositivo não tiver um sensor ou se o usuário estiver fora do alcance do satélite), os dispositivos podem usar alternativamente outros meios de rastrear a localização, usando informações como a rede de celular, a rede Wi-Fi ou o endereço IP. A API Geolocation define métodos que permitem que os aplicativos web encontrem a localização de um usuário. Quando esses métodos são chamados, o navegador informa ao usuário que o aplicativo está solicitando acesso à sua localização. O usuário pode então optar por aceitar ou rejeitar essa solicitação, o que assegura que os aplicativos não rastreiem a localização do usuário sem sua permissão anterior. Se o usuário aceitar a solicitação, a API fornecerá ao aplicativo uma série de dados sobre sua localização, inclusive coordenadas (latitude e longitude), altitude, direção e velocidade, assim como o nível de precisão do resultado.

Você aprenderá a empregar a geolocalização no capítulo 3, onde a usará para obter a localização atual do usuário e incluir um mapa dessa localização em um documento HTML (Figura 1.15).

Figura 1.15 – Adicionando mapas que exibem sua localização atual no aplicativo do capítulo 3.

Capítulo 1 ■ HTML5: de documentos a aplicativos

59

1.4.2 Banco de dados indexado (API IndexedDB) A API IndexedDB fornece aos desenvolvedores um meio de armazenar estruturas de dados complexas em um banco de dados totalmente no lado do cliente.

Sua principal vantagem sobre a API Web Storage é que em Web Storage o único índice é a chave do par chave/valor, enquanto em IndexedDB os valores também são totalmente indexáveis, o que a torna uma solução mais viável para qualquer aplicativo onde seja preciso pesquisar ou filtrar dados. A desvantagem é que a API IndexedDB é muito mais complexa e no início pode ser difícil manipulá-la.

O IndexedDB é relativamente novo na família de especificações HTML5. Houve uma proposta de solução diferente, o Web SQL (Structured Query Language), uma especificação que definia um banco de dados relacional no lado do cliente que usava instruções SQL na consulta e na manipulação de dados. Acabou sendo deixado de lado porque todos os navegadores que o adotaram estavam usando a mesma implementação (um banco de dados SQLite), logo, nunca teria atendido os critérios de padronização do WHATWG e do W3C de haver “duas implementações independentes e interoperáveis de cada recurso”. Quando ele foi abandonado, o suporte já tinha sido incluído em vários navegadores, entre eles navegadores móveis como o Mobile Safari e o Android. O suporte dos navegadores ao IndexedDB tem ocorrido lentamente, e, como resultado, a maioria dos aplicativos que usa o IndexedDB também usa o Web SQL como alternativa.

No capítulo 5, você aprenderá como usar o IndexedDB (com o Web SQL como alternativa) para armazenar dados de tarefas em um aplicativo de tarefas móvel, como ilustrado na figura 1.16.

1.4.3 APIs File, File Reader, File Writer e File System Normalmente é complicado trabalhar com arquivos em aplicativos web. O único meio nativo de permitir que os usuários selecionassem arquivos em seus computadores era usar o tipo de entrada arquivo, que é considerado inadequado, principalmente quando se trata de estilizar a UI do widget. Quando o usuário selecionava um arquivo, o aplicativo tinha de carregá-lo inteiro no servidor para poder fazer algo com ele. Embora estejam disponíveis opções com base em Flash e JavaScript que fornecem uma funcionalidade aperfeiçoada, elas não são ideais, dado que requerem um plugin de terceiros.

60

HTML5 em ação

Figura 1.16 – O aplicativo do capítulo 5 usará o IndexedDB para armazenar uma lista de tarefas e nos permitir classificar e pesquisar rapidamente.

A família HTML5 inclui várias especificações relacionadas com base em arquivos que prometem tornar muito mais fácil o trabalho com arquivos em aplicativos web. A API File permite que os desenvolvedores obtenham uma referência a um objeto arquivo em JavaScript, lendo propriedades como seu nome, tamanho e tipo MIME. Você pode usar a API File Reader para ler um objeto arquivo, em sua totalidade ou parcialmente em blocos. Da mesma forma, pode usar a API File Writer para gravar dados em um arquivo. A API File System permite que os desenvolvedores manipulem objetos arquivo em um sistema de arquivos local protegido no cliente. Isso permite que você execute grande parte da interação com o arquivo no cliente, diminuindo significativamente a carga no servidor. Não é preciso mais fazer o upload do arquivo inteiro no servidor só para descobrir que ele tem o tipo MIME errado e então ter de informar ao usuário que o arquivo não era do tipo certo. É possível imaginar o quanto isso era incômodo para os usuários após eles terem feito o upload de um arquivo grande.

Você usará todas essas APIs para fornecer um sistema de arquivos local completo, e abordaremos onde os arquivos HTML serão armazenados no capítulo 3. Uma tomada de tela de como podemos usar algumas dessas funcionalidades pode ser vista na figura 1.17.

Capítulo 1 ■ HTML5: de documentos a aplicativos

61

Figura 1.17 – O Super HTML5 Editor que você construirá no capítulo 3 lhe permitirá executar operações de arquivo como criar um novo arquivo em branco e importar um arquivo existente selecionando-o ou arrastando-o para o aplicativo. Ele armazenará esses arquivos em um sistema de arquivos local no modo seguro, a partir do qual você poderá visualizar, editar e excluir os arquivos ou exportá-los para seu computador arrastando-os para fora do aplicativo.

1.4.4 Scalable Vector Graphics O Scalable Vector Graphics (SVG) é uma linguagem XML que nos permite criar elementos gráficos vetoriais impactantes usando uma marcação que pode ser estilizada com CSS e manipulada via DOM com o uso de JavaScript. Um dos principais problemas dos elementos gráficos de bitmap é que, quando aumentamos suas dimensões, a qualidade da imagem diminui e produz um resultado “pixelizado”. Os elementos gráficos vetoriais são construídos com o uso de equações matemáticas em vez de pixels e, como resultado, podem ser redimensionados e ficar com uma aparência ótima mesmo em grandes dimensões.

62

HTML5 em ação

No capítulo 7, você aprenderá como usar o SVG construindo o aplicativo SVG Aliens (Figura 1.18), um exercício que ilustra como criar formas e objetos complexos usando o SVG, como implementar a detecção de colisões e quais são as vantagens e desvantagens do uso do SVG sobre o elemento <canvas>.

Figura 1.18 – O jogo SVG Aliens em ação. Você aprenderá a construir esse jogo em sua totalidade posteriormente neste livro.

1.4.5 Web Graphics Library Por fim, mas nem por isso menos importante, temos o Web Graphics Library (WebGL), uma API JavaScript para a criação de elementos gráficos 3D com o uso do elemento <canvas>. O WebGL é com base no padrão Open Graphics Library for Embedded Systems (OpenGL ES), que foi projetado para a implementação de 3D em dispositivos embutidos, inclusive em telefones móveis. Ele fornece aos desenvolvedores uma API que lhes permite controlar hardware gráfico em baixo nível usando shader, buffer e métodos de desenho.

No capítulo 9, você aprenderá não só sobre a API WebGL, mas também sobre a programação de elementos gráficos 3D em geral, inclusive como criar shaders, trabalhar com dados usando buffers, agrupar dados 3D na tela usando a manipulação de matrizes e muito mais. Você executará essas tarefas usando nosso exemplo de aplicativo, que o fará construir um jogo 3D, o Geometry Destroyer, cuja tomada de tela pode ser vista na figura 1.19.

Capítulo 1 ■ HTML5: de documentos a aplicativos

63

Figura 1.19 – O jogo 3D Geometry Destroyer em toda a sua glória. A construção desse jogo é abordada no capítulo 9.

1.5 Resumo O HTML5 é a revisão mais importante do HTML desde seu surgimento em 1991.

Embora o HTML tenha começado como uma linguagem de marcação relativamente simples, desde então se tornou uma plataforma para tarefas complexas de design de páginas web e desenvolvimento de aplicativos web, principalmente quando associado a seus parentes próximos CSS e JavaScript. O HTML5 é a primeira versão da linguagem a reconhecer essa importância e incluir várias APIs JavaScript orientadas a aplicativos dentro da especificação.

No decorrer dos próximos oito capítulos, você aprenderá como construir oito aplicativos diferentes, que vão desde aplicativos móveis que funcionam offline a jogos 3D. No próximo capítulo, deixaremos para trás os conceitos introdutórios e nos aprofundaremos nas vastas melhorias que o HTML5 tem a oferecer aos formulários web, que incluem os novos tipos de entrada que permitem a entrada direcionada de uma variedade muito maior de tipos de dados, novos atributos como autofocus e placeholder, e recursos out-of-the-box que simplificam a validação no lado do cliente.