Livro_Tableless

HTML5 e CSS3 com farinha e pimenta

Diego Eis Elcio Ferreira

Copyright 2012 por TablelessTodos os diretos reservados

Publicado por Tableless.com.brDesenvolvimento client-side inteligente.

ISBN 978-1-105-09635-8So Paulo, Brasil

http://tableless.com.br/@tablelesshttp://facebook.com/tablelessbr

PARA VOC.

IF NOT NOW, WHEN? IF NOT YOU, WHO?

WaSP Team

NDICE

Uma breve histria 15as 3 camadas de desenvolvimento 19 Primeira camada: Informao 20 Segunda camada: Formatao 21 Terceira camada: Comportamento 22

html - a alma do client-side 25 Hipertexto 26 Marcao 27

O incio do HTML5 28 WHAT Working Group 28 HTML5 e suas mudanas 29 Estrutura bsica, DOCTYPE e charsets 31

Modelos de contedo 35Novos elementos e atributos 39 Elementos de seo 40 Atributos 47

Elementos modificados ou ausentes 50 Elementos modificados 50 Elementos ou atributos descontinuados 51 Compatibilidade do HTML5 52 Tcnicas de deteco 53 Utilizando a Biblioteca Modernizr 54

novos tipos de formUlrios e mUltimdia 59Tipos de dados e validadores 63 Formulrios vitaminados 63 autofocus 63 Placeholder text 63

Validao de formulrios 65 pattern 65 novalidate e formnovalidate 66

Custom validators 67

Detalhes e contedo editvel 68 Detalhes e sumrio 68 Contedo editvel 70

Drag-n-drop e correo ortogrfica 70 Drag and Drop 70 Detalhes importantes 71 Reviso ortogrfica e gramatical 73

Elementos audio e video, e codecs 74 udio 74 Vdeo 75

Elemento device e Stream API 76 O elemento device 76 Streams 78

MathML 81a nova gerao de aplicaes web i 81 SVG 83 Canvas API 85 O elemento canvas 85 Canvas vs SVG 87

Server-sent events 88 EventSource 88 O protocolo de comunicao 89

DOM e HTML5 90 Por qu DOM? 90

Vamos s diferenas 91 getElementsByClassName 91 activeElement e hasFocus() 91 getSelection() 93 Intervalos de seleo 94 Selector API 95 querySelector e jQuery 95 Caractersticas especiais de DomNodeList 97 Datasets 97

Novos eventos DOM 98 Uma palavra sobre eventos 98

Elementos multimdia 98 Eventos em campos de formulrio 99 Eventos gerais 100 Drag-and-drop 101 Atributos de ev ento 101

Menus e toolbars 101O elemento menu 101 Tipos de comando 102 O elemento command 103 Exemplo de menu 105

Tipos de links 106 Links 106 Metadados de navegao 107

Microdata 111a nova gerao de aplicaes web ii 111 Diferentes tipos de dados 114 Falando um idioma comum 118

Histrico de sesso e API Storage 119 Histrico de Sesso 120 localStorage e sessionStorage 122

Aplicaes offline 124Caching 124 O objeto ApplicationCache 126 Controle de status da aplicao 127

Scroll in to view e hidden 128 hidden 128 hidden e Javascript 129

Geolocation API 129 Mtodos de Geolocalizao 129 Tratando erros 131 No trate a resposta do usurio como um erro 131 O objeto de configurao 132 watchPosition 132

Undo 133 O objeto UndoManager 133 Respondendo s aes de undo e redo 134

Disparando as aes de undo e redo 134

css 137 O que CSS? 137 O que um seletor? 139 Seletores complexos 140 Exemplo de funcionamento 140 Pseudo-classes 143 Pseudo-elementos 147

Gradiente 148Propriedade border-image 151 Dividindo a imagem 152 Comportamento da imagem 152 Aplicao 153

Sombras 154RGBA 155 RGBA e a diferena da propriedade OPACITY 156 O RGB 159 O HSL 160 E o hexadecimal? 161

currentColor 162@font-face 163Mltiplos backgrounds 165Columns 166 column-count 166 column-width 166 column-gap 167

Transform 2D 167Introduo ao CSS 3D 171 Tudo uma questo de perspectiva 172 CSS 3D Transforms 173 Fazendo o efeito de Card Flip 175

Propriedade Transition 177Propriedade animation e regra keyframe 181Mdulo Template Layout 187 Sintaxe e funcionamento 189

O funcionamento da propriedade display 190 Definindo a largura e altura dos slots 191 O funcionamento da propriedade position 193 Pseudo-elemento ::slot() 195 Mas e o float? 195

Paged media 196 @page 197 Terminologia e Page Model (modelo de pgina) 198 Propriedade size 200 Page-size 201

Presentation-levels 202 Como funciona o modelo 203 A propriedade presentation-level 204 Motores de Renderizao 209

browsers 209 Prefixos de browsers 210 Como utilizar um prefixo? 211 Prefixos so css-hacks? 211

como ser? 215

UMA BREVE HISTRIA1

Ns no podemos comear a falar sobre HTML e CSS sem contar uma breve histria sobre o incio de tudo.

No sei quanto tempo voc trabalha com web e no sei qual seu conhecimento sobre histria da internet, mas saiba que nunca foi to fcil desenvolver para web como hoje. Ns produzimos websites acessveis hoje por que ocorreram uma srie de movimentos independentes entre os fabricantes de browsers e alguns profissionais da rea que quebraram barreiras importantes.

Antes nossa preocupao rondava apenas o Internet Explorer 3+ e o Netscape. Estes dois navegadores davam mais problemas de compatibilidade do que todos os problemas de compatibilidades dos browsers atuais, combinados.

Fazer websites com tabela foi um marco para a histria do desenvolvimento web mas tambm o incio dos nossos problemas.

Mas no d para negar que criar websites utilizando tabelas nos trouxe possibilidades interessantes, como por exemplo, criar websites com colunas. Uma maravilha! Imagine s: se antes podamos apenas inserir texto corrido, centralizado, com alguns gifs animados, agora podamos dividir o layout em colunas e fazer diagramaes matadoras e sofisticados para a poca. Um verdadeiro avano. Estamos falando de algo em torno de 1998.

Mesmo com essas novas possibilidades, descobrimos cedo que desenvolver

HTML5 e CSS3 com Farinha e Pimenta

16

websites utilizando tabelas muito complicado. Ainda mais quando utilizamos o CSS da maneira errada. Naquele tempo era normal misturar o CSS com o HTML. Foi da que o termo Tag Soup surgiu.

Era muito cdigo! Desenvolvedores aninhavam tabelas como se no houvesse o dia de amanh. Uma loucura.

O cdigo ficava enorme, fazendo que com o download da pgina demorasse, a manuteno era terrvel e o know-how de como o desenvolvimento foi feito era restrito a alguns profissionais da equipe. Era tudo muito inflexvel. Isso encarecia a mo de obra e por isso os projetos ficavam cada vez mais caros.

Lembre-se que alm de tudo isso havia a guerra dos browsers. Os problemas de compatibilidade de cdigo entre os dois browsers eram to terrveis que foravam o desenvolvedor a criar duas verses de sites para abranger os usurios dos dois navegadores.

A Netscape e a Microsoft tinham uma mente predatria. Cada um tentava ganhar os usurios de forma nada honrosa. Para conseguir tal faanha era fcil: bastasse fazer com que os desenvolvedores fizessem websites compatveis apenas para um browser, fazendo com que o concorrente ficasse s moscas. Por isso que fazamos duas verses para cada site, para cada script, para cada HTML.

Essa novela durou longos anos at que um grupo de profissionais gringos decidiram criar um movimento chamado Web Standards Project - WaSP. O desenvolvimento web estava sendo massacrado por causa dessa guerra entre os browsers. O WaSP tinha um objetivo muito claro: fazer com que os browsers e os desenvolvedores seguissem os padres web recomendados pelo W3C.

O Tim Berners-Lee, o inventor da Web, fundou a World Wide Web Consortium - W3C - para recomendar, criar e manter padres tecnolgicos baseados na web que fossem interoperveis, abertos e acessveis. Essas tecnologias devem ser manipuladas para a criao de designs inovadores e tambm para a

17

HTML5 e CSS3 com Farinha e Pimenta Uma breve histria

produo de sistemas avanados baseados na internet.

A perseverana deste grupo fez com que os fabricantes de browsers ouvissem suas ideias e suportassem as tcnicas e ideias do W3C. Hoje os browsers suportam os padres web de forma que antes nunca imaginvamos. Isso bom para todos ns.

Atualmente o objetivo fazer com que os desenvolvedores estudem e adotem a implementao dos padres web de forma inteligente.

Ainda h muito o que fazer, principalmente aqui no Brasil. Mas estamos vivendo um cenrio muito propcio ao crescimento avanado das tcnicas de desenvolvimento web. Mais desenvolvedores esto engajados a ensinar, sugerir e fazer com que o mercado de web cresa de forma inteligente. Se voc est lendo este livro, voc a prova de que o interesse em uma web mais criativa tem aumentado.

If not now, when? If not you, who? WaSP Team.

AS 3 CAMADAS DE DESENVOLVIMENTO2

O desenvolvimento client-side baseado em 3 camadas principais: informao, formatao e comportamento.

As camadas possibilitam o desenvolvimento independente de cada rea da produo. Se quisermos modificar o design, podemos faz-lo manipulando apenas o CSS, sem se preocupar com HTML, Javascript ou programao server-side.

Embora sejam independentes, a evoluo de cada camada influencia o caminho da outra. O CSS no consegue evoluir se o HTML manter-se congelado no tempo. Um dos principais problemas quando desenvolvamos com tabelas era a mistura da formatao com a informao. O cdigo HTML estava to entrelaado com o cdigo CSS que a manipulao do layout se tornava trabalhosa e muito cara. No era possvel modificar colunas de lugar, caractersticas de textos ou at mesmo tamanho dos elementos sem ter que modificar alguma coisa do cdigo HTML. Nada era independente. Esse era um dos motivos que encareciam os projetos para web. Fazer um site entre os anos de 96 e 2001 no era coisa fcil.


20

primeira camada: informao

A camada de informao a mais importante. Ela vem antes de todas as outras e fica sob o controle do HTML. O HTML marca a informao dando-lhe significado. Esse significado reconhecido por robs, sistemas, aplicaes ou outros meios que podem acessar e reutilizar a informao publicada. A informao precisa ser acessvel a qualquer hora, de qualquer lugar e principalmente, por qualquer dispositivo e meio de acesso. Como j dizia o antigo ditado do desenvolvimento web: O contedo o Rei. Mas o que contedo? O que informao?

Informao tudo o que o usurio consome.

A Web foi criada para compartilhar informao. Desde o incio, quando a internet foi planejada e criada, seu objetivo era claro: compartilhar informao com pessoas do mundo inteiro, de forma rpida e dinmica. A informao que trafega na web deve ser reutilizada quantas vezes for necessrio. Tambm importante que a informao seja portvel, de forma que ela no seja acessvel por apenas um meio.

Entendendo o significado das coisasNs, seres humanos, entendemos o significado de cada elemento facilmente. Sabemos que um ttulo diferente do pargrafo por causa das suas caractersticas visuais: tamanho de fonte, quantidade de caractres, escrita e etc...

As mquinas (e quando digo mquinas, quero abranger sistemas de busca, leitores de tela, smartphones, browsers, aplicaes, sistemas, etc. Em suma, qualquer meio de acesso) no tem esse discernimento. Os robs de sistemas de busca, por exemplo, no enxergam. Eles no tem como entender visualmente o que um ttulo, um pargrafo, uma imagem etc. Essa a importncia da marcao HTML: ela define o que cada informao.Tenha em mente que o HTML deve ser sempre a primeira camada. Se todas as outras camadas no funcionarem por algum motivo, o HTML

21

HTML5 e CSS3 com Farinha e Pimenta As 3 camadas de desenvolvimento

deve funcionar. A informao deve ser entregue, no importa se o visual tenha sido prejudicado por falta do CSS ou se o Javascript est desligado no browser do usurio.

segUnda camada: formatao

A segunda camada responsvel por controlar o visual da informao exibida pelo HTML. esta camada que deixa tudo bonito. Que faz vender. Que enche os olhos do cliente. Atualmente essa camada controlada pelo CSS e parece que ser por muito tempo ainda.

O CSS a linguagem responsvel por controlar o visual da informao exibida pelo HTML. O CSS formatar o contedo de forma que seja visualmente agradvel em qualquer meio de acesso. A informao acessada por diferentes meios de acesso, desde sistemas de busca at aparelhos como tablets, smartphones etc e o CSS o responsvel por formatar a informao para que ela seja consumida em qualquer meio de acesso de forma simples. Se voc estiver usando um leitor de tela, o CSS poder controlar a maneira com que a voz do leitor sair pelas caixas de som. Controlamos tambm a forma com que a informao mostrada em TVs ou outros aparelhos. Controlamos como o texto ser exibido em uma impresso.

Quero que voc abra sua mente quando ler em uma mesma frase as palavras CSS e formatao. Formatao com CSS quer dizer muito mais do que pintar divs, formatar letras e cores. Se a informao deve ser acessada em qualquer lugar, o CSS precisa cuidar para que essa informao aparea de maneira adequada em cada um destes meios de acesso. Essa sua principal responsabilidade.

Vamos ver mais sobre a responsabilidade do CSS e alguma tcnicas nos captulos posteriores.


22

terceira camada: comportamento

Nessa terceira camada voc decidir quais sero os comportamentos dos elementos. O Javascript at hoje o principal responsvel por essa camada. Com o Javascript voc definir se os elementos sero arras-tados, dimensionados, rotacionados, reformatados etc. O Javascript controla tudo isso manipulando as caractersticas dos elementos pelo CSS. Resumidamente, o Javascript controla os valores definidos pelo CSS e manipula estas propriedades.

Voc ver no decorrer deste livro que o HTML5 trouxe muitas ferramentas e possibilidades para que o Javascript controle os elementos criados no cdigo utilizando as novas APIs do HTML5

Nessa camada no importa se voc utilizar Javascript ou se intermediar seu cdigo com um framework como o JQuery.

O CSS tambm est com um p nessa camada. Com o CSS3 podemos controlar comportamentos simples dos elementos, comeando com animaes e transies. Mesmo assim o CSS no ser (talvez) uma ferramenta para fazer animaes complexas como as animaes que fazemos com SVG ou Canvas.

HTML - A ALMA DO CLIENT-SIDE3

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.

HTML uma abreviao de Hypertext Markup Language, que traduzindo para o portugus significa Linguagem de Marcao de Hypertexto. Resumindo em uma frase: o HTML uma linguagem para publicao de contedo (texto, imagem, vdeo, udio e etc) para a Web.

Para entender melhor como o HTML funciona, vamos conversar sobre duas palavras que fazem parte do seu nome: Markup (marcao) e Hypertext (hipertexto).


26

hipertexto

O HTML baseado no conceito de Hipertexto, que uma forma de organizar contedo de forma no linear. 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.

Quando a web foi criada, era necessrio distribuir a informao de uma maneira simples mas organizada, era necessrio ento haver uma linguagem que fosse 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 e seus conceitos.

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. 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://bit.ly/ol3an1.

Desde o comeo o HTML foi criado para ser uma linguagem independente de plataformas, browsers e outros meios de acesso. Interoperabilidade significava menos custo. Voc cria apenas um cdigo 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,

27

HTML5 e CSS3 com Farinha e Pimenta HTML - A Alma do Client-Side

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.

marcao

Ao ler um livro ou uma revista, voc consegue distinguir ttulos de pargrafos porque voc um ser humano. Voc sabe que os ttulos tem letras maiores, poucas palavras etc... J o pargrafo tem um nmero maior de palavras e a sua letra menor. Essa distino clara e muito bvia visualmente.

A web no apenas acessada por seres humanos. A informao publicada totalmente reutilizada pelos meios de acesso. Os meios de acesso so qualquer coisa que acesse a web e consuma seu contedo. Pode ser os sistemas de busca, seu browser, um leitor de tela, seu smartphone, ou qualquer outro sistema ou dispositivo utilizado pelos usurios ou robs. Estes meios de acesso no conseguem distinguir visualmente os elementos exibidos na tela. por isso que o HTML baseado em marcao.

Ns marcamos a informao, dando significado a estes objetos, tornando-os legveis para os meios de acesso. Assim, quando marcamos um ttulo com h1, h2 ou h3, indicamos para os meios de acesso que determinado bloco de texto um ttulo, com uma determinada importncia e assim por diante com os outros elementos.Dessa forma cada meio de acesso pode decidir o que fazer com esta informao. O browser, por exemplo, carrega a informao na tela do usurio. J o rob do


28

Google guarda a informao e a utiliza em suas buscas. Cada meio de acesso tem sua funo, logo, utiliza a informao de maneiras diferentes.

Da vem a importncia da semntica no cdigo HTML. Se voc marca um ttulo com um elemento que no da famlia de ttulos, os meios de acesso trataro essa informao de maneira errada. No importa se voc formate esse elemento de maneira que ele se parea com um ttulo visualmente. O que importa mesmo o que est escrito no cdigo.

O INCIO DO HTML5

what working groUp

Enquanto 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 WHATWG1 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 o WHATWG se focava em um padro chamado Web Forms 2.0, que se propunha a modificar os formulrios do HTML, ele foi includo no HTML5 e o Web Controls 1.0 que foi abandonado por enquanto.

Por volta de 2006, o trabalho do WHATWG passou a 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

29


HTML5 em detrimento do XHTML 2. Mesmo assim o XHTML seria mantido paralelamente de acordo com as mudanas causadas no HTML. O grupo que estava cuidando especificamente do XHTML 2 foi descontinuado em 2009.

A participao no grupo que decide estes padres livre e voc pode se inscrever na lista de email2 para contribuir. Sugiro fortemente que voc faa isso. Voc estar bebendo direto da fonte e poder contribuir diretamente para a criao de uma Web mais livre e flexvel.

html5 e sUas mUdanas

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

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, por exemplo, 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.

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


30

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, sem a necessidade de criaes de grandes blocos de scripts.

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, tags como B e 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 precisar 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. A regra primordial entre os desenvolvedores web Dont Break The Web seguida risca.

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 suporte dos browsers e o uso dos

31


desenvolvedores. Era feito um lanamento nico para a linguagem inteira.

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 etc. Cada um destes grupos so independentes e podem lanar suas novidades a qualquer momento. Logo, o desenvolvimento ficou mais dinmico, com novidades mais constantes.

A desvantagem desta constncia 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. Sendo assim, os browsers tem mostrado grande interesse em se manterem atualizados em relao aos seus concorrentes. A Guerra dos Browsers est ainda presente no desenvolvimento web, e isso bom. No uma guerra predatria, onde um browser tenta minar o mercado do outro, mas uma guerra competitiva, saudvel para o mercado.

estrUtUra bsica, doctYpe e charsets

A estrutura bsica do HTML5 continua sendo praticamente a mesma das verses anteriores, mas com menos cdigo. Segue abaixo como a estrutura bsica pode ser seguida:


32

Corpo do site.

O DoctypeO Doctype deve ser sempre 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. Isso determina a forma com que o meio de acesso ir renderizar o cdigo lido. 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 (DOM, lembra?). 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 um novo atributo. Ele j existe desde

33


muito tempo e no restrito ao elemento HTML, sendo possvel ser utilizado em qualquer outro elemento para indicar o idioma do texto representado. O que muito bom para leitores de tela.

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:

O novo cdigo para o HTML5 resumiu bastante as coisas, retirando todo o cdigo intil para ns, deixando a linha acima assim:

A Web acessada por pessoas do mundo inteiro. Ter um sistema ou um site que limite o acesso de pessoas de outros pases algo que vai contra a tradio e os ideais da internet. Por isso, foi criado uma tabela que suprisse as necessidades impostas pelas linguagens do mundo todo, essa tabela chama-se 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 existir uma tabela padro com o maior nmero de caracteres possvel,


34

dando a possibilidade de guardarmos todos as letras e smbolos utilizados nos idiomas do mundo. O que o Unicode faz fornecer um nico nme-ro para cada caractre, no importa a plataforma, nem o programa, nem a lngua.

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.

Tag LINKH dois tipos de links no HTML: a tag A, que a abreviao de ANCHOR, que so elementos que levam o usurio para outros documentos o famoso Hiperlink. E h a tag LINK, que uma tag para importar objetos externos que sero usados no documento, como arquivos de CSS, RSS, etc. Por isso no se confunda.

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

35


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. Essas regras so chamadas de Modelos de Contedo.

Dentre todas as categorias de modelos de contedo, existem dois tipos de elementos: elementos de linha e os elementos de bloco. Os elementos de linha marcam, na maioria das vezes, textos, elementos de formulrios, imagens. Alguns exemplos: a, strong, em, img, input, abbr, span. J os elementos de blocos so como caixas, que dividem o contedo em 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. Mas o inverso possvel.

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 inverso possvel.

Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo de contedo o elemento se encaixa e como pode ser seu comportamento. Os navegadores utilizam muito estas regras para definir o fluxo de informao e quais as suas utilizaes. Alguns browsers podem ajudar o desenvolvedor tentando consertar algum erro de sintaxe. Outros simplesmente quebram o layout ou a aplicao no local que o erro de sintaxe acontece. Tome cuidado


36

com essas diferenas de comportamento. interessante entender exatamente como cada browser se comporta nestas situaes.

categorias

Cada 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

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 article

37


aside audio b bdo blockquotebr button canvas cite code

command datalist del details dfndiv dl em embed fieldset

figure footer form h1 at h6 headerhgroup hr i iframe imginput ins kbd keygen labellink map mark math menumeta meter nav noscript object

ol output p pre progressq ruby samp script section

select small span strong stylesub sup svg table textareatime ul var video wbrtext

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 sees principais no cdigo. Como por exemplo rodaps, cabealhos, rea do texto principal, listas de navegaes etc.

header footer article aside nav section

Aqui onde o HTML5 inseriu mais tags novas. Estas novas tags vieram para melhorar a semntica dos elementos estruturais do cdigo. Antes era quase impossvel identificar de maneira automtica o que era um rodap ou um


38

header de pgina. Era dificlimo localizar o bloco com o texto principal de uma pgina. Com estas tags esse trabalho ficou mais simples. Heading contentOs elementos da categoria Heading definem uma seo de cabealhos, que podem estar contidos em um elemento na categoria Sectioning.

h1 at h6 hgroup header

Phrasing 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 audio bbdo br button canvas vitecode command datalist del dfnem embed i iframe img

input ins kbd keygen labellink map mark math meta

meter noscript object output progressq ruby samp script sup

select small span strong subsvn textarea time var video

textarea time var video wbrText

Embedded contentNa categoria Embedded, h elementos que importam outra fonte de informao para o documento.

39


audio canvas embed iframe imgmath objevt svg video

Interactive contentInteractive Content so elementos que fazem parte da interao de usurio.

a audio button details embediframe img input keygen labelmenu object select textarea video

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.

NOVOS ELEMENTOS E ATRIBUTOS

O cdigo HTML indica 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 letras, 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 e rederizadas 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. Conseguamos diferenciar por exemplo,


40

um pargrafo de um ttulo. Mas no conseguamos diferenciar o rodap do cabealho. Essa diferenciao era apenas percebida visualmente com o layout pronto. Tambm 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 criou uma srie de elementos que nos ajudam a definir os setores principais no documento. 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 est 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.

elementos de seo

Voc deve conhecer o elemento DIV. O DIV tem a funo de criar divises. Quando criamos um website, dividimos as reas do layout em sees. O problema do DIV, que ele no tem nenhum significado semntico. Os sistemas de busca, por exemplo, no tem como saber o que um rodap, um cabealho, sidebar e etc, porque tudo feito com DIVs e assim damos o mesmo nvel hierrquico de informao para todas as sees.

Para resolver esse problema, foi criado um conjunto novo de elementos que alm de dividir as reas do layout, ele entrega significado. Esses elementos so chamados de Contedos de Sees ou Sectioning content.

Esse conjunto de tags tem a funo de dividir as reas do layout como fazamos com os DIVs, mas cada uma delas carrega um significado especfico. Entenda agora com mais detalhes o que cada um destes elementos significa.

41


O elemento SECTION A tag section define uma nova seo genrica no documento. Por exemplo, a home de um website pode ser dividida em diversas sees: introduo, destaque, novidades, informao de contato e chamadas para contedo interno.

Basicamente o elemento section substitui o div em muitos momentos. A imagem seguinte foi retirada do site Globo.com.

Cada uma das colunas dos assuntos Notcias, Esportes e Entretenimento definido e marcado por um elemento section em vez de utilizarmos divs como era de costume.

Isso permite os sistemas de buscas ou outras aplicaes saibam que cada um daqueles blocos trata-se de um assunto diferente. Meu desejo que futuramente seja possvel indicar qual tipo de assunto abordado em cada


42

um destes elementos.

Entenda que o section apenas divide estes assuntos. No como o header, footer, aside, nav e article que dividem informaes especficas, como veremos a seguir. O section um elemento mais especfico que o div, mas no mais especfico que estes elementos. Entenda que todos os outros objetos que veremos tambm so chamados de sections, mas cada um deles responsvel por uma parte da pgina: o header pelos cabealhos, o nav pelas listas de navegaes e assim por diante. O section muitas vezes envolver todos estes elementos, separando-os como um assunto.

O elemento NAVO 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. Aqueles links que so considerados principais, por exemplo o menu principal do site. No caso dos portais, aquele menu lateral com uma srie de links separados por assuntos poderiam ser uma nav. Isso tambm pode ser aplicado para aqueles blocos de links que geralmente so colocados no rodap.

Imagine uma sidebar com uma srie de links, como por exemplo a sidebar de um portal de contedo como o G1, R7, UOL e etc Nestes portais normal voc encontrar diversos links para as categorias de assuntos. Anteriormente, se quisssemos agrupar por exemplo um Ttulo e uma lista de links faramos assim:

Esporte Copa 2014 Brasileiro Frmula 1 Baskete

43


Este cdigo resolvia nosso problema de formatao. Poderamos utilizar o div que envolve o ttulo e a lista para fazer algum detalhe visual e principalmente para agruparmos o contedo relacionado que existia. Mas a nvel de informao no havia nenhuma indicao de que o ttulo estivesse ligado ao contedo. No h nenhuma referncia de que o ttulo ESPORTE apresenta a lista de links abaixo dele. Visualmente essa relao muito forte porque o designer desenhou o layout para que isso acontecesse, mas a nvel de cdigo ns no tnhamos como indicar essa relao de informaes. Poderamos fazer apenas para que o cdigo ficasse organizado, mas para os leitores de tela ou sistemas de busca essa relao simplesmente no existia. Os sistemas de busca no podem se basear apenas na posio dos elementos, algo muito genrico para eles confirmarem que a lista e o ttulo que a precede esto ligados em um mesmo assunto.

Com o HTML5, isso muda. Veja o cdigo abaixo:

Esporte Copa 2014 Brasileiro Frmula 1 Baskete

Com a tag nav, h uma indicao de que aquele grupo uma seo (nav um tipo de section. Enquanto a tag section serve para indicar sees no site, a tag nav indica que um determinado grupo uma seo de navegao) um bloco de navegao.Dentro da nav voc pode agrupar uma srie de listas de links:

Esportes Copa 2014 Brasileiro


44

Frmula 1 Baskete Educao Educao Dicionrios Vestibular Notcias Cotidiano Poltica Jornais

A tag nav tambm pode estar em todos os elementos do HTML. Voc pode coloc-la no header para definir menus, no footer para definir grupos de links, sidebars, articles e etc.

Com um bloco de navegao definido, a acessibilidade da pgina pode ser explorada. Os leitores de tela, sistemas de busca ou qualquer outro sistema interessado, podem localizar facilmente os links importantes e internos da pgina por meio da tag nav.

Entenda que o nav no carrega qualquer tipo de links. Tenha em mente em sempre que usar o nav, ele ir carregar grupos de links ligados ao site. Normalmente estes links so links internos, e por conta disso, o ranqueamento e a indexao feita pelos buscadores pode ser melhorada.

O elemento Article

45


A especificao diz:The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

O elemento article onde colocamos o texto ou a informao principal. Imagine que voc est visitando um blog, h uma sidebar e h tambm o bloco de texto, que seria o bloco que carrega o contedo principal do site. Este bloco seria marcado como article. Dentro deste article haver toda a informao necessria sobre o artigo: data de publicao, ttulo, autor, o texto, informaes de outros artigos relacionados etc.

Para entender melhor, a informao que vai dentro do article exatamente a mesma informao que os leitores de feeds capturam do seu RSS/Atom. O leitor de FEED no disponibiliza o menu do site, a sidebar e etc, ele apenas disponibiliza o texto principal do post, e ser esse texto que haver no elemento article.

Um exemplo de cdigo:

Ttulo do post

03 de

Dezembro de 1983

Texto de introduo.

Um outro ttulo

Texto do post.

Texto do post.

Texto do post.

Alguns podem confundir os elementos de article, section e div. Entenda que


46

o article um elemento mais especfico que o section e o div. O article marca o texto principal do site. o fil da pgina. O section apenas um bloco de separao de assuntos diferentes. O div, o mais genrico de todos, apenas aplicado para separar elementos em blocos, por isso ele no carrega nenhum significado semntico.

Sendo mais especfico: Para marcar informaes e contedos que fazem sentido se forem vistos de fora do site, como em leitores de RSS, utilize o article. Ou seja, o que voc mostra no Feed? Menu, rodap, header, sidebar ou somente o bloco de texto do artigo? Pois isto que voc marcar com a tag article.

Para separar e organizar contedos de diversos assuntos em blocos diferentes, utilize o section.

Para utilizao no semntica, para formatao com CSS e detalhes genricos, utilize o div.

O elemento ASIDEO elemento aside representa um bloco de informao relativa ao contedo principal.

Algumas utilidades do aside: citaes ou sidebars, agrupamento de publicidade, grupos e blocos de navegao ou para qualquer outro contedo que tenha importncia secundria e relativa ao contedo principal da pgina.

Dentro do aside voc pode agregar por exemplo grupos de elementos nav, headers, sections e etc, permitindo produzir um menu lateral com os grupos de informaes:

Esportes Frmula 1 Futebol

47


Baskete Voley Poltica Eleies 2010 Urna eletrnica Candidatos

Note que no utilizamos nenhum div, pelo contrrio, utilizamos apenas tags que trazem significado semntico. Neste exemplo, indicamos - para o navegador ou aplicao, sistema de busca ou qualquer outra coisa que acessar nosso cdigo - que aquele bloco lateral, e que cada grupo de nav referente a um assunto.

O elemento aside tambm pode estar dentro de um elemento article, como uma caixa de notao ou algo do gnero. Nesse caso, quando o usurio imprimir, voc pode dar nfase como se fosse uma caixa de informao. Como feito em livros ou revistas.

atribUtos

Alguns elementos ganharam novos atributos:

O atributo autofocus pode ser especificado nos elementos input (exceto quando h atributo hidden atribudo), textarea, select e button.

A tag a passa a suportar o atributo media como a tag link. A tag form ganha um atributo chamado novalidate. Quando aplicado o

formulrio pode ser enviado sem validao de dados. O elemento ol ganhou um atributo chamado reversed. Quando ele


48

aplicado os indicadores da lista so colocados na ordem inversa, isto , da forma descendente.

O elemento fieldset agora permite o atributo disabled. Quando aplicado, todos os filhos de fieldset so desativados.

O novo atributo placeholder pode ser colocado em inputs e textareas. O elemento area agora suporta os atributos href, lang e rel como os

elementos a e link O elemento base agora suporta o atributo target assim como o elemento

a. O atributo target tambm no est mais descontinuado nos elementos a e area porque so teis para aplicaes web.

Os atributos abaixo foram descontinuados:

O atributo border utilizado na tag img. O atributo language na tag script. O atributo name na tag a. Porque os desenvolvedores utilizam ID em vez

de name. O atributo summary na tag table.

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.

49


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 hr. type como atributo da tag li, ol e ul. valign como atributo da tag col, colgroup, tbody, td, tfoot, th, thead e tr. width como atributo da tag hr, table, td, th, col, colgroup e pre.

Alguns atributos do HTML4 no so mais permitidos no HTML5. Se eles tiverem algum impacto negativo na compatibilidade de algum user-agent eles sero discutidos.

rev e charset como atributos da tag link e a. shape e coords como atributos da tag a. longdesc como atributo da tag img and iframe. target como atributo da tag link. nohref como atributo da tag area. profile como atributo da tag head. version como atributo da tag html. name como atributo da tag img (use id instead). scheme como atributo da tag meta. archive, classid, codebase, codetype, declare e standby como atributos da

tag object. valuetype e type como atributos da tag param. axis e abbr como atributos da tag td e th. scope como atributo da tag td.

O W3C mantm um documento atualizado neste link: http://bit.ly/r5S9SX.


50

ELEMENTOS MODIFICADOS OU AUSENTES

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

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

51


elementos oU atribUtos descontinUados

Os elementos abaixo foram descontinuados por que seus efeitos so apenas visuais:

basefont big center font sstrike tt u

Os elementos abaixo foram descontinuados por que ferem os princpios de acessibilide e usabilidade:

frame frameset noframes

Os elementos abaixo no foram includos na especificao porque no tiveram uso entre os desenvolvedores ou porque sua funo foi substituda por outro elemento:

acronym No foi includo porque criou um bocado de confuso entre os desenvolvedores que preferiram utilizar a tag abbr. Acrnimos so abreviaes, mas so um pouco diferentes. Acrnimos so abreviaes que formam siglas, por exemplo N.A.S.A.

applet Ficou obsoleto em favor da tag object.

isindex Foi substitudo pelo uso de form controls.

dirFicou obsoleto em favor da tag ul.


52

compatibilidade do html5

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

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. A boa notcia que a partir de Janeiro de 2012 a Microsoft ativar o autoupdate dos sistemas WindowsXP e Windows Vista, fazendo com que o IE6 seja atualizado automaticamente. Desenvolver para IE8 e 9 muito melhor do que desenvolver para IE6 e 7. Aleluia!

Abaixo segue uma tabela simples de compatibilidade entre os browsers e alguns mdulos do HTML5 at a escrita deste livro:

Mdulos Safari Chrome Opera Firefox IE8 IE9Local Storage sim sim sim sim sim sim

Histrico de Sesso sim sim sim sim sim simAplicaes Offline sim sim no sim no no

Novos tipos de campos sim sim sim no no no

Form: Autofocus sim sim sim no no noForm:

Autocomplete no no sim no no no

53


Form: Required sim sim sim no no noVideo, Audio e

Canvas Text sim sim sim sim no sim

tcnicas de deteco

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

Verifique se uma determinada propriedade existe em objetos globais como WINDOW ou NAVIGATOR. Nesse caso, verificamos o suporte a geolocalizao.

Crie um elemento e verifique se uma determinada propriedade existe neste elemento.

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.

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.


54

Utilizando a biblioteca modernizr

Alguns browsers no aceitam as novas features de CSS3 e HTML5. Saiba como detect-los e trat-los com a biblioteca Modernizr.

Problemas de compatibilidadeQuando produzimos um site os problemas de compatibilidade fazem parte da regra do jogo. Para tentar contornar estes problemas utilizamos hacks, comentrios condicionais, sniffing de browsers e outras coisas, que muitas vezes mais prejudicam do que ajudam.

Para ajudar mais ainda o CSS3 e o HTML5 apareceram derrubando tudo, e o problema de compatibilidade que j era chato, ficou mais chato que meia molhada. Embora os browsers estejam muito mais atuais e suportando propriedades avanadas de CSS3 e HTML5, no garantia que todos eles suportem as mesmas propriedades. E aqui que comeamos a ter problemas novamente, como no passado.

Como voc consegue reconhecer quem um determinado browser suporta CSS Animation? Como voc sabe que o browser conhece LocalStorage do HTML5? Voc no vai ficar olhando numa tabelinha toda vez que tiver essas dvidas para fazer um visual ou uma soluo alternativa para tais browsers.

por essas e outras que voc utilizar a Modernizr.

O que a ModernizrModernizr uma pequena biblioteca Javascript que detecta a disponibilidade das novas caractersticas do HTML5 e CSS3 nos browsers. Muitas destas caractersticas j esto implementadas nos browsers, mas muito chato voc decorar quais novidades os browsers j esto suportando. O que a Modernizr faz simples: ela te diz quais features um determinado browser suporta e insere classes no HTML para que voc possa utilizar para fazer uma verso

55


alternativa de visual ou soluo.

Entenda que a Modernizr no um sniffing de browser. Ela diferente. A Modernizr faz o trabalho de detectar das seguintes formas: Ela testa 40 features de CSS3 e HTML5 em alguns milisegundos. Depois ela cria objetos javascript que contm os resultados destes testes. A so adicionadas classes no elemento HTML descrevendo exatamente

quais propriedades e novidades so ou no nativamente suportadas. Depois disso voc consegue ter os resultados descritos nos navegadores

dinamicamente e ento pode tomar decises criando alternativas para aquelas propriedades no suportadas pelos browsers antigos.

Como funciona simples: primeiro voc baixa a verso mais atual da biblioteca no endereo http://www.modernizr.com/. O interessante que voc tem a opo para personalizar a biblioteca, indicando quais features voc quer que a Modernizr teste no seu projeto.

Depois voc inclui esse pacote no seu HTML:

Teste de Modernizr

Feito isso, insira uma classe no-js no elemento HTML:


56

Quando a Modernizr rodar, ela ir substituir essa classe para uma js se o browser estiver com o Javascript ligado, j te dando um feedback para tomar alguma atitude se o usurio estiver com o Javascript desligado.Junto com essa mudana so adicionadas outras classes, indicando o que o browser aceita nativamente ou o que ele no aceita. Ficar algo parecido com isso:

O browser que eu utilizei o Safari/Mac. Pelo visto ele aceita bastante coisa. ;-)O que o browser no aceita, a Modernizr insere uma classe com o prefixo no- antes da classe, por exemplo: no-boxshadow, no-geolocation, no-touch etc.

A Modernizr tambm cria um objeto Javascript contendo um valor booleano para cada uma dessas features, possibilitando a criao de testes. Um exemplo:

if (Modernizr.geolocation) { alert(Aceita)} else { alert(No Aceita)}

Exemplos de utilidadeExemplo bem bsico: imagine que voc queira utilizar o box-shadow em seu projeto. Browsers como o IE6,7,8 no reconhecem essa feature, ento seria interessante darmos uma alternativa, como por exemplo, colocando uma borda em vez de sombra. Assim o elemento no fica to diferente do que deveria.

Como a Modernizr colocou uma classe no elemento HTML referente a

57


aceitao das features, podemos utiliz-la fazendo assim:

.loginBox { box-shadow:0 10px 10px rgba(0, 0, 0, 0.3);}

.no-boxshadow .loginBox { border: 1px solid #CCC; border-bottom: 3px solid #CCC;}

Assim, se o browser no aceitar a propriedade box-shadow o usurio ver uma borda no lugar. Voc pode fazer isso com praticamente qualquer nova feature do CSS3 e do HTML5.

Ah, mais uma coisa: provavelmente voc j utiliza um scriptzinho html5.js para fazer com o que os Internet Explorers reconheam as tags do HTML5, correto? O Modernizr j faz isso automaticamente. Sugiro que pare de utilizar o html5.js e passe a utilizar a Modernizr somente.

A Modernizr facilita demais as coisas. A ideia que voc no prive seus projetos da utilizao de features novas. A produo vai ficar mais eficaz e seu projeto sempre estar atualizado com as melhores prticas do mercado. Adote a Modernizr e seja feliz.

FORMULRIOS E MULTIMDIA4

NOVOS TIPOS DE CAMPOS

Quando o grupo WHATWG resolveu reescrever o HTML, eles decidiram comear pelos formulrios. Se voc perceber, estamos escrevendo formulrios da mesma maneira desde o incio de tudo. Nunca houve uma atualizao sensata e interessante que modificasse a forma com que usvamos e submetiamos informaes via formulrios.

Foi a que o grupo decidiu criar alguns novos tipos de formulrios, facilitando a usabilidade do usurio e facilitando a vida do desenvolvedor ao produzir campos de formulrios.

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


60

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 horas

datetime-localO 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 date month week time datetime-local

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

61

HTML5 e CSS3 com Farinha e Pimenta Formulrios e Multimdia

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:

Number type

O Opera 10 nos d uma excelente visualizao do que um agente de usurio pode fazer nesse caso:


62

rangeVamos modificar, no exemplo acima, apenas o valor de type, mudando de number para range:

Range type

Novamente, Opera 10:

63


color

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

TIPOS DE DADOS E VALIDADORES

formUlrios vitaminados

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

aUtofocUs

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


64

Voc j deve ter visto um placeholder. Tradicionalmente, vnhamos fazendo isso:

Placeholder, the old style

HTML5 nos permite fazer isso de maneira muito mais elegante:

Placeholder, HTML5 way

requiredPara tornar um campo de formulrio obrigatrio (seu valor precisa ser preenchido) basta, em HTML5, incluir o atributo required:

65


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 FORMULRIOS

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

pattern

O atributo pattern nos permite definir expresses regulares de validao, sem Javascript. Veja um exemplo de como validar CEP:

O atributo pattern

CEP:


66

novalidate e formnovalidate

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

Salvando rascunho label{display:block;}

nome: email: mensagem:

67


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

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:

Custom validator


68

function vCPF(i){ i.setCustomValidity(validaCPF(i.

value)?:CPF invlido!) }

CPF:

DETALHES E CONTEDO EDITVEL

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

detalhes e sUmrio

Veja um exemplo de uso dos novos elementos details e summary:

Copiando 37,5% Tamanho total: 39.248KB Transferido: 14.718

69


Taxa de transferncia: 127KB/s Nome do arquivo: HTML5.mp4

Veja como um agente de usurio poderia renderizar isso:

E ao clicar:


70

contedo editvel

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

DRAG-N-DROP E CORREO ORTOGRFICA

drag and drop

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

dragstartO objeto comeou a ser arrastado. O evento que a funo recebe tem um atributo target, que contm o objeto sendo arrastado.

dragO objeto est sendo arrastado.

dragendA ao de arrastar terminou.

71


O objeto sobre o qual outro arrastado sofre os seguintes eventos:

dragenterO objeto sendo arrastado entrou no objeto target.

dragleaveO objeto sendo arrastado deixou o objeto target.

dragoverO objeto sendo arrastado se move sobre o objeto target.

dropO objeto sendo arrastado foi solto sobre o objeto target

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

HTML5 Drag and drop demonstration


72

#boxA, #boxB { 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;}

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

73


getElementById(idelt)); }

drag me drag me

ExemploSegue um exemplo de drag-and-drop, baseado no excelente exemplo de Laurent Jouanneau (http://ljouanneau.com/lab/html5/demodragdrop.html).

reviso ortogrfica e gramatical

Os agentes de usurio podem oferecer recursos de reviso ortogrfica e


74

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.

ELEMENTOS AUDIO E VIDEO, E CODECS

Udio

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

75


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.

vdeo

O uso de vdeo muito semelhante ao de udio:

E com vrios elementos source:

Faa o download do vdeo.

Codecs 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


76

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:

ELEMENTO DEVICE E STREAM API

o elemento device

O 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

77


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:

Videochat, step 1

function update(stream) { document.getElementsByTagName(video)[0].src =

stream.url;}

To start chatting, select a video camera:


78

streams

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

79


A NOVA GERAO DE APLICAES WEB I5

MATHML

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

MathML

x = b &PlusMinus;


82

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

83

HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes Web I

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.

SVG

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

SVG


84

stroke-width=10 points=250,75 279,161 369,161 297,215 323,301 250,250 177,301 203,215 131,161 221,161>

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.

85


CANVAS API

o elemento canvas

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

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:

Canvas API

desenhar

function desenhar(){


86

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

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

}

87


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

Uma 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: O contedo acessvel a leitores de tela


88

O grfico escalvel, no perde resoluo ou serrilha ao redimensionar O contedo acessvel via DOM

E as vantagens do Canvas:

A performance muito superior ao SVG na maioria dos casos fcil desenhar via Javascript. Em SVG, preciso fazer seu script escrever

XML para voc. Com Canvas voc s manda desenhar, e pronto.

SERVER-SENT EVENTS

eventsoUrce

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

89


o protocolo de comUnicao

Em 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 temdata: mais de uma linha

data: mensagem 3

O prefixo data: indica que o que segue so os dados da mensagem. Voc tambm pode usar o prefixo id:

data: mensagem 1id: 1

data: a mensagem 2 temdata: mais de uma linhaid: 2

data: mensagem 3id: 3

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


90

DOM E HTML5

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

91


VAMOS S DIFERENAS

getelementsbYclassname

Esse 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.innerHTML

Outro 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).innerHTML +=

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


92

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:

Notifier

function notify(text){ document.getElementById(msg).

innerHTML+=+text+ titleFlick() }

function titleFlick(){ if(document.hasFocus()){ document.title=Notifier return } document.title=document.title==Notifier?*

Notifier:Notifier setTimeout(titleFlick(),500) }

93


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() hoje

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

anchorNodeO elemento que contm o incio da seleo

focusNodeO elemento que contm o final da seleo

selectAllChildern(parentNode)Seleciona todos os filhos de parentNode

deleteFromDocument()Remove a seleo do documento

rangeCountA quantidade de intervalos na seleo


94

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

O objeto document j possua uma propriedade body, uma maneira conveniente de acessar o elemento body do HTML. Agora ele ganhou uma

95

HTML5 e CSS3 com Farinha e Pimenta A Nova Gerao de Aplicaes

Livro_Tableless

Documents

Transcript of Livro_Tableless