Post on 20-Oct-2015
HTML5
Curso W3C Escritrio Brasil
Autores: Elcio Ferreira e Diego Eis
NDICE1. VisogeraldoHTML5 7
Hypertexto 7O comeo e a interoperabilidade 8WHAT Working Group 8O HTML5 e suas mudanas 9
O que o HTML5? 9
2. Anlisedosuporteatualpelosnavegadoreseestratgiasdeuso 11O desenvolvimento modular 11Motores de Renderizao 11Compatibilidade com HTML5 12Tcnicas de detectao 13
Utilizando o Modernizr 14
3. Estruturabsica,DOCTYPEecharsets 15O Doctype 15O elemento HTML 16HEAD 16
Metatag Charset 16Tag LINK 17
4. Modelosdecontedo 19Categorias 19Metadata content 20Flow content 20Sectioning content 22Heading content 23Phrasing content 23Embedded content 24Interactive content 24
5. Novoselementoseatributos 27Atributos 30
6. Elementosmodificadoseausentes 31Elementos modificados 31Elementos ou atributos descontinuados 32
7. Novostiposdecampos 33Novos valores para o atributo type 33
tel 33search 33email 33url 33Datas e horas 34number 34range 35color 36
8. Tiposdedadosevalidadores 37Formulrios vitaminados 37
autofocus 37Placeholder text 37required 38maxlength 38
Validao de formulrios 38pattern 39novalidate e formnovalidate 39Custom validators 40
9. Detalhesecontedoeditvel. 43Ainda mais formulrios 43
Detalhes e sumrio 43Contedo editvel 44
10. Drag-n-dropecorreoortogrfica 45Drag and Drop 45Detalhes importantes: 46Reviso ortogrfica e gramatical 47
11. Elementosaudioevideo,ecodecs 49udio 49
Origens alternativas de udio 49Vdeo 50Codecs 50
12. ElementodeviceeStreamAPI 53O elemento device 53Streams 54Peer-to-peer 54
13. MathMLeSVG 55MathML 55SVG 56
14. CanvasAPI 59O elemento canvas 59
Canvas e SVG 61
15. Server-SentEvents 63EventSource 63
O protocolo de comunicao 63
16. DOMeHTML5 65DOM e HTML5 65
Por qu DOM? 65Vamos s diferenas 65
getElementsByClassName 65innerHTML 66activeElement e hasFocus() 66getSelection() 67Intervalos de seleo 68document.head 68Selector API 69Caractersticas especiais de DomNodeList 70Datasets 70
17. NovoseventosDOM 71Uma palavra sobre eventos 71
Elementos multimdia: 71Eventos em campos de formulrio: 72Eventos gerais: 72Drag-and-drop: 73
Atributos de evento 73
18. Menusetoolbars 75O elemento menu 75
Tipos de comando 75O elemento command 76Prefira no usar command, por enquanto 76
19. Tiposdelinks 79Links 79
Metadados de navegao 79Metadados da pgina 80Comportamento dos links na pgina 81
20. Microdata 83Semntica adicional 83Diferentes tipos de dados 85
Falando um idioma comum 87
21. HistricodesessoeAPIStorage 89Histrico de Sesso e API Storage 89
Histrico de Sesso 89localStorage e sessionStorage 91
22. Aplicaesoffline 95Caching 95O objeto ApplicationCache 96Controle de status da aplicao 97
23. Scrollintoviewehidden 99Scrolling into view 99hidden 99
hidden e Javascript 99
24. GeolocationAPI 101Mtodos de Geolocalizao 101
Tratando erros 102No trate a resposta do usurio como um erro 103O objeto de configurao 103watchPosition 103
25. Undo 105O objeto UndoManager 105
Respondendo s aes de undo e redo 106Disparando as aes de undo e redo 106
HTML 5 - Curso W3C Escritrio Brasil 7Markup
1. VISOGERALDOHTML5De acordo com o W3C a Web baseada em 3 pilares:
Um esquema de nomes para localizao de fontes de informao na Web, esse esquema cha-ma-se URI.
Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. Uma linguagem de Hypertexto, para a fcil navegao entre as fontes de informao: o HTML.
Vamos nos focar no terceiro pilar, o HTML.
HypertextoHTML uma abreviao de Hypertext Markup Language - Linguagem de Marcao de Hypertexto.
Resumindo em uma frase: o HTML uma linguagem para publicao de contedo (texto, imagem,
vdeo, udio e etc) na Web.
O HTML baseado no conceito de Hipertexto. Hipertexto so conjuntos de elementos ou ns
ligados por conexes. Estes elementos podem ser palavras, imagens, vdeos, udio, documentos
etc. Estes elementos conectados formam uma grande rede de informao. Eles no esto conecta-
dos linearmente como se fossem textos de um livro, onde um assunto ligado ao outro seguida-
mente. A conexo feita em um hipertexto algo imprevisto que permite a comunicao de dados,
organizando conhecimentos e guardando informaes relacionadas.
Para distribuir informao de uma maneira global, necessrio haver uma linguagem que seja
entendida universalmente por diversos meios de acesso. O HTML se prope a ser esta linguagem.
Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o
Mosaic - browser desenvolvido por Marc Andreessen na dcada de 1990 - ganhou fora. A partir
da, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as
mesmas convenes.
O comeo e a interoperabilidadeEntre 1993 e 1995, o HTML ganhou as verses HTML+, HTML2.0 e HTML3.0, onde foram propostas
diversas mudanas para enriquecer as possibilidades da linguagem. Contudo, at aqui o HTML ain-
da no era tratado como um padro. Apenas em 1997, o grupo de trabalho do W3C responsvel por
manter o padro do cdigo, trabalhou na verso 3.2 da linguagem, fazendo com que ela fosse tratada
como prtica comum. Voc pode ver: http://www.w3.org/TR/html401/appendix/changes.html.
Desde o comeo o HTML foi criado para ser uma linguagem independente de plataformas, bro-
wsers e outros meios de acesso. Interoperabilidade significa menos custo. Voc cria apenas um
cdigo HTML e este cdigo pode ser lido por diversos meios, ao invs de verses diferentes para
diversos dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprie-
tria, com formatos incompatveis e limitada.
Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a in-
formao publicada por meio deste cdigo fosse acessvel por dispositivos e outros meios com ca-
ractersticas diferentes, no importando o tamanho da tela, resoluo, variao de cor. Dispositivos
prprios para deficientes visuais e auditivos ou dispositivos mveis e portteis. O HTML deve ser
entendido universalmente, dando a possibilidade para a reutilizao dessa informao de acordo
com as limitaes de cada meio de acesso.
WHAT Working GroupEnquanto o W3C focava suas atenes para a criao da segunda verso do XHTML, um grupo
chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em
uma verso do HTML que trazia mais flexibilidade para a produo de websites e sistemas basea-
dos na web.
O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como
Mozilla, Apple e Opera em 2004. Eles no estavam felizes com o caminho que a Web tomava e nem
com o rumo dado ao XHTML. Por isso, estas organizaes se juntaram para escrever o que seria
chamado hoje de HTML5.
HTML 5 - Curso W3C Escritrio Brasil 9Markup
Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi includo no HTML5
e o Web Controls 1.0 que foi abandonado por enquanto.
A participao no grupo livre e voc pode se inscrever na lista de email para contribuir.
Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente
pelo W3C - que at ento trabalhavam separadamente - que reconheceu todo o trabalho do grupo.
Em Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o WHATWG na
produo do HTML5 em detrimento do XHTML 2. Contudo o XHTML continuaria sendo man-
tido paralelamente de acordo comas mudanas causadas no HTML. O grupo que estava cuidando
especificamente do XHTML 2 foi descontinuado em 2009.
O HTML5 e suas mudanasQuando o HTML4 foi lanado, o W3C alertou os desenvolvedores sobre algumas boas prticas que
deveriam ser seguidas ao produzir cdigos client-side. Desde este tempo, assuntos como a sepa-
rao da estrutura do cdigo com a formatao e princpios de acessibilidade foram trazidos para
discusses e ateno dos fabricantes e desenvolvedores.
Contudo, o HTML4 ainda no trazia diferencial real para a semntica do cdigo. o HTML4 tam-
bm no facilitava a manipulao dos elementos via Javascript ou CSS. Se voc quisesse criar um
sistema com a possibilidade de Dragn Drop de elementos, era necessrio criar um grande script,
com bugs e que muitas vezes no funcionavam de acordo em todos os browsers.
O que o HTML5?
O HTML5 a nova verso do HTML4. Enquanto o WHATWG define as regras de marcao que
usaremos no HTML5 e no XHTML, eles tambm definem APIs que formaro a base da arquitetura
web. Essas APIs so conhecidas como DOM Level 0.
Um dos principais objetivos do HTML5 facilitar a manipulao do elemento possibilitando o
desenvolvedor a modificar as caractersticas dos objetos de forma no intrusiva e de maneira que
seja transparente para o usurio final.
Ao contrrio das verses anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript faze-
rem seu trabalho da melhor maneira possvel. O HTML5 permite por meio de suas APIs a mani-
pulao das caractersticas destes elementos, de forma que o website ou a aplicao continue leve
e funcional.
O HTML5 tambm cria novas tags e modifica a funo de outras. As verses antigas do HTML
no continham um padro universal para a criao de sees comuns e especficas como rodap,
cabealho, sidebar, menus e etc. No havia um padro de nomenclatura de IDs, Classes ou tags.
No havia um mtodo de capturar de maneira automtica as informaes localizadas nos rodaps
dos websites.
H outros elementos e atributos que sua funo e significado foram modificados e que agora po-
dem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram des-
continuados em verses anteriores do HTML agora assumem funes diferentes e entregam mais
significado para os usurios.
O HTML5 modifica a forma de como escrevemos cdigo e organizamos a informao na pgina.
Seria mais semntica com menos cdigo. Seria mais interatividade sem a necessidade de instalao
de plugins e perda de performance. a criao de cdigo interopervel, pronto para futuros dispo-
sitivos e que facilita a reutilizao da informao de diversas formas.
O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site dever ter de
ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML5 est sendo criado
para que seja compatvel com os browsers recentes, possibilitando a utilizao das novas caracte-
rsticas imediatamente.
HTML 5 - Curso W3C Escritrio Brasil 11Markup
2. ANLISEDOSUPORTEATUALPELOS
NAVEGADORESEESTRATGIASDEUSO
O desenvolvimento modularAntigamente, para que uma nova verso do HTML ou do CSS fosse lanada, todas as ideias listadas
na especificao deveriam ser testadas e desenvolvidas para ento serem publicadas para o uso dos
browsers e os desenvolvedores.
Esse mtodo foi mudado com o lanamento do HTML5 e o CSS3. A partir de agora, as duas tec-
nologias foram divididas em mdulos. Isso quer dizer que a comunidade de desenvolvedores e os
fabricantes de browsers no precisam esperar que todo o padro seja escrito e publicado para utili-
zarem as novidades das linguagens.
As propriedades do CSS3, por exemplo, foram divididas em pequenos grupos. H um grupo cui-
dando da propriedade Background, outro da propriedade Border, outro das propriedades de Texto
e etc. Cada um destes grupos so independentes e podem lanar suas novidades a qualquer mo-
mento. Logo, o desenvolvimento para web ficou mais dinmico, com novidades mais constantes.
O ponto negativo nesse formato, que problemas de compatibilidade podem ocorrer com mais
frequencia. Por exemplo, um browser pode adotar bordas arredondadas e outro no. Ou um bro-
wser pode escolher suportar um API diferente do API que o concorrente implementou. Contudo,
os browsers tem mostrado grande interesse em se manterem atualizados em relao aos seus
concorrentes.
Motores de RenderizaoH uma grande diversidade de dispositivos que acessam a internet. Entre eles, h uma srie de ta-
blets, smartphones, pcs e etc. Cada um destes meios de acesso utilizam um determinado browser
para navegar na web. No h como os desenvolvedores manterem um bom nvel de compatibilida-
de com todos estes browsers levando em considerao a particularidade de cada um. Uma maneira
mais segura de manter o cdigo compatvel, nivelar o desenvolvimento pelos motores de rende-
rizao. Cada browser utiliza um motor de renderizao que responsvel pelo processamento do
cdigo da pgina.
Abaixo, segue uma lista dos principais browsers e seus motores:
Motor Browser
Webkit Safari, Google Chrome
Gecko Firefox, Mozilla, Camino
Trident Internet Explorer 4 ao 9
Presto Opera 7 ao 10
interessante que voc faa cdigo compatvel com estes motores. Focando a compatibilidade nos
motores de renderizao voc atingir uma amplitude maior de browsers.
Por exemplo, se seu cdigo funcionar no Webkit, voc alcanar o Safari e o Chrome, dois dos
principais browsers do mercado para desktops. Alm disso, voc tambm alcana aparelhos como
Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android.
Compatibilidade com HTML5Atualmente o Webkit o motor mais compatvel com os Padres do HTML5. Como a Apple tem
interesse que seus dispositivos sejam ultracompatveis com os Padres, ela tem feito um belo traba-
lho de atualizao e avano da compatibilidade deste motor.
Contudo o Firefox e o Opera j esto compatveis com grande parte da especificao do HTML5 e
CSS3 e a cada upgrade eles trazem mais novidades e atualizao dos padres.
O que pode te preocupar de verdade a retrocompatibilidade com verses antigas de browsers
como o Internet Explorer. A Microsoft est fazendo um bom trabalho com o IE9, mas as verses
8 e 7 no tem quase nenhum suporte ao HTML5, o que um problema srio para aplicaes web
baseadas em tecnologias mais recentes, mas que a base de usurios utiliza as verses antigas do
Internet Explorer.
HTML 5 - Curso W3C Escritrio Brasil 13Markup
Abaixo segue uma tabela simples de compatibilidade entre os browsers e alguns mdulos do
HTML5:
Safari Chrome Opera Firefox IE8 IE9
LocalStorage s s s s s s
HistricodeSesso s s s s s s
AplicaesOffline s s n s n n
Novostiposdecampos s s s n n n
Form:Autofocus s s s n n n
Form:Autocomplete n n s n n n
Form:Required s s s n n n
Video,AudioeCanvasText s s s s n s
Tcnicas de detectaoPode ser que o usurio no utilize um browser que suporta HTML5. Neste caso, voc pode redire-
cion-lo para uma verso do site mais simples, ou talvez apenas mostrar uma mensagem alertando
o usurio sobre a importncia da atualizao do browser. Para isso temos algumas tcnicas de de-
tectao para conferir se o browser suporta ou no HTML5.
Quando o browser visita um website, ele constri uma coleo de objetos que representam ele-
mentos HTML na pgina. Cada elemento no cdigo representado no DOM como um objeto
diferente. Todo objeto DOM tem propriedades em comum, mas alguns objetos tem caractersticas
especficas. Usaremos estes objetos para fazermos a detectao. Abaixo segue 4 meios que voc
poder utilizar para detectar o suporte do browser:
1. Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou
NAVIGATOR. Nesse caso, verificamos o suporte a geolocalizao.
2. Crie um elemento e verifique se uma determinada propriedade existe neste elemento.
3. Crie um elemento e verifique se um determinado mtodo existe neste elemento, ento cha-
me o mtodo e verifique se o valor retorna. Por exemplo, teste quais formatos de vdeo so
suportados.
4. Crie um elemento e defina um atributo com um determinado valor, ento verifique se o atri-
buto suporta este valor. Por exemplo, crie um input e verifique quais types so suportados.
Utilizando o Modernizr
O Modernizr (http://www.modernizr.com/) uma biblioteca de detectao que lhe permite veri-
ficar o suporte da maioria das caractersticas do HTML5 e CSS3.
O Modernizr roda automaticamente assim que voc o adiciona no head do documento. Assim, se
voc quiser verificar se o browser suporta Geolocalizao, por exemplo, basta inserir este script na
pgina. Se o browser suportar a feature testada, ele retornar true:
if (Modernizr.geolocation) { // Aceita a feature} else { // No aceita a feature testada. }
HTML 5 - Curso W3C Escritrio Brasil 15Markup
3. ESTRUTURABSICA,DOCTYPEE
CHARSETS
A estrutura bsica do HTML5 continua sendo a mesma das verses anteriores da linguagem, h
apenas uma excesso na escrita do Doctype. Segue abaixo como a estrutura bsica pode ser seguida:
Arquivo: exemplos/3/estruturabasica.html
1 2 3 4 5 6 7 8 910 11
O DoctypeO Doctype deve ser a primeira linha de cdigo do documento antes da tag HTML.
O Doctype indica para o navegador e para outros meios qual a especificao de cdigo utilizar. Em
verses anteriores, era necessrio referenciar o DTD diretamente no cdigo do Doctype. Com o
HTML5, a referncia por qual DTD utilizar responsabilidade do Browser.
O Doctype no uma tag do HTML, mas uma instruo para que o browser tenha informaes
sobre qual verso de cdigo a marcao foi escrita.
O elemento HTMLO cdigo HTML uma srie de elementos em rvore onde alguns elementos so filhos de outros e
assim por diante. O elemento principal dessa grande rvore sempre a tag HTML.
O atributo LANG necessrio para que os user-agents saibam qual a linguagem principal do
documento.
Lembre-se que o atributo LANG no restrito ao elemento HTML, ele pode ser utilizado em qual-
quer outro elemento para indicar o idioma do texto representado.
Para encontrar a listagem de cdigos das linguagens, acesse:
http://www.w3.org/International/questions/qa-choosing-language-tags.
HEADA Tag HEAD onde fica toda a parte inteligente da pgina. No HEAD ficam os metadados.
Metadados so informaes sobre a pgina e o contedo ali publicado.
Metatag Charset
No nosso exemplo h uma metatag responsvel por chavear qual tabela de caractres a pgina est
utilizando.
Nas verses anteriores ao HTML5, essa tag era escrita da forma abaixo:
HTML 5 - Curso W3C Escritrio Brasil 17Markup
Essa forma antiga ser tambm suportada no HTML5. Contudo, melhor que voc utilize a nova
forma.
A Web acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e
pessoas de outros pases algo que vai contra a tradio e os ideais da internet. Por isso, foi cria-
do uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode
suporta algo em torno de um milho de caracteres. Ao invs de cada regio ter sua tabela de ca-
racteres, muito mais sensato haver uma tabela padro com o maior nmero de caracteres poss-
vel. Atualmente a maioria dos sistemas e browsers utilizados por usurios suportam plenamente
Unicode. Por isso, fazendo seu sistema Unicode voc garante que ele ser bem visualizado aqui, na
China ou em qualquer outro lugar do mundo.
O que o Unicode faz fornecer um nico nmero para cada caractere, no importa a plataforma,
nem o programa, nem a lngua.
Tag LINK
H dois tipos de links no HTML: a tag A, que so links que levam o usurio para outros documen-
tos e a tag LINK, que so links para fontes externas que sero usadas no documento.
No nosso exemplo h uma tag LINK que importa o CSS para nossa pgina:
O atributo rel=stylesheet indica que aquele link relativo a importao de um arquivo
referente a folhas de estilo.
H outros valores para o atributo REL, como por exemplo o ALTERNATE:
Neste caso, indicamos aos user-agents que o contedo do site poder ser encontrado em um cami-
nho alternativo via Atom FEED.
No HTML5 h outros links relativos que voc pode inserir como o rel=archives que indica uma
referncia a uma coleo de material histrico da pgina. Por exemplo, a pgina de histrico de um
blog pode ser referenciada nesta tag.
HTML 5 - Curso W3C Escritrio Brasil 19Markup
4. MODELOSDECONTEDOH pequenas regras bsicas que ns j conhecemos e que esto no HTML desde o incio. Estas
regras definem onde os elementos podem ou no estar. Se eles podem ser filhos ou pais de outros
elementos e quais os seus comportamentos.
Dentre todas as categorias de modelos de contedo, existem dois tipos de elementos: elementos de
linha e de bloco.
Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a, strong,
em, img, input, abbr, span.
Os elementos de blocos so como caixas, que dividem o contedo nas sees do layout.
Abaixo segue algumas premissas que voc precisa relembrar e conhecer:
Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a no pode conter o elemento label.
Os elementos de linha nunca podem conter elementos de bloco. Elementos de bloco sempre podem conter elementos de linha. Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um pargrafo no pode conter um DIV. Mas o contrrio possvel.
Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo
de contedo o elemento trabalha e como pode ser seu comportamento.
CategoriasCada elemento no HTML pode ou no fazer parte de um grupo de elementos com caractersticas
similares. As categorias esto a seguir. Manteremos os nomes das categorias em ingls para que haja
um melhor entendimento:
Metadata content Flow content Sectioning content Heading content Phrasing content
Embedded content Interactive content
Abaixo segue como as categorias esto relacionadas de acordo com o WHATWG:
Metadata contentOs elementos que compe a categoria Metadata so:
base command link meta noscript script style title
Este contedo vem antes da apresentao, formando uma relao com o documento e seu conte-
do com outros documentos que distribuem informao por outros meios.
Flow contentA maioria dos elementos utilizados no body e aplicaes so categorizados como Flow Content.
So eles:
a abbr address area (se for um decendente de um elemento de mapa) article aside
HTML 5 - Curso W3C Escritrio Brasil 21Markup
audio b bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label link (Se o atributo itemprop for utilizado) map mark math menu meta (Se o atributo itemprop for utilizado) meter nav noscript object ol
output p pre progress q ruby samp script section select small span strong style (Se o atributo scoped for utilizado) sub sup svg table textarea time ul var video wbr Text
Por via de regra, elementos que seu modelo de contedo permitem inserir qualquer elemento que
se encaixa no Flow Content, devem ter pelo menos um descendente de texto ou um elemento des-
cendente que faa parte da categoria embedded.
Sectioning contentEstes elementos definem um grupo de cabealhos e rodaps.
article aside nav section
Basicamente so elementos que juntam grupos de textos no documento.
HTML 5 - Curso W3C Escritrio Brasil 23Markup
Heading contentOs elementos da categoria Heading definem uma seo de cabealhos, que podem estar contidos
em um elemento na categoria Sectioning.
h1 h2 h3 h4 h5 h6 hgroup
Phrasing contentFazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos
que marcam este texto dentro do elemento de pargrafo.
a abbr area (se ele for descendente de um elemento de mapa) audio b bdo br button canvas cite code command datalist del (se ele contiver um elemento da categoria de Phrasing) dfn em embed i iframe img input ins (se ele contiver um elemento da categoria de Phrasing) kbd keygen label link (se o atributo itemprop for utilizado) map (se apenas ele contiver um elemento da categoria de Phrasing) mark math
meta (se o atributo itemprop for utilizado) meter noscript object output progress q ruby samp script select small span strong sub sup svg textarea time var video wbr Text
Embedded contentNa categoria Embedded, h elementos que importam outra fonte de informao para o documento.
audio canvas embed iframe img math object svg video
Interactive contentInteractive Content so elementos que fazem parte da interao de usurio.
a audio (se o atributo control for utilizado) button details embed
HTML 5 - Curso W3C Escritrio Brasil 25Markup
iframe img (se o atributo usemap for utilizado) input (se o atributo type no tiver o valor hidden) keygen label menu (se o atributo type tiver o valor toolbar) object (se o atributo usemap for utilizado) select textarea video (se o atributo control for utilizado)
Alguns elementos no HTML podem ser ativados por um comportamento. Isso significa que o
usurio pode ativ-lo de alguma forma. O incio da sequencia de eventos depende do mecanismo
de ativao e normalmente culminam em um evento de click seguido pelo evento DOMActivate.
O user-agent permite que o usurio ative manualmente o elemento que tem este comportamento
utilizando um teclado, mouse, comando de voz etc.
HTML 5 - Curso W3C Escritrio Brasil 27Markup
5. NOVOSELEMENTOSEATRIBUTOSA funo do HTML indicar que tipo de informao a pgina est exibindo. Quando lemos um
livro, conseguimos entender e diferenciar um ttulo de um pargrafo. Basta percebermos a quan-
tidade de letra, tamanho da fonte, cor etc. No cdigo isso diferente. Robs de busca e outros
user-agents no conseguem diferenciar tais detalhes. Por isso, cabe ao desenvolvedor marcar a
informao para que elas possam ser diferenciadas por diversos dispositivos.
Com as verses anteriores do HTML ns conseguimos marcar diversos elementos do layout, estru-
turando a pgina de forma que as informaes ficassem em suas reas especficas. Conseguimos
diferenciar por exemplo, um pargrafo de um ttulo. Mas no conseguamos diferenciar o rodap
do cabealho. Essa diferenciao era apenas percebida visualmente pelo layout pronto ou pela po-
sio dos elementos na estrutura do HTML. Entretanto, no havia maneira de detectar automatica-
mente estes elementos j que as tags utilizada para ambos poderiam ser iguais e no havia padro
para nomenclatura de IDs e Classes.
O HTML5 trouxe uma srie de elementos que nos ajudam a definir setores principais no documen-
to HTML. Com a ajuda destes elementos, podemos por exemplo diferenciar diretamente pelo c-
digo HTML5 reas importantes do site como sidebar, rodap e cabealho. Conseguimos seccionar
a rea de contedo indicando onde exatamente o texto do artigo.
Estas mudanas simplificam o trabalho de sistemas como os dos buscadores. Com o HTML5 os
buscadores conseguem vasculhar o cdigo de maneira mais eficaz. Procurando e guardando infor-
maes mais exatas e levando menos tempo para estocar essa informao.
Abaixo segue uma lista dos novos elementos e atributos includos no HTML5:
section A tag section define uma nova seo genrica no documento. Por exemplo, a home
de um website pode ser dividida em diversas sees: introduo ou destaque, novida-
des, informao de contato e chamadas para contedo interno.
nav O elemento nav representa uma seo da pgina que contm links para outras partes
do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles
grupos que contm links importantes. Isso pode ser aplicado naqueles blocos de links
que geralmente so colocados no Rodap e tambm para compor o menu principal do
site.
article O elemento article representa uma parte da pgina que poder ser distribudo e
reutilizvel em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comen-
trios de usurios ou apenas um bloco de texto comum.
aside O elemento aside representa um bloco de contedo que referncia o contedo que
envolta do elemento aside. O aside pode ser representado por contedos em side-
bars em textos impressos, publicidade ou at mesmo para criar um grupo de elementos
nav e outras informaes separados do contedo principal do website.
hgroup Este elemento consiste em um grupo de ttulos. Ele serve para agrupar elementos de
ttulo de H1 at H6 quando eles tem mltiplos nveis como ttulo com subttulos e etc.
header O elemento header representa um grupo de introduo ou elementos de navegao.
O elemento header pode ser utilizado para agrupar ndices de contedos, campos de
busca ou at mesmo logos.
footer O elemento footer representa literalmente o rodap da pgina. Seria o ltimo ele-
mento do ltimo elemento antes de fechar a tag HTML. O elemento footer no pre-
cisa aparecer necessariamente no final de uma seo.
time Este elemento serve para marcar parte do texto que exibe um horrio ou uma data
precisa no calendrio gregoriano.
HTML 5 - Curso W3C Escritrio Brasil 29Markup
Este atributos foram descontinuados porque modificam a formatao do elemento e suas funes
so melhores controladas pelo CSS:
align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td,
tfoot, th, thead e tr. alink, link, text e vlink como atributos da tag body. background como atributo da tag body. bgcolor como atributo da tag table, tr, td, th e body. border como atributo da tag table e object. cellpadding e cellspacing como atributos da tag table. char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr.
clear como atributo da tag br. compact como atributo da tag dl, menu, ol e ul. frame como atributo da tag table. frameborder como atributo da tag iframe. height como atributo da tag td e th. hspace e vspace como atributos da tag img e object. marginheight e marginwidth como atributos da tag iframe. noshade como atributo da tag hr. nowrap como atributo da tag td e th. rules como atributo da tag table. scrolling como atributo da tag iframe. size como atributo da tag hr. type como atributo da tag li, ol e ul. valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr. width como atributo da tag hr, table, td, th, col, colgroup e pre.
Alguns atributos do HTML4 no so mais permitidos no HTML5. Se eles tiverem algum impacto
negativo na compatibilidade de algum user-agent eles sero discutidos.
rev e charset como atributos da tag link e a. shape e coords como atributos da tag a. longdesc como atributo da tag img and iframe. target como atributo da tag link. nohref como atributo da tag area. profile como atributo da tag head. version como atributo da taghtml. name como atributo da tag img (use id instead). scheme como atributo da tag meta. archive, classid, codebase, codetype, declare e standby como atributos da tag object.
valuetype e type como atributos da tag param. axis e abbr como atributos da tag td e th. scope como atributo da tag td.
AtributosAlguns elementos ganharam novos atributos:
O atributo autofocus pode ser especificado nos elementos input (exceto quando h atri-buto hidden atribudo), textarea, select e button.
A tag a passa a suportar o atributo media como a tag link. A tag form ganha um atributo chamado novalidate. Quando aplicado o formulrio pode ser enviado sem validao de dados.
O elemento ol ganhou um atributo chamado reversed. Quando ele aplicado os indica-dores da lista so colocados na ordem inversa, isto , da forma descendente.
O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de fieldset so desativados.
O novo atributo placeholder pode ser colocado em inputs e textareas. O elemento area agora suporta os atributos hreflang e rel como os elementos a e link O elemento base agora suporta o atributo target assim como o elemento a. O atributo target tambm no est mais descontinuado nos elementos a e area porque so teis para aplicaes web.
Os atributos abaixo foram descontinuados:
O atributo border utilizado na tag img. O atributo language na tag script. O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez de name. O atributo summary na tag table.
O W3C mantm um documento atualizado constantemente nesta pgina:
http://www.w3.org/TR/2010/WD-html5-diff-20100624/.
HTML 5 - Curso W3C Escritrio Brasil 31Markup
6. ELEMENTOSMODIFICADOSE
AUSENTESExistiam no HTML alguns elementos que traziam apenas caractersticas visuais e no semnticas
para o contedo da pgina. Esses elementos anteriormente foram descontinuados porque atrapa-
lhavam o cdigo e tambm porque sua funo era facilmente suprida pelo CSS. Contudo, alguns
destes elementos voltaram tona com novos significados semnticos. Outros elementos que no
descontinuados, mas seus significados foram modificados.
Elementos modificados O elemento B passa a ter o mesmo nvel semntico que um SPAN, mas ainda mantm o estilo de negrito no texto. Contudo, ele no d nenhuma importncia para o text marcado com ele.
O elemento I tambm passa a ser um SPAN. O texto continua sendo itlico e para usurios de leitores de tela, a voz utilizada modificada para indicar nfase. Isso pode ser til para marcar frases em outros idiomas, termos tcnicos e etc.
O interessante que nestes dois casos houve apenas uma mudana semntica. Provavelmente voc
no precisar modificar cdigos onde estes dois elementos so utilizados.
O elemento a sem o atributo href agora representa um placeholder no exato lugar que este link se encontra.
O elemento address agora tratado como uma seo no documento. O elemento hr agora tem o mesmo nvel que um pargrafo, mas utilizado para quebrar linhas e fazer separaes.
O elemento strong ganhou mais importncia. O elemento head no aceita mais elementos child como seu filho.
Elementos ou atributos descontinuadosOs elementos abaixo foram descontinuados por que seus efeitos so apenas visuais:
basefont big center font s strike tt u
Os elementos abaixo foram descontinuados por que ferem os princpios de acessibilide e usabilidade:
frame frameset noframes
Os elementos abaixo no foram includos na especificao porque no tiveram uso entre os desen-
volvedores ou porque sua funo foi substituda por outro elemento:
acronym no foi includo porque criou um bocado de confuso entre os desenvolvedores que preferiram utilizar a tag abbr.
applet ficou obsoleto em favor da tag object. isindex foi substitudo pelo uso de form controls. dir ficou obsoleto em favor da tag ul.
HTML 5 - Curso W3C Escritrio Brasil 33Formulrios e Multimdia
7. NOVOSTIPOSDECAMPOS
Novos valores para o atributo typeO elemento input aceita os seguintes novos valores para o
atributo type:
tel
Telefone. No h mscara de formatao ou validao, pro-
positalmente, visto no haver no mundo um padro bem
definido para nmeros de telefones. claro que voc pode
usar a nova API de validao de formulrios (descrita no captulo 8) para isso. Os agentes de usu-
rio podem permitir a integrao com sua agenda de contatos, o que particularmente til em
telefones celulares.
search
Um campo de busca. A aparncia e comportamento do campo pode mudar ligeiramente depen-
dendo do agente de usurio, para parecer com os demais campos de busca do sistema.
E-mail, com formatao e validao. O agente de usurio pode inclusive promover a integrao
com sua agenda de contatos.
url
Um endereo web, tambm com formatao e validao.
Opera10
Enquanto escrevo, o Opera 10 o nico navegador Desktop que fez um bom trabalho implementando os novos recursos de formulrio do HTML5. Se voc instal-lo, poder testar quase tudo deste e dos prxi-mos dois captulos.
Datas e horas
O campo de formulrio pode conter qualquer um desses
valores no atributo type:
datetime date month week time datetime-local
Todos devem ser validados e formatados pelo agente de usurio, que pode inclusive mostrar um
calendrio, um seletor de horrio ou outro auxlio ao preenchimento que estiver disponvel no
sistema do usurio.
O atributo adicional step define, para os validadores e auxlios ao preenchimento, a diferena m-
nima entre dois horrios. O valor de step em segundos, e o valor padro 60. Assim, se voc usar
step=300 o usurio poder fornecer como horrios 7:00, 7:05 e 7:10, mas no 7:02 ou 7:08.
number
Veja um exemplo do tipo number com seus atributos opcionais:
Arquivo: exemplos/7/number.html
1 2 3 4 5 Number type6 78 910 1314 1516 17
datetime-local
O tipo de campo datetime-local tra-ta automaticamente as diferenas de fusos horrios, submetendo ao servi-dor e recebendo dele valores GMT. Com isso voc pode, com facilidade, construir um sistema que ser usado em diferentes fusos horrios e per-mitir que cada usurio lide com os valores em seu prprio fuso horrio.
HTML 5 - Curso W3C Escritrio Brasil 35Formulrios e Multimdia
O Opera 10 nos d uma excelente visualizao do que um agente de usurio pode fazer nesse caso:
range
Vamos modificar, no exemplo acima, apenas o valor de type, mudando de number para range:
Arquivo: exemplos/7/range.html
1 2 3 4 5 Range type6 78 910 1314 1516 17
Novamente, Opera 10:
color
O campo com type=color um seletor de cor. O agente de usurio pode mostrar um con-
trole de seleo de cor ou outro auxlio que estiver disponvel. O valor ser uma cor no formato
#ff6600.
HTML 5 - Curso W3C Escritrio Brasil 37Formulrios e Multimdia
8. TIPOSDEDADOSEVALIDADORES
Formulrios vitaminadosConforme voc deve ter percebido no ltimo captulo, o HTML5 avanou bastante nos recursos
de formulrios, facilitando muito a vida de quem precisa desenvolver aplicaes web baseadas em
formulrios. Neste captulo vamos avanar um pouco mais nesse assunto e, voc vai ver, a coisa vai
ficar ainda melhor.
autofocus
Ao incluir em um campo de formulrio o atributo autofocus, assim:
O foco ser colocado neste campo automaticamente ao carregar a pgina. Diferente das solues
em Javascript, o foco estar no campo to logo ele seja criado, e no apenas ao final do carregamen-
to da pgina. Isso evita o problema, muito comum quando voc muda o foco com Javascript, de o
usurio j estar em outro campo, digitando, quando o foco mudado.
Placeholder text
Voc j deve ter visto um placeholder. Tradicionalmente, vnhamos fazendo isso:
Arquivo: exemplos/8/placeholderold.html
1 2 3 4 5 Placeholder, the old style6 78 9 11 1213
HTML5 nos permite fazer isso de maneira muito mais elegante:
Arquivo: exemplos/8/placeholder.html
1 2 3 4 5 Placeholder, HTML5 way6 78 9 10 1112
required
Para tornar um campo de formulrio obrigatrio (seu valor precisa ser preenchido) basta, em
HTML5, incluir o atributo required:
maxlength
Voc j conhecia o atributo maxlength, que limita a quantidade de caracteres em um campo de
formulrio. Uma grande lacuna dos formulrio HTML foi corrigida. Em HTML5, o elemento tex-
tarea tambm pode ter maxlength!
Validao de formulriosUma das tarefas mais enfadonhas de se fazer em Javascript validar formulrios. Infelizmente,
tambm uma das mais comuns. HTML5 facilita muito nossa vida ao validar formulrios, tornando
automtica boa parte do processo. Em muitos casos, todo ele. Voc j viu que pode tornar seus
campos espertos com os novos valores para o atributo type, que j incluem validao para datas,
emails, URLs e nmeros. Vamos um pouco alm.
HTML 5 - Curso W3C Escritrio Brasil 39Formulrios e Multimdia
pattern
O atributo pattern nos permite definir expresses regulares de validao, sem Javascript. Veja um
exemplo de como validar CEP:
Arquivo: exemplos/8/pattern.html
1 2 3 4 5 O atributo pattern6 78 910 11 CEP:12 13 14 15 1617 1819 20
novalidate e formnovalidate
Podem haver situaes em que voc precisa que um formulrio no seja validado. Nestes casos,
basta incluir no elemento form o atributo novalidate.
Outra situao comum querer que o formulrio no seja validado dependendo da ao de submit.
Nesse caso, voc pode usar no boto de submit o atributo formnovalidate. Veja um exemplo:
Arquivo: exemplos/8/formnovalidate.html
1 2 3 4 5 Salvando rascunho6 7 label{display:block;}8 9 1011 1213 14 nome: 15 email: 16 mensagem: 17 18 19 2021 2223 24
Custom validators
claro que as validaes padro, embora atendam a maioria dos casos, no so suficientes para
todas as situaes. Muitas vezes voc vai querer escrever sua prpria funo de validao Javascript.
H alguns detalhes na especificao do HTML5 que vo ajud-lo com isso:
1. Onovoeventooninput disparado quando algo modificado no valor de um campo de
formulrio. Diferente de onchange, que disparado ao final da edio, oninput disparado
ao editar. diferente tambm de onkeyup e onkeypress, porque vai capturar qualquer modi-
ficao no valor do campo, feita com mouse, teclado ou outra interface qualquer.
2. O mtodo setCustomValidity pode ser invocado por voc. Ele recebe uma string. Se a string
for vazia, o campo ser marcado como vlido. Caso contrrio, ser marcado como invlido.
HTML 5 - Curso W3C Escritrio Brasil 41Formulrios e Multimdia
Com isso, voc pode inserir suas validaes no campo de formulrio e deixar o navegador fazer o
resto. No mais preciso capturar o evento submit e trat-lo. Veja, por exemplo, este formulrio
com validao de CPF:
Arquivo: exemplos/8/customvalidator.html
1 2 3 4 5 Custom validator6 8 9 10 function vCPF(i){11 i.setCustomValidity(validaCPF(i.value)?:CPF invlido!)12 }13 14 1516 17 18 CPF: 19 20 21 2223 24
HTML 5 - Curso W3C Escritrio Brasil 43Formulrios e Multimdia
9. DETALHESECONTEDOEDITVEL.
Ainda mais formulriosVejamos mais duas coisas que voc certamente j fez mais de uma vez e foram simplificadas pelo
HTML5.
Detalhes e sumrio
Veja um exemplo de uso dos novos elementos details e summary:
Copiando 37,5% Tamanho total: 39.248KB Transferido: 14.718 Taxa de transferncia: 127KB/s Nome do arquivo: HTML5.mp4
Veja como um agente de usurio poderia renderizar isso:
E ao clicar:
Contedo editvel
Para tornar um elemento do HTML editvel, basta incluir nele o atributo contenteditable, assim:
Edite-me...
Voc pode ler e manipular os elementos editveis normalmente usando os mtodos do DOM. Isso
permite, com facilidade, construir uma rea de edio de HTML.
HTML 5 - Curso W3C Escritrio Brasil 45Formulrios e Multimdia
10. DRAG-N-DROPECORREO
ORTOGRFICA
Drag and DropA API de Drag and Drop relativamente simples. Basicamente, inserir o atributo
draggable=true num elemento o torna arrastvel. E h uma srie de eventos que voc pode
tratar. Os eventos do objeto sendo arrastado so:
dragstartO objeto comeou a ser arrastado. O evento que a funo recebe tem um atributo target, que contm o objeto sendo arrastado.
dragO objeto est sendo arrastado
dragendA ao de arrastar terminou
O objeto sobre o qual outro arrastado sofre os seguintes eventos:
dragenterO objeto sendo arrastado entrou no objeto target
dragleaveO objeto sendo arrastado deixou o objeto target
dragoverO objeto sendo arrastado se move sobre o objeto target
dropO objeto sendo arrastado foi solto sobre o objeto target
Detalhes importantes:A ao padro do evento dragover cancelar a ao de dragging atual. Assim, nos objetos que de-
vem receber drop, preciso setar uma ao de dragover com, no mnimo, return false.
Selees de texto so automaticamente arrastveis, no precisam do atributo draggable. E se
voc quiser criar uma rea para onde selees de texto possam ser arrastadas, basta tratar esses
mesmos eventos.
Por fim, todas funes de tratamento de evento de drag recebem um objeto de evento que contm
uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operao
de drag.
Arquivo: exemplos/10/drag.html
1 2 3 4 5 HTML5 Drag and drop demonstration6 7 #boxA, #boxB {8 float:left; width:100px; height:200px; padding:10px; margin:10px; font-size:70%;9 }10 #boxA { background-color: blue; }11 #boxB { background-color: green; }1213 #drag, #drag2 {14 width:50px; padding:5px; margin:5px; border:3px black solid; line-height:50px;15 }16 #drag { background-color: red;}17 #drag2 { background-color: orange;}18 19 2021 // Quando o usurio inicia um drag, guardamos no dataset do evento22 // o id do objeto sendo arrastado23 function dragStart(ev) {24 ev.dataTransfer.setData(ID, ev.target.getAttribute(id));25 }2627 // Quando o usurio arrasta sobre um dos painis, retornamos28 // false para que o evento no se propague para o navegador, o29 // que faria com que o contedo fosse selecionado.30 function dragOver(ev) { return false; }3132 // Quando soltamos o elemento sobre um painel, movemos o33 // elemento, lendo seu id do dataset do evento34 function dragDrop(ev) {
HTML 5 - Curso W3C Escritrio Brasil 47Formulrios e Multimdia
35 var idelt = ev.dataTransfer.getData(ID);36 ev.target.appendChild(document.getElementById(idelt));37 }3839 40 41 42 43 46 47 drag me49 50 drag me52 5354 55 58 5960 61
Exemplo
Segue um exemplo de drag-and-drop, baseado no excelente exemplo de Laurent Jouanneau
(http://ljouanneau.com/lab/html5/demodragdrop.html).
Reviso ortogrfica e gramaticalOs agentes de usurio podem oferecer recursos de reviso ortogrfica e gramatical, dependendo
do que houver disponvel em cada plataforma. Os desenvolvedores podem controlar o compor-
tamento dessa ferramenta atravs do atributo spellcheck. Inserir spellcheck=true num
elemento faz com que a reviso esteja habilitada para ele. Voc tambm pode desabilitar a reviso
para determinado elemento, inserindo spellcheck=false.
HTML 5 - Curso W3C Escritrio Brasil 49Formulrios e Multimdia
11. ELEMENTOSAUDIOEVIDEO,E
CODECS
udioPara inserir udio em uma pgina web, basta usar o elemento audio:
O valor de controls define se um controle de udio, com botes de play, pause, volume, barra de
progresso, contador de tempo, etc. ser exibido na tela. Se for setado como false, ser preciso con-
trolar o player via javascript, com mtodos como play() e pause(). O valor de autoplay define
se o udio vai comear a tocar assim que a pgina carregar.
Origens alternativas de udio
Todo agente de usurio deveria suportar o codec livre OggVorbis, mas, infelizmente, pode aconte-
cer de seu arquivo oga no tocar no computador ou celular de algum. Quem sabe do seu chefe ou
seu cliente. Ento preciso saber como oferecer um formato alternativo de udio. Fazemos assim:
Claro, o agente de usurio pode ainda no saber tocar nenhum desses formatos, ou sequer ter su-
porte a udio. Para esses casos, oferea um contedo alternativo:
Faa o download da msica.
VdeoO uso de vdeo muito semelhante ao de udio:
E com vrios elementos source:
Faa o download do vdeo.
Codecs muito importante que voc inclua, nos seus elementos source de udio e vdeo, informao a res-
peito do container e codecs utilizados. Isso vai evitar que
o navegador tenha que baixar, pelo menos parcialmente, o
arquivo de mdia para, depois, descobrir que no consegue
toc-lo. importante lembrar que a extenso do arquivo
no informao relevante para isso, pelo contrrio, no
significa nada. Uma URL pode no ter extenso de arquivo
e pode levar a um redirecionamento.
Para indicar ao navegador o container e codecs de determinado arquivo, usa-se o atributo type,
no formato:
type=MIME-type do container; codecs=codec de vdeo, codec de udio
Por exemplo, um vdeo em Ogg, usando os codecs Theora e Vorbis, ter seu source assim:
Com MPEG-4 a coisa um pouco mais complicada, por que preciso indicar ao navegador tam-
bm o profile do codec de vdeo utilizado. Veja um exemplo:
Oquefuncionanaweb
Mark Pilgrim est escrevendo um livro muito interessante (em ingls) chamado Dive Into HTML 5. O ca-ptulo sobre Vdeo a referncia de que voc precisa para publicar vdeo na web com HTML5.
HTML 5 - Curso W3C Escritrio Brasil 51Formulrios e Multimdia
HTML 5 - Curso W3C Escritrio Brasil 53Formulrios e Multimdia
12. ELEMENTODEVICEESTREAMAPI
O elemento deviceVoc pode inserir em seu HTML um elemento de acesso
webcam do usurio, assim:
Isso vai exibir uma interface solicitando ao usurio aces-
so a sua webcam. Se ele tiver mais de uma, tambm ser
permitido que ele escolha que webcam usar. O atribu-
to media tambm pode conter o valor fs, que vai abrir
uma caixa de seleo no sistema de arquivos, permitindo ao usurio escolher um arquivo para fazer
stream.
O passo seguinte conectar o stream desse seu elemento device a alguma coisa. Veja, por exemplo,
como conect-lo a um elemento video na prpria pgina, fazendo com que o usurio possa ver a
imagem de sua prpria webcam:
Arquivo: exemplos/12/videochat.html
1 2 3 4 5 Videochat, step 167 8 function update(stream) {9 document.getElementsByTagName(video)[0].src = stream.url;10 }11 1213 1415 1617 To start chatting, select a video camera: 18 19
WorkingDraft
O contedo desse captulo est baseado numa especificao que ainda est em status de Working Draft. Ou seja, as coisas ainda podem mudar bastante. Fique de olho no que vai acontecer com o elemento device e a Stream API, aces-sando (em ingls):
http://dev.w3.org/html5/html-device/
20 2122 23
StreamsVoc deve ter notado, no script acima, que a funo de update recebe um parmetro stream. Trata-
se de um objeto da classe Stream, que possui uma propriedade url, que j usamos acima, e um
mtodo record. O mtodo record inicia a gravao do stream e retorna um objeto StreamRecorder.
Esse ltimo possui um mtodo stop, que retorna o arquivo que foi gravado.
Peer-to-peerCuidado! O W3C ainda est trabalhando nessa especificao, e tudo aqui pode mudar. Por isso,
no se preocupe em entender as mincias. Saiba apenas que HTML5 prev que os agentes de usu-
rio tenham uma interface de comuicao P2P, que permite a troca de texto, imagem, vdeo e arqui-
vos. Por enquanto, a especificao deste item est sendo escrita junto da do elemento device, mas
isso deve ganhar uma pgina prpria em breve. Fique de olho.
HTML 5 - Curso W3C Escritrio Brasil 55A nova gerao de aplicaes web I
13. MATHMLESVG
MathMLO HTML5 incorpora o padro MathML. Trata-se de uma linguagem de marcao, baseada
em XML, para representao de frmulas matemticas. Voc pode ler mais sobre MathML em
http://www.w3.org/Math/. Para incorporar cdigo MathML em seu documento HTML5, no pre-
ciso fazer declaraes especiais. Basta escrever normalmente o cdigo, iniciando com um elemento
math. Veja este exemplo:
Arquivo: exemplos/13/mathml.html
1 2 3 4 5 MathML6 7 89 10 11 x12 =13 14 15 16 b17 ±18 19 20 b21 222 23 24 425 ⁢26 a27 ⁢28 c29 30 31 32 233 ⁢34 a35 36 37 38
3940 41
Veja como esse exemplo renderizado no navegador:
Mesmo que voc nunca tenha visto MathML, e este cdigo parea um pouco assustador, d uma
olhada com calma no cdigo, comparando com a imagem do resultado, e voc vai perceber que
muito simples. Talvez algo que possa deix-lo confuso a entidade ⁢, que
aparece algumas vezes no cdigo. Ela est l para separar os fatores 4ac, por exemplo. Esses valores
so multiplicados, o que a frmula representa, mas no queremos colocar um operador de mul-
tiplicao entre eles, porque por conveno se simplesmente escrevemos 4ac qualquer leitor saber
que isso uma multiplicao.
Por que ento se preocupar em inserir ⁢? Voc vai notar que se remover a enti-
dade e a tag mo correspondente o resultado visual ser o mesmo. Colocamos ⁢
porque MathML no s visual, semntica. Um outro agente de usurio pode ter recursos de im-
portar essa frmula para uma ferramenta de clculo, por exemplo.
SVGAssim como MathML, SVG uma outra linguagem XML que pode ser incorporada com facilidade
em HTML5. Voc pode ler mais sobre SVG em http://www.w3.org/Graphics/SVG/. SVG uma
linguagem para marcao de grficos vetoriais. Vejamos um exemplo bem simples:
HTML 5 - Curso W3C Escritrio Brasil 57A nova gerao de aplicaes web I
Arquivo: exemplos/13/svg.html
1 2 3 4 5 SVG6 7 89 1011 12 1314 15 1920 21 2223 2425 26
E veja como isso renderizado no navegador:
possvel fazer muito mais com SVG. A maioria dos editores de grficos vetoriais hoje exporta e
importa automaticamente SVG, permitindo a um designer construir um grfico em seu editor ve-
torial predileto e export-lo diretamente. Em seguida, um programador pode construir javascript
que manipula esse SVG, usando os mtodos do DOM. Com isso voc pode ter grficos dinmicos,
com animao, escalveis e com excelente qualidade visual, programveis em Javascript, sem tec-
nologias proprietrias e plugins.
HTML 5 - Curso W3C Escritrio Brasil 59A nova gerao de aplicaes web I
14. CANVASAPI
O elemento canvasA Canvas API permite a voc desenhar na tela do navegador via Javascript. O nico elemento
HTML existente para isso o elemento canvas, o resto todo feito via Javascript. Veja como inse-
rir o elemento canvas numa pgina:
Isso vai exibir um retngulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho,
com Javascript:
context=document.getElementById(x).getContext(2d)
Agora que temos um contexto, podemos desenhar nele.
Vamos comear com um simples retngulo:
context.fillRect(10, 10, 50, 150)
Simples, no? Que tal tentarmos algo um pouco mais
complexo? D uma olhada no exemplo:
Arquivo: exemplos/14/canvas.html
1 2 3 4 5 Canvas API6 7 89 10 desenhar1112 13 function desenhar(){14 // Obtemos o contexto15 context=document.getElementById(x).getContext(2d)1617 //Iniciamos um novo desenho
Existeumcontexto3D?
Ainda no. Existem vrias implemen-taes de contexto 3D, e cada fabrican-te de navegador tem criado a sua, mas ainda no h um padro do W3C sobre esse assunto.
18 context.beginPath()1920 //Movemos a caneta para o inicio do desenho21 context.moveTo(150,50)2223 //Desenhamos as linhas24 context.lineTo(220,250)25 context.lineTo(50,125)26 context.lineTo(250,125)27 context.lineTo(80,250)28 context.lineTo(150,50)2930 //O desenho no de verdade enquanto voc31 //no mandar o contexto pint-lo.3233 //Vamos pintar o interior de amarelo34 context.fillStyle=#ff035 context.fill()3637 //Vamos pintar as linhas de vermelho.38 context.strokeStyle=#f0039 context.stroke()4041 }42 4344 45
E veja o que acontece quando se clica no boto:
H muito mais para voc estudar se quiser se aprofundar na Canvas API. Apenas para que voc
tenha uma idia, possvel desenhar texto, sombras, gradientes, incluir imagens no canvas, mani-
pular os pixels, rotacionar e transformar os objetos.
HTML 5 - Curso W3C Escritrio Brasil 61A nova gerao de aplicaes web I
Canvas e SVG
Uma dvida muito comum quando usar Canvas, quando usar SVG. Para saber escolher, preci-
so entender as diferenas entre um e outro. SVG vetorial, e baseado em XML, logo, acessvel via
DOM. Canvas desenhado pixel a pixel, via Javascript.
Assim, as vantagens do SVG so:
1. O contedo acessvel a leitores de tela
2. O grfico escalvel, no perde resoluo ou serrilha ao redimensionar
3. O contedo acessvel via DOM
E as vantagens do Canvas:
1. A performance muito superior ao SVG na maioria dos casos
2. fcil desenhar via Javascript. Em SVG, preciso fazer seu script escrever XML para voc.
Com Canvas voc s manda desenhar, e pronto.
HTML 5 - Curso W3C Escritrio Brasil 63A nova gerao de aplicaes web I
15. SERVER-SENTEVENTS
EventSourceA Server-Sent Events API uma maneira de inverter o fluxo das aplicaes Ajax, fazendo com que
o servidor possa disparar o envio de dados ao agente de usurio. Para isso, cria-se, no agente de
usurio, um objeto EventSource:
es=new EventSource(comm.php)
Isso vai abrir uma conexo HTTP para comm.php e mant-la escutando. Cada vez que o servidor
enviar eventos para esse cliente, ser disparado o evento message do objeto EventSource. Veja um
exemplo:
es.onmessage=function(e){ alert(Chegaram dados: +e.data)}
Isso pode ser usado, por exemplo, para implementar uma interface de chat ou um monitor de status
de alguma operao demorada ocorrendo no servidor.
O protocolo de comunicao
Em nosso exemplo acima, a pgina comm.php envia eventos para o agente de usurio. Voc no pre-
cisa se preocupar em saber como isso funciona do lado do cliente, uma vez que o agente de usurio faz
todo o trabalho. Mas importante que saiba como isso deve funcionar do lado do servidor. A URL de
comunicao deve devolver ao cliente um header Content-type: text/event-stream. Em se-
guida, envia as mensagens, que so blocos de texto separados um do outro por uma linha em branco:
data: mensagem 1
data: a mensagem 2 temdata: mais de uma linha
data: mensagem 3
O prefixo data: indica que o que segue so os dados da mensagem. Voc tambm pode usar o pre-
fixo id:
data: mensagem 1id: 1
data: a mensagem 2 temdata: mais de uma linhaid: 2
data: mensagem 3id: 3
Se voc enviar prefixos id em suas mensagens e o agente de usurio perder a conexo, ao tentar
reconectar ele vai enviar o valor do ltimo id no header HTTP Last-Event-ID. Com isso voc
pode, por exemplo, enviar as mensagens do chat do ponto em que parou.
HTML 5 - Curso W3C Escritrio Brasil 65A nova gerao de aplicaes web I
16. DOMEHTML5
DOM e HTML5O Modelo de Objetos do Documento (DOM, na sigla em ingls) a interface entre a linguagem
Javascript e os objetos do HTML. DOM o mtodo padro para construo de aplicaes ricas
com Javascript e amplamente conhecido e utilizado. Neste captulo, supondo que voc j conhece
DOM para HTML 4 ou XHTML, vamos nos focar na diferena entre as verses anteriores do DOM
e a do HTML 5.
Por qu DOM?
Os primeiros navegadores a incorporar um motor de Javascript tinham alert, prompt, document.
write e mais meia dzia de maneiras de se interagir com o usurio. E s. A idia de acessar a rvore
de objetos do HTML trouxe poder s interfaces com o usurio na web. A idia era to boa que os
fabricantes de navegadores no puderam esperar at que tivssemos uma especificao padro que
atendesse suas necessidades, e criaram cada um seu prprio mtodo de resolver o problema. Isso
resultou em anos e anos de incompatibilidade, em que era preciso escrever uma verso de seus
scripts para cada navegador.
Queremos, com certeza, evitar uma nova guerra de padres. Por isso recomendamos a voc, por
mais sedutor que parea utilizar um recurso proprietrio Javascript, que se atenha ao DOM.
Vamos s diferenas
getElementsByClassName
Esse um sonho antigo de todo desenvolvedor Javascript. Com HTML5 voc pode fazer:
destaques = document.getElementsByClassName(destaque)
E isso retornar todos os elementos do HTML que possuem a classe destaque.
innerHTML
Outro sonho antigo que se torna realidade. A propriedade innerHTML uma idia to boa que
todos os navegadores atuais j a suportam h muito tempo e todo desenvolvedor web sabe us-la.
Apesar disso, ela nunca havia sido descrita como um padro.
Se porventura voc nunca viu a propriedade innerHTML em ao (puxa, onde voc estava nos l-
timos dez anos?) saiba que ela contm uma string, o contedo HTML da pgina. E voc tem acesso
de leitura e escrita a essa propriedade.
Veja um exemplo de innerHTML:
function adicionaItem(nome){ document.getElementById(lista).innreHTML += +nome+
}
activeElement e hasFocus()
O documento HTML5 tem uma nova propriedade, activeElement, que contm o elemento que
possui o foco no momento. O documento tambm possui o mtodo hasFocus(), que retorna true
se o documento contm o foco. Seu usurio pode estar trabalhando com mltiplas janelas, abas,
frames, ou mesmo ter alternado para outro aplicativo deixando o navegador com sua aplicao
Javascript rodando em segundo plano. O mtodo hasFocus() uma conveniente maneira de tratar
aes que dependem do foco na aplicao atual.
Veja um exemplo de script dependente de foco:
HTML 5 - Curso W3C Escritrio Brasil 67A nova gerao de aplicaes web I
Arquivo: exemplos/16/focusNotify.html
1 2 3 4 5 Notifier6 78 function notify(text){9 document.getElementById(msg).innerHTML+=+text+10 titleFlick()11 }1213 function titleFlick(){14 if(document.hasFocus()){15 document.title=Notifier16 return17 }18 document.title=document.title==Notifier?* Notifier:Notifier19 setTimeout(titleFlick(),500)20 }2122 23 2425 26 28 29 3031
getSelection()
Os objetos document e window possuem um mtodo getSelection(), que retorna a seleo atual,
um objeto da classe Selection. A seleo tem, entre ou-
tros, os seguintes mtodos e propriedades:
anchorNodeO elemento que contm o incio da seleo
focusNodeO elemento que contm o final da seleo
selectAllChildern(parentNode)Seleciona todos os filhos de parentNode
UsandogetSelection()hoje
A maioria dos navegadores ainda no teve tempo de se atualizar em relao especificao e, retorna uma string quando voc chama document.getSelection() e um objeto Selection quando voc chama window.getSelection(). Como esperamos que num futuro prximo o comportamen-to de document.getSelec-tion() mude, sugerimos que voc prefira usar o mtodo de window por enquanto.
deleteFromDocument()Remove a seleo do documento
rangeCountA quantidade de intervalos na seleo
getRangeAt(index)Retorna o intervalo na posio index
addRange(range)Adiciona um intervalo seleo
removeRange(range)Remove um intervalo da seleo
Intervalos de seleo
Voc deve ter notado acima que uma seleo um conjunto de intervalos, da classe Range. Cada
intervalo possui, entre outros, os seguintes mtodos e propriedades:
deleteContent()Remove o contedo do intervalo
setStart(parent,offset)Seta o incio do intervalo para o caractere na posio offset dentro do elemento DOM parent
setEnd(parent,offset)Seta o final do intervalo para o caractere na posio offset dentro do elemento DOM parent
Tanto os objetos Selection quanto os objetos Range retornam o texto da seleo quando converti-
dos para strings.
document.head
O objeto document j possua uma propriedade body, uma maneira conveniente de acessar o ele-
mento body do HTML. Agora ele ganhou uma propriedade head, maneira tambm muito conve-
niente de acessar o elemento head.
HTML 5 - Curso W3C Escritrio Brasil 69A nova gerao de aplicaes web I
Selector API
A Selector API no novidade do HTML5, anterior a ele. Mas como ainda desconhecida de
parte dos desenvolvedores, convm dizer que ela existe, e que continua funcionando no HTML5.
Com a selector API voc pode usar seletores CSS para encontrar elementos DOM.
A Selector API expe duas funes em cada um dos ele-
mentos DOM: querySelector e querySelectorAll. Ambas
recebem como argumento uma string com um seletor
CSS. A consulta sempre feita na subtree do elemento
DOM a partir do qual a chamada foi disparada. A query-
Selector retorna o primeiro elemento que satisfaz o sele-
tor, ou null caso no haja nenhum. A querySelectorAll
retorna a lista de elementos que satisfazem o seletor.
Veja, neste exemplo, um script para tabelas zebradas com
Selector API:
Arquivo: exemplos/16/zebra.html
1 2 3 4 5 Zebra6 7 .zebraon{background:silver}8 9 10 window.onload=function(){11 var zebrar=document.querySelectorAll(.zebra tbody tr)12 for(var i=0;i
24 Manoel 12.300,0025 26 Joaquim 21.300,0027 28 Maria 13.200,0029 30 Marta 32.100,0031 32 Antonio 23.100,0033 34 Pedro 31.200,0035 36 37 38
Caractersticas especiais de DomNodeList
As listas de elementos retornadas pelos mtodos do DOM no so Arrays comuns, so objetos
DomNodeList, o que significa que, entre outros mtodos especiais, voc pode usar list[0] ou
list(0) para obter um elemento da lista. Tambm pode usar list[name] ou list(name)
para obter um objeto por seu nome. Duas adies interessantes do HTML5 ao usar este ltimo mtodo:
1. O objeto buscado pelos atributos name ou id.
2. Uma lista de campos de formulrio com o mesmo valor no atributo name (uma lista de radio
buttons, por exemplo) ser retornada caso mais de um objeto seja encontrado. Essa lista con-
tm um atributo especial, value, muito conveniente. Ele contm o valor do radio marcado e,
ao ser setado, marca o radio correspondente.
Datasets
Voc pode atribuir dados arbitrrios a um elemento HTML qualquer, prefixando seus atributos
com data-. Por exemplo:
Voc pode acessar esses valores via Javascript, atravs do atributo dataset, assim:
var img=document.getElementById(c1)proc=img.dataset.processor
As propriedades de dataset tm permisso de leitura e escrita.
HTML 5 - Curso W3C Escritrio Brasil 71A nova gerao de aplicaes web I
17. NOVOSEVENTOSDOM
Uma palavra sobre eventosO suporte ao tratamento de eventos disparados pelo usurio parte essencial do DOM. HTML5 ofe-
rece a voc um extenso conjunto de novos eventos. Vamos dar uma olhada nos mais interessantes:
Elementos multimdia:
oncanplayO elemento audio ou video j tem dados suficientes no buffer para comear a tocar.
oncanplaythroughO elemento audio ou video j tem dados suficientes no buffer para comear a tocar e, se a tranferncia de dados continuar no ritmo em que est ocorrendo, estima-se que tocar at o final sem interrupes.
ondurationchangeO elemento audio ou video teve seu atributo duration modificado. Isso acontece, por exem-plo, ao alterar a origem da mdia.
onemptiedO elemento audio ou video teve um erro de retorno vazio de dados da rede. O retorno vazio acontece quando, por exemplo, voc tenta invocar o mtodo play de um elemento que ainda no tem uma origem de mdia definida.
onendedO vdeo ou udio chegou ao fim.
onloadeddataOs dados comearam a ser carregados e a posio atual de playback j pode ser renderizada.
onloadedmetadataOs metadados foram carregados. J sabemos as dimenses, formato e durao do vdeo.
onloadstartOs dados comearam a ser carregados.
onpauseO usurio clicou em pause.
onplayO usurio clicou em play ou o playback comeou por causa do atributo autoplay
onplayingO vdeo ou udio est tocando.
onprogressO agente de usurio est buscando dados do vdeo ou udio.
Eventos em campos de formulrio:
oninputO usurio entrou com dados no campo
oninvalidO campo no passou pela validao
Eventos gerais:
oncontextmenuO usurio disparou um menu de contexto sobre o objeto. Na maioria dos sistemas Desktop, isso significa clicar com o boto direito do mouse ou segurando uma tecla especial.
onmousewheelA rodinha do mouse foi acionada.
onbeforeprintDisparado antes da impresso da pgina. Voc pode us-lo para modificar, esconder ou exi-bir elementos, preparando a pgina para impresso.
onafterprintDisparado aps a impresso da pgina. Voc pode us-lo para reverter o status anterior impresso.
onhashchangeA ltima poro da URL, aps o hash (#), foi modificada.
onoffline O agente de usurio ficou offline.
ononline O agente de usurio est novamente conectado.
HTML 5 - Curso W3C Escritrio Brasil 73A nova gerao de aplicaes web I
onredoO usurio disparou a ao de Refazer.
onundoO usurio disparou a ao de Desfazer.
Drag-and-drop:
Vimos a definio desses eventos no Captulo 10:
ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop
Atributos de eventoA especificao do HTML5 padronizou um formato de atribuio de eventos que j era ampla-
mente utilizado. Voc pode atribuir eventos atravs de atributos HTML com o nome do evento.
Por exemplo:
claro que voc pode continuar usando o mtodo do DOM addEventListener, com a vanta-
gem de poder atribuir vrios listeners ao mesmo evento.
HTML 5 - Curso W3C Escritrio Brasil 75A nova gerao de aplicaes web I
18. MENUSETOOLBARS
O elemento menuO elemento menu usado para definir menus e barras de ferramenta. Dentro do menu, voc pode
inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos menu. Para
definir comandos, voc pode inserir:
1. Um link, um elemento a com atributo href;
2. Um boto, um elemento button;
3. Um boto, um elemento input com o atributo type contendo button, submit, reset ou
image;
4. Um radiobutton, um elemento input com o atributo type contendo radio;
5. Um checkbox, um elemento input com o atributo type contendo checkbox;
6. Um elemento select, contendo um ou mais options, define um grupo de comandos
7. Um elemento qualquer com o atributo accesskey
8. Um elemento command
Tipos de comando
H trs tipos de comando:
commandUma ao comum;
checkboxUma ao que pode estar no status de ligada ou desligada, e alterna entre esses dois stauts quando clicada;
radioUma ao que pode estar no status de ligada ou desligada, e quando clicada vai para o status de ligada, deligando todas as aes com o mesmo valor no atributo radiogroup;
Da lista de elementos possveis para definir comandos, os trs primeiros, link, button e input but-
ton, definem comandos do tipo command. O quarto elemento, radiobutton, define um comando
do tipo radio. O quinto, checkbox, define um comando do tipo checkbox.
O sexto elemento, o select, vai definir um grupo de comandos. Se o select tiver o atributo multiple,
definir uma lista de comandos do tipo checkbox. Caso contrrio, os comandos sero do tipo radio,
tendo o mesmo radiogroup.
No stimo caso, um elemento qualquer com tecla de acesso, o tipo de comando vai depender do
tipo de elemento que recebeu accesskey.
O elemento command
Por fim, temos o oitavo mtodo, o elemento command. Neste caso o tipo de comando depender do
valor do atributo type. Veja um exemplo de como us-lo:
Prefira no usar command, por enquanto
Por que a especificao permite que se use o novo elemento command para definir comandos, e ao
mesmo tempo permite que se use os velhos elementos como input, button e select para isso? Para
possibilitar ao desenvolvedor oferecer alguma compatibilidade com navegadores antigos. Veja este
exemplo:
HTML 5 - Curso W3C Escritrio Brasil 77A nova gerao de aplicaes web I
Arquivo: exemplos/18/command.html
1 2 3 4 5 Menus6 78 910 11 12 13 New...14 Open...15 Save16 Save as...17 18 19 20 21 Copy22 Cut23 Paste24 25 26 27 28 Help29 About30 31 32 3334 3536
O agente de usurio deveria renderizar algo como:
Um agente de usurio que no conhece o novo elemento menu vai entender esse cdigo como listas
aninhadas com botes e links. E vai renderizar isso assim:
No est bonito, mas perfeitamente acessvel. E o visual pode ser bem trabalhado com CSS. A
mesma coisa poderia ser escrita com o elemento command:
Arquivo: exemplos/18/command2.html
1 2 3 4 5 Menus6 78 910 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2728 2930
Mas um agente de usurio que no conhece os elementos menu e command no vai mostrar abso-
lutamente nada.
HTML 5 - Curso W3C Escritrio Brasil 79A nova gerao de aplicaes web I
19. TIPOSDELINKS
LinksA possibilidade de linkar documentos o que torna a Web o que ela . Existem duas maneiras
principais de linkar documentos, os elementos a e link. O elemento a cria um link no contedo
da pgina. Voc conhece sua sintaxe:
Visie
O elemento link, por sua vez, cria um metadado, um link que no mostrado no contedo, mas
o agente de usurio usa de outras maneiras. O uso mais comum vincular um documento a uma
folha de estilos:
Note o atributo rel=stylesheet. O atributo rel pode estar presente nos elementos a e link,
e ter uma srie de valores:
Metadados de navegao
archivesos arquivos do site
authora pgina do autor do documento atual
bookmarko permalink da seo a que este documento pertence
firsto primeiro documento da srie a qual este pertence
helpajuda para esta pgina
indexo ndice ou sumrio que inclui o link para esta pgina
lasto ltimo documento da srie a qual este pertence
licensea licensa que cobre este documento
nexto prximo documento da srie a qual este pertence
prefetcho agente de usurio deve fazer cache desse link em segundo plano to logo o documento atual tenha sido carregado. O autor do documento indica que este link o provvel prximo destino do usurio.
prevo documento anterior da srie a qual este pertence
searcha busca deste site
upO documento um nvel acima deste
O Opera nos d um interessante exemplo de como um agente de usurio pode exibir estes links:
Metadados da pgina
alternateum formato alternativo para o contedo atual. Precisa estar acompanhado do atributo type, contendo o tipo MIME do formato. Por exemplo, para indicar o RSS da pgina atual usamos:
icono cone que representa esta pgina
pingbacka URL de pingback desta pgina. Atravs desse endereo um sistema de blogging ou gerencia-dor de contedo pode avisar automaticamente quando um link para esta pgina for inserido.
HTML 5 - Curso W3C Escritrio Brasil 81A nova gerao de aplicaes web I
stylesheeta folha de estilo linkada deve ser vinculada a este documento para exibio
Comportamento dos links na pgina
externalindica um link externo ao domnio do documento atual
nofollowindica que o autor do documento atual no endossa o contedo desse link. Os robs de in-dexao para motores de busca podem, por exemplo, no seguir este link ou levar em conta o nofollow em seu algoritmo de ranking.
noreferrero agente de usurio no deve enviar o header HTTP Referer se o usurio acessar esse link
sidebaro link deve ser aberto numa sidebar do navegador, se este recurso estiver disponvel
HTML 5 - Curso W3C Escritrio Brasil 83A nova gerao de aplicaes web II
20. MICRODATA
Semntica adicionalD um olhada no seguinte cdigo:
Arquivo: exemplos/20/microdata1.html
1 2 3 4 5 Microdata 16 7 89 Resultados do trimestre10 11 12 13 nome Joaquim14 total 10.76415 16 17 18 19 nome Manoel20 total 12.44921 22 23 24 25 nome Antonio26 total 9.20227 28 29 30 31 nome Pedro32 total 17.33733 34 35 3637 38
A Microdata API nos permite tornar esta estrutura semntica um pouco mais especfica, definindo
o que o contedo de cada elemento. Veja este outro exemplo:
Arquivo: exemplos/20/microdata2.html
1 2 3 4 5 Microdata 26 7 89 Resultados do trimestre10 11 12 13 nome Joaquim14 total 10.76415 16 17 18 19 nome Manoel20 total 12.44921 22 23 24 25 nome Antonio26 total 9.20227 28 29 30 31 nome Pedro32 total 17.33733 34 35 3637 38
Adicionamos atributos especias, itemscope e itemprop. Cada elemento itemscope define um item
de dados. Cada itemprop define o nome de uma propriedade. O valor da propriedade o contedo
da tag HTML. A Microdata API nos fornece acesso especial a esses dados. Veja como acessar esses
dados:
resultados=document.getItems()for(var i=0;i
HTML 5 - Curso W3C Escritrio Brasil 85A nova gerao de aplicaes web II
Diferentes tipos de dadosNo exemplo acima, temos uma listagem de pessoas. Agora imagine que voc precise ter, no mesmo
documento, uma listagem de pessoas e carros. Poderia escrever assim:
Arquivo: exemplos/20/microdata3.html
1 2 3 4 5 Microdata 36 7 89 Resultados do trimestre10 11 12 13 nome Joaquim14 total 10.76415 16 17 18 19 nome Manoel20 total 12.44921 22 23 24 25 nome Antonio26 total 9.20227 28 29 30 31 nome Pedro32 total 17.33733 34 35 3637 Carros mais vendidos38 39 40 41 nome Fusca42 total 38243 44 45 46 47 nome Braslia48 total 29849 50
51 52 53 nome Corcel54 total 10255 56 57 5859 60
Note que pessoas e carros tem propriedades em comum, nome e total. Quando voc executar
document.getItems() vai obter uma lista de todos os elementos com itemscope. Como obter
uma lista apenas de pessoas ou de carros? Voc pode adicionar a cada item um atributo itemtype,
que diz de que tipo de entidade so aqueles dados:
Arquivo: exemplos/20/microdata4.html
1 2 3 4 5 Microdata 46 7 89 Resultados do trimestre10 11 12 13 nome Joaquim14 total 10.76415 16 17 18 19 nome Manoel20 total 12.44921 22 23 24 25 nome Antonio26 total 9.20227 28 29 30 31 nome Pedro32 total 17.33733 34
HTML 5 - Curso W3C Escritrio Brasil 87A nova gerao de aplicaes web II
35 3637 Carros mais vendidos38 39 40 41 nome Fusca42 total 38243 44 45 46 47 nome Braslia48 total 29849 50 51 52 53 nome Corcel54 total 10255 56 57 5859 60
Agora voc pode executar: document.getItems(carro) para obter s os carros, por
exemplo.
Falando um idioma comum
Voc deve ter notado que pode definir seus prprios padres de metadados com microdata.
Recomendo que, antes de criar seu prprio formato, verifique se o mesmo problema no j foi
resolvido por algum. O site www.data-vocabulary.org contm alguns desses formatos padroniza-
dos. Por exemplo, para descrever os dados de sua empresa ou organizao, no invente seu prprio
formato, use o formato definido em http://www.data-vocabulary.org/Organization. O valor de
itemtype deve ser a prpria URL que documenta o formato. Veja como fica:
Arquivo: exemplos/20/visie.html
1 2 3 4 5 Visie Padres Web6 7 89 10 Visie Padres Web11 12 Alameda dos Ubiatans, 257 - Planalto Paulista13 14 So Paulo -15 SP -16 Brasil17 18 04070-03019 20 +55.11.3477-334721 2223 24
Claro que a vantagem de usar o formato padronizado ao invs de inventar o seu no apenas no
ter o trabalho de pensar os nomes das propriedades. Os sistemas de busca, e outros sistemas que
acessem seu site, podem entender e tratar esses dados. O Google j faz isso, veja neste endereo:
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861
HTML 5 - Curso W3C Escritrio Brasil 89A nova gerao de aplicaes web II
21. HISTRICODESESSOEAPI
STORAGE
Histrico de Sesso e API StorageUm dos grandes desafios de usabilidade ao se construir aplicaes web com a tecnologia atual
apresentar um modelo de navegao consistente para o usurio. Duas grandes lacunas nos impe-
diam de faz-lo:
1. No havia uma forma simples de fazer com que as aes locais do usurio numa pgina
fossem refletidas na prxima. Por exemplo, se o usurio abre e fecha itens em um menu em
rvore e em seguida navega para a prxima pgina, era muito difcil fazer com que o menu
aparece no mesmo estado na segunda pgina.
2. No havia uma forma simples de fazer com que as aes do usurio numa pgina Ajax res-
pondessem corretamente aos botes de controle de histrico do navegador (voltar e avanar).
HTML5 traz formas simples de solucionar os dois problemas.
Histrico de Sesso
Voc provavelmente conhece o objeto history do na-
vegador e seus mtodos go, back e forward. Ele nos
permite, via javascript, um controle bsico do histrico
de navegao. O mesmo controle que o usurio, voltar e
avanar.
O objeto history foi vitaminado no HTML5 com dois novos mtodos:
Segurana
Claro, se seu script tentar associar uma URL fora do domnio do script lista de histrico, isso vai resultar numa ex-ceo de segurana.
1. pushState(data,title[,url]): acrescenta uma entrada na lista de histrico.
2. replaceState(data,title[,url]): modifica a entrada atual na lista de histrico.
Com isso, voc pode acrescentar itens lista de histrico, associando dados ou mesmo uma URL a
eles. Por exemplo, digamos que voc tenha trs elementos de contedo em sua pgina e um script
que exiba um por vez de acordo com os cliques do usurio no menu:
function showContent(n){
// Escondemos todos os elementos de contedo for(var i=1;i
HTML 5 - Curso W3C Escritrio Brasil 91A nova gerao de aplicaes web II
usando o boto de voltar do navegador. Cada vez que ele usar o histrico, ser disparado um evento
popstate. Assim, para que nosso script esteja completo, basta tratar esse evento:
function showPage(n){
// Escondemos todos os elementos de contedo for(var i=1;i
1. Interfacecomplexa: o cdigo para armazenar Cookies envolve complexos clculos com da-
tas e controle do nome de domnio.
2. Limitedearmazenamento: alguns agentes de usurio permitiam o armazenamento de no
mximo 20 Cookies, com apenas 4KB cada.
HTML5 traz uma nova maneira de armazenar dados no client, a API Storage. Um objeto Storage
possui os mtodos:
1. getItem(key): obtm um valor armazenado no Storage
2. setItem(key,value) guarda um valor no Storage
3. removeItem(key) exclui um valor do Storage
4. clear() limpa o Storage
Esto disponveis dois objetos no escopo global (win-
dow): localStorage e sessionStorage. O objeto localStora-
ge armazena os dados no client sem expirao definida.
Ou seja, se o usurio fechar o navegador e voltar ao site
semanas depois, os dados estaro l. O sessionStorage
armazena os dados durante a sesso atual de navegao.
O cdigo para armazenar um valor na Storage se parece
com isso:
localStorage.setItem(userChoice,33)
E quando voc precisar desse valor, em outra pgina:
localStorage.getItem(userChoice)
Serializar
Uma outra complicao dos Cookies resolvida pela API Storage o fato de Cookies s armazenarem strings, nos obrigando a serializar arrays e obje-tos javascript. A especificao da API Storage rege que qualquer valor ja-vascript pode ser armazenado e recu-perado. Infelizmente, em alguns dos navegadores em que testamos, os valo-res so convertidos para strings assim como nos Cookies. Toramos para que os agentes de usurio implementem corretamente esse recurso.
HTML 5 - Curso W3C Escritrio Brasil 93A nova gerao de aplicaes web II
Essa interface j muito mais simples que a de Cookies. Mas pode ficar melhor. Voc pode usar o
Storage como um array. Por exemplo:
if(!sessionStorage[theme]){ sessionStorage[theme]=oldfurniture;}
No h como isso ser mais simples! Alm disso, o espao de armazenamento sugerido pela docu-
mentao de 5MB para cada domnio, resolvendo, acredito que por mais uma dcada, o problema
de espao de armazenamento local.
HTML 5 - Curso W3C Escritrio Brasil 95A nova gerao de aplicaes web II
22. APLICAESOFFLINE
CachingHTML5 prov uma maneira de se indicar ao navegador que elementos so necessrios e devem ser
postos em cache para que uma aplicao funcione offline. O exemplo da documentao oficial
bastante esclarecedor. D uma olhada na seguinte pgina:
Arquivo: exemplos/22/clock.html
1 2 3 4 Clock5 6 7 8 9 The time is: 10 11
Trata-se de um widget de relgio. Para funcionar, este HTML depende dos arquivos clock.js e
clock.css. Para permitir que o usurio acesse esta pgina offile, precisamos escrever um arquivo de
manifesto, indicando que URLs devem ser postas em cache. Vamos preparar uma nova verso do
widget, contendo o manifesto, que um arquivo com a extenso .manifest e que deve ser servido
com o tipo MIME text/cache-manifest. Em nosso caso, o arquivo vai se chamar clock.mani-
fest e ter o seguinte contedo:
CACHE MANIFESTclock1.htmlclock.cssclock.js
Agora veja o HTML com o arquivo de manifesto linkado:
Arquivo: exemplos/22/clock1.html
1 2 3 4 Clock5 6 7 8 9 The time is: 10 11
Note que recomendado que voc insira o prprio HTML principal na lista de URLs do arquivo
de manifesto, embora no seja necessrio. Ao encontrar uma pgina com um arquivo de manifesto
vinculado, o navegador far cache das URLs listadas no manifesto e da prpria pgina.
Note tambm que no necessrio que todas as URLs para cache estejam importadas no documnto
atual. O arquivo de manifesto pode contar todas as pginas de sua aplicao que forem necessrias
para permitir o funcionamento offline, inclusive a navegao entre pginas.
O objeto ApplicationCacheO objeto ApplicationCache controla o status e operaes de caching da pgina. Ele pode ser aces-
sado via javascript, assim:
window.applicationCache
Seu mtodo mais interessante o update(), que faz com que o agente de usurio recarregue o cache
da aplicao. Alm disso, ele possui a propriedade status, cujo valor numrico pode ser um dos
seguintes:
0-UNCACHEDNo h um arquivo de manifesto nesta pgina ou apontando para ela
1-IDLEO objeto ApplicationCache est ocioso. O cache est atualizado.
HTML 5 - Curso W3C Escritrio Brasil 97A nova gerao de aplicaes web II
2CHECKINGO arquivo de manifesto est sendo baixado e conferido.
3-DOWNLOADINGAs URLs vinculadas no manifesto esto sendo baixadas.
4-UPDATEREADYO cache antigo, mas ainda no foi marcado como obsoleto.
5-OBSOLETEO cache foi marcado como obsoleto e precisa ser atualizado assim que possvel.
O objeto ApplicationCache tambm possui os seguintes eventos, relacionados a sua mudana de
status:
onchecking onerror onnoupdate ondownloading onprogress onupdateready oncached onobsolete
Como voc pode ver, alm de onerror, temos um evento para cada um dos status da lista acima.
Controle de status da aplicaoNo exemplo do relgio acima no h formulrios ou submisses Ajax. O agente de usurios no
troca dados com o servidor. Assim muito fcil fazer sua aplicao rodar offline, mas essa no a
realidade da maioria das aplicaes. Vimos no captulo anterior como fazer armazenamento local
de dados. Com isso, voc pode armazenar os dados que o navegador deveria enviar para o servidor
enquanto a aplicao estiver offline e, to logo ela esteja online, enviar tudo.
Para sa