70
7/18/2019 Guia de Referência - HTML 5 http://slidepdf.com/reader/full/guia-de-referencia-html-5 1/70 a de Referência http://tableless.com.br/html5/print.php 70 29/08/2011 17:0

Guia de Referência - HTML 5

Embed Size (px)

DESCRIPTION

Um guia muito útil sobre HTML 5. Pode contribuir muito no dia a dia de quem trabalhar diretamente com a linguagem ou com curiosos que queiram saber mais sobre o assunto.

Citation preview

Page 1: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 1/70

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 2: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 2/70

GUIA DE REFERÊNCIA

 Índice

 Parte 1: Markup

Visão geral do HTML5.1.

 Análise do suporte atual pelos navegadores e estratégias de uso2.

 Estrutura ásica! "#$T%&E e c'arsets(. Modelos de conte)do*.

 +ovos ele,entos e atriutos5.

 Ele,entos ,odi-icados e ausentes.

 Parte 2: Formulários e Multimídia

 +ovos tipos de ca,pos/.

Tipos de dados e validadores0. "etal'es e conte)do editável ..

 "ragndrop e corre3ão ortográ-ica14.

 Ele,entos audio e video! e codecs11.

 Ele,ento device e trea, A&6 12.

 Parte 3: A nova geração de aplicações e! " 

 Mat'ML e V71(.

$anvas A&6 1*.

erversent events15.

 "#M e HTML51.

 +ovos eventos "#M 1/.

 Menus e toolars10.

Tipos de lin8s1.

 Parte #: A nova geração de aplicações e! "" 

 Microdata24.

 Hist9rico de sessão e A&6 torage21.

 Aplica3:es o--line22.

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 3: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 3/70

croll in to vie; e 'idden2(.

7eolocation A&6 2*.

<ndo25.

Sobre esse conteúdo

! "isie foi escolhida pelo #$% do &rasil para ministrar um treinamento sobre '()*5 para os

seus membros e al+uns con,idados. -ara tanto construmos uma apostila com todo o contedo

abordado neste nosso curso. ssa apostila est sendo a+ora publicada sob %reati,e %ommons

a3ui no (ableless. speramos 3ue a4ude a comunidade de desen,ol,imento eb brasileira.

ssa apostila ficar em processo de constante atuali6ao 4 3ue muitos pontos do '()*5 no

foram ainda definidos e tambm por3ue di,ersas outras caractersticas esto sendo plane4adas e

rascunhadas ainda. e ,ocê ti,er 3ual3uer su+esto por fa,or nos contacte.

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 4: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 4/70

VISÃO GERAL DO HTML5

;e acordo com o #$% a #eb baseada em $ pilares:

<, es=ue,a de no,es para locali>a3ão de -ontes de in-or,a3ão na ?e! esse es=ue,a c'a,ase <@6.

<, &rotocolo de acesso para acessar estas -ontes! 'oe o HTT&.

<,a linguage, de HBperteCto! para a -ácil navega3ão entre as -ontes de in-or,a3ãoD o HTML.

"amos nos focar no terceiro pilar o '()*.

 HBperteCto'()* uma abre,iao de '<perte=t )ar>up *an+ua+e ? *in+ua+em de )arcao de

'<perte=to. Resumindo em uma frase: o '()* uma lin+ua+em para publicao de contedo

@te=to ima+em ,deo udio e etcA na #eb.

B '()* baseado no conceito de 'iperte=to. 'iperte=to so con4untos de elementos C ou nós

 C li+ados por cone=Des. stes elementos podem ser pala,ras ima+ens ,deos udio

documentos etc. stes elementos conectados formam uma +rande rede de informao. les no

esto conectados linearmente como se fossem te=tos de um li,ro onde um assunto li+ado ao

outro se+uidamente. ! cone=o feita em um hiperte=to al+o impre,isto 3ue permite a

comunicao de dados or+ani6ando conhecimentos e +uardando informaDes relacionadas.

-ara distribuir informao de uma maneira +lobal necessrio ha,er uma lin+ua+em 3ue se4a

entendida uni,ersalmente por di,ersos meios de acesso. B '()* se propDe a ser esta

lin+ua+em.

;esen,ol,ido ori+inalmente por (im &erners?*ee o '()* +anhou popularidade 3uando o

)osaic ? broser desen,ol,ido por )arc !ndreessen na dcada de 1990 ? +anhou fora. ! partir 

da desen,ol,edores e fabricantes de brosers utili6aram o '()* como base compartilhando

as mesmas con,enDes.

# co,e3o e a interoperailidadentre 199$ e 1995 o '()* +anhou as ,ersDes '()*E '()*2.0 e '()*$.0 onde foram

 propostas di,ersas mudanas para enri3uecer as possibilidades da lin+ua+em. %ontudo at a3ui

o '()* ainda no era tratado como um padro. !penas em 1997 o +rupo de trabalho do #$%

respons,el por manter o padro do cFdi+o trabalhou na ,erso $.2 da lin+ua+em fa6endo com

3ue ela fosse tratada como prtica comum. "ocê pode ,er: http://.$.or+/(R/html01

/appendi=/chan+es.html.

;esde o comeo o '()* foi criado para ser uma lin+ua+em independente de plataformas

 brosers e outros meios de acesso. Hnteroperabilidade si+nifica menos custo. "ocê cria apenas

um cFdi+o '()* e este cFdi+o pode ser lido por di,ersos meios ao in,s de ,ersDes diferentes

 para di,ersos dispositi,os. ;essa forma e,itou?se 3ue a #eb fosse desen,ol,ida em uma base

 proprietria com formatos incompat,eis e limitada.

-or isso o '()* foi desen,ol,ido para 3ue essa barreira fosse ultrapassada fa6endo com 3ue a

informao publicada por meio deste cFdi+o fosse acess,el por dispositi,os e outros meios com

caractersticas diferentes no importando o tamanho da tela resoluo ,ariao de cor.

;ispositi,os prFprios para deficientes ,isuais e auditi,os ou dispositi,os mF,eis e portteis. B

'()* de,e ser entendido uni,ersalmente dando a possibilidade para a reutili6ao dessa

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 5: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 5/70

informao de acordo com as limitaDes de cada meio de acesso.

?HAT ?or8ing 7roupn3uanto o #$% foca,a suas atenDes para a criao da se+unda ,erso do I'()* um +rupo

chamado #eb '<perte=t !pplication (echnolo+< #or>in+ Group ou #'!(#G trabalha,a em

uma ,erso do '()* 3ue tra6ia mais fle=ibilidade para a produo de ebsites e sistemas

 baseados na eb.

B #'!(#G @http://.hat+.or+/A foi fundado por desen,ol,edores de empresas como

)o6illa !pple e Bpera em 200. les no esta,am feli6es com o caminho 3ue a #eb toma,a e

nem com o rumo dado ao I'()*. -or isso estas or+ani6aDes se 4untaram para escre,er o 3ue

seria chamado ho4e de '()*5.

ntre outros assuntos 3ue o #'!(#G se foca,a era #eb Jorms 2.0 3ue foi includo no

'()*5 e o #eb %ontrols 1.0 3ue foi abandonado por en3uanto.

! participao no +rupo li,re e ,ocê pode se inscre,er na lista de email para contribuir.

-or ,olta de 200 o trabalho do #'!(#G passou ser conhecido pelo mundo e principalmente

 pelo #$% ? 3ue at ento trabalha,am separadamente ? 3ue reconheceu todo o trabalho do

+rupo. m Butubro de 200 (im &erners?*ee anunciou 3ue trabalharia 4untamente com o#'!(#G na produo do '()*5 em detrimento do I'()* 2. %ontudo o I'()*

continuaria sendo mantido paralelamente de acordo comas mudanas causadas no '()*. B

+rupo 3ue esta,a cuidando especificamente do I'()* 2 foi descontinuado em 2009.

# HTML5 e suas ,udan3asKuando o '()* foi lanado o #$% alertou os desen,ol,edores sobre al+umas boas prticas

3ue de,eriam ser se+uidas ao produ6ir cFdi+os client?side. ;esde este tempo assuntos como a

separao da estrutura do cFdi+o com a formatao e princpios de acessibilidade foram tra6idos

 para discussDes e L ateno dos fabricantes e desen,ol,edores.

%ontudo o '()* ainda no tra6ia diferencial real para a semMntica do cFdi+o. o '()*tambm no facilita,a a manipulao dos elementos ,ia Na,ascript ou %. e ,ocê 3uisesse

criar um sistema com a possibilidade de ;ra+On ;rop de elementos era necessrio criar um

+rande script com bu+s e 3ue muitas ,e6es no funciona,am de acordo em todos os brosers.

O que é o HTML5?

B '()*5 a no,a ,erso do '()*. n3uanto o #'!(#G define as re+ras de marcao

3ue usaremos no '()*5 e no I'()* eles tambm definem !-Hs 3ue formaro a base da

ar3uitetura eb. ssas !-Hs so conhecidas como DOM Level 0.

Pm dos principais ob4eti,os do '()*5 facilitar a manipulao do elemento possibilitando o

desen,ol,edor a modificar as caractersticas dos ob4etos de forma no intrusi,a e de maneira 3ue

se4a transparente para o usurio final.

!o contrrio das ,ersDes anteriores o '()*5 fornece ferramentas para a % e o Na,ascript

fa6erem seu trabalho da melhor maneira poss,el. B '()*5 permite por meio de suas !-Hs a

manipulao das caractersticas destes elementos de forma 3ue o ebsite ou a aplicao

continue le,e e funcional.

B '()*5 tambm cria no,as ta+s e modifica a funo de outras. !s ,ersDes anti+as do '()*

no continham um padro uni,ersal para a criao de seDes comuns e especficas como rodap

cabealho sidebar menus e etc. Qo ha,ia um padro de nomenclatura de H;s %lasses ou ta+s.

 Qo ha,ia um mtodo de capturar de maneira automtica as informaDes locali6adas nos rodaps

dos ebsites.

' outros elementos e atributos 3ue sua funo e si+nificado foram modificados e 3ue a+ora

 podem ser reutili6ados de forma mais efica6. -or e=emplo elementos como & ou H 3ue foram

descontinuados em ,ersDes anteriores do '()* a+ora assumem funDes diferentes e entre+am

mais si+nificado para os usurios.

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 6: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 6/70

B '()*5 modifica a forma de como escre,emos cFdi+o e or+ani6amos a informao na p+ina.

eria mais semMntica com menos cFdi+o. eria mais interati,idade sem a necessidade de

instalao de plu+ins e perda de performance. a criao de cFdi+o interoper,el pronto para

futuros dispositi,os e 3ue facilita a reutili6ao da informao de di,ersas formas.

B #'!(#G tem mantido o foco para manter a retrocompatibilidade. Qenhum site de,er ter de

ser refeito totalmente para se ade3uar aos no,os conceitos e re+ras. B '()*5 est sendo criado

 para 3ue se4a compat,el com os brosers recentes possibilitando a utili6ao das no,as

caractersticas imediatamente.

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 7: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 7/70

ANÁLISE DO SUPORTE ATUAL PELOSNAVEGADORES E ESTRATÉGIAS DE USO

# desenvolvi,ento ,odular !nti+amente para 3ue uma no,a ,erso do '()* ou do % fosse lanada todas as ideias

listadas na especificao de,eriam ser testadas e desen,ol,idas para ento serem publicadas para

o uso dos brosers e os desen,ol,edores.

sse mtodo foi mudado com o lanamento do '()*5 e o %$. ! partir de a+ora as duas

tecnolo+ias foram di,ididas em mFdulos. Hsso 3uer di6er 3ue a comunidade de desen,ol,edores

e os fabricantes de brosers no precisam esperar 3ue todo o padro se4a escrito e publicado para utili6arem as no,idades das lin+ua+ens.

!s propriedades do %$ por e=emplo foram di,ididas em pe3uenos +rupos. ' um +rupo

cuidando da propriedade &ac>+round outro da propriedade &order outro das propriedades de

(e=to e etc. %ada um destes +rupos so independentes e podem lanar suas no,idades a 3ual3uer 

momento. *o+o o desen,ol,imento para eb ficou mais dinMmico com no,idades mais

constantes.

B ponto ne+ati,o nesse formato 3ue problemas de compatibilidade podem ocorrer com mais

fre3uencia. -or e=emplo um broser pode adotar bordas arredondadas e outro no. Bu um

 broser pode escolher suportar um !-H diferente do !-H 3ue o concorrente implementou.

%ontudo os brosers tem mostrado +rande interesse em se manterem atuali6ados em relao aos

seus concorrentes.

 Motores de @enderi>a3ão' uma +rande di,ersidade de dispositi,os 3ue acessam a internet. ntre eles h uma srie de

tablets smartphones pcSs e etc. %ada um destes meios de acesso utili6am um determinado

 broser para na,e+ar na eb. Qo h como os desen,ol,edores manterem um bom n,el de

compatibilidade com todos estes brosers le,ando em considerao a particularidade de cada

um. Pma maneira mais se+ura de manter o cFdi+o compat,el ni,elar o desen,ol,imento

 pelos motores de renderi6ao. %ada broser utili6a um motor de renderi6ao 3ue

respons,el pelo processamento do cFdi+o da p+ina.

!bai=o se+ue uma lista dos principais brosers e seus motores:

interessante 3ue ,ocê faa cFdi+o compat,el com estes motores. Jocando a compatibilidade

nos motores de renderi6ao ,ocê atin+ir uma amplitude maior de brosers.

-or e=emplo se seu cFdi+o funcionar no #eb>it ,ocê alcanar o afari e o %hrome dois dos

 principais brosers do mercado para des>tops. !lm disso ,ocê tambm alcana aparelhos

como &lac>berr< i-hone i-od (ouch i-ad e dispositi,os 3ue rodam !ndroid.

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 8: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 8/70

$o,patiilidade co, HTML5!tualmente o #eb>it o motor mais compat,el com os -adrDes do '()*5. %omo a !pple tem

interesse 3ue seus dispositi,os se4am ultracompat,eis com os -adrDes ela tem feito um belo

trabalho de atuali6ao e a,ano da compatibilidade deste motor.

%ontudo o Jirefo= e o Bpera 4 esto compat,eis com +rande parte da especificao do '()*5

e %$ e a cada up+rade eles tra6em mais no,idades e atuali6ao dos padrDes.

B 3ue pode te preocupar de ,erdade a retrocompatibilidade com ,ersDes anti+as de brosers

como o Hnternet =plorer. ! )icrosoft est fa6endo um bom trabalho com o H9 mas as ,ersDes8 e 7 no tem 3uase nenhum suporte ao '()*5 o 3ue um problema srio para aplicaDes eb

 baseadas em tecnolo+ias mais recentes mas 3ue a base de usurios utili6a as ,ersDes anti+as do

Hnternet =plorer.

!bai=o se+ue uma tabela simples de compatibilidade entre os brosers e al+uns mFdulos do

'()*5:

 

Técnicas de detec3ão-ode ser 3ue o usurio no utili6e um broser 3ue suporta '()*5. Qeste caso ,ocê pode

redirecion?lo para uma ,erso do site mais simples ou tal,e6 apenas mostrar uma mensa+em

alertando o usurio sobre a importMncia da atuali6ao do broser. -ara isso temos al+umas

tcnicas de deteco para conferir se o broser suporta ou no '()*5.

Kuando o broser ,isita um ebsite ele constrFi uma coleo de ob4etos 3ue representam

elementos '()* na p+ina. %ada elemento no cFdi+o representado no ;B) como um ob4eto

diferente. (odo ob4eto ;B) tem propriedades em comum mas al+uns ob4etos tem

caractersticas especficas. Psaremos estes ob4etos para fa6ermos a deteco. !bai=o se+ue

meios 3ue ,ocê poder utili6ar para detectar o suporte do broser:

Veri-i=ue se u,a deter,inada propriedade eCiste e, oetos gloais co,o ?6+"#? ou +AV67AT#@. +esse caso!veri-ica,os o suporte a geolocali>a3ão.

1.

$rie u, ele,ento e veri-i=ue se u,a deter,inada propriedade eCiste neste ele,ento.2.

$rie u, ele,ento e veri-i=ue se u, deter,inado ,étodo eCiste neste ele,ento! então c'a,e o ,étodo e veri-i=ue se ovalor retorna. &or eCe,plo! teste =uais -or,atos de vdeo são suportados.

(.

$rie u, ele,ento e de-ina u, atriuto co, u, deter,inado valor! então veri-i=ue se o atriuto suporta este valor. &or eCe,plo! crie u, input e veri-i=ue =uais tBpes são suportados.

*.

Utilizando o Modernizr

B )oderni6r @http://.moderni6r.com/A uma biblioteca de deteco 3ue lhe permite

,erificar o suporte da maioria das caractersticas do '()*5 e %$.

B )oderni6r roda automaticamente assim 3ue ,ocê o adiciona no head do documento. !ssim se

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 9: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 9/70

,ocê 3uiser ,erificar se o broser suporta Geolocali6ao por e=emplo basta inserir este script

na p+ina. e o broser suportar a feature testada ele retornar true:

if (Modernizr.geolocation) {

  // Aceita a feature

} else {

  // Não aceita a feature testada.

}

a de Referência http://tableless.com.br/html5/print.php

70 29/08/2011 17:0

Page 10: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 10/70

ESTRUTURA BÁSICA, DOCTYPE E CHARSETS

! estrutura bsica do '()*5 continua sendo a mesma das ,ersDes anteriores da lin+ua+em h

apenas uma e=cesso na escrita do ;oct<pe. e+ue abai=o como a estrutura bsica pode ser 

se+uida:

rquivo! e"e#$los%&%estruturabasica'(t#l

  1 <!DO"#$ %M&'

  <html lang*+t,-r*'

  <head '

  < meta charset*0,2*'

  3 <link rel*st4les5eet* type*te6t/css* href*estilo.css*'

  7 <title'</title'

  8 </head '

  2 < body'

  9 < p'$strutura -:sica de u; %M&</p'

 1

11 < pre'

 1 =lt>!DO"#$ %M&=gt>< br'

 1 =lt>5t;l lang*+t,-r*=gt>< br'

 1 =lt>5ead=gt>< br'

 13 =lt>;eta c5arset*0,2*=gt>< br'

 17 =lt>lin? rel*st4les5eet* t4+e*te6t/css* 5ref*estilo.css*=gt>< br'

 18 =lt>title=gt>=lt>/title=gt>< br'

 12 =lt>/5ead=gt>< br'

 19 =lt>-od4=gt>< br'

 

1 =lt>/-od4=gt>< br'

  =lt>/5t;l=gt>< br'

  </pre'

  <a href*@aascri+tB 5istor4.go(,1)*'Coltar +ara o artigo</a'

 3

7 </body'

 8 </html'

# "octBpeB ;oct<pe de,e ser a primeira linha de cFdi+o do documento antes da ta+ '()*.

<!DO"#$ 5t;l'

B ;oct<pe indica para o na,e+ador e para outros meios 3ual a especificao de cFdi+o utili6ar.

m ,ersDes anteriores era necessrio referenciar o ;(; diretamente no cFdi+o do ;oct<pe.

%om o '()*5 a referência por 3ual ;(; utili6ar responsabilidade do &roser.

B ;oct<pe no uma ta+ do '()* mas uma instruo para 3ue o broser tenha informaDessobre 3ual ,erso de cFdi+o a marcao foi escrita.

# ele,ento HTMLB cFdi+o '()* uma srie de elementos em r,ore onde al+uns elementos so filhos de outros

e assim por diante. B elemento principal dessa +rande r,ore sempre a ta+ '()*.

<5t;l lang*+t,-r*'

B atributo *!QG necessrio para 3ue os user?a+ents saibam 3ual a lin+ua+em principal do

documento.*embre?se 3ue o atributo *!QG no restrito ao elemento '()* ele pode ser utili6ado em

3ual3uer outro elemento para indicar o idioma do te=to representado.

-ara encontrar a lista+em de cFdi+os das lin+ua+ens acesse: http://.$.or+/Hnternational

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 11: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 11/70

/3uestions/3a?choosin+?lan+ua+e?ta+s.

 HEA"! (a+ '!; onde fica toda a parte inteli+ente da p+ina. Qo '!; ficam os metadados.

)etadados so informaDes sobre a p+ina e o contedo ali publicado.

Metata) *(arset

 Qo nosso e=emplo h uma metata+ respons,el por cha,ear 3ual tabela de caractres a p+inaest utili6ando.

<;eta c5arset*utf,2*'

 Qas ,ersDes anteriores ao '()*5 essa ta+ era escrita da forma abai=o:

<;eta 5tt+,eui*ontent,4+e* content*te6t/5t;l> c5arsetutf,2*'

ssa forma anti+a ser tambm suportada no '()*5. %ontudo melhor 3ue ,ocê utili6e a

no,a forma.

! #eb acessada por pessoas do mundo inteiro. (er um sistema ou um site 3ue limite o acesso e pessoas de outros pases al+o 3ue ,ai contra a tradio e os ideais da internet. -or isso foi

criado uma tabela 3ue suprisse essas necessidades essa tabela se chama Pnicode. ! tabela

Pnicode suporta al+o em torno de um milho de caracteres. !o in,s de cada re+io ter sua

tabela de caracteres muito mais sensato ha,er uma tabela padro com o maior nmero de

caracteres poss,el. !tualmente a maioria dos sistemas e brosers utili6ados por usurios

suportam plenamente Pnicode. -or isso fa6endo seu sistema Pnicode ,ocê +arante 3ue ele ser

 bem ,isuali6ado a3ui na %hina ou em 3ual3uer outro lu+ar do mundo.

B 3ue o Pnicode fa6 fornecer um nico nmero para cada caractere no importa a plataforma

nem o pro+rama nem a ln+ua.

Ta) L+,- 

' dois tipos de lin>s no '()*: a ta+ ! 3ue so lin>s 3ue le,am o usurio para outros

documentos e a ta+ *HQT 3ue so lin>s para fontes e=ternas 3ue sero usadas no documento.

 Qo nosso e=emplo h uma ta+ *HQT 3ue importa o % para nossa p+ina:

<lin? rel*st4les5eet* t4+e*te6t/css* 5ref*estilo.css*'

B atributo rel*st4les5eet* indica 3ue a3uele lin> relati,o a importao de um ar3ui,o

referente a folhas de estilo.

' outros ,alores para o atributo R* como por e=emplo o !*(RQ!(:

<lin? rel*alternate* t4+e*a++lication/ato;E6;l* title*feed* 5ref*/feed/*'

 Qeste caso indicamos aos user?a+ents 3ue o contedo do site poder ser encontrado em um

caminho alternati,o ,ia !tom J;.

 Qo '()*5 h outros lin>s relati,os 3ue ,ocê pode inserir como o rel*arc5ies* 3ue

indica uma referência a uma coleo de material histFrico da p+ina. -or e=emplo a p+ina de

histFrico de um blo+ pode ser referenciada nesta ta+.

a de Referência http://tableless.com.br/html5/print.php

e 70 29/08/2011 17:0

Page 12: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 12/70

MODELOS DE CONTEÚDO

' pe3uenas re+ras bsicas 3ue nFs 4 conhecemos e 3ue esto no '()* desde o incio. stas

re+ras definem onde os elementos podem ou no estar. e eles podem ser filhos ou pais de outros

elementos e 3uais os seus comportamentos.

;entre todas as cate+orias de modelos de contedo e=istem dois tipos de elementos: elementos

de linha e de bloco.

Bs elementos de linha marcam na sua maioria das ,e6es te=to. !l+uns e=emplos: a strong

e; i;g in+ut a--r s+an.

Bs elementos de blocos so como cai=as 3ue di,idem o contedo nas seDes do la<out.

!bai=o se+ue al+umas premissas 3ue ,ocê precisa relembrar e conhecer:

#s ele,entos de lin'a pode, conter outros ele,entos de lin'a! dependendo da categoria =ue ele se encontra. &or eCe,ploD o ele,entoa não pode conter o ele,entolabel.

#s ele,entos de lin'a nunca pode, conter ele,entos de loco.

 Ele,entos de loco se,pre pode, conter ele,entos de lin'a.

 Ele,entos de loco pode, conter ele,entos de loco! dependendo da categoria =ue ele se encontra. &or eCe,plo! u, parágra-o não pode conter u, "6V. Mas o contrário é possvel.

stes dois +randes +rupos podem ser di,ididos em cate+orias. stas cate+orias di6em 3ual

modelo de contedo o elemento trabalha e como pode ser seu comportamento.

$ategorias%ada elemento no '()* pode ou no fa6er parte de um +rupo de elementos com caractersticas

similares. !s cate+orias esto a se+uir. )anteremos os nomes das cate+orias em in+lês para 3ue

ha4a um melhor entendimento:

 Metadata content 

 Flo; content 

ectioning content 

 Heading content 

 &'rasing content  E,edded content 

 6nteractive content 

!bai=o se+ue como as cate+orias esto relacionadas de acordo com o #'!(#G:

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 13: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 13/70

 Metadata content Bs elementos 3ue compDe a cate+oria )etadata so:

ase

co,,and 

lin8 

,etanoscript 

 script 

 stBle

title

ste contedo ,em antes da apresentao formando uma relao com o documento e seu

contedo com outros documentos 3ue distribuem informao por outros meios.

 Flo; content ! maioria dos elementos utili6ados no bod< e aplicaDes so cate+ori6ados como Jlo %ontent.

o eles:

a

ar 

address

area Gse -or u, decendente de u, ele,ento de ,apa

article

aside

audio

do

loc8=uote

utton

canvas

cite

code

co,,and 

datalist 

del details

d-n

div

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 14: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 14/70

Page 15: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 15/70

tale

teCtarea

ti,e

ul 

var 

video

;r 

TeCt 

-or ,ia de re+ra elementos 3ue seu modelo de contedo permitem inserir 3ual3uer elemento 3ue

se encai=a no Jlo %ontent de,em ter pelo menos um descendente de te=to ou um elemento

descendente 3ue faa parte da cate+oria e;-edded.

ectioning content stes elementos definem um +rupo de cabealhos e rodaps.

article

asidenav

 section

&asicamente so elementos 3ue 4untam +rupos de te=tos no documento.

 Heading content Bs elementos da cate+oria 'eadin+ definem uma seo de cabealhos 3ue podem estar contidos

em um elemento na cate+oria ectionin+.

'1

'2

'(

'*

'5

'group

 &'rasing content Ja6em parte desta cate+oria elementos 3ue marcam o te=to do documento bem como oselementos 3ue marcam este te=to dentro do elemento de par+rafo.

a

ar 

area Gse ele -or descendente de u, ele,ento de ,apa

audio

do

uttoncanvas

cite

code

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 16: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 16/70

co,,and 

datalist 

del Gse ele contiver u, ele,ento da categoria de &'rasing

d-n

e,

e,ed 

i

i-ra,e

i,g 

input 

ins Gse ele contiver u, ele,ento da categoria de &'rasing

8d 

8eBgen

lael 

lin8 Gse o atriuto itemprop -or utili>ado

,ap Gse apenas ele contiver u, ele,ento da categoria de &'rasing

,ar8 

,at'

,eta Gse o atriuto itemprop -or utili>ado

,eter 

noscript 

oect 

output 

 progress

=

ruB

 sa,p

 script 

 select 

 s,all 

 span

 strong 

 su

 sup

 svg 

teCtarea

ti,e

var 

video

;r 

TeCt 

 E,edded content  Qa cate+oria mbedded h elementos 3ue importam outra fonte de informao para o

documento.

audio

canvase,ed 

i-ra,e

i,g 

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 17: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 17/70

,at'

oect 

 svg 

video

 6nteractive content Hnteracti,e %ontent so elementos 3ue fa6em parte da interao de usurio.

a

audio Gse o atriuto control -or utili>ado

utton

details

e,ed 

i-ra,e

i,g Gse o atriuto usemap -or utili>ado

input Gse o atriuto type não tiver o valor 'idden

8eBgen

lael 

,enu Gse o atriuto type tiver o valor toolbar  

oect Gse o atriuto usemap -or utili>ado

 select 

teCtarea

video Gse o atriuto control -or utili>ado

!l+uns elementos no '()* podem ser ati,ados por um comportamento. Hsso si+nifica 3ue o

usurio pode ati,?lo de al+uma forma. B incio da se3uencia de e,entos depende do mecanismo

de ati,ao e normalmente culminam em um e,ento de clic> se+uido pelo e,ento ;B)!cti,ate.

B user?a+ent permite 3ue o usurio ati,e manualmente o elemento 3ue tem este comportamento

utili6ando um teclado mouse comando de ,o6 etc.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 18: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 18/70

NOVOS ELEMENTOS E ATRIBUTOS

! funo do '()* indicar 3ue tipo de informao a p+ina est e=ibindo. Kuando lemos um

li,ro conse+uimos entender e diferenciar um ttulo de um par+rafo. &asta percebermos a

3uantidade de letra tamanho da fonte cor etc. Qo cFdi+o isso diferente. RobUs de busca e

outros user?a+ents no conse+uem diferenciar tais detalhes. -or isso cabe ao desen,ol,edor 

marcar a informao para 3ue elas possam ser diferenciadas por di,ersos dispositi,os.

%om as ,ersDes anteriores do '()* nFs conse+uimos marcar di,ersos elementos do la<out

estruturando a p+ina de forma 3ue as informaDes ficassem em suas reas especficas.

%onse+uimos diferenciar por e=emplo um par+rafo de um ttulo. )as no conse+uamos

diferenciar o rodap do cabealho. ssa diferenciao era apenas percebida ,isualmente pelo

la<out pronto ou pela posio dos elementos na estrutura do '()*. ntretanto no ha,ia

maneira de detectar automaticamente estes elementos 4 3ue as ta+s utili6ada para ambos

 poderiam ser i+uais e no ha,ia padro para nomenclatura de H;s e %lasses.

B '()*5 trou=e uma srie de elementos 3ue nos a4udam a definir setores principais no

documento '()*. %om a a4uda destes elementos podemos por e=emplo diferenciar 

diretamente pelo cFdi+o '()*5 reas importantes do site como sidebar rodap e cabealho.

%onse+uimos seccionar a rea de contedo indicando onde e=atamente o te=to do arti+o.

stas mudanas simplificam o trabalho de sistemas como os dos buscadores. %om o '()*5 os

 buscadores conse+uem ,asculhar o cFdi+o de maneira mais efica6. -rocurando e +uardando

informaDes mais e=atas e le,ando menos tempo para estocar essa informao.

!bai=o se+ue uma lista dos no,os elementos e atributos includos no '()*5:

ste atributos foram descontinuados por3ue modificam a formatao do elemento e suas funDes

so melhores controladas pelo %:

align co,o atriuto 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 co,o atriutos da tag body .

background  co,o atriuto da tag body .

bgcolor  co,o atriuto da tag table ! tr  ! td  ! th e body .

border  co,o atriuto da tag table e object.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 19: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 19/70

cellpadding  e cellspacing  co,o atriutos da tag table.

char  e charoff  co,o atriutos da tag col ! colgroup ! tbody  ! td  ! tfoot ! th ! thead  e tr .

clear  co,o atriuto da tag br .

compact co,o atriuto da tag dl ! menu ! ol e ul.

frame co,o atriuto da tag table.

frameborder  co,o atriuto da tag iframe.

height co,o atriuto da tag td  e th.

hspace e vspace co,o atriutos da tag img  e object.marginheight e marginwidth co,o atriutos da tag iframe.

noshade co,o atriuto da tag hr .

nowrap co,o atriuto da tag td  e th.

rules co,o atriuto da tag table.

scrolling  co,o atriuto da tag iframe.

size co,o atriuto da tag hr .

type co,o atriuto da tag li ! ol e ul.

valign co,o atriuto da tag col ! colgroup ! tbody  ! td  ! tfoot ! th ! thead  e tr .

width co,o atriuto da tag hr  ! table ! td  ! th ! col ! colgroup e pre.

!l+uns atributos do '()* no so mais permitidos no '()*5. e eles ti,erem al+um

impacto ne+ati,o na compatibilidade de al+um user?a+ent eles sero discutidos.

rev  e charset co,o atriutos da tag link e a.

shape e coords co,o atriutos da tag a.

longdesc co,o atriuto da tag img  and iframe.

target co,o atriuto da tag link.

nohref  co,o atriuto da tag area.

 profile co,o atriuto da tag head .

version co,o atriuto da tag html.name co,o atriuto da tag img  Guse id  instead.

scheme co,o atriuto da tag meta.

archive ! classid  ! codebase ! codetype ! declare e standby  co,o atriutos da tag object.

valuetype e type co,o atriutos da tag param.

axis e abbr  co,o atriutos da tag td  e th.

scope co,o atriuto da tag td .

 Atriutos

!l+uns elementos +anharam no,os atributos:

# atriuto autofocus pode ser especi-icado nos ele,entosinput GeCceto =uando 'á atriuto hidden atriudo!textarea ! select e button.

 A tag a passa a suportar o atriuto media co,o a tag link.

 A tag form gan'a u, atriuto c'a,ado novalidate. Iuando aplicado o -or,ulário pode ser enviado se,valida3ão de dados.

# ele,ento ol gan'ou u, atriuto c'a,ado reversed . Iuando ele é aplicado os indicadores da lista são colocadosna orde, inversa! isto é! da -or,a descendente.

# ele,ento fieldset agora per,ite o atriuto disabled . Iuando aplicado! todos os -il'os de fieldset sãodesativados.

# novo atriuto placeholder  pode ser colocado e,inputs e textareas.

# ele,ento area agora suporta os atriutos hreflang  e rel co,o os ele,entos a e link

# ele,ento base agora suporta o atriuto target assi, co,o o ele,ento a. # atriuto target ta,é, não está,ais descontinuado nos ele,entosa e area por=ue são )teis para aplica3:es ;e.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 20: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 20/70

Bs atributos abai=o foram descontinuados:

# atriuto border  utili>ado na tag img .

# atriuto language na tag script.

# atriuto name na tag a. &or=ue os desenvolvedores utili>a, 6" e, ve> de na,e.

# atriuto summary  na tag table.

B #$% mantm um documento atuali6ado constantemente nesta p+ina: http://.$.or+/(R/2010/#;?html5?diff?201002/.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 21: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 21/70

ELEMENTOS MODIFICADOS E AUSENTES

=istiam no '()* al+uns elementos 3ue tra6iam apenas caractersticas ,isuais e no semMnticas

 para o contedo da p+ina. sses elementos anteriormente foram descontinuados por3ue

atrapalha,am o cFdi+o e tambm por3ue sua funo era facilmente suprida pelo %. %ontudo

al+uns destes elementos ,oltaram L tona com no,os si+nificados semMnticos. Butros elementos

3ue no descontinuados mas seus si+nificados foram modificados.

 Ele,entos ,odi-icados

# ele,ento J passa a ter o ,es,o nvel se,Kntico =ue u, &A+! ,as ainda ,anté, o estilo de negrito no teCto.$ontudo! ele não dá nen'u,a i,portKncia para o teCt ,arcado co, ele.

# ele,ento 6 ta,é, passa a ser u, &A+. # teCto continua sendo itálico e para usuários de leitores de tela! a vo> utili>ada é ,odi-icada para indicar n-ase. 6sso pode ser )til para ,arcar -rases e, outros idio,as! ter,os técnicos eetc.

B interessante 3ue nestes dois casos hou,e apenas uma mudana semMntica. -ro,a,elmente

,ocê no precisar modificar cFdi+os onde estes dois elementos so utili6ados.

# ele,ento a se, o atriuto href  agora representa u, place'older no eCato lugar =ue este lin8 se encontra.

# ele,ento address agora é tratado co,o u,a se3ão no docu,ento.

# ele,ento hr  agora te, o ,es,o nvel =ue u, parágra-o! ,as é utili>ado para =uerar lin'as e -a>er separa3:es.

# ele,ento strong  gan'ou ,ais i,portKncia.

# ele,ento head  não aceita ,ais ele,entoschild  co,o seu -il'o.

 Ele,entos ou atriutos descontinuadosBs elementos abai=o foram descontinuados por 3ue seus efeitos so apenas ,isuais:

ase-ont 

ig 

center 

 -ont 

 s

 stri8e

tt 

u

Bs elementos abai=o foram descontinuados por 3ue ferem os princpios de acessibilide e

usabilidade:

 -ra,e

 -ra,eset 

no-ra,es

Bs elementos abai=o no foram includos na especificao por3ue no ti,eram uso entre os

desen,ol,edores ou por3ue sua funo foi substituda por outro elemento:

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 22: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 22/70

acronym não -oi includo por=ue criou u, ocado de con-usão entre os desenvolvedores =ue pre-erira, utili>ar a tag abbr .

applet -icou osoleto e, -avor da tagobject.

isindex  -oi sustitudo pelo uso de -or, controls.

dir  -icou osoleto e, -avor da tag ul.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 23: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 23/70

#pera 14n3uanto escre,o o Bpera 10  o nicona,e+ador ;es>top 3ue fe6 um bomtrabalho implementando os no,osrecursos de formulrio do '()*5. e,ocê instal?lo poder testar 3uasetudo deste e dos prF=imos doiscaptulos.

dateti,elocal B tipo de campo datetime?local trataautomaticamente as diferenas de fusoshorrios submetendo ao ser,idor erecebendo dele ,alores G)(. %om isso,ocê pode com facilidade construir um sistema 3ue ser usado emdiferentes fusos horrios e permitir 3uecada usurio lide com os ,alores emseu prFprio fuso horrio.

NOVOS TIPOS DE CAMPOS

 $ovos valores para o atri!uto t%peB elemento input aceita os se+uintes no,os ,alores para o atributo t<pe:

tel (elefone. Qo h mscara de formatao ou ,alidao propositalmente ,isto no ha,er 

no mundo um padro bem definido para nmeros de telefones. claro 3ue ,ocê pode

usar a no,a !-H de ,alidao de formulrios @descrita no captulo 8A para isso. Bs

a+entes de usurio podem permitir a inte+rao com sua a+enda de contatos o 3ue

 particularmente til em telefones celulares.

 searc'Pm campo de busca. ! aparência e comportamento do campo pode mudar li+eiramente

dependendo do a+ente de usurio para parecer com os demais campos de busca do sistema.

e,ail ?mail com formatao e ,alidao. B a+ente de usurio pode inclusi,e promo,er a inte+raocom sua a+enda de contatos.

url Pm endereo eb tambm com formatao e ,alidao.

 "atas e 'orasB campo de formulrio pode conter 3ual3uer um desses ,alores no atributo t<pe:

dateti,e

date

,ont'

;ee8 

ti,e

dateti,elocal 

(odos de,em ser ,alidados e formatados pelo a+ente de usurio 3ue pode inclusi,e mostrar um

calendrio um seletor de horrio ou outro au=lio ao preenchimento 3ue esti,er dispon,el no

sistema do usurio.

B atributo adicional step define para os ,alidadores e au=lios ao preenchimento a diferena

mnima entre dois horrios. B ,alor de step em se+undos e o ,alor padro 0. !ssim se

,ocê usar ste+** o usurio poder fornecer como horrios 7:00 7:05 e 7:10 mas no

7:02 ou 7:08.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 24: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 24/70

nu,er "e4a um e=emplo do tipo number com seus atributos opcionais:

rquivo! e"e#$los%.%nu#ber'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*en,0F*'

  <head '

  < meta charset*0,2* /'

  3 <title'Nu;-er t4+e</title'

  7 </head '

  8

2 < body'

  9

1 <input name*alue6* type*nu;-er* 

11 alue*1.* step*.*

 1  min**  max** /'

 1

1 </body'

 13

17 </html'

 18

B Bpera 10 nos d uma e=celente ,isuali6ao do 3ue um a+ente de usurio pode fa6er nesse

caso:

range"amos modificar no e=emplo acima apenas o ,alor de t<pe mudando de VnumberV para

Vran+eV:

rquivo! e"e#$los%.%ran)e'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*en,0F*'

  <head '

  < meta charset*0,2* /'

  3 <title'Gange t4+e</title'

  7 </head '

  8

2 < body'

  9

1 <input name*alue6* type*range* 11 alue*1.* step*.*

 1  min**  max** /'

 1

1 </body'

 13

17 </html'

 18

 Qo,amente Bpera 10:

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 25: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 25/70

color B campo com t4+e*color*  um seletor de cor. B a+ente de usurio pode mostrar um

controle de seleo de cor ou outro au=lio 3ue esti,er dispon,el. B ,alor ser uma cor no

formato Hff77.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 26: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 26/70

TIPOS DE DADOS E VALIDADORES

Formulários vitaminados%onforme ,ocê de,e ter percebido no ltimo captulo o '()*5 a,anou bastante nos recursos

de formulrios facilitando muito a ,ida de 3uem precisa desen,ol,er aplicaDes eb baseadas

em formulrios. Qeste captulo ,amos a,anar um pouco mais nesse assunto e ,ocê ,ai ,er a

coisa ,ai ficar ainda melhor.

auto-ocus!o incluir em um campo de formulrio o atributo autofocus assim:

<in+ut na;e*login* autofocus '

B foco ser colocado neste campo automaticamente ao carre+ar a p+ina. ;iferente das soluDes

em Na,ascript o foco estar no campo to lo+o ele se4a criado e no apenas ao final do

carre+amento da p+ina. Hsso e,ita o problema muito comum 3uando ,ocê muda o foco com

Na,ascript de o usurio 4 estar em outro campo di+itando 3uando o foco mudado.

 &lace'older teCt "ocê 4 de,e ter ,isto um VplaceholderV. (radicionalmente ,nhamos fa6endo isso:

rquivo! e"e#$los%/%$lace(olderold'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*en,0F*'

  <head '

  < meta charset*0,2* /'

  3 <title'#lace5olderI t5e old st4le</title'

  7 </head '

  8

2 < body'

  9 <input name** value*Fearc5 5ere* 

1 onfocus*if(t5is.alueJFearc5 5ereJ)t5is.alueJJ*'

 11 </body'

 11 </html'

'()*5 nos permite fa6er isso de maneira muito mais ele+ante:

rquivo! e"e#$los%/%$lace(older'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*en,0F*'

  <head '

  < meta charset*0,2* /'

  3 <title'#lace5olderI %M&3 Ka4</title'

  7 </head '

  8

2 < body'

  9 <input name**  placeholder*Fearc5 5ere*'

 1 </body' 11

1 </html'

re=uired 

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 27: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 27/70

-ara tornar um campo de formulrio obri+atFrio @seu ,alor precisa ser preenchidoA basta em

'()*5 incluir o atributo reuired:

<in+ut na;e*login* reuired'

,aClengt'"ocê 4 conhecia o atributo ;a6lengt5 3ue limita a 3uantidade de caracteres em um campo

de formulrio. Pma +rande lacuna dos formulrio '()* foi corri+ida. m '()*5 o elemento

te=tarea tambm pode ter ma=len+thW

&alidação de 'ormuláriosPma das tarefas mais enfadonhas de se fa6er em Na,ascript ,alidar formulrios. Hnfeli6mente

tambm uma das mais comuns. '()*5 facilita muito nossa ,ida ao ,alidar formulrios

tornando automtica boa parte do processo. m muitos casos todo ele. "ocê 4 ,iu 3ue pode

tornar seus campos VespertosV com os no,os ,alores para o atributo t<pe 3ue 4 incluem

,alidao para datas emails PR*s e nmeros. "amos um pouco alm.

 patternB atributo +attern nos permite definir e=pressDes re+ulares de ,alidao sem Na,ascript. "e4a

um e=emplo de como ,alidar %-:

rquivo! e"e#$los%/%$attern'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*+t,LG*'

  <head '

  < meta charset*0,2* /'

  3 <title'O atri-uto +attern</title'

  7 </head '  8

2 < body'

  9

1 <form '

 11 <label for*$#*'$#B

1 <input name*$#* id *$#* required pattern*d{3},d{}* /'

 1 </label'

 1 <input type*su-;it* value*$niar* /'

 13 </form '

 17

18 </body'

 12

19 </html'

 

novalidate e -or,novalidate-odem ha,er situaDes em 3ue ,ocê precisa 3ue um formulrio no se4a ,alidado. Qestes casos

 basta incluir no elemento for; o atributo noalidate.

Butra situao comum 3uerer 3ue o formulrio no se4a ,alidade dependendo da ao de

submit. Qesse caso ,ocê pode usar no boto de submit o atributo for;noalidate. "e4a um

e=emplo:

rquivo! e"e#$los%/%or#novalidate'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*+t,LG*'

  <head '

  < meta charset*0,2* /'  3 <title'Falando rascun5o</title'

  7 <style'

  8 la-el{displayB-loc?>}

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 28: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 28/70

  2

</style'

  9 </head '

 1

11 < body'

 1

1 <form '

 1 <label'no;eB <input name*no;e* required '</label'

 13 <label'e;ailB <input name*e;ail* type*e;ail* required '</label'

 17 <label';ensage;B <textarea name*;ensage;* required '</textarea'</label'

 18 <input type*su-;it* name*action* value*Falar rascun5o* formnovalidate'

 12 <input type*su-;it* name*action* value*$niar*'

 19 </form ' 

1 </body'

 

</html'

 

$usto, validators claro 3ue as ,alidaDes padro embora atendam a maioria dos casos no so suficientes para

todas as situaDes. )uitas ,e6es ,ocê ,ai 3uerer escre,er sua prFpria funo de ,alidao

Na,ascript. ' al+uns detalhes na especificao do '()*5 3ue ,o a4ud?lo com isso:

( novo evento oninput  é disparado =uando algo é ,odi-icado no valor de u, ca,po de -or,ulário. "i-erente de

onc'ange! =ue é disparado ao -inal da edi3ão! oninput é disparado ao editar. di-erente ta,é, de on8eBup eon8eBpress! por=ue vai capturar =ual=uer ,odi-ica3ão no valor do ca,po! -eita co, ,ouse! teclado ou outra inter-ace=ual=uer.

1.

( m)todo set*ustom&alidit% pode ser invocado por voc. Ele recee u,a string. e a string -or va>ia! o ca,po será,arcado co,o válido. $aso contrário! será ,arcado co,o inválido.

2.

%om isso ,ocê pode inserir suas ,alidaDes no campo de formulrio e dei=ar o na,e+ador fa6er 

o resto. Qo mais preciso capturar o e,ento submit e trat?lo. "e4a por e=emplo este

formulrio com ,alidao de %-J:

rquivo! e"e#$los%/%custo#validator'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*+t,LG*'

  <head '

  < meta charset*0,2* /'

  3 <title'usto; alidator</title'

  7 <!,, O aruio c+f.@s cont; a funPão alida#I ue

  8 rece-e u;a string e retorna true ou false. ,,'

  2 <script src*c+f.@s*'</script'

  9 <script'

 1 function #(i){

 11 i.setusto;Calidit4(alida#(i.alue)JJBJ# in:lido!J)

 1 }

 1

</script'

 1 </head '

 13

17 < body'

 18 <form '

 12 <label'#B <input name*c+f* oninput*#(t5is)* /'</label'

 19 <input type*su-;it* value*$niar* /'

  </form '

 1 </body'

 

</html'

 

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 29: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 29/70

DETALHES E CONTEÚDO EDITÁVEL.

 Ainda mais 'ormulários"e4amos mais duas coisas 3ue ,ocê certamente 4 fe6 mais de uma ,e6 e foram simplificadas

 pelo '()*5.

 "etal'es e su,ário"e4a um e=emplo de uso dos no,os elementos details e summar<:

<details'

  <su;;ar4'o+iando <+rogress ;a6*92* alue*1812*' 8I3Q</su;;ar4'

  <dl'

  <dt'a;an5o totalB</dt'

  <dd'9.2RL</dd'

  <dt'ransferidoB</dt'

  <dd'1.812</dd'

  <dt'a6a de transferSnciaB</dt'

  <dd'18RL/s</dd'

  <dt'No;e do aruioB</dt'

  <dd'%M&3.;+</dd'

  </dl'

</details'

"e4a como um a+ente de usurio poderia renderi6ar isso:

ao clicar:

$onte)do editável -ara tornar um elemento do '()* edit,el basta incluir nele o atributo contenteditable assim:

<di contentedita-le*true*'

  $dite,;e...

</di'

"ocê pode ler e manipular os elementos edit,eis normalmente usando os mtodos do ;B).

Hsso permite com facilidade construir uma rea de edio de '()*.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 30: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 30/70

DRAG-N-DROP E CORREÇÃO ORTOGRÁFICA

 +rag and +rop! !-H de ;ra+ and ;rop relati,amente simples. &asicamente inserir o atributo

dragga-le*true* num elemento o torna arrast,el. h uma srie de e,entos 3ue ,ocê

 pode tratar. Bs e,entos do ob4eto sendo arrastado so:

dragstart # oeto co,e3ou a ser arrastado. # evento =ue a -un3ão recee te, u, atriuto target ! =ue conté, o oeto sendoarrastado.

drag # oeto está sendo arrastado

dragend  A a3ão de arrastar ter,inou

B ob4eto sobre o 3ual outro arrastado sofre os se+uintes e,entos:

dragenter # oeto sendo arrastado entrou no oeto target 

dragleave# oeto sendo arrastado deiCou o oeto target 

dragover # oeto sendo arrastado se ,ove sore o oeto target 

drop# oeto sendo arrastado -oi solto sore o oeto target 

 "etal'es i,portantesD! ao padro do e,ento dra+o,er cancelar a ao de dra++in+ atual. !ssim nos ob4etos 3ue

de,em receber drop preciso setar uma ao de dra+o,er com no mnimo return false.

eleDes de te=to so automaticamente arrast,eis no precisam do atributo dragga-le. se

,ocê 3uiser criar uma rea para onde seleDes de te=to possam ser arrastadas basta tratar esses

mesmos e,entos.

-or fim todas funDes de tratamento de e,ento de dra+ recebem um ob4eto de e,ento 3uecontm uma propriedade dataransfer um dataset comum a todos os e,entos durante essa

operao de dra+.

rquivo! e"e#$los%10%dra)'(t#l

  1 <!DO"#$ %M&'

  <html'

  <head '

  < meta content*te6t/5t;l> c5arset0,2* http-equiv*content,t4+e*/'

  3 <title'%M&3 Drag and dro+ de;onstration</title'

  7 <style type*te6t/css*'

  8 H-o6AI H-o6L { 

2 floatBleft>  widthB1+6> heightB+6>  paddingB1+6>  marginB1+6> font-sizeB8Q>

  9 }

 1 H-o6A {  background-colorB  blue> }

 11 H-o6L {  background-colorB green> }

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 31: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 31/70

 1

1 HdragI Hdrag {

 1  widthB3+6>  paddingB3+6>  marginB3+6>  borderB+6  black solid> line-heightB3+6> 

13 }

 17 Hdrag {  background-colorB red>}

 18 Hdrag {  background-colorB orange>}

 12

</style'

 19 <script type*te6t/@aascri+t*'

 

1 "uando o usu#rio inicia um drag$ guardamos no dataset do evento

o id do objeto sendo arrastado

  function dragFtart(e) {

  e.dataransfer.setData(*TD*I e.target.getAttri-ute(JidJ))>

 3 }

 7

8 "uando o usu#rio arrasta sobre um dos pain%is$ retornamos

 2 false para &ue o evento n'o se propague para o navegador$ o

 9 &ue faria com &ue o conte(do fosse selecionado)

  function dragOer(e) { return false> }

 1

"uando soltamos o elemento sobre um painel$ movemos o

  elemento$ lendo seu id do dataset do evento

  function dragDro+(e) {

 3 var idelt  e.dataransfer.getData(*TD*)>

 7 e.target.a++end5ild(docu;ent.get$le;entL4Td(idelt))>

 8 }

 2

9

</script'

  </head '

 1 < body'

  <!,, #ainel 1 ,,'

  <div id *-o6A*

  ondrop*return dragDro+(eent)*

 3 ondragover*return dragOer(eent)*' 7 <!,, Dragga-le 1 ,,'

 8 <div id *drag* draggable*true*

 2 ondragstart*return dragFtart(eent)*'drag ;e</div'

 9 <!,, Dragga-le ,,'

 3 <div id *drag* draggable*true*

 31 ondragstart*return dragFtart(eent)*'drag ;e</div'

 3 </div'

 3

3 <!,, #ainel ,,'

 33 <div id *-o6L*

 37 ondrop*return dragDro+(eent)*

 38 ondragover*return dragOer(eent)*'

 32 </div'

 39

7 </body'

 71 </html'

2"e#$lo

e+ue um e=emplo de dra+?and?drop baseado no e=celente e=emplo de *aurent Nouanneau

@http://l4ouanneau.com/lab/html5/demodra+drop.htmlA.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 32: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 32/70

 ,evisão ortográ'ica e gramatical Bs a+entes de usurio podem oferecer recursos de re,iso orto+rfica e +ramatical dependendo

do 3ue hou,er dispon,el em cada plataforma. Bs desen,ol,edores podem controlar o

comportamento dessa ferramenta atra,s do atributo s+ellc5ec?. Hnserir 

s+ellc5ec?*true*  num elemento fa6 com 3ue a re,iso este4a habilitada para ele. "ocê

tambm pode desabilitar a re,iso para determinado elemento inserindo

s+ellc5ec?*false* .

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 33: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 33/70

ELEMENTOS AUDIO E VIDEO, E CODECS

 -udio-ara inserir udio em uma p+ina eb basta usar o elemento audio:

<audio src*;us.oga* controls*true* auto+la4*true* /'

B ,alor de controls define se um controle de udio com botDes de pla< pause ,olume barra de

 pro+resso contador de tempo etc. ser e=ibido na tela. e for setado como VfalseV ser preciso

controlar o pla<er ,ia 4a,ascript com mtodos como +la4() e +ause(). B ,alor de autopla<define se o udio ,ai comear a tocar assim 3ue a p+ina carre+ar.

#rigens alternativas de áudio(odo a+ente de usurio de,eria suportar o codec li,re B++"orbis mas infeli6mente pode

acontecer de seu ar3ui,o o+a no tocar no computador ou celular de al+um. Kuem sabe do seu

chefe ou seu cliente. nto preciso saber como oferecer um formato alternati,o de udio.

Ja6emos assim:

<audio controls*true* auto+la4*true*'

  <source src*;us.oga* /'

  <source src*;us.;+* /'

  <source src*;us.K;a* /'

</audio'

%laro o a+ente de usurio pode ainda no saber tocar nenhum desses formatos ou se3uer ter 

suporte a udio. -ara esses casos oferea um contedo alternati,o:

<audio controls*true* auto+la4*true*'

  <source src*;us.oga* /'

  <source src*;us.;+* /'

  <source src*;us.K;a* /'

  <+'aPa o <a 5ref*;us.;+*'doKnload da ;Usica</a'.</+'

</audio'

&ídeoB uso de ,deo muito semelhante ao de udio:

<ideo src*u.og* Kidt5** 5eig5t** /'

com ,rios elementos source:

<ideo controls*true* auto+la4*true* Kidt5** 5eig5t**'

  <source src*u.og* /'

  <source src*u.;+* /'

  <source src*u.K;* /'  <+'aPa o <a 5ref*u.;+*'doKnload do Vdeo</a'.</+'

</ideo'

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 34: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 34/70

# =ue -unciona na ;e)ar> -il+rim est escre,endo um li,romuito interessante @em in+lêsA chamadoV;i,e Hnto '()* 5V. B captulo sobre"deo  a referência de 3ue ,ocê

 precisa para publicar ,deo na eb com

'()*5.

*odecs muito importante 3ue ,ocê inclua nos seus elementos source de udio e ,deo

informao a respeito do container e codecs utili6ados. Hsso ,ai e,itar 3ue o na,e+ador 

tenha 3ue bai=ar pelo menos parcialmente o ar3ui,o de mdia para depois descobrir 

3ue no conse+ue toc?lo. importante lembrar 3ue a e=tenso do ar3ui,o no

informao rele,ante para isso pelo contrrio no si+nifica nada. Pma PR* pode no

ter e=tenso de ar3ui,o e pode le,ar a um redirecionamento.

-ara indicar ao na,e+ador o container e codecs de determinado ar3ui,o usa?se o

atributo t4+e no formato:

t4+eJ MIME-type do container> codecs*codec de vdeoI codec de !udio*J

-or e=emplo um ,deo em B++ usando os codecs (heora e "orbis ter seu source assim:

<source srcJideo.ogJ t4+eJideo/ogg> codecs*t5eoraI or-is*J'

%om )-G? a coisa um pouco mais complicada por 3ue preciso indicar ao na,e+ador 

tambm o profile do codec de ,deo utili6ado. "e4a um e=emplo:

<source srcJideo.;+J t4+eJideo/;+> codecs*;+..I ;+a..*J'

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 35: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 35/70

?or8ing "ra-t B contedo desse captulo est baseadonuma especificao 3ue ainda est emstatus de V#or>in+ ;raftV. Bu se4a ascoisas ainda podem mudar bastante.Ji3ue de olho no 3ue ,ai acontecer como elemento de,ice e a tream !-Hacessando @em in+lêsA:http://de,.$.or+/html5/html?de,ice/

ELEMENTO DEVICE E STREAM API

( elemento device"ocê pode inserir em seu '()* um elemento de acesso L ebcam do usurio assim:

<deice t4+e*;edia*'

Hsso ,ai e=ibir uma interface solicitando ao usurio acesso a sua ebcam. e ele ti,er 

mais de uma tambm ser permitido 3ue ele escolha 3ue ebcam usar. B atributo

media tambm pode conter o ,alor VfsV 3ue ,ai abrir uma cai=a de seleo no sistemade ar3ui,os permitindo ao usurio escolher um ar3ui,o para fa6er stream.

B passo se+uinte conectar o stream desse seu elemento de,ice a al+uma coisa. "e4a

 por e=emplo como conect?lo a um elemento ,ideo na prFpria p+ina fa6endo com 3ue o

usurio possa ,er a ima+em de sua prFpria ebcam:

rquivo! e"e#$los%13%videoc(at'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*en,0F*'

  <head '

  < meta charset*0,2* /'

  3 <title'Cideoc5atI ste+ 1</title'

  78 <script'

  2 function u+date(strea;) {

  9 docu;ent.get$le;entsL4agNa;e(JideoJ)WX.src  strea;.url>

 1 }

 11

</script'

 1

1 </head '

 1

13 < body'

 17

18 < p'o start c5attingI select a ideo ca;eraB <device type;edia onchange*u+date(t5is.data)*'</p'

 12 <video autoplay /'

 19

</body'

 1

</html'

 

trea,s"ocê de,e ter notado no script acima 3ue a funo de update recebe um parMmetro stream.

(rata?se de um ob4eto da classe tream 3ue possui uma propriedade url 3ue 4 usamos acima e

um mtodo record. B mtodo record inicia a +ra,ao do stream e retorna um ob4eto

treamRecorder. sse ltimo possui um mtodo stop 3ue retorna o ar3ui,o 3ue foi +ra,ado.

 &eertopeer *uidado4 B #$% ainda est trabalhando nessa especificao e tudo a3ui pode mudar. -or isso

no se preocupe em entender as mincias. aiba apenas 3ue '()*5 pre,ê 3ue os a+entes de

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 36: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 36/70

usurio tenham uma interface de comuicao -2- 3ue permite a troca de te=to ima+em ,deo e

ar3ui,os. -or en3uanto a especificao deste item est sendo escrita 4unto da do elemento

de,ice mas isso de,e +anhar uma p+ina prFpria em bre,e. Ji3ue de olho.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 37: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 37/70

MATHML E SVG

 Mat.M/B '()*5 incorpora o padro )ath)*. (rata?se de uma lin+ua+em de marcao baseada em

I)* para representao de fFrmulas matemticas. "ocê pode ler mais sobre )ath)* em

http://.$.or+/)ath/. -ara incorporar cFdi+o )ath)* em seu documento '()*5 no

 preciso fa6er declaraDes especiais. &asta escre,er normalmente o cFdi+o iniciando com um

elemento ;at5. "e4a este e=emplo:

rquivo! e"e#$los%1&%#at(#l'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'Mat5M&</title'

  7 </head '

  8 < body'

  2

9 < math xmlns*5tt+B//KKK.K.org/1992/Mat5/Mat5M&* '

 1 < mrow'

 11 < mi'6</mi'

 1 < mo'</mo'

 1 < mfrac'

 1 < mrow'

 13 < mo form *+refi6*'=;inus></mo'

 17 < mi'-</mi'

 18 < mo'=#lusMinus></mo'

 12 < msqrt'

 19 < msup'

  < mi'-</mi'

 1 < mn'</mn'

  </msup'

  < mo'=;inus></mo'

  < mn'</mn'

 3 < mo'=Tnisi-lei;es></mo'

 7 < mi'a</mi'

 8 < mo'=Tnisi-lei;es></mo'

 2 < mi'c</mi'

 9 </msqrt'

  </mrow'

 1 < mrow'

  < mn'</mn'

  < mo'=Tnisi-lei;es></mo'

  < mi'a</mi'

 3 </mrow'

 7 </mfrac'

 8 </mrow'

 2 </math'

 9

</body'

 1 </html'

"e4a como esse e=emplo renderi6ado no na,e+ador:

)esmo 3ue ,ocê nunca tenha ,isto )ath)* e este cFdi+o parea um pouco assustador dê uma

olhada com calma no cFdi+o comparando com a ima+em do resultado e ,ocê ,ai perceber 3ue

muito simples. (al,e6 al+o 3ue possa dei=?lo confuso a entidade =Tnisi-lei;es> 3ue

aparece al+umas ,e6es no cFdi+o. la est l para separar os fatores ac por e=emplo. sses

,alores so multiplicados o 3ue a fFrmula representa mas no 3ueremos colocar um operador 

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 38: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 38/70

de multiplicao entre eles por3ue por con,eno se simplesmente escre,emos ac 3ual3uer 

leitor saber 3ue isso uma multiplicao.

-or 3ue ento se preocupar em inserir =Tnisi-lei;es>X "ocê ,ai notar 3ue se remo,er a

entidade e a ta+ ;o correspondente o resultado ,isual ser o mesmo. %olocamos

=Tnisi-lei;es> por3ue )ath)* no sF ,isual semMntica. Pm outro a+ente de

usurio pode ter recursos de importar essa fFrmula para uma ferramenta de clculo por e=emplo.

 0& !ssim como )ath)* "G uma outra lin+ua+em I)* 3ue pode ser incorporada com

facilidade em '()*5. "ocê pode ler mais sobre "G em http://.$.or+/Graphics/"G/.

"G uma lin+ua+em para marcao de +rficos ,etoriais. "e4amos um e=emplo bem simples:

rquivo! e"e#$los%1&%sv)'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'FCY</title'  7 </head '

  8 < body'

  2

9 <svg  width** height**'

 1

11 <!,, 0; retZnguloB ,,'

 1 <rect x*1* y*1*  width*13* height*3* stroke*H* stroke-width*3* fill*H* /'

 1

1 <!,, 0; +olVgonoB ,,'

 13 < polygon fill*red* stroke*-lue* stroke-width*1* 

17 +oints*3I83 89I171 79I171 98I13

 18 I1 3I3 188I1 I13

 12 11I171 1I171* /'

 19

<!,, 0; cVrculo ,,'

 1 <circle cx*8* cy** r*7* stroke*H* stroke-width*3* fill*H* /'

 

</svg'

 

3 </body'

 7 </html'

,e4a como isso renderi6ado no na,e+ador:

poss,el fa6er muito mais com "G. ! maioria dos editores de +rficos ,etoriais ho4e e=porta

e importa automaticamente "G permitindo a um desi+ner construir um +rfico em seu editor 

,etorial predileto e e=port?lo diretamente. m se+uida um pro+ramador pode construir 

 4a,ascript 3ue manipula esse "G usando os mtodos do ;B). %om isso ,ocê pode ter 

+rficos dinMmicos com animao escal,eis e com e=celente 3ualidade ,isual pro+ram,eis

em Na,ascript sem tecnolo+ias proprietrias e plu+ins.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 39: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 39/70

 ECiste u, conteCto ("N!inda no. =istem ,riasimplementaDes de conte=to $; e cadafabricante de na,e+ador tem criado asua mas ainda no h um padro do#$% sobre esse assunto.

CANVAS API

( elemento canvas! %an,as !-H permite a ,ocê desenhar na tela do na,e+ador ,ia Na,ascript. B nico elemento

'()* e=istente para isso o elemento canas o resto todo feito ,ia Na,ascript. "e4a como

inserir o elemento canas numa p+ina:

<canas id*6* Kidt5** 5eig5t**'</canas'

Hsso ,ai e=ibir um retMn+ulo ,a6io. -ara desenhar nele primeiro obtemos o conte=to de desenhocom Na,ascript:

conte6tdocu;ent.get$le;entL4Td(J6J).getonte6t(JdJ)

!+ora 3ue temos um conte=to podemos desenhar nele. "amos comear com um

simples retMn+ulo:

conte6t.fillGect(1I 1I 3I 13)

imples noX Kue tal tentarmos al+o um pouco mais comple=oX ;ê uma olhada no

e=emplo:

rquivo! e"e#$los%1%canvas'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'anas A#T</title'

  7 </head '

  8 < body'

  2

9 <canvas id *6*  width** height**'</canvas'

 1 < button onclick*desen5ar()*'desen5ar</button'

 11

1 <script'

 1 function desen5ar(){

 1 *btemos o contexto

 13 conte6tdocu;ent.get$le;entL4Td(J6J).getonte6t(JdJ)

 17

18 +niciamos um novo desenho

 12 conte6t.-egin#at5()

 19

,ovemos a caneta para o inicio do desenho

 1 conte6t.;oeo(13I3)

 

-esenhamos as linhas

  conte6t.lineo(I3)

 3 conte6t.lineo(3I13)

 7 conte6t.lineo(3I13)

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 40: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 40/70

 8 conte6t.lineo(2I3)

 2 conte6t.lineo(13I3)

 9

* desenho n'o % de verdade en&uanto voc.

 1 n'o mandar o contexto pint#/lo)

 

0amos pintar o interior de amarelo

  conte6t.fillFt4leJHffJ

 3 conte6t.fill()

 7

8 0amos pintar as linhas de vermelho)

 2 conte6t.stro?eFt4leJHfJ

 9 conte6t.stro?e()

 

1 }

 

</script'

 

</body'

 3 </html'

,e4a o 3ue acontece 3uando se clica no boto:

' muito mais para ,ocê estudar se 3uiser se aprofundar na %an,as !-H. !penas para 3ue ,ocê

tenha uma idia poss,el desenhar te=to sombras +radientes incluir ima+ens no can,as

manipular os pi=els rotacionar e transformar os ob4etos.

$anvas e V7Pma d,ida muito comum 3uando usar %an,as 3uando usar "G. -ara saber escolher

 preciso entender as diferenas entre um e outro. "G ,etorial e baseado em I)* lo+o

acess,el ,ia ;B). %an,as desenhado pi=el a pi=el ,ia Na,ascript.

!ssim as ,anta+ens do "G so:

# conte)do é acessvel a leitores de tela1.

# grá-ico é escalável! não perde resolu3ão ou serril'a ao redi,ensionar 2.

# conte)do é acessvel via "#M (.

as ,anta+ens do %an,as:

 A per-or,ance é ,uito superior ao V7 na ,aioria dos casos1.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 41: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 41/70

  -ácil desen'ar via Oavascript. E, V7! é preciso -a>er seu script escrever PML para voc. $o, $anvas voc s9,anda desen'ar! e pronto.

2.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 42: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 42/70

SERVER-SENT EVENTS

 vent0ource! er,er?ent ,ents !-H uma maneira de in,erter o flu=o das aplicaDes !4a= fa6endo com

3ue o ser,idor possa disparar o en,io de dados ao a+ente de usurio. -ara isso cria?se no a+ente

de usurio um ob4eto ,entource:

esneK $entFource(Jco;;.+5+J)

Hsso ,ai abrir uma cone=o '((- para Vcomm.phpV e mantê?la escutando. %ada ,e6 3ue oser,idor en,iar e,entos para esse cliente ser disparado o e,neto messa+e do ob4eto

,entource. "e4a um e=emplo:

es.on;essagefunction(e){

  alert(*5egara; dadosB *Ee.data)

}

Hsso pode ser usado por e=emplo para implementar uma interface de chat ou um monitor de

status de al+uma operao demorada ocorrendo no ser,idor.

# protocolo de co,unica3ãom nosso e=emplo acima a p+ina comm.php en,ia e,entos para o a+ente de usurio. "ocê no

 precisa se preocupar em saber como isso funciona do lado do cliente uma ,e6 3ue o a+ente de

usurio fa6 todo o trabalho. )as importante 3ue saiba como isso de,e funcionar do lado do

ser,idor. ! PR* de comunicao de,e de,ol,er ao cliente um header ontent,t4+eB

te6t/eent,strea; . m se+uida en,ia as mensa+ens 3ue so blocos de te=to separados

um do outro por uma linha em branco:

dataB ;ensage; 1

dataB a ;ensage; te;

dataB ;ais de u;a lin5a

dataB ;ensage;

B prefi=o data: indica 3ue o 3ue se+ue so os dados da mensa+em. "ocê tambm pode usar o

 prefi=o id:

dataB ;ensage; 1

idB 1

dataB a ;ensage; te;

dataB ;ais de u;a lin5a

idB

dataB ;ensage;

idB

e ,ocê en,iar prefi=os id em suas mensa+ens e o a+ente de usurio perder a cone=o ao tentar 

reconectar ele ,ai en,iar o ,alor do ltimo id no header '((- &ast,$ent,TD. %om isso

,ocê pode por e=emplo en,iar as mensa+ens do chat do ponto em 3ue parou.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 43: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 43/70

DOM E HTML5

 +(M e 4M/5B )odelo de Bb4etos do ;ocumento @;B) na si+la em in+lêsA a interface entre a lin+ua+em

Na,ascript e os ob4etos do '()*. ;B) o mtodo padro para construo de aplicaDes ricas

com Na,ascript e amplamente conhecido e utili6ado. Qeste captulo supondo 3ue ,ocê 4

conhece ;B) para '()* ou I'()* ,amos nos focar na diferena entre as ,ersDes

anteriores do ;B) e a do '()* 5.

 &or =u "#MNBs primeiros na,e+adores a incorporar um motor de Na,ascript tinham alert prompt

document.rite e mais meia d6ia de maneiras de se intera+ir com o usurio. sF. ! idia de

acessar a r,ore de ob4etos do '()* trou=e poder Ls interfaces com o usurio na eb. ! idia

era to boa 3ue os fabricantes de na,e+adores no puderam esperar at 3ue ti,ssemos uma

especificao padro 3ue atendesse suas necessidades e criaram cada um seu prFprio mtodo de

resol,er o problema. Hsso resultou em anos e anos de incompatibilidade em 3ue era preciso

escre,er uma ,erso de seus scripts para cada na,e+ador.

Kueremos com certe6a e,itar uma no,a +uerra de padrDes. -or isso recomendamos a ,ocê por 

mais sedutor 3ue parea utili6ar um recurso proprietrio Na,ascript 3ue se atenha ao ;B).

&amos 6s di'erenças

 getEle,entsJB$lass+a,esse um sonho anti+o de todo desen,ol,edor Na,ascript. %om '()*5 ,ocê pode fa6er:

destaues docu;ent.get$le;entsL4lassNa;e(JdestaueJ)

isso retornar todos os elementos do '()* 3ue possuem a classe Vdesta3ueV.

innerHTMLButro sonho anti+o 3ue se torna realidade. ! propriedade inner'()* uma idia to boa 3ue

todos os na,e+adores atuais 4 a suportam h muito tempo e todo desen,ol,edor eb sabe

us?la. !pesar disso ela nunca ha,ia sido descrita como um padro.

e por,entura ,ocê nunca ,iu a propriedade inner'()* em ao @pu=a onde ,ocê esta,a nos

ltimos de6 anosXA saiba 3ue ela contm uma strin+ o contedo '()* da p+ina. ,ocê tem

acesso de leitura e escrita a essa propriedade.

"e4a um e=emplo de inner'()*:

function adicionaTte;(no;e){

  docu;ent.get$le;entL4Td(JlistaJ).inner%M& E J<li'JEno;eEJ</li'J

}

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 44: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 44/70

<sando getelectionG'oe! maioria dos na,e+adores ainda no

te,e tempo de se atuali6ar em relao Lespecificao e retorna uma strin+3uando ,ocê chamadocu;ent.getFelection() eum ob4eto election 3uando ,ocêchama KindoK.getFelection().%omo esperamos 3ue num futuro

activeEle,ent e 'asFocusGB documento '()*5 tem uma no,a propriedade acti,element 3ue contm o elemento 3ue

 possui o foco no momento. B documento tambm possui o mtodo hasJocus@A 3ue retorna true

se o documento contm o foco. eu usurio pode estar trabalhando com mltiplas 4anelas abas

frames ou mesmo ter alternado para outro aplicati,o dei=ando o na,e+ador com sua aplicao

Na,ascript rodando em se+undo plano. B mtodo hasJocus@A uma con,eniente maneira de

tratar aDes 3ue dependem do foco na aplicao atual.

"e4a um e=emplo de script dependente de foco:

rquivo! e"e#$los%16%ocus,oti7'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*+t,LG*'

  <head '

  < meta charset*0,2* /'

  3 <title'Notifier</title'

  7 <script'

  8

2 function notif4(te6t){

  9 docu;ent.get$le;entL4Td(J;sgJ).inner%M&EJ<+'JEte6tEJ</+'J

 1 titlelic?()

 11 }

 1

1 function titlelic?(){

 1 if(docu;ent.5asocus()){

 13 docu;ent.titleJNotifierJ

 17 return

 18 }

 12 docu;ent.titledocu;ent.titleJNotifierJJ[ NotifierJBJNotifierJ

 19 seti;eout(Jtitlelic?()JI3)

  }

 1

</script'

  </head '

 

3 < body'

 7 <input type*-utton* id *notif4* value*Notif4 in 3 seconds* 

8 onclic?*notif4(J\ill notif4 in 3 seconds...J)>seti;eout(Jnotif4(J$ent s5oot!J)JI3)* /'

 2 <div id *;sg*'</div'

 9 </body' 

1 </html'

 getelectionGBs ob4etos document e indo possuem um mtodo +etelection@A 3ue retorna a seleo atual

um ob4eto da classe election. ! seleo tem entre outros os se+uintes mtodos e propriedades:

anc.or$ode# ele,ento =ue conté, o incio da sele3ão

 'ocus$ode# ele,ento =ue conté, o -inal da sele3ão

selectAll*.ildern7parent$ode8eleciona todos os -il'os de parent+ode

deleteFrom+ocument78 @e,ove a sele3ão do docu,ento

range*ount  A =uantidade de intervalos na se le3ão

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 45: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 45/70

 prF=imo o comportamento dedocu;ent.getFelection()

mude su+erimos 3ue ,ocê prefira usar o mtodo de indo por en3uanto.

=uerBelector e IuerBe ,ocê usurio de 4Kuer< 4entendeu tudo. e=atamente a mesmaidia dos seletores 4Kuer<.

!l+uns preocupados usurios de 4Kuer<têm nos per+untado se no melhorem termos de performance usar aelector !-H. )as claro 3ue . e,ocê realmente souber pro+ramarescre,er todo o seu cFdi+o sempre sermelhor em performance 3ue usar umframeor>. )as o +anho nesse caso despre6,el. (al,e6 o conforte saber 3ue nos na,e+adores em 3ue isto estdispon,el a prFpria 4Kuer< usainternamente a elector !-H.

 get,angeAt7inde98 @etorna o intervalo na posi3ão indeC

add,ange7range8 Adiciona u, intervalo Q sele3ão

remove,ange7range8 @e,ove u, intervalo da sele3ão

+ntervalos de sele89o

"ocê de,e ter notado acima 3ue uma seleo um con4unto de inter,alos da classe Ran+e. %ada

inter,alo possui entre outros os se+uintes mtodos e propriedades:

delete*ontent78 @e,ove o conte)do do intervalo

set0tart7parento''set8eta o incio do intervalo para o caractere na posi3ão o--set dentro do ele,ento "#M parent 

setnd7parento''set8eta o -inal do intervalo para o caractere na posi3ão o--set dentro do ele,ento "#M parent 

(anto os ob4etos election 3uanto os ob4etos Ran+e retornam o te=to da seleo 3uando

con,ertidos para strin+s.

docu,ent.'ead B ob4eto document 4 possua uma propriedade bod< uma maneira con,eniente de acessar o

elemento bod< do '()*. !+ora ele +anhou uma propriedade head maneira tambm muito

con,eniente de acessar o elemento head.

elector A&6 ! elector !-H no no,idade do '()*5 anterior a ele. )as como ainda desconhecida de

 parte dos desen,ol,edores con,m di6er 3ue ela e=iste e 3ue continua funcionando no '()*5.

%om a selector !-H ,ocê pode usar seletores % para encontrar elementos ;B).

! elector !-H e=pDe duas funDes em cada um dos elementos ;B): 3uer<elector e

3uer<elector!ll. !mbas recebem como ar+umento uma strin+ com um seletor %. !

consulta sempre feita na subtree do elemento ;B) a partir do 3ual a chamada foi

disparada. ! 3uer<elector retorna o primeiro elemento 3ue satisfa6 o seletor ou null

caso no ha4a nenhum. ! 3uer<elector!ll retorna a lista de elementos 3ue satisfa6em o

seletor.

"e4a neste e=emplo um script para tabelas 6ebradas com elector !-H:

rquivo! e"e#$los%16%zebra'(t#l

  1 <!DO"#$ 5t;l'

  <html lang*+t,LG*'

  <head '

  < meta charset*0,2* /'

  3 <title']e-ra</title'

  7 <style'

  8 .ze-raon{ background Bsiler}

  2

</style'

  9 <script'

 1 KindoK.onloadfunction(){

 11 var ze-rardocu;ent.uer4FelectorAll(J.ze-ra t-od4 trJ)

 1 for(var i>i<ze-rar.lengt5>iE)

 1 ze-rarWiX.classNa;eJze-raonJ

 1 }

 13

</script'

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 46: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 46/70

 17 </head '

 18

12 < body'

 19 <table class*ze-ra*'

  <thead '<tr'

 1 <th'Cendedor</th' <th'otal</th'

  </tr'</thead '

  <tbody'<tr'

  <td 'Manoel</td ' <td '1.I</td '

 3 </tr'<tr'

 7 <td '^oaui;</td ' <td '1.I</td '

 8 </tr'<tr'

 2 <td 'Maria</td ' <td '1.I</td '

 9 </tr'<tr'  <td 'Marta</td ' <td '.1I</td '

 1 </tr'<tr'

  <td 'Antonio</td ' <td '.1I</td '

  </tr'<tr'

  <td '#edro</td ' <td '1.I</td '

 3 </tr'</tbody'

 7 </table'

 8 </body'

 2 </html'

*aracter:sticas es$eciais de Do#,odeList

!s listas de elementos retornadas pelos mtodos do ;B) no so !rra<s comuns so ob4etos

;omQode*ist o 3ue si+nifica 3ue entre outros mtodos especiais ,ocê pode usar listWX ou

list() para obter um elemento da lista. (ambm pode usar listW*na;e*X ou

list(*na;e*) para obter um ob4eto por seu nome. ;uas adiDes interessantes do '()*5 aousar este ltimo mtodo:

# oeto é uscado pelos atriutos na,e ou id.1.

<,a lista de ca,pos de -or,ulário co, o ,es,o valor no atriuto na,e Gu,a lista de radio uttons! por eCe,plo será retornada caso ,ais de u, oeto sea encontrado. Essa lista conté, u, atriuto especial! value! ,uitoconveniente. Ele conté, o valor do radio ,arcado e! ao ser setado! ,arca o radio correspondente.

2.

 "atasets"ocê pode atribuir dados arbitrrios a um elemento '()* 3ual3uer prefi=ando seus atributos

com Vdata?V. -or e=emplo:

<i;g src*co;+utador1.@+g* alt*Noo YNe6ius oret5in?er* id*c1*

  data,+rocessor*3Y5z* data,;e;or4*2YL*

data,5arddrie*17L* data,screenJ3*J '

"ocê pode acessar esses ,alores ,ia Na,ascript atra,s do atributo dataset assim:

ar i;gdocu;ent.get$le;entL4Td(Jc1J)

+roci;g.dataset.+rocessor

!s propriedades de dataset têm permisso de leitura e escrita.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 47: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 47/70

NOVOS EVENTOS DOM

;ma palavra so!re eventosB suporte ao tratamento de e,entos disparados pelo usurio parte essencial do ;B). '()*5

oferece a ,ocê um e=tenso con4unto de no,os e,entos. "amos dar uma olhada nos mais

interessantes:

 Ele,entos ,ulti,diaDoncanpla%# ele,ento audio ou video á te, dados su-icientes no u--er para co,e3ar a tocar.

oncanpla%t.roug.# ele,ento audio ou video á te, dados su-icientes no u--er para co,e3ar a tocar e! se a tran-erncia de dados continuar norit,o e, =ue está ocorrendo! esti,ase =ue tocará até o -inal se, interrup3:es.

ondurationc.ange# ele,ento audio ou video teve seu atriutoduration ,odi-icado. 6sso acontece! por eCe,plo! ao alterar a orige, da ,dia.

onemptied # ele,ento audio ou video teve u, erro de retorno va>io de dados da rede. # retorno va>io acontece =uando! por eCe,plo! voctenta invocar o ,étodo plaB de u, ele,ento =ue ainda não te, u,a orige, de ,dia de-inida.

onended # vdeo ou áudio c'egou ao -i,.

onloadeddata#s dados co,e3ara, a ser carregados e a posi3ão atual de plaBac8 á pode ser renderi>ada.

onloadedmetadata#s ,etadados -ora, carregados. Oá sae,os as di,ens:es! -or,ato e dura3ão do vdeo.

onloadstart #s dados co,e3ara, a ser carregados.

onpause# usuário clicou e, pause.

onpla%# usuário clicou e, plaB ou o plaBac8 co,e3ou por causa do atriuto autoplay 

onpla%ing # vdeo ou áudio está tocando.

onprogress# agente de usuário está uscando dados do vdeo ou áudio.

 Eventos e, ca,pos de -or,ulárioDoninput # usuário entrou co, dados no ca,po

oninvalid # ca,po não passou pela valida3ão

 Eventos geraisDonconte9tmenu

# usuário disparou u, ,enu de conteCto sore o oeto. +a ,aioria dos siste,as "es8top! isso signi-ica clicar co, o otãodireito do ,ouse ou segurando u,a tecla especial.

onmouse.eel  A rodin'a do ,ouse -oi acionada.

on!e'oreprint 

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 48: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 48/70

 "isparado antes da i,pressão da página. Voc pode usálo para ,odi-icar! esconder ou eCiir e le,entos! preparando a página para i,pressão.

ona'terprint  "isparado ap9s a i,pressão da página. Voc pode usálo para reverter o status anterior Q i,pressão.

on.as.c.ange A )lti,a por3ão da <@L! ap9s o 'as' GR! -oi ,odi-icada.

ono''line# agente de usuário -icou o--line.

ononline

# agente de usuário está nova,ente conectado.

onredo# usuário disparou a a3ão de S@e-a>erS.

onundo# usuário disparou a a3ão de S"es-a>erS.

 "raganddropD"imos a definio desses e,entos no %aptulo 10:

ondrag 

ondragend 

ondragenter 

ondragleave

ondragover 

ondragstart 

ondrop

 Atri!utos de evento! especificao do '()*5 padroni6ou um formato de atribuio de e,entos 3ue 4 era

amplamente utili6ado. "ocê pode atribuir e,entos atra,s de atributos '()* com o nome do

e,ento. -or e=emplo:

<in+ut on-lur*return erifica(t5is)* /'

claro 3ue ,ocê pode continuar usando o mtodo do ;B) add$ent&istener com a

,anta+em de poder atribuir ,rios listeners ao mesmo e,ento.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 49: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 49/70

MENUS E TOOLBARS

( elemento menuB elemento ;enu  usado para definir menus e barras de ferramenta. ;entro do menu ,ocê

 pode inserir submenus ou comandos. -ara inserir submenus basta inserir outros elementos

;enu. -ara definir comandos ,ocê pode inserir:

<, lin8! u, ele,entoa co, atriuto href 1.

<, otão! u, ele,ento button2.

<, otão! u, ele,ento input co, o atriuto type contendo utton! su,it! reset ou i,age(.

<, radioutton! u, ele,ento input co, o atriuto type contendo radio*.

<, c'ec8oC! u, ele,entoinput co, o atriuto type contendo c'ec8oC5.

<, ele,ento select ! contendo u, ou ,ais options! de-ine u, grupo de co,andos.

<, ele,ento =ual=uer co, o atriuto accesskey /.

<, ele,ento command 0.

Tipos de co,ando' três tipos de comando:

command <,a a3ão co,u,

c.eck!o9 <,a a3ão =ue pode estar no status de ligada ou desligada! e alterna entre esses dois stauts =uando clicada

radio<,a a3ão =ue pode estar no status de ligada ou desligada! e =uando clicada vai para o status de ligada! deligando todas asa3:es co, o ,es,o valor no atriuto radiogroup

;a lista de elementos poss,eis para definir comandos os três primeiros lin> button e input

 button definem comandos do tipo command. B 3uarto elemento radiobutton define um

comando do tipo radio. B 3uinto chec>bo= define um comando do tipo chec>bo=.

B se=to elemento o select ,ai definir um +rupo de comandos. e o select ti,er o atributomultiple definir uma lista de comandos do tipo chec>bo=. %aso contrrio os comandos sero

do tipo radio tendo o mesmo radio+roup.

 Qo stimo caso um elemento 3ual3uer com tecla de acesso o tipo de comando ,ai depender do

tipo de elemento 3ue recebeu access>e<.

# ele,ento co,,and -or fim temos o oita,o mtodo o elemento co;;and. Qeste caso o tipo de comando depender

do ,alor do atributo t4+e. "e4a um e=emplo de como us?lo:

<co;;and t4+e*co;;and* la-el*Falar* onclic?*salar()* '

;reira n9o usar co##and< $or enquanto

-or 3ue a especificao permite 3ue se use o no,o elemento command para definir comandos e

ao mesmo tempo permite 3ue se use os ,elhos elementos como input button e select para issoX

-ara possibilitar ao desen,ol,edor oferecer al+uma compatibilidade com na,e+adores anti+os.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 50: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 50/70

"e4a este e=emplo:

rquivo! e"e#$los%1/%co##and'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'Menus</title'

  7 </head '

  8

2 < body'

  9

1 < menu type*tool-ar*'

 11 <li'

 1 < menu label*ile*'

 1 < button type*-utton* onclick*fneK()*'NeK...</button'

 1 < button type*-utton* onclick*fo+en()*'O+en...</button'

 13 < button type*-utton* onclick*fsae()*'Fae</button'

 17 < button type*-utton* onclick*fsaeas()*'Fae as...</button'

 18 </menu'

 12 </li'

 19 <li'

  < menu label*$dit*'

 1 < button type*-utton* onclick*eco+4()*'o+4</button'

  < button type*-utton* onclick*ecut()*'ut</button'

  < button type*-utton* onclick*e+aste()*'#aste</button'

  </menu'

 3 </li'

 7 <li'

 8 < menu label*%el+*'

 2 <li'<a href*5el+.5t;l*'%el+</a'</li'

 9 <li'<a href*a-out.5t;l*'A-out</a'</li'

  </menu'

 1 </li'

  </menu'

 

</body'

 3

7 </html'

B a+ente de usurio de,eria renderi6ar al+o como:

Pm a+ente de usurio 3ue no conhece o no,o elemento ;enu ,ai entender esse cFdi+o como

listas aninhadas com botDes e lin>s. ,ai renderi6ar isso assim:

 Qo est bonito mas perfeitamente acess,el. o ,isual pode ser bem trabalhado com %. !

mesma coisa poderia ser escrita com o elementoco;;and

:

rquivo! e"e#$los%1/%co##and3'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'Menus</title'

  7 </head '

  8

2 < body'

  9

1 < menu type*tool-ar*'

 11 < menu label*ile*'

 1 <command  onclick*fneK()* label*NeK...* /'

 1 <command  onclick*fo+en()* label*O+en...* /'

 1 <command  onclick*fsae()* label*Fae* /' 13 <command  onclick*fsaeas()* label*Fae as...* /'

 17 </menu'

 18 < menu label*$dit*'

 12 <command  onclick*eco+4()* label*o+4* /'

 19 <command  onclick*ecut()* label*ut* /'

  <command  onclick*e+aste()* label*#aste* /'

 1 </menu'

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 51: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 51/70

  < menu label*%el+*'

  <command  onclick*locationJ5el+.5t;lJ*  label*%el+* /'

  <command  onclick*locationJa-out.5t;lJ*  label*A-out* /'

 3 </menu'

 7 </menu'

 8

2 </body'

 9

</html'

)as um a+ente de usurio 3ue no conhece os elementos ;enu e co;;and no ,ai mostrar 

absolutamente nada.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 52: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 52/70

TIPOS DE LINS

 /inks! possibilidade de lin>ar documentos o 3ue torna a #eb o 3ue ela . =istem duas maneiras

 principais de lin>ar documentos os elementos a e lin?. B elemento a cria um lin> no

contedo da p+ina. "ocê conhece sua sinta=e:

<a 5ref*5tt+B//isie.co;.-r*'Cisie</a'

B elemento lin? por sua ,e6 cria um metadado um lin> 3ue no mostrado no contedo

mas o a+ente de usurio usa de outras maneiras. B uso mais comum ,incular um documento a

uma folha de estilos:

<lin? rel*st4les5eet* 5ref*estilo.css* /'

 Qote o atributo rel*st4les5eet*. B atributo rel pode estar presente nos elementos a e

lin? e ter uma srie de ,alores:

 Metadados de navega3ãoarc.ivesos ar=uivos do site

aut.or a página do autor do docu,ento atual 

!ookmark o per,alin8 da se3ão a =ue este docu,ento pertence

 'irst o pri,eiro docu,ento da série a =ual este pertence

.elpauda para esta página

inde9 o ndice ou su,ário =ue inclui o lin8 para esta página

last o )lti,o docu,ento da série a =ual este pertence

licensea licensa =ue core este docu,ento

ne9t o pr9Ci,o docu,ento da série a =ual este pertence

 pre'etc.o agente de usuário deve -a>er cac'e desse lin8 e, segundo plano tão logo o docu,ento atual ten'a sido carregado. # autor dodocu,ento indica =ue este lin8 é o provável pr9Ci,o destino do usuário.

 prevo docu,ento anterior da série a =ual este pertence

searc.a usca deste site

up# docu,ento u, nvel aci,a deste

B Bpera nos d um interessante e=emplo de como um a+ente de usurio pode e=ibir estes lin>s:

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 53: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 53/70

etadados da páginaalternateu, -or,ato alternativo para o conte)do atual. &recisa estar aco,pan'ado do atriuto type ! contendo o tipo M6ME do -or,ato. &or eCe,plo! para indicar o @ da página atual usa,osD

link relalternate typeapplicationrssxml hrefrss)xml  

icono cone =ue representa esta página

 ping!ack a <@L de pingac8 desta página. Através desse endere3o u, siste,a de logging ou gerenciador de conte)do pode avisar auto,atica,ente =uando u, lin8 para esta página -or inserido.

st%les.eet a -ol'a de estilo lin8ada deve ser vinculada a este docu,ento para eCii3ão

$o,porta,ento dos lin8s na páginae9ternal indica u, lin8 eCterno ao do,nio do docu,ento atual 

no'olloindica =ue o autor do docu,ento atual não endossa o conte)do desse lin8. #s roUs de indeCa3ão para ,otores de usca pode,! por eCe,plo! não seguir este lin8 ou levar e, conta o no-ollo; e, seu algorit,o de ran8ing.

nore'errer o agente de usuário não deve enviar o 'eader HTT& @e-erer se o usuário acessar esse lin8 

side!ar o lin8 deve ser aerto nu,a sidear do navegador! se este recurso estiver disponvel 

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 54: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 54/70

MICRODATA

 0em<ntica adicional ;ê um olhada no se+uinte cFdi+o:

rquivo! e"e#$los%30%#icrodata1'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'Microdata 1</title'  7 </head '

  8 < body'

  2

9 <h"'Gesultados do tri;estre</h"'

 1 <ol'

 11 <li'

 1 <dl'

 1 <dt'no;e</dt' <dd '^oaui;</dd '

 1 <dt'total</dt' <dd '1.87</dd '

 13 </dl'

 17 </li'

 18 <li'

 12 <dl'

 19 <dt'no;e</dt' <dd 'Manoel</dd '

  <dt'total</dt' <dd '1.9</dd '

 1 </dl'

  </li'

  <li'  <dl'

 3 <dt'no;e</dt' <dd 'Antonio</dd '

 7 <dt'total</dt' <dd '9.</dd '

 8 </dl'

 2 </li'

 9 <li'

  <dl'

 1 <dt'no;e</dt' <dd '#edro</dd '

  <dt'total</dt' <dd '18.8</dd '

  </dl'

  </li'

 3 </ol'

 7

8 </body'

 2 </html'

! )icrodata !-H nos permite tornar esta estrutura semMntica um pouco mais especfica

definindo o 3ue o contedo de cada elemento. "e4a este outro e=emplo:

rquivo! e"e#$los%30%#icrodata3'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'Microdata </title'

  7 </head '

  8 < body'

  2

9 <h"'Gesultados do tri;estre</h"'

 1 <ol'

 11 <li'

 1 <dl itemscope'

 1 <dt'no;e</dt' <dd  itemprop*no;e*'^oaui;</dd ' 1 <dt'total</dt' <dd  itemprop*total*'1.87</dd '

 13 </dl'

 17 </li'

 18 <li'

 12 <dl itemscope'

 19 <dt'no;e</dt' <dd  itemprop*no;e*'Manoel</dd '

  <dt'total</dt' <dd  itemprop*total*'1.9</dd '

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 55: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 55/70

 1 </dl'

  </li'

  <li'

  <dl itemscope'

 3 <dt'no;e</dt' <dd  itemprop*no;e*'Antonio</dd '

 7 <dt'total</dt' <dd  itemprop*total*'9.</dd '

 8 </dl'

 2 </li'

 9 <li'

  <dl itemscope'

 1 <dt'no;e</dt' <dd  itemprop*no;e*'#edro</dd '

  <dt'total</dt' <dd  itemprop*total*'18.8</dd '

  </dl'

  </li' 3 </ol'

 7

8 </body'

 2 </html'

!dicionamos atributos especias itemscope e itemprop. %ada elemento itemscope define um item

de dados. %ada itemprop define o nome de uma propriedade. B ,alor da propriedade o

contedo da ta+ '()*. ! )icrodata !-H nos fornece acesso especial a esses dados. "e4a como

acessar esses dados:

resultadosdocu;ent.getTte;s()

for(ar i>i<resultados.lengt5>iEE){

  alert(resultadosWiX.+ro+erties.no;eWX.contentE*B G_ *E

  resultadosWiX.+ro+erties.totalWX.content)

}

 "i-erentes tipos de dados Qo e=emplo acima temos uma lista+em de pessoas. !+ora ima+ine 3ue ,ocê precise ter no

mesmo documento uma lista+em de pessoas e carros. -oderia escre,er assim:

rquivo! e"e#$los%30%#icrodata&'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'Microdata </title'

  7 </head '

  8 < body'  2

9 <h"'Gesultados do tri;estre</h"'

 1 <ol'

 11 <li'

 1 <dl itemscope'

 1 <dt'no;e</dt' <dd  itemprop*no;e*'^oaui;</dd '

 1 <dt'total</dt' <dd  itemprop*total*'1.87</dd '

 13 </dl'

 17 </li'

 18 <li'

 12 <dl itemscope'

 19 <dt'no;e</dt' <dd  itemprop*no;e*'Manoel</dd '

  <dt'total</dt' <dd  itemprop*total*'1.9</dd '

 1 </dl'

  </li'

  <li'

  <dl itemscope'

 3 <dt'no;e</dt' <dd  itemprop*no;e*'Antonio</dd ' 7 <dt'total</dt' <dd  itemprop*total*'9.</dd '

 8 </dl'

 2 </li'

 9 <li'

  <dl itemscope'

 1 <dt'no;e</dt' <dd  itemprop*no;e*'#edro</dd '

  <dt'total</dt' <dd  itemprop*total*'18.8</dd '

  </dl'

  </li'

 3 </ol'

 7

8 <h#'arros ;ais endidos</h#'

 2 <ol'

 9 <li'

  <dl itemscope'

 1 <dt'no;e</dt' <dd  itemprop*no;e*'usca</dd '

  <dt'total</dt' <dd  itemprop*total*'2</dd '

  </dl'

  </li'

 3 <li'

 7 <dl itemscope'

 8 <dt'no;e</dt' <dd  itemprop*no;e*'LrasVlia</dd '

 2 <dt'total</dt' <dd  itemprop*total*'92</dd '

 9 </dl'

 3 </li'

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 56: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 56/70

 31 <li'

 3 <dl itemscope'

 3 <dt'no;e</dt' <dd  itemprop*no;e*'orcel</dd '

 3 <dt'total</dt' <dd  itemprop*total*'1</dd '

 33 </dl'

 37 </li'

 38 </ol'

 32

39 </body'

 7 </html'

 Qote 3ue pessoas e carros tem propriedades em comum nome e total. Kuando ,ocê e=ecutar 

docu;ent.getTte;s()  ,ai obter uma lista de todos os elementos com ite;sco+e. %omoobter uma lista apenas de pessoas ou de carrosX "ocê pode adicionar a cada item um atributo

ite;t4+e 3ue di6 de 3ue tipo de entidade so a3ueles dados:

rquivo! e"e#$los%30%#icrodata'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'Microdata </title'

  7 </head '

  8 < body'

  2

9 <h"'Gesultados do tri;estre</h"'

 1 <ol' 11 <li'

 1 <dl itemscope itemtype*+essoa*'

 1 <dt'no;e</dt' <dd  itemprop*no;e*'^oaui;</dd '

 1 <dt'total</dt' <dd  itemprop*total*'1.87</dd '

 13 </dl'

 17 </li'

 18 <li'

 12 <dl itemscope itemtype*+essoa*'

 19 <dt'no;e</dt' <dd  itemprop*no;e*'Manoel</dd '

  <dt'total</dt' <dd  itemprop*total*'1.9</dd '

 1 </dl'

  </li'

  <li'

  <dl itemscope itemtype*+essoa*'

 3 <dt'no;e</dt' <dd  itemprop*no;e*'Antonio</dd '

 7 <dt'total</dt' <dd  itemprop*total*'9.</dd '

 8 </dl'

 2 </li'

 9 <li'

  <dl itemscope itemtype*+essoa*'

 1 <dt'no;e</dt' <dd  itemprop*no;e*'#edro</dd '

  <dt'total</dt' <dd  itemprop*total*'18.8</dd '

  </dl'

  </li'

 3 </ol'

 7

8 <h#'arros ;ais endidos</h#'

 2 <ol'

 9 <li'

  <dl itemscope itemtype*carro*'

 1 <dt'no;e</dt' <dd  itemprop*no;e*'usca</dd '

  <dt'total</dt' <dd  itemprop*total*'2</dd '

  </dl'

  </li'

 3 <li'

 7 <dl itemscope itemtype*carro*'

 8 <dt'no;e</dt' <dd  itemprop*no;e*'LrasVlia</dd '

 2 <dt'total</dt' <dd  itemprop*total*'92</dd '

 9 </dl'

 3 </li'

 31 <li'

 3 <dl itemscope itemtype*carro*'

 3 <dt'no;e</dt' <dd  itemprop*no;e*'orcel</dd '

 3 <dt'total</dt' <dd  itemprop*total*'1</dd '

 33 </dl'

 37 </li'

 38 </ol'

 32

39 </body'

 7 </html'

!+ora ,ocê pode e=ecutar: docu;ent.getTte;s(JcarroJ)  para obter sF os carros por 

e=emplo.

=alando u# idio#a co#u#

"ocê de,e ter notado 3ue pode definir seus prFprios padrDes de metadados com microdata.

Recomendo 3ue antes de criar seu prFprio formato ,erifi3ue se o mesmo problema no 4 foi

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 57: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 57/70

resol,ido por al+um. B site .data?,ocabular<.or+ contm al+uns desses formatos

 padroni6ados. -or e=emplo para descre,er os dados de sua empresa ou or+ani6ao no in,ente

seu prFprio formato use o formato definido em http://.data?,ocabular<.or+/Br+ani6ation. B

,alor de ite;t4+e de,e ser a prFpria PR* 3ue documenta o formato. "e4a como fica:

rquivo! e"e#$los%30%visie'(t#l

  1 <!DO"#$ 5t;l'

  <html'

  <head '

  < meta charset*0,2* /'

  3 <title'Cisie #adr`es \e-</title'

  7 </head '

  8 < body'

  2

9 <address itemscope itemtype*5tt+B//data,oca-ular4.org/Organization* '

 1 <h" itemprop*na;e*'Cisie #adr`es \e-</h"'

 11 <div itemprop*address* itemscope itemtype*5tt+B//data,oca-ular4.org/Address* '

 1 < p itemprop*street,address*'Ala;eda dos 0-iatansI 38 , #lanalto #aulista</p'

 1 < p'

 1 <span itemprop*localit4*'Fão #aulo</span' ,

13 <span itemprop*region*'F#</span' ,

17 <span itemprop*countr4,na;e*'Lrasil</span'

 18 </p'

 12 < p itemprop*+ostal,code*'8,</p'

 19 </div'

  <div itemprop*tel*'E33.11.88,8</div'

 1 </address'

 

</body'

  </html'

%laro 3ue a ,anta+em de usar o formato padroni6ado ao in,s de in,entar o seu no apenas no

ter o trabalho de pensar os nomes das propriedades. Bs sistemas de busca e outros sistemas 3ue

acessem seu site podem entender e tratar esses dados. B Goo+le 4 fa6 isso ,e4a neste endereo:

http://.+oo+le.com/support/ebmasters/bin/anser.p<XhlYenZanserY181

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 58: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 58/70

eguran3a%laro se seu script tentar associar umaPR* fora do domnio do script L listade histFrico isso ,ai resultar numae=ceo de se+urana.

HIST!RICO DE SESSÃO E API STORAGE

 ist=rico de 0essão e AP" 0toragePm dos +randes desafios de usabilidade ao se construir aplicaDes eb com a tecnolo+ia atual

apresentar um modelo de na,e+ao consistente para o usurio. ;uas +randes lacunas nos

impediam de fa6ê?lo:

 +ão 'avia u,a -or,a si,ples de -a>er co, =ue as a3:es locais do usuário nu,a página -osse, re-letidas na pr9Ci,a. &or eCe,plo! se o usuário are e -ec'a itens e, u, ,enu e, árvore e e, seguida navega para a pr9Ci,a página! era,uito di-cil -a>er co, =ue o ,enu aparece no ,es,o estado na segunda página.

1.

 +ão 'avia u,a -or,a si,ples de -a>er co, =ue as a3:es do usuário nu,a página AaC respondesse, correta,ente aosot:es de controle de 'ist9rico do navegador Gvoltar e avan3ar.

2.

'()*5 tra6 formas simples de solucionar os dois problemas.

 Hist9rico de essão"ocê pro,a,elmente conhece o ob4eto histor< do na,e+ador e seus mtodos go -ac? e

forKard. le nos permite ,ia 4a,ascript um controle bsico do histFrico de na,e+ao. B

mesmo controle 3ue o usurio ,oltar e a,anar.

B ob4eto histor< foi ,itaminado no '()*5 com dois no,os mtodos:

 pus.0tate7datatitle>url?8D acrescenta u,a entrada na lista de 'ist9rico.1.

replace0tate7datatitle>url?8D ,odi-ica a entrada atual na lista de 'ist9rico.2.

%om isso ,ocê pode acrescentar itens L lista de histFrico associando dados ou mesmo uma PR*

a eles. -or e=emplo di+amos 3ue ,ocê tenha três elementos de contedo em sua p+ina e um

script 3ue e=iba um por ,e6 de acordo com os cli3ues do usurio no menu:

function s5oKontent(n){

  // $sconde;os todos os ele;entos de conteUdo

  for(ar i1>i<>iEE)

  docu;ent.get$le;entL4Td(JcontJEi).st4le.dis+la4JnoneJ

  // $6i-i;os o ele;ento escol5ido

  docu;ent.get$le;entL4Td(JcontJEn).st4le.dis+la4J-loc?J

}

"amos fa6er com 3ue nosso script acrescente uma linha de histFrico ao selecionar um elemento:

function s5oK#age(n){

  // $sconde;os todos os ele;entos de conteUdo

  for(ar i1>i<>iEE)

  docu;ent.get$le;entL4Td(JcontJEi).st4le.dis+la4JnoneJ

  // $6i-i;os o ele;ento escol5ido

  docu;ent.get$le;entL4Td(JcontJEn).st4le.dis+la4J-loc?J

}

function s5oKontent(n){

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 59: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 59/70

eriali>ar Pma outra complicao dos %oo>iesresol,ida pela !-H tora+e o fato de

%oo>ies sF arma6enarem strin+s nosobri+ando a seriali6ar arra<s e ob4etos 4a,ascript. ! especificao da !-Htora+e re+e 3ue 3ual3uer ,alor 

 4a,ascript pode ser arma6enado erecuperado. Hnfeli6mente em al+unsdos na,e+adores em 3ue testamos os,alores so con,ertidos para strin+s

  // Mostra;os o conteUdo escol5ido

  s5oK#age(n)

  // Fala;os a +:gina atual no 5istrico

  5istor4.+us5Ftate({+ageBn}IJonteUdo JEn)

}

Ja6endo isso cada ,e6 3ue o usurio escolher um item no menu o elemento ser e=ibido e uma

linha ser acrescentada no histFrico. B usurio poder acessar normalmente esses itens de

histFrico usando o boto de ,oltar do na,e+ador. %ada ,e6 3ue ele usar o histFrico ser

disparado um e,ento popstate. !ssim para 3ue nosso script este4a completo basta tratar esse

e,ento:

function s5oK#age(n){

  // $sconde;os todos os ele;entos de conteUdo

  for(ar i1>i<>iEE)

  docu;ent.get$le;entL4Td(JcontJEi).st4le.dis+la4JnoneJ

  // $6i-i;os o ele;ento escol5ido

  docu;ent.get$le;entL4Td(JcontJEn).st4le.dis+la4J-loc?J

}

function s5oKontent(n){

  // Mostra;os o conteUdo escol5ido

  s5oK#age(n)

  // Fala;os a +:gina atual no 5istrico

  5istor4.+us5Ftate({+ageBn}IJonteUdo JEn)

}

// buando o usu:rio naegar no 5istricoI ;ostra;os a +:gina relacionadaB

KindoK.on+o+statefunction(e){

  if(e.state)

  s5oK#age(e.+age)

}

localtorage e sessiontorage!t o '()* 3uando precis,amos arma6enar dados no a+ente de usurio 3ue persistissem

entre as p+inas us,amos %oo>ies. %oo>ies nos permitiam arma6enar o status de um menu

 4a,ascript 3ue precisa,a ser mantido entre as p+inas lembrar o nome do usurio o histFrico de

operaDes reali6adas por ele ou a ltima ,e6 3ue ele ,isitou nosso site.

%om o aumento da comple=idade das aplicaDes baseadas em eb duas +randes limitaDes dos

%oo>ies nos incomodam:

 "nter'ace comple9a: o c9digo para ar,a>enar $oo8ies envolve co,pleCos cálculos co, datas e controle do no,e dedo,nio.

1.

 /imite de arma@enamento: alguns agentes de usuário per,itia, o ar,a>ena,ento de no ,áCi,o 24 $oo8ies! co,apenas *J cada.

2.

'()*5 tra6 uma no,a maneira de arma6enar dados no client a !-H tora+e. Pm ob4eto tora+e

 possui os mtodos:

 get"tem7ke%8D oté, u, valor ar,a>enado no torage1.

set"tem7ke%value8 guarda u, valor no torage2.

remove"tem7ke%8 eCclui u, valor do torage(.

clear78 li,pa o torage*.

sto dispon,eis dois ob4etos no escopo +lobal @indoA: localtora+e e

sessiontora+e. B ob4eto localtora+e arma6ena os dados no client sem e=pirao

definida. Bu se4a se o usurio fechar o na,e+ador e ,oltar ao site semanas depois os

dados estaro l. B sessiontora+e arma6ena os dados durante a sesso atual de

na,e+ao.

B cFdi+o para arma6enar um ,alor na tora+e se parece com isso:

localFtorage.setTte;(Juser5oiceJI)

3uando ,ocê precisar desse ,alor em outra p+ina:

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 60: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 60/70

assim como nos %oo>ies. (oramos para 3ue os a+entes de usurioimplementem corretamente esserecurso.

localFtorage.getTte;(Juser5oiceJ)

ssa interface 4 muito mais simples 3ue a de %oo>ies. )as pode ficar melhor. "ocê

 pode usar o tora+e como um arra<. -or e=emplo:

if(!sessionFtorageWJt5e;eJX){

  sessionFtorageWJt5e;eJXJoldfurnitureJ>

}

 Qo h como isso ser mais simplesW !lm disso o espao de arma6enamento su+erido peladocumentao de 5)& para cada domnio resol,endo acredito 3ue por mais uma dcada o

 problema de espao de arma6enamento local.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 61: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 61/70

APLICAÇ"ES OFFLINE

*ac.ing '()*5 pro,ê uma maneira de se indicar ao na,e+ador 3ue elementos so necessrios e de,em

ser postos em cache para 3ue uma aplicao funcione offline. B e=emplo da documentao

oficial bastante esclarecedor. ;ê uma olhada na se+uinte p+ina:

rquivo! e"e#$los%33%cloc>'(t#l

  1 <!DO"#$ %M&'

  <html'

  <head '

  <title'loc?</title'

  3 <script src*cloc?.@s*'</script'

  7 <link rel*st4les5eet* href*cloc?.css*'

  8 </head '

  2 < body'

  9 < p'5e ti;e isB <output id *cloc?*'</output'</p'

 1 </body'

 11 </html'

(rata?se de um id+et de relF+io. -ara funcionar este '()* depende dos ar3ui,os Vcloc>.4sV e

Vcloc>.cssV. -ara permitir 3ue o usurio acesse esta p+ina offile precisamos escre,er um

ar3ui,o de manifesto indicando 3ue PR*s de,em ser postas em cache. "amos preparar uma

no,a ,erso do id+et contendo o manifesto 3ue um ar3ui,o com a e=tenso .manifest e 3ue

de,e ser ser,ido com o tipo )H) te6t/cac5e,;anifest . m nosso caso o ar3ui,o ,aise chamar cloc>.manifest e ter o se+uinte contedo:

A%$ MANT$F

cloc?1.5t;l

cloc?.css

cloc?.@s

!+ora ,e4a o '()* com o ar3ui,o de manifesto lin>ado:

rquivo! e"e#$los%33%cloc>1'(t#l

  1 <!DO"#$ %M&'

  <html  manifest*cloc?.;anifest*'

  <head '

  <title'loc?</title'

  3 <script src*cloc?.@s*'</script'

  7 <link rel*st4les5eet* href*cloc?.css*'

  8 </head '

  2 < body'

  9 < p'5e ti;e isB <output id *cloc?*'</output'</p'

 1 </body'

 11 </html'

 Qote 3ue recomendado 3ue ,ocê insira o prFprio '()* principal na lista de PR*s do ar3ui,o

de manifesto embora no se4a necessrio. !o encontrar uma p+ina com um ar3ui,o de

manifesto ,inculado o na,e+ador far cache das PR*s listadas no manifesto e da prFpria

 p+ina.

 Qote tambm 3ue no necessrio 3ue todas as PR*s para cache este4am importadas nodocumnto atual. B ar3ui,o de manifesto pode contar todas as p+inas de sua aplicao 3ue

forem necessrias para permitir o funcionamento offline inclusi,e a na,e+ao entre p+inas.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 62: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 62/70

( o!eto Application*ac.eB ob4eto !pplication%ache controla o status e operaDes de cachin+ da p+ina. le pode ser 

acessado ,ia 4a,ascript assim:

KindoK.a++licationac5e

eu mtodo mais interessante o update@A 3ue fa6 com 3ue o a+ente de usurio recarre+ue o

cache da aplicao. !lm disso ele possui a propriedade status cu4o ,alor numrico pode ser 

um dos se+uintes:

B C ;$*A*+ +ão 'á u, ar=uivo de ,ani-esto nesta página ou apontando para ela

1 C "+/ # oeto Application$ac'e está ocioso. # cac'e está atuali>ado.

2 **D"$ # ar=uivo de ,ani-esto está sendo aiCado e con-erido.

3 C +(E$/(A+"$  As <@Ls vinculadas no ,ani-esto estão sendo aiCadas.

# C ;P+A4,A+ 

# cac'e é antigo! ,as ainda não -oi ,arcado co,o osoleto.5 C (G0(/4 # cac'e -oi ,arcado co,o osoleto e precisa ser atuali>ado assi, =ue possvel.

B ob4eto !pplication%ache tambm possui os se+uintes e,entos relacionados a sua mudana de

status:

onc'ec8ing 

onerror 

onnoupdate

ondo;nloading 

onprogress

onupdatereadB

oncac'ed 

onosolete

%omo ,ocê pode ,er alm de onerror temos um e,ento para cada um dos status da lista acima.

*ontrole de status da aplicação Qo e=emplo do relF+io acima no h formulrios ou submissDes !4a=. B a+ente de usurios no

troca dados com o ser,idor. !ssim muito fcil fa6er sua aplicao rodar offline mas essa no a realidade da maioria das aplicaDes. "imos no captulo anterior  como fa6er arma6enamento

local de dados. %om isso ,ocê pode arma6enar os dados 3ue o na,e+ador de,eria en,iar para o

ser,idor en3uanto a aplicao esti,er offline e to lo+o ela este4a online en,iar tudo.

-ara saber se a aplicao est online basta acessar a propriedade on*ine do ob4eto

indo.na,i+ator:

function sala(dados){

  if(KindoK.naigator.on&ine){

  eniaA@a6(dados)

  }else{

  sala&ocal(dados)

  }

}

para disparar o en,io 3uando a aplicao esti,er online e a,isar o usurio 3uando ela esti,er 

offline usamos os e,entos ononline e onoffline do ob4eto indo:

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 63: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 63/70

KindoK.ononlinefunction(){

  eniaA@a6(o-te;&ocal())

  docu;ent.get$le;entL4Td(JKarningJ).inner%M&JJ

}

KindoK.onofflinefunction(){

  docu;ent.get$le;entL4Td(JKarningJ).inner%M&JA+licaPão offline.J

}

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 64: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 64/70

SCROLL IN TO VIE# E HIDDEN

 0crolling into viePm tru3ue simples mas muito til . "ocê pode fa6er:

docu;ent.get$le;entL4Td(JaisoJ).scrollTntoCieK()

Hsso ,ai rolar a p+ina at 3ue o elemento com o id Va,isoV este4a ,is,el no topo do ,ieport.

"ocê pode passar um parMmetro opcional top:

docu;ent.get$le;entL4Td(JaisoJ).scrollTntoCieK(false)

B ,alor default true. e ,ocê passar false a rola+em ,ai dei=ar o ob4eto ,is,el na base do

,ieport.

.iddenBcultar e e=ibir elementos uma das tarefas mais comuns em Na,ascript. m '()*5 e=iste um

atributo especfico para isso o atributo hidden. !o inser?lo em um elemento assim:

<di 5idden'iI se esconde!</di'

Bu assim:

<di 5idden*true*'iI se esconde!</di'

B elemento estar oculto.

'idden e Oavascript !cessar o atributo hidden em Na,ascript muito con,eniente:

function sKitc5$le;ent(el;){

  if(el;.5idden)

  el;.5iddenfalse

  else

  el;.5iddentrue

}

%laro ,ocê pode fa6er:

function sKitc5$le;ent(el;){

  el;.5idden!el;.5idden

}

u+iro 3ue ,ocê sempre use o atributo hidden. ;escobrir se o elemento est oculto lendo as

 propriedades displa< e ,isibilit< do % alm de dar mais trabalho pode +erar confuso.

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 65: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 65/70

GEOLOCATION API

 M)todos de eolocali@ação' três populares maneiras de um a+ente de usurio descobrir sua posio no +lobo:

eolocali@ação "P   o ,étodo usado pela ,aioria dos navegadores ;e e, co,putadores. Através de consultas ;'ois e servi3os de locali>a3ão de 6&! vai deter,inar a cidade ou região e, =ue voc está.

4riangulação P,0  "ispositivos conectados a u,a rede de ce lulares e se, u, 7&! ou co, o 7& desligado! pode, deter,inar sua posi3ão pela

triKngula3ão das antenas 7&@ pr9Ci,as. e, ,ais preciso =ue o ,étodo aseado e, 6&! vai ,ostrar e, =ue parte do airrovoc está.

P0   o ,étodo ,ais preciso. E, condi3:es ideais! a ,arge, de erro é de apenas 5 ,etros.

mbora essas se4am as três maneiras mais populares de se resol,er o problema podem no ser 

as nicas. !l+uns a+entes de usurio podem usar uma combinao desses mtodos ou mesmo

um no,o mtodo 3ue ,enha a ser in,entado. -or isso a Geolocation !-H a+nFstica em relao

ao mtodo usado. ' apenas uma maneira de li+ar e desli+ar o Vmodo de alta precisoV o 3ue

,ai ter si+nificado diferente em cada a+ente de usurio.

-ara obter a posio do usurio basta e=ecutar o script:

naigator.geolocation.geturrent#osition(s5oK+os)

Bnde s5oK+os  uma funo callbac> 3ue ,ai receber um ob4eto de posicionamento. "e4a um

e=emplo:

function s5oK+os(+osition){

  lat+osition.coords.latitude

  lon+osition.coords.longitude

  alert(J"our +ositionB JElatEJIJElon)

}

%laro ,ocê pode fa6er o 3ue 3uiser abrir um mapa submeter a posio ,ia !4a= en,iar os

dados para um ebser,ice etc.

B mtodo +et%urrent-osition recebe dois outros parMmetros. B primeiro uma funo para

tratamento de erro. B se+undo um ob4eto de confi+urao.

Tratando errosKuando o script tenta acessar o posicionamento o na,e+ador e=ibe uma barra como esta:

B usurio pode ento escolher se dese4a ou no compartilhar sua posio com o site. !lm de o

usurio poder di6er no muita coisa pode dar errado na hora de obter a +eolocali6ao. -ara

tratar isso ,ocê pode passar o se+undo parMmetro a +et%urrent-osition:

naigator.geolocation.geturrent#osition(s5oK+osIerro+os)

%aso al+o dê errado a funo erropos ,ai receber um ob4eto -ositionrror 3ue tem o atributo

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 66: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 66/70

code 3ue pode ter um dos se+uintes ,alores:

1 C Permissão negada# usuário clicou e, Snão co,partil'arS.

2 C Posição indisponível # agente de usuário está desconectado! os satélites de 7& não pudera, ser alcan3ados ou algu, erro se,el'ante.

3 C 4imeout Te,po esgotado ao oter u,a posi3ão. Voc pode de-inir o te,po ,áCi,o ao c'a,ar get$urrent&osition.

B C rro descon.ecido

 Algu,a outra coisa i,pediu o agente de usuário de oter u,a posi3ão.

,9o trate a res$osta do usurio co#o u# erro

m sua funo de tratamento de erro se obti,er o cFdi+o de erro 1 por fa,or no incomode o

usurio com mensa+ens de erro. le escolheu no compartilhar sua posio com o site. (al,e6 a

melhor atitude se4a no fa6er nada nesse momento.

# oeto de con-igura3ãoB terceiro parMmetro de +et%urrent-osition um ob4eto de confi+urao 3ue pode ter as

se+uintes propriedades:

ena!leig.Accurac%e true! liga o ,odo de alta precisão. +u, celular isso pode instruir o navegador! por eCe,plo! a usar o 7& ao invés datriangula3ão 7&@ 

timeout # te,po e, ,ilissegundos =ue o agente do usuário vai esperar pela posi3ão antes de disparar u, erro tipo (.

ma9imumAge# te,po! e, ,ilissegundos! =ue o navegador pode cac'ear a posi3ão.

;atc'&ositione o 3ue ,ocê dese4a rastrear a posio do usurio continuamente pode usar ao in,s de

+et%urrent-osition o mtodo atch-osition. le tem a mesma assinatura de +et%urrent-osition:

Knaigator.geolocation.Katc5#osition(s5oK+osIerro+os)

! diferena 3ue a funo shopos ser chamada toda ,e6 3ue a posio do usurio mudar. B

,alor de retorno um nmero 3ue pode ser usado posteriormente para cancelar o atcher:

naigator.geolocation.clear\atc5(K)

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 67: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 67/70

UNDO

( o!eto ;ndoManager B a+ente de usurio de,e arma6enar um histFrico de alteraDes para cada documento carre+ado.

sse histFrico controlado pelo ob4eto Pndo)ana+er acess,el atra,s de

KindoK.undoManager . B histFrico +uarda dois tipos de alteraDes:

 Alterações +(M # pr9prio 'ist9rico de altera3:es do navegador! as altera3:es "#M são inseridas auto,atica,ente no 'ist9rico =uando ousuário usa u, ca,po de edi3ão.

(!etos undo#s oetos undo são inseridos no 'ist9rico e controlados pelos seus scripts. &or eCe,plo! u,a aplica3ão de e,ail pode guardar u, oeto undo representando o -ato de =ue o usuário ,oveu u, e,ail de u,a pasta para outra.

B ob4eto Pndo)ana+er possui os se+uintes mtodos e propriedades:

lengt.o n),ero de entradas no 'ist9rico

 positiono n),ero da entrada atual no 'ist9rico

add7datatitle8adiciona u,a entrada espec-ica no 'ist9rio. data pode ser u, oeto literal co, dados aritrários.title é co,o essaentrada vai aparecer descrita na lista do 'ist9rico

remove7inde98re,ove u,a entrada espec-ica do 'ist9rico

clear;ndo78re,ove todas as entradas antes da atual no 'ist9rico

clear,edo78re,ove todas as entradas ap9s a atual no 'ist9rico

!lm disso os itens no histFrico podem ser acessados com

KindoK.undoManagerWinde6X .

 @espondendo Qs a3:es de undo e redo%ada ,e6 3ue o usurio disparar uma ao de undo ou redo e o item do histFrico for um ob4eto

undo ser disparado o e,ento correspondente indo.onundo ou indo.onredo. !s funDes

associadas a estes e,entos recebero como parMmetro um ob4eto e,ent contendo uma

 propriedade data cu4o ,alor o ob4eto undo 3ue ,ocê inseriu no histFrico.

"e4a o e=emplo:

KindoK.onundofunction(e){

  alert(JGefazer a alteraPãoB JEe.data)

}

 "isparando as a3:es de undo e redo

e ,ocê 3uiser oferecer em sua aplicao botDes para undo e redo basta 3ue eles e=ecutem:

docu;ent.e6eco;;and(JundoJ)

Bu:

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 68: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 68/70

docu;ent.e6eco;;and(JredoJ)

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 69: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 69/70

a de Referência http://tableless.com.br/html5/print.php

de 70 29/08/2011 17:0

Page 70: Guia de Referência - HTML 5

7/18/2019 Guia de Referência - HTML 5

http://slidepdf.com/reader/full/guia-de-referencia-html-5 70/70

a de Referência http://tableless.com.br/html5/print.php