Guia de Referncia HTML5

  • Published on
    08-Aug-2015

  • View
    31

  • Download
    3

Transcript

GUIA DE REFERNCIA

ndice

Parte 1: Markup1. Viso geral do HTML5. 2. Anlise do suporte atual pelos navegadores e estratgias de uso 3. Estrutura bsica, DOCTYPE e charsets 4. Modelos de contedo 5. Novos elementos e atributos 6. Elementos modificados e ausentes

Parte 2: Formulrios e Multimdia7. Novos tipos de campos 8. Tipos de dados e validadores 9. Detalhes e contedo editvel. 10. Drag-n-drop e correo ortogrfica 11. Elementos audio e video, e codecs 12. Elemento device e Stream API

Parte 3: A nova gerao de aplicaes web I13. MathML e SVG 14. Canvas API 15. Server-sent events 16. DOM e HTML5 17. Novos eventos DOM 18. Menus e toolbars 19. Tipos de links

Parte 4: A nova gerao de aplicaes web II20. Microdata 21. Histrico de sesso e API Storage 22. Aplicaes offline

23. Scroll in to view e hidden 24. Geolocation API 25. Undo

Sobre esse contedoNs fomos escolhidos pelo W3C do Brasil para ministrar um treinamento sobre HTML5 para os seus membros e alguns convidados. Para tanto, construmos uma apostila com todo o contedo abordado neste nosso curso. Essa apostila est sendo agora publicada sob Creative Commons aqui no Tableless. Esperamos que ajude a comunidade de desenvolvimento web brasileira. Essa apostila ficar em processo de constante atualizao j que muitos pontos do HTML5 no foram ainda definidos e tambm porque diversas outras caractersticas esto sendo planejadas e rascunhadas ainda. Se voc tiver qualquer sugesto, por favor, nos contacte.

VISO GERAL DO HTML5

De acordo com o W3C a Web baseada em 3 pilares:Um esquema de nomes para localizao de fontes de informao na Web, esse esquema chama-se URI. Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. Uma linguagem de Hypertexto, para a fcil navegao entre as fontes de informao: o HTML.

Vamos nos focar no terceiro pilar, o HTML.

HypertextoHTML uma abreviao de Hypertext Markup Language - Linguagem de Marcao de Hypertexto. Resumindo em uma frase: o HTML uma linguagem para publicao de contedo (texto, imagem, vdeo, udio e etc) na Web. O HTML baseado no conceito de Hipertexto. Hipertexto so conjuntos de elementos ou ns ligados por conexes. Estes elementos podem ser palavras, imagens, vdeos, udio, documentos etc. Estes elementos conectados formam uma grande rede de informao. Eles no esto conectados linearmente como se fossem textos de um livro, onde um assunto ligado ao outro seguidamente. A conexo feita em um hipertexto algo imprevisto que permite a comunicao de dados, organizando conhecimentos e guardando informaes relacionadas. Para distribuir informao de uma maneira global, necessrio haver uma linguagem que seja entendida universalmente por diversos meios de acesso. O HTML se prope a ser esta linguagem. Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic - browser desenvolvido por Marc Andreessen na dcada de 1990 - ganhou fora. A partir da, desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas convenes.

O comeo e a interoperabilidadeEntre 1993 e 1995, o HTML ganhou as verses HTML+, HTML2.0 e HTML3.0, onde foram propostas diversas mudanas para enriquecer as possibilidades da linguagem. Contudo, at aqui o HTML ainda no era tratado como um padro. Apenas em 1997, o grupo de trabalho do W3C responsvel por manter o padro do cdigo, trabalhou na verso 3.2 da linguagem, fazendo com que ela fosse tratada como prtica comum. Voc pode ver: http://www.w3.org/TR/html401/appendix/changes.html. Desde o comeo o HTML foi criado para ser uma linguagem independente de plataformas, browsers e outros meios de acesso. Interoperabilidade significa menos custo. Voc cria apenas um cdigo HTML e este cdigo pode ser lido por diversos meios, ao invs de verses diferentes para diversos dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprietria, com formatos incompatveis e limitada. Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a informao publicada por meio deste cdigo fosse acessvel por dispositivos e outros meios com caractersticas diferentes, no importando o tamanho da tela, resoluo, variao de cor. Dispositivos prprios para deficientes visuais e auditivos ou dispositivos mveis e portteis. O

HTML deve ser entendido universalmente, dando a possibilidade para a reutilizao dessa informao de acordo com as limitaes de cada meio de acesso.

WHAT Working GroupEnquanto o W3C focava suas atenes para a criao da segunda verso do XHTML, um grupo chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma verso do HTML que trazia mais flexibilidade para a produo de websites e sistemas baseados na web. O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como Mozilla, Apple e Opera em 2004. Eles no estavam felizes com o caminho que a Web tomava e nem com o rumo dado ao XHTML. Por isso, estas organizaes se juntaram para escrever o que seria chamado hoje de HTML5. Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi includo no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto. A participao no grupo livre e voc pode se inscrever na lista de email para contribuir. Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente pelo W3C - que at ento trabalhavam separadamente - que reconheceu todo o trabalho do grupo. Em Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o WHATWG na produo do HTML5 em detrimento do XHTML 2. Contudo o XHTML continuaria sendo mantido paralelamente de acordo comas mudanas causadas no HTML. O grupo que estava cuidando especificamente do XHTML 2 foi descontinuado em 2009.

O HTML5 e suas mudanasQuando o HTML4 foi lanado, o W3C alertou os desenvolvedores sobre algumas boas prticas que deveriam ser seguidas ao produzir cdigos client-side. Desde este tempo, assuntos como a separao da estrutura do cdigo com a formatao e princpios de acessibilidade foram trazidos para discusses e ateno dos fabricantes e desenvolvedores. Contudo, o HTML4 ainda no trazia diferencial real para a semntica do cdigo. o HTML4 tambm no facilitava a manipulao dos elementos via Javascript ou CSS. Se voc quisesse criar um sistema com a possibilidade de Dragn Drop de elementos, era necessrio criar um grande script, com bugs e que muitas vezes no funcionavam de acordo em todos os browsers.

O que o HTML5?O HTML5 a nova verso do HTML4. Enquanto o WHATWG define as regras de marcao que usaremos no HTML5 e no XHTML, eles tambm definem APIs que formaro a base da arquitetura web. Essas APIs so conhecidas como DOM Level 0. Um dos principais objetivos do HTML5 facilitar a manipulao do elemento possibilitando o desenvolvedor a modificar as caractersticas dos objetos de forma no intrusiva e de maneira que seja transparente para o usurio final. Ao contrrio das verses anteriores, o HTML5 fornece ferramentas para a CSS e o Javascript fazerem seu trabalho da melhor maneira possvel. O HTML5 permite por meio de suas APIs a manipulao das caractersticas destes elementos, de forma que o website ou a aplicao continue leve e funcional. O HTML5 tambm cria novas tags e modifica a funo de outras. As verses antigas do HTML no continham um padro universal para a criao de sees comuns e especficas como rodap, cabealho, sidebar, menus e etc. No havia um padro de nomenclatura de IDs, Classes ou tags. No havia um mtodo de capturar de maneira automtica as informaes localizadas nos rodaps dos websites. H outros elementos e atributos que sua funo e significado foram modificados e que agora podem ser reutilizados de forma mais eficaz. Por exemplo, elementos como B ou I que foram

descontinuados em verses anteriores do HTML agora assumem funes diferentes e entregam mais significado para os usurios. O HTML5 modifica a forma de como escrevemos cdigo e organizamos a informao na pgina. Seria mais semntica com menos cdigo. Seria mais interatividade sem a necessidade de instalao de plugins e perda de performance. a criao de cdigo interopervel, pronto para futuros dispositivos e que facilita a reutilizao da informao de diversas formas. O WHATWG tem mantido o foco para manter a retrocompatibilidade. Nenhum site dever ter de ser refeito totalmente para se adequar aos novos conceitos e regras. O HTML5 est sendo criado para que seja compatvel com os browsers recentes, possibilitando a utilizao das novas caractersticas imediatamente.

ANLISE DO SUPORTE ATUAL PELOS NAVEGADORES E ESTRATGIAS DE USO

O desenvolvimento modularAntigamente, para que uma nova verso do HTML ou do CSS fosse lanada, todas as ideias listadas na especificao deveriam ser testadas e desenvolvidas para ento serem publicadas para o uso dos browsers e os desenvolvedores. Esse mtodo foi mudado com o lanamento do HTML5 e o CSS3. A partir de agora, as duas tecnologias foram divididas em mdulos. Isso quer dizer que a comunidade de desenvolvedores e os fabricantes de browsers no precisam esperar que todo o padro seja escrito e publicado para utilizarem as novidades das linguagens. As propriedades do CSS3, por exemplo, foram divididas em pequenos grupos. H um grupo cuidando da propriedade Background, outro da propriedade Border, outro das propriedades de Texto e etc. Cada um destes grupos so independentes e podem lanar suas novidades a qualquer momento. Logo, o desenvolvimento para web ficou mais dinmico, com novidades mais constantes. O ponto negativo nesse formato, que problemas de compatibilidade podem ocorrer com mais frequencia. Por exemplo, um browser pode adotar bordas arredondadas e outro no. Ou um browser pode escolher suportar um API diferente do API que o concorrente implementou. Contudo, os browsers tem mostrado grande interesse em se manterem atualizados em relao aos seus concorrentes.

Motores de RenderizaoH uma grande diversidade de dispositivos que acessam a internet. Entre eles, h uma srie de tablets, smartphones, pc's e etc. Cada um destes meios de acesso utilizam um determinado browser para navegar na web. No h como os desenvolvedores manterem um bom nvel de compatibilidade com todos estes browsers levando em considerao a particularidade de cada um. Uma maneira mais segura de manter o cdigo compatvel, nivelar o desenvolvimento pelos motores de renderizao. Cada browser utiliza um motor de renderizao que responsvel pelo processamento do cdigo da pgina. Abaixo, segue uma lista dos principais browsers e seus motores:Motor Webkit Gecko Trident Presto BrowserSafari, Google Chrome Firefox , Mozilla, Camino Internet Ex plorer 4 ao 9 Opera 7 ao 1 0

interessante que voc faa cdigo compatvel com estes motores. Focando a compatibilidade nos motores de renderizao voc atingir uma amplitude maior de browsers. Por exemplo, se seu cdigo funcionar no Webkit, voc alcanar o Safari e o Chrome, dois dos principais browsers do mercado para desktops. Alm disso, voc tambm alcana aparelhos

como Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android.

Compatibilidade com HTML5Atualmente o Webkit o motor mais compatvel com os Padres do HTML5. Como a Apple tem interesse que seus dispositivos sejam ultracompatveis com os Padres, ela tem feito um belo trabalho de atualizao e avano da compatibilidade deste motor. Contudo o Firefox e o Opera j esto compatveis com grande parte da especificao do HTML5 e CSS3 e a cada upgrade eles trazem mais novidades e atualizao dos padres. O que pode te preocupar de verdade a retrocompatibilidade com verses antigas de browsers como o Internet Explorer. A Microsoft est fazendo um bom trabalho com o IE9, mas as verses 8 e 7 no tem quase nenhum suporte ao HTML5, o que um problema srio para aplicaes web baseadas em tecnologias mais recentes, mas que a base de usurios utiliza as verses antigas do Internet Explorer. Abaixo segue uma tabela simples de compatibilidade entre os browsers e alguns mdulos do HTML5:Safari 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

Tcnicas de detecoPode ser que o usurio no utilize um browser que suporta HTML5. Neste caso, voc pode redirecion-lo para uma verso do site mais simples, ou talvez apenas mostrar uma mensagem alertando o usurio sobre a importncia da atualizao do browser. Para isso temos algumas tcnicas de deteco para conferir se o browser suporta ou no HTML5. Quando o browser visita um website, ele constri uma coleo de objetos que representam elementos HTML na pgina. Cada elemento no cdigo representado no DOM como um objeto diferente. Todo objeto DOM tem propriedades em comum, mas alguns objetos tem caractersticas especficas. Usaremos estes objetos para fazermos a deteco. Abaixo segue 4 meios que voc poder utilizar para detectar o suporte do browser:1. Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou NAVIGATOR. Nesse caso, verificamos o suporte a geolocalizao. 2. Crie um elemento e verifique se uma determinada propriedade existe neste elemento. 3. Crie um elemento e verifique se um determinado mtodo existe neste elemento, ento chame o mtodo e verifique se o valor retorna. Por exemplo, teste quais formatos de vdeo so suportados. 4. Crie um elemento e defina um atributo com um determinado valor, ento verifique se o atributo suporta este valor. Por exemplo, crie um input e verifique quais types so suportados.

Utilizando o ModernizrO Modernizr (http://www.modernizr.com/) uma biblioteca de deteco que lhe permite

verificar o suporte da maioria das caractersticas do HTML5 e CSS3. O Modernizr roda automaticamente assim que voc o adiciona no head do documento. Assim, se voc quiser verificar se o browser suporta Geolocalizao, por exemplo, basta inserir este script na pgina. Se o browser suportar a feature testada, ele retornar true:

i (oenz.elcto){ f Mdrirgooain / Aet afaue / cia etr }es { le / Noaet afauetsaa / cia etr etd. }

ESTRUTURA BSICA, DOCTYPE E CHARSETS

A estrutura bsica do HTML5 continua sendo a mesma das verses anteriores da linguagem, h apenas uma excesso na escrita do Doctype. Segue abaixo como a estrutura bsica pode ser seguida:

Arquivo: exemplos/3/estruturabasica.html1 !OTP TL 2 hm ag"tb" 3 4 5 6 /il> tte l;ea hre=UF8&t 2 5 2 6 /oy 2 7 /tl

O DoctypeO Doctype deve ser a primeira linha de cdigo do documento antes da tag HTML. !OTP tl

O Doctype indica para o navegador e para outros meios qual a especificao de cdigo utilizar. Em verses anteriores, era necessrio referenciar o DTD diretamente no cdigo do Doctype. Com o HTML5, a referncia por qual DTD utilizar responsabilidade do Browser. O Doctype no uma tag do HTML, mas uma instruo para que o browser tenha informaes sobre qual verso de cdigo a marcao foi escrita.

O elemento HTMLO cdigo HTML uma srie de elementos em rvore onde alguns elementos so filhos de outros e assim por diante. O elemento principal dessa grande rvore sempre a tag HTML. hm ag"tb"

O atributo LANG necessrio para que os user-agents saibam qual a linguagem principal do documento. Lembre-se que o atributo LANG no restrito ao elemento HTML, ele pode ser utilizado em qualquer outro elemento para indicar o idioma do texto representado.

Para encontrar a listagem de cdigos das linguagens, acesse: http://www.w3.org/International/questions/qa-choosing-language-tags.

HEADA Tag HEAD onde fica toda a parte inteligente da pgina. No HEAD ficam os metadados. Metadados so informaes sobre a pgina e o contedo ali publicado.

Metatag CharsetNo nosso exemplo h uma metatag responsvel por chavear qual tabela de caractres a pgina est utilizando.

Nas verses anteriores ao HTML5, essa tag era escrita da forma abaixo: mt tpeuv"otn-ye otn=tx/tl hre=t-"

Essa forma antiga ser tambm suportada no HTML5. Contudo, melhor que voc utilize a nova forma. A Web acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros pases algo que vai contra a tradio e os ideais da internet. Por isso, foi criado uma tabela que suprisse essas necessidades, essa tabela se chama Unicode. A tabela Unicode suporta algo em torno de um milho de caracteres. Ao invs de cada regio ter sua tabela de caracteres, muito mais sensato haver uma tabela padro com o maior nmero de caracteres possvel. Atualmente a maioria dos sistemas e browsers utilizados por usurios suportam plenamente Unicode. Por isso, fazendo seu sistema Unicode voc garante que ele ser bem visualizado aqui, na China ou em qualquer outro lugar do mundo. O que o Unicode faz fornecer um nico nmero para cada caractere, no importa a plataforma, nem o programa, nem a lngua.

Tag LINKH dois tipos de links no HTML: a tag A, que so links que levam o usurio para outros documentos e a tag LINK, que so links para fontes externas que sero usadas no documento. No nosso exemplo h uma tag LINK que importa o CSS para nossa pgina:

O atributo r l " t l s e t indica que aquele link relativo a importao de um arquivo e=syehe" referente a folhas de estilo. H outros valores para o atributo REL, como por exemplo o ALTERNATE:

Neste caso, indicamos aos user-agents que o contedo do site poder ser encontrado em um caminho alternativo via Atom FEED. No HTML5 h outros links relativos que voc pode inserir como o r l " r h v s que e=acie" indica uma referncia a uma coleo de material histrico da pgina. Por exemplo, a pgina de histrico de um blog pode ser referenciada nesta tag.

MODELOS DE CONTEDO

H pequenas regras bsicas que ns j conhecemos e que esto no HTML desde o incio. Estas regras definem onde os elementos podem ou no estar. Se eles podem ser filhos ou pais de outros elementos e quais os seus comportamentos. Dentre todas as categorias de modelos de contedo, existem dois tipos de elementos: elementos de linha e de bloco. Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a s r n , , tog e , i gi p ta b , s a . m m, nu, br pn Os elementos de blocos so como caixas, que dividem o contedo nas sees do layout. Abaixo segue algumas premissas que voc precisa relembrar e conhecer:Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento ano pode conter o elemento l b l ae. Os elementos de linha nunca podem conter elementos de bloco. Elementos de bloco sempre podem conter elementos de linha. Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um pargrafo no pode conter um DIV. Mas o contrrio possvel.

Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo de contedo o elemento trabalha e como pode ser seu comportamento.

CategoriasCada elemento no HTML pode ou no fazer parte de um grupo de elementos com caractersticas similares. As categorias esto a seguir. Manteremos os nomes das categorias em ingls para que haja um melhor entendimento:Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content

Abaixo segue como as categorias esto relacionadas de acordo com o WHATWG:

ttePaeodr h l tl ttePaeodr TL a tteO tiuo atr tteCso aiao 1 9 2 0 /om 2 1 /oy 2 2 2 3 /tl 2 4 istutmaiiyvldCFivle?''P ivld!) .eCsoVldt(aiaP(.au)':CF nio'

DETALHES E CONTEDO EDITVEL.

Ainda mais formulriosVejamos mais duas coisas que voc certamente j fez mais de uma vez e foram simplificadas pelo HTML5.

Detalhes e sumrioVeja um exemplo de uso dos novos elementos details e summary: dtis oino smayCpad pors a=328 au=178> 75 tteHM5 rg n rp eosrto mt mn=ht:/w.3og19/ahMtM" 1 0 1 1 1 2 1 3 mrc 1 4 1 5 mns 1 6 1 7 PuMns 1 8 mqt 1 9 2 0 2 1 2 2 /sp 2 3 mns 2 4 2 5 Ivsbeie;/o 2 6 2 7 Ivsbeie;/o 2 8 2 9 3 0 /rw 3 1 3 2 3 3 Ivsbeie;/o 3 4 3 5 /rw 3 6 3 7 /rw 3 8 /ah 3 9 4 0 /oy 4 1 /tl

Veja como esse exemplo renderizado no navegador:

Mesmo que voc nunca tenha visto MathML, e este cdigo parea um pouco assustador, d uma olhada com calma no cdigo, comparando com a imagem do resultado, e voc vai perceber que muito simples. Talvez algo que possa deix-lo confuso a entidade & n i i l T m s , Ivsbeie; que aparece algumas vezes no cdigo. Ela est l para separar os fatores 4ac, por exemplo. Esses

valores so multiplicados, o que a frmula representa, mas no queremos colocar um operador de multiplicao entre eles, porque por conveno se simplesmente escrevemos 4ac qualquer leitor saber que isso uma multiplicao. Por que ento se preocupar em inserir & n i i l T m s ? Voc vai notar que se remover Ivsbeie; a entidade e a tag m correspondente o resultado visual ser o mesmo. Colocamos o & n i i l T m s porque MathML no s visual, semntica. Um outro agente de Ivsbeie; usurio pode ter recursos de importar essa frmula para uma ferramenta de clculo, por exemplo.

SVGAssim como MathML, SVG uma outra linguagem XML que pode ser incorporada com facilidade em HTML5. Voc pode ler mais sobre SVG em http://www.w3.org/Graphics/SVG/. SVG uma linguagem para marcao de grficos vetoriais. Vejamos um exemplo bem simples:

Arquivo: exemplos/13/svg.html1 !OTP tl 2 3 4 5V 6 /ed 7 8 9 sg it=40 egt"0" 1 0 1 1 !- m egl: 1 2 1 3 1 4 !- m ooo 1 5 1 9 2 0 !- m cl 2 1 2 2 2 2 4 2 5 /oy 2 6 /tl

E veja como isso renderizado no navegador:

possvel fazer muito mais com SVG. A maioria dos editores de grficos vetoriais hoje exporta e importa automaticamente SVG, permitindo a um designer construir um grfico em seu editor vetorial predileto e export-lo diretamente. Em seguida, um programador pode construir javascript que manipula esse SVG, usando os mtodos do DOM. Com isso voc pode ter

grficos dinmicos, com animao, escalveis e com excelente qualidade visual, programveis em Javascript, sem tecnologias proprietrias e plugins.

CANVAS API

O elemento canvasA Canvas API permite a voc desenhar na tela do navegador via Javascript. O nico elemento HTML existente para isso o elemento c n a , o resto todo feito via Javascript. Veja como avs inserir o elemento c n a numa pgina: avs/avs cna d"" it=30 egt"0"

Isso vai exibir um retngulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho, com Javascript:cnetdcmn.eEeetyd''.eCnet'd) otx=ouetgtlmnBI(x)gtotx(2'

Agora que temos um contexto, podemos desenhar nele. Vamos comear com um simples retngulo:cnetflRc(0 1,5,10 otx.ilet1, 0 0 5)

Existe um contexto 3D?Ainda no. Existem vrias implementaes de contexto 3D, e cada fabricante de navegador tem criado a sua, mas ainda no h um padro do W3C sobre esse assunto.

Simples, no? Que tal tentarmos algo um pouco mais complexo? D uma olhada no exemplo:

Arquivo: exemplos/14/canvas.html1 !OTP tl 2 3 4 5avsAI/il> tteCna P tteNtfeoe/t d tmrp"oe>oqi 1 4 oa d tmrp"oa"1.6 1 5 /l 1 6 /i 1 7 1 8 1 9 aol/d 2 0 oa d tmrp"oa"1.4 2 1 /l 2 2 /i 2 3 2 4 2 5 noi 2 6 oa d tmrp"oa"922/d 2 7 /l 2 8 /i 2 9 3 0 3 1 er 3 2 oa d tmrp"oa"1.3 3 3 /l 3 4 /i 3 5 /l 3 6 3 7 /oy 3 8 /tlAdicionamos atributos especias, itemscope e itemprop. Cada elemento itemscope define um item de dados. Cada itemprop define o nome de uma propriedade. O valor da propriedade o contedo da tag HTML. A Microdata API nos fornece acesso especial a esses dados. Veja como acessar esses dados:rslao=ouetgttm( eutdsdcmn.eIes) frvri0irslao.eghi+{ o(a =; tteMcoaa aol/d 2 0 oa d tmrp"oa"1.4 2 1 /l 2 2 /i 2 3 2 4 2 5 noi 2 6 oa d tmrp"oa"922/d 2 7 /l 2 8 /i 2 9 3 0 3 1 er 3 2 oa d tmrp"oa"1.3 3 3 /l 3 4 /i 3 5 /l 3 6 3 ars as edds/2 3 3 9 4 0 4 1 uc 4 2 oa d tmrp"oa"32/d 4 3 /l 4 4 /i 4 5 4 6 4 7 rsla/d 4 8 oa d tmrp"oa"28/d 4 9 /l 5 0 /i 5 1 5 2 5 3 ocl/d 5 4 oa d tmrp"oa"12/d 5 5 /l 5 6 /i 5 7 /l 5 8 5 9 /oy 6 0 /tlNote que pessoas e carros tem propriedades em comum, nome e total. Quando voc executar d c m n . e I e s )vai obter uma lista de todos os elementos com i e s o e ouetgttm( tmcp. Como obter uma lista apenas de pessoas ou de carros? Voc pode adicionar a cada item um atributo i e t p , que diz de que tipo de entidade so aqueles dados: tmyeArquivo: exemplos/20/microdata4.html1 !OTP tl 2 3 4 5irdt 4/il> tteMcoaa aol/d 2 0 oa d tmrp"oa"1.4 2 1 /l 2 2 /i 2 3 2 4 2 5 noi 2 6 oa d tmrp"oa"922/d 2 7 /l 2 8 /i 2 9 3 0 3 1 er 3 2 oa d tmrp"oa"1.3 3 3 /l 3 4 /i 3 5 /l 3 6 3 ars as edds/2 3 3 9 4 0 d tmcp tmye"ar" 4 1 uc 4 2 oa d tmrp"oa"32/d 4 3 /l 4 4 /i 4 5 4 6 d tmcp tmye"ar" 4 7 rsla/d 4 8 oa d tmrp"oa"28/d 4 9 /l 5 0 /i 5 1 5 2 d tmcp tmye"ar" 5 3 ocl/d 5 4 oa d tmrp"oa"12/d 5 5 /l 5 6 /i 5 7 /l 5 8 5 9 /oy 6 0 /tlAgora voc pode executar: d c m n . e I e s ' a r ' para obter s os carros, por ouetgttm(cro) exemplo.Falando um idioma comumVoc deve ter notado que pode definir seus prprios padres de metadados com microdata. Recomendo que, antes de criar seu prprio formato, verifique se o mesmo problema no j foi resolvido por algum. O site www.data-vocabulary.org contm alguns desses formatos padronizados. Por exemplo, para descrever os dados de sua empresa ou organizao, no invente seu prprio formato, use o formato definido em http://www.datavocabulary.org/Organization. O valor de i e t p deve ser a prpria URL que documenta o tmye formato. Veja como fica:Arquivo: exemplos/20/visie.html1 !OTP tl 2 3 4 5ii PdsWb/il> tteVse are elmd o baas 5 lnlo alsa/> 1 3 p 1 4 al 1 5 P/pn 1 6 rsl/pn 1 7 1 8 < iepo=psa-oe>47-3 1 9 2 0 5.137-37/i> dv tmrp"e"+51.4734