HTML5 2011

Drag-n-drop e correo ortogrca
http://tableless.com.br/html5/print.php?chapter=10
1 de 74
12-06-2011 20:44
GUIADEREFERNCIA
ndice
Parte1:Markup
1. VisogeraldoHTML5. 2. Anlisedosuporteatualpelosnavegadoreseestratgiasdeuso 3. Estruturabsica,DOCTYPEecharsets 4. Modelosdecontedo 5. Novoselementoseatributos 6. Elementosmodificadoseausentes
Parte2:FormulrioseMultimdia
7. Novostiposdecampos 8. Tiposdedadosevalidadores 9. Detalhesecontedoeditvel. 10. Drag-n-dropecorreoortogrfica 11. Elementosaudioevideo,ecodecs 12. ElementodeviceeStreamAPI
Parte3:AnovageraodeaplicaeswebI
13. MathMLeSVG 14. CanvasAPI 15. Server-sentevents 16. DOMeHTML5 17. NovoseventosDOM 18. Menusetoolbars 19. Tiposdelinks
2 de 74
12-06-2011 20:44
Parte4:AnovageraodeaplicaeswebII
20. Microdata 21. HistricodesessoeAPIStorage 22. Aplicaesoffline 23. Scrollintoviewehidden 24. GeolocationAPI 25. Undo
Sobreessecontedo
AVisiefoiescolhidapeloW3CdoBrasilparaministrarumtreinamentosobreHTML5paraos seusmembrosealgunsconvidados.Paratanto,construmosumaapostilacomtodoocontedo abordadonestenossocurso.EssaapostilaestsendoagorapublicadasobCreativeCommons aquinoTableless.Esperamosqueajudeacomunidadededesenvolvimentowebbrasileira. EssaapostilaficaremprocessodeconstanteatualizaojquemuitospontosdoHTML5no foramaindadefinidosetambmporquediversasoutrascaractersticasestosendoplanejadase rascunhadasainda.Sevoctiverqualquersugesto,porfavor,noscontacte.
3 de 74
12-06-2011 20:44
VISOGERALDOHTML5
DeacordocomoW3CaWebbaseadaem3pilares:
UmesquemadenomesparalocalizaodefontesdeinformaonaWeb,esseesquemachama-seURI. UmProtocolodeacessoparaacessarestasfontes,hojeoHTTP. UmalinguagemdeHypertexto,paraafcilnavegaoentreasfontesdeinformao:oHTML.
Vamosnosfocarnoterceiropilar,oHTML.
Hypertexto
HTMLumaabreviaodeHypertextMarkupLanguage-LinguagemdeMarcaode Hypertexto.Resumindoemumafrase:oHTMLumalinguagemparapublicaodecontedo (texto,imagem,vdeo,udioeetc)naWeb. OHTMLbaseadonoconceitodeHipertexto.Hipertextosoconjuntosdeelementosouns ligadosporconexes.Esteselementospodemserpalavras,imagens,vdeos,udio, documentosetc.Esteselementosconectadosformamumagranderededeinformao.Elesno estoconectadoslinearmentecomosefossemtextosdeumlivro,ondeumassuntoligadoao outroseguidamente.Aconexofeitaemumhipertextoalgoimprevistoquepermitea comunicaodedados,organizandoconhecimentoseguardandoinformaesrelacionadas. Paradistribuirinformaodeumamaneiraglobal,necessriohaverumalinguagemqueseja entendidauniversalmentepordiversosmeiosdeacesso.OHTMLsepropeaseresta linguagem. DesenvolvidooriginalmenteporTimBerners-LeeoHTMLganhoupopularidadequandoo Mosaic-browserdesenvolvidoporMarcAndreessennadcadade1990-ganhoufora.A partirda,desenvolvedoresefabricantesdebrowsersutilizaramoHTMLcomobase, compartilhandoasmesmasconvenes.
Ocomeoeainteroperabilidade
Entre1993e1995,oHTMLganhouasversesHTML+,HTML2.0eHTML3.0,ondeforam propostasdiversasmudanasparaenriqueceraspossibilidadesdalinguagem.Contudo,ataqui oHTMLaindanoeratratadocomoumpadro.Apenasem1997,ogrupodetrabalhodoW3C responsvelpormanteropadrodocdigo,trabalhounaverso3.2dalinguagem,fazendo comqueelafossetratadacomoprticacomum.Vocpodever:http://www.w3.org /TR/html401/appendix/changes.html. DesdeocomeooHTMLfoicriadoparaserumalinguagemindependentedeplataformas, browserseoutrosmeiosdeacesso.Interoperabilidadesignificamenoscusto.Voccriaapenas umcdigoHTMLeestecdigopodeserlidopordiversosmeios,aoinvsdeversesdiferentes paradiversosdispositivos.Dessaforma,evitou-sequeaWebfossedesenvolvidaemumabase
4 de 74
12-06-2011 20:44
proprietria,comformatosincompatveiselimitada. PorissooHTMLfoidesenvolvidoparaqueessabarreirafosseultrapassada,fazendocomquea informaopublicadapormeiodestecdigofosseacessvelpordispositivoseoutrosmeios comcaractersticasdiferentes,noimportandootamanhodatela,resoluo,variaodecor. Dispositivosprpriosparadeficientesvisuaiseauditivosoudispositivosmveiseportteis.O HTMLdeveserentendidouniversalmente,dandoapossibilidadeparaareutilizaodessa informaodeacordocomaslimitaesdecadameiodeacesso.
WHATWorkingGroup
EnquantooW3CfocavasuasatenesparaacriaodasegundaversodoXHTML,umgrupo chamadoWebHypertextApplicationTechnologyWorkingGroupouWHATWGtrabalhava emumaversodoHTMLquetraziamaisflexibilidadeparaaproduodewebsitesesistemas baseadosnaweb. OWHATWG(http://www.whatwg.org/)foifundadopordesenvolvedoresdeempresascomo Mozilla,AppleeOperaem2004.ElesnoestavamfelizescomocaminhoqueaWebtomavae nemcomorumodadoaoXHTML.Porisso,estasorganizaessejuntaramparaescreveroque seriachamadohojedeHTML5. EntreoutrosassuntosqueoWHATWGsefocavaeraWebForms2.0quefoiincludono HTML5eoWebControls1.0quefoiabandonadoporenquanto. Aparticipaonogrupolivreevocpodeseinscrevernalistadeemailparacontribuir. Porvoltade2006,otrabalhodoWHATWGpassouserconhecidopelomundoe principalmentepeloW3C-queatentotrabalhavamseparadamente-quereconheceutodoo trabalhodogrupo.EmOutubrode2006,TimBerners-Leeanunciouquetrabalharia juntamentecomoWHATWGnaproduodoHTML5emdetrimentodoXHTML2.Contudo oXHTMLcontinuariasendomantidoparalelamentedeacordocomasmudanascausadasno HTML.OgrupoqueestavacuidandoespecificamentedoXHTML2foidescontinuadoem 2009.
OHTML5esuasmudanas
QuandooHTML4foilanado,oW3Calertouosdesenvolvedoressobrealgumasboasprticas quedeveriamserseguidasaoproduzircdigosclient-side.Desdeestetempo,assuntoscomoa separaodaestruturadocdigocomaformataoeprincpiosdeacessibilidadeforam trazidosparadiscusseseatenodosfabricantesedesenvolvedores. Contudo,oHTML4aindanotraziadiferencialrealparaasemnticadocdigo.oHTML4 tambmnofacilitavaamanipulaodoselementosviaJavascriptouCSS.Sevocquisesse criarumsistemacomapossibilidadedeDragnDropdeelementos,eranecessriocriarum grandescript,combugsequemuitasvezesnofuncionavamdeacordoemtodososbrowsers.
OqueoHTML5?
OHTML5anovaversodoHTML4.EnquantooWHATWGdefineasregrasdemarcao queusaremosnoHTML5enoXHTML,elestambmdefinemAPIsqueformaroabaseda arquiteturaweb.EssasAPIssoconhecidascomoDOMLevel0. UmdosprincipaisobjetivosdoHTML5facilitaramanipulaodoelementopossibilitandoo desenvolvedoramodificarascaractersticasdosobjetosdeformanointrusivaedemaneira quesejatransparenteparaousuriofinal.
5 de 74
12-06-2011 20:44
Aocontrriodasversesanteriores,oHTML5forneceferramentasparaaCSSeoJavascript fazeremseutrabalhodamelhormaneirapossvel.OHTML5permitepormeiodesuasAPIsa manipulaodascaractersticasdesteselementos,deformaqueowebsiteouaaplicao continueleveefuncional. OHTML5tambmcrianovastagsemodificaafunodeoutras.AsversesantigasdoHTML nocontinhamumpadrouniversalparaacriaodeseescomunseespecficascomo rodap,cabealho,sidebar,menuseetc.NohaviaumpadrodenomenclaturadeIDs,Classes outags.Nohaviaummtododecapturardemaneiraautomticaasinformaeslocalizadas nosrodapsdoswebsites. Houtroselementoseatributosquesuafunoesignificadoforammodificadosequeagora podemserreutilizadosdeformamaiseficaz.Porexemplo,elementoscomoBouIqueforam descontinuadosemversesanterioresdoHTMLagoraassumemfunesdiferenteseentregam maissignificadoparaosusurios. OHTML5modificaaformadecomoescrevemoscdigoeorganizamosainformaona pgina.Seriamaissemnticacommenoscdigo.Seriamaisinteratividadesemanecessidade deinstalaodepluginseperdadeperformance.acriaodecdigointeropervel,pronto parafuturosdispositivosequefacilitaareutilizaodainformaodediversasformas. OWHATWGtemmantidoofocoparamanteraretrocompatibilidade.Nenhumsitedeverter deserrefeitototalmenteparaseadequaraosnovosconceitoseregras.OHTML5estsendo criadoparaquesejacompatvelcomosbrowsersrecentes,possibilitandoautilizaodasnovas caractersticasimediatamente.
6 de 74
12-06-2011 20:44
ANLISEDOSUPORTEATUALPELOS NAVEGADORESEESTRATGIASDEUSO
Odesenvolvimentomodular
Antigamente,paraqueumanovaversodoHTMLoudoCSSfosselanada,todasasideias listadasnaespecificaodeveriamsertestadasedesenvolvidasparaentoserempublicadas paraousodosbrowserseosdesenvolvedores. EssemtodofoimudadocomolanamentodoHTML5eoCSS3.Apartirdeagora,asduas tecnologiasforamdivididasemmdulos.Issoquerdizerqueacomunidadede desenvolvedoreseosfabricantesdebrowsersnoprecisamesperarquetodoopadroseja escritoepublicadoparautilizaremasnovidadesdaslinguagens. AspropriedadesdoCSS3,porexemplo,foramdivididasempequenosgrupos.Humgrupo cuidandodapropriedadeBackground,outrodapropriedadeBorder,outrodaspropriedadesde Textoeetc.Cadaumdestesgrupossoindependentesepodemlanarsuasnovidadesa qualquermomento.Logo,odesenvolvimentoparawebficoumaisdinmico,comnovidades maisconstantes. Opontonegativonesseformato,queproblemasdecompatibilidadepodemocorrercommais frequencia.Porexemplo,umbrowserpodeadotarbordasarredondadaseoutrono.Ouum browserpodeescolhersuportarumAPIdiferentedoAPIqueoconcorrenteimplementou. Contudo,osbrowserstemmostradograndeinteresseemsemanterematualizadosemrelao aosseusconcorrentes.
MotoresdeRenderizao
Humagrandediversidadededispositivosqueacessamainternet.Entreeles,humasriede tablets,smartphones,pc'seetc.Cadaumdestesmeiosdeacessoutilizamumdeterminado browserparanavegarnaweb.Nohcomoosdesenvolvedoresmanteremumbomnvelde compatibilidadecomtodosestesbrowserslevandoemconsideraoaparticularidadedecada um.Umamaneiramaissegurademanterocdigocompatvel,nivelarodesenvolvimento pelosmotoresderenderizao.Cadabrowserutilizaummotorderenderizaoque responsvelpeloprocessamentodocdigodapgina. Abaixo,segueumalistadosprincipaisbrowserseseusmotores:
Motor Webkit Gecko Trident Browser
Safari, Google Chrome Firefox, Mozilla, Camino Internet Explorer 4 ao 9
7 de 74
12-06-2011 20:44
Motor Presto
Browser
Opera 7 ao 10
interessantequevocfaacdigocompatvelcomestesmotores.Focandoacompatibilidade nosmotoresderenderizaovocatingirumaamplitudemaiordebrowsers. Porexemplo,seseucdigofuncionarnoWebkit,vocalcanaroSafarieoChrome,doisdos principaisbrowsersdomercadoparadesktops.Almdisso,voctambmalcanaaparelhos comoBlackberry,iPhone,iPodTouch,iPadedispositivosquerodamAndroid.
CompatibilidadecomHTML5
AtualmenteoWebkitomotormaiscompatvelcomosPadresdoHTML5.ComoaApple teminteressequeseusdispositivossejamultracompatveiscomosPadres,elatemfeitoum belotrabalhodeatualizaoeavanodacompatibilidadedestemotor. ContudooFirefoxeoOperajestocompatveiscomgrandepartedaespecificaodo HTML5eCSS3eacadaupgradeelestrazemmaisnovidadeseatualizaodospadres. Oquepodetepreocupardeverdadearetrocompatibilidadecomversesantigasdebrowsers comooInternetExplorer.AMicrosoftestfazendoumbomtrabalhocomoIE9,masas verses8e7notemquasenenhumsuporteaoHTML5,oqueumproblemasriopara aplicaeswebbaseadasemtecnologiasmaisrecentes,masqueabasedeusuriosutilizaas versesantigasdoInternetExplorer. Abaixosegueumatabelasimplesdecompatibilidadeentreosbrowsersealgunsmdulosdo HTML5:
Safari Local Storage Histrico de Sesso Aplicaes Offline Novos tipos de campos Form: Autofocus Form: Autocomplete Form: Required Video, Audio e Canvas Text Chrome Opera Firefox IE 8 IE 9
Tcnicasdedeteco
PodeserqueousurionoutilizeumbrowserquesuportaHTML5.Nestecaso,vocpode redirecion-loparaumaversodositemaissimples,outalvezapenasmostrarumamensagem alertandoousuriosobreaimportnciadaatualizaodobrowser.Paraissotemosalgumas tcnicasdedetecoparaconferirseobrowsersuportaounoHTML5. Quandoobrowservisitaumwebsite,eleconstriumacoleodeobjetosquerepresentam
8 de 74
12-06-2011 20:44
elementosHTMLnapgina.CadaelementonocdigorepresentadonoDOMcomoum objetodiferente.TodoobjetoDOMtempropriedadesemcomum,masalgunsobjetostem caractersticasespecficas.Usaremosestesobjetosparafazermosadeteco.Abaixosegue4 meiosquevocpoderutilizarparadetectarosuportedobrowser:

1. VerifiqueseumadeterminadapropriedadeexisteemobjetosglobaiscomoWINDOWouNAVIGATOR.Nessecaso, verificamososuporteageolocalizao. 2. Crieumelementoeverifiqueseumadeterminadapropriedadeexistenesteelemento. 3. Crieumelementoeverifiqueseumdeterminadomtodoexistenesteelemento,entochameomtodoeverifiqueseo valorretorna.Porexemplo,testequaisformatosdevdeososuportados. 4. Crieumelementoedefinaumatributocomumdeterminadovalor,entoverifiqueseoatributosuportaestevalor.Por exemplo,crieuminputeverifiquequaistypessosuportados.
UtilizandooModernizr
OModernizr(http://www.modernizr.com/)umabibliotecadedetecoquelhepermite verificarosuportedamaioriadascaractersticasdoHTML5eCSS3. OModernizrrodaautomaticamenteassimquevocoadicionanoheaddodocumento.Assim, sevocquiserverificarseobrowsersuportaGeolocalizao,porexemplo,bastainserireste scriptnapgina.Seobrowsersuportarafeaturetestada,eleretornartrue:
if (Modernizr.geolocation) { // Aceita a feature } else { // No aceita a feature testada. }
9 de 74
12-06-2011 20:44
ESTRUTURABSICA,DOCTYPEECHARSETS
AestruturabsicadoHTML5continuasendoamesmadasversesanterioresdalinguagem,h apenasumaexcessonaescritadoDoctype.Segueabaixocomoaestruturabsicapodeser seguida:
Arquivo:exemplos/3/estruturabasica.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE HTML> <html lang="pt-br"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <title></title> </head> <body> <p>Estrutura bsica de um HTML</p> <pre> <!DOCTYPE HTML><br> <html lang="pt-br"><br> <head><br> <meta charset="UTF-8"><br> <link rel="stylesheet" type="text/css" href="estilo.css"><br> <title></title><br> </head><br> <body><br> </body><br> </html><br> </pre> <a href="javascript: history.go(-1)">Voltar para o artigo</a> </body> </html>
ODoctype
ODoctypedeveseraprimeiralinhadecdigododocumentoantesdatagHTML.
<!DOCTYPE html>
ODoctypeindicaparaonavegadoreparaoutrosmeiosqualaespecificaodecdigoutilizar. Emversesanteriores,eranecessrioreferenciaroDTDdiretamentenocdigodoDoctype. ComoHTML5,arefernciaporqualDTDutilizarresponsabilidadedoBrowser. ODoctypenoumatagdoHTML,masumainstruoparaqueobrowsertenhainformaes sobrequalversodecdigoamarcaofoiescrita.
OelementoHTML
OcdigoHTMLumasriedeelementosemrvoreondealgunselementossofilhosde outroseassimpordiante.OelementoprincipaldessagrandervoresempreatagHTML.
<html lang="pt-br">
OatributoLANGnecessrioparaqueosuser-agentssaibamqualalinguagemprincipaldo
10 de 74
12-06-2011 20:44
documento. Lembre-sequeoatributoLANGnorestritoaoelementoHTML,elepodeserutilizadoem qualqueroutroelementoparaindicaroidiomadotextorepresentado. Paraencontraralistagemdecdigosdaslinguagens,acesse:http://www.w3.org/International /questions/qa-choosing-language-tags.
HEAD
ATagHEADondeficatodaaparteinteligentedapgina.NoHEADficamosmetadados. Metadadossoinformaessobreapginaeocontedoalipublicado.
MetatagCharset
Nonossoexemplohumametatagresponsvelporchavearqualtabeladecaractresapgina estutilizando.
<meta charset="utf-8">
NasversesanterioresaoHTML5,essatageraescritadaformaabaixo:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
EssaformaantigasertambmsuportadanoHTML5.Contudo,melhorquevocutilizea novaforma. AWebacessadaporpessoasdomundointeiro.Terumsistemaouumsitequelimiteoacesso epessoasdeoutrospasesalgoquevaicontraatradioeosideaisdainternet.Porisso,foi criadoumatabelaquesuprisseessasnecessidades,essatabelasechamaUnicode.Atabela Unicodesuportaalgoemtornodeummilhodecaracteres.Aoinvsdecadaregiotersua tabeladecaracteres,muitomaissensatohaverumatabelapadrocomomaiornmerode caracterespossvel.Atualmenteamaioriadossistemasebrowsersutilizadosporusurios suportamplenamenteUnicode.Porisso,fazendoseusistemaUnicodevocgarantequeeleser bemvisualizadoaqui,naChinaouemqualqueroutrolugardomundo. OqueoUnicodefazfornecerumniconmeroparacadacaractere,noimportaa plataforma,nemoprograma,nemalngua.
TagLINK
HdoistiposdelinksnoHTML:atagA,quesolinksquelevamousurioparaoutros documentoseatagLINK,quesolinksparafontesexternasqueserousadasnodocumento. NonossoexemplohumatagLINKqueimportaoCSSparanossapgina:
<link rel="stylesheet" type="text/css" href="estilo.css">
Oatributorel="stylesheet"indicaqueaquelelinkrelativoaimportaodeumarquivo referenteafolhasdeestilo. HoutrosvaloresparaoatributoREL,comoporexemplooALTERNATE:

<link rel="alternate" type="application/atom+xml" title="feed" href="/feed/">
Nestecaso,indicamosaosuser-agentsqueocontedodositepoderserencontradoemum caminhoalternativoviaAtomFEED.
11 de 74
12-06-2011 20:44
NoHTML5houtroslinksrelativosquevocpodeinserircomoorel="archives"que indicaumarefernciaaumacoleodematerialhistricodapgina.Porexemplo,apginade histricodeumblogpodeserreferenciadanestatag.
12 de 74
12-06-2011 20:44
MODELOSDECONTEDO
HpequenasregrasbsicasquensjconhecemosequeestonoHTMLdesdeoincio.Estas regrasdefinemondeoselementospodemounoestar.Seelespodemserfilhosoupaisde outroselementosequaisosseuscomportamentos. Dentretodasascategoriasdemodelosdecontedo,existemdoistiposdeelementos:elementos delinhaedebloco. Oselementosdelinhamarcam,nasuamaioriadasvezes,texto.Algunsexemplos:a,strong, em,img,input,abbr,span. Oselementosdeblocossocomocaixas,quedividemocontedonasseesdolayout. Abaixoseguealgumaspremissasquevocprecisarelembrareconhecer:

Oselementosdelinhapodemconteroutroselementosdelinha,dependendodacategoriaqueeleseencontra.Por exemplo:oelementoanopodeconteroelementolabel. Oselementosdelinhanuncapodemconterelementosdebloco. Elementosdeblocosemprepodemconterelementosdelinha. Elementosdeblocopodemconterelementosdebloco,dependendodacategoriaqueeleseencontra.Porexemplo,um pargrafonopodeconterumDIV.Masocontrriopossvel.
Estesdoisgrandesgrupospodemserdivididosemcategorias.Estascategoriasdizemqual modelodecontedooelementotrabalhaecomopodeserseucomportamento.
Categorias
CadaelementonoHTMLpodeounofazerpartedeumgrupodeelementoscom caractersticassimilares.Ascategoriasestoaseguir.Manteremososnomesdascategoriasem inglsparaquehajaummelhorentendimento:
Metadatacontent Flowcontent Sectioningcontent Headingcontent Phrasingcontent Embeddedcontent Interactivecontent
AbaixoseguecomoascategoriasestorelacionadasdeacordocomoWHATWG:
13 de 74
12-06-2011 20:44
Flow Phrasing Embedded Sectioning Metadata Heading
Interactive
Metadatacontent
OselementosquecompeacategoriaMetadataso:
base command link meta noscript script style title
Estecontedovemantesdaapresentao,formandoumarelaocomodocumentoeseu contedocomoutrosdocumentosquedistribueminformaoporoutrosmeios.
Flowcontent
AmaioriadoselementosutilizadosnobodyeaplicaessocategorizadoscomoFlow Content.Soeles:
a abbr address area(seforumdecendentedeumelementodemapa) article aside audio b bdo blockquote br button canvas cite code
14 de 74
12-06-2011 20:44

command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label link(Seoatributoitempropforutilizado) map mark math menu meta(Seoatributoitempropforutilizado) meter nav noscript object ol output p pre progress
15 de 74
12-06-2011 20:44

q ruby samp script section select small span strong style(Seoatributoscopedforutilizado) sub sup svg table textarea time ul var video wbr Text
Porviaderegra,elementosqueseumodelodecontedopermiteminserirqualquerelemento queseencaixanoFlowContent,devemterpelomenosumdescendentedetextoouum elementodescendentequefaapartedacategoriaembedded.
Sectioningcontent
Esteselementosdefinemumgrupodecabealhoserodaps.
article aside nav section
Basicamentesoelementosquejuntamgruposdetextosnodocumento.
Headingcontent
OselementosdacategoriaHeadingdefinemumaseodecabealhos,quepodemestar contidosemumelementonacategoriaSectioning.
h1 h2 h3 h4 h5
16 de 74
12-06-2011 20:44

h6 hgroup
Phrasingcontent
Fazempartedestacategoriaelementosquemarcamotextododocumento,bemcomoos elementosquemarcamestetextodentrodoelementodepargrafo.
a abbr area(seelefordescendentedeumelementodemapa) audio b bdo br button canvas cite code command datalist del(seelecontiverumelementodacategoriadePhrasing) dfn em embed i iframe img input ins(seelecontiverumelementodacategoriadePhrasing) kbd keygen label link(seoatributoitempropforutilizado) map(seapenaselecontiverumelementodacategoriadePhrasing) mark math meta(seoatributoitempropforutilizado) meter noscript object output progress q ruby samp
17 de 74
12-06-2011 20:44

script select small span strong sub sup svg textarea time var video wbr Text
Embeddedcontent
NacategoriaEmbedded,helementosqueimportamoutrafontedeinformaoparao documento.
audio canvas embed iframe img math object svg video
Interactivecontent
InteractiveContentsoelementosquefazempartedainteraodeusurio.
a audio(seoatributocontrolforutilizado) button details embed iframe img(seoatributousemapforutilizado) input(seoatributotypenotiverovalorhidden) keygen label menu(seoatributotypetiverovalortoolbar) object(seoatributousemapforutilizado)
18 de 74
12-06-2011 20:44

select textarea video(seoatributocontrolforutilizado)
AlgunselementosnoHTMLpodemserativadosporumcomportamento.Issosignificaqueo usuriopodeativ-lodealgumaforma.Oinciodasequenciadeeventosdependedo mecanismodeativaoenormalmenteculminamemumeventodeclickseguidopeloevento DOMActivate. Ouser-agentpermitequeousurioativemanualmenteoelementoquetemeste comportamentoutilizandoumteclado,mouse,comandodevozetc.
19 de 74
12-06-2011 20:44
NOVOSELEMENTOSEATRIBUTOS
AfunodoHTMLindicarquetipodeinformaoapginaestexibindo.Quandolemosum livro,conseguimosentenderediferenciarumttulodeumpargrafo.Bastapercebermosa quantidadedeletra,tamanhodafonte,coretc.Nocdigoissodiferente.Robsdebuscae outrosuser-agentsnoconseguemdiferenciartaisdetalhes.Porisso,cabeaodesenvolvedor marcarainformaoparaqueelaspossamserdiferenciadaspordiversosdispositivos. ComasversesanterioresdoHTMLnsconseguimosmarcardiversoselementosdolayout, estruturandoapginadeformaqueasinformaesficassememsuasreasespecficas. Conseguimosdiferenciarporexemplo,umpargrafodeumttulo.Masnoconseguamos diferenciarorodapdocabealho.Essadiferenciaoeraapenaspercebidavisualmentepelo layoutprontooupelaposiodoselementosnaestruturadoHTML.Entretanto,nohavia maneiradedetectarautomaticamenteesteselementosjqueastagsutilizadaparaambos poderiamseriguaisenohaviapadroparanomenclaturadeIDseClasses. OHTML5trouxeumasriedeelementosquenosajudamadefinirsetoresprincipaisno documentoHTML.Comaajudadesteselementos,podemosporexemplodiferenciar diretamentepelocdigoHTML5reasimportantesdositecomosidebar,rodapecabealho. Conseguimosseccionarareadecontedoindicandoondeexatamenteotextodoartigo. Estasmudanassimplificamotrabalhodesistemascomoosdosbuscadores.ComoHTML5os buscadoresconseguemvasculharocdigodemaneiramaiseficaz.Procurandoeguardando informaesmaisexataselevandomenostempoparaestocaressainformao. AbaixosegueumalistadosnovoselementoseatributosincludosnoHTML5:
A tag section define uma nova seo genrica no documento. Por exemplo, a home de um website pode ser dividida em diversas sees: introduo ou destaque, novidades, informao de contato e chamadas para contedo interno. O elemento nav representa uma seo da pgina que contm links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contm links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente so colocados no Rodap e tambm para compor o menu principal do site. O elemento article representa uma parte da pgina que poder ser distribudo e reutilizvel em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentrios de usurios ou apenas um bloco de texto comum. O elemento aside representa um bloco de contedo que referncia o contedo que envolta do elemento aside. O aside pode ser representado por contedos em sidebars em textos impressos, publicidade ou at mesmo para criar um grupo de elementos nav e outras informaes separados do contedo principal do website. O elemento header representa um grupo de introduo ou elementos de navegao. O elemento header pode ser utilizado para agrupar ndices de contedos, campos de busca ou at mesmo logos. O elemento footer representa literalmente o rodap da pgina. Seria o ltimo elemento do ltimo elemento antes de fechar a tag HTML. O elemento footer no precisa aparecer necessariamente no final de uma seo. Este elemento serve para marcar parte do texto que exibe um horrio ou uma data precisa no calendrio gregoriano.
section
nav
article
aside
header
footer time
Esteatributosforamdescontinuadosporquemodificamaformataodoelementoesuas funessomelhorescontroladaspeloCSS:
20 de 74
12-06-2011 20:44
aligncomoatributodatagcaption,iframe,img,input,object,legend,table,hr,div,h1,h2,h3, h4,h5,h6,p,col,colgroup,tbody,td,tfoot,th,theadetr. alink,link,textevlinkcomoatributosdatagbody. backgroundcomoatributodatagbody. bgcolorcomoatributodatagtable,tr,td,thebody. bordercomoatributodatagtableeobject. cellpaddingecellspacingcomoatributosdatagtable. charecharoffcomoatributosdatagcol,colgroup,tbody,td,tfoot,th,theadetr. clearcomoatributodatagbr. compactcomoatributodatagdl,menu,oleul. framecomoatributodatagtable. framebordercomoatributodatagiframe. heightcomoatributodatagtdeth. hspaceevspacecomoatributosdatagimgeobject. marginheightemarginwidthcomoatributosdatagiframe. noshadecomoatributodataghr. nowrapcomoatributodatagtdeth. rulescomoatributodatagtable. scrollingcomoatributodatagiframe. sizecomoatributodataghr. typecomoatributodatagli,oleul. valigncomoatributodatagcol,colgroup,tbody,td,tfoot,th,theadetr. widthcomoatributodataghr,table,td,th,col,colgroupepre.
AlgunsatributosdoHTML4nosomaispermitidosnoHTML5.Seelestiveremalgum impactonegativonacompatibilidadedealgumuser-agentelesserodiscutidos.
revecharsetcomoatributosdataglinkea. shapeecoordscomoatributosdataga. longdesccomoatributodatagimgandiframe. targetcomoatributodataglink. nohrefcomoatributodatagarea. profilecomoatributodataghead. versioncomoatributodataghtml. namecomoatributodatagimg(useidinstead). schemecomoatributodatagmeta. archive,classid,codebase,codetype,declareestandbycomoatributosdatagobject. valuetypeetypecomoatributosdatagparam. axiseabbrcomoatributosdatagtdeth. scopecomoatributodatagtd.
Atributos
Algunselementosganharamnovosatributos:
Oatributoautofocuspodeserespecificadonoselementosinput(excetoquandohatributohiddenatribudo), textarea,selectebutton.
21 de 74
12-06-2011 20:44

Atagapassaasuportaroatributomediacomoataglink.
Atagformganhaumatributochamadonovalidate.Quandoaplicadooformulriopodeserenviadosemvalidao dedados. Oelementoolganhouumatributochamadoreversed.Quandoeleaplicadoosindicadoresdalistasocolocados naordeminversa,isto,daformadescendente. Oelementofieldsetagorapermiteoatributodisabled.Quandoaplicado,todososfilhosdefieldsetso desativados. Onovoatributoplaceholderpodesercolocadoeminputsetextareas. Oelementoareaagorasuportaosatributoshreflangerelcomooselementosaelink Oelementobaseagorasuportaoatributotargetassimcomooelementoa.Oatributotargettambmnoest maisdescontinuadonoselementosaeareaporquesoteisparaaplicaesweb.
Osatributosabaixoforamdescontinuados:
Oatributoborderutilizadonatagimg. Oatributolanguagenatagscript. Oatributonamenataga.PorqueosdesenvolvedoresutilizamIDemvezdename. Oatributosummarynatagtable.
OW3Cmantmumdocumentoatualizadoconstantementenestapgina:http://www.w3.org /TR/2010/WD-html5-diff-20100624/.
22 de 74
12-06-2011 20:44
ELEMENTOSMODIFICADOSEAUSENTES
ExistiamnoHTMLalgunselementosquetraziamapenascaractersticasvisuaiseno semnticasparaocontedodapgina.Esseselementosanteriormenteforamdescontinuados porqueatrapalhavamocdigoetambmporquesuafunoerafacilmentesupridapeloCSS. Contudo,algunsdesteselementosvoltaramtonacomnovossignificadossemnticos.Outros elementosquenodescontinuados,masseussignificadosforammodificados.
Elementosmodificados
OelementoBpassaateromesmonvelsemnticoqueumSPAN,masaindamantmoestilodenegritonotexto. Contudo,elenodnenhumaimportnciaparaotextmarcadocomele. OelementoItambmpassaaserumSPAN.Otextocontinuasendoitlicoeparausuriosdeleitoresdetela,avoz utilizadamodificadaparaindicarnfase.Issopodesertilparamarcarfrasesemoutrosidiomas,termostcnicose etc.
Ointeressantequenestesdoiscasoshouveapenasumamudanasemntica.Provavelmente vocnoprecisarmodificarcdigosondeestesdoiselementossoutilizados.
Oelementoasemoatributohrefagorarepresentaumplaceholdernoexatolugarqueestelinkseencontra. Oelementoaddressagoratratadocomoumaseonodocumento. Oelementohragoratemomesmonvelqueumpargrafo,masutilizadoparaquebrarlinhasefazerseparaes. Oelementostrongganhoumaisimportncia. Oelementoheadnoaceitamaiselementoschildcomoseufilho.
Elementosouatributosdescontinuados
Oselementosabaixoforamdescontinuadosporqueseusefeitossoapenasvisuais:
basefont big center font s strike tt u
Oselementosabaixoforamdescontinuadosporqueferemosprincpiosdeacessibilidee usabilidade:
23 de 74
12-06-2011 20:44

frame frameset noframes
Oselementosabaixonoforamincludosnaespecificaoporquenotiveramusoentreos desenvolvedoresouporquesuafunofoisubstitudaporoutroelemento:
acronymnofoiincludoporquecriouumbocadodeconfusoentreosdesenvolvedoresquepreferiramutilizaratag abbr. appletficouobsoletoemfavordatagobject. isindexfoisubstitudopelousodeformcontrols. dirficouobsoletoemfavordatagul.
24 de 74
12-06-2011 20:44
NOVOSTIPOSDECAMPOS
Novosvaloresparaoatributotype
Oelementoinputaceitaosseguintesnovosvaloresparaoatributotype:
Opera10
tel
Telefone.Nohmscaradeformataoouvalidao,propositalmente,vistono havernomundoumpadrobemdefinidoparanmerosdetelefones.claroquevoc podeusaranovaAPIdevalidaodeformulrios(descritanocaptulo8)paraisso.Os agentesdeusuriopodempermitiraintegraocomsuaagendadecontatos,oque particularmentetilemtelefonescelulares.
Enquantoescrevo,oOpera10o niconavegadorDesktopquefezum bomtrabalhoimplementandoos novosrecursosdeformulriodo HTML5.Sevocinstal-lo,poder testarquasetudodesteedosprximos doiscaptulos.
search
Umcampodebusca.Aaparnciaecomportamentodocampopodemudarligeiramente dependendodoagentedeusurio,paraparecercomosdemaiscamposdebuscadosistema.
email
E-mail,comformataoevalidao.Oagentedeusuriopodeinclusivepromoveraintegrao comsuaagendadecontatos.
url
Umendereoweb,tambmcomformataoevalidao.
Datasehoras
Ocampodeformulriopodeconterqualquerumdessesvaloresnoatributotype:
datetime-local
datetime date month week time datetime-local
Otipodecampodatetime-localtrata automaticamenteasdiferenasde fusoshorrios,submetendoao servidorerecebendodelevalores GMT.Comissovocpode,com facilidade,construirumsistemaque serusadoemdiferentesfusos horriosepermitirquecadausurio lidecomosvaloresemseuprprio fusohorrio.
Todosdevemservalidadoseformatadospeloagentedeusurio,quepodeinclusivemostrar umcalendrio,umseletordehorrioououtroauxlioaopreenchimentoqueestiverdisponvel
25 de 74
12-06-2011 20:44
nosistemadousurio. Oatributoadicionalstepdefine,paraosvalidadoreseauxliosaopreenchimento,adiferena mnimaentredoishorrios.Ovalordestepemsegundos,eovalorpadro60.Assim,se vocusarstep="300"ousuriopoderfornecercomohorrios7:00,7:05e7:10,masno 7:02ou7:08.
number
Vejaumexemplodotiponumbercomseusatributosopcionais:
Arquivo:exemplos/7/number.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Number type</title> </head> <body> <input name="valuex" type="number" value="12.4" step="0.2" min="0" max="20" /> </body> </html>
OOpera10nosdumaexcelentevisualizaodoqueumagentedeusuriopodefazernesse caso:
range
Vamosmodificar,noexemploacima,apenasovalordetype,mudandode"number"para "range":
Arquivo:exemplos/7/range.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Range type</title> </head> <body> <input name="valuex" type="range" value="12.4" step="0.2" min="0" max="20" /> </body> </html>
26 de 74
12-06-2011 20:44

17
Novamente,Opera10:
color
Ocampocomtype="color"umseletordecor.Oagentedeusuriopodemostrarum controledeseleodecorououtroauxlioqueestiverdisponvel.Ovalorserumacorno formato#ff6600.
27 de 74
12-06-2011 20:44
TIPOSDEDADOSEVALIDADORES
Formulriosvitaminados
Conformevocdeveterpercebidonoltimocaptulo,oHTML5avanoubastantenosrecursos deformulrios,facilitandomuitoavidadequemprecisadesenvolveraplicaeswebbaseadas emformulrios.Nestecaptulovamosavanarumpoucomaisnesseassuntoe,vocvaiver,a coisavaificaraindamelhor.
autofocus
Aoincluiremumcampodeformulriooatributoautofocus,assim:
<input name="login" autofocus >
Ofocosercolocadonestecampoautomaticamenteaocarregarapgina.Diferentedas soluesemJavascript,ofocoestarnocampotologoelesejacriado,enoapenasaofinaldo carregamentodapgina.Issoevitaoproblema,muitocomumquandovocmudaofococom Javascript,deousuriojestaremoutrocampo,digitando,quandoofocomudado.
Placeholdertext
Vocjdevetervistoum"placeholder".Tradicionalmente,vnhamosfazendoisso:
Arquivo:exemplos/8/placeholderold.html
1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Placeholder, the old style</title> </head> <body> <input name="q" value="Search here" onfocus="if(this.value=='Search here')this.value=''"> </body> </html>
HTML5nospermitefazerissodemaneiramuitomaiselegante:
Arquivo:exemplos/8/placeholder.html
1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Placeholder, HTML5 way</title> </head> <body> <input name="q" placeholder="Search here">
28 de 74
12-06-2011 20:44

10 </body> 11 12 </html>
required
Paratornarumcampodeformulrioobrigatrio(seuvalorprecisaserpreenchido)basta,em HTML5,incluiroatributorequired:
<input name="login" required>
maxlength
Vocjconheciaoatributomaxlength,quelimitaaquantidadedecaracteresemumcampo deformulrio.UmagrandelacunadosformulrioHTMLfoicorrigida.EmHTML5,o elementotextareatambmpodetermaxlength!
Validaodeformulrios
UmadastarefasmaisenfadonhasdesefazeremJavascriptvalidarformulrios.Infelizmente, tambmumadasmaiscomuns.HTML5facilitamuitonossavidaaovalidarformulrios, tornandoautomticaboapartedoprocesso.Emmuitoscasos,todoele.Vocjviuquepode tornarseuscampos"espertos"comosnovosvaloresparaoatributotype,quejincluem validaoparadatas,emails,URLsenmeros.Vamosumpoucoalm.
pattern
Oatributopatternnospermitedefinirexpressesregularesdevalidao,semJavascript. VejaumexemplodecomovalidarCEP:
Arquivo:exemplos/8/pattern.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>O atributo pattern</title> </head> <body> <form> <label for="CEP">CEP: <input name="CEP" id="CEP" required pattern="\d{5}-?\d{3}" /> </label> <input type="submit" value="Enviar" /> </form> </body> </html>
novalidateeformnovalidate
Podemhaversituaesemquevocprecisaqueumformulrionosejavalidado.Nestescasos, bastaincluirnoelementoformoatributonovalidate. Outrasituaocomumquererqueoformulrionosejavalidadedependendodaaode submit.Nessecaso,vocpodeusarnobotodesubmitoatributoformnovalidate.Vejaum
29 de 74
12-06-2011 20:44
exemplo:
Arquivo:exemplos/8/formnovalidate.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Salvando rascunho</title> <style> label{display:block;} </style> </head> <body> <form> <label>nome: <input name="nome" required></label> <label>email: <input name="email" type="email" required></label> <label>mensagem: <textarea name="mensagem" required></textarea></label> <input type="submit" name="action" value="Salvar rascunho" formnovalidate> <input type="submit" name="action" value="Enviar"> </form> </body> </html>
Customvalidators
claroqueasvalidaespadro,emboraatendamamaioriadoscasos,nososuficientespara todasassituaes.Muitasvezesvocvaiquererescreversuaprpriafunodevalidao Javascript.HalgunsdetalhesnaespecificaodoHTML5quevoajud-locomisso:
1. Onovoeventooninputdisparadoquandoalgomodificadonovalordeumcampodeformulrio.Diferentede onchange,quedisparadoaofinaldaedio,oninputdisparadoaoeditar.diferentetambmdeonkeyupe onkeypress,porquevaicapturarqualquermodificaonovalordocampo,feitacommouse,tecladoououtrainterface qualquer. 2. OmtodosetCustomValiditypodeserinvocadoporvoc.Elerecebeumastring.Seastringforvazia,ocamposer marcadocomovlido.Casocontrrio,sermarcadocomoinvlido.
Comisso,vocpodeinserirsuasvalidaesnocampodeformulrioedeixaronavegadorfazer oresto.Nomaisprecisocapturaroeventosubmitetrat-lo.Veja,porexemplo,este formulriocomvalidaodeCPF:
Arquivo:exemplos/8/customvalidator.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Custom validator</title>  <script src="cpf.js"></script> <script> function vCPF(i){ i.setCustomValidity(validaCPF(i.value)?'':'CPF invlido!') } </script> </head> <body> <form> <label>CPF: <input name="cpf" oninput="vCPF(this)" /></label> <input type="submit" value="Enviar" /> </form> </body> </html>
30 de 74
12-06-2011 20:44

24
31 de 74
12-06-2011 20:44
DETALHESECONTEDOEDITVEL.
Aindamaisformulrios
Vejamosmaisduascoisasquevoccertamentejfezmaisdeumavezeforamsimplificadas peloHTML5.
Detalhesesumrio
Vejaumexemplodeusodosnovoselementosdetailsesummary:
<details> <summary>Copiando <progress max="39248" value="14718"> 37,5%</summary> <dl> <dt>Tamanho total:</dt> <dd>39.248KB</dd> <dt>Transferido:</dt> <dd>14.718</dd> <dt>Taxa de transferncia:</dt> <dd>127KB/s</dd> <dt>Nome do arquivo:</dt> <dd>HTML5.mp4</dd> </dl> </details>
Vejacomoumagentedeusuriopoderiarenderizarisso:
Eaoclicar:
Contedoeditvel
ParatornarumelementodoHTMLeditvel,bastaincluirneleoatributocontenteditable, assim:
<div contenteditable="true"> Edite-me... </div>
VocpodeleremanipularoselementoseditveisnormalmenteusandoosmtodosdoDOM.
32 de 74
12-06-2011 20:44
Issopermite,comfacilidade,construirumareadeediodeHTML.
33 de 74
12-06-2011 20:44
DRAG-N-DROPECORREOORTOGRFICA
DragandDrop
AAPIdeDragandDroprelativamentesimples.Basicamente,inseriroatributo draggable="true"numelementootornaarrastvel.Ehumasriedeeventosquevoc podetratar.Oseventosdoobjetosendoarrastadoso:
dragstart Oobjetocomeouaserarrastado.Oeventoqueafunorecebetemumatributotarget,quecontmoobjetosendoarrastado. drag Oobjetoestsendoarrastado dragend Aaodearrastarterminou
Oobjetosobreoqualoutroarrastadosofreosseguinteseventos:
dragenter Oobjetosendoarrastadoentrounoobjetotarget dragleave Oobjetosendoarrastadodeixouoobjetotarget dragover Oobjetosendoarrastadosemovesobreoobjetotarget drop Oobjetosendoarrastadofoisoltosobreoobjetotarget
Detalhesimportantes:
Aaopadrodoeventodragovercancelaraaodedraggingatual.Assim,nosobjetosque devemreceberdrop,precisosetarumaaodedragovercom,nomnimo,return false. Seleesdetextosoautomaticamentearrastveis,noprecisamdoatributodraggable.Ese vocquisercriarumareaparaondeseleesdetextopossamserarrastadas,bastatrataresses mesmoseventos. Porfim,todasfunesdetratamentodeeventodedragrecebemumobjetodeeventoque contmumapropriedadedataTransfer,umdatasetcomumatodososeventosduranteessa operaodedrag.
Arquivo:exemplos/10/drag.html
1 2 3 4 5 6 <!DOCTYPE HTML> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"/> <title>HTML5 Drag and drop demonstration</title> <style type="text/css">
7 #boxA, #boxB {
34 de 74
12-06-2011 20:44

8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
float:left; width:100px; height:200px; padding:10px; margin:10px; font-size:70%; } #boxA { background-color: blue; } #boxB { background-color: green; } #drag, #drag2 { width:50px; padding:5px; margin:5px; border:3px black solid; line-height:50px; } #drag { background-color: red;} #drag2 { background-color: orange;} </style> <script type="text/javascript">
// Quando o usurio inicia um drag, guardamos no dataset do evento // o id do objeto sendo arrastado function dragStart(ev) { ev.dataTransfer.setData("ID", ev.target.getAttribute('id')); } // Quando o usurio arrasta sobre um dos painis, retornamos // false para que o evento no se propague para o navegador, o // que faria com que o contedo fosse selecionado. function dragOver(ev) { return false; } // Quando soltamos o elemento sobre um painel, movemos o // elemento, lendo seu id do dataset do evento function dragDrop(ev) { var idelt = ev.dataTransfer.getData("ID"); ev.target.appendChild(document.getElementById(idelt)); } </script> </head> <body>  <div id="boxA" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">  <div id="drag" draggable="true" ondragstart="return dragStart(event)">drag me</div>  <div id="drag2" draggable="true" ondragstart="return dragStart(event)">drag me</div> </div>  <div id="boxB" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"> </div> </body> </html>
Exemplo
Segueumexemplodedrag-and-drop,baseadonoexcelenteexemplodeLaurentJouanneau (http://ljouanneau.com/lab/html5/demodragdrop.html).
Revisoortogrficaegramatical
Osagentesdeusuriopodemoferecerrecursosderevisoortogrficaegramatical, dependendodoquehouverdisponvelemcadaplataforma.Osdesenvolvedorespodem controlarocomportamentodessaferramentaatravsdoatributospellcheck.Inserir spellcheck="true"numelementofazcomquearevisoestejahabilitadaparaele.Voc tambmpodedesabilitararevisoparadeterminadoelemento,inserindo spellcheck="false".
35 de 74
12-06-2011 20:44
ELEMENTOSAUDIOEVIDEO,ECODECS
udio
Parainserirudioemumapginaweb,bastausaroelementoaudio:
<audio src="mus.oga" controls="true" autoplay="true" />
Ovalordecontrolsdefineseumcontroledeudio,combotesdeplay,pause,volume,barra deprogresso,contadordetempo,etc.serexibidonatela.Seforsetadocomo"false",ser precisocontrolaroplayerviajavascript,commtodoscomoplay()epause().Ovalorde autoplaydefineseoudiovaicomearatocarassimqueapginacarregar.
Origensalternativasdeudio
TodoagentedeusuriodeveriasuportarocodeclivreOggVorbis,mas,infelizmente,pode acontecerdeseuarquivooganotocarnocomputadoroucelulardealgum.Quemsabedoseu chefeouseucliente.Entoprecisosabercomooferecerumformatoalternativodeudio. Fazemosassim:
<audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /> </audio>
Claro,oagentedeusuriopodeaindanosabertocarnenhumdessesformatos,ousequerter suporteaudio.Paraessescasos,ofereaumcontedoalternativo:
<audio controls="true" autoplay="true"> <source src="mus.oga" /> <source src="mus.mp3" /> <source src="mus.wma" /> <p>Faa o <a href="mus.mp3">download da msica</a>.</p> </audio>
Vdeo
Ousodevdeomuitosemelhanteaodeudio:
<video src="u.ogv" width="400" height="300" />
Ecomvrioselementossource:
<video controls="true" autoplay="true" width="400" height="300">
36 de 74
12-06-2011 20:44

<source <source <source <p>Faa </video> src="u.ogv" /> src="u.mp4" /> src="u.wmv" /> o <a href="u.mp4">download do vdeo</a>.</p>
Codecs
muitoimportantequevocinclua,nosseuselementossourcedeudioevdeo, informaoarespeitodocontainerecodecsutilizados.Issovaievitarqueonavegador tenhaquebaixar,pelomenosparcialmente,oarquivodemdiapara,depois,descobrir quenoconseguetoc-lo.importantelembrarqueaextensodoarquivono informaorelevanteparaisso,pelocontrrio,nosignificanada.UmaURLpodeno terextensodearquivoepodelevaraumredirecionamento. Paraindicaraonavegadorocontainerecodecsdedeterminadoarquivo,usa-seo atributotype,noformato:
type='MIME-type do container; codecs="codec de vdeo, codec de udio"'
Oquefuncionanaweb
MarkPilgrimestescrevendoumlivro muitointeressante(emingls) chamado"DiveIntoHTML5".O captulosobreVdeoarefernciade quevocprecisaparapublicarvdeo nawebcomHTML5.
Porexemplo,umvdeoemOgg,usandooscodecsTheoraeVorbis,terseusourceassim:
<source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'>
ComMPEG-4acoisaumpoucomaiscomplicada,porqueprecisoindicaraonavegador tambmoprofiledocodecdevdeoutilizado.Vejaumexemplo:
<source src='video.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"'>
37 de 74
12-06-2011 20:44
ELEMENTODEVICEESTREAMAPI
Oelementodevice
VocpodeinseriremseuHTMLumelementodeacessowebcamdousurio,assim:
WorkingDraft
<device type="media">
Issovaiexibirumainterfacesolicitandoaousurioacessoasuawebcam.Seeletiver maisdeuma,tambmserpermitidoqueeleescolhaquewebcamusar.Oatributo mediatambmpodeconterovalor"fs",quevaiabrirumacaixadeseleonosistema dearquivos,permitindoaousurioescolherumarquivoparafazerstream. Opassoseguinteconectarostreamdesseseuelementodeviceaalgumacoisa.Veja, porexemplo,comoconect-loaumelementovideonaprpriapgina,fazendocomqueo usuriopossaveraimagemdesuaprpriawebcam:
Ocontedodessecaptuloest baseadonumaespecificaoqueainda estemstatusde"WorkingDraft".Ou seja,ascoisasaindapodemmudar bastante.Fiquedeolhonoquevai acontecercomoelementodeviceea StreamAPI,acessando(emingls): http://dev.w3.org/html5/html-device/
Arquivo:exemplos/12/videochat.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Videochat, step 1</title> <script> function update(stream) { document.getElementsByTagName('video')[0].src = stream.url; } </script> </head> <body> <p>To start chatting, select a video camera: <device type=media onchange="update(this.data)"></p> <video autoplay /> </body> </html>
Streams
Vocdeveternotado,noscriptacima,queafunodeupdaterecebeumparmetrostream. Trata-sedeumobjetodaclasseStream,quepossuiumapropriedadeurl,quejusamosacima,e ummtodorecord.Omtodorecordiniciaagravaodostreameretornaumobjeto StreamRecorder.Esseltimopossuiummtodostop,queretornaoarquivoquefoigravado.
Peer-to-peer
38 de 74 12-06-2011 20:44
Cuidado!OW3Caindaesttrabalhandonessaespecificao,etudoaquipodemudar.Por isso,nosepreocupeementenderasmincias.SaibaapenasqueHTML5prevqueosagentes deusuriotenhamumainterfacedecomuicaoP2P,quepermiteatrocadetexto,imagem, vdeoearquivos.Porenquanto,aespecificaodesteitemestsendoescritajuntodado elementodevice,masissodeveganharumapginaprpriaembreve.Fiquedeolho.
39 de 74
12-06-2011 20:44
MATHMLESVG
MathML
OHTML5incorporaopadroMathML.Trata-sedeumalinguagemdemarcao,baseadaem XML,pararepresentaodefrmulasmatemticas.VocpodelermaissobreMathMLem http://www.w3.org/Math/.ParaincorporarcdigoMathMLemseudocumentoHTML5,no precisofazerdeclaraesespeciais.Bastaescrevernormalmenteocdigo,iniciandocomum elementomath.Vejaesteexemplo:
Arquivo:exemplos/13/mathml.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>MathML</title> </head> <body> <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form="prefix">−</mo> <mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>−</mo> <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>⁢</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </body> </html>
Vejacomoesseexemplorenderizadononavegador:
MesmoquevocnuncatenhavistoMathML,eestecdigopareaumpoucoassustador,duma
40 de 74
12-06-2011 20:44
olhadacomcalmanocdigo,comparandocomaimagemdoresultado,evocvaiperceberque muitosimples.Talvezalgoquepossadeix-loconfusoaentidade⁢, queaparecealgumasvezesnocdigo.Elaestlparasepararosfatores4ac,porexemplo.Esses valoressomultiplicados,oqueafrmularepresenta,masnoqueremoscolocarum operadordemultiplicaoentreeles,porqueporconvenosesimplesmenteescrevemos4ac qualquerleitorsaberqueissoumamultiplicao. Porqueentosepreocupareminserir⁢?Vocvainotarqueseremovera entidadeeatagmocorrespondenteoresultadovisualseromesmo.Colocamos ⁢porqueMathMLnosvisual,semntica.Umoutroagentede usuriopodeterrecursosdeimportaressafrmulaparaumaferramentadeclculo,por exemplo.
SVG
AssimcomoMathML,SVGumaoutralinguagemXMLquepodeserincorporadacom facilidadeemHTML5.VocpodelermaissobreSVGemhttp://www.w3.org/Graphics/SVG/. SVGumalinguagemparamarcaodegrficosvetoriais.Vejamosumexemplobem simples:
Arquivo:exemplos/13/svg.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>SVG</title> </head> <body> <svg width="400" height="400">  <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" />  <polygon fill="red" stroke="blue" stroke-width="10" points="250,75 279,161 369,161 297,215 323,301 250,250 177,301 203,215 131,161 221,161" />  <circle cx="70" cy="240" r="60" stroke="#00FF00" stroke-width="5" fill="#FFFFFF" /> </svg> </body> </html>
Evejacomoissorenderizadononavegador:
41 de 74
12-06-2011 20:44
possvelfazermuitomaiscomSVG.Amaioriadoseditoresdegrficosvetoriaishoje exportaeimportaautomaticamenteSVG,permitindoaumdesignerconstruirumgrficoem seueditorvetorialprediletoeexport-lodiretamente.Emseguida,umprogramadorpode construirjavascriptquemanipulaesseSVG,usandoosmtodosdoDOM.Comissovocpode tergrficosdinmicos,comanimao,escalveisecomexcelentequalidadevisual, programveisemJavascript,semtecnologiasproprietriaseplugins.
42 de 74
12-06-2011 20:44
CANVASAPI
Oelementocanvas
ACanvasAPIpermiteavocdesenharnateladonavegadorviaJavascript.Onicoelemento HTMLexistenteparaissooelementocanvas,orestotodofeitoviaJavascript.Vejacomo inseriroelementocanvasnumapgina:
<canvas id="x" width="300" height="300"></canvas>
Issovaiexibirumretngulovazio.Paradesenharnele,primeiroobtemosocontextode desenho,comJavascript:
context=document.getElementById('x').getContext('2d')
Agoraquetemosumcontexto,podemosdesenharnele.Vamoscomearcomum simplesretngulo:
context.fillRect(10, 10, 50, 150)
Existeumcontexto3D?
Aindano.Existemvrias implementaesdecontexto3D,e cadafabricantedenavegadortem criadoasua,masaindanohum padrodoW3Csobreesseassunto.
Simples,no?Quetaltentarmosalgoumpoucomaiscomplexo?Dumaolhadano exemplo:
Arquivo:exemplos/14/canvas.html
1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Canvas API</title> </head> <body> <canvas id="x" width="300" height="300"></canvas> <button onclick="desenhar()">desenhar</button> <script>
13 function desenhar(){ 14 // Obtemos o contexto 15 context=document.getElementById('x').getContext('2d') 16 17 //Iniciamos um novo desenho 18 context.beginPath() 19 20 //Movemos a caneta para o inicio do desenho 21 context.moveTo(150,50) 22 23 //Desenhamos as linhas 24 context.lineTo(220,250) 25 context.lineTo(50,125) 26 context.lineTo(250,125) 27 context.lineTo(80,250) 28 context.lineTo(150,50) 29 30 //O desenho no de verdade enquanto voc 31 //no mandar o contexto pint-lo. 32 33 //Vamos pintar o interior de amarelo
43 de 74
12-06-2011 20:44

34 35 36 37 38 39 40 41 42 43 44 45 context.fillStyle='#ff0' context.fill() //Vamos pintar as linhas de vermelho. context.strokeStyle='#f00' context.stroke() } </script> </body> </html>
Evejaoqueacontecequandoseclicanoboto:
HmuitomaisparavocestudarsequiserseaprofundarnaCanvasAPI.Apenasparaquevoc tenhaumaidia,possveldesenhartexto,sombras,gradientes,incluirimagensnocanvas, manipularospixels,rotacionaretransformarosobjetos.
CanvaseSVG
UmadvidamuitocomumquandousarCanvas,quandousarSVG.Parasaberescolher, precisoentenderasdiferenasentreumeoutro.SVGvetorial,ebaseadoemXML,logo, acessvelviaDOM.Canvasdesenhadopixelapixel,viaJavascript. Assim,asvantagensdoSVGso:
1. Ocontedoacessvelaleitoresdetela 2. Ogrficoescalvel,noperderesoluoouserrilhaaoredimensionar 3. OcontedoacessvelviaDOM
EasvantagensdoCanvas:
1. AperformancemuitosuperioraoSVGnamaioriadoscasos 2. fcildesenharviaJavascript.EmSVG,precisofazerseuscriptescreverXMLparavoc.ComCanvasvocs mandadesenhar,epronto.
44 de 74
12-06-2011 20:44
SERVER-SENTEVENTS
EventSource
AServer-SentEventsAPIumamaneiradeinverterofluxodasaplicaesAjax,fazendocom queoservidorpossadispararoenviodedadosaoagentedeusurio.Paraisso,cria-se,no agentedeusurio,umobjetoEventSource:
es=new EventSource('comm.php')
IssovaiabrirumaconexoHTTPpara"comm.php"emant-laescutando.Cadavezqueo servidorenviareventosparaessecliente,serdisparadooevnetomessagedoobjeto EventSource.Vejaumexemplo:

es.onmessage=function(e){ alert("Chegaram dados: "+e.data) }
Issopodeserusado,porexemplo,paraimplementarumainterfacedechatouummonitorde statusdealgumaoperaodemoradaocorrendonoservidor.
Oprotocolodecomunicao
Emnossoexemploacima,apginacomm.phpenviaeventosparaoagentedeusurio.Voc noprecisasepreocuparemsabercomoissofuncionadoladodocliente,umavezqueoagente deusuriofaztodootrabalho.Masimportantequesaibacomoissodevefuncionardoladodo servidor.AURLdecomunicaodevedevolveraoclienteumheaderContent-type: text/event-stream.Emseguida,enviaasmensagens,quesoblocosdetextoseparados umdooutroporumalinhaembranco:
data: mensagem 1 data: a mensagem 2 tem data: mais de uma linha data: mensagem 3
Oprefixodata:indicaqueoqueseguesoosdadosdamensagem.Voctambmpodeusaro prefixoid:
data: mensagem 1 id: 1 data: a mensagem 2 tem data: mais de uma linha id: 2 data: mensagem 3
45 de 74
12-06-2011 20:44

id: 3
Sevocenviarprefixosidemsuasmensagenseoagentedeusurioperderaconexo,aotentar reconectarelevaienviarovalordoltimoidnoheaderHTTPLast-Event-ID.Comisso vocpode,porexemplo,enviarasmensagensdochatdopontoemqueparou.
46 de 74
12-06-2011 20:44
DOMEHTML5
DOMeHTML5
OModelodeObjetosdoDocumento(DOM,nasiglaemingls)ainterfaceentrealinguagem JavascripteosobjetosdoHTML.DOMomtodopadroparaconstruodeaplicaesricas comJavascripteamplamenteconhecidoeutilizado.Nestecaptulo,supondoquevocj conheceDOMparaHTML4ouXHTML,vamosnosfocarnadiferenaentreasverses anterioresdoDOMeadoHTML5.
PorquDOM?
OsprimeirosnavegadoresaincorporarummotordeJavascripttinhamalert,prompt, document.writeemaismeiadziademaneirasdeseinteragircomousurio.Es.Aidiade acessararvoredeobjetosdoHTMLtrouxepodersinterfacescomousurionaweb.Aidia eratoboaqueosfabricantesdenavegadoresnopuderamesperaratquetivssemosuma especificaopadroqueatendessesuasnecessidades,ecriaramcadaumseuprpriomtodo deresolveroproblema.Issoresultouemanoseanosdeincompatibilidade,emqueerapreciso escreverumaversodeseusscriptsparacadanavegador. Queremos,comcerteza,evitarumanovaguerradepadres.Porissorecomendamosavoc,por maissedutorquepareautilizarumrecursoproprietrioJavascript,queseatenhaaoDOM.
Vamossdiferenas
getElementsByClassName
EsseumsonhoantigodetododesenvolvedorJavascript.ComHTML5vocpodefazer:
destaques = document.getElementsByClassName('destaque')
EissoretornartodososelementosdoHTMLquepossuemaclasse"destaque".
innerHTML
Outrosonhoantigoquesetornarealidade.ApropriedadeinnerHTMLumaidiatoboaque todososnavegadoresatuaisjasuportamhmuitotempoetododesenvolvedorwebsabe us-la.Apesardisso,elanuncahaviasidodescritacomoumpadro. SeporventuravocnuncaviuapropriedadeinnerHTMLemao(puxa,ondevocestavanos
47 de 74
12-06-2011 20:44
ltimosdezanos?)saibaqueelacontmumastring,ocontedoHTMLdapgina.Evoctem acessodeleituraeescritaaessapropriedade. VejaumexemplodeinnerHTML:

function adicionaItem(nome){ document.getElementById('lista').innerHTML += '<li>'+nome+'</li>' }
activeElementehasFocus()
OdocumentoHTML5temumanovapropriedade,activeElement,quecontmoelementoque possuiofoconomomento.OdocumentotambmpossuiomtodohasFocus(),queretorna trueseodocumentocontmofoco.Seuusuriopodeestartrabalhandocommltiplasjanelas, abas,frames,oumesmoteralternadoparaoutroaplicativodeixandoonavegadorcomsua aplicaoJavascriptrodandoemsegundoplano.OmtodohasFocus()umaconveniente maneiradetrataraesquedependemdofoconaaplicaoatual. Vejaumexemplodescriptdependentedefoco:
Arquivo:exemplos/16/focusNotify.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Notifier</title> <script>
function notify(text){ document.getElementById('msg').innerHTML+='<p>'+text+'</p>' titleFlick() } function titleFlick(){ if(document.hasFocus()){ document.title='Notifier' return } document.title=document.title=='Notifier'?'* Notifier':'Notifier' setTimeout('titleFlick()',500) } </script> </head> <body> <input type="button" id="notify" value="Notify in 5 seconds" onclick="notify('Will notify in 5 seconds...');setTimeout('notify(\'Event shoot!\')',5000)" /> <div id="msg"></div> </body> </html>
getSelection()
OsobjetosdocumentewindowpossuemummtodogetSelection(),queretornaaseleo atual,umobjetodaclasseSelection.Aseleotem,entreoutros,osseguintesmtodose propriedades:
anchorNode Oelementoquecontmoinciodaseleo focusNode Oelementoquecontmofinaldaseleo selectAllChildern(parentNode) SelecionatodososfilhosdeparentNode
UsandogetSelection() hoje
Amaioriadosnavegadoresaindano tevetempodeseatualizaremrelao especificaoe,retornaumastring quandovocchama
48 de 74
12-06-2011 20:44

deleteFromDocument() Removeaseleododocumento rangeCount Aquantidadedeintervalosnaseleo getRangeAt(index) Retornaointervalonaposioindex addRange(range) Adicionaumintervaloseleo removeRange(range) Removeumintervalodaseleo
document.getSelection()e umobjetoSelectionquandovoc chama window.getSelection(). Comoesperamosquenumfuturo prximoocomportamentode document.getSelection() mude,sugerimosquevocprefirausar omtododewindowporenquanto.
Intervalosdeseleo
Vocdeveternotadoacimaqueumaseleoumconjuntodeintervalos,daclasseRange. Cadaintervalopossui,entreoutros,osseguintesmtodosepropriedades:
deleteContent() Removeocontedodointervalo setStart(parent,offset) SetaoinciodointervaloparaocaracterenaposiooffsetdentrodoelementoDOMparent setEnd(parent,offset) SetaofinaldointervaloparaocaracterenaposiooffsetdentrodoelementoDOMparent
TantoosobjetosSelectionquantoosobjetosRangeretornamotextodaseleoquando convertidosparastrings.
document.head
Oobjetodocumentjpossuaumapropriedadebody,umamaneiraconvenientedeacessaro elementobodydoHTML.Agoraeleganhouumapropriedadehead,maneiratambmmuito convenientedeacessaroelementohead.
SelectorAPI
ASelectorAPInonovidadedoHTML5,anterioraele.Mascomoaindadesconhecidade partedosdesenvolvedores,convmdizerqueelaexiste,equecontinuafuncionandono HTML5.ComaselectorAPIvocpodeusarseletoresCSSparaencontrarelementosDOM. ASelectorAPIexpeduasfunesemcadaumdoselementosDOM:querySelectore querySelectorAll.AmbasrecebemcomoargumentoumastringcomumseletorCSS. AconsultasemprefeitanasubtreedoelementoDOMapartirdoqualachamadafoi disparada.AquerySelectorretornaoprimeiroelementoquesatisfazoseletor,ounull casonohajanenhum.AquerySelectorAllretornaalistadeelementosquesatisfazem oseletor. Veja,nesteexemplo,umscriptparatabelaszebradascomSelectorAPI:
querySelectorejQuery
SevocusuriodejQuery,j entendeutudo.exatamenteamesma idiadosseletoresjQuery. Algunspreocupadosusuriosde jQuerytmnosperguntadoseno melhor,emtermosdeperformance usaraSelectorAPI.Masclaroque. Sevocrealmentesouberprogramar, escrevertodooseucdigosempre sermelhoremperformancequeusar umframework.Masoganho,nesse caso,desprezvel.Talvezoconforte saberque,nosnavegadoresemque istoestdisponvel,aprpriajQuery usainternamenteaSelectorAPI.
Arquivo:exemplos/16/zebra.html
1 2 3 4 5 6 <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <title>Zebra</title> <style>
7 .zebraon{background:silver} 8 </style> 9 <script>
49 de 74
12-06-2011 20:44

10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 window.onload=function(){ var zebrar=document.querySelectorAll('.zebra tbody tr') for(var i=0;i<zebrar.length;i+=2) zebrar[i].className='zebraon' } </script> </head> <body> <table class="zebra"> <thead><tr> <th>Vendedor</th> </tr></thead> <tbody><tr> <td>Manoel</td> </tr><tr> <td>Joaquim</td> </tr><tr> <td>Maria</td> </tr><tr> <td>Marta</td> </tr><tr> <td>Antonio</td> </tr><tr> <td>Pedro</td> </tr></tbody> </table> </body> </html>
<th>Total</th>
<td>12.300,00</td> <td>21.300,00</td> <td>13.200,00</td> <td>32.100,00</td> <td>23.100,00</td> <td>31.200,00</td>
CaractersticasespeciaisdeDomNodeList
AslistasdeelementosretornadaspelosmtodosdoDOMnosoArrayscomuns,soobjetos DomNodeList,oquesignificaque,entreoutrosmtodosespeciais,vocpodeusarlist[0] oulist(0)paraobterumelementodalista.Tambmpodeusarlist["name"]ou list("name")paraobterumobjetoporseunome.DuasadiesinteressantesdoHTML5ao usaresteltimomtodo:
1. Oobjetobuscadopelosatributosnameouid. 2. Umalistadecamposdeformulriocomomesmovalornoatributoname(umalistaderadiobuttons,porexemplo)ser retornadacasomaisdeumobjetosejaencontrado.Essalistacontmumatributoespecial,value,muitoconveniente. Elecontmovalordoradiomarcadoe,aosersetado,marcaoradiocorrespondente.
Datasets
VocpodeatribuirdadosarbitrriosaumelementoHTMLqualquer,prefixandoseusatributos com"data-".Porexemplo:
<img src="computador1.jpg" alt="Novo GNexius Forethinker" id="c1" data-processor="35Ghz" data-memory="48GB" data-harddrive="16TB" data-screen='45"' >
VocpodeacessaressesvaloresviaJavascript,atravsdoatributodataset,assim:
var img=document.getElementById('c1') proc=img.dataset.processor
Aspropriedadesdedatasettmpermissodeleituraeescrita.
50 de 74
12-06-2011 20:44
NOVOSEVENTOSDOM
Umapalavrasobreeventos
OsuporteaotratamentodeeventosdisparadospelousurioparteessencialdoDOM.HTML5 ofereceavocumextensoconjuntodenovoseventos.Vamosdarumaolhadanosmais interessantes:
Elementosmultimdia:
oncanplay Oelementoaudioouvideojtemdadossuficientesnobufferparacomearatocar. oncanplaythrough Oelementoaudioouvideojtemdadossuficientesnobufferparacomearatocare,seatranfernciadedadoscontinuarno ritmoemqueestocorrendo,estima-sequetocaratofinalseminterrupes. ondurationchange Oelementoaudioouvideoteveseuatributodurationmodificado.Issoacontece,porexemplo,aoalteraraorigemdamdia. onemptied Oelementoaudioouvideoteveumerroderetornovaziodedadosdarede.Oretornovazioacontecequando,porexemplo,voc tentainvocaromtodoplaydeumelementoqueaindanotemumaorigemdemdiadefinida. onended Ovdeoouudiochegouaofim. onloadeddata Osdadoscomearamasercarregadoseaposioatualdeplaybackjpodeserrenderizada. onloadedmetadata Osmetadadosforamcarregados.Jsabemosasdimenses,formatoeduraodovdeo. onloadstart Osdadoscomearamasercarregados. onpause Ousurioclicouempause. onplay Ousurioclicouemplayouoplaybackcomeouporcausadoatributoautoplay onplaying Ovdeoouudioesttocando. onprogress Oagentedeusurioestbuscandodadosdovdeoouudio.
Eventosemcamposdeformulrio:
oninput Ousurioentroucomdadosnocampo oninvalid Ocamponopassoupelavalidao
51 de 74
12-06-2011 20:44
Eventosgerais:
oncontextmenu Ousuriodisparouummenudecontextosobreoobjeto.NamaioriadossistemasDesktop,issosignificaclicarcomoboto direitodomouseousegurandoumateclaespecial. onmousewheel Arodinhadomousefoiacionada. onbeforeprint Disparadoantesdaimpressodapgina.Vocpodeus-loparamodificar,esconderouexibirelementos,preparandoapgina paraimpresso. onafterprint Disparadoapsaimpressodapgina.Vocpodeus-loparareverterostatusanteriorimpresso. onhashchange AltimaporodaURL,apsohash(#),foimodificada. onoffline Oagentedeusurioficouoffline. ononline Oagentedeusurioestnovamenteconectado. onredo Ousuriodisparouaaode"Refazer". onundo Ousuriodisparouaaode"Desfazer".
Drag-and-drop:
VimosadefiniodesseseventosnoCaptulo10:
ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop
Atributosdeevento
AespecificaodoHTML5padronizouumformatodeatribuiodeeventosquejera amplamenteutilizado.VocpodeatribuireventosatravsdeatributosHTMLcomonomedo evento.Porexemplo:
<input onblur="return verifica(this)" />
claroquevocpodecontinuarusandoomtododoDOMaddEventListener,coma vantagemdepoderatribuirvrioslistenersaomesmoevento.
52 de 74
12-06-2011 20:44
MENUSETOOLBARS
Oelementomenu
Oelementomenuusadoparadefinirmenusebarrasdeferramenta.Dentrodomenu,voc podeinserirsubmenusoucomandos.Parainserirsubmenus,bastainseriroutroselementos menu.Paradefinircomandos,vocpodeinserir:
1. Umlink,umelementoacomatributohref; 2. Umboto,umelementobutton; 3. Umboto,umelementoinputcomoatributotypecontendobutton,submit,resetouimage; 4. Umradiobutton,umelementoinputcomoatributotypecontendoradio; 5. Umcheckbox,umelementoinputcomoatributotypecontendocheckbox; 6. Umelementoselect,contendoumoumaisoptions,defineumgrupodecomandos 7. Umelementoqualquercomoatributoaccesskey 8. Umelementocommand
Tiposdecomando
Htrstiposdecomando:
command Umaaocomum; checkbox Umaaoquepodeestarnostatusdeligadaoudesligada,ealternaentreessesdoisstautsquandoclicada; radio Umaaoquepodeestarnostatusdeligadaoudesligada,equandoclicadavaiparaostatusdeligada,deligandotodasasaes comomesmovalornoatributoradiogroup;
Dalistadeelementospossveisparadefinircomandos,ostrsprimeiros,link,buttoneinput button,definemcomandosdotipocommand.Oquartoelemento,radiobutton,defineum comandodotiporadio.Oquinto,checkbox,defineumcomandodotipocheckbox. Osextoelemento,oselect,vaidefinirumgrupodecomandos.Seoselecttiveroatributo multiple,definirumalistadecomandosdotipocheckbox.Casocontrrio,oscomandossero dotiporadio,tendoomesmoradiogroup. Nostimocaso,umelementoqualquercomtecladeacesso,otipodecomandovaidependerdo tipodeelementoquerecebeuaccesskey.
Oelementocommand
Porfim,temosooitavomtodo,oelementocommand.Nestecasootipodecomando
53 de 74
12-06-2011 20:44
dependerdovalordoatributotype.Vejaumexemplodecomous-lo:
<command type="command" label="Salvar" onclick="salvar()" >
Prefiranousarcommand,porenquanto
Porqueaespecificaopermitequeseuseonovoelementocommandparadefinircomandos,e aomesmotempopermitequeseuseosvelhoselementoscomoinput,buttoneselectparaisso? Parapossibilitaraodesenvolvedorofereceralgumacompatibilidadecomnavegadoresantigos. Vejaesteexemplo:
Arquivo:exemplos/18/command.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Menus</title> </head> <body> <menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">New...</button> <button type="button" onclick="fopen()">Open...</button> <button type="button" onclick="fsave()">Save</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="ecopy()">Copy</button> <button type="button" onclick="ecut()">Cut</button> <button type="button" onclick="epaste()">Paste</button> </menu> </li> <li> <menu label="Help"> <li><a href="help.html">Help</a></li> <li><a href="about.html">About</a></li> </menu> </li> </menu> </body> </html>
Oagentedeusuriodeveriarenderizaralgocomo:
Umagentedeusurioquenoconheceonovoelementomenuvaientenderessecdigocomo listasaninhadascomboteselinks.Evairenderizarissoassim:
Noestbonito,masperfeitamenteacessvel.EovisualpodeserbemtrabalhadocomCSS.A mesmacoisapoderiaserescritacomoelementocommand:
Arquivo:exemplos/18/command2.html
1 <!DOCTYPE html> 2 <html> 3 <head>
54 de 74
12-06-2011 20:44

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <meta charset="UTF-8" /> <title>Menus</title> </head> <body> <menu type="toolbar"> <menu label="File"> <command onclick="fnew()" label="New..." /> <command onclick="fopen()" label="Open..." /> <command onclick="fsave()" label="Save" /> <command onclick="fsaveas()" label="Save as..." /> </menu> <menu label="Edit"> <command onclick="ecopy()" label="Copy" /> <command onclick="ecut()" label="Cut" /> <command onclick="epaste()" label="Paste" /> </menu> <menu label="Help"> <command onclick="location='help.html'" label="Help" /> <command onclick="location='about.html'" label="About" /> </menu> </menu> </body> </html>
Masumagentedeusurioquenoconheceoselementosmenuecommandnovaimostrar absolutamentenada.
55 de 74
12-06-2011 20:44
TIPOSDELINKS
Links
ApossibilidadedelinkardocumentosoquetornaaWeboqueela.Existemduasmaneiras principaisdelinkardocumentos,oselementosaelink.Oelementoacriaumlinkno contedodapgina.Vocconhecesuasintaxe:
<a href="http://visie.com.br">Visie</a>
Oelementolink,porsuavez,criaummetadado,umlinkquenomostradonocontedo, masoagentedeusuriousadeoutrasmaneiras.Ousomaiscomumvincularumdocumentoa umafolhadeestilos:

<link rel="stylesheet" href="estilo.css" />
Noteoatributorel="stylesheet".Oatributorelpodeestarpresentenoselementosae link,eterumasriedevalores:
Metadadosdenavegao
archives osarquivosdosite author apginadoautordodocumentoatual bookmark opermalinkdaseoaqueestedocumentopertence first oprimeirodocumentodasrieaqualestepertence help ajudaparaestapgina index ondiceousumrioqueincluiolinkparaestapgina last oltimodocumentodasrieaqualestepertence license alicensaquecobreestedocumento next oprximodocumentodasrieaqualestepertence prefetch oagentedeusuriodevefazercachedesselinkemsegundoplanotologoodocumentoatualtenhasidocarregado.Oautordo documentoindicaqueestelinkoprovvelprximodestinodousurio. prev odocumentoanteriordasrieaqualestepertence search abuscadestesite
56 de 74
12-06-2011 20:44

up Odocumentoumnvelacimadeste
OOperanosduminteressanteexemplodecomoumagentedeusuriopodeexibiresteslinks:
Metadadosdapgina
alternate umformatoalternativoparaocontedoatual.Precisaestaracompanhadodoatributotype,contendootipoMIMEdoformato. Porexemplo,paraindicaroRSSdapginaatualusamos: <link rel="alternate" type="application/rss+xml" href="rss.xml" /> icon oconequerepresentaestapgina pingback aURLdepingbackdestapgina.Atravsdesseendereoumsistemadebloggingougerenciadordecontedopodeavisar automaticamentequandoumlinkparaestapginaforinserido. stylesheet afolhadeestilolinkadadeveservinculadaaestedocumentoparaexibio
Comportamentodoslinksnapgina
external indicaumlinkexternoaodomniododocumentoatual nofollow indicaqueoautordodocumentoatualnoendossaocontedodesselink.Osrobsdeindexaoparamotoresdebuscapodem, porexemplo,noseguirestelinkoulevaremcontaonofollowemseualgoritmoderanking. noreferrer oagentedeusurionodeveenviaroheaderHTTPRefererseousurioacessaresselink sidebar olinkdeveserabertonumasidebardonavegador,seesterecursoestiverdisponvel
57 de 74
12-06-2011 20:44
MICRODATA
Semnticaadicional
Dumolhadanoseguintecdigo:
Arquivo:exemplos/20/microdata1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Microdata 1</title> </head> <body> <h1>Resultados do trimestre</h1> <ol> <li> <dl> <dt>nome</dt> <dd>Joaquim</dd> <dt>total</dt> <dd>10.764</dd> </dl> </li> <li> <dl> <dt>nome</dt> <dd>Manoel</dd> <dt>total</dt> <dd>12.449</dd> </dl> </li> <li> <dl> <dt>nome</dt> <dd>Antonio</dd> <dt>total</dt> <dd>9.202</dd> </dl> </li> <li> <dl> <dt>nome</dt> <dd>Pedro</dd> <dt>total</dt> <dd>17.337</dd> </dl> </li> </ol> </body> </html>
AMicrodataAPInospermitetornarestaestruturasemnticaumpoucomaisespecfica, definindooqueocontedodecadaelemento.Vejaesteoutroexemplo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Microdata 2</title> </head> <body> <h1>Resultados do trimestre</h1> <ol> <li> <dl itemscope> <dt>nome</dt> <dd itemprop="nome">Joaquim</dd> <dt>total</dt> <dd itemprop="total">10.764</dd>
58 de 74
12-06-2011 20:44

15 </dl> 16 </li> 17 <li> 18 <dl itemscope> 19 <dt>nome</dt> 20 <dt>total</dt> 21 </dl> 22 </li> 23 <li> 24 <dl itemscope> 25 <dt>nome</dt> 26 <dt>total</dt> 27 </dl> 28 </li> 29 <li> 30 <dl itemscope> 31 <dt>nome</dt> 32 <dt>total</dt> 33 </dl> 34 </li> 35 </ol> 36 37 </body> 38 </html>
<dd itemprop="nome">Manoel</dd> <dd itemprop="total">12.449</dd>
<dd itemprop="nome">Antonio</dd> <dd itemprop="total">9.202</dd>
<dd itemprop="nome">Pedro</dd> <dd itemprop="total">17.337</dd>
Adicionamosatributosespecias,itemscopeeitemprop.Cadaelementoitemscopedefineum itemdedados.Cadaitempropdefineonomedeumapropriedade.Ovalordapropriedadeo contedodatagHTML.AMicrodataAPInosforneceacessoespecialaessesdados.Vejacomo acessaressesdados:

resultados=document.getItems() for(var i=0;i<resultados.length;i++){ alert(resultados[i].properties.nome[0].content+": R$ "+ resultados[i].properties.total[0].content) }
Diferentestiposdedados
Noexemploacima,temosumalistagemdepessoas.Agoraimaginequevocpreciseter,no mesmodocumento,umalistagemdepessoasecarros.Poderiaescreverassim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Microdata 3</title> </head> <body> <h1>Resultados do trimestre</h1> <ol> <li> <dl itemscope> <dt>nome</dt> <dd itemprop="nome">Joaquim</dd> <dt>total</dt> <dd itemprop="total">10.764</dd> </dl> </li> <li> <dl itemscope> <dt>nome</dt> <dd itemprop="nome">Manoel</dd> <dt>total</dt> <dd itemprop="total">12.449</dd> </dl> </li> <li> <dl itemscope> <dt>nome</dt> <dd itemprop="nome">Antonio</dd> <dt>total</dt> <dd itemprop="total">9.202</dd> </dl> </li> <li> <dl itemscope> <dt>nome</dt> <dd itemprop="nome">Pedro</dd> <dt>total</dt> <dd itemprop="total">17.337</dd> </dl> </li> </ol> <h2>Carros mais vendidos</h2> <ol> <li>
59 de 74
12-06-2011 20:44

40 <dl itemscope> 41 <dt>nome</dt> 42 <dt>total</dt> 43 </dl> 44 </li> 45 <li> 46 <dl itemscope> 47 <dt>nome</dt> 48 <dt>total</dt> 49 </dl> 50 </li> 51 <li> 52 <dl itemscope> 53 <dt>nome</dt> 54 <dt>total</dt> 55 </dl> 56 </li> 57 </ol> 58 59 </body> 60 </html>
<dd itemprop="nome">Fusca</dd> <dd itemprop="total">382</dd>
<dd itemprop="nome">Braslia</dd> <dd itemprop="total">298</dd>
<dd itemprop="nome">Corcel</dd> <dd itemprop="total">102</dd>
Notequepessoasecarrostempropriedadesemcomum,nomeetotal.Quandovocexecutar document.getItems()vaiobterumalistadetodososelementoscomitemscope.Como obterumalistaapenasdepessoasoudecarros?Vocpodeadicionaracadaitemumatributo itemtype,quedizdequetipodeentidadesoaquelesdados:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Microdata 4</title> </head> <body> <h1>Resultados do trimestre</h1> <ol> <li> <dl itemscope itemtype="pessoa"> <dt>nome</dt> <dd itemprop="nome">Joaquim</dd> <dt>total</dt> <dd itemprop="total">10.764</dd> </dl> </li> <li> <dl itemscope itemtype="pessoa"> <dt>nome</dt> <dd itemprop="nome">Manoel</dd> <dt>total</dt> <dd itemprop="total">12.449</dd> </dl> </li> <li> <dl itemscope itemtype="pessoa"> <dt>nome</dt> <dd itemprop="nome">Antonio</dd> <dt>total</dt> <dd itemprop="total">9.202</dd> </dl> </li> <li> <dl itemscope itemtype="pessoa"> <dt>nome</dt> <dd itemprop="nome">Pedro</dd> <dt>total</dt> <dd itemprop="total">17.337</dd> </dl> </li> </ol> <h2>Carros mais vendidos</h2> <ol> <li> <dl itemscope itemtype="carro"> <dt>nome</dt> <dd itemprop="nome">Fusca</dd> <dt>total</dt> <dd itemprop="total">382</dd> </dl> </li> <li> <dl itemscope itemtype="carro"> <dt>nome</dt> <dd itemprop="nome">Braslia</dd> <dt>total</dt> <dd itemprop="total">298</dd> </dl> </li> <li> <dl itemscope itemtype="carro"> <dt>nome</dt> <dd itemprop="nome">Corcel</dd> <dt>total</dt> <dd itemprop="total">102</dd> </dl> </li>
60 de 74
12-06-2011 20:44

57 </ol> 58 59 </body> 60 </html>
Agoravocpodeexecutar:document.getItems('carro')paraobtersoscarros,por exemplo.
Falandoumidiomacomum
Vocdeveternotadoquepodedefinirseusprpriospadresdemetadadoscommicrodata. Recomendoque,antesdecriarseuprprioformato,verifiqueseomesmoproblemanojfoi resolvidoporalgum.Ositewww.data-vocabulary.orgcontmalgunsdessesformatos padronizados.Porexemplo,paradescreverosdadosdesuaempresaouorganizao,no inventeseuprprioformato,useoformatodefinidoemhttp://www.data-vocabulary.org /Organization.OvalordeitemtypedeveseraprpriaURLquedocumentaoformato.Veja comofica:
Arquivo:exemplos/20/visie.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Visie Padres Web</title> </head> <body> <address itemscope itemtype="http://data-vocabulary.org/Organization"> <h1 itemprop="name">Visie Padres Web</h1> <div itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"> <p itemprop="street-address">Alameda dos Ubiatans, 257 - Planalto Paulista</p> <p> <span itemprop="locality">So Paulo</span> <span itemprop="region">SP</span> <span itemprop="country-name">Brasil</span> </p> <p itemprop="postal-code">04070-030</p> </div> <div itemprop="tel">+55.11.3477-3347</div> </address> </body> </html>
Claroqueavantagemdeusaroformatopadronizadoaoinvsdeinventaroseunoapenas noterotrabalhodepensarosnomesdaspropriedades.Ossistemasdebusca,eoutrossistemas queacessemseusite,podementenderetrataressesdados.OGooglejfazisso,vejaneste endereo: http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861
61 de 74
12-06-2011 20:44
HISTRICODESESSOEAPISTORAGE
HistricodeSessoeAPIStorage
Umdosgrandesdesafiosdeusabilidadeaoseconstruiraplicaeswebcomatecnologiaatual apresentarummodelodenavegaoconsistenteparaousurio.Duasgrandeslacunasnos impediamdefaz-lo:
1. Nohaviaumaformasimplesdefazercomqueasaeslocaisdousurionumapginafossemrefletidasnaprxima. Porexemplo,seousurioabreefechaitensemummenuemrvoreeemseguidanavegaparaaprximapgina,era muitodifcilfazercomqueomenuaparecenomesmoestadonasegundapgina. 2. NohaviaumaformasimplesdefazercomqueasaesdousurionumapginaAjaxrespondessemcorretamenteaos botesdecontroledehistricodonavegador(voltareavanar).
HTML5trazformassimplesdesolucionarosdoisproblemas.
HistricodeSesso
Vocprovavelmenteconheceoobjetohistorydonavegadoreseusmtodosgo,backe forward.Elenospermite,viajavascript,umcontrolebsicodohistricodenavegao.O mesmocontrolequeousurio,voltareavanar. OobjetohistoryfoivitaminadonoHTML5comdoisnovosmtodos:
1. pushState(data,title[,url]):acrescentaumaentradanalistadehistrico. 2. replaceState(data,title[,url]):modificaaentradaatualnalistadehistrico.
Comisso,vocpodeacrescentaritenslistadehistrico,associandodadosoumesmouma URLaeles.Porexemplo,digamosquevoctenhatrselementosdecontedoemsuapginae umscriptqueexibaumporvezdeacordocomoscliquesdousurionomenu:

function showContent(n){ // Escondemos todos os elementos de contedo for(var i=1;i<4;i++) document.getElementById('cont'+i).style.display='none' // Exibimos o elemento escolhido document.getElementById('cont'+n).style.display='block' }
Segurana
Claro,seseuscripttentarassociaruma URLforadodomniodoscriptlista dehistrico,issovairesultarnuma exceodesegurana.
Vamosfazercomquenossoscriptacrescenteumalinhadehistricoaoselecionarum elemento:
function showPage(n){
62 de 74
12-06-2011 20:44
// Escondemos todos os elementos de contedo for(var i=1;i<4;i++) document.getElementById('cont'+i).style.display='none' // Exibimos o elemento escolhido document.getElementById('cont'+n).style.display='block' } function showContent(n){ // Mostramos o contedo escolhido showPage(n) // Salvamos a pgina atual no histrico history.pushState({page:n},'Contedo '+n) }
Fazendoisso,cadavezqueousurioescolherumitemnomenu,oelementoserexibidoeuma linhaseracrescentadanohistrico.Ousuriopoderacessarnormalmenteessesitensde histricousandoobotodevoltardonavegador.Cadavezqueeleusarohistrico,ser disparadoumeventopopstate.Assim,paraquenossoscriptestejacompleto,bastatrataresse evento:

function showPage(n){ // Escondemos todos os elementos de contedo for(var i=1;i<4;i++) document.getElementById('cont'+i).style.display='none' // Exibimos o elemento escolhido document.getElementById('cont'+n).style.display='block' } function showContent(n){ // Mostramos o contedo escolhido showPage(n) // Salvamos a pgina atual no histrico history.pushState({page:n},'Contedo '+n) } // Quando o usurio navegar no histrico, mostramos a pgina relacionada: window.onpopstate=function(e){ if(e.state) showPage(e.page) }
localStorageesessionStorage
AtoHTML4,quandoprecisvamosarmazenardadosnoagentedeusurioquepersistissem entreaspginas,usvamosCookies.Cookiesnospermitiamarmazenarostatusdeummenu javascriptqueprecisavasermantidoentreaspginas,lembraronomedousurio,ohistrico deoperaesrealizadasporeleoualtimavezqueelevisitounossosite. Comoaumentodacomplexidadedasaplicaesbaseadasemweb,duasgrandeslimitaesdos Cookiesnosincomodam:
1. Interfacecomplexa:ocdigoparaarmazenarCookiesenvolvecomplexosclculoscomdatasecontroledonomede domnio. 2. Limitedearmazenamento:algunsagentesdeusuriopermitiamoarmazenamentodenomximo20Cookies,com apenas4KBcada.
HTML5trazumanovamaneiradearmazenardadosnoclient,aAPIStorage.Umobjeto Storagepossuiosmtodos:
63 de 74
12-06-2011 20:44

1. getItem(key):obtmumvalorarmazenadonoStorage 2. setItem(key,value)guardaumvalornoStorage 3. removeItem(key)excluiumvalordoStorage 4. clear()limpaoStorage
Estodisponveisdoisobjetosnoescopoglobal(window):localStoragee sessionStorage.OobjetolocalStoragearmazenaosdadosnoclientsemexpirao definida.Ouseja,seousuriofecharonavegadorevoltaraositesemanasdepois,os dadosestarol.OsessionStoragearmazenaosdadosduranteasessoatualde navegao. OcdigoparaarmazenarumvalornaStorageseparececomisso:

localStorage.setItem('userChoice',33)
Serializar
UmaoutracomplicaodosCookies resolvidapelaAPIStorageofatode Cookiessarmazenaremstrings,nos obrigandoaserializararrayseobjetos javascript.AespecificaodaAPI Storageregequequalquervalor javascriptpodeserarmazenadoe recuperado.Infelizmente,emalguns dosnavegadoresemquetestamos,os valoressoconvertidosparastrings assimcomonosCookies.Toramos paraqueosagentesdeusurio implementemcorretamenteesse recurso.
Equandovocprecisardessevalor,emoutrapgina:
localStorage.getItem('userChoice')
EssainterfacejmuitomaissimplesqueadeCookies.Maspodeficarmelhor.Voc podeusaroStoragecomoumarray.Porexemplo:
if(!sessionStorage['theme']){ sessionStorage['theme']='oldfurniture'; }
Nohcomoissosermaissimples!Almdisso,oespaodearmazenamentosugeridopela documentaode5MBparacadadomnio,resolvendo,acreditoquepormaisumadcada,o problemadeespaodearmazenamentolocal.
64 de 74
12-06-2011 20:44
APLICAESOFFLINE
Caching
HTML5provumamaneiradeseindicaraonavegadorqueelementossonecessriosedevem serpostosemcacheparaqueumaaplicaofuncioneoffline.Oexemplodadocumentao oficialbastanteesclarecedor.Dumaolhadanaseguintepgina:
Arquivo:exemplos/22/clock.html
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Clock</title> 5 <script src="clock.js"></script> 6 <link rel="stylesheet" href="clock.css"> 7 </head> 8 <body> 9 <p>The time is: <output id="clock"></output></p> 10 </body> 11 </html>
Trata-sedeumwidgetderelgio.Parafuncionar,esteHTMLdependedosarquivos"clock.js" e"clock.css".Parapermitirqueousurioacesseestapginaoffile,precisamosescreverum arquivodemanifesto,indicandoqueURLsdevemserpostasemcache.Vamosprepararuma novaversodowidget,contendoomanifesto,queumarquivocomaextenso.manifesteque deveserservidocomotipoMIMEtext/cache-manifest.Emnossocaso,oarquivovaise chamarclock.manifesteteroseguintecontedo:

CACHE MANIFEST clock1.html clock.css clock.js
AgoravejaoHTMLcomoarquivodemanifestolinkado:
Arquivo:exemplos/22/clock1.html
1 <!DOCTYPE HTML> 2 <html manifest="clock.manifest"> 3 <head> 4 <title>Clock</title> 5 <script src="clock.js"></script> 6 <link rel="stylesheet" href="clock.css"> 7 </head> 8 <body> 9 <p>The time is: <output id="clock"></output></p> 10 </body> 11 </html>
NotequerecomendadoquevocinsiraoprprioHTMLprincipalnalistadeURLsdo arquivodemanifesto,emboranosejanecessrio.Aoencontrarumapginacomumarquivo demanifestovinculado,onavegadorfarcachedasURLslistadasnomanifestoedaprpria pgina. NotetambmquenonecessrioquetodasasURLsparacacheestejamimportadasno
65 de 74
12-06-2011 20:44
documntoatual.Oarquivodemanifestopodecontartodasaspginasdesuaaplicaoque foremnecessriasparapermitirofuncionamentooffline,inclusiveanavegaoentrepginas.
OobjetoApplicationCache
OobjetoApplicationCachecontrolaostatuseoperaesdecachingdapgina.Elepodeser acessadoviajavascript,assim:
window.applicationCache
Seumtodomaisinteressanteoupdate(),quefazcomqueoagentedeusuriorecarregueo cachedaaplicao.Almdisso,elepossuiapropriedadestatus,cujovalornumricopodeser umdosseguintes:

0-UNCACHED Nohumarquivodemanifestonestapginaouapontandoparaela 1-IDLE OobjetoApplicationCacheestocioso.Ocacheestatualizado. 2CHECKING Oarquivodemanifestoestsendobaixadoeconferido. 3-DOWNLOADING AsURLsvinculadasnomanifestoestosendobaixadas. 4-UPDATEREADY Ocacheantigo,masaindanofoimarcadocomoobsoleto. 5-OBSOLETE Ocachefoimarcadocomoobsoletoeprecisaseratualizadoassimquepossvel.
OobjetoApplicationCachetambmpossuiosseguinteseventos,relacionadosasuamudana destatus:
onchecking onerror onnoupdate ondownloading onprogress onupdateready oncached onobsolete
Comovocpodever,almdeonerror,temosumeventoparacadaumdosstatusdalistaacima.
Controledestatusdaaplicao
NoexemplodorelgioacimanohformulriosousubmissesAjax.Oagentedeusurios notrocadadoscomoservidor.Assimmuitofcilfazersuaaplicaorodaroffline,masessa noarealidadedamaioriadasaplicaes.Vimosnocaptuloanteriorcomofazer armazenamentolocaldedados.Comisso,vocpodearmazenarosdadosqueonavegador deveriaenviarparaoservidorenquantoaaplicaoestiverofflinee,tologoelaestejaonline, enviartudo.
66 de 74
12-06-2011 20:44
Parasaberseaaplicaoestonline,bastaacessarapropriedadeonLinedoobjeto window.navigator:
function salva(dados){ if(window.navigator.onLine){ enviaAjax(dados) }else{ salvaLocal(dados) } }
Eparadispararoenvioquandoaaplicaoestiveronlineeavisarousurioquandoelaestiver offline,usamososeventosononlineeonofflinedoobjetowindow:
window.ononline=function(){ enviaAjax(obtemLocal()) document.getElementById('warning').innerHTML='' } window.onoffline=function(){ document.getElementById('warning').innerHTML='Aplicao offline.' }
67 de 74
12-06-2011 20:44
SCROLLINTOVIEWEHIDDEN
Scrollingintoview
Umtruquesimples,masmuitotil.Vocpodefazer:
document.getElementById('aviso').scrollIntoView()
Issovairolarapginaatqueoelementocomoid"aviso"estejavisvelnotopodoviewport. Vocpodepassarumparmetroopcionaltop:
document.getElementById('aviso').scrollIntoView(false)
Ovalordefaulttrue.Sevocpassarfalse,arolagemvaideixaroobjetovisvelnabasedo viewport.
hidden
OcultareexibirelementosumadastarefasmaiscomunsemJavascript.EmHTML5existeum atributoespecficoparaisso,oatributohidden.Aoinser-loemumelementoassim:
<div hidden>Xi, se esconde!</div>
Ouassim:
<div hidden="true">Xi, se esconde!</div>
Oelementoestaroculto.
hiddeneJavascript
AcessaroatributohiddenemJavascriptmuitoconveniente:
function switchElement(elm){ if(elm.hidden) elm.hidden=false else elm.hidden=true }
Claro,vocpodefazer:
function switchElement(elm){ elm.hidden=!elm.hidden }
Sugiroquevocsempreuseoatributohidden.Descobrirseoelementoestocultolendoas propriedadesdisplayevisibilitydoCSS,almdedarmaistrabalho,podegerarconfuso.
68 de 74
12-06-2011 20:44
GEOLOCATIONAPI
MtodosdeGeolocalizao
Htrspopularesmaneirasdeumagentedeusuriodescobrirsuaposionoglobo:
GeolocalizaoIP omtodousadopelamaioriadosnavegadoreswebemcomputadores.Atravsdeconsultaswhoiseserviosdelocalizaode IP,vaideterminaracidadeouregioemquevocest. TriangulaoGPRS DispositivosconectadosaumarededecelularesesemumGPS,oucomoGPSdesligado,podemdeterminarsuaposiopela tringulaodasantenasGPRSprximas.bemmaisprecisoqueomtodobaseadoemIP,vaimostraremquepartedobairro vocest. GPS omtodomaispreciso.Emcondiesideais,amargemdeerrodeapenas5metros.
Emboraessassejamastrsmaneirasmaispopularesdeseresolveroproblema,podemnoser asnicas.Algunsagentesdeusuriopodemusarumacombinaodessesmtodos,oumesmo umnovomtodoquevenhaaserinventado.Porisso,aGeolocationAPIagnsticaemrelao aomtodousado.Hapenasumamaneiradeligaredesligaro"mododealtapreciso",oque vaitersignificadodiferenteemcadaagentedeusurio. Paraobteraposiodousurio,bastaexecutaroscript:

navigator.geolocation.getCurrentPosition(showpos)
Ondeshowposumafunocallback,quevaireceberumobjetodeposicionamento.Vejaum exemplo:
function showpos(position){ lat=position.coords.latitude lon=position.coords.longitude alert('Your position: '+lat+','+lon) }
Claro,vocpodefazeroquequiser,abrirummapa,submeteraposioviaAjax,enviaros dadosparaumwebservice,etc. OmtodogetCurrentPositionrecebedoisoutrosparmetros.Oprimeiroumafunopara tratamentodeerro.Osegundo,umobjetodeconfigurao.
Tratandoerros
Quandooscripttentaacessaroposicionamento,onavegadorexibeumabarracomoesta:
69 de 74
12-06-2011 20:44
Ousuriopodeentoescolhersedesejaounocompartilharsuaposiocomosite.Almdeo usuriopoderdizerno,muitacoisapodedarerradonahoradeobterageolocalizao.Para tratarisso,vocpodepassarosegundoparmetroagetCurrentPosition:

navigator.geolocation.getCurrentPosition(showpos,erropos)
Casoalgoderrado,afunoerroposvaireceberumobjetoPositionError,quetemoatributo code,quepodeterumdosseguintesvalores:
1-Permissonegada Ousurioclicouem"nocompartilhar". 2-Posioindisponvel Oagentedeusurioestdesconectado,ossatlitesdeGPSnopuderamseralcanadosoualgumerrosemelhante. 3-Timeout Tempoesgotadoaoobterumaposio.VocpodedefinirotempomximoaochamargetCurrentPosition. 0-Errodesconhecido Algumaoutracoisaimpediuoagentedeusuriodeobterumaposio.
Notratearespostadousuriocomoumerro
Emsuafunodetratamentodeerro,seobtiverocdigodeerro1,porfavor,noincomodeo usuriocommensagensdeerro.Eleescolheunocompartilharsuaposiocomosite.Talveza melhoratitudesejanofazernadanessemomento.
Oobjetodeconfigurao
OterceiroparmetrodegetCurrentPositionumobjetodeconfigurao,quepodeteras seguintespropriedades:
enableHighAccuracy Setrue,ligaomododealtapreciso.Numcelularissopodeinstruironavegador,porexemplo,ausaroGPSaoinvsda triangulaoGPRS timeout Otempoemmilissegundosqueoagentedousuriovaiesperarpelaposioantesdedispararumerrotipo3. maximumAge Otempo,emmilissegundos,queonavegadorpodecachearaposio.
watchPosition
Seoquevocdesejarastrearaposiodousuriocontinuamente,podeusar,aoinvsde getCurrentPosition,omtodowatchPosition.Eletemamesmaassinaturade getCurrentPosition:
w=navigator.geolocation.watchPosition(showpos,erropos)
Adiferenaqueafunoshowposserchamadatodavezqueaposiodousuriomudar.O valorderetornoumnmero,quepodeserusadoposteriormenteparacancelarowatcher:
navigator.geolocation.clearWatch(w)
70 de 74
12-06-2011 20:44
UNDO
OobjetoUndoManager
Oagentedeusuriodevearmazenarumhistricodealteraesparacadadocumento carregado.EssehistricocontroladopeloobjetoUndoManager,acessvelatravsde window.undoManager.Ohistricoguardadoistiposdealteraes:
AlteraesDOM Oprpriohistricodealteraesdonavegador,asalteraesDOMsoinseridasautomaticamentenohistricoquandoo usuriousaumcampodeedio. Objetosundo Osobjetosundosoinseridosnohistricoecontroladospelosseusscripts.Porexemplo,umaaplicaodee-mailpodeguardar umobjetoundorepresentandoofatodequeousuriomoveuume-maildeumapastaparaoutra.
OobjetoUndoManagerpossuiosseguintesmtodosepropriedades:
length onmerodeentradasnohistrico position onmerodaentradaatualnohistrico add(data,title) adicionaumaentradaespecficanohistrio.datapodeserumobjetoliteralcomdadosarbitrrios.titlecomoessa entradavaiaparecerdescritanalistadohistrico remove(index) removeumaentradaespecficadohistrico clearUndo() removetodasasentradasantesdaatualnohistrico clearRedo() removetodasasentradasapsaatualnohistrico
Almdisso,ositensnohistricopodemseracessadoscom window.undoManager[index].
Respondendosaesdeundoeredo
Cadavezqueousuriodispararumaaodeundoouredo,eoitemdohistricoforumobjeto undo,serdisparadooeventocorrespondente,window.onundoouwindow.onredo.Asfunes associadasaesteseventosreceberocomoparmetroumobjetoevent,contendouma propriedadedata,cujovaloroobjetoundoquevocinseriunohistrico. Vejaoexemplo:
window.onundo=function(e){ alert('Refazer a alterao: '+e.data) }
71 de 74
12-06-2011 20:44
Disparandoasaesdeundoeredo
Sevocquiserofereceremsuaaplicaobotesparaundoeredo,bastaqueelesexecutem:
document.execCommand('undo')
Ou:
document.execCommand('redo')
72 de 74
12-06-2011 20:44
73 de 74
12-06-2011 20:44
74 de 74
12-06-2011 20:44

HTML5 2011

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML5 2011

Caricato da

Copyright:

Formati disponibili

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

elementosHTMLnapgina.CadaelementonocdigorepresentadonoDOMcomoum objetodiferente.TodoobjetoDOMtempropriedadesemcomum,masalgunsobjetostem caractersticasespecficas.Usaremosestesobjetosparafazermosadeteco.Abaixosegue4 meiosquevocpoderutilizarparadetectarosuportedobrowser:

if (Modernizr.geolocation) { // Aceita a feature } else { // No aceita a feature testada. }

Drag-n-drop e correo ortogrca

AestruturabsicadoHTML5continuasendoamesmadasversesanterioresdalinguagem,h apenasumaexcessonaescritadoDoctype.Segueabaixocomoaestruturabsicapodeser seguida:

Drag-n-drop e correo ortogrca

documento. Lembre-sequeoatributoLANGnorestritoaoelementoHTML,elepodeserutilizadoem qualqueroutroelementoparaindicaroidiomadotextorepresentado. Paraencontraralistagemdecdigosdaslinguagens,acesse:http://www.w3.org/International /questions/qa-choosing-language-tags.

Oatributorel="stylesheet"indicaqueaquelelinkrelativoaimportaodeumarquivo referenteafolhasdeestilo. HoutrosvaloresparaoatributoREL,comoporexemplooALTERNATE:

Drag-n-drop e correo ortogrca

NoHTML5houtroslinksrelativosquevocpodeinserircomoorel="archives"que indicaumarefernciaaumacoleodematerialhistricodapgina.Porexemplo,apginade histricodeumblogpodeserreferenciadanestatag.

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Flow Phrasing Embedded Sectioning Metadata Heading

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Porviaderegra,elementosqueseumodelodecontedopermiteminserirqualquerelemento queseencaixanoFlowContent,devemterpelomenosumdescendentedetextoouum elementodescendentequefaapartedacategoriaembedded.

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Enquantoescrevo,oOpera10o niconavegadorDesktopquefezum bomtrabalhoimplementandoos novosrecursosdeformulriodo HTML5.Sevocinstal-lo,poder testarquasetudodesteedosprximos doiscaptulos.

Drag-n-drop e correo ortogrca

nosistemadousurio. Oatributoadicionalstepdefine,paraosvalidadoreseauxliosaopreenchimento,adiferena mnimaentredoishorrios.Ovalordestepemsegundos,eovalorpadro60.Assim,se vocusarstep="300"ousuriopoderfornecercomohorrios7:00,7:05e7:10,masno 7:02ou7:08.

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Ofocosercolocadonestecampoautomaticamenteaocarregarapgina.Diferentedas soluesemJavascript,ofocoestarnocampotologoelesejacriado,enoapenasaofinaldo carregamentodapgina.Issoevitaoproblema,muitocomumquandovocmudaofococom Javascript,deousuriojestaremoutrocampo,digitando,quandoofocomudado.

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Comisso,vocpodeinserirsuasvalidaesnocampodeformulrioedeixaronavegadorfazer oresto.Nomaisprecisocapturaroeventosubmitetrat-lo.Veja,porexemplo,este formulriocomvalidaodeCPF:

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Ovalordecontrolsdefineseumcontroledeudio,combotesdeplay,pause,volume,barra deprogresso,contadordetempo,etc.serexibidonatela.Seforsetadocomo"false",ser precisocontrolaroplayerviajavascript,commtodoscomoplay()epause().Ovalorde autoplaydefineseoudiovaicomearatocarassimqueapginacarregar.

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Ocontedodessecaptuloest baseadonumaespecificaoqueainda estemstatusde"WorkingDraft".Ou seja,ascoisasaindapodemmudar bastante.Fiquedeolhonoquevai acontecercomoelementodeviceea StreamAPI,acessando(emingls): http://dev.w3.org/html5/html-device/

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

Drag-n-drop e correo ortogrca

HmuitomaisparavocestudarsequiserseaprofundarnaCanvasAPI.Apenasparaquevoc tenhaumaidia,possveldesenhartexto,sombras,gradientes,incluirimagensnocanvas, manipularospixels,rotacionaretransformarosobjetos.

Drag-n-drop e correo ortogrca

IssovaiabrirumaconexoHTTPpara"comm.php"emant-laescutando.Cadavezqueo servidorenviareventosparaessecliente,serdisparadooevnetomessagedoobjeto EventSource.Vejaumexemplo:

Drag-n-drop e correo ortogrca

Sevocenviarprefixosidemsuasmensagenseoagentedeusurioperderaconexo,aotentar reconectarelevaienviarovalordoltimoidnoheaderHTTPLast-Event-ID.Comisso vocpode,porexemplo,enviarasmensagensdochatdopontoemqueparou.