Apostila HTML 5

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.


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.


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.


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. }


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:


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.


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


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.


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


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.


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.


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/.


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.

email

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.


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.


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.


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.


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


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.


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) {


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.


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.


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 &PlusMinus;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:


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.


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.


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.


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.


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:


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.


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.


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.


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.


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:


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.


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.


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:


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


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:


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:


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


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


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


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.


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.


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.


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

Apostila HTML 5

Documents

Transcript of Apostila HTML 5