Vous êtes sur la page 1sur 74

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

1 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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> &lt;!DOCTYPE HTML&gt;<br> &lt;html lang="pt-br"&gt;<br> &lt;head&gt;<br> &lt;meta charset="UTF-8"&gt;<br> &lt;link rel="stylesheet" type="text/css" href="estilo.css"&gt;<br> &lt;title&gt;&lt;/title&gt;<br> &lt;/head&gt;<br> &lt;body&gt;<br> &lt;/body&gt;<br> &lt;/html&gt;<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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

12 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


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

http://tableless.com.br/html5/print.php?chapter=10

15 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca


q ruby samp script section select small span strong style(Seoatributoscopedforutilizado) sub sup svg table textarea time ul var video wbr Text

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


h6 hgroup

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


script select small span strong sub sup svg textarea time var video wbr Text

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


select textarea video(seoatributocontrolforutilizado)

http://tableless.com.br/html5/print.php?chapter=10

AlgunselementosnoHTMLpodemserativadosporumcomportamento.Issosignificaqueo usuriopodeativ-lodealgumaforma.Oinciodasequenciadeeventosdependedo mecanismodeativaoenormalmenteculminamemumeventodeclickseguidopeloevento DOMActivate. Ouser-agentpermitequeousurioativemanualmenteoelementoquetemeste comportamentoutilizandoumteclado,mouse,comandodevozetc.

19 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


Atagapassaasuportaroatributomediacomoataglink.

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


frame frameset noframes

http://tableless.com.br/html5/print.php?chapter=10

Oselementosabaixonoforamincludosnaespecificaoporquenotiveramusoentreos desenvolvedoresouporquesuafunofoisubstitudaporoutroelemento:
acronymnofoiincludoporquecriouumbocadodeconfusoentreosdesenvolvedoresquepreferiramutilizaratag abbr. appletficouobsoletoemfavordatagobject. isindexfoisubstitudopelousodeformcontrols. dirficouobsoletoemfavordatagul.

24 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


17

http://tableless.com.br/html5/print.php?chapter=10

Novamente,Opera10:

color
Ocampocomtype="color"umseletordecor.Oagentedeusuriopodemostrarum controledeseleodecorououtroauxlioqueestiverdisponvel.Ovalorserumacorno formato#ff6600.

27 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


10 </body> 11 12 </html>

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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> <!-- O arquivo cpf.js contm a funo validaCPF, que recebe uma string e retorna true ou false. --> <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

Drag-n-drop e correo ortogrca


24

http://tableless.com.br/html5/print.php?chapter=10

31 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

Issopermite,comfacilidade,construirumareadeediodeHTML.

33 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


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

http://tableless.com.br/html5/print.php?chapter=10

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> <!-- Painel 1 --> <div id="boxA" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"> <!-- Draggable 1 --> <div id="drag" draggable="true" ondragstart="return dragStart(event)">drag me</div> <!-- Draggable 2 --> <div id="drag2" draggable="true" ondragstart="return dragStart(event)">drag me</div> </div> <!-- Painel 2 --> <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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


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

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

Cuidado!OW3Caindaesttrabalhandonessaespecificao,etudoaquipodemudar.Por isso,nosepreocupeementenderasmincias.SaibaapenasqueHTML5prevqueosagentes deusuriotenhamumainterfacedecomuicaoP2P,quepermiteatrocadetexto,imagem, vdeoearquivos.Porenquanto,aespecificaodesteitemestsendoescritajuntodado elementodevice,masissodeveganharumapginaprpriaembreve.Fiquedeolho.

39 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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">&minus;</mo> <mi>b</mi> <mo>&PlusMinus;</mo> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&minus;</mo> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </body> </html>

Vejacomoesseexemplorenderizadononavegador:

MesmoquevocnuncatenhavistoMathML,eestecdigopareaumpoucoassustador,duma

40 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

olhadacomcalmanocdigo,comparandocomaimagemdoresultado,evocvaiperceberque muitosimples.Talvezalgoquepossadeix-loconfusoaentidade&InvisibleTimes;, queaparecealgumasvezesnocdigo.Elaestlparasepararosfatores4ac,porexemplo.Esses valoressomultiplicados,oqueafrmularepresenta,masnoqueremoscolocarum operadordemultiplicaoentreeles,porqueporconvenosesimplesmenteescrevemos4ac qualquerleitorsaberqueissoumamultiplicao. Porqueentosepreocupareminserir&InvisibleTimes;?Vocvainotarqueseremovera entidadeeatagmocorrespondenteoresultadovisualseromesmo.Colocamos &InvisibleTimes;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"> <!-- Um retngulo: --> <rect x="10" y="10" width="150" height="50" stroke="#000000" stroke-width="5" fill="#FF0000" /> <!-- Um polgono: --> <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" /> <!-- Um crculo --> <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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

possvelfazermuitomaiscomSVG.Amaioriadoseditoresdegrficosvetoriaishoje exportaeimportaautomaticamenteSVG,permitindoaumdesignerconstruirumgrficoem seueditorvetorialprediletoeexport-lodiretamente.Emseguida,umprogramadorpode construirjavascriptquemanipulaesseSVG,usandoosmtodosdoDOM.Comissovocpode tergrficosdinmicos,comanimao,escalveisecomexcelentequalidadevisual, programveisemJavascript,semtecnologiasproprietriaseplugins.

42 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


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>

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


id: 3

http://tableless.com.br/html5/print.php?chapter=10

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

46 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


deleteFromDocument() Removeaseleododocumento rangeCount Aquantidadedeintervalosnaseleo getRangeAt(index) Retornaointervalonaposioindex addRange(range) Adicionaumintervaloseleo removeRange(range) Removeumintervalodaseleo

http://tableless.com.br/html5/print.php?chapter=10
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

Drag-n-drop e correo ortogrca


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>

http://tableless.com.br/html5/print.php?chapter=10

<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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


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>

http://tableless.com.br/html5/print.php?chapter=10

Masumagentedeusurioquenoconheceoselementosmenuecommandnovaimostrar absolutamentenada.

55 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


up Odocumentoumnvelacimadeste

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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:

Arquivo:exemplos/20/microdata2.html
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

Drag-n-drop e correo ortogrca


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>

http://tableless.com.br/html5/print.php?chapter=10

<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:

Arquivo:exemplos/20/microdata3.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 <!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

Drag-n-drop e correo ortogrca


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>

http://tableless.com.br/html5/print.php?chapter=10

<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:

Arquivo:exemplos/20/microdata4.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 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

Drag-n-drop e correo ortogrca


57 </ol> 58 59 </body> 60 </html>

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca


1. getItem(key):obtmumvalorarmazenadonoStorage 2. setItem(key,value)guardaumvalornoStorage 3. removeItem(key)excluiumvalordoStorage 4. clear()limpaoStorage

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

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

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

Disparandoasaesdeundoeredo
Sevocquiserofereceremsuaaplicaobotesparaundoeredo,bastaqueelesexecutem:
document.execCommand('undo')

Ou:
document.execCommand('redo')

72 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

73 de 74

12-06-2011 20:44

Drag-n-drop e correo ortogrca

http://tableless.com.br/html5/print.php?chapter=10

74 de 74

12-06-2011 20:44