Anda di halaman 1dari 219

HTML5 e CSS3

com farinha e pimenta

Diego Eis Elcio Ferreira

Copyright 2012 por Tableless Todos os diretos reservados Publicado por Tableless.com.br Desenvolvimento client-side inteligente. ISBN 978-1-105-09635-8 So Paulo, Brasil http://tableless.com.br/ @tableless http://facebook.com/tablelessbr

PARA VOC.

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


WASP TEAM

NDICE
UMA BREVE HISTRIA AS 3 CAMADAS DE DESENVOLVIMENTO 15 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 35 Novos 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


Tipos de dados e validadores

59
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 Drag-n-drop e correo ortogrfica

68 70

Detalhes e sumrio 68 Contedo editvel 70 Drag and Drop 70 Detalhes importantes 71 Reviso ortogrfica e gramatical 73

Elementos audio e video, e codecs Elemento device e Stream API

74 76

udio 74 Vdeo 75 O elemento device 76 Streams 78

MathML 81

A 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

101

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

A NOVA GERAO DE APLICAES WEB II


Histrico de sesso e API Storage Aplicaes offline

Diferentes tipos de dados 114 Falando um idioma comum 118

111
119 124

Histrico de Sesso 120 localStorage e sessionStorage 122 Caching 124 O objeto ApplicationCache 126 Controle de status da aplicao 127

Scroll in to view e hidden Geolocation API

128 129

hidden 128 hidden e Javascript 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

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

137

Gradiente Propriedade border-image

148 151

Dividindo a imagem 152 Comportamento da imagem 152 Aplicao 153

Sombras RGBA

154 155

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

currentColor @font-face Mltiplos backgrounds Columns

162 163 165 166

column-count 166 column-width 166 column-gap 167

Transform 2D Introduo ao CSS 3D

167 171

Tudo uma questo de perspectiva 172 CSS 3D Transforms 173 Fazendo o efeito de Card Flip 175

Propriedade Transition Propriedade animation e regra keyframe Mdulo Template Layout

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

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

209

COMO SER?

215

UMA BREVE HISTRIA

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

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
16

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.

17

AS 3 CAMADAS DE DESENVOLVIMENTO

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.

HTML5 e CSS3 com Farinha e Pimenta

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 coisas


Ns, 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
20

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.

21

HTML5 e CSS3 com Farinha e Pimenta

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 arrastados, 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.

22

HTML - A ALMA DO CLIENT-SIDE

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

HTML5 e CSS3 com Farinha e Pimenta

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 BernersLee 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 interoperabilidade
Entre 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,
26

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
27

HTML5 e CSS3 com Farinha e Pimenta

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 BernersLee anunciou que trabalharia juntamente com o WHATWG na produo do
28

HTML - A Alma do Client-Side

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 clientside. 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
29

HTML5 e CSS3 com Farinha e Pimenta

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 modular
Antigamente, 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
30

HTML - A Alma do Client-Side

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:
<!DOCTYPE html> <html lang=pt-br> <head> 31

HTML5 e CSS3 com Farinha e Pimenta <meta charset=UTF-8> <title></title> </head> <body> Corpo do site. </body> </html>

O Doctype
O Doctype deve ser sempre a primeira linha de cdigo do documento antes da tag HTML.
<!DOCTYPE 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 HTML
O 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.
<html lang=pt-br>

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
32

HTML - A Alma do Client-Side

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.

HEAD
A 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:
<meta http-equiv=Content-Type content=text/html; charset=utf-8>

O novo cdigo para o HTML5 resumiu bastante as coisas, retirando todo o cdigo intil para ns, deixando a linha acima assim:
<meta charset=utf-8>

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

HTML5 e CSS3 com Farinha e Pimenta

dando a possibilidade de guardarmos todos as letras e smbolos utilizados nos idiomas do mundo. O que o Unicode faz fornecer um nico nmero 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 LINK
H 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:
<link rel=stylesheet type=text/css href=estilo. css>

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:
<link rel=alternate type=application/atom+xml title=feed href=/feed/>

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
34

HTML - A Alma do Client-Side

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
35

HTML5 e CSS3 com Farinha e Pimenta

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 content
Os elementos que compe a categoria Metadata so: base script command style link title meta noscript

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 content
A maioria dos elementos utilizados no body e aplicaes so categorizados como Flow Content. So eles: a abbr address
36

area

article

HTML - A Alma do Client-Side

aside br command div figure hgroup input link meta ol q select sub time text

audio button datalist dl footer hr ins map meter output ruby small sup ul

b canvas del em form i kbd mark nav p samp span svg var

bdo cite details embed h1 at h6 iframe keygen math noscript pre script strong table video

blockquote code dfn fieldset header img label menu object progress section style textarea wbr

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 content
Estes 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
37

HTML5 e CSS3 com Farinha e Pimenta

header de pgina. Era dificlimo localizar o bloco com o texto principal de uma pgina. Com estas tags esse trabalho ficou mais simples.

Heading content
Os 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 content
Fazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de pargrafo. a bdo code em input link meter q select svn textarea Text abbr br command embed ins map noscript ruby small textarea time area button datalist i kbd mark object samp span time var audio canvas del iframe keygen math output script strong var video b vite dfn img label meta progress sup sub video wbr

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

38

HTML - A Alma do Client-Side

audio math

canvas objevt

embed svg

iframe video

img

Interactive content
Interactive Content so elementos que fazem parte da interao de usurio. a iframe menu audio img object button input select details keygen textarea embed label 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,
39

HTML5 e CSS3 com Farinha e Pimenta

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

HTML - A Alma do Client-Side

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
41

HTML5 e CSS3 com Farinha e Pimenta

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 NAV
O elemento nav representa uma seo da pgina que contm links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contm links importantes. 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:
<div class=categ categ-esporte> <h3>Esporte</h3> <ul> <li><a href=#>Copa 2014</a></li> <li><a href=#>Brasileiro</a></li> <li><a href=#>Frmula 1</a></li> <li><a href=#>Baskete</a></li> </ul> </div>

42

HTML - A Alma do Client-Side

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:
<nav> <h3>Esporte</h3> <ul> <li><a href=#>Copa 2014</a></li> <li><a href=#>Brasileiro</a></li> <li><a href=#>Frmula 1</a></li> <li><a href=#>Baskete</a></li> </ul> </nav>

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:
<nav> <h3>Esportes</h3> <ul> <li><a href=#>Copa 2014</a></li> <li><a href=#>Brasileiro</a></li> 43

HTML5 e CSS3 com Farinha e Pimenta <li><a href=#>Frmula 1</a></li> <li><a href=#>Baskete</a></li> </ul> <h3>Educao</h3> <ul> <li><a href=#>Educao</a></li> <li><a href=#>Dicionrios</a></li> <li><a href=#>Vestibular</a></li> </ul> <h3>Notcias</h3> <ul> <li><a href=#>Cotidiano</a></li> <li><a href=#>Poltica</a></li> <li><a href=#>Jornais</a></li> </ul> </nav>

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
44

HTML - A Alma do Client-Side

A especificao diz: The article element represents a component of a page that consists of a selfcontained 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:
<article> <header> <h1>Ttulo do post</h1> <time datetime=12-03-1983 pubdate=pubdate>03 de Dezembro de 1983</time> <p>Texto de introduo.</p> </header> <h2>Um outro ttulo</h2> <p>Texto do post.</p> <p>Texto do post.</p> <p>Texto do post.</p> </article>

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


45

HTML5 e CSS3 com Farinha e Pimenta

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 ASIDE
O 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:
<aside id=menulateral> <nav> <h3>Esportes</h3> <ul> <li><a href=#>Frmula 1</a></li> <li><a href=#>Futebol</a></li> 46

HTML - A Alma do Client-Side <li><a href=#>Baskete</a></li> <li><a href=#>Voley</a></li> </ul> </nav> <nav> <h3>Poltica</h3> <ul> <li><a href=#>Eleies 2010</a></li> <li><a href=#>Urna eletrnica</a></li> <li><a href=#>Candidatos</a></li> </ul> </nav> </aside>

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
47

HTML5 e CSS3 com Farinha e Pimenta

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

HTML - A Alma do Client-Side

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.

49

HTML5 e CSS3 com Farinha e Pimenta

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.

50

HTML - A Alma do Client-Side

ELEMENTOS Ou ATRIBuTOS DESCONTINuADOS


Os elementos abaixo foram descontinuados por que seus efeitos so apenas visuais: basefont strike big tt center u font s

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. dir Ficou obsoleto em favor da tag ul.

51

HTML5 e CSS3 com Farinha e Pimenta

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 Local Storage Histrico de Sesso Aplicaes Offline Novos tipos de campos Form: Autofocus Form: Autocomplete Safari sim sim sim sim sim no Chrome sim sim sim sim sim no Opera sim sim no sim sim sim Firefox sim sim sim no no no IE8 sim sim no no no no IE9 sim sim no no no no

52

HTML - A Alma do Client-Side

Form: Required Video, Audio e Canvas Text

sim sim

sim sim

sim sim

no sim

no no

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.

53

HTML5 e CSS3 com Farinha e Pimenta

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 compatibilidade
Quando 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 Modernizr
Modernizr 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
54

HTML - A Alma do Client-Side

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:
<!DOCTYPE html> <html lang=pt-br> <head> <meta charset=utf-8> <title>Teste de Modernizr</title> <script src=modernizr-2.0.6.js></script> </head> <body> </body> </html>

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


<html class=no-js lang=pt-br>

55

HTML5 e CSS3 com Farinha e Pimenta

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:
<html class= js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase noindexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths lang=pt-br>

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 noantes 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 utilidade
Exemplo 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
56

HTML - A Alma do Client-Side

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.

57

FORMULRIOS E MULTIMDIA

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:

tel
Telefone. 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.

search
Um campo de busca. A aparncia e comportamento do campo pode mudar

HTML5 e CSS3 com Farinha e Pimenta

ligeiramente dependendo do agente de usurio, para parecer com os demais campos de busca do sistema.

email
E-mail, com formatao e validao. O agente de usurio pode inclusive promover a integrao com sua agenda de contatos.

url
Um endereo web, tambm com formatao e validao.

DATAS E HORAS
datetime-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 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.

60

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.

number
Veja um exemplo do tipo number com seus atributos opcionais:
<!DOCTYPE html> <html lang=en-US> <head> <meta charset=UTF-8> <title>Number type</title> </head> <body> <input name=valuex type=number value=12.4 step=0.2 min=0 max=20> </body> </html>

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

61

HTML5 e CSS3 com Farinha e Pimenta

range
Vamos modificar, no exemplo acima, apenas o valor de type, mudando de number para range:
<!DOCTYPE html> <html lang=en-US> <head> <meta charset=UTF-8> <title>Range type</title> </head> <body> <input name=valuex type=range value=12.4 step=0.2 min=0 max=20> </body> </html>

Novamente, Opera 10:

62

Formulrios e Multimdia

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:


<input name=login autofocus >

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
63

HTML5 e CSS3 com Farinha e Pimenta

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


<!DOCTYPE html> <html lang=en-US> <head> <meta charset=UTF-8> <title>Placeholder, the old style</title> </head> <body> <input name=q value=Search here onfocus=if(this.value==Search here)this.value=> </body> </html>

HTML5 nos permite fazer isso de maneira muito mais elegante:


<!DOCTYPE html> <html lang=en-US> <head> <meta charset=UTF-8> <title>Placeholder, HTML5 way</title> </head> <body> <input name=q placeholder=Search here> </body> </html>

required
Para tornar um campo de formulrio obrigatrio (seu valor precisa ser preenchido) basta, em HTML5, incluir o atributo required:
<input name=login required>

64

Formulrios e Multimdia

maxlength
Voc 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:
<!DOCTYPE html> <html lang=pt-BR> <head> <meta charset=UTF-8> <title>O atributo pattern</title> </head> <body> <form> <label for=CEP>CEP: <input name=CEP id=CEP required pattern=\d{5}-?\d{3}> </label> 65

HTML5 e CSS3 com Farinha e Pimenta <input type=submit value=Enviar> </form> </body> </html>

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:
<!DOCTYPE html> <html lang=pt-BR> <head> <meta charset=UTF-8> <title>Salvando rascunho</title> <style> label{display:block;} </style> </head> <body> <form> <label>nome: <input name=nome required></ label> <label>email: <input name=email type=email required></label> <label>mensagem: <textarea name=mensagem required></textarea></label> <input type=submit name=action value=Salvar rascunho formnovalidate> <input type=submit name=action value=Enviar> 66

Formulrios e Multimdia </form> </body> </html>

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 tratlo. Veja, por exemplo, este formulrio com validao de CPF:
<!DOCTYPE html> <html lang=pt-BR> <head> <meta charset=UTF-8> <title>Custom validator</title> <!-- O arquivo cpf.js contm a funo validaCPF, que recebe uma string e retorna true ou false. --> <script src=cpf.js></script> 67

HTML5 e CSS3 com Farinha e Pimenta <script> function vCPF(i){ i.setCustomValidity(validaCPF(i. value)?:CPF invlido!) } </script> </head> <body> <form> <label>CPF: <input name=cpf oninput=vCPF(this)></label> <input type=submit value=Enviar> </form> </body> </html>

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:
<details> <summary>Copiando <progress max=39248 value=14718> 37,5%</summary> <dl> <dt>Tamanho total:</dt> <dd>39.248KB</dd> <dt>Transferido:</dt> <dd>14.718</dd> 68

Formulrios e Multimdia <dt>Taxa de transferncia:</dt> <dd>127KB/s</dd> <dt>Nome do arquivo:</dt> <dd>HTML5.mp4</dd> </dl> </details>

Veja como um agente de usurio poderia renderizar isso:

E ao clicar:

69

HTML5 e CSS3 com Farinha e Pimenta

CONTEDO EDITVEL
Para tornar um elemento do HTML editvel, basta incluir nele o atributo contenteditable, assim:
<div contenteditable=true> Edite-me... </div>

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

Formulrios e Multimdia

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 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.
<!DOCTYPE HTML> <html> <head> <meta content=text/html; charset=UTF-8 http-equiv=content-type/> <title>HTML5 Drag and drop demonstration</title> <style type=text/css> 71

HTML5 e CSS3 com Farinha e Pimenta #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;} </style> <script type=text/javascript> // Quando o usurio inicia um drag, guardamos no dataset do evento // o id do objeto sendo arrastado function dragStart(ev) { ev.dataTransfer.setData(ID, ev.target. getAttribute(id)); } // Quando o usurio arrasta sobre um dos painis, retornamos // false para que o evento no se propague para o navegador, o // que faria com que o contedo fosse selecionado. function dragOver(ev) { return false; } // Quando soltamos o elemento sobre um painel, movemos o // elemento, lendo seu id do dataset do evento function dragDrop(ev) { var idelt = ev.dataTransfer. getData(ID); ev.target.appendChild(document. 72

Formulrios e Multimdia getElementById(idelt)); } </script> </head> <body> <!-- Painel 1 --> <div id=boxA ondrop=return dragDrop(event) ondragover=return dragOver(event)> <!-- Draggable 1 --> <div id=drag draggable=true ondragstart=return dragStart(event)>drag me</ div> <!-- Draggable 2 --> <div id=drag2 draggable=true ondragstart=return dragStart(event)>drag me</ div> </div> <!-- Painel 2 --> <div id=boxB ondrop=return dragDrop(event) ondragover=return dragOver(event)> </div> </body> </html>

Exemplo Segue 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
73

HTML5 e CSS3 com Farinha e Pimenta

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:
<audio src=mus.oga controls=true autoplay=true>

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 udio


Todo 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:
<audio controls=true autoplay=true> <source src=mus.oga> <source src=mus.mp3> <source src=mus.wma> 74

Formulrios e Multimdia </audio>

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:
<audio controls=true autoplay=true> <source src=mus.oga> <source src=mus.mp3> <source src=mus.wma> <p>Faa o <a href=mus.mp3>download da msica</ a>.</p> </audio>

VDEO
O uso de vdeo muito semelhante ao de udio:
<video src=u.ogv width=400 height=300>

E com vrios elementos source:


<video controls=true autoplay=true width=400 height=300> <source src=u.ogv> <source src=u.mp4> <source src=u.wmv> <p>Faa o <a href=u.mp4>download do vdeo</a>.</ p> </video>

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
75

HTML5 e CSS3 com Farinha e Pimenta

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, usase 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:
<source src=video.ogv type=video/ogg; codecs=theora, vorbis>

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:
<source src=video.mp4 type=video/mp4; codecs=mp4v.20.240, mp4a.40.2>

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
76

Formulrios e Multimdia

usurio, assim:
<device type=media>

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:
<!DOCTYPE html> <html lang=en-US> <head> <meta charset=UTF-8> <title>Videochat, step 1</title> <script> function update(stream) { document.getElementsByTagName(video)[0].src = stream.url; } </script> </head> <body> <p>To start chatting, select a video camera: <device type=media onchange=update(this.data)></p> <video autoplay> </body> </html> 77

HTML5 e CSS3 com Farinha e Pimenta

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.

78

Formulrios e Multimdia

79

5
MATHML

A NOVA GERAO DE APLICAES WEB I

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:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>MathML</title> </head> <body> <math xmlns=http://www.w3.org/1998/Math/MathML> <mrow> <mi>x</mi> <mo>=</mo> <mfrac> <mrow> <mo form=prefix>&minus;</mo> <mi>b</mi> <mo>&PlusMinus;</mo> <msqrt>

HTML5 e CSS3 com Farinha e Pimenta <msup> <mi>b</mi> <mn>2</mn> </msup> <mo>&minus;</mo> <mn>4</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> <mo>&InvisibleTimes;</mo> <mi>c</mi> </msqrt> </mrow> <mrow> <mn>2</mn> <mo>&InvisibleTimes;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </body> </html>

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
82

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 &InvisibleTimes;, 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 &InvisibleTimes;? Voc vai notar que se remover a entidade e a tag mo correspondente o resultado visual ser o mesmo. Colocamos &InvisibleTimes; 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:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>SVG</title> </head> <body> <svg width=400 height=400> <!-- Um retngulo: --> <rect x=10 y=10 width=150 height=50 stroke=#000000 stroke-width=5 fill=#FF0000> <!-- Um polgono: --> <polygon fill=red stroke=blue 83

HTML5 e CSS3 com Farinha e Pimenta stroke-width=10 points=250,75 279,161 369,161 297,215 323,301 250,250 177,301 203,215 131,161 221,161> <!-- Um crculo --> <circle cx=70 cy=240 r=60 stroke=#00FF00 stroke width=5 fill=#FFFFFF> </svg> </body> </html>

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.

84

A Nova Gerao de Aplicaes Web I

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:
<canvas id=x width=300 height=300></canvas>

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:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Canvas API</title> </head> <body> <canvas id=x width=300 height=300></canvas> <button onclick=desenhar()>desenhar</button> <script> function desenhar(){ 85

HTML5 e CSS3 com Farinha e Pimenta // 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() } </script> </body> </html>

86

A Nova Gerao de Aplicaes Web I

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
87

HTML5 e CSS3 com Farinha e Pimenta

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.

88

A Nova Gerao de Aplicaes Web I

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

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

89

HTML5 e CSS3 com Farinha e Pimenta

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.

90

A Nova Gerao de Aplicaes Web I

VAMOS S DIFERENAS
GETELEMENTSByCLASSNAME

Esse um sonho antigo de todo desenvolvedor Javascript. Com HTML5 voc pode fazer:
destaques = document.getElementsByClassName(destaq ue)

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 += <li>+nome+</li> }

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

HTML5 e CSS3 com Farinha e Pimenta

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:
<!DOCTYPE html> <html lang=pt-BR> <head> <meta charset=UTF-8> <title>Notifier</title> <script> function notify(text){ document.getElementById(msg). innerHTML+=<p>+text+</p> titleFlick() } function titleFlick(){ if(document.hasFocus()){ document.title=Notifier return } document.title=document.title==Notifier?* Notifier:Notifier setTimeout(titleFlick(),500) } </script> </head> <body> <input type=button id=notify value=Notify in 5 seconds onclick=notify(Will notify in 5 seconds...);setTi meout(notify(\Event shoot!\),5000)> <div id=msg></div> </body> 92

A Nova Gerao de Aplicaes Web I

</html>

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

93

HTML5 e CSS3 com Farinha e Pimenta

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
94

A Nova Gerao de Aplicaes Web I

propriedade head, maneira tambm muito conveniente de acessar o elemento head.

SELECTOR API
A 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 . 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:
<!DOCTYPE html> <html lang=pt-BR> 95

HTML5 e CSS3 com Farinha e Pimenta <head> <meta charset=UTF-8> <title>Zebra</title> <style> .zebraon{background:silver} </style> <script> window.onload=function(){ var zebrar=document.querySelectorAll(.zebra tbody tr) for(var i=0;i<zebrar.length;i+=2) zebrar[i].className=zebraon } </script> </head> <body> <table class=zebra> <thead><tr> <th>Vendedor</th> <th>Total</th> </tr></thead> <tbody><tr> <td>Manoel</td> <td>12.300,00</td> </tr><tr> <td>Joaquim</td> <td>21.300,00</td> </tr><tr> <td>Maria</td> <td>13.200,00</td> </tr><tr> <td>Marta</td> <td>32.100,00</td> </tr><tr> <td>Antonio</td> <td>23.100,00</td> </tr><tr> <td>Pedro</td> <td>31.200,00</td> </tr></tbody> </table> </body> </html>

96

A Nova Gerao de Aplicaes Web I

CARACTERSTICAS ESPECIAIS DE DOMNODELIST


As listas de elementos retornadas pelos mtodos do DOM no so Arrays comuns, so objetos DomNodeList, o que significa que, entre outros mtodos especiais, voc pode usar list[0] ou list(0) para obter um elemento da lista. Tambm pode usar list[name] ou list(name) para obter um objeto por seu nome. Duas adies interessantes do HTML5 ao usar este ltimo mtodo: O objeto buscado pelos atributos name ou id. Uma lista de campos de formulrio com o mesmo valor no atributo name (uma lista de radio buttons, por exemplo) ser retornada caso mais de um objeto seja encontrado. Essa lista contm um atributo especial, value, muito conveniente. Ele contm o valor do radio marcado e, ao ser setado, marca o radio correspondente.

DATASETS
Voc pode atribuir dados arbitrrios a um elemento HTML qualquer, prefixando seus atributos com data-. Por exemplo:
<img src=computador1.jpg alt=Novo GNexius Forethinker id=c1 data-processor=35Ghz data-memory=48GB data-harddrive=16TB data-screen=45 >

Voc pode acessar esses valores via Javascript, atravs do atributo dataset, assim:
var img=document.getElementById(c1) proc=img.dataset.processor

As propriedades de dataset tm permisso de leitura e escrita.

97

HTML5 e CSS3 com Farinha e Pimenta

NOVOS EVENTOS DOM


UMA PALAVRA SOBRE EVENTOS
O suporte ao tratamento de eventos disparados pelo usurio parte essencial do DOM. HTML5 oferece a voc um extenso conjunto de novos eventos. Vamos dar uma olhada nos mais interessantes:

ELEMENTOS MuLTIMDIA
oncanplay O elemento audio ou video j tem dados suficientes no buffer para comear a tocar. oncanplaythrough O elemento audio ou video j tem dados suficientes no buffer para comear a tocar e, se a tranferncia de dados continuar no ritmo em que est ocorrendo, estima-se que tocar at o final sem interrupes. ondurationchange O elemento audio ou video teve seu atributo duration modificado. Isso acontece, por exemplo, ao alterar a origem da mdia. onemptied O elemento audio ou video teve um erro de retorno vazio de dados da rede. O retorno vazio acontece quando, por exemplo, voc tenta invocar o mtodo play de um elemento que ainda no tem uma origem de mdia definida. onended O vdeo ou udio chegou ao fim. onloadeddata Os dados comearam a ser carregados e a posio atual de playback j pode
98

A Nova Gerao de Aplicaes Web I

ser renderizada. onloadedmetadata Os metadados foram carregados. J sabemos as dimenses, formato e durao do vdeo. onloadstart Os dados comearam a ser carregados. onpause O usurio clicou em pause. onplay O usurio clicou em play ou o playback comeou por causa do atributo autoplay. onplaying O vdeo ou udio est tocando. onprogress O agente de usurio est buscando dados do vdeo ou udio.

EVENTOS EM CAMPOS DE FORMuLRIO


oninput O usurio entrou com dados no campo. oninvalid O campo no passou pela validao.

99

HTML5 e CSS3 com Farinha e Pimenta

EVENTOS GERAIS
oncontextmenu O usurio disparou um menu de contexto sobre o objeto. Na maioria dos sistemas Desktop, isso significa clicar com o boto direito do mouse ou segurando uma tecla especial. onmousewheel A rodinha do mouse foi acionada. onbeforeprint Disparado antes da impresso da pgina. Voc pode us-lo para modificar, esconder ou exibir elementos, preparando a pgina para impresso. onafterprint Disparado aps a impresso da pgina. Voc pode us-lo para reverter o status anterior impresso. onhashchange A ltima poro da URL, aps o hash (#), foi modificada. onoffline O agente de usurio ficou offline. ononline O agente de usurio est novamente conectado. onredo O usurio disparou a ao de Refazer. onundo O usurio disparou a ao de Desfazer.

100

A Nova Gerao de Aplicaes Web I

DRAG-AND-DROP
ondrag ondragleave ondrop ondragend ondragover ondragenter ondragstart

ATRIBuTOS DE EVENTO
A especificao do HTML5 padronizou um formato de atribuio de eventos que j era amplamente utilizado. Voc pode atribuir eventos atravs de atributos HTML com o nome do evento. Por exemplo:
<input onblur=return verifica(this)>

claro que voc pode continuar usando o mtodo do DOM addEventListener, com a vantagem de poder atribuir vrios listeners ao mesmo evento.

MENUS E TOOLBARS
O ELEMENTO MENu
O elemento menu usado para definir menus e barras de ferramenta. Dentro do menu, voc pode inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos menu. Para definir comandos, voc pode inserir: Um link, um elemento a com atributo href; Um boto, um elemento button; Um boto, um elemento input com o atributo type contendo button,

101

HTML5 e CSS3 com Farinha e Pimenta

submit, reset ou image; Um radiobutton, um elemento input com o atributo type contendo radio; Um checkbox, um elemento input com o atributo type contendo checkbox; Um elemento select, contendo um ou mais options, define um grupo de comandos Um elemento qualquer com o atributo accesskey Um elemento command

TIPOS DE COMANDO
H trs tipos de comando: command Uma ao comum; checkbox Uma ao que pode estar no status de ligada ou desligada, e alterna entre esses dois stauts quando clicada; radio Uma ao que pode estar no status de ligada ou desligada, e quando clicada vai para o status de ligada, deligando todas as aes com o mesmo valor no atributo radiogroup; Da lista de elementos possveis para definir comandos, os trs primeiros, link, button e input button, definem comandos do tipo command. O quarto elemento, radiobutton, define um comando do tipo radio. O quinto, checkbox, define um comando do tipo checkbox. O sexto elemento, o select, vai definir um grupo de comandos. Se o select tiver o atributo multiple, definir uma lista de comandos do tipo checkbox. Caso contrrio, os comandos sero do tipo radio, tendo o mesmo radiogroup.

102

A Nova Gerao de Aplicaes Web I

No stimo caso, um elemento qualquer com tecla de acesso, o tipo de comando vai depender do tipo de elemento que recebeu accesskey.

O ELEMENTO COMMAND
Por fim, temos o oitavo mtodo, o elemento command. Neste caso o tipo de comando depender do valor do atributo type. Veja um exemplo de como us-lo:
<command type=command label=Salvar onclick=salvar() >

Prefira no usar command, por enquanto


Por que a especificao permite que se use o novo elemento command para definir comandos, e ao mesmo tempo permite que se use os velhos elementos como input, button e select para isso? Para possibilitar ao desenvolvedor oferecer alguma compatibilidade com navegadores antigos. Veja este exemplo:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Menus</title> </head> <body> <menu type=toolbar> <li> <menu label=File> <button type=button onclick=fnew()>New...</button> <button type=button onclick=fopen()>Open...</button> 103

HTML5 e CSS3 com Farinha e Pimenta <button type=button onclick=fsave()>Save</button> <button type=button onclick=fsaveas()>Save as...</button> </menu> </li> <li> <menu label=Edit> <button type=button onclick=ecopy()>Copy</button> <button type=button onclick=ecut()>Cut</button> <button type=button onclick=epaste()>Paste</button> </menu> </li> <li> <menu label=Help> <li><a href=help.html>Help</a></ li> <li><a href=about.html>About</a></ li> </menu> </li> </menu> </body> </html>

O agente de usurio deveria renderizar algo como:

Um agente de usurio que no conhece o novo elemento menu vai entender esse
104

A Nova Gerao de Aplicaes Web I

cdigo como listas aninhadas com botes e links. E vai renderizar isso assim:

EXEMPLO DE MENu
No est bonito, mas perfeitamente acessvel. E o visual pode ser bem trabalhado com CSS. A mesma coisa poderia ser escrita com o elemento command:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Menus</title> </head> <body> <menu type=toolbar> <menu label=File> <command onclick=fnew() label=New...> <command onclick=fopen() label=Open...> <command onclick=fsave() label=Save> <command onclick=fsaveas() label=Save as...> </menu>

105

HTML5 e CSS3 com Farinha e Pimenta <menu label=Edit> <command onclick=ecopy() label=Copy> <command onclick=ecut() label=Cut> <command onclick=epaste() label=Paste> </menu> <menu label=Help> <command onclick=location=help.html label=Help> <command onclick=location=about.html label=About> </menu> </menu> </body> </html>

Mas um agente de usurio que no conhece os elementos menu e command no vai mostrar absolutamente nada.

TIPOS DE LINKS
LINKS
A possibilidade de linkar documentos o que torna a Web o que ela . Existem duas maneiras principais de linkar documentos, os elementos a e link. O elemento a cria um link no contedo da pgina. Voc conhece sua sintaxe:
<a href=http://visie.com.br>Visie</a>

O elemento link, por sua vez, cria um metadado, um link que no mostrado no contedo, mas o agente de usurio usa de outras maneiras. O uso mais comum vincular um documento a uma folha de estilos:|
106

A Nova Gerao de Aplicaes Web I

<link rel=stylesheet href=estilo.css>

Note o atributo rel=stylesheet. O atributo rel pode estar presente nos elementos a e link, e ter uma srie de valores:

METADADOS DE NAVEGAO
archives author bookmark first help index last license next prefetch os arquivos do site a pgina do autor do documento atual o permalink da seo a que este documento pertence o primeiro documento da srie a qual este pertence ajuda para esta pgina o ndice ou sumrio que inclui o link para esta pgina o ltimo documento da srie a qual este pertence a licensa que cobre este documento o prximo documento da srie a qual este pertence o agente de usurio deve fazer cache desse link em segundo plano to logo o documento atual tenha sido carregado. O autor do documento indica que este link o provvel prximo destino do usurio. o documento anterior da srie a qual este pertence a busca deste site O documento um nvel acima deste

prev search up

O Opera nos d um interessante exemplo de como um agente de usurio pode exibir estes links:

107

HTML5 e CSS3 com Farinha e Pimenta

alternate

um formato alternativo para o contedo atual. Precisa estar acompanhado do atributo type, contendo o tipo MIME do formato. Por exemplo, para indicar o RSS da pgina atual usamos: <link rel=alternate type=application/rss+xml href=rss. xml> o cone que representa esta pgina a URL de pingback desta pgina. Atravs desse endereo um sistema de blogging ou gerenciador de contedo pode avisar automaticamente quando um link para esta pgina for inserido. a folha de estilo linkada deve ser vinculada a este documento para exibio

icon pingback

stylesheet

Comportamento dos links na pgina: external nofollow indica um link externo ao domnio do documento atual indica que o autor do documento atual no endossa o contedo desse link. Os robs de indexao para motores de busca podem, por exemplo, no seguir este link ou levar em conta o nofollow em seu algoritmo de ranking. o agente de usurio no deve enviar o header HTTP Referer se o usurio acessar esse link o link deve ser aberto numa sidebar do navegador, se este recurso estiver disponvel

noreferrer sidebar

108

A NOVA GERAO DE APLICAES WEB II

MICRODATA
SEMNTICA ADICIONAL
D um olhada no seguinte cdigo:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Microdata 1</title> </head> <body> <h1>Resultados do trimestre</h1> <ol> <li> <dl> <dt>nome</dt> <dd>Joaquim</ dd> <dt>total</dt> <dd>10.764</ dd> </dl> </li> <li> <dl> <dt>nome</dt> <dd>Manoel</dd>

HTML5 e CSS3 com Farinha e Pimenta <dt>total</dt> <dd>12.449</ dd> </dl> </li> <li> <dl> <dt>nome</dt> <dd>Antonio</ dd> <dt>total</dt> <dd>9.202</dd> </dl> </li> <li> <dl> <dt>nome</dt> <dd>Pedro</dd> <dt>total</dt> <dd>17.337</ dd> </dl> </li> </ol> </body> </html>

A Microdata API nos permite tornar esta estrutura semntica um pouco mais especfica, definindo o que o contedo de cada elemento. Veja este outro exemplo:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Microdata 2</title> </head> <body> <h1>Resultados do trimestre</h1> <ol> <li> <dl itemscope> <dt>nome</dt> <dd 112

A Nova Gerao de Aplicaes Web II itemprop=nome>Joaquim</dd> <dt>total</dt> <dd itemprop=total>10.764</dd> </dl> </li> <li> <dl itemscope> <dt>nome</dt> <dd itemprop=nome>Manoel</dd> <dt>total</dt> <dd itemprop=total>12.449</dd> </dl> </li> <li> <dl itemscope> <dt>nome</dt> <dd itemprop=nome>Antonio</dd> <dt>total</dt> <dd itemprop=total>9.202</dd> </dl> </li> <li> <dl itemscope> <dt>nome</dt> <dd itemprop=nome>Pedro</dd> <dt>total</dt> <dd itemprop=total>17.337</dd> </dl> </li> </ol> </body> </html>

Adicionamos atributos especias, itemscope e itemprop. Cada elemento itemscope define um item de dados. Cada itemprop define o nome de uma propriedade. O valor da propriedade o contedo da tag HTML. A Microdata API nos fornece acesso especial a esses dados. Veja como acessar esses dados:
resultados=document.getItems() 113

HTML5 e CSS3 com Farinha e Pimenta for(var i=0;i<resultados.length;i++){ alert(resultados[i].properties.nome[0].content+: R$ + resultados[i].properties.total[0].content) }

DIFERENTES TIPOS DE DADOS


No exemplo acima, temos uma listagem de pessoas. Agora imagine que voc precise ter, no mesmo documento, uma listagem de pessoas e carros. Poderia escrever assim:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Microdata 3</title> </head> <body> <h1>Resultados do trimestre</h1> <ol> <li> <dl itemscope=> <dt>nome</dt> <dd itemprop=nome>Joaquim</dd> <dt>total</dt> <dd itemprop=total>10.764</dd> </dl> </li> <li> <dl itemscope=> <dt>nome</dt> <dd itemprop=nome>Manoel</dd> <dt>total</dt> <dd itemprop=total>12.449</dd> </dl> </li> 114

A Nova Gerao de Aplicaes Web II <li> <dl itemscope=> <dt>nome</dt> <dd itemprop=nome>Antonio</dd> <dt>total</dt> <dd itemprop=total>9.202</dd> </dl> </li> <li> <dl itemscope=> <dt>nome</dt> <dd itemprop=nome>Pedro</dd> <dt>total</dt> <dd itemprop=total>17.337</dd> </dl> </li> </ol> <h2>Carros mais vendidos</h2> <ol> <li> <dl itemscope=> <dt>nome</dt> <dd itemprop=nome>Fusca</dd> <dt>total</dt> <dd itemprop=total>382</dd> </dl> </li> <li> <dl itemscope=> <dt>nome</dt> <dd itemprop=nome>Braslia</dd> <dt>total</dt> <dd itemprop=total>298</dd> </dl> </li> <li> <dl itemscope=> <dt>nome</dt> <dd itemprop=nome>Corcel</dd> <dt>total</dt> 115

HTML5 e CSS3 com Farinha e Pimenta <dd itemprop=total>102</dd> </dl> </li> </ol> </body> </html>

Note que pessoas e carros tem propriedades em comum, nome e total. Quando voc executar document.getItems() vai obter uma lista de todos os elementos com itemscope. Como obter uma lista apenas de pessoas ou de carros? Voc pode adicionar a cada item um atributo itemtype, que diz de que tipo de entidade so aqueles dados:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Microdata 4</title> </head> <body> <h1>Resultados do trimestre</h1> <ol> <li> <dl itemscope= itemtype=pessoa> <dt>nome</dt> <dd itemprop=nome>Joaquim</dd> <dt>total</dt> <dd itemprop=total>10.764</dd> </dl> </li> <li> <dl itemscope= itemtype=pessoa> <dt>nome</dt> <dd itemprop=nome>Manoel</dd> <dt>total</dt> <dd itemprop=total>12.449</dd> </dl> </li> 116

A Nova Gerao de Aplicaes Web II <li> <dl itemscope= itemtype=pessoa> <dt>nome</dt> <dd itemprop=nome>Antonio</dd> <dt>total</dt> <dd itemprop=total>9.202</dd> </dl> </li> <li> <dl itemscope= itemtype=pessoa> <dt>nome</dt> <dd itemprop=nome>Pedro</dd> <dt>total</dt> <dd itemprop=total>17.337</dd> </dl> </li> </ol> <h2>Carros mais vendidos</h2> <ol> <li> <dl itemscope= itemtype=carro> <dt>nome</dt> <dd itemprop=nome>Fusca</dd> <dt>total</dt> <dd itemprop=total>382</dd> </dl> </li> <li> <dl itemscope= itemtype=carro> <dt>nome</dt> <dd itemprop=nome>Braslia</dd> <dt>total</dt> <dd itemprop=total>298</dd> </dl> </li> <li> <dl itemscope= itemtype=carro> <dt>nome</dt> <dd itemprop=nome>Corcel</dd> <dt>total</dt> 117

HTML5 e CSS3 com Farinha e Pimenta <dd itemprop=total>102</dd> </dl> </li> </ol> </body> </html>

Agora voc pode executar: document.getItems(carro) para obter s os carros, por exemplo.

FALANDO uM IDIOMA COMuM


Voc deve ter notado que pode definir seus prprios padres de metadados com microdata. Recomendo que, antes de criar seu prprio formato, verifique se o mesmo problema no j foi resolvido por algum. O site www.data-vocabulary.org contm alguns desses formatos padronizados. Por exemplo, para descrever os dados de sua empresa ou organizao, no invente seu prprio formato, use o formato definido em http://www.data-vocabulary. org/Organization. O valor de itemtype deve ser a prpria URL que documenta o formato. Veja como fica:
<!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Visie Padres Web</title> </head> <body> <address itemscope= itemtype=http://datavocabulary.org/Organization></address> <h1 itemprop=name> Visie Padres Web </h1> <div itemprop=address itemscope= itemtype=http://data-vocabulary.org/Address> <p itemprop=street-address> Alameda dos Ubiatans, 257 - Planalto 118

A Nova Gerao de Aplicaes Web II Paulista </p> <p> <span itemprop=locality>So Paulo</ span> - <span itemprop=region>SP</span> - <span itemprop=country-name>Brasil</span> </p> <p itemprop=postal-code> 04070-030 </p> </div> <div itemprop=tel> +55.11.3477-3347 </div> </body> </html>

Claro que a vantagem de usar o formato padronizado ao invs de inventar o seu no apenas no ter o trabalho de pensar os nomes das propriedades. Os sistemas de busca, e outros sistemas que acessem seu site, podem entender e tratar esses dados. O Google j faz isso3.

HISTRICO DE SESSO E API STORAGE


Um dos grandes desafios de usabilidade ao se construir aplicaes web com a tecnologia atual apresentar um modelo de navegao consistente para o usurio. Duas grandes lacunas nos impediam de faz-lo: 1. No havia uma forma simples de fazer com que as aes locais do usurio numa pgina fossem refletidas na prxima. Por exemplo, se o usurio abre e fecha itens em um menu em rvore e em seguida navega para a prxima
3 http://bit.ly/w9Mxn6

119

HTML5 e CSS3 com Farinha e Pimenta

pgina, era muito difcil fazer com que o menu aparece no mesmo estado na segunda pgina. 2. No havia uma forma simples de fazer com que as aes do usurio numa pgina Ajax respondessem corretamente aos botes de controle de histrico do navegador (voltar e avanar). HTML5 traz formas simples de solucionar os dois problemas.

HISTRICO DE SESSO
Voc provavelmente conhece o objeto history do navegador e seus mtodos go, back e forward. Ele nos permite, via javascript, um controle bsico do histrico de navegao. O mesmo controle que o usurio, voltar e avanar. O objeto history foi vitaminado no HTML5 com dois novos mtodos: pushState(data,title[,url]): acrescenta uma entrada na lista de histrico. replaceState(data,title[,url]): modifica a entrada atual na lista de histrico.

Claro, se seu script tentar associar uma URL fora do domnio do script lista de histrico, isso vai resultar numa exceo de segurana. Com isso, voc pode acrescentar itens lista de histrico, associando dados ou mesmo uma URL a eles. Por exemplo, digamos que voc tenha trs elementos de contedo em sua pgina e um script que exiba um por vez de acordo com os cliques do usurio no menu:
function showContent(n){ // Escondemos todos os elementos de contedo for(var i=1;i<4;i++) document.getElementById(cont+i).style. display=none // Exibimos o elemento escolhido document.getElementById(cont+n).style. 120

A Nova Gerao de Aplicaes Web II display=block } Vamos fazer com que nosso script acrescente uma linha de histrico ao selecionar um elemento: function showPage(n){ // Escondemos todos os elementos de contedo for(var i=1;i<4;i++) document.getElementById(cont+i).style. display=none // Exibimos o elemento escolhido document.getElementById(cont+n).style. display=block } function showContent(n){ // Mostramos o contedo escolhido showPage(n) // Salvamos a pgina atual no histrico history.pushState({page:n},Contedo +n) }

Fazendo isso, cada vez que o usurio escolher um item no menu, o elemento ser exibido e uma linha ser acrescentada no histrico. O usurio poder acessar normalmente esses itens de histrico usando o boto de voltar do navegador. Cada vez que ele usar o histrico, ser disparado um evento popstate. Assim, para que nosso script esteja completo, basta tratar esse evento:
function showPage(n){ // Escondemos todos os elementos de contedo for(var i=1;i<4;i++) document.getElementById(cont+i).style. display=none // Exibimos o elemento escolhido document.getElementById(cont+n).style. display=block }

121

HTML5 e CSS3 com Farinha e Pimenta function showContent(n){ // Mostramos o contedo escolhido showPage(n) // Salvamos a pgina atual no histrico history.pushState({page:n},Contedo +n) } // Quando o usurio navegar no histrico, mostramos a pgina relacionada: window.onpopstate=function(e){ if(e.state) showPage(e.page) }

LOCALSTORAGE E SESSIONSTORAGE

At o HTML4, quando precisvamos armazenar dados no agente de usurio que persistissem entre as pginas, usvamos Cookies. Cookies nos permitiam armazenar o status de um menu javascript que precisava ser mantido entre as pginas, lembrar o nome do usurio, o histrico de operaes realizadas por ele ou a ltima vez que ele visitou nosso site. Com o aumento da complexidade das aplicaes baseadas em web, duas grandes limitaes dos Cookies nos incomodam: Interface complexa: o cdigo para armazenar Cookies envolve complexos clculos com datas e controle do nome de domnio. Limite de armazenamento: alguns agentes de usurio permitiam o armazenamento de no mximo 20 Cookies, com apenas 4KB cada. HTML5 traz uma nova maneira de armazenar dados no client, a API Storage. Um objeto Storage possui os mtodos: getItem(key): obtm um valor armazenado no Storage
122

A Nova Gerao de Aplicaes Web II

setItem(key,value) guarda um valor no Storage removeItem(key) exclui um valor do Storage clear() limpa o Storage

Uma outra complicao dos Cookies resolvida pela API Storage o fato de Cookies s armazenarem strings, nos obrigando a serializar arrays e objetos javascript. A especificao da API Storage rege que qualquer valor javascript pode ser armazenado e recuperado. Infelizmente, em alguns dos navegadores em que testamos, os valores so convertidos para strings assim como nos Cookies. Toramos para que os agentes de usurio implementem corretamente esse recurso. Esto disponveis dois objetos no escopo global (window): localStorage e sessionStorage. O objeto localStorage armazena os dados no client sem expirao definida. Ou seja, se o usurio fechar o navegador e voltar ao site semanas depois, os dados estaro l. O sessionStorage armazena os dados durante a sesso atual de navegao. O cdigo para armazenar um valor na Storage se parece com isso: localStorage.setItem(userChoice,33) E quando voc precisar desse valor, em outra pgina:
localStorage.getItem(userChoice)

Essa interface j muito mais simples que a de Cookies. Mas pode ficar melhor. Voc pode usar o Storage como um array. Por exemplo:
if(!sessionStorage[theme]){ sessionStorage[theme]=oldfurniture; }

No h como isso ser mais simples! Alm disso, o espao de armazenamento sugerido pela documentao de 5MB para cada domnio, resolvendo, acredito que por mais uma dcada, o problema de espao de armazenamento
123

HTML5 e CSS3 com Farinha e Pimenta

local.

APLICAES OFFLINE
CACHING
HTML5 prov uma maneira de se indicar ao navegador que elementos so necessrios e devem ser postos em cache para que uma aplicao funcione offline. O exemplo da documentao oficial bastante esclarecedor. D uma olhada na seguinte pgina:
<!DOCTYPE HTML> <html> <head> <title>Clock</title> <script src=clock.js></script> <link rel=stylesheet href=clock.css> </head> <body> <p>The time is: <output id=clock></output></p> </body> </html>

Trata-se de um widget de relgio. Para funcionar, este HTML depende dos arquivos clock.js e clock.css. Para permitir que o usurio acesse esta pgina offile, precisamos escrever um arquivo de manifesto, indicando que URLs devem ser postas em cache. Vamos preparar uma nova verso do widget, contendo o manifesto, que um arquivo com a extenso .manifest e que deve ser servido com o tipo MIME text/cache-manifest. Em nosso caso, o arquivo vai se chamar clock.manifest e ter o seguinte contedo:
CACHE MANIFEST clock1.html 124

A Nova Gerao de Aplicaes Web II clock.css clock.js

Agora veja o HTML com o arquivo de manifesto linkado:


<!DOCTYPE HTML> <html manifest=clock.manifest> <head> <title>Clock</title> <script src=clock.js></script> <link rel=stylesheet href=clock.css> </head> <body> <p>The time is: <output id=clock></output></p> </body> </html>

Note que recomendado que voc insira o prprio HTML principal na lista de URLs do arquivo de manifesto, embora no seja necessrio. Ao encontrar uma pgina com um arquivo de manifesto vinculado, o navegador far cache das URLs listadas no manifesto e da prpria pgina. Note tambm que no necessrio que todas as URLs para cache estejam importadas no documento atual. O arquivo de manifesto pode contar todas as pginas de sua aplicao que forem necessrias para permitir o funcionamento offline, inclusive a navegao entre pginas.

O OBJETO APPLICATIONCACHE
O objeto ApplicationCache controla o status e operaes de caching da pgina. Ele pode ser acessado via javascript, assim:
window.applicationCache

Seu mtodo mais interessante o update(), que faz com que o agente de usurio recarregue o cache da aplicao. Alm disso, ele possui a propriedade
125

HTML5 e CSS3 com Farinha e Pimenta

status, cujo valor numrico pode ser um dos seguintes: 0 - UNCACHED No h um arquivo de manifesto nesta pgina ou apontando para ela 1 - IDLE O objeto ApplicationCache est ocioso. O cache est atualizado. 2 - CHECKING O arquivo de manifesto est sendo baixado e conferido. 3 - DOWNLOADING As URLs vinculadas no manifesto esto sendo baixadas. 4 - UPDATEREADY O cache antigo, mas ainda no foi marcado como obsoleto. 5 - OBSOLETE O cache foi marcado como obsoleto e precisa ser atualizado assim que possvel. O objeto ApplicationCache tambm possui os seguintes eventos, relacionados a sua mudana de status: onchecking ondownloading oncached onprogress onobsolete onnoupdate onupdateready

Como voc pode ver, alm de onerror, temos um evento para cada um dos status da lista acima.

CONTROLE DE STATuS DA APLICAO


No exemplo do relgio acima no h formulrios ou submisses Ajax. O agente
126

A Nova Gerao de Aplicaes Web II

de usurios no troca dados com o servidor. Assim muito fcil fazer sua aplicao rodar offline, mas essa no a realidade da maioria das aplicaes. Vimos no captulo anterior como fazer armazenamento local de dados. Com isso, voc pode armazenar os dados que o navegador deveria enviar para o servidor enquanto a aplicao estiver offline e, to logo ela esteja online, enviar tudo. Para saber se a aplicao est online, basta acessar a propriedade onLine do objeto window.navigator:
function salva(dados){ if(window.navigator.onLine){ enviaAjax(dados) }else{ salvaLocal(dados) } }

E para disparar o envio quando a aplicao estiver online e avisar o usurio quando ela estiver offline, usamos os eventos ononline e onoffline do objeto window:
window.ononline=function(){ enviaAjax(obtemLocal()) document.getElementById(warning).innerHTML= } window.onoffline=function(){ document.getElementById(warning). innerHTML=Aplicao offline. }

SCROLL IN TO VIEW E HIDDEN


Um truque simples, mas muito til. Voc pode fazer:
127

HTML5 e CSS3 com Farinha e Pimenta

document.getElementById(aviso).scrollIntoView()

Isso vai rolar a pgina at que o elemento com o id aviso esteja visvel no topo do viewport. Voc pode passar um parmetro opcional top:
document.getElementById(aviso). scrollIntoView(false)

O valor default true. Se voc passar false, a rolagem vai deixar o objeto visvel na base do viewport.

HIDDEN

Ocultar e exibir elementos uma das tarefas mais comuns em Javascript. Em HTML5 existe um atributo especfico para isso, o atributo hidden. Ao inserlo em um elemento assim:
<div hidden>Xi, se esconde!</div>

Ou assim:
<div hidden=true>Xi, se esconde!</div>

O elemento estar oculto.


HIDDEN E

JAVASCRIPT

Acessar o atributo hidden em Javascript muito conveniente:


function switchElement(elm){ if(elm.hidden) elm.hidden=false else elm.hidden=true 128

A Nova Gerao de Aplicaes Web II }

Claro, voc pode fazer:


function switchElement(elm){ elm.hidden=!elm.hidden }

Sugiro que voc sempre use o atributo hidden. Descobrir se o elemento est oculto lendo as propriedades display e visibility do CSS, alm de dar mais trabalho, pode gerar confuso.

GEOLOCATION API
MTODOS DE GEOLOCALIZAO
H trs populares maneiras de um agente de usurio descobrir sua posio no globo: Geolocalizao IP o mtodo usado pela maioria dos navegadores web em computadores. Atravs de consultas whois e servios de localizao de IP, vai determinar a cidade ou regio em que voc est.

Triangulao GPRS
Dispositivos conectados a uma rede de celulares e sem um GPS, ou com o GPS desligado, podem determinar sua posio pela tringulao das antenas GPRS prximas. bem mais preciso que o mtodo baseado em IP, vai mostrar em que parte do bairro voc est.

GPS
o mtodo mais preciso. Em condies ideais, a margem de erro de apenas
129

HTML5 e CSS3 com Farinha e Pimenta

5 metros. Embora essas sejam as trs maneiras mais populares de se resolver o problema, podem no ser as nicas. Alguns agentes de usurio podem usar uma combinao desses mtodos, ou mesmo um novo mtodo que venha a ser inventado. Por isso, a Geolocation API agnstica em relao ao mtodo usado. H apenas uma maneira de ligar e desligar o modo de alta preciso, o que vai ter significado diferente em cada agente de usurio. Para obter a posio do usurio, basta executar o script:
navigator.geolocation.getCurrentPosition(showpos)

Onde showpos uma funo callback, que vai receber um objeto de posicionamento. Veja um exemplo:
function showpos(position){ lat=position.coords.latitude lon=position.coords.longitude alert(Your position: +lat+,+lon) }

Claro, voc pode fazer o que quiser, abrir um mapa, submeter a posio via Ajax, enviar os dados para um webservice, etc. O mtodo getCurrentPosition recebe dois outros parmetros. O primeiro uma funo para tratamento de erro. O segundo, um objeto de configurao.

TRATANDO ERROS
O usurio pode escolher se deseja ou no compartilhar sua posio com o site. Alm de o usurio poder dizer no, muita coisa pode dar errado na hora de obter a geolocalizao. Para tratar isso, voc pode passar o segundo parmetro a getCurrentPosition:
navigator.geolocation.getCurrentPosition(showpos,erropo 130

A Nova Gerao de Aplicaes Web II s)

Caso algo d errado, a funo erropos vai receber um objeto PositionError, que tem o atributo code, que pode ter um dos seguintes valores: 1 - Permisso negada O usurio clicou em no compartilhar. 2 - Posio indisponvel O agente de usurio est desconectado, os satlites de GPS no puderam ser alcanados ou algum erro semelhante. 3 - Timeout Tempo esgotado ao obter uma posio. Voc pode definir o tempo mximo ao chamar getCurrentPosition. 0 - Erro desconhecido Alguma outra coisa impediu o agente de usurio de obter uma posio.

NO TRATE A RESPOSTA DO uSuRIO COMO uM ERRO


Em sua funo de tratamento de erro, se obtiver o cdigo de erro 1, por favor, no incomode o usurio com mensagens de erro. Ele escolheu no compartilhar sua posio com o site. Talvez a melhor atitude seja no fazer nada nesse momento.

O OBJETO DE CONFIGuRAO
O terceiro parmetro de getCurrentPosition um objeto de configurao, que pode ter as seguintes propriedades: enableHighAccuracy Se true, liga o modo de alta preciso. Num celular isso pode instruir o
131

HTML5 e CSS3 com Farinha e Pimenta

navegador, por exemplo, a usar o GPS ao invs da triangulao GPRS timeout O tempo em milissegundos que o agente do usurio vai esperar pela posio antes de disparar um erro tipo 3. maximumAge O tempo, em milissegundos, que o navegador pode cachear a posio.

WATCHPOSITION

Se o que voc deseja rastrear a posio do usurio continuamente, pode usar, ao invs de getCurrentPosition, o mtodo watchPosition. Ele tem a mesma assinatura de getCurrentPosition:
w=navigator.geolocation. watchPosition(showpos,erropos)

A diferena que a funo showpos ser chamada toda vez que a posio do usurio mudar. O valor de retorno um nmero, que pode ser usado posteriormente para cancelar o watcher:
navigator.geolocation.clearWatch(w)

UNDO
O OBJETO UNDOMANAGER
O agente de usurio deve armazenar um histrico de alteraes para cada documento carregado. Esse histrico controlado pelo objeto UndoManager, acessvel atravs de window.undoManager. O histrico guarda dois tipos de alteraes: Alteraes DOM
132

A Nova Gerao de Aplicaes Web II

O prprio histrico de alteraes do navegador, as alteraes DOM so inseridas automaticamente no histrico quando o usurio usa um campo de edio. Objetos undo Os objetos undo so inseridos no histrico e controlados pelos seus scripts. Por exemplo, uma aplicao de e-mail pode guardar um objeto undo representando o fato de que o usurio moveu um e-mail de uma pasta para outra. O objeto UndoManager possui os seguintes mtodos e propriedades: Mtodo length position add(data,title) Descrio O nmero de entradas no histrico O nmero da entrada atual no histrico Adiciona uma entreada especfica no histrico. Data pode ser um objeto literal com dados arbitrrios. Title como essa entreda vai aparecer descrita na lista do histrico Remove uma entrada especfica do histrico Remove todas as entradas antes da atual no histrico Remove todas as entradas aps a atual no histrico

remove(index) clearUndo() clearRedo()

Alm disso, os itens no histrico podem ser acessados com window. undoManager[index].

RESPONDENDO S AES DE uNDO E REDO


Cada vez que o usurio disparar uma ao de undo ou redo, e o item do histrico for um objeto undo, ser disparado o evento correspondente, window.onundo ou window.onredo. As funes associadas a estes eventos recebero como parmetro um objeto event, contendo uma propriedade data, cujo valor o objeto undo que voc inseriu no histrico.

133

HTML5 e CSS3 com Farinha e Pimenta

Veja o exemplo:
window.onundo=function(e){ alert(Refazer a alterao: +e.data) }

DISPARANDO AS AES DE uNDO E REDO


Se voc quiser oferecer em sua aplicao botes para undo e redo, basta que eles executem:
document.execCommand(undo)

Ou:
document.execCommand(redo)

134

CSS

O QUE CSS?
O CSS formata a informao que entregue pelo HTML. Essa informao pode ser qualquer coisa: imagem, texto, vdeo, udio ou qualquer outro elemento criado. Grave isso: CSS formata a informao. Essa formatao na maioria das vezes visual, mas no necessariamente. No CSS Aural, ns manipulamos o udio entregue ao visitante pelo sistema l a tela. Ns controlamos volume, profundidade do som, tipo da voz ou em qual caixa de som a voz sair. De certa forma voc est formatando a informao que est em formato de udio e que o visitante est consumindo ao entrar no site. O CSS prepara essa informao para que ela seja consumida da melhor maneira possvel. Basicamente as atualizaes do HTML5 foram a criao de novas tags, a mudana do significado de alguns elementos que foram modificados e outras tags que foram descontinuadas. As novidades interessantes ficaram para o pessoal que conhece Javascript. As APIs que o HTML5 disponibilizou so sem dvida uma das features mais aguardadas por todos estes desenvolvedores. Diferentemente do CSS3 que trouxe mudanas drsticas para a manipulao e transio visual dos elementos do HTML. Com o CSS que ns conhecemos podemos formatar algumas caractersticas bsicas: cores, background, caractersticas de font, margins, paddings, posio e controlamos de uma maneira muito artesanal e simples a estrutura do site

HTML5 e CSS3 com Farinha e Pimenta

com a propriedade float. Voc deve pensar: mas com todas as caractersticas ns conseguimos fazer sites fantsticos, com design atraente e com a manuteno relativamente simples. E eu concordo com voc, mas outras caractersticas que ns no temos controles e dependemos de: 1) Algum programa visual como o Photoshop para criarmos detalhes de layout; 2) Javascript para tratarmos comportamentos ou manipularmos elementos especficos na estrutura do HTML; 3) Estrutura e controle dos elementos para melhorarmos acessibilidade e diversos aspectos do SEO; Com as atualizaes do CSS3 e com os browsers atualizando o suporte do CSS2.1, ns entramos em um patamar onde sem dvida o CSS a arma mais poderosa para o designer web. Segue uma pequena lista dos principais pontos que podemos controlar agora: 4) selecionar primeiro e ltimo elemento; 5) selecionar elementos pares ou mpares; 6) selecionarmos elementos especficos de um determinado grupo de elementos; 7) gradiente em textos e elementos; 8) bordas arredondadas; 9) sombras em texto e elementos; 10) manipulao de opacidade; 11) controle de rotao; 12) controle de perspectiva; 13) animao; 14) controle bsico de 3D 15) estruturao independente da posio no cdigo HTML; Vamos passar basicamente por algumas novidades do CSS e entender como essas novidades podem nos ajudar a fazer websites mais dinmicos e
138

CSS

interessantes.

O QuE uM SELETOR?
Um seletor representa uma estrutura. Essa estrutura usada como uma condio para determinar quais elementos de um grupo de elementos sero formatados. Seletores encadeados e seletores agrupados so a base do CSS. Voc aprende naturalmente durante o uso do dia a dia. Para voc lembrar o que so seletores encadeados e agrupados segue um exemplo abaixo: Exemplo de seletor encadeado:
div p strong a { color: red; }

Este seletor formata o link (a), que est dentro de um strong, que est dentro de P e que por sua vez est dentro de um DIV. Exemplo de seletor agrupado:
strong, em, span { color: red; }

Voc agrupa elementos separados por vrgula para que herdem a mesma formatao. Estes seletores so para cobrir suas necessidades bsicas de formatao de elementos. Eles fazem o simples. O que vai fazer voc trabalhar menos, escrever menos cdigo CSS e tambm menos cdigo Javascript so os seletores complexos.

139

HTML5 e CSS3 com Farinha e Pimenta

SELETORES COMPLEXOS
A sintaxe do CSS simples:
seletor { propriedade: valor; }

A propriedade a caracterstica que voc deseja modificar no elemento. O valor o valor referente a esta caracterstica. Se voc quer modificar a cor do texto, o valor um Hexadecimal, RGBA ou at mesmo o nome da cor por extenso. At aqui, nada muito diferente. Muitas vezes voc no precisa aprender do que se trata a propriedade, basta saber que existe e se quiser decorar, decore. Propriedades so criadas todos os dias e no um ato de herosmo voc saber todas as propriedades do CSS e seus respectivos valores. Os seletores so a alma do CSS e voc precisa domin-los. com os seletores que voc ir escolher um determinado elemento dentro todos os outros elementos do DOM para format-lo. Boa parte da inteligncia do CSS est em saber a utilizar os seletores de uma maneira eficaz, escalvel e inteligente. Os seletores complexos selecionam elementos que talvez voc precisaria fazer algum script em Javascript para poder marc-lo com uma CLASS ou um ID para ento voc format-lo. Com os seletores complexos voc consegue formatar elementos que antes eram inalcansveis.

EXEMPLO DE FuNCIONAMENTO
Imagine que voc tenha um ttulo (h1) seguido de um pargrafo (p). Voc precisa selecionar todos os pargrafos que vem depois de um ttulo H1. Com os seletores complexos voc far assim:
h1 + p { color:red; 140

CSS }

Esse seletor um dos mais simples e mais teis que j utilizei em projetos por a. No precisei adicionar uma classe com JQuery, no precisei manipular o CMS para marcar esse pargrafo, no precisei fazer nenhum milagre para encontrar os pargrafos que vem logo depois de um H1. Apenas apliquei o seletor CSS e pronto. Abaixo, veja uma lista de seletores complexos e quais as suas funes. No colocarei todas as possibilidades aqui porque podem haver modificaes e novos formatos. Para ter uma lista sempre atualizada, siga o link no final da tabela: PADRO elemento[atr] elemento[atr=x] elemento[atr~=x] elemento[atr^=x] elemento[atr$=x] elemento[atr*=x] SIGNIFICADO Elemento com um atributo especfico. Elemento que tenha um atributo com um valor especfico igual a x. Elemento com um atributo cujo valor uma lista separada por espaos, sendo que um dos valores x. Elemento com um atributo cujo valor comece exatamente com string x. Elemento com um atributo cujo valor termina exatamente com string x. Elemento com um atributo cujo valor contenha a string x. Um elemento que tem o atributo especfico com o valor que separado por hfen comeando com EN (da esquerda para direita). Elemento root do documento. Normalmente o HTML. Selecione um objeto N de um determinado elemento.
141

CSS 2 2 2 3 3 3

elemento[atr|=en]

elemento:root elemento:nth-child(n)

3 3

HTML5 e CSS3 com Farinha e Pimenta

elemento:nth-lastchild(n) elemento:empty elemento:enabled elemento:disabled elemento:checked E>F E+F

Seleciona um objeto N comeando pelo ltimo objeto do elemento. Seleciona um elemento vazio, sem filhos. Incluindo elementos de texto. Seleciona um elemento de interface que esteja habilitado ou desabilidade, como selects, checkbox, radio button etc Seleciona elementos que esto checados, como radio buttons e checkboxes. Seleciona os elementos E que so filhos diretos de F. Seleciona um elemento F que precede imediatamente o elemento E.

3 3

3 3 2 2

Lista atualizada pelo W3C http://www.w3.org/TR/css3-selectors/#selectors

PSEUDO-CLASSES E PSEUDO-ELEMENTOS
H uma diferena muito sensvel entre pseudo-classes e pseudo-elementos. Ambos ajudam o desenvolvedor a encontrar e separar elementos especficos na rvore de objetos do documento HTML. Normalmente temos algumas necessidades ao selecionar determinados elementos que no tem identificao de class ou id no cdigo. A situao se agrava quando no podemos modificar o HTML ou quando o cdigo gerado dinmicamente. Para entender a diferena simples: lembre-se que a pseudo-classe como se voc inserisse uma classe dinmica no elemento. E os pseudo-elementos como se voc inserisse um elemento em uma determinada posio no documento.
142

CSS

Exemplo de pseudo-classe: imagine voc queira formatar o LINK quando o usurio passar o mouse sobre ele. Voc pode manipul-lo pela pseudo-classe :hover. como se o browser colocasse no elemento uma classe no momento que o usurio passasse o mouse no elemento e voc pode formatar essa classe pelo CSS. Exemplo de pseudo-elemento: imagine que voc queira formatar a primeira letra do pargrafo. Voc teria que envolver a primeira letra da primeira palavra do pargrafo com algum elemento - o SPAN serviria - inserir uma classe neste elemento e ento format-lo como o desejado. Sem contar que voc teria que fazer um script - provavelmente em JQuery - para encontrar a primeira letra para poder inserir este elemento. Com a utilizao do pseudo-elemento ::first-letter o browser j encontra este elemento para voc, possibilitando a formatao. Nota: Antigamente, os pseudo-elementos eram escritos como as pseudoclasses, iniciando-os com dois pontos (:). Mas isso causava muita confuso entre os desenvolvedores para distinguir pseudo-elementos de pseudoclasses, por este motivo a especificao foi modificada, fazendo com que os pseudo-elementos sejam escritos iniciando com um par de dois pontos (::), assim os desenvolvedores conseguem diferenciar um pseudo-elemento de uma pseudo-classe.

PSEuDO-CLASSES
As pseudo-classes manipulam um determinado estado do elemento. Todos os elementos tem estados adicionais alm daquele que voc consegue ver. Por exemplo: ao passar o mouse, ao clicar, quando ganha foco e etc. Estes estados podem ser formatados para trazer melhor experincia para o usurio. A formatao destes estados ganha muita importncia em mobiles e tablets, j que a interao normalmente feita com os dedos, fazendo com que o usurio
143

HTML5 e CSS3 com Farinha e Pimenta

tenha um feedback sensitivo maior. Lembrando que a especificao das pseudo-classes vem da verso 2.1 do CSS. Contudo com as atualizao dos browsers juntamente com a moda do CSS3, essas pseudo-classes e tambm grande parte dos pseudo-elementos foram implementados e esto prontos para usar. Uma lista das pseudo-classes completa, juntamente com usa explicao mais abrangente e detalista pode ser encontrada na prpria especificao do W3C. As pseudo-classes so divididas em 2 tipos: estruturais e dinmicas.

Pseudo-classes dinmicas
As pseudo-classes dinmicas controlam os estados dos elementos. Todos os elementos tem estados definidos. fcil de entender quando lembramos do elemento A (link). Ele tem vrios estados: quando voc passa o mouse, quando voc tira o mouse, quando voc clica e quando visitado. Estes estados o LINK podem ser formatados. Por isso que voc modifica a cor ou coloca sublinhado quando o usurio passa o mouse por cima do link. Estes estados tambm esto presentes em outros elementos. Claro, um DIV por exemplo, no ter a pseudo-classe de VISITED, j que voc no visita um DIV. Pseudo-Classe :hover :visited :active Descrio de uso Quando o mouse passa por cima do objeto Quando o elemento foi visitado. Normalmente aplicado para link. Quando o elemento est sendo ativo. Para ver esse estado, clique em um link, mas no solte o boto.

Especicao W3C sobre Pseudo-Classes: http://www.w3.org/TR/css3selectors/#pseudo-classes


4

144

CSS

:focus

Quando o elemento ganha foco. Por exemplo quando os inputs ganham foco para serem preenchidos.

Pseudo-classes estruturais
As pseudo-classes estruturais encontram elementos em uma rvore de elementos. Eles no formatam os estados, mas nos ajudam a encontrar elementos especficos para que sejam formatados sem a ajuda de programao ou insero de alguma identificao direta no cdigo. Lembra-se do tempo que para criarmos uma tabela zebrada (aquela tabela que tem as cores de linhas alternadas) precisvamos fazer um loop em Javascript ou alguma linguagem server-side para contar as linhas e descobrir qual era mpar e par, para ento inserirmos uma classe nas linhas determinadas e s depois podermos format-las com CSS para que a tabela ficasse da forma desejada. Muito trabalho para ter um resultado nfimo. Hoje podemos encontrar estes elementos facilmente utilizando a pseudo-classe :nth-child(). Simples assim:
table tr:nth-child(odd) {background: gray;}

O seletor acima encontra todos as TR (linhas) mpares dentro da tabela e aplica um background cinza. Simples, no ? Ento lembre-se: pseudo-classes selecionam elementos especficos na rvore de elementos do HTML.

Pseudo-classes do CSS3
O CSS 3 trouxe uma srie de pseudo-classes, que expandem o poder do desenvolvedor ao escolher e formatar um determinado elemento que no tenha uma identificao definida direto no cdigo. Abaixo segue uma lista de pseudo-classes que o CSS3 adicionou cartilha:

145

HTML5 e CSS3 com Farinha e Pimenta

Pseudo-classe :target :root :empty :enabled :disabled :checked :first-of-type :last-of-type :nth-child() :nth-last-child() :nth-of-type() :last-child :first-child :only-of-type :only-child

Descrio Encontra um elemento alvo. Muito utilizado para fazer abas. Encontra o elemento que o elemento raiz do documento. Encontra elementos que no tem filhos. Encontra elementos que esto habilitados. Por exemplo, inputs de checkbox, texto e etc. Encontra elementos desabilitados para edio ou manipulao. Encontra elementos como checkbox e botes radio que esto checados. Encontra um elemento especfico que seja o primeiro filho de um definido. Encontra um elemento especfico que seja o ltimo filho de um elemento definido. Encontra um elemento tomando como base sua posio na rvore de elementos do mesmo gnero. Encontra o ltimo elemento tomando como base sua posio na rvore de elementos do mesmo gnero. Encontra os elementos do mesmo tipo elemento tomando como base sua posio na rvore de elementos do pai. Encontra o ltimo elemento. Encontra o primeiro elemento. Seleciona os elementos de um mesmo tipo que so os filhos. Encontra os elementos filhos do mesmo gnero de um determinado pai.

146

CSS

:not()

Seleciona os elementos definidos, MENOS os elementos especficados pela pseudo-classe.

PSEuDO-ELEMENTOS
Pseudo-elementos permitem que os autores selecionem informaes inacessveis e possibilitem os desenvolvedores um caminho para referenciar contedos que no existem. Por exemplo: podemos inserir um elemento antes (::before) ou depois (::after) de um objeto j existente no HTML. Existem alguns pseudo-elementos bsicos que voc j deve ter usado algumas vezes em seus projetos: Pseudo-elemento ::first-letter ::first-line ::before ::after Descrio Encontra a primeira letra de da primeira palavra de um determinado bloco de texto. Seleciona a primeira linha de um bloco de texto. Insere um elemento no incio do contedo de um elemento. Insere um elemento no final do contedo de um elemento.

Para entendermos melhor como os pseudo-elementos trabalham, vamos tomar como exemplo o pseudo-elemento ::first-letter. Veja o cdigo abaixo:
p::first-letter {font-size:20px; font-weight: bold; }

O cdigo acima define que a primeira letra do pargrafo ficar com o tamanho de 20px e em negrito. Para entender melhor como o browser trabalha: imagina que o browser, ao encontrar a primeira letra, ele a insere em um elemento SPAN com a classe FIRST-LETTER. Como no cdigo abaixo:

147

HTML5 e CSS3 com Farinha e Pimenta <p> <span class=first-letter>V</span>eja, mas no toque. </p>

Obviamente este um exemplo. O browser no insere nenhum elemento no seu cdigo. Mas como se fizesse isso. Imagine este mesmo exemplo quando ler sobre os outros pseudo-elementos. Infelizmente os pseudo-elementos no sofreram tantas modificaes e inseres de novas features com a vinda do CSS3.

GRADIENTE
Todos os browsers mais novos como Safari, Opera, Firefox e Chrome j aceitam essa propriedade e voc pode utiliz-la hoje. Infelizmente, mas voc j sabia, os IEs atuais (8 e 9) no reconhecem ainda. Mesmo assim, at o dia que este captulo estava sendo escrito, o suporte dos browsers ainda estava muito nebuloso. Como voc ver abaixo, os cdigos que cada browser suporta ainda eram diferentes e no seguiam um padro. Bem como no havia padro especfico para criar gradientes no estilo radial. Voc pode perguntar: Mas j que terei o trabalho de produzir a imagem do gradiente para browsers antigos, porque no utilizar imagens para todos os browsers? Lembre-se que se utilizar uma imagem, o browser far uma requisio no servidor buscando essa imagem. Sem imagem, teremos uma requisio a menos, logo o site fica um pouquinho mais rpido. Multiplique isso para todas as imagens de gradiente que voc fizer e tudo realmente far mais sentido. Deixe para que os browsers no adeptos baixem imagens e faam mais requisies. Veja abaixo um exemplo de cdigo, juntamente com o fallback de imagem caso o browser no suporte ainda essa especificao:

148

CSS div { width:200px; height:200px; background-color: #FFF; /* imagem caso o browser no aceite a feature */ background-image: url(images/gradiente.png); /* Firefox 3.6+ */ background-image: -moz-linear-gradient(green, red); /* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green, red); /* Opera 11.10+ */ background-image: -o-linear-gradient(green, red); }

Ateno: At que os browsers implementem de vez essa feature, iremos utilizar seus prefixos. Como ficou:

Stops ou definindo o tamanho do seu gradiente O padro que o gradiente ocupe 100% do elemento como vimos no exemplo anterior, mas muitas vezes queremos fazer apenas um detalhe. Nesse caso ns temos que definir um STOP, para que o browser saiba onde uma cor deve terminar para comear a outra. Perceba o 20% ao lado da cor
149

HTML5 e CSS3 com Farinha e Pimenta

vermelha. O browser calcula quanto 20% da altura (ou largura dependendo do caso) do elemento, e comea o gradiente da cor exatamente ali. O cdigo de exemplo segue abaixo:
/* Firefox 3.6+ */ background-image: -moz-linear-gradient(green, red 20%); /* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green, red 20%); /* Opera 11.10+ */ background-image: -o-linear-gradient(green, red 20%);

Veja o resultado:

Se colocarmos um valor para o verde, ns iremos conseguir efeitos que antes s conseguiramos no Illustrator ou no Photoshop. Segue o cdigo e o resultado logo aps:
/* Firefox 3.6+ */ background-image: -moz-linear-gradient(green 10%, red 20%); /* Safari 5.1+, Chrome 10+ */ background-image: -webkit-linear-gradient(green 10%, red 20%); /* Opera 11.10+ */ background-image: -o-linear-gradient(green 10%, red 20%);

150

CSS

Perceba que o tamanho da transio vai ficando menor a medida que vamos aumentando as porcentagens. Muito, mas muito til.

PROPRIEDADE BORDER-IMAGE
Definir imagem para as bordas uma daquelas propriedades da CSS que voc se pergunta como vivamos antes de conhece-la. muito mais fcil entender testando na prtica, por isso sugiro que se voc estiver perto de um computador, faa testes enquanto l este texto. A explicao pode no ser suficiente em algumas partes, mas a prtica ir ajud-lo a entender. Esta propriedade ainda est em fase de testes pelos browsers, por isso utilizaremos os prefixos para ver os resultados.Utilizarei apenas o prefixo do Safari, mas o Firefox j entende essa propriedade muito bem. A sintaxe do border-image se divide em trs partes: 1) URL da imagem que ser utilizada. 2) Tamanho do slice das bordas. 3) Como o browser ir aplicar a imagem na borda. Segue um exemplo da sintaxe abaixo:
a { display:block; width:100px;

151

HTML5 e CSS3 com Farinha e Pimenta -webkit-border-image: url(border.gif) 10 10 10 10 stretch; }

Acima definimos uma imagem com o nome de border.gif, logo depois definimos o width de cada uma das bordas do elemento. A sintaxe igual a outras propriedades com 4 valores: top, right, bottom, left. E logo depois colocamos qual o tipo de tratamento que a imagem vai receber.

DIVIDINDO A IMAGEM

Para posicionar a imagem devidamente em seu objeto o browser divide a imagem em 9 sees:

Quando a imagem colocada no elemento, o browser posiciona os cantos da imagem juntamente com os cantos correspondentes do elemento. Ou seja, o bloco 1 da imagem colocado no canto superior esquerdo, o 3 no canto superior direito e assim por diante. Se voc fizer o teste, a imagem aparecer no elemento como se estivesse desproporcional. Isso normal porque a imagem deve seguir as propores do elemento e no as suas prprias.

COMPORTAMENTO DA IMAGEM
152

CSS

O comportamento da imagem a parte mais importante porque define como o centro da imagem (no caso do nosso exemplo a seo de nmero 5), ir ser tratada. H vrios valores, mas o que mais simples de se entender a stretch, que estica e escala a imagem para o tamanho do elemento aplicado. H outros valores como round e repeat. Mas hoje alguns browsers no tem tanto suporte e acabam ignorando esses valores ou como no caso do Safari e o Chrome, interpretam o round como o repeat. Vamos nos concentrar com o stretch e voc entender como funciona a propriedade.

APLICAO
Vamos utilizar a imagem abaixo para aplicar a propriedade. Iremos fazer um boto ao estilo iPhone. A coisa simples e sugiro que voc faa testes individualmente brincando com os valores das bordas e com diversas outras imagens para ver como funciona o recurso.

Irei aplicar o estilo em um link. O cdigo segue abaixo:


a { display:block; width:100px; text-align:center; 153

HTML5 e CSS3 com Farinha e Pimenta font:bold 13px verdana, arial, tahoma, sans-serif; text-decoration:none; color:black; }

Para inserir a imagem, colocamos as duas linhas abaixo:


border-width:10px; -webkit-border-image: url(button.png) 10 stretch;

Defini na primeira linha que a borda teria 10px de largura com a propriedade border-width. Na segunda linha define que a imagem utilizada seria a button. png, que as reas da imagem teriam que se estender por 10px, e o valor stretch define que a imagem cobrir o elemento inteiro. Temos o border-width definindo a largura da borda, mas no temos nenhum valor dizendo quanto dessa largura a imagem deve tomar. Os efeitos so bem estranhos quando esses valores esto mal formatados. Por isso, teste na prtica essa propriedade para que no haja problemas a implementar em seus projetos. O pulo da gato, para mim, a propriedade border-width.

SOMBRAS
No tem segredo: A propriedade box-shadow produz drop shadow em um elemento e a propriedade text-shadow produz drop shadow diretamente nas letras do texto. A sintaxe das duas propriedades so idnticas. Veja abaixo:
div { text-shadow:5px 10px 7px #000; box-shadow:5px 10px 7px #000; }

154

CSS

A sintaxe divida em 3 partes. Os dois primeiros nmeros so as coordenadas: significa que a sombra ser deslocada 5px pra esquerda e 10px do topo. O terceiro nmero aplicado pra produzir o blur da sombra. Isso quer dizer que a sombra ser esmaecida e ficar diluda em 7px. O ltimo valor referente cor. Voc pode utilizar RGBA em vez de Hexadecimal. Alis, o valor em RGBA pode ser usado em qualquer propriedade que dependa de cores. Essa especificao ainda est iniciando, mas j funciona em alguns browsers sem a ajuda de prefixos, como no Safari. Mesmo assim, ainda sinto falta de algumas possibilidades, como por exemplo produzir apenas sombras em um dos lados do elemento. Atualmente a sombra produzida em todos os lados, tornando difcil o controle do lado em que a sombra ser aplicada. Entretanto a aplicao destas propriedades j salvam muito tempo na criao do layout. Essas propriedades sero ignoradas em browsers que no as suportam. Logo, voc tem uma deciso muito difcil: ou faz uma verso utilizando imagens PNGs para simular o efeito de sombra, ou, que a opo que eu prefiro, no mostre sombras para os browsers que no suporta as propriedades. Voc tem menos trabalho, mas haver alguma diferena de visual nos browsers antigos. As vezes, colocando uma borda no lugar da sombra j resolve o problema do visual e no temos o trabalho de criar um PNG somente para isso. Com a ajuda da biblioteca Modernizr fica fcil saber qual browser no aceita essas propriedades.

RGBA
Normalmente em web trabalhamos com cores na forma de hexadecimal. a forma mais comum e mais utilizada desde os primrdios do desenvolvimento web. Mesmo assim, h outros formatos menos comuns que funcionam sem
155

HTML5 e CSS3 com Farinha e Pimenta

problemas, um destes formatos o RGB. O RGB so 3 conjuntos de nmeros que comeam no 0 e vo at 255 (0% at 100%), onde o primeiro bloco define a quantidade de vermelho (Red), o segundo bloco a quantidade de verde (Green) e o ltimo bloco a quantidade de azul (Blue). A combinao destes nmeros formam todas as cores que voc pode imaginar. z No HTML o RGB pode ser usado em qualquer propriedade que tenha a necessidade de cor, como: color, background, border etc. Exemplo:
p { } background:rgb(255,255,0); padding:10px; font:13px verdana;

Este cdigo RGB define que o background o elemento P ser amarelo.

RGBA E A DIFERENA DA PROPRIEDADE OPACITY


O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos via propriedade opacity. Lembrando que quando modificamos a opacidade do elemento, tudo o que est contido nele tambm fica opaco e no apenas o background ou a cor dele. Veja o exemplo abaixo e compare as imagens: A primeira a imagem normal, sem a aplicao de opacidade:

156

CSS

Agora com o bloco branco, marcado com um P, com opacidade definida. Perceba que o background e tambm a cor do texto ficaram transparentes. Isso til mas dificulta muito quando queremos que apenas a cor de fundo de um determinado elemento tenha a opacidade modificada. a que entra o RGBA. O RGBA funciona da mesma forma que o RGB, s que no caso do RGBA, alm dos 3 canais RGB (Red, Green e Blue) h um quarto canal, A (Alpha) que controla a opacidade da cor. Nesse caso, podemos controlar a opacidade da cor do background sem afetar a opacidade dos outros elementos: O funcionamento assim:

Veja um exemplo aplicado abaixo:

p { 157

HTML5 e CSS3 com Farinha e Pimenta } background:rgba(255,255,0, 0.5); padding:10px; font:13px verdana;

O ltimo valor referente ao canal Alpha, onde 1 totalmente visvel e 0 totalmente invisvel. No exemplo acima est com uma opacidade de 50%.

Diferenas entre RGB e HSL


A manipulao de cores no HTML nunca foi muito flexvel. No comeo escolhamos as cores escrevendo seus nomes por extenso como: black, blue, yellow, green, olive, maroon, fuchsia, red, white, silver, navy, teal, purple, lime, gray, aqua. Na dcada de 80 houve um acrscimo de 131 novas cores com nomes estranhos chamada X115. Estes nomes foram adotados pelos primeiros browsers tem sido suportados at hoje. H nomes como mintcream, moccasin, navajowhite, powderblue, springgreen entre outros O W3C ainda mantm uma lista completa dos nomes dessas cores. Alm de ser muito difcil de manter uma coleo de cores com seus nomes esquisitos, quase impossvel de criar um website tentando se adequar a quantidade limitada de cores disponveis. J tnhamos problemas suficientes com a quantidade limitada de fonts, imagine o trabalho que teramos se os layouts fossem feitos apenas com um punhado e cores. Com esse problemas vrios padres matemticos foram estabelecidos para a criao de qualquer cor. Existem dois padres conhecidos chamados de RGB e HSL. O formato RGB est ficando mais popular com o CSS3 por que agora podemos controlar o canal alpha utilizando o formato RGBA. H tambm outro formato que ganhou alguma ateno do workgroup no W3C que o formato de cor chamado HSL. Como o RGB, o HSL tambm ganhou um canal de opacidade, ficando HSLA. Muitos desenvolvedores ainda tem dvidas sobre as diferenas entre RGBA e HSLA e qual utilizar.
5 6

http://en.wikipedia.org/wiki/X11_color_names http://www.w3.org/TR/SVG/types.html#ColorKeywords 158

CSS

Tudo muito simples de entender. RGB e HSL so dois formatos de composio de cores digitais. Voc pode escolher qual dos dois utilizar, vai do seu gosto. Contudo como at hoje utilizamos o HEXADECIMAL como padro de cores para web, minha sugesto esperar para ver qual das duas especficaes cair no gosto do mercado para escolher um dos formatos para utiliz-la mais frenquentemente nos projetos. Ao que parece o RGB est ficando mais popular. Entretanto os dois formatos tem flexibilidades diferentes e por isso pode ser muito difcil apenas uma delas se tornar mais popular que outra.

O RGB
O processo simples: como na vida real onde voc mistura cores para obter uma outra cor como resultado, voc faz a mesma coisa com o RGB: voc mistura as cores para obter uma outra cor como resultado. Para isso utilizaremos a soma de 3 valores: Red, Green e Blue: rgba(red, green, blue); Veja a sintaxe abaixo para entender melhor a aplicao:
p { color: rgb(100%, 100%, 0%); }

Os trs valores so ligados s trs principais respectivamente vermelha, verde e azul. No caso acima inseri 100% de cor para Vermelho e Verde. Como bom aluno de educao artstica, voc deve saber que misturando vermelho e verde a cor resultante ser amarelo. Voc pode ser mais especfico controlando at mesmo a frao da porcentagem, por exemplo:
p { 159

HTML5 e CSS3 com Farinha e Pimenta color: rgb(55.2%, 100%, 0%); }

Assim voc consegue exatamente a cor que precisa. Esse formato de porcentagem e controle de frao tambm aplicado ao HSL. O RGB pode ser configurado utilizando valores hexadecimais. A conta no simples e voc precisa ser um pouco nerd para entender. A explicao meio longa. Sugiro que voc leia no Wikipedia algo mais detalista.

O HSL
O HSL funciona um pouco diferente. A sintaxe como abaixo:
p { color: hsl(0, 100%, 30%); }

A escolha de cores no HSL no baseado na mistura mas sim em um esquema baseado em um cilindro. O primeiro nmero de valor na sintaxe onde escolhemos a cor. Comeamos no topo com vermelho, onde o valor 0, e damos uma volta de 360 graus, retornando novamente no topo, na cor vermelha. Conforme aumentamos o valor vamos selecionando as cores. Por exemplo, se selecionarmos um valor por volta de 120 obtemos um verde. Veja a prxima imagem para entender melhor:

http://en.wikipedia.org/wiki/RGB_color_model 160

CSS

Embora possamos escolher qualquer cor misturando as cores com o RGB, muito mais instintivo escolhermos uma cor especfica e modificarmos sua luminosidade. Escolhemos o azul e modificamos sua luminosidade para obtermos o tom que voc deseja. Para escolhermos a luminosidade e a saturao da cor modificamos os dois outros valores, o segundo valor a luminosidade e o terceiro valor a saturao ou a quantidade de cinza que voc colocar na cor. Modificar a saturao como se voc mudasse a quantidade de cor. Quanto menos cor, mais cinza. Se voc quiser uma cor mais suja, mais apagada, voc diminui este valor. Caso contrrio voc a mantm como 100% e utiliza a quantidade integral da cor. Normalmente esse ser o padro.

E O HEXADECIMAL?
O hexadecimal, queridinho dos nossos coraes, sempre estar ao nosso lado. A sintaxe muito mais curta que as outras duas especficaes mas no temos todas as vantagens que as outras especificaes nos do, comeando pelo canal alpha. Com a grande maioria dos programas visuais dando suporte ao formato hexadecimal ele ainda perdurar durante muito tempo.

161

HTML5 e CSS3 com Farinha e Pimenta

CURRENTCOLOR
O valor currentColor muito simples de se entender e pode ser muito til para diminuirmos o retrabalho em alguns momentos da produo. Imagine que o currentColor uma varivel cujo seu valor definido pelo valor da propriedade color do seletor. Veja o cdigo abaixo:
p { } background:red; padding:10px; font:13px verdana; color: green; border:1px solid green;

Note que o valor da propriedade color igual ao valor da cor da propriedade border. H uma redundncia de cdigo, que nesse caso irrelevante, mas quando falamos de dezenas de arquivos de CSS modulados, com centenas de linhas cada, essa redundncia pode incomodar a produtividade. A funo do currentColor simples: ele copia para outras propriedades do mesmo seletor o valor da propriedade color. Veja o cdigo abaixo para entender melhor:
p { } background:red; padding:10px; font:13px verdana; color: green; border:1px solid currentColor;

Veja que apliquei o valor currentColor onde deveria estar o valor de cor da propriedade border. Agora, toda vez que o valor da propriedade color for modificado, o currentColor aplicar o mesmo valor para a propriedade onde ela est sendo aplicada.
162

CSS

Isso funciona em qualquer propriedade que faa utilizao de cor como background, border, etc. Obviamente no funciona para a propriedade color. O currentColor tambm no funciona em seletores separados, ou seja, voc no consegue atrelar o valor da propriedade color ao currentColor de outro seletor.

@FONT-FACE
A regra @font-face utilizada para que voc utilize fonts fora do padro do sistema em seus sites. Para que isso funcione ns disponibilizamos as fonts necessrias em seu servidor e linkamos estas fonts no arquivo CSS. A sintaxe bem simples e tem suporte a todos os navegadores, com algumas ressalvas.
@font-face { font-family: helveticaneue; src: url(helveticaNeueLTStd-UltLt.otf); }

Na primeira linha voc customiza o nome da font que voc usar durante todo o projeto. Na segunda linha definimos a URL onde o browser procurar o arquivo da font para baixar e aplicar no site. Voc aplica a fonte como abaixo:
p {font:36px helveticaneue, Arial, Tahoma, Sans-serif;}

Suponha que o usurio tenha a font instalada, logo ele no precisa baixar a font, assim podemos indicar para que o browser possa utilizar o arquivo da prpria mquina do usurio. Menos requisies, mais velocidade. Veja o cdigo abaixo:
@font-face { font-family: helveticaneue; src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf); } 163

HTML5 e CSS3 com Farinha e Pimenta

Abaixo segue uma srie de formatos que podem ser usados e que os browsers podem adotar: String truetype opentype truetype-aat embedded-opentype woff svg Font Format TrueType OpenType TrueType with Apple Advanced Typography extensions Embedded OpenType WOFF (Web Open Font Format) SVG Font Common Extensions .ttf .ttf, .otf .ttf .eot .woff .svg, .svgz

Compatibilidade
As verses 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT. Voc pode encontrar qualquer conversor online e esse problema resolvido. Voc pode converter suas fonts para EOT diretamente no Font Squirrel. O Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF. Para suprir a necessidade de ateno do Internet Explorer, voc precisa especificar a URL da font .eot para que o Internet Explorer possa aplicar a font corretamente. A sintaxe fica desta forma:
@font-face { font-family: helveticaneue; src: url(helveticaNeueLTStd-UltLt.eot); src: url(helveticaNeueLTStd-UltLt.otf); }

164

CSS

CRIANDO uM PACOTE FONT-FACE


O Font Squirrel fez um pequeno favor para toda a comunidade. um sisteminha que converte suas fonts para os formatos necessrios e te devolve para voc utilizar em seus sites: http://migre.me/4qST9

MLTIPLOS BACKGROUNDS
Quem nunca teve que criar um background onde havia um gradiente em cima, embaixo e dos lados? Voc sabe que para criar algo parecido voc no pode utilizar uma imagem s. A soluo at hoje seria criar 4 elementos divs aninhados (ou seja, um dentro do outro) e aplicar um pedao deste background em cada destes elementos para dar a sensao de um background nico. O resultado interessante mas o meio que isso feito no nada bonito. Voc era obrigado a declarar 4 elementos inteis no seu HTML apenas para compensar um efeito visual. A possibilidade de atribuirmos mltiplos backgrounds em apenas um elemento a feature que vai ajud-lo a no sujar seu cdigo. A sintaxe para mltiplos backgrounds praticamente idntica a sintaxe para definir um background. Segue abaixo um exemplo:
div { width:600px; height:500px; background: url(img1.png) top left repeat-X, url(img2.png) bottom left repeat-Y; }

Definimos apenas uma propriedade background, o valor dessa propriedade em vez de conter apenas um valor como normalmente fazemos, poder haver
165

HTML5 e CSS3 com Farinha e Pimenta

vrios, com suas respectivas definies de posio, repeat e attachment (fixed).

COLUMNS
Com a propriedade columns definimos colunas de texto de forma automtica. At hoje no havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades columns pode fazer isso de maneira livre de gambiarras.

COLuMN-COuNT

A propriedade column-count define a quantidade de colunas ter o bloco de textos.


/* Define a quantidade de colunas, a largura definida uniformimente. */ -moz-column-count: 2; -webkit-column-count: 2;

COLuMN-WIDTH

Com a propriedade column-width definimos a largura destas colunas.


-moz-column-width: 400px; -webkit-column-width: 400px;

Fiz alguns testes aqui e h uma diferena entre o Firefox 3.5 e o Safari 4 (Public Beta). O column-width define a largura mnima das colunas. Na documentao do W3C a seguinte: imagine que voc tenha uma rea disponvel para as colunas de 100px. Ou seja, voc tem um div com 100px de largura (width).
166

CSS

E voc define que as larguras destas colunas (column-width) sejam de 45px. Logo, haver 10px de sobra, e as colunas iro automaticamente ter 50px de largura, preenchendo este espao disponvel. esse o comportamento que o Firefox adota. J no Safari acontece o seguinte: se voc define um column-width, as colunas obedecem esse valor e no preenchem o espao disponvel, como acontece na explicao do W3C e como acontece tambm no Firefox. Dessa forma faz mais sentido para mim. Como a propriedade no est 100% aprovada ainda, h tempo para que isso seja modificado novamente. Talvez a mudana da nomenclatura da classe para column-min-width ou algo parecida venha a calhar, assim, ficamos com os dois resultados citados, que so bem teis para ns de qualquer maneira.

COLuMN-GAP

A propriedade column-gap cria um espao entre as colunas, um gap.


/* Define o espao entre as colunas. */ -moz-column-gap: 50px; -webkit-column-gap: 50px;

Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades no funcionam oficialmente em nenhum browser. Mas j podem ser usados em browsers como Firefox e Safari.

TRANSFORM 2D
A propriedade transform manipula a forma com que o elemento aparecer na tela. Voc poder manipular sua perspectiva, escala e ngulos. Uma transformao especificada utilizando a propriedade transform. Os browsers
167

HTML5 e CSS3 com Farinha e Pimenta

que suportam essa propriedade, a suportam com o prefixo especificado. Os valores possveis at agora esto abaixo:

scale
O valor scale modificar a dimenso do elemento. Ele aumentar proporcionalmente o tamanho do elemento levando em considerao o tamanho original do elemento.

skew
Skew modificar os angulos dos elementos. Voc pode modificar os ngulos individualmente dos eixos X e Y como no cdigo abaixo:
-webkit-transform: skewY(30deg); -webkit-transform: skewX(30deg);

translation
O translation mover o elemento no eixo X e Y. O interessante que voc no precisa se preocupar com floats, positions, margins e etc. Se voc aplica o translation, ele mover o objeto e pronto.

rotate
O rotate rotaciona o elemento levando em considerao seu ngulo, especialmente quando o ngulo personalisado com o transform-origin.

CSS TRANSFORM NA PRTICA


Veja o cdigo abaixo e seu respectivo resultado:
img { -webkit-transform: skew(30deg); /* para webkit */ -moz-transform: skew(30deg); /* para gecko */ -o-transform: skew(30deg); /* para opera */ transform: skew(30deg); /* para browsers sem 168

CSS prefixo */ }

O cdigo acima determina que o ngulo da imagem ser de 30deg. Colocamos um exemplo para cada prefixo de browser. Ficando assim:

Vrias transformaes em um nico elemento


Para utilizarmos vrios valores ao mesmo tempo em um mesmo elemento, basta definir vrios valores separando-os com espaos em uma mesma propriedade transform:
img { /* para webkit */ -webkit-transform: scale(1.5) skew(30deg); /* para gecko */ -moz-transform: scale(1.5) skew(30deg);

169

HTML5 e CSS3 com Farinha e Pimenta

/* para opera */ -o-transform: scale(1.5) skew(30deg); /* para browsers sem prefixo */ transform: scale(1.5) skew(30deg); }

transform-origin
A propriedade transform-origin define qual o ponto do elemento a transformao ter origem. A sintaxe idntica ao background-position. Observe o cdigo abaixo:
img { -webkit-transform-origin: 10px 10px; /* para webkit */ -moz-transform-origin: 10px 10px; /* para webkit */ -o-transform-origin: 10px 10px; /* para webkit */ transform-origin: 10px 10px; /* para webkit */ }

Como padro as transies sempre acontecem tendo como ponto de ncora o centro do objeto. H algumas situaes que pode ser que voc queira modificar essa ncora, fazendo com que por exemplo, a rotao acontea em algum dos cantos do elemento. O cdigo de exemplo acima far com que a transformao acontea a partir dos 10px do topo no canto esquerdo. Veja a comparao entre o padro e o resultado do cdigo acima.

170

CSS

A propriedade transform fica mais interessante quando a utilizamos com a propriedade transition, onde podemos executar algumas animaes bsicas manipulando os valores de transformao.

INTRODUO AO CSS 3D
O CSS 3D sem dvida uma das features do CSS mais aguardadas por todas as crianas do Brasil. Fala a verdade! Fazer efeitozinhos com sombra, gradientes, transparncias e etc j foi um dia na vida do desenvolvimento algo bacana. Hoje muito fora de moda. Carne de vaca, sabe? Por isso o CSS 3D to esperado. Ele trar para a web efeitos visuais para layout que antes s viamos em sistemas que rodam em smartphones, tipo um iPhone ou nos sistemas operacionais mais populares como Linux e OSX. Mas no se anime muito. Eu sei que voc est ansioso para sair por a colocando efeitos 3D de CSS em tudo quanto aplicao. Mas calma entenda que o CSS foi feito para estilizar documentos. Voc o utiliza para melhorar a experincia dos usurios nos diversos dispositivos e no para enfeitar seu website como se
171

HTML5 e CSS3 com Farinha e Pimenta

fosse uma penteadeira. Lembra-se dos websites cheios de gifs animados? Pois , cuidado para no cair no mesmo erro. Voc estar utilizando o CSS 3D da maneira certa se seus efeitos passarem desapercebidos pelo usurio ao utilizar seu sistema. Encher seu sistema com efeitos a cada clique ou a cada ao pode fazer com que o usurio perca tempo e a pacincia. Mas vamos ao que interessa.

O suporte
Infelizmente isso ainda est restrito para browsers. O Internet Explorer no tem suporte ainda e nem tem data para tal. Todos os exerccios que voc ver neste post so feitos para browsers que tem WebKit como motor de renderizao. Por isso teste em seu Chrome ou no seu Safari. Eu testei no Chrome porque o Safari mostrou algumas inconsistncias. O Opera est esperando as especificaes de CSS Transforms amadurecerem para adicionar este recurso. Testei no Firefox 8.0.1 e o exerccio no funcionou. A degradao do CSS 3D para os browsers que no o suportam um pouco infeliz. Sugiro que se voc for utilizar essas features, tente faz-lo em projetos restritos para que no haja problemas com usurios de browsers antigos. Se ainda assim voc quiser arriscar, crie solues especifica para seu projeto, fazendo com que a experincia do seu cliente no seja muito prejudicada. Sugiro que utilize a biblioteca Modernizr para identificar os browsers que no entendem o CSS 3D.

TuDO uMA QuESTO DE PERSPECTIVA


Para falar de 3D, precisamos falar sobre perspectiva. Para ativar uma rea 3D o elemento precisar de perspectiva. Voc pode aplicar a perspectiva ao elemento de duas formas: utilizando diretamente a propriedade perspective ou adicionando um valor perspective()
172

CSS

na propriedade transform.
div { -webkit-perspective: 600; }

Ou:
div { -webkit-transform: perspective(600); }

Estes dois formatos so os gatilhos que ativam a rea 3D onde o elemento ir trabalhar. O valor da perspectiva determina a intensidade do efeito. Imagine como se fosse a distncia de onde vemos o objeto. Quanto maior o valor, mais perto o elemento estar, logo, menos intenso ser o visual 3D. Logo, se colocarmos um valor de 2000, o objeto no ter tantas mudanas visuais e o efeito 3D ser suave. Se colocarmos 100, o efeito 3D ser muito visvel, como se fosse um inseto olhando um objeto gigante. Voc tambm precisa entender sobre o ponto de fuga. O ponto de fuga por padro est posicionado no centro. Voc pode modificar essa posio com a propriedade perspective-origin, que muito parecido com a propriedade transform-origin, que define onde a ao de transformao do objeto acontecer, nesse caso quando falamos de aes 2D. A propriedade perspective-origin afeta os eixos X e Y do elemento filho.

CSS 3D TRANSFORMS
Se voc ainda no leu sobre CSS Transforms voc pode ler algo aqui e ver em ao aqui. As propriedades so praticamente iguais, mas aplicadas para os princpios de 3D e no 2D.
173

HTML5 e CSS3 com Farinha e Pimenta

Voc deve estar acostumado a trabalhar com os eixos X e Y no CSS padro. No CSS 3D podemos manipular tambm o eixo Z, que representa a profundidade. Veja um exemplo utilizando os valores rotateY, rotateX e translateZ. Perceba que no translateZ eu utilizei valores negativos e positivos. Quando utilizo o valor negativo, o objeto fica mais longe, se coloco valores positivos, o objeto fica mais perto. Abaixo segue uma imagem do resultado do exemplo:

Ns podemos utilizar tambm alguns atalhos para estes valores onde podemos definir as trs dimenses de uma vez: translate3d(x,y,z) scale3d(x,y,z) rotate3d(x,y,z,angle) Muito importante: ao utilizar as propriedades resumidas, os browsers ativam automaticamente a acelerao por hardware no Safari para que as animaes tenham uma melhor performance.
174

CSS

FAZENDO O EFEITO DE CARD FLIP


O efeito de Card Flip muito conhecido entre os usurios de iPhone. A estrutura HTML esta:
<section class=geral> <div class=carta> <figure class=frente><img src=card-front. jpg></figure> <figure class=atras><img src=card-back. jpg></figure> </div> </section>

O elemento .geral onde iniciaremos o ambiente 3D. O elemento .carta age como container dos objetos 3D. Cada face da carta est separada por um elemento figure, com uma imagem. Para comear, precisamos aplicar a perspectiva para o elemento .geral iniciar o espao 3D.
.geral { width: 200px; height: 293px; position: relative; margin:10% auto 0; -webkit-perspective: 500; }

Defini uma largura e altura, coloquei um position: relative; para que os elementos dentro dele sejam posicionados se referenciando por ele. Coloquei uma margem s para separ-lo do topo do body a fim de conseguirmos ver melhor os efeitos. Por fim, coloquei a propriedade -webkit-perspective: 500; para aplicarmos o efeito 3D. O valor de 500 faz uma boa perspectiva.

175

HTML5 e CSS3 com Farinha e Pimenta

Agora definiremos as dimenses da carta e suas propriedades.


.carta { width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 1s; }

Largura e altura precisam ser de 100% para definir a rea que o 3D ir aplicar. O position: absolute; necessrio para que as cartas fiquem relativas ao elemento .geral. A propriedade -webkit-transition: -webkit-transform 1s; define o tempo de transio do efeito, neste caso ele vai durar 1 segundo. Formatando as cartas:
.carta figure { margin:0; display: block; position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; }

Vamos direto para a propriedade -webkit-backface-visibility: hidden; j que as outras dispensam comentrios. Essa propriedade faz com que a face de trs da carta no aparea e nem se sobreponha no momento do efeito. E finalmente, para fazer com que a parte de trs da carta aparea no verso correto, ns temos que rotacion-la.
.atras{-webkit-transform: rotateY(180deg);}

E feito se completa com o trigger para fazer a animao acontecer. Nesse caso farei com um hover no elemento .carta, onde iremos rotacion-lo em -180 graus.
176

CSS


.carta:hover { -webkit-transform: rotateY(-180deg); }

E Voil! Se quiser brincar um pouco, modifique a origem da transformao com a propriedade -webkit-transform-origin. Adicionando essa linha, a transformao acontece para a direita em vez de ser pelo centro, como o padro:
.carta:hover { -webkit-transform: rotateY(-180deg); -webkit-transform-origin: right center; }

PROPRIEDADE TRANSITION
Durante muito tempo o CSS s serviu para pintar quadradinhos e mais nada. Desde quando o pessoal do WaSP organizou todo o movimento dos Padres Web fazendo com que todos os desenvolvedores, fabricantes de browsers e at mesmo o W3C acreditassem no poder dos padres no houve grandes atualizaes no CSS. Praticamente formatvamos font, background, cor, tamanhos e medidas de distncia e posio. A propriedade transition, a regra keyframe e outras propriedades vieram vitaminar a funo que o CSS tem perante o HTML acrescentando maneiras de produzirmos animaes e transies. No estou dizendo que voc far animaes complicadas, com diversos detalhes tcnicos e etc. Para esse tipo de resultado existem outras ferramentas, incluindo Canvas e SVG, que com certeza faro um trabalho melhor com menos esforo. Mas fato que as animaes via CSS nos ajudam a levar a experincia do usurio para outro patamar.

177

HTML5 e CSS3 com Farinha e Pimenta

Lembrando que o nvel de suporte de algumas dessas tcnicas ainda muito baixo. A propriedade transition funciona em boa parte dos browsers atuais. Mas a regra keyframe que nos permite controlar as fases de uma animao ainda muito restrito. Para uma tabela mais atual e detalhada de suporte e compatibilidade, faa uma procura no Google ou procure no site Can I Use (http://caniuse.com/). Onde for possvel demonstrarei o cdigo com o prefixo dos browsers que suportam as propriedades.

PEQuENAS TRANSIES
A propriedade transition praticamente auto explicativa. Sua sintaxe to simples que talvez at dispense explicaes mais elaboradas. Vamos comear com o cdigo abaixo:
a { color: white; background: gray; }

No cdigo definimos que o link ter sua cor de texto igual a preta e seu background ser cinza. O resultado esperado que ao passar o mouse no link a cor do texto seja modificada, mudando do branco para o preto e que a cor de background mude de cinza para vermelho. O cdigo abaixo faz exatamente isso:
a { color: white; background: gray; } a:hover { color: black; background: red; }

178

CSS

O problema que a transio muito brusca. O browser apenas modifica as caractersticas entre os dois blocos e pronto. No h nenhuma transio suave entre os dois estados. Podemos fazer a mudana de um estado para outro utilizando a propriedade transition. Suponha que ao passar o mouse, as mudanas acontecessem em um intervalo de meio segundo. Bastaria colocar a propriedade transition no a:hover e pronto. Ao passar o mouse, o browser modificaria as caractersticas do link com uma pequena transio de meio segundo. O cdigo seria como se segue abaixo:
a:hover { color: black; background: red; -webkit-transition: 0.5s; /* Com prefixo do Safari */ transition: 0.5s; /* Para browsers que suportam a propriedade */ }

Dessa forma a transio apenas acontece quando o hover ativado. O problema que ao tirar o mouse, o browser volta bruscamente para as caractersticas iniciais. Para modificar isso basta inserir tambm a propriedade transition no estado inicial.
a { color: white; background: gray; -webkit-transition: 0.5s; } a:hover { color: black; background: red; -webkit-transition: 0.5s; }

179

HTML5 e CSS3 com Farinha e Pimenta

O que a propriedade transition faz comparar os valores das propriedades em comum entre os dois estados do link ou de qualquer outro elemento, assim ela modifica suavemente os valores quando h a ativao da funo. Esta uma tcnica simples e que serve para manipularmos transies bsicas como cor, tamanho, posio etc. Agora suponha que em um bloco h uma determinada propriedade que no outro bloco no h, como no cdigo abaixo:

a { border:1px solid orange; color: white; background: gray; -webkit-transition: 0.5s; } a:hover { color: black; background: red; -webkit-transition: 0.5s; }

Nesse caso o browser detecta que h uma propriedade no primeiro estado, mas no no segundo, por isso ele no faz a transio desta propriedade, apenas das propriedades em comuns. Abaixo veja o cdigo. copie em um arquivo HTML e veja o efeito:
<!DOCTYPE html> <html lang=pt-br> <head> <meta charset=utf-8> <title>CSS Transition</title> <style type=text/css media=screen> a { color:white; 180

CSS background:gray; -webkit-transition: 0.5s linear; } a:hover { color:black; background:red; -webkit-transition: 0.5s linear; } </style> </head> <body> <a href=#>Link! Hello World!</a> </body> </html>

PROPRIEDADE ANIMATION E REGRA KEYFRAME


A propriedade trasition trabalha de forma muito simples. Voc praticamente diz para o browser qual o valor inicial e o valor final para que ele aplique a transio automaticamente, controlamos praticamente apenas o tempo de execuo. Para termos mais controle sobre a animao temos a propriedade animation que trabalha juntamente com a rule keyframe. Basicamente voc consegue controlar as caractersticas do objeto e suas diversas transformaes definindo fases da animao. Observe o cdigo abaixo e veja seu funcionamento:
@-webkit-keyframes rodar { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); 181

HTML5 e CSS3 com Farinha e Pimenta } }

O cdigo acima define um valor inicial e um valor final. Agora vamos aplicar esse cdigo a um elemento. Minha ideia fazer um DIV girar. ;-) O cdigo HTML at agora este. Fiz apenas um div e defini este keyframe:
<!DOCTYPE html> <html lang=pt-br> <head> <title></title> <meta charset=utf-8> <style> @-webkit-keyframes rodaroda { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } } </style> </head> <body> <div></div> </body> </html>

Primeiro voc define a funo de animao, no caso o nosso cdigo que define um valor inicial de 0 graus e um valor final de 360 graus. Agora vamos definir as caractersticas deste DIV.
div { width:50px; height:50px; 182

CSS margin:30% auto 0; background:black; }

Nas primeiras linhas defini qual ser o estilo do div. Ele ter uma largura e uma altura de 50px. A margin de 30% do topo garantir um espao entre o objeto e o topo do documento e background preto. A propriedade animation tem uma srie de propriedades que podem ser resumidas em um shortcode bem simples. Veja a tabela logo a seguir para entender o que cada propriedade signifca: Propriedade animation-name animation-duration Definio Especificamos o nome da funo de animao Define a durao da animao. O valor declarado em segundos. Descreve qual ser a progresso da animao a cada ciclo de durao. Existem uma srie de valores possveis e que pode ser que o seu navegador ainda no suporte, mas so eles: ease, linear, ease-in, ease-out, ease-in-out, cubicbezier(<number>, <number>, <number>, <number>) [, ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(<number>, <number>, <number>, <number>)]*O valor padro ease. Define o nmero de vezes que o ciclo deve acontecer. O padro um, ou seja, a animao acontece uma vez e pra. Pode ser tambm infinito definindo o valor infinite no valor.

animation-timingfunction

animation-interationcount

183

HTML5 e CSS3 com Farinha e Pimenta

animation-direction

Define se a animao ir acontecer ou no no sentido inverso em ciclos alternados. Ou seja, se a animao est acontecendo no sentido horrio, ao acabar a animao, o browser faz a mesma animao no elemento, mas no sentido antihorrio. Os valores so alternate ou normal. Define se a animao est acontecendo ou se est pausada. Voc poder por exemplo, via script, pausar a animao se ela estiver acontecendo. Os valores so running ou paused. Define quando a animao ir comear. Ou seja, voc define um tempo para que a animao inicie. O valor 0, significa que a animao comear imediatamente.

animation-play-state

animation-delay

Voltando para o nosso cdigo, vamos aplicar algumas dessas propriedades:


div { width:50px; height:50px; margin:30% auto 0; background:black; } -webkit-animation-name: rodaroda; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate;

Veja que na propriedade animation-name chamamos o mesmo nome que demos na nossa funo de keyframe logo no comeo da explicao. Depois definimos uma durao de ciclo de meio segundo. Definimos que o comportamento da animao ser linear, e com a propriedade
184

CSS

animation-iteration-count definimos que ele girar infinitamente. E por ltimo definimos pelo animation-direction que a animao dever ser alternada, ou seja, o DIV girar para um lado, e quando alcanar o final da animao, o browser dever alternar essa animao. Podemos melhorar esse cdigo utilizando a verso shortcode, que mais recomendado. Veja a ordem que devemos escrever as propriedades animation em forma de shortcode:
animation: [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] [, [<animation-name> || <animation-duration> || <animationtiming-function> || <animation-delay> || <animationiteration-count> || <animation-direction>] ]*

Aplicando isso ao nosso cdigo:


div { width:50px; height:50px; margin:30% auto 0; background:black; -webkit-animation: rodaroda 0.5s linear infinite alternate; }

Pronto. Agora temos um elemento que gira sem parar, ora para direita ora para esquerda.

DEFININDO CICLOS
Ns definimos no keyframe do nosso ltimo exemplo apenas um incio e um fim. Mas e se quisssemos que ao chegar na metade da animao o nosso elemento ficasse com o background vermelho? Ou que ele mudasse
185

HTML5 e CSS3 com Farinha e Pimenta

de tamanho, posio e etc? a onde podemos flexibilizar melhor nosso keyframe definindo as fases da animao. Por exemplo, podemos dizer para o elemento ter uma cor de background diferente quando a animao chegar aos 10% do ciclo, e assim por diante. Veja o exemplo:
@-webkit-keyframes rodaroda { 0% { -webkit-transform:rotate(0deg); } 50% { background:red; -webkit-transform:rotate(180deg); } 100% { -webkit-transform:rotate(360deg); } }

Definimos acima que o incio da animao o elemento comear na posio normal, 0 graus. Quando a animao chegar aos 50% do ciclo, o elemento dever ter girado para 180 graus e o background dele deve ser vermelho. E quando a animao chegar a 100% o elemento deve ter girado ao todo 360 graus e o background, como no est sendo definido, volta ao valor padro, no nosso caso black, que foi definido no CSS onde formatamos este DIV. Logo nosso elemento girar pra sempre e ficar alternando a cor de fundo de preto para vermelho. Fiz um exemplo bem simples modificando apenas o background, mas voc pode muito bem definir um position e modificar os valores de left e top para fazer o elemento se movimentar. No exemplo tambm defini apenas 3 estgios (0%, 50% e 100%) voc pode definir um maior nmero de estgios: 5%, 10%, 12%, 16% e etc... Adequando as fases da animao s suas necessidades.

186

CSS

H exemplos muito interessantes na internet onde podemos ver todo o poder das animaes feitas pela CSS. Veja o exemplo que fizemos aqui neste texto no endereo: http://migre.me/4ubym

MDULO TEMPLATE LAYOUT


Para mim a parte mais fcil de desenvolver um site com CSS o planejamento e diagramao do layout. Coincidentemente a parte que mais os desenvolvedores tem problemas de compatibilidade crossbrowser ou por falta de recursos mais avanados. Mas se voc parar para pensar, apenas uma propriedade cuida dessa parte, que a propriedade float. At agora, para mim, o float era a propriedade mais importante que existia no CSS. O float cuidava de toda a diagramao do site, desde os elementos que definiam as reas principais do site at os pequenos detalhes de imagens e cones. A propriedade float muito simples de se entender. O problema no o funcionamento, mas os efeitos que a propriedade float causa nos elementos prximos. Se voc pede para duas colunas ficarem flutuando esquerda e outra coluna direita, o rodap sobe. Ou se voc coloca um elemento envolvendo outros elementos com float, esse elemento perde a altura. Estes so problemas corriqueiros que j tem solues inteligentes e que no apresentam chateaes mais graves. Infelizmente o float no o ideal para a diagramao e organizao dos elementos do layout. Ele resolve muitos problemas, mas deixa a desejar em diversos sentidos. A principal desvantagem do float que ele completamente dependente da ordem dos elementos no HTML. Existem tcnicas que voc consegue fazer quase que qualquer oganizao visual sem encostar no cdigo HTML. Mas h outras necessidades que invariavelmente voc precisar modificar a ordem dos elementos no meio do HTML para que a diagramao do site saia conforme o esperado. Essa organizao do HTML pode alterar desde programao server-side e at resultados de SEO e acessibilidade. Por
187

HTML5 e CSS3 com Farinha e Pimenta

isso interessante que o HTML fique organizado de forma que ele supre as necessidades dessas bases. Sua organizao visual deve ser independente desta organizao. Quem nunca sentiu falta de alternar a posio dos elementos verticalmente? Tendo em vista estes e outros problemas o W3C criou um novo mdulo. Na verdade ele no o nico e nem pode ser para que tenhamos diversas formas de trabalhar. O mdulo em questo chamado de Template Layout. Esse mdulo consiste em uma forma de criarmos e organizarmos os elementos e informaes do layout de forma menos espartana e mais flexvel. Podemos dividir a construo do layout em duas grandes partes: 1) Definio dos elementos mestres e grid a ser seguido. 2) Formatao de font, cores, background, bordas etc. As propriedades nesta especificao trabalham associando uma poltica de layout de um elemento. Essa poltica chamada de template-based positioning (no tem nada a ver com a propriedade position, pelo contrrio uma alternativa) que d ao elemento um grid invisvel para alinhar seus elementos descendentes. Porque o layout deve se adaptar em diferentes janelas e tamanhos de papis, as colunas e linhas do grid deve ser fixas ou flexiveis dependendo do tamanho. O W3C mostra alguns casos comuns: - Pginas complexas com mltiplas barras de navegao em reas com posies fixas como publicidade, submenus e etc. - Formulrios complexos, onde o alinhamento de labels e campos podem ser facilmente definidos com as propriedades deste mdulo com a ajuda das propriedades de margin, padding e tables. - GUIs, onde botes, toolbars, labels, cones etc, tem alinhamentos complexos
188

CSS

que precisam estar sempre alinhados caso o tamanho ou a resoluo da tela mudem. - Mdias que so paginadas, como Mdias de impresso onde cada pgina so divididos em reas fixas para contedos de diferentes gneros. Template-based positioning so uma alternativa para a propriedade position com o valor absolute. Antigamente lembro-me que quase todos os desenvolvedores tentavam organizar e diagramar layouts utilizando position. No que seja errado, mas definitivamente no a melhor forma. Costumo dizer em meus cursos e palestras que position para detalhes. Nada muito grande, mas para pequenos detalhes. Usamos position para posicionarmos elementos que no tem relao direta com sua posio no cdigo HTML. Ou seja, no importa onde o elemento esteja, o position:absolute; ir posicionar o elemento nas coordenadas que voc quiser.

SINTAXE E FuNCIONAMENTO
O mdulo Template Layout basicamente define slots de layout para que voc encaixe e posicione seus elementos. O mapeamento dos slots feito com duas propriedades que j conhecemos que este mdulo adiciona mais alguns valores e funcionalidades, so as propriedades position e display. A propriedade display define como ser o Grid, ou seja, quantos espaos teis ter o layout e a propriedade position ir posicionar seus elementos nestes slots. Veja o cdigo HTML abaixo:
<div class=geral> <nav class=menu>...</nav> <aside class=menulateral>...</aside> <aside class=publicidade>...</aside> <article class=post>...</article> 189

HTML5 e CSS3 com Farinha e Pimenta <footer>...</footer> </div>

Agora iremos definir a posio destes elementos. O cdigo CSS seria assim:
.geral { display: aaa bcd eee; } nav.menu {position:a;} aside.menulateral {position:b;} aside.publicidade {position:d;} article.post {position:c;} footer {position:e;}

O FuNCIONAMENTO DA PROPRIEDADE DISPLAy


A propriedade display define a organizao dos slots. Um slot o local onde os elementos sero colocados. Aqui o elemento display trabalha como um table, onde seu contedo ser colocando em colunas e linhas. A nica diferena que o nmero de linhas e colunas no dependem do contedo. A outra principal diferena que a ordem dos descendentes no cdigo no importa. Ou seja, no importa a estrutura dos elementos no HTML, voc pode coloc-los em qualquer lugar do layout. Cada letra diferente um slot de contedo diferente. O @ (arroba) define um sinal para um slot padro. E o . (ponto) define um espao em branco. Quando repetimos as letras como no exemplo anterior, tanto na horizontal quanto na vertical, formado um slot nico que se expande para o tamanho da quantidade de slots. Lembra do colspan ou rowspan utilizados na tabela?
190

CSS

Pois , funciona igualzinho. No possvel fazer um slot que no seja retangular ou vrios slots com a mesma letra. Um template sem letra nenhuma tambm no possvel. Um template com mais de um @ tambm proibido. Se houverem esses erros a declarao ignorada pelo browser. Para definir a altura da linha (row-height) podemos utilizar o valor padro auto, que define a altura da linha de acordo com a quantidade de contedo no slot. Voc pode definir um valor fixo para a altura. No possvel definir um valor negativo. Quando definimos um * (astersco) para a altura, isso quer dizer que todas as alturas de linha sero iguais. A largura da coluna (col-width) definida com valores fixos, como o rowheight. Podemos definir tambm o valor de * que funciona exatamente igual ao altura de linha, mas aplicados a largura da coluna. H dois valores chamados max-content e min-content que fazem com que a largura seja determinada de acordo com o contedo. Outro valor o minmax(p,q) que funciona assim: a largura das colunas so fixadas para ser maiores ou iguais a p e menores ou iguais a q. Pode haver um espao branco (white space) em volta de p e q. Se q > p, ento q ignorado e o minmax(p,q) tratado como minmax(p,p). O valor fit-content o equivalente a minmax(min-content, max-content).

DEFININDO A LARGuRA E ALTuRA DOS SLOTS


Para definir a altura dos slots, utilizamos uma sintaxe diretamente na propriedade display. Veja abaixo um exemplo de como podemos fazer isso:
display: a a a /150px b c d e e e / 150px 100px 400px 100px;

Formatando de uma maneira que voc enteda, fica assim:


191

HTML5 e CSS3 com Farinha e Pimenta

display: a b e 100px

a c e 400px

a /150px d e /150px 100px;

Ou seja, a primeira coluna do grid ter 100px de largura, a segunda 400px e a terceira 100px. As medidas que coloquei ao lado, iniciando com uma / (barra) definem a altura das linhas. Logo a primeira linha ter 150px e a terceira linha tambm. A linha do meio, como no tem altura definida ter a altura de acordo com a quantidade de contedo.

O espao entre as colunas so definidos com . (pontos). Veja o exemplo abaixo:


display: a . b . e 100px a . c . e 400px a /150px . /50px d . /50px e /150px 100px;

No exemplo acima fiz duas colunas no cdigo compostos por pontos em vez de fazer com letras. Isso quer dizer que entre as colunas do grid haver um espao em branco de 50px de altura.

192

CSS

O FuNCIONAMENTO DA PROPRIEDADE POSITION


O valor da propriedade position especifica qual linha e coluna o elemento ser colocado no template. Voc escreve apenas uma letra por elemento. Vrios elementos podem ser colocados em um mesmo slot. Logo estes elementos tero o mesmo valor de position. Abaixo veja uma imagem que pegamos diretamente do exemplo do W3C. O layout muito simples:

Este layout representado pelo cdigo abaixo. Primeiro o HTML:


<ul id=nav> <li>navigation</li> </ul> <div id=content> <div class=module news> <h3>Weather</h3> <p>There will be weather</p> </div> <div class=module sports> <h3>Football</h3> <p>People like football.</p> </div> <div class=module sports> <h3>Chess</h3> <p>There was a brawl at the chess 193

HTML5 e CSS3 com Farinha e Pimenta tournament</p> </div> <div class=module personal> <h3>Your Horoscope</h3> <p>Youre going to die (eventually).</p> </div> <p id=foot>Copyright some folks</p> </div>

Agora veja o CSS com toda a mgica:


body { display: a b 10em *; } #nav { position: a; } #content { position: b; display: c . d . e . . . . . . . f . . * 1em * 1em *; } .module.news {position: c;} .module.sports {position: d;} .module.personal {position: e;} #foot {position: f;}

/1em

Lembre-se que no importa a posio dos elementos no cdigo. E essa a mgica. Podemos organizar o cdigo HTML de acordo com nossas necessidades e levando em considerao SEO, Acessibilidade e processo de manuteno. O HTML fica totalmente intacto separado de qualquer formatao. Muito, mas muito interessante.

194

CSS

PSEuDO-ELEMENTO ::SLOT()
Um slot uma rea do layout separada para colocarmos os elemetnos que escolhermos. Suponha que voc queira que um determinado slot tenha um fundo diferente, alinhamento e etc... Essa formatao ser aplicada diretamente no slot e no no elemento que voc colocou l. Fica mais simples de formatar porque voc no atrela um estilo ao elemento e sim ao slot. Se voc precisar posicionar aquele elemento em outro lugar, voc consegue facilmente.
body { display: aaa bcd } body::slot(b) { background: #FF0 } body::slot(c), body::slot(d) { vertical-align: bottom }

As propriedades aplicadas no pseudo elemento slot() seguem abaixo: Todos as propriedades background. vertical-align overflow box-shadow, block-flow e direction ainda esto sendo estudados pelo W3C se elas entraro ou no.

MAS E O FLOAT?
senhores... Eu acho que o float tem seus dias contados para a criao de estruturas de layouts. Quando utilizamos o float para estruturar o layout, ns dependemos profundamente da organizao e posio dos elementos no cdigo HTML. No estou dizendo que o float ficar obsoleto, voc ainda vai utiliz-lo e muito. Voc vai par-lo de utilizar para criar a base estrutural do site. Ou seja, a estrutura bsica de diviso de contedo ser feita pelo Template Layout, mas muitos dos detalhes internos e organizao dos elementos contidos nos elementos mestres sero feitos com float. Com o Template Layout a estrutura do layout no depende da posio dos
195

HTML5 e CSS3 com Farinha e Pimenta

elementos do HTML no cdigo, voc poder otimizar o cdigo ao mximo para os leitores de tela e sistemas de busca, j que estes meios de acesso prezam pela estrutura do seu contedo.

J funciona?
Sim, j funciona, mas no nativamente nos browser. Esta especificao ainda um rascunho do W3C e por isso os browsers ainda no a suportam. Mesmo assim um desenvolvedor criou um script em Javascript que entende o CSS desta especificao e simula os resultados. Funciona muito bem.

PAGED MEDIA
Com certeza voc j deve ter tentado ler um livro ou uma apostila em algum site na web e preferiu imprimir o texto para ler offiline, no papel por ser mais confortvel ou por ser mais prtico quando no se est conectado. Existem vrios motivos para que um leitor queira imprimir o contedo de um site, principalmente sites com textos longos e pesados. Durante muito tempo o principal motivo era que ler na tela do computador era cansativo. Hoje isso ainda um problema, mas com o avano das telas e do aparecimento das tablets no mercado, voc consegue passar mais tempo na frente de uma tela lendo grandes quantidades de texto. O problema que geralmente a organizao de pginas e o contedo no exatamente confortvel para passarmos horas lendo. Outro problema comum que ns desenvolvedores no temos uma maneira fcil de formatar pginas. Na verdade temos, mas um pouco de gambiarra e claro, no maneira correta. A especificao de Paged Media nos possibilita formatar as pginas, transparncias (aqueles plsticos que usamos com retroprojetores) ou at mesmo pginas que sero vistas pelo monitor. Controlaremos suas medidas, tamanhos, margens, quebras de pginas e etc... Nota: Para voc no se confundir, quando digo pginas, quero dizer pginas
196

CSS

fsicas, de papel, no pginas web, ok? ;-)

@PAGE
Definiremos com CSS3 um modelo de pgina que especifica como o documento ser formatado em uma rea retangular, chamada de page box, com larguras e alturas limitadas. Nem sempre o page box tem referncia correspondente para uma folha de papel fsica, como normalmente conhecemos em diversos formatos: folhas, transparncias e etc. Esta especificao formata o page box, mas o browser ou o meio de acesso que o usurio est utilizando que tem a responsabilidade de transferir o formato do page box para a folha de papel no momento da impresso. O documento transferido no modelo da pgina para um ou mais page boxes. O page box uma caixa retangular que ser sua rea de impresso. Isso como se fosse um viewport do browser. Como qualquer outro box, a page box tem margin, border, padding e outras reas. O contedo e as reas de margin do page box tem algumas funes especicias: A rea de contedo do page box chamada de rea da pgina ou page area. O contedo do documento flui na rea de pgina. Os limites da rea da pgina na primeira pgina estabelece o retngulo inicial que contm o bloco do documento. A rea da margem da page box dividido em 16 caixas de margem ou margin boxes. Voc pode definir para cada caixa de margem sua prpria borda, margem, padding e reas de contedo. Normalmente essas caixas de margem so usadas para definir headers e footers do documento. Confesso que o nome utilizado (caixas de margem) meio estranho. As propriedades do page box so determinadas pelas propriedades estabelecidas pelo page context, o qual a regra de CSS @page. Para definir a
197

HTML5 e CSS3 com Farinha e Pimenta

largura e altura de uma page box no se usa as propriedades width e height. O tamanho da page box especificada utilizando a propriedade size no page context.

TERMINOLOGIA E PAGE MODEL (MODELO DE PGINA)


O page box tem algumas reas simples de se entender que facilitar a explicao. Veja abaixo uma imagem e uma explicao de suas respectivas reas:

Page box
O page box onde tudo acontece. Tenha em mente que o page box o viewport das medidas impressas. l que conter as reas de margem, padding, border e onde o texto ser consumido. A largura e altura do page box determinada pela propriedade size. Em um caso simples, o page box tem a largura e a altura de uma folha. Entretanto em casos complexos onde page box difere das folhas de papel em valores e orientaes j que voc pode personalizar de acordo com sua necessidade.

Page area
A page area a area de contedo (content area) do page box.

Margin box
Margin boxes contm boxes para header e footer. So conjunto de 16 caixas onde voc pode inserir contedo til como nmero da pgina, ttulo do livro, etc, etc, etc. Essas reas ficam fora do Page area. Cada um tem suas margins, paddings e bordas individuais. Veja o diagrama abaixo para visualizar melhor.

198

CSS

Page sheet
A folha, a pgina, a superfcie que ser impresso o contedo. A ilustrao abaixo mostra a representao de uma folha.

199

HTML5 e CSS3 com Farinha e Pimenta

Non-printable area - rea no impressa


A rea de no impresso a rea onde o dispositivo de impresso no capaz de imprimir. Esta rea depende do dispositivo que voc est utilizando. O page box fica dentro da rea de impresso.

rea de impresso
A rea impressa onde o dispositivo de impresso capaz de imprimir. A rea de impresso o tamanho da page sheet menos a rea de no impresso. Como a rea de no impresso, a rea til de impresso depende muito do dispositivo. O dispositivo pode ajustar o contedo para que seja impresso sem problemas nessa rea. Cada dispositivo tem seu meio de ajuste.

PROPRIEDADE SIZE
A propriedade size especifica o tamanho e a orientao da rea do de contedo, o page box. O tamanho do page box pode ser definida com valores absolutos (px) ou relativos (%). Voc pode usar trs valores para definir a largura e a orientao do page box:

auto
O page box ir ter o tamanho e orientao do page sheet escolhido pelo usurio.

landscape
Define que a pgina ser impressa em modo paisagem. O page box neste caso tem o mesmo tamanho da pgina, mas o lado maior o horizontal. Se o tamanho da pgina no for definido, o tamanho especificado pelo usurio e seu dispositivo.

200

CSS

portrait
Define que a pgina ser impressa em modo retrato. O page box neste caso tem o mesmo tamanho da pgina, mas o lado maior o vertical. Se o tamanho da pgina no for definido, o tamanho especificado pelo usurio e seu dispositivo. Veja um exemplo abaixo:
@page { size: auto; /* auto o valor padro */ margin: 10%; /* margem */ }

Como nessa caso a margem varivel, ela est sendo relativa s dimenses da pgina. Logo se a pgina uma A4, com as dimenses: 210mm x 297mm, as margens sero 21mm e 29.7mm. Outro exemplo:
@page { size: 210mm 297mm; /* definindo page-sheet para um tamanho de A4 */ }

PAGE-SIZE
O page-size pode ser especificado utilizando um dos media names abaixo. Isso o equivalente a utilizar os valores escritos diretamente na propriedade size. Contudo muito melhor utilizar o nome de um formato de formato de papel. Formato Descrio

201

HTML5 e CSS3 com Farinha e Pimenta

A5 A4 A3 B5 B4 letter

A pgina deve ser definida para o tamanho ISO A5: 148mm x 210mm. A pgina deve ser definida para o tamanho ISO A4: 210 mm x 297 mm. A pgina deve ser definida para o tamanho ISO A3: 297mm x 420mm. A pgina deve ser definida para o tamanho ISO B3 media: 176mm x 250mm. A pgina deve ser definida para o tamanho ISO B4: 250mm x 353mm. A pgina deve ser definida para o tamanho papel carta: 8.5 pol x 11 pol

Abaixo veja um exemplo de aplicao:


@page { size: A4 landscape; }

O W3C tem uma especificao muito extensa que pode ser encontrada aqui: http://www.w3.org/TR/css3-page/

PRESENTATION-LEVELS
A informao na web reutilizada de diversas maneiras. Toda informao publicada reutilizada por diversos meios de acesso, seja o seu browser, leitor de tela ou robs de busca. O HTML proporciona essa liberdade para a informao. Por ser uma linguagem muito simples, podemos reutilizar a informao marcada com HTML em diversos meios de acesso. Mas o HTML no cuida da forma com que o usurio vai visualizar a informao em seu dispositivo. O HTML apenas exibe a informao. A maneira que o usurio
202

CSS

consome essa informao diferente em cada um dos meios de acesso e dispositivos. a que entra todo o poder do CSS. O CSS formata a informao para que ela possa ser acessvel em diversos usar agents (meios de acesso). Se voc acessa um determinado site por um monitor de 22 ou pelo celular, a informao tem que aparecer bem organizada em ambos os cenrios. o CSS que organiza visualmente essas informaes. Alm disso podemos apresentar a informao de diversas formas em um mesmo dispositivo. Por exemplo: voc pode ver uma galeria de imagens da maneira convencional, clicando nas thumbs das fotos ou ver em forma de slideshow. Podemos levar essas experincias para websites de contedo textual tambm. A especificao de presentation-levels uma das especificaes que levam o usurio a terem contedo mostrados de uma outra forma da qual estamos acostumados. muito til para apresentaes de slides, com efeitos, transies e etc ou qualquer documento que seria melhor apresentado no formato de apresentao, como uma proposta, documentos tcnicos e etc.

COMO FuNCIONA O MODELO


O modelo por trs da especificao simples. Cada elemento no documento definido como um elemento de apresentao ou no formato original elements presentation level - EPL. O EPL pode ser explicito em uma folha de estilo ou calculado automaticamente baseado na posio do elemento pela estrutura do documento. assim que o browser calcula para mostrar os elementos progressivamente, como se faz normalmente em programas de apresentao. O elemento fica em um dos trs seguintes nveis que tambm so representadas por classes: below-level, at-level e above-level. Dependendo da pontuao de EPL que o browser d, o elemento fica em um determinado nvel. Essas pseudo-classes podem e devem ser modificadas via CSS.

203

HTML5 e CSS3 com Farinha e Pimenta

A PROPRIEDADE PRESENTATION-LEVEL
A propriedade presentation-level define como os valores de apresentao (EPL) de um determinado objeto devem ser calculados. So trs valores possveis: nmeros inteiros, increment e same. Quando definimos um valor inteiro, o elemento tem aquele valor fixo. Quando colocamos increment, o valor do objeto aumenta um ponto em relao ao objeto anterior. Suponha que h duas LI em uma UL. A primeira LI tem o valor de 1, a segunda tem valor de 2 e assim por diante. Quando definimos o valor same, o browser computa o mesmo valor do objeto anterior. Isso tudo vai ficar mais esclarecido com os exemplos a seguir. Utilizando o mesmo exemplo da especificao do W3C, temos o cdigo abaixo:
<!DOCTYPE html> <html> <body> <h1>strategies</h1> <h2>our strategy</h2> <ul> <li>divide</li> <li>conquer <p>(in that order)</p> </li> </ul> <h2>their strategy</h2> <ul> <li>obfuscate</li> <li>propagate</li> </ul>

204

CSS </body> </html>

Vamos definir o CSS de presentation-levels para esse HTML adicionado o cdigo CSS:

@media projection { h1 { page-break-before: always } li { presentation-level: increment } :below-level { color: black } :at-level { color: red } :above-level { color: silver } }

Definimos que o H1 ir sempre iniciar em uma nova pgina. Mas o mais importante a propriedade presentation-level que definimos para a LI. Isso quer dizer que a cada LI o browser contar mais um ponto. As trs pseudo-classes que falamos no comeo do texto: below-level, at-level, above-level, que formata os elementos que foram mostrados anteriores, o que elemento que est sendo mostrado e o prximo elemento. Sendo assim, o browser calcula a pontuao de cada um dos elementos utilizados no exemplo como mostra abaixo: HTML <h1>strategies</h1> <h2>our strategy</h2> <ul> <li>divide</li> <li>conquer</li> </ul>
205

Valor de EPL 0 0 0 1 2 0

HTML5 e CSS3 com Farinha e Pimenta

<h2>their strategy</h2> <ul> <li>obfuscate</li> <li>propagate</li> </ul>

0 0 1 2 0

Temos um outro exemplo, segue abaixo o HTML e logo depois a tabela com os valores de EPL:
<!DOCTYPE html> <html> <style> @media projection { h1 { presentation-level: 0; } h2 { presentation-level: 1; } h3 { presentation-level: 2; } body * { presentation-level: 3; } :above-level { display: none; } } </style> <body> <h1>strategies</h1> <h2>our strategy</h2> <ul> <li>divide</li> <li>conquer</li> </ul> <h2>their strategy</h2> <ul> <li>obfuscate</li> <li>propagate</li> </ul> </body> </html>

Perceba que agora definimos no CSS que tudo dentro de body tem o valor de
206

CSS

3. Logo o H1 que foi definido como 0 pela propriedade presentation-level tem o valor de 3. Definimos tambm display:none; para os prximos elementos. Agora veja a pontuao aplicada: HTML <h1>strategies</h1> <h2>our strategy</h2> <ul> <li>divide</li> <li>conquer</li> </ul> <h2>their strategy</h2> <ul> <li>obfuscate</li> <li>propagate</li> </ul> Valor de EPL 3 2 0 0 0 0 2 0 0 0 0

O W3C em uma especificao completa e em constante atualizao do presentation-levels aqui: http://www.w3.org/TR/css3-preslev/

207

8
Motor Webkit Gecko Trident Presto

BROWSERS

MOTORES DE RENDERIZAO
Quem nunca teve problemas para manter a compatibilidade do seu cdigo entre os diversos browsers do mercado? Entender a particularidadade de cada browser um trabalho muito complexo. Cada browser tem sua frequencia de atualizao e sincronizar todas essas atualizaes praticamente impossvel. Uma maneira mais segura de manter o cdigo compatvel, nivelando 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: Browser Safari, Google Chrome, Mobile Safari, Android Browser, alguns celulares da Nokia e da RIM. Firefox, Mozilla, Camino, Flock, Firefox para Android Internet Explorer 4 ao 9 Opera 7 ao 10

Focando a compatibilidade nos motores de renderizao voc atingir uma amplitude maior de browsers. Por exemplo, se seu cdigo funcionar no

HTML5 e CSS3 com Farinha e Pimenta

Webkit, voc alcanar o Safari e o Chrome, dois dos principais browsers do mercado para desktops. Alm disso, voc tambm alcana aparelhos como Blackberry, iPhone, iPod Touch, iPad e dispositivos que rodam Android.

PREFIXOS DE BROWSERS
Antes de comear os prximos assuntos, ncessrio que voc conhea e saiba os porqus da utilizao dos prefixos para browsers. Muitas das caractersticas do CSS, principalmente da sua verso 3 ainda esto em fase de adequao e testes, portanto elas no foram implementadas definitivamente em alguns browsers e para evitar conflitos e tambm conseguir informaes de feedback sobre o funcionamento dessas propriedades para fazer futuras adaptaes ou correes. Outro ponto importante, que algum destes fabricantes de browsers podem querer suportar uma determinada propriedade que ainda no faz parte do core do CSS mas que poderia ser muito til para voc utilizar em lugares especficos hoje, com muita cautela, claro. A tabela abaixo nos mostra os prefixos dos principais browsers do mercado. Durante toda minha experincia com Web, utilizei muitas vezes os prefixos do Firefox, Safari e Opera, quase nunca utilizei o prefixo para Internet Explorer. Creio que irei utiliz-lo mais agora, j que ele est entrando pra valer com o IE9 e suas atualizaes. Safari Firefox Opera Chrome Internet Explorer Konqueror -webkit-moz-o-chrome-ms-khtml-

210

Browsers

COMO uTILIZAR uM PREFIXO?


No se assuste, se voc utilizar uma propriedade de CSS que ainda est sendo planejada mas ainda assim quer aplicar em seu projeto para que os usurios de novos browsers possam usufruir com uma melhor experincia ao acessar seu site, seu cdigo pode ficar um pouco confuso. Por isso, organize-se melhor ao decidir quais propriedades voc gostar de experimentar. Para exemplo vamos utilizar a propriedade border-radius. Se quisessemos fazer uma borda arredondada com 10px, faramos assim:
div { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

Note que colocamos por ltimo a propriedade verdadeira, sem nenhum prefixo, essa propriedade cobrir os browsers que no precisam da utilizao de prefixos para renderizar a propriedade, por exemplo o Opera e o Internet Explorer 9.

PREFIXOS SO CSS-HACKS?
No. Nem se comparam. Com os prefixos voc est ajudando os fabricantes e o W3C a entenderem melhor novas propriedades. Concordo com voc que o cdigo no fica muito bonito de se ver e que pode causar muito transtorno quando mal organizado. Diferentemente dos css-hacks os prefixos fazem parte dos padres web. Os css-hacks exploram uma falha/bug do browser, criando um cdigo que apenas um determinado browser identifique ou ignore. Normalmente para isso usamos a sintaxe do CSS de forma errada como: w\idth:200px; ou _width:200px;.
211

HTML5 e CSS3 com Farinha e Pimenta

Ao utilizar CSS Hacks colocamos o projeto em risco. Os browsers passaro a ignorar esse cdigo e se seu CSS estiver baseado nele, provavelmente algo vai quebrar. Eu costumo sugerir esse tipo de hack apenas para verses muito antigas do IE como a verso 6, que uma verso que no cenrio atual oferece muitos problemas de compatibilidade.

212

COMO SER?

Entenda que este livro aborda duas tcnologias e alguns conceitos que esto em pauta agora no mercado de desenvolvimento web. Voc j imaginou o que ser do HTML ou do CSS daqui h 5 ou 10 anos? Ser que ainda iremos continuar escrevendo CSS e HTML como fazemos hoje? Ser que iremos utilizar outras linguagens ou vamos ainda manter os mesmos costumes e conceitos? Eu no sei, mas provavelmente vai ser muito divertido desenvolver interfaces para celulares transparentes, televises gigantes touch screens ou sistemas inteligentes que leem telas e respondem perguntas complexas. Quero que voc lembre que no importa o futuro, mas a informao precisa estar sempre acessvel. Essa essncia nunca mudar. O usurio precisa acessar a informao sem bloqueios, de forma rpida, fcil e consistente. Esteja preparado. O futuro est mais prximo do que voc imagina.

Os desenvolvedores precisam acordar


O desenvolvimento web depende de trs personagens principais: W3C, que regulamenta, cria e sanciona padres para a web. Os browsers, que importam essas regras e padres de forma que a web seja mais homognea. E os desenvolvedores, que possibilitam a criao e publicao de contedo em vdeos, texto, imagem etc.

HTML5 e CSS3 com Farinha e Pimenta

Cada um destes personagens tem papis importantes para que a evoluo da web possa se tornar forte, traando novos caminhos, cobrindo as necessidades atuais dos usurios e prevendo necessidades e solues futuras. H um ciclo para que estes personagens possam cumprir com seus objetivos. O W3C cuida dos padres. Ele tem ideias, ele prev problemas e tenta solucion-los. O W3C no aplica, ele apenas planeja. um trabalho difcil, por que necessrio uma viso muito apurada do cenrio da web para saber quais caminhos ela dever tomar. Uma deciso errada, pode acarretar problemas que levaro anos para serem solucionados por completo. Vide o desenvolvimento com tabelas. Por isso esse trabalho de planejamento deve ser meticuloso. Devo confessar que em muitos casos o W3C no supera as expectativas e faz com que iniciativas paralelas surjam e direcionem a Web para um caminho mais correto. Foi o que aconteceu com o HTML5. Os browsers, por sua vez, precisam entender e adotar as idias do W3C, absorvendo as solues e criando suporte nos seus softwares. Esse trabalho tambm tem seus perigos. Os browsers precisam pesquisar quais das necessidades dos desenvolvedores mais importante e assim implementla para que a utilizao de projetos seja executada. Obviamente que alguns decidem suportar aquelas solues que daro mais pontos estratgicos contra o concorrente. Finalizando o ciclo, os desenvolvedores aplicam tudo o W3C define, mas apenas aquilo que os browsers querem ou podem suportar. E isso, claro, faz com que o desenvolvedor se depare com problemas na ponta produo. Vide o IE6/7/8 e nossos problemas de cada dia. Durante muito tempo, esse ciclo no era afinado. Havia uma certa confuso e um jogo de interesses prprios envolvendo principalmente os browsers. O W3C estava apenas pensando em como resolver problemas que talvez existiriam daqui longos anos. Os browsers estavam apenas interessados em criar uma massa de usurios suficiente para ser o primeiro no ranking. Os desenvolvedores, por sua vez, queriam ganhar seu dinheirinho, fazer o trabalho, entregar pro cliente e acabar com o problema.
216

Como ser?

Ningum deu ateno quando comeamos a desenvolver com tabelas, fazendo com que os sites ficassem mais pesados, aumentando o tempo de desenvolvimento e o custo do projeto. Este ciclo defeituoso foi praticado durante muito tempo. Por incrvel que parea, foram os desenvolvedores que comearam a fazer o ciclo funcionar novamente como deveria. Eles acordaram os fabricantes de browsers e tambm o W3C. O W3C passou a pensar mais em problemas presentes. Solucionou problemas iminentes e que entregavam valor para os projetos. Os browsers suportaram o mais rpido possvel essas mudanas, atualizando seus engines, e fortalecendo as bases para novas solues e flexibilizaes posteriores. J os desenvolvedores estagnaram. Desculpe-me, serei um pouco revoltado daqui para frente. Os desenvolvedores dormiram. Quando o W3C e os browsers apresentaram solues para problemas como transparncia, bordas arredondadas, backgrounds inteligentes, utilizao de fonts remotas e etc, os desenvolvedores resolveram que no era a hora dessas solues por causa da retrocompatibilidade com browsers antigos, como o IE6. Na verdade estou sendo meio injusto aqui. No foram todos os desenvolvedores que criaram caso com a retrocompatibilidade, foram somente os idiotas. Ns reclamvamos que precisvamos de recursos mais inteligentes para trabalhar. Que precisvamos de idias realmente inovadoras, que transformassem os projetos e facilitassem o desenvolvimento. Protestamos, escrevemos manifestos, postamos em nossos blogs revoltados com a falta de viso do W3C e com a pobreza do suporte dos browsers. E quando conseguimos o que queramos, demos para trs. Amarelamos. Pedimos arrego. Infelizmente, via-se muito disso aqui no Brasil do que no resto do mundo. Ouvi muitas desculpas como: Mas meu cliente usa IE6. ou Mas isso no
217

HTML5 e CSS3 com Farinha e Pimenta

funciona em IE6. Voc desenvolvedor. Voc trata com seu cliente todos os dias. Voc tem o poder de educar e convencer. E se voc acha que no tem poder nenhum, por que ainda trabalha com web? Talvez isso seja trauma do passado. Talvez no. O fato que no podemos mais nivelar por baixo. Isso atrasar uma evoluo inteira. Tenho incansavelmente falado sobre Graceful Degradation, Enhanced Progressive, HTML 5, as maravilhas do CSS 3 e etc, pois esse o assunto que rola l fora. H desenvolvedores e empresas, que acham que devemos ter uma autorizao especial dos gringos para utilizarmos novas tecnologias e principalmente para deixar os browsers antigos no passado. Esse assunto me faz pensar em outra pergunta: Estamos (voc est?) preparados para o ritmo alucinante do W3C e dos browsers? At a Microsoft est cumprindo com a palavra de ter um browser atualizado. Eles j anunciaram o novssimo Internet Explorer 10, com uma srie de atualizaes que promete trazer o IE para o patamar de browsers atuais. O mercado de client-side se transformar rapidamente nos prximos anos. Muitas mudanas no HTML e no CSS sero publicadas com o intuito de tornar a web mais uniforme, flexvel e portvel. O HTML 5 no s uma coleo de novas tags e APIs. O CSS 3 no ganhou s bordas arredondadas. E nem s de iPhone vive o homem. Existem milhares de Nokias, Blackberrys, Windows Phones e Androids por a. Os desenvolvedores precisam acordar.

218