Apostila HTML5 - W3C

  • Published on
    23-Jun-2015

  • View
    1.391

  • Download
    0

Transcript

1. Viso geral do HTML5De 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.2. Anlise do suporte atual pelos navegadores e estratgias de usoO 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 Browser Webkit Safari, Google Chrome Gecko Firefox, Mozilla, Camino Trident Internet Explorer 4 ao 9 Presto Opera 7 ao 10 interessante que voc faa cdigo compatvel com estes motores. Focando a compatibilidade nos motores de renderizao voc atingir uma amplitude maior de browsers. Por exemplo, se seu cdigo funcionar no Webkit, voc alcanar o Safari e o Chrome, dois dos principais browsers do mercado para desktops. Alm disso, voc tambmalcana 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 Chrome Opera Firefox IE 8 IE 9 Local Storage s s s s s s Histrico de Sesso s s s s s s Aplicaes Offline s s n s n n Novos tipos de campos s s s n n n Form: Autofocus s s s n n n Form: Autocomplete n n s n n n Form: Required s s s n n n Video, Audio e Canvas Text s s s s n sTcnicas de detectaoPode 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 detectao 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 detectao. Abaixo segue 4 meios que voc poder utilizar para detectar o suporte do browser: 1. Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou NAVIGATOR. Nesse caso, verificamos o suporte a geolocalizao.2. Crie um elemento e verifique se uma determinada propriedade existe neste elemento. 3. Crie um elemento e verifique se um determinado mtodo existe neste elemento, ento 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 Modernizr O Modernizr (http://www.modernizr.com/) uma biblioteca de detectao 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:if (Modernizr.geolocation) { // Aceita a feature } else { // No aceita a feature testada. }3. Estrutura bsica, DOCTYPE e charsetsA 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 2 3 4 5 6 7 8 9 10 11 O DoctypeO Doctype deve ser a primeira linha de cdigo do documento antes da tag HTML.O Doctype indica para o navegador e para outros meios qual a especificao de cdigo utilizar. Em verses anteriores, era necessrio referenciar o DTD diretamente no cdigo do Doctype. Com o HTML5, a referncia por qual DTD utilizar responsabilidade do Browser. O Doctype no uma tag do HTML, mas uma instruo para que o browser tenha informaes sobre qual verso de cdigo a marcao foi escrita.O elemento HTMLO cdigo HTML uma srie de elementos em rvore onde alguns elementos so filhos de outros e assim por diante. O elemento principal dessa grande rvore sempre a tag HTML.O atributo LANG necessrio para que os user-agents saibam qual a linguagem principal do documento. Lembre-se que o atributo LANG no restrito ao elemento HTML, ele pode ser utilizado em 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 Charset No nosso exemplo h uma metatag responsvel por chavear qual tabela de caractres a pgina est utilizando.Nas verses anteriores ao HTML5, essa tag era escrita da forma abaixo:Essa forma antiga ser tambm suportada no HTML5. Contudo, melhor que voc utilize a nova forma. A Web acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso e pessoas de outros pases algo que vai contra a tradio e os ideais da internet. Por isso, foi 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 LINK H 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 rel="stylesheet" indica que aquele link relativo a importao de um arquivo referente a folhas de estilo. H outros valores para o atributo REL, como por exemplo o ALTERNATE:Neste caso, indicamos aos user-agents que o contedo do site poder ser encontrado em um caminho alternativo via Atom FEED.No HTML5 h outros links relativos que voc pode inserir como o rel="archives" que indica uma referncia a uma coleo de material histrico da pgina. Por exemplo, a pgina de histrico de um blog pode ser referenciada nesta tag.4. Modelos de contedoH pequenas regras bsicas que ns j conhecemos e que esto no HTML desde o incio. Estas regras definem onde os elementos podem ou no estar. Se eles podem ser filhos ou pais de outros elementos e quais os seus comportamentos. Dentre todas as categorias de modelos de contedo, existem dois tipos de elementos: elementos de linha e de bloco. Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos: a, strong, em, img, input, abbr, span. Os elementos de blocos so como caixas, que dividem o contedo nas sees do layout. Abaixo segue algumas premissas que voc precisa relembrar e conhecer: Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a no pode conter o elemento label. Os elementos de linha nunca podem conter elementos de bloco. Elementos de bloco sempre podem conter elementos de linha. Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um pargrafo no pode conter um DIV. Mas o contrrio possvel. Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo de contedo o elemento trabalha e como pode ser seu comportamento.CategoriasCada elemento no HTML pode ou no fazer parte de um grupo de elementos com caractersticas similares. As categorias esto a seguir. Manteremos os nomes das categorias em ingls para que haja um melhor entendimento: Metadata content Flow content Sectioning content Heading content Phrasing content Embedded content Interactive content Abaixo segue como as categorias esto relacionadas de acordo com o WHATWG:Metadata contentOs elementos que compe a categoria Metadata so: base command link meta noscriptscript style title Este contedo vem antes da apresentao, formando uma relao com o documento e seu contedo com outros documentos que distribuem informao por outros meios.Flow contentA maioria dos elementos utilizados no body e aplicaes so categorizados como Flow Content. So eles: a abbr address area (se for um decendente de um elemento de mapa) article aside audio b bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr iiframe img input ins kbd keygen label link (Se o atributo itemprop for utilizado) map mark math menu meta (Se o atributo itemprop for utilizado) meter nav noscript object ol output p pre progress q ruby samp script section select small span strong style (Se o atributo scoped for utilizado) sub sup svg table textarea time ul var video wbr Text Por via de regra, elementos que seu modelo de contedo permitem inserir qualquer elemento que se encaixa no Flow Content, devem ter pelo menos um descendente de texto ou um elemento descendente que faa parte da categoria embedded.Sectioning contentEstes elementos definem um grupo de cabealhos e rodaps. article aside nav section Basicamente so elementos que juntam grupos de textos no documento.Heading contentOs elementos da categoria Heading definem uma seo de cabealhos, que podem estar contidos em um elemento na categoria Sectioning. h1 h2 h3 h4 h5 h6 hgroupPhrasing contentFazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de pargrafo. a abbr area (se ele for descendente de um elemento de mapa) audio b bdo br button canvas cite code command datalist del (se ele contiver um elemento da categoria de Phrasing) dfn em embed i iframe img input ins (se ele contiver um elemento da categoria de Phrasing) kbdkeygen label link (se o atributo itemprop for utilizado) map (se apenas ele contiver um elemento da categoria de Phrasing) mark math meta (se o atributo itemprop for utilizado) meter noscript object output progress q ruby samp script select small span strong sub sup svg textarea time var video wbr TextEmbedded contentNa categoria Embedded, h elementos que importam outra fonte de informao para o documento. audio canvas embed iframe img math object svg videoInteractive contentInteractive Content so elementos que fazem parte da interao de usurio. aaudio (se o atributo control for utilizado) button details embed iframe img (se o atributo usemap for utilizado) input (se o atributo type no tiver o valor hidden) keygen label menu (se o atributo type tiver o valor toolbar) object (se o atributo usemap for utilizado) select textarea video (se o atributo control for utilizado) Alguns elementos no HTML podem ser ativados por um comportamento. Isso significa que o usurio pode ativ-lo de alguma forma. O incio da sequencia de eventos depende do mecanismo de ativao e normalmente culminam em um evento de click seguido pelo evento DOMActivate. O user-agent permite que o usurio ative manualmente o elemento que tem este comportamento utilizando um teclado, mouse, comando de voz etc.5. Novos elementos e atributosA funo do HTML indicar que tipo de informao a pgina est exibindo. Quando lemos um livro, conseguimos entender e diferenciar um ttulo de um pargrafo. Basta percebermos a quantidade de letra, tamanho da fonte, cor etc. No cdigo isso diferente. Robs de busca e outros user-agents no conseguem diferenciar tais detalhes. Por isso, cabe ao desenvolvedor marcar a informao para que elas possam ser diferenciadas por diversos dispositivos. Com as verses anteriores do HTML ns conseguimos marcar diversos elementos do layout, estruturando a pgina de forma que as informaes ficassem em suas reas especficas. Conseguimos diferenciar por exemplo, um pargrafo de um ttulo. Mas no conseguamos diferenciar o rodap do cabealho. Essa diferenciao era apenas percebida visualmente pelo layout pronto ou pela posio dos elementos na estrutura do HTML. Entretanto, no havia maneira de detectar automaticamente estes elementos j que as tags utilizada para ambos poderiam ser iguais e no havia padro para nomenclatura de IDs e Classes. O HTML5 trouxe uma srie de elementos que nos ajudam a definir setores principais no documento HTML. Com a ajuda destes elementos, podemos por exemplo diferenciar diretamente pelo cdigo HTML5 reas importantes do site como sidebar, rodap e cabealho. Conseguimos seccionar a rea de contedo indicando onde exatamente o texto do artigo. Estas mudanas simplificam o trabalho de sistemas como os dos buscadores. Com o HTML5 os buscadores conseguem vasculhar o cdigo de maneira mais eficaz. Procurando e guardando informaes mais exatas e levando menos tempo para estocar essa informao. Abaixo segue uma lista dos novos elementos e atributos includos no HTML5: A tag section define uma nova seo genrica no documento. Por exemplo, a section 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, 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 article 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 aside 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. hgroup Este elemento consiste em um grupo de ttulos. Ele serve para agruparelementos de ttulo de H1 at H6 quando eles tem mltiplos nveis como ttulo com subttulos e etc. O elemento header representa um grupo de introuo ou elementos de header 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 footer 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 time data precisa no calendrio gregoriano. Este atributos foram descontinuados porque modificam a formatao do elemento e suas funes so melhores controladas pelo CSS:align como atributo da tag caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead e tr. alink, link, text e vlink como atributos da tag body. background como atributo da tag body. bgcolor como atributo da tag table, tr, td, th e body. border como atributo da tag table e object. cellpadding e cellspacing como atributos da tag table. char e charoff como atributos da tag col, colgroup, tbody, td, tfoot, th, thead e tr. clear como atributo da tag br. compact como atributo da tag dl, menu, ol e ul. frame como atributo da tag table. frameborder como atributo da tag iframe. height como atributo da tag td e th. hspace e vspace como atributos da tag img e object. marginheight e marginwidth como atributos da tag iframe. noshade como atributo da tag hr. nowrap como atributo da tag td e th. rules como atributo da tag table. scrolling como atributo da tag iframe. size como atributo da tag hr6. Elementos modificados e ausentesExistiam no HTML alguns elementos que traziam apenas caractersticas visuais e no semnticas para o contedo da pgina. Esses elementos anteriormente foram descontinuados porque atrapalhavam o cdigo e tambm porque sua funo era facilmente suprida pelo CSS. Contudo, alguns destes elementos voltaram tona com novos significados semnticos. Outros elementos que no descontinuados, mas seus significados foram modificados.Elementos modificadosO elemento B passa a ter o mesmo nvel semntico que um SPAN, mas ainda mantm o estilo de negrito no texto. Contudo, ele no d nenhuma importncia para o text marcado com ele. O elemento I tambm passa a ser um SPAN. O texto continua sendo itlico e para usurios de leitores de tela, a voz utilizada modificada para indicar nfase. Isso pode ser til para marcar frases em outros idiomas, termos tcnicos e etc. O interessante que nestes dois casos houve apenas uma mudana semntica. Provavelmente voc no precisar modificar cdigos onde estes dois elementos so utilizados. O elemento a sem o atributo href agora representa um placeholder no exato lugar que este link se encontra. O elemento address agora tratado como uma seo no documento. O elemento hr agora tem o mesmo nvel que um pargrafo, mas utilizado para quebrar linhas e fazer separaes. O elemento strong ganhou mais importncia. O elemento head no aceita mais elementos child como seu filho.Elementos ou atributos descontinuadosOs elementos abaixo foram descontinuados por que seus efeitos so apenas visuais: basefont big center font s strike tt u Os elementos abaixo foram descontinuados por que ferem os princpios de acessibilide e usabilidade: frame frameset noframesOs elementos abaixo no foram includos na especificao porque no tiveram uso entre os desenvolvedores ou porque sua funo foi substituda por outro elemento:acronymno foi includo porque criou um bocado de confuso entre os desenvolvedores que preferiram utilizar a tag abbr. applet ficou obsoleto em favor da tag object. isindex foi substitudo pelo uso de form controls. dir ficou obsoleto em favor da tag ul.7. Novos tipos de camposNovos valores para o atributo typeOpera 10Enquanto escrevo, o Opera 10 o nico navegador Desktop que fez um bom trabalho implementando os novos recursos de formulrio do HTML5. Se voc instal-lo, poder testar quase tudo deste e dos prximos dois captulos. O elemento input aceita os seguintes novos valores para o atributo type:telTelefone. No h mscara de formatao ou validao, propositalmente, visto no haver no mundo um padro bem definido para nmeros de telefones. claro que voc pode usar a nova API de validao de formulrios (descrita no captulo 8) para isso. Os agentes de usurio podem permitir a integrao com sua agenda de contatos, o que particularmente til em telefones celulares.searchUm campo de busca. A aparncia e comportamento do campo pode mudar ligeiramente dependendo do agente de usurio, para parecer com os demais campos de busca do sistema.emailE-mail, com formatao e validao. O agente de usurio pode inclusive promover a integrao com sua agenda de contatos.urlUm endereo web, tambm com formatao e validao.Datas e horasdatetime-local O tipo de campo datetime-local trata automaticamente as diferenas de fusos horrios, submetendo ao servidor e recebendo dele valores GMT. Com isso voc pode, com facilidade, construir um sistema que ser usado em diferentes fusos horrios e permitir que cada usurio lide com os valores em seu prprio fuso horrio. O campo de formulrio pode conter qualquer um desses valores no atributo type:datetime datemonth week time datetime-localTodos devem ser validados e formatados pelo agente de usurio, que pode inclusive mostrar um calendrio, um seletor de horrio ou outro auxlio ao preenchimento que estiver disponvel no sistema do usurio. O atributo adicional step define, para os validadores e auxlios ao preenchimento, a diferena mnima entre dois horrios. O valor de step em segundos, e o valor padro 60. Assim, se voc usar step="300" o usurio poder fornecer como horrios 7:00, 7:05 e 7:10, mas no 7:02 ou 7:08.numberVeja um exemplo do tipo number com seus atributos opcionais: Arquivo: exemplos/7/number.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Number type O Opera 10 nos d uma excelente visualizao do que um agente de usurio pode fazer nesse caso:rangeVamos modificar, no exemplo acima, apenas o valor de type, mudando de "number" para "range": Arquivo: exemplos/7/range.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Range type Novamente, Opera 10:colorO campo com type="color" um seletor de cor. O agente de usurio pode mostrar um controle de seleo de cor ou outro auxlio que estiver disponvel. O valor ser uma cor no formato #ff6600.8. Tipos de dados e validadoresFormulrios vitaminadosConforme voc deve ter percebido no ltimo captulo, o HTML5 avanou bastante nos recursos de formulrios, facilitando muito a vida de quem precisa desenvolver aplicaes web baseadas em formulrios. Neste captulo vamos avanar um pouco mais nesse assunto e, voc vai ver, a coisa vai ficar ainda melhor.autofocusAo incluir em um campo de formulrio o atributo autofocus, assim:O foco ser colocado neste campo automaticamente ao carregar a pgina. Diferente das solues em Javascript, o foco estar no campo to logo ele seja criado, e no apenas ao final do carregamento da pgina. Isso evita o problema, muito comum quando voc muda o foco com Javascript, de o usurio j estar em outro campo, digitando, quando o foco mudado.Placeholder textVoc j deve ter visto um "placeholder". Tradicionalmente, vnhamos fazendo isso: Arquivo: exemplos/8/placeholderold.html1 2 3 4 5 6 7 8 9 10 11 12 13 Placeholder, the old style HTML5 nos permite fazer isso de maneira muito mais elegante: Arquivo: exemplos/8/placeholder.html1 2 3 4 5 6 Placeholder, HTML5 way 7 8 9 10 11 12requiredPara tornar um campo de formulrio obrigatrio (seu valor precisa ser preenchido) basta, em HTML5, incluir o atributo required:maxlengthVoc j conhecia o atributo maxlength, que limita a quantidade de caracteres em um campo de formulrio. Uma grande lacuna dos formulrio HTML foi corrigida. Em HTML5, o elemento textarea tambm pode ter maxlength!Validao de formulriosUma das tarefas mais enfadonhas de se fazer em Javascript validar formulrios. Infelizmente, tambm uma das mais comuns. HTML5 facilita muito nossa vida ao validar formulrios, tornando automtica boa parte do processo. Em muitos casos, todo ele. Voc j viu que pode tornar seus campos "espertos" com os novos valores para o atributo type, que j incluem validao para datas, emails, URLs e nmeros. Vamos um pouco alm.patternO atributo pattern nos permite definir expresses regulares de validao, sem Javascript. Veja um exemplo de como validar CEP: Arquivo: exemplos/8/pattern.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 O atributo pattern CEP: 19 20novalidate e formnovalidatePodem haver situaes em que voc precisa que um formulrio no seja validado. Nestes casos, basta incluir no elemento form o atributo novalidate. Outra situao comum querer que o formulrio no seja validade dependendo da ao de submit. Nesse caso, voc pode usar no boto de submit o atributo formnovalidate. Veja um exemplo: Arquivo: exemplos/8/formnovalidate.html1 2 3 4 5 Salvando rascunho 6 7 label{display:block;} 8 9 10 11 12 13 14 nome: 15 email: 16 mensagem: 17 18 19 20 21 22 23 24Custom validators claro que as validaes padro, embora atendam a maioria dos casos, no so suficientes para todas as situaes. Muitas vezes voc vai querer escrever sua prpria funo de validao Javascript. H alguns detalhes na especificao do HTML5 que vo ajud-lo com isso:1. O novo evento oninput disparado quando algo modificado no valor de um campo de formulrio. Diferente de onchange, que disparado ao final da edio, oninput disparado ao editar. diferente tambm de onkeyup e onkeypress, porque vai capturar qualquer modificao no valor do campo, feita com mouse, teclado ou outra interface qualquer.2. O mtodo setCustomValidity pode ser invocado por voc. Ele recebe uma string. Se a string for vazia, o campo ser marcado como vlido. Caso contrrio, ser marcado como invlido.Com isso, voc pode inserir suas validaes no campo de formulrio e deixar o navegador fazer o resto. No mais preciso capturar o evento submit e trat-lo. Veja, por exemplo, este formulrio com validao de CPF: Arquivo: exemplos/8/customvalidator.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Custom validator function vCPF(i){ i.setCustomValidity(validaCPF(i.value)?'':'CPF invlido!') } CPF: 9. 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: Copiando 37,5% Tamanho total: 39.248KB Transferido: 14.718 Taxa de transferncia: 127KB/s Nome do arquivo: HTML5.mp4 Veja como um agente de usurio poderia renderizar isso:E ao clicar:Contedo editvelPara tornar um elemento do HTML editvel, basta incluir nele o atributo contenteditable, assim:Edite-me... Voc pode ler e manipular os elementos editveis normalmente usando os mtodos do DOM. Isso permite, com facilidade, construir uma rea de edio de HTML.10. Drag-n-drop e correo ortogrficaDrag and DropA API de Drag and Drop relativamente simples. Basicamente, inserir o atributo draggable="true" num elemento o torna arrastvel. E h uma srie de eventos que voc pode tratar. Os eventos do objeto sendo arrastado so: dragstart O objeto comeou a ser arrastado. O evento que a funo recebe tem um atributo target, que contm o objeto sendo arrastado. drag O objeto est sendo arrastado dragend A ao de arrastar terminou O objeto sobre o qual outro arrastado sofre os seguintes eventos: dragenter O objeto sendo arrastado entrou no objeto target dragleave O objeto sendo arrastado deixou o objeto target dragover O objeto sendo arrastado se move sobre o objeto target drop O objeto sendo arrastado foi solto sobre o objeto targetDetalhes importantes:A ao padro do evento dragover cancelar a ao de dragging atual. Assim, nos objetos que devem receber drop, preciso setar uma ao de dragover com, no mnimo, return false. Selees de texto so automaticamente arrastveis, no precisam do atributo draggable. E se voc quiser criar uma rea para onde selees de texto possam ser arrastadas, basta tratar esses mesmos eventos. Por fim, todas funes de tratamento de evento de drag recebem um objeto de evento que contm uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operao de drag. Arquivo: exemplos/10/drag.html1 2 3 4 5 HTML5 Drag and drop demonstration 6 7 #boxA, #boxB { 8 float:left; width:100px; height:200px; padding:10px; margin:10px; font-size:70%; 9 } 10 #boxA { background-color: blue; } 11 #boxB { background-color: green; } 12 13 #drag, #drag2 { 14 width:50px; padding:5px; margin:5px; border:3px black solid; line-height:50px; 15 } 16 #drag { background-color: red;} 17 #drag2 { background-color: orange;} 18 19 20 21 // Quando o usurio inicia um drag, guardamos no dataset do evento 22 // o id do objeto sendo arrastado 23 function dragStart(ev) { 24 ev.dataTransfer.setData("ID", ev.target.getAttribute('id')); 25 } 26 27 // Quando o usurio arrasta sobre um dos painis, retornamos 28 // false para que o evento no se propague para o navegador, o 29 // que faria com que o contedo fosse selecionado. 30 function dragOver(ev) { return false; } 31 32 // Quando soltamos o elemento sobre um painel, movemos o 33 // elemento, lendo seu id do dataset do evento 34 function dragDrop(ev) { 35 var idelt = ev.dataTransfer.getData("ID"); 36 ev.target.appendChild(document.getElementById(idelt)); 37 } 38 39 40 41 42 43 46 47 drag me 49 50 drag me 52 53 54 55 58 59 60 61 ExemploSegue um exemplo de drag-and-drop, baseado no excelente exemplo de Laurent Jouanneau (http://ljouanneau.com/lab/html5/demodragdrop.html).Reviso ortogrfica e gramaticalOs agentes de usurio podem oferecer recursos de reviso ortogrfica e gramatical, dependendo do que houver disponvel em cada plataforma. Os desenvolvedores podem controlar o comportamento dessa ferramenta atravs do atributo spellcheck. Inserir spellcheck="true" num elemento faz com que a reviso esteja habilitada para ele. Voc tambm pode desabilitar a reviso para determinado elemento, inserindo spellcheck="false".11. Elementos audio e video, e codecsudioPara inserir udio em uma pgina web, basta usar o elemento audio:O valor de controls define se um controle de udio, com botes de play, pause, volume, barra de progresso, contador de tempo, etc. ser exibido na tela. Se for setado como "false", ser preciso controlar o player via javascript, com mtodos como play() e pause(). O valor de autoplay define se o udio vai comear a tocar assim que a pgina carregar.Origens alternativas de udioTodo agente de usurio deveria suportar o codec livre OggVorbis, mas, infelizmente, pode acontecer de seu arquivo oga no tocar no computador ou celular de algum. Quem sabe do seu chefe ou seu cliente. Ento preciso saber como oferecer um formato alternativo de udio. Fazemos assim: Claro, o agente de usurio pode ainda no saber tocar nenhum desses formatos, ou sequer ter suporte a udio. Para esses casos, oferea um contedo alternativo: Faa o download da msica. VdeoO uso de vdeo muito semelhante ao de udio:E com vrios elementos source: Faa o download do vdeo. CodecsO que funciona na web Mark Pilgrim est escrevendo um livro muito interessante (em ingls) chamado "Dive Into HTML 5". O captulo sobre Vdeo a referncia de que voc precisa para publicar vdeo na web com HTML5. muito importante que voc inclua, nos seus elementos source de udio e vdeo, informao a respeito do container e codecs utilizados. Isso vai evitar que o navegador tenha que baixar, pelo menos parcialmente, o arquivo de mdia para, depois, descobrir que no consegue toc-lo. importante lembrar que a extenso do arquivo no informao relevante para isso, pelo contrrio, no significa nada. Uma URL pode no ter extenso de arquivo e pode levar a um redirecionamento. Para indicar ao navegador o container e codecs de determinado arquivo, usa-se o atributo type, no formato:type='MIME-type do container; codecs="codec de vdeo, codec de udio"'Por exemplo, um vdeo em Ogg, usando os codecs Theora e Vorbis, ter seu source assim:Com MPEG-4 a coisa um pouco mais complicada, por que preciso indicar ao navegador tambm o profile do codec de vdeo utilizado. Veja um exemplo:12. Elemento device e Stream APIO elemento deviceWorking DraftO contedo desse captulo est baseado numa especificao que ainda est em status de "Working Draft". Ou seja, as coisas ainda podem mudar bastante. Fique de olho no que vai acontecer com o elemento device e a Stream API, acessando (em ingls): http://dev.w3.org/html5/html-device/ Voc pode inserir em seu HTML um elemento de acesso webcam do usurio, assim:Isso vai exibir uma interface solicitando ao usurio acesso a sua webcam. Se ele tiver mais de uma, tambm ser permitido que ele escolha que webcam usar. O atributo media tambm pode conter o valor "fs", que vai abrir uma caixa de seleo no sistema de arquivos, permitindo ao usurio escolher um arquivo para fazer stream. O passo seguinte conectar o stream desse seu elemento device a alguma coisa. Veja, por exemplo, como conect-lo a um elemento video na prpria pgina, fazendo com que o usurio possa ver a imagem de sua prpria webcam: Arquivo: exemplos/12/videochat.html1 2 3 4 5 Videochat, step 1 6 7 8 function update(stream) { 9 document.getElementsByTagName('video')[0].src = stream.url; 10 } 11 12 13 14 15 16 17 To start chatting, select a video camera: 18 19 20 21 22 23StreamsVoc deve ter notado, no script acima, que a funo de update recebe um parmetro stream. Trata-se de um objeto da classe Stream, que possui uma propriedade url, que j usamos acima, e um mtodo record. O mtodo record inicia a gravao do stream e retorna um objeto StreamRecorder. Esse ltimo possui um mtodo stop, que retorna o arquivo que foi gravado.Peer-to-peerCuidado! O W3C ainda est trabalhando nessa especificao, e tudo aqui pode mudar. Por isso, no se preocupe em entender as mincias. Saiba apenas que HTML5 prev que os agentes de usurio tenham uma interface de comuicao P2P, que permite a troca de texto, imagem, vdeo e arquivos. Por enquanto, a especificao deste item est sendo escrita junto da do elemento device, mas isso deve ganhar uma pgina prpria em breve. Fique de olho.13. MathML e SVGMathMLO HTML5 incorpora o padro MathML. Trata-se de uma linguagem de marcao, baseada em XML, para representao de frmulas matemticas. Voc pode ler mais sobre MathML em http://www.w3.org/Math/. Para incorporar cdigo MathML em seu documento HTML5, no preciso fazer declaraes especiais. Basta escrever normalmente o cdigo, iniciando com um elemento math. Veja este exemplo: Arquivo: exemplos/13/mathml.html1 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 MathML x = b ± b 2 4 ⁢ a ⁢ c 2 ⁢ a Veja como esse exemplo renderizado no navegador:Mesmo que voc nunca tenha visto MathML, e este cdigo parea um pouco assustador, d uma olhada com calma no cdigo, comparando com a imagem do resultado, e voc vai perceber que muito simples. Talvez algo que possa deix-lo confuso a entidade ⁢, que aparece algumas vezes no cdigo. Ela est l para separar os fatores 4ac, por exemplo. Esses valores so multiplicados, o que a frmula representa, mas no queremos colocar um operador de multiplicao entre eles, porque por conveno se simplesmente escrevemos 4ac qualquer leitor saber que isso uma multiplicao. Por que ento se preocupar em inserir ⁢? Voc vai notar que se remover a entidade e a tag mo correspondente o resultado visual ser o mesmo. Colocamos ⁢ porque MathML no s visual, semntica. Um outro agente de usurio pode ter recursos de 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 2 3 4 5 SVG 6 7 8 9 10 11 12 13 14 15 19 20 21 22 23 24 25 26 E veja como isso renderizado no navegador: possvel fazer muito mais com SVG. A maioria dos editores de grficos vetoriais hoje exporta e importa automaticamente SVG, permitindo a um designer construir um grfico em seu editor 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.14. Canvas APIO elemento canvasA Canvas API permite a voc desenhar na tela do navegador via Javascript. O nico elemento HTML existente para isso o elemento canvas, o resto todo feito via Javascript. Veja como inserir o elemento canvas numa pgina:Isso vai exibir um retngulo vazio. Para desenhar nele, primeiro obtemos o contexto de desenho, com Javascript:context=document.getElementById('x').getContext('2d')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. Agora que temos um contexto, podemos desenhar nele. Vamos comear com um simples retngulo:context.fillRect(10, 10, 50, 150)Simples, no? Que tal tentarmos algo um pouco mais complexo? D uma olhada no exemplo: Arquivo: exemplos/14/canvas.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Canvas API desenhar function desenhar(){ // Obtemos o contexto context=document.getElementById('x').getContext('2d') //Iniciamos um novo desenho context.beginPath() //Movemos a caneta para o inicio do desenho context.moveTo(150,50)23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45//Desenhamos as linhas context.lineTo(220,250) context.lineTo(50,125) context.lineTo(250,125) context.lineTo(80,250) context.lineTo(150,50) //O desenho no de verdade enquanto voc //no mandar o contexto pint-lo. //Vamos pintar o interior de amarelo context.fillStyle='#ff0' context.fill() //Vamos pintar as linhas de vermelho. context.strokeStyle='#f00' context.stroke() } E veja o que acontece quando se clica no boto:H muito mais para voc estudar se quiser se aprofundar na Canvas API. Apenas para que voc tenha uma idia, possvel desenhar texto, sombras, gradientes, incluir imagens no canvas, manipular os pixels, rotacionar e transformar os objetos.Canvas e SVGUma dvida muito comum quando usar Canvas, quando usar SVG. Para saber escolher, preciso entender as diferenas entre um e outro. SVG vetorial, e baseado em XML, logo, acessvel via DOM. Canvas desenhado pixel a pixel, via Javascript.Assim, as vantagens do SVG so:1. O contedo acessvel a leitores de tela 2. O grfico escalvel, no perde resoluo ou serrilha ao redimensionar 3. O contedo acessvel via DOME as vantagens do Canvas:1. A performance muito superior ao SVG na maioria dos casos 2. fcil desenhar via Javascript. Em SVG, preciso fazer seu script escrever XML para voc. Com Canvas voc s manda desenhar, e pronto.15. Server-Sent EventsEventSourceA Server-Sent Events API uma maneira de inverter o fluxo das aplicaes Ajax, fazendo com que o servidor possa disparar o envio de dados ao agente de usurio. Para isso, cria-se, no agente de usurio, um objeto EventSource:es=new EventSource('comm.php')Isso vai abrir uma conexo HTTP para "comm.php" e mant-la escutando. Cada vez que o servidor enviar eventos para esse cliente, ser disparado o evneto message do objeto EventSource. Veja um exemplo:es.onmessage=function(e){ alert("Chegaram dados: "+e.data) }Isso pode ser usado, por exemplo, para implementar uma interface de chat ou um monitor de status de alguma operao demorada ocorrendo no servidor.O protocolo de comunicaoEm nosso exemplo acima, a pgina comm.php envia eventos para o agente de usurio. Voc no precisa se preocupar em saber como isso funciona do lado do cliente, uma vez que o agente de usurio faz todo o trabalho. Mas importante que saiba como isso deve funcionar do lado do servidor. A URL de comunicao deve devolver ao cliente um header Content-type: text/event-stream. Em seguida, envia as mensagens, que so blocos de texto separados um do outro por uma linha em branco:data: mensagem 1 data: a mensagem 2 tem data: mais de uma linha data: mensagem 3O prefixo data: indica que o que segue so os dados da mensagem. Voc tambm pode usar o prefixo id:data: mensagem 1 id: 1 data: a mensagem 2 tem data: mais de uma linha id: 2 data: mensagem 3 id: 3Se voc enviar prefixos id em suas mensagens e o agente de usurio perder a conexo, ao tentar reconectar ele vai enviar o valor do ltimo id no header HTTP Last-Event-ID.Com isso voc pode, por exemplo, enviar as mensagens do chat do ponto em que parou.16. DOM e HTML5DOM e HTML5O Modelo de Objetos do Documento (DOM, na sigla em ingls) a interface entre a linguagem Javascript e os objetos do HTML. DOM o mtodo padro para construo de aplicaes ricas com Javascript e amplamente conhecido e utilizado. Neste captulo, supondo que voc j conhece DOM para HTML 4 ou XHTML, vamos nos focar na diferena entre as verses anteriores do DOM e a do HTML 5.Por qu DOM?Os primeiros navegadores a incorporar um motor de Javascript tinham alert, prompt, document.write e mais meia dzia de maneiras de se interagir com o usurio. E s. A idia de acessar a rvore de objetos do HTML trouxe poder s interfaces com o usurio na web. A idia era to boa que os fabricantes de navegadores no puderam esperar at que tivssemos uma especificao padro que atendesse suas necessidades, e criaram cada um seu prprio mtodo de resolver o problema. Isso resultou em anos e anos de incompatibilidade, em que era preciso escrever uma verso de seus scripts para cada navegador. Queremos, com certeza, evitar uma nova guerra de padres. Por isso recomendamos a voc, por mais sedutor que parea utilizar um recurso proprietrio Javascript, que se atenha ao DOM.Vamos s diferenasgetElementsByClassNameEsse um sonho antigo de todo desenvolvedor Javascript. Com HTML5 voc pode fazer:destaques = document.getElementsByClassName('destaque')E isso retornar todos os elementos do HTML que possuem a classe "destaque".innerHTMLOutro sonho antigo que se torna realidade. A propriedade innerHTML uma idia to boa que todos os navegadores atuais j a suportam h muito tempo e todo desenvolvedor web sabe us-la. Apesar disso, ela nunca havia sido descrita como um padro. Se porventura voc nunca viu a propriedade innerHTML em ao (puxa, onde voc estava nos ltimos dez anos?) saiba que ela contm uma string, o contedo HTML da pgina. E voc tem acesso de leitura e escrita a essa propriedade. Veja um exemplo de innerHTML:function adicionaItem(nome){ document.getElementById('lista').innreHTML += ''+nome+'' }activeElement e hasFocus()O documento HTML5 tem uma nova propriedade, activeElement, que contm o elemento que possui o foco no momento. O documento tambm possui o mtodo hasFocus(), que retorna true se o documento contm o foco. Seu usurio pode estar trabalhando com mltiplas janelas, abas, frames, ou mesmo ter alternado para outro aplicativo deixando o navegador com sua aplicao Javascript rodando em segundo plano. O mtodo hasFocus() uma conveniente maneira de tratar aes que dependem do foco na aplicao atual. Veja um exemplo de script dependente de foco: Arquivo: exemplos/16/focusNotify.html1 2 3 4 5 Notifier 6 7 8 function notify(text){ 9 document.getElementById('msg').innerHTML+=''+text+'' 10 titleFlick() 11 } 12 13 function titleFlick(){ 14 if(document.hasFocus()){ 15 document.title='Notifier' 16 return 17 } 18 document.title=document.title=='Notifier'?'* Notifier':'Notifier' 19 setTimeout('titleFlick()',500) 20 } 21 22 23 24 25 26 28 29 30 31 getSelection()Os objetos document e window possuem um mtodo getSelection(), que retorna a seleo atual, um objeto da classe Selection. A seleo tem, entre outros, os seguintes mtodos e propriedades:Usando getSelection() hojeA maioria dos navegadores ainda no teve tempo de se atualizar em relao especificao e, retorna uma string quando voc chama document.getSelection() e um objeto Selection quando voc chama window.getSelection(). Como esperamos que num futuro prximo o comportamento de document.getSelection() mude, sugerimos que voc prefira usar o mtodo de window por enquanto. anchorNode O elemento que contm o incio da seleo focusNode O elemento que contm o final da seleo selectAllChildern(parentNode) Seleciona todos os filhos de parentNode deleteFromDocument() Remove a seleo do documento rangeCount A quantidade de intervalos na seleo getRangeAt(index) Retorna o intervalo na posio index addRange(range) Adiciona um intervalo seleo removeRange(range) Remove um intervalo da seleo Intervalos de seleo Voc deve ter notado acima que uma seleo um conjunto de intervalos, da classe Range. Cada intervalo possui, entre outros, os seguintes mtodos e propriedades: deleteContent() Remove o contedo do intervalo setStart(parent,offset) Seta o incio do intervalo para o caractere na posio offset dentro do elemento DOM parent setEnd(parent,offset) Seta o final do intervalo para o caractere na posio offset dentro do elemento DOM parent Tanto os objetos Selection quanto os objetos Range retornam o texto da seleo quando convertidos para strings.document.headO objeto document j possua uma propriedade body, uma maneira conveniente de acessar o elemento body do HTML. Agora ele ganhou uma propriedade head, maneira tambm muito conveniente de acessar o elemento head.Selector APIA Selector API no novidade do HTML5, anterior a ele. Mas como ainda desconhecida de parte dos desenvolvedores, convm dizer que ela existe, e que continua funcionando no HTML5. Com a selector API voc pode usar seletores CSS para encontrar elementos DOM. querySelector e jQuery Se voc usurio de jQuery, j entendeu tudo. exatamente a mesma idia dos seletores jQuery. Alguns preocupados usurios de jQuery tm nos perguntado se no melhor, em termos de performance usar a Selector API. Mas claro que que . Se voc realmente souber programar, escrever todo o seu cdigo sempre ser melhor em performance que usar um framework. Mas o ganho, nesse caso, desprezvel. Talvez o conforte saber que, nos navegadores em que isto est disponvel, a prpria jQuery usa internamente a Selector API. A Selector API expe duas funes em cada um dos elementos DOM: querySelector e querySelectorAll. Ambas recebem como argumento uma string com um seletor CSS. A consulta sempre feita na subtree do elemento DOM a partir do qual a chamada foi disparada. A querySelector retorna o primeiro elemento que satisfaz o seletor, ou null caso no haja nenhum. A querySelectorAll retorna a lista de elementos que satisfazem o seletor. Veja, neste exemplo, um script para tabelas zebradas com Selector API: Arquivo: exemplos/16/zebra.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Zebra .zebraon{background:silver} window.onload=function(){ var zebrar=document.querySelectorAll('.zebra tbody tr') for(var i=0;i