Baixar capítulo de amostra
Propaganda
Introdução ao HTML5 e CSS3: A Evolução da Web Richard Clark, Oil Studholme, Christopher Murphy and Divya Manian Rio de Janeiro, 2014 PFCG_BeginningHTML5AndCSS3.indb 1 29/09/2014 09:21:04 Introdução ao HTML5 e CSS3: A Evolução da Web Copyright © 2014 da Starlin Alta Editora e Consultoria Eireli. Translated from original Beginning HTML5 and CSS3: the Web evolved 2012 by APRESS, ISBN 978-1-4302-2874-5. This translation is published and sold by permission APRESS, Inc, the owner of all rights to publish and sell the same. PORTUGUESE language edition published by Starlin Alta Editora e Consultoria Eireli. Copyright © 2014 by Starlin Alta Editora e Consultoria Eireli. Todos os direitos reservados e protegidos por Lei. Nenhuma parte deste livro, sem autorização prévia por escrito da editora, poderá ser reproduzida ou transmitida. Erratas: No site da editora relatamos, com a devida correção, qualquer erro encontrado em nossos livros bem como disponibilizamos arquivos de apoio se aplicável ao livro. Acesse o site www.altabooks.com.br e procure pelo título do livro desejado para ter acesso as erratas e/ou arquivos de apoio. Marcas Registradas: Todos os termos mencionados e reconhecidos como Marca Registrada e/ou Comercial são de responsabilidade de seus proprietários. A Editora informa não estar associada a nenhum produto e/ou fornecedor apresentado no livro. Impresso no Brasil — 1ª Edição, 2014 Vedada, nos termos da lei, a reprodução total ou parcial deste livro. Produção Editorial Editora Alta Books Gerência Editorial Anderson Vieira Supervisão e Qualidade Editorial Angel Cabeza Sergio Luiz Design Editorial Aurélio Corrêa Captação e Contratação de Obras Nacionais Cristiane Santos Marco Pace J. A. Rugeri [email protected] Vendas Atacado e Varejo Daniele Fonseca Viviane Paiva [email protected] Marketing e Promoção Hannah Carriello [email protected] Ouvidoria [email protected] Equipe Editorial Tradução Leonardo Castilhone Auleriano Messias Claudia Braga Livia Brazil Letícia Vitoria Marcelo Vieira Mayara Coelho Milena Lepsch Milena Souza Natália Gonçalves Revisão Gramatical Copidesque Revisão Técnica Isis Batista Pinto Victor Madei Martins Flávio Silveira Analista de Tecnologia Raquel ferreira Rodrigo Araujo Thiê Alves Diagramação Diniz Gomes Dados Internacionais de Catalogação na Publicação (CIP) I61 Introdução ao HTML5 e CSS3 : a evolução da Web / Richard Clark ... [et al.]. – Rio de Janeiro, RJ : Alta Books, 2014. 654 656 p. : il. ; 24 cm. Inclui índice. Tradução de: Beginning HTML5 and CSS3: the Web evolved. ISBN 978-85-7608-856-1 1. HTML (Linguagem de marcação de documento). 2. Sites da Web - Desenvolvimento. 3. Folhas de estilo 3.0. 4. HTML 5.0. I. Clark, Richard. II. Studholme, Oil. III. Murphy, Christopher. IV. Manian, Divya. CDU 004.738.52 CDD 006.76 Índice para catálogo sistemático: 1. Linguagens de marcação 004.738.52 (Bibliotecária responsável: Sabrina Leal Araujo – CRB 10/1507) Rua Viúva Cláudio, 291 – Bairro Industrial do Jacaré CEP: 20970-031 – Rio de Janeiro – Tels.: (21) 3278-8069/8419 www.altabooks.com.br – e-mail: [email protected] www.facebook.com/altabooks – www.twitter.com/alta_books PFCG_BeginningHTML5AndCSS3.indb 2 29/09/2014 09:21:04 Sumário — Acesso Rápido Sumário v Prefácio xxiii Sobre os Autores xxv Sobre os Revisores Técnicos xxvi Agradecimentos xxvii Introdução xxix Capítulo 1: HTML5: Agora, Não em 2022 1 Capítulo 2: Seu Primeiro Mergulho no HMTL5 21 Capítulo 3: Novos Elementos Estruturais 47 Capítulo 4: Uma Melhor Abordagem para a marcação do Conteúdo 93 Capítulo 5: Rich Media 145 Capítulo 6: Abrindo Caminhos para Aplicativos Web 197 Capítulo 7: CSS3, Aqui e Agora 241 Capítulo 8: Mantendo Sua Marcação Leve Usando Seletores CSS 291 Capítulo 9: Um Layout Para Cada Ocasião 329 Capítulo 10: Melhorando a Tipografia Web 415 Capítulo 11: Colocando as Propriedades CSS3 para Funcionar 457 Capítulo 12: Transformações, Transições e Animação 525 Capítulo 13: O Futuro do CSS, ou Coisas Legais que Estão Chegando 603 Índice 615 iv PFCG_BeginningHTML5AndCSS3.indb 4 29/09/2014 09:21:04 Sumário Sumário — Acesso Rápido iv Prefácio xxiii Sobre os Autores xxv Sobre os Revisores Técnicos (obra original) xxvi Agradecimentos xxvii Introdução xxix Para quem é este livro? xxix Como é estruturado este livro? xxix Convenções usadas neste livro xxx Capítulo 1: HTML5: Agora, Não em 2022 Pressupostos básicos Uma abordagem dos padrões web 1 1 2 O que são padrões web? 2 Por que usar padrões web? 3 Marcação semântica 4 O pavê da web: separando aquelas camadas 4 O Dao do design web: aceitando a incerteza 5 Acessibilidade 7 Criando sua marcação 7 Como foi criado o HTML5? 8 Além do HTML4... 9 XHTML 1.0 9 XHTML 2.0 e o retrocesso 10 HTML5 avançando! 11 Princípios de design do HTML5 13 Suportando o conteúdo existente 13 Degradando graciosamente 14 Não reinventando a roda 14 Pavimentando as trilhas 14 Evoluindo, não revolucionando 15 Uma dúzia de mitos sobre o HTML5 15 v PFCG_BeginningHTML5AndCSS3.indb 5 29/09/2014 09:21:04 1. navegadores não têm suporte a HTML5. 15 2. OK, a maioria dos navegadores dão suporte ao HTML5, mas o IE com certeza não 15 3. O HTML5 não estará acabado até 2022 16 4. Agora tenho que reaprender tudo! 16 5. O HTML5 usa elementos de apresentação 16 6. O HTML5 é um retorno à sopa de tags 16 7. O HTML5 mata rebentos de acessibilidade 17 8. O Flash já era 17 9. O HTML5 vai acabar com a web! 17 10. O desenvolvimento do HTML5 é controlado pelos vendedores de navegadores 17 11. O HTML5 abrange CSS3, Geolocalização, SVG e todas as outras tecnologias modernas que existem 17 12. Então, quando posso começar a usar o HTML5? 18 Sumário 18 Lição de casa 19 Lição do Capítulo 1 19 Leitura dirigida 19 Capítulo 2: Seu Primeiro Mergulho no HTML5 Revisão da Lição de Casa 21 22 Nossa página 22 84,8% da sua marcação permanece 24 Está tudo na cabeça 24 Um DOCTYPE mais perfeito 25 Declarando idiomas no HTML5 26 Codificação de caractere 28 Sr. Memória 28 Uma jornada ao “Olá, Mundo!” 29 “Olá, Mundo!” no estilo XHTML 1.0 29 “Olá, Mundo!” no estilo HTML4 30 “Olá, Mundo!” em estilo “relaxado” HTML5 30 “Olá, Mundo!” no estilo “estrito” do HTML5 31 Dando suporte ao HTML5 em vários navegadores 32 Como os navegadores lidam com elementos desconhecidos? 32 Conheça o shiv 34 vi PFCG_BeginningHTML5AndCSS3.indb 6 29/09/2014 09:21:05 IE Print Protector 35 Declarando elementos de bloco 36 Uma página de texto-padrão HTML5 37 Não tem mais atributo type 37 Polyfills e alternativas 38 Validação 39 Validador HTML5 40 HTML Lint 41 Revisitando Miss Baker 42 Resumo 45 Lição de casa 45 Capítulo 3: Novos Elementos Estruturais 47 Práticas de fluxo de trabalho, evoluindo? 48 Uma nova aurora na semântica 49 Blocos de construção estruturais: <div>, <section> e <article> 53 A diferença entre <div>, <section> e <article> 53 O elemento <div> 53 O elemento <section> 54 O elemento <article> 54 Qual escolher? 54 Estruturas básicas usando esses elementos 55 Um artigo em blog web 55 Um longo artigo com subseções (como uma tese) 56 Cabeçalhos: <header>, <hgroup> e <h1>–<h6>, além de <footer> 57 Um artigo com um cabeçalho 58 Um artigo <header> com cabeçalho e metadados 59 Um artigo com um subtítulo com <hgroup> incluso 59 Um artigo com cabeçalho, subtítulo e metadados 59 Alguns exemplos de uso do <hgroup> 60 O algoritmo de esboço HTML5 60 Esboço em ação 61 Elementos raiz de seccionamento 63 O flagelo da seção sem título 64 Níveis de elementos no cabeçalho ao estilo HTML5 66 Exemplo de agrupamento de níveis de elemento de cabeçalho 67 Exemplo do novo estilo para níveis de elemento de cabeçalho 67 vii PFCG_BeginningHTML5AndCSS3.indb 7 29/09/2014 09:21:05 Ainda mais elementos estruturais: <nav>, <aside>, <figure> (e <figcaption>) 68 Juntando tudo 71 Os novos elementos de seccionamento de conteúdo em resumo 72 Convertendo uma página simples para HTML5 73 Introduzindo “HTML4.5”: adicionando semântica HTML5 via <div class=”> 78 Adicionando semântica ao “HTML4.5” e ao HTML5 por meio de ARIA (marcos de função) Chuvas de realidade em nossa festa de acessibilidade Acessibilidade e HTML5 Técnicas de acessibilidade, evoluindo 83 84 85 86 O atributo alt em <img> 86 O obsoleto atributo longdesc em <img> 88 O obsoleto, mas adaptado, atributo summary em <table> 89 O obsoleto atributo axis em <th> e <td> 90 Outras questões de acessibilidade HTML5 90 Acessibilidade HTML5: uma nova esperança 90 Resumo 91 Lição de casa 91 Leitura avançada 92 Capítulo 4: Uma Melhor Abordagem para a marcação do Conteúdo 93 Assando o melhor bolo que pudermos 93 Ex-elementos de apresentação e amigos 94 Dando aos elementos <i> e <b> novos significados semânticos 95 O elemento <i> 95 O elemento <b> 96 Os elementos <em> e <strong> 98 O elemento <em> 98 O elemento <strong> 98 O elemento <small> 99 O elemento <hr> 99 O elemento <s>, junto com <del> e <ins> 101 O elemento <u> 103 Elementos de apresentação: relíquias de uma era passada 104 Links em bloco com o elemento <a> 104 Escrevendo um Link em bloco 105 Advertências do navegador com Firefox 4 106 viii PFCG_BeginningHTML5AndCSS3.indb 8 29/09/2014 09:21:05 Outros elementos com mudanças menores a partir do HTML4 107 O elemento <ol> e novos (e antigos) atributos relacionados 107 O atributo type 107 Os atributos start e value 108 O atributo reversed 109 O elemento <dl> 109 Definindo palavras num dicionário ou glossário 110 Metadados 110 O elemento <cite> 111 Usando <cite> 112 Quando não usar <cite> 112 Novos elementos semânticos 113 O elemento <mark> 113 Comentários Ruby com <ruby>, <rt> e <rp> 114 Usando <ruby> para o inglês 116 Usando polyfill para suporte a <ruby> em idiomas do Leste Asiático 117 O elemento <time> 119 Quando não se usa <time> 121 Mudanças em <time> 121 Estendendo o HTML5 121 O elemento <data> 122 O atributo data personalizado (data-*) 123 Microformatos 124 Uma rápida introdução aos microformatos 124 Usando licença rel para informação de licenciamento 124 Usando XHTML Friends Network (XFN) 125 Usando hCard para informações de contato 126 Usando microformatos em HTML5 128 Microdata: um pouco de semântica HTML5 128 Sintaxe Microdata 129 itemscope e itemprop 130 Valor itemprop de um atributo 130 Itens agrupados 131 Propriedades múltiplas 132 Referências in-page 132 Usando <meta> para adicionar conteúdo por meio de atributos 132 ix PFCG_BeginningHTML5AndCSS3.indb 9 29/09/2014 09:21:05 Identificadores globais com itemid 133 Itens digitados (itemtype) e nomes globalmente únicos 134 Microdados em ação 134 Usando vocabulários schema.org 135 Ferramentas e suporte a navegador 139 Criando seu próprio vocabulário 140 Considerações finais sobre os microdados 141 Resumo 142 Leitura Posterior e Links Relacionados 143 Capítulo 5: Rich Media O caso do Flash 145 146 Formatos proprietários vs. padrões abertos 146 Entrando no mundo do HTML5 e seus amigos 147 O HTML5 aponta para o fim do Flash? 147 O vídeo à maneira do HTML5 Formatos de vídeo 148 151 Recipientes de vídeo e codecs 152 Suporte de navegadores 153 Adicionando video source 155 Inserindo nosso velho amigo Flash 157 O elemento track 159 WebVTT 160 Faça mais com video Lição de casa extra? Tirando um pouco do peso das costas 163 165 165 JW Player 165 Playr 166 MediaElement.js 167 VideoJS 167 SublimeVideo 168 Áudio 168 Codecs de áudio 169 Suporte do navegador 170 Adicionando audio source 170 Usando jPlayer 171 Resumo de áudio e vídeo 171 x PFCG_BeginningHTML5AndCSS3.indb 10 29/09/2014 09:21:05 Canvas 171 Liberdade baseada em pixels 172 Adicionando/implementando canvas 172 O contexto 2D 173 Canvas no IE 181 O poder e o potencial do canvas 182 Jogos 183 Cut the Rope 183 Canvas Rider 183 3D Tetris 184 Aplicativos 185 Darkroom 185 Sketchpad 185 Picozu Editor 186 Combinando video e audio com canvas 187 O experimento da 9elements com canvas HTML 187 Ambilight 188 Video destruction 188 Leitura complementar sobre o canvas 189 SVG 189 Poder vetorial Escolhendo entre canvas e SVG Vetores liberados com o SVG Implementando SVG básico Leitura relacionada a SVG 190 190 191 191 194 Resumo 195 Lição de casa 195 Capítulo 6: Abrindo Caminhos para Aplicativos Web Formulários HTML5 197 198 Um pouco da história de formulários HTML5 198 Usando os princípios de design HTML5 198 Atributos de formulários HTML5 199 placeholder 199 autofocus 200 autocomplete 201 required 201 xi PFCG_BeginningHTML5AndCSS3.indb 11 29/09/2014 09:21:05 pattern 202 list e o elemento datalist 203 multiple 204 novalidate e formnovalidate 205 form 205 formaction, formenctype, formmethod e formtarget 206 formaction 206 formenctype 206 formmethod 206 formtarget 206 Resumo dos atributos form Novos tipos de entrada 207 207 search 207 email 208 url 211 tel 212 number 212 range 214 Datas e horários 215 date 215 month 216 week 216 time 217 datetime 217 datetime-local 218 color 219 Resumo dos tipos de entrada 219 Validação e como prover fallbacks 220 A diferença entre validação lado cliente e lado servidor 220 Processando e lidando com erros de navegador 220 Detecção de recursos com JavaScript 221 Polyfills para formulários 222 Suporte a navegadores atuais 222 APIs de formulários HTML5 228 Resumo de formulários HTML5 228 Aplicativos Web 229 xii PFCG_BeginningHTML5AndCSS3.indb 12 29/09/2014 09:21:05 Introdução a elementos para aplicativos web 229 Elementos de formulário 229 datalist 229 keygen 230 output 231 progress 231 meter 232 Elementos interativos 232 details 232 summary 233 command 233 menu 233 Introdução às APIs relacionadas ao HTML5 233 APIs na especificação HTML5 234 API Drag and Drop 235 Aplicativos web off-line/cache de aplicativo 235 Interação do usuário 236 API History 236 MIME type e protocol handler registration 237 APIs na especificação WHATWG 237 As APIs “HTML5” da moda 238 A gloriosa aurora de uma era de internet baseada em padrões, acessível a todos, num mundo de navegadores compatíveis, em uma imensidão de dispositivos 238 Lição de casa: fazer a marcação do formulário “Join Gordo’s Space Cadets” usando a marcação estudada 239 Capítulo 7: CSS3, Aqui e Agora Relembrando a importância dos padrões web 241 242 CSS 1, CSS 2.1, CSS3... 243 O CSS3 está pronto? 244 Contexto 244 Modularidade CSS3 245 Níveis de maturidade 246 Os benefícios do CSS3 246 Simplificando o Design 247 Trabalhos de contorno e hacks reduzidos 247 Revisão do básico de CSS 248 xiii PFCG_BeginningHTML5AndCSS3.indb 13 29/09/2014 09:21:05 Anatomia de uma regra (ou rule set) 248 Uma propriedade 249 Um valor 249 Uma declaração 249 Bloco de declaração 250 Palavras-chave 250 Unidades CSS 250 Notação funcional 251 Seletores 252 Combinadores 253 Regras At 253 Extensões específicas de fabricantes 253 Taquigrafia CSS 253 Efeito cascata, especificidade e herança 255 Efeito cascata no CSS 255 Calculando a especificidade 256 Herança CSS 257 Organização e manutenção CSS Convenções CSS 258 258 CSS em linha única vs. linhas múltiplas 258 Ordenando declarações 260 Ordenando conjuntos de regras 261 Convenções de nomes 262 Comentando as melhores práticas 263 Criando um índice 263 Folha de referência de cor e tipografia 264 Resets CSS e normalize.css 265 Usando resets 265 Usando normalize.css 267 Frameworks e ferramentas CSS 267 CSS Sustentável 268 Criando um pattern primer ou uma biblioteca de componentes 269 CSS prático e sustentável 271 CSS Orientado a Objetos (OOCSS) 272 Validação CSS 273 CSS Lint 274 xiv PFCG_BeginningHTML5AndCSS3.indb 14 29/09/2014 09:21:05 Suporte a navegador, prefixos de fabricantes, polyfills e Melhoria progressiva 275 Melhoria progressiva 275 Melhoria progressiva em ação 276 Suporte a browser CSS3 277 Prefixos de fabricantes 278 Prefixos de fabricantes em ação 279 O Efeito Opera 280 Juramento do Bom Desenvolvedor CSS 281 -prefix-free 281 Filtros, padrões e performance do IE 282 Detecção de recursos e polyfills 283 Polyfills 285 Polyfills específicos para IE 285 Selectivizr 285 CSS3 PIE 286 Resumo 287 Lição de Casa 288 Apêndice: Status dos Módulos CSS3 289 Capítulo 8: Mantendo sua marcação Leve Usando Seletores CSS 291 Redução de seletores 292 Seletores CSS3 294 Combinadores 294 Seletores de atributo e substring 296 Seletor de atributo substring “começa com” 297 Seletor de atributo substring “termina com” 299 Seletor de atributo substring “contém” 299 Pseudoclasses de estados de elemento de UI (Users Interface-Interfaces de Usuário) 301 Pseudoclasse target 303 Pseudoclasses estruturais 309 :first-child 309 :last-child 311 :nth-child 311 :nth-last-child 314 :only-child 314 :first-of-type 314 xv PFCG_BeginningHTML5AndCSS3.indb 15 29/09/2014 09:21:05 :last-of-type 315 :nth-of-type 315 :nth-last-of-type 318 :only-of-type 319 :empty 320 :root 320 Pseudo-elementos 320 ::before e ::after 321 Explorando mais os pseudo-elementos 322 Pseudoclasse de negação 323 Suporte ao navegador 324 Seletores do futuro 325 Resumo 326 Lição de casa 326 Apêndice 327 Capítulo 9: Um Layout para Cada Ocasião A web de muitos dispositivos 329 329 Evolução dos tamanhos dos monitores 330 Sites separados otimizados para cada dispositivo? Mas isso é uma loucura! 331 O Modelo de Formatação Visual do CSS — caixas a torto e a direito! O Modelo Caixa: conteúdo, preenchimento, borda, margem 333 333 Caixas block-level com display: block 337 O algoritmo de cálculo de largura e altura 339 A propriedade box-sizing 340 Margens em caixas block-level 342 Conflitando margens verticais 344 Caixas inline com display: inline 346 Outros valores para display (notadamente inline-block e none) 348 Caixas anônimas 349 Esquemas de posicionamento e a propriedade position 350 Camadas e a propriedade z-index 352 Introduzindo Flutuações 352 Limpeza de floats 354 Contexto de formatação de bloco 356 Floats para layout 358 xvi PFCG_BeginningHTML5AndCSS3.indb 16 29/09/2014 09:21:05 Métodos de layout em duas colunas 359 Métodos de layout para três ou mais colunas 359 Fingindo backgrounds de coluna de altura total 360 Mudando a ordem das colunas com margens negativas 361 Os efeitos das diferentes unidades para layouts 363 Layouts por pixel 363 Layouts flexíveis 364 Seja igual à água com layouts líquidos 364 Problemas de suporte de navegador a layout líquido 367 Foco tipográfico com layouts elásticos 368 Tão flexível quanto quiser com layouts híbridos 369 Outros métodos de layout CSS 2.1 370 Usando display: inline-block; para layout 370 Usando display: table; para layout 374 Comparando layouts inline-block e table 374 Media queries e Web Design Responsivo 375 Introduzindo media queries 375 Sintaxe media queries 376 Design desktop primeiro, móvel primeiro, e conteúdo primeiro 378 Suporte a navegador para media queries 379 Viewport em celulares 380 Complicações com imagens 381 Layouts CSS3 385 CSS Positioned Layout Module Level 3 386 CSS Fragmentation Module Level 3 387 Multi-column Layout Module 388 Fundamentos de multicoluna 389 Suporte a navegador para layout multicoluna 391 Leitura complementar 392 CSS Regions Module Level 3 Leitura complementar CSS Exclusions and Shapes Module Level 3 Leitura complementar CSS Paged Media Module Level 3 Leitura complementar CSS Generated Content for Paged Media Module 393 394 395 396 396 398 398 xvii PFCG_BeginningHTML5AndCSS3.indb 17 29/09/2014 09:21:05 Leitura complementar The Flexible Box Layout Module Leitura Complementar The CSS Grid Layout Module Leitura complementar Módulos de layout CSS3 em resumo 400 400 408 408 411 411 Conclusão 411 Leitura posterior 412 Especificações Lição de casa Capítulo 10: Melhorando a Tipografia Web 413 414 415 Estilos de fontes e fontes 415 Uma breve história dos tipos na web 417 Texto como imagem 418 Farhner Image Replacement (FIR) 418 Método Leahy/Langridge 419 Método Phark 419 Método Gilder/Levin 420 Substituição de Imagem JavaScript (JIR) 420 sIFR 421 Cufón 422 Fontes SVG 422 @font-face 423 Web fonts 423 No início 423 @font-face contra-ataca 424 Dissecando a sintaxe do font face: declaração @font-face 424 Sintaxe blindada para @font-face 426 Evitando o flash de texto sem estilo (FOUT) 426 WebFont Loader do Google 427 Usando font.js 428 Coisas a lembrar ao se usar fontes web 429 Encontrando fontes web 430 Fontes web gratuitas 430 Fontes web comerciais 431 Fonte como um serviço 431 xviii PFCG_BeginningHTML5AndCSS3.indb 18 29/09/2014 09:21:06 Desenhando com fontes web 433 Usando fontes web como ícones 433 Fontes web em resumo 434 Linhas de base 434 Definindo a família da fonte 434 Definindo espaçamento vertical 435 Definindo tamanhos de fonte 435 A unidade rem Desenhando com uma grade 435 436 Com pixels 437 Com ems 439 Definindo a grade 440 Automatizando ritmos verticais 441 Grade de linha de base em resumo 441 Diversão com tipos web 441 Escolha o peso dos glifos 442 Escolhendo a largura de fonte correta 443 Controle o overflow do texto 443 Alinhar texto verticalmente a partir da linha de base 444 Controlar o espaço em branco entre as letras de uma palavra 445 Ajustando espaçamento entre palavras 446 Quebra de palavras longas 447 Controlar espaço em branco e quebras de linha 448 Hifens de impressão 449 hifens 449 Hífens condicionais 450 Controle os quote glyphs 452 Controle de exibição de tipos web não latinos 454 word-break 454 text-emphasis 454 Use ligaturas e recursos de fonte OpenType adicionais 455 Resumo 456 Leitura Complementar 456 Capítulo 11: Colocando as Propriedades CSS3 para Funcionar Cor e transparência 457 457 xix PFCG_BeginningHTML5AndCSS3.indb 19 29/09/2014 09:21:06 RGB 458 Transparência RGBa 459 HSLa 461 Opacity 463 Backgrounds 464 background-clip 465 background-origin 467 background-size 470 Múltiplos backgrounds 474 Bordas 482 border-radius 482 border-image 489 Sombreado 493 box-shadow 493 text-shadow 499 Gradientes Gradientes 501 501 Gradientes lineares 502 Gradientes radiais 507 Gradientes repetitivos 512 Detectando suporte e auxiliando outros navegadores 514 Usando o Modernizr 515 CSS3 Pie 516 Combinando efeitos CSS3 Alto lá! 516 521 Resumo 523 Lição de casa 523 Capítulo 12: Transformações, Transições e Animação Traslade, gire, dimensione, incline, transforme: CSS Transforms 2D e 3D Usando transformações e as funções transform 525 527 531 Movendo elementos com transform: translate(); e transform: translate3d(); 532 Dimensionando elementos com transform: scale(); e transform: scale3d(); 535 Distorcendo elementos com transform: skew(); e similares 537 A fenomenal força cósmica de transform: matrix(); e transform3d: matrix(); 539 Pondo coisas 3D em perspectiva com perspective e transform:perspective() 542 xx PFCG_BeginningHTML5AndCSS3.indb 20 29/09/2014 09:21:06 Mudando a origem da perspectiva com a propriedade perspective-origin 544 Mudando transformações via transform-origin 544 Transformações 3D ou planas com transform-style 547 Ocultando e mostrando a parte de trás de um elemento transformado com backface-visibility 548 Suporte a navegador para transformações CSS 549 Suporte a browser para transformações 2D 550 Suporte a navegador para transformações 3D 551 Polyfills, fallback e propriedade de filtro do Internet Explorer 551 Pegadinhas das transformações CSS 552 Transformações CSS em resumo 553 Transições CSS e animações CSS: compare e contraste 554 Transições CSS: preciosidades em 4D! 556 Definindo o que transicionar com transition-property 557 Propriedades animáveis para transições CSS e animações CSS 558 Imitando auto na largura e altura com max-width e max-height 562 Controlando a duração de uma transição com transition-duration 563 transition-timing-function, curvas Bézier cúbicas e steps() 564 Atrasando o início de uma transição com transition-delay 569 Múltiplos valores de transição e a propriedade taquigráfica transição 570 Ordem da propriedade taquigráfica transition 570 Suporte a navegador para transições CSS 571 Pegadinhas das transições CSS 572 Pegadinhas com transformações transitando (ou animações) 573 Transformações confusas, z-index e aceleração de hardware 573 Fazendo as transformações pararem de tremer quando transicionadas (e animadas) 574 Transições CSS em resumo 574 Keyframes com animações CSS 575 Um simples exemplo de animação com animation-name e animation-duration 579 Controlando uma animação usando @keyframes 581 Funções temporais com animation-timing-function 582 Mudando como começa uma animação usando animation-delay 584 Quantas vezes? animation-iteration-count lhe dirá! 585 Misturando com animation-duration 586 Controle como os elementos se comportam antes e depois de uma animação com animation-fill-mode 587 xxi PFCG_BeginningHTML5AndCSS3.indb 21 29/09/2014 09:21:06 Pausando uma animação usando animation-play-state 589 A propriedade taquigráfica animation e valores animation-* separados por vírgula 590 Suporte a navegador para animações CSS 592 Um pequeno desvio para ver JavaScript relacionado a animações 594 Pegadinhas das animações 595 Animações CSS em resumo 596 Juntando tudo 598 Leitura complementar 599 Capítulo 13: O Futuro do CSS ou, Coisas Incríveis Que Estão Por Vir 603 Aceleração de hardware e performance CSS 604 Internacionalização 604 Defina seus próprios contadores de lista com o CSS Counter Styles Module 605 As funções calc() e attr() 606 Variables, mixins e nesting 609 Anime-se com 11 novos CSS shaders 610 Siga em frente e seja o máximo 610 Apêndice: links essenciais 611 Índice 615 xxii PFCG_BeginningHTML5AndCSS3.indb 22 29/09/2014 09:21:06 Prefácio HTML5 é a mais significativa especificação da web hoje em dia, e a primeira atualização da onipresente linguagem da Web em uma década. Junto com sua prima CSS3, é muito poderosa, muito excitante e ridiculamente superdivulgada. Alguns “especialistas” vão lhe dizer que você só pode usar HTML5/CSS3 com a tecnologia de ponta da mais recente versão do seu navegador preferido. Outros sábios vão lhe dizer que você não pode usá-las porque “as especificações não estão concluídas”, ou que não há suporte no Internet Explorer, ou outros tantos blablablas. Quando você está tentando aprender, precisa de professores confiáveis que não sejam nem fanáticos pedantes nem marqueteiros arrogantes. Você precisa de gente como Rich, Oli, Chris e Divya. Richard Clark é um companheiro na HTML5 Doctor, curador da galeria HTML5 e, de maneira crucial, um homem que constrói coisas. Oli Studholme é também um companheiro na HTML5 Doctor e um desenvolvedor que trabalha nas trincheiras, só que essas trincheiras são na sua terra adotada, o Japão. Chris é Diretor Adjunto de Design de Multimídia Interativa, na Universidade de Ulster — uma das poucas universidades no mundo que ensinam design moderno para a web, que os empregadores realmente necessitam que os formandos conheçam. Divya faz parte do grupo por trás do HTML5 Boilerplate, e é uma representante da Adobe no Grupo de Trabalho CSS Working Group. Bruce Lawson Coautor de Introducing HTML5 (New Riders), Pregador da Web aberta, Opera Software É difícil de acreditar, mas houve um tempo em que a especificação CSS foi considerada uma tecnologia em extinção. Rasgada por implementações incompletas e (pior) incompatíveis, atolada por uma herança que não a sua própria, parecia destinada a se juntar à crescente pilha de tecnologias interessantes mas que não se mantiveram — e agora, graças a alguns intervalos de sorte e a trabalho duro, aqui está ela, um aspecto fundamental da web. Com certeza, ela se espalhou além da web, mostrando-se como o dispositivo de apresentação em softwares tão diversos, como chats e sistemas operacionais. Se ela é menos crítica para nossas modernas redes do que o HTML, não pode ser por muito. Ainda mais instigante, depois de um período relativamente acomodada, a CSS está sendo rapidamente expandida e enriquecida em múltiplas frentes. Ideias tiradas de frameworks e bibliotecas estão sendo mescladas dentro das especificações oficiais. Propostas que permaneceram paradas bastante tempo estão ganhando movimento. Omissões antigas estão sendo abordadas. De modo geral, existe tanta coisa acontecendo, que seria uma atividade de tempo integral para um especialista acompanhar tudo isso. xxiii PFCG_BeginningHTML5AndCSS3.indb 23 29/09/2014 09:21:06 Felizmente, o que vocês têm aqui em mãos é o produto de conhecimento, habilidades, e percepção de vários especialistas. Chris, Divya, Oli, e Rich são todos veteranos em navegar na por vezes densa linguagem das especificações do W3C para extrair as joias brilhantes encontradas em seu interior. E, além disso, eles se superam em pegar os diamantes brutos e em lapidá-los até se tornarem exemplos brilhantes de como e por que uma determinada função deveria ser usada. Se eu estivesse começando agora, dificilmente poderia desejar ter melhores guias para entender o que é importante e interessante no CSS hoje — e sendo o velho grisalho e esquisito que sou hoje, eu olho para as pistas deles sobre para onde eu deveria ou não deveria olhar para me manter atualizado com tudo o que está acontecendo. CSS é experimentar algo nada menos que uma Renascença. Desfrute aprender com esses quatro mestres de sua arte. Eric A. Meyer Autor de “CSS: The Definitive Guide” (O’Reilly); Cofundador de “An Event Apart” xxiv PFCG_BeginningHTML5AndCSS3.indb 24 29/09/2014 09:21:06 Sobre os Autores Richard Clark é o Chefe de Interatividade na KMP Data, uma agência de serviços digitais localizada em Manchester, GB. Com mais de 10 anos de experiência na indústria, ele supervisiona a experiência de usuário, o design e a interface com o usuário na KMP, além de ser um colaborador regular da publicação líder da indústria, a .net magazine. É o fundador e curador da HTML Gallery (www.html5gallery.com), cofundador, editor e autor da HTML Doctor (www.html5doctor.com). Você o verá ocasionalmente organizando a Speak the Web, uma série de conferências sobre web. Christopher Murphy (www.christophermurphy.org) é um escritor, designer e educador de Belfast. A revista Creative Review o descreveu como “um William Morris da era digital”, um epíteto a que ele aspira por fazer jus diariamente. Transmitindo seu conhecimento como educador, Murphy é um designer praticante cujo trabalho abrange uma variedade de aspectos da mídia e foi publicado em numerosas revistas e livros, incluindo a Eye Magazine, largamente reconhecida como uma das publicações líderes em design, e Influences: A Lexicon of Contemporary Grahic Design Practice. Escritor participante do time da 8 Faces, ele também tem escrito para The Manual, 24 Ways e para a revista .net. Como um palestrante internacionalmente respeitado, ele é convidado regularmente para falar sobre padrões da web e a importância de desenvolver a educação do design, e tem palestrado em conferências no mundo todo, incluindo: Build, New Adventures e The Future of Web Design. Oli Studholme é um neozelandês morando junto às luzes brilhantes de Tokyo, Japão. Seu amor pela web começou com o seu primeiro site, em 1995, e compartilhar esse amor o fez envolver-se na organização da Web Directions West e a se tornar um dos participantes da HTML5 Doctor. Ele é atualmente um desenvolvedor para a internacionalmente renomada agência de design Information Architects, Inc. Divya Manian é uma engenheira de Tecnologia da Informação por formação. Alternou entre desenvolvimento de drivers de dispositivos para telefones na Motorola e o desenvolvimento de websites e, desde então, não olhou mais para trás. Divya Manian faz parte da Web Platform Team da Adobe em São Francisco e é um membro do CSS Working Group. Ela leva seu trabalho seriamente como vigilante da Web Aberta, o que resultou em projetos como o HTML5 Please e o HTML Boilerplate. xxv PFCG_BeginningHTML5AndCSS3.indb 25 29/09/2014 09:21:06 Introdução Para quem é este livro? Introdução ao HTML5 e CSS3: A Evolução da Web é destinado a qualquer um que tenha conhecimento básico de HTML e CSS. Se você só se aventurou há pouco tempo no mundo do HTML ou do CSS, ou se já tem desenvolvido sites há anos, sempre haverá coisas interessantes para você. No entanto, você aproveitará mais esse livro se já teve alguma experiência com HTML5 e CSS3, mas ainda não entendeu direito tudo o que eles têm a oferecer. Este livro é cheio de conselhos e exemplos práticos e concretos para ajudá-lo a dominar padrões web modernos. Como é estruturado este livro? Este livro é dividido em duas grandes seções. Os primeiros seis capítulos abrangem o HTML5, e os sete capítulos seguintes abrangem o CSS3, complementados por uma visão do que está para vir no futuro dos Padrões Web. Na primeira parte, veremos de onde veio o HTML5 e como transitar do HTML4 para o HTML5. Depois, mostraremos como criar um Texto Padrão HTML5. Isso será seguido pela introdução de novos elementos, atributos e tipos de campos antes de discutir sobre algumas APIs de HTML5 novinhas em folha. Na segunda parte do livro, vamos aprender sobre a história do CSS e dar uma olhada em alguns fundamentos do CSS. Vamos, então, introduzir novos seletores CSS, módulos de layout e técnicas. Passamos, em seguida, para uma visão sobre tipografia na web, novas propriedades de CSS3, entre outros, antes de guiá-lo pelas transições, transformações e animações de CSS. O livro se encerra com uma visão sobre o futuro do CSS e dos padrões web, mostrando o que provavelmente veremos em um navegador próximo de você, nos próximos anos vindouros. Se quiser acompanhar os exemplos neste livro e fazer o download de quaisquer arquivos de lição de casa que possa vir a precisar, você poderá fazê-lo no endereço http://thewebevolved.com. Este livro pode ser lido de cabo a rabo ou mantido ao lado de seu computador como material de referência de dicas, truques e técnicas modernas. A decisão é só sua. xxix PFCG_BeginningHTML5AndCSS3.indb 29 29/09/2014 09:21:06 Convenções usadas neste livro Este livro usa algumas convenções que valem a pena serem ressaltadas. Os seguintes termos são usados no decorrer da obra: • HTML refere-se às linguagens HTML e XHTML. • A menos que seja dito o contrário, CSS está relacionado à especificação CSS3. • Por browsers modernos entende-se que são as últimas versões do Firefox, Safari e Opera, além do IE9 e posteriores. Presume-se que todos os exemplos HTML neste livro estejam inseridos na tago corpo (<body>) de um documento válido, enquanto que o CSS esteja contido dentro de uma folha de estilo externa. Ocasionalmente, HTML e CSS foram colocados no mesmo código de exemplo, para efeito de concisão. Porém, num documento real, esses itens precisam ficar em seus respectivos lugares para funcionar corretamente. p {color: red;} <p>I’m red</p> Finalmente, para exemplos HTML que contenham dados repetitivos, em vez de escrever todas as linhas, o sinal de reticências (...) é usado para denotar continuação do código: <ul> <li>Red</li> <li>Yellow</li> <li>Pink</li> <li>Green</li> … </ul> Tendo passado pelas formalidades, vamos começar. xxx PFCG_BeginningHTML5AndCSS3.indb 30 29/09/2014 09:21:06 Capítulo 1 HTML5: Agora, Não em 2022 Parabéns, você chegou ao Capítulo 1! Sua jornada pela evolução da Web está prestes a começar. Este capítulo estabelece princípios básicos. Seu foco, junto com o resto da primeira parte deste livro, é, em sua maioria, no HTML5. Vamos cobrir como surgiu o HTML5, quais problemas ele veio resolver, quais princípios de design guiaram seu desenvolvimento e quais as novas características que ele traz para nós. Vamos também desmascarar alguns mitos do HTML5. Vamos iniciar, no entanto, dando uma olhada nos pressupostos básicos que seguimos em nosso trabalho de desenvolvimento web, por que os padrões são tão importantes e por que devemos nos esforçar para deixar nossa marcação universalmente acessível e bem construída. É um passeio de montanha-russa, com altos e baixos, mas é uma jornada empolgante. Sem mais delongas, vamos começar... Pressupostos básicos A informação presente neste livro é baseada num conjunto de princípios profundamente arraigados: a importância de padrões web abertos, o estabelecimento de marcação semântica bem estruturada e uma crença sólida de que um HTML bem escrito é parte do processo de desenvolvimento. Nossa estrutura sólida do HTML deveria ser estilizada com o CSS (uma abordagem que abrangeremos quando passarmos por separação de camadas, mais tarde neste capítulo). PFCG_BeginningHTML5AndCSS3.indb 1 29/09/2014 09:21:07 Capítulo 1 Uma abordagem dos padrões web O movimento voltado a uma web direcionada por padrões tem acontecido graças, em grande parte, ao Projeto de Padrões Web (Web Standards Project) ou, na sigla em inglês, WaSP (http://j.mp/webstandardsproject1). No final dos anos 1990, o Internet Explorer e o Netscape brigavam para alcançar a supremacia da Web, em um período conhecido como “guerra dos navegadores”. Foi uma época terrível, já que esses rivais estavam tentando ganhar usuários introduzindo incontáveis novos atributos que eram incompatíveis em diferentes navegadores. O resultado eram sites que ou só funcionavam em um navegador, ou tinham duas diferentes versões para operar nas duas maiores plataformas. Era um pesadelo para desenvolvedores web, e prejudicava os usuários. Fundado em 1998, o WaSP fez uma campanha para implementações de padrões que funcionassem em diferentes navegadores e uma abordagem baseada em padrões para web design. As metas eram reduzir o custo e a complexidade do desenvolvimento web e aumentar a acessibilidade das páginas ao tornar o conteúdo web mais consistente e mais compatível com os diferentes dispositivos e com as tecnologias de assistência. Fizeram lobby com os vendedores de navegadores e ferramentas para desenvolver suporte para padrões web recomendados pelo World Wide Web Consortium (W3C), tais como HTML e CSS. Nota: O World Wide Web Consortium, ou W3C, é uma comunidade internacional que desenvolve padrões para assegurar o crescimento da Web a longo prazo. Em suas próprias palavras, “a missão do W3C é levar a World Wide Web ao seu potencial pleno, desenvolvendo protocolos e diretrizes que assegurem o crescimento da Web a longo prazo”. E eles tiveram muito sucesso. Pulemos para os dias atuais e os padrões web são consistentemente implementados nos maiores navegadores. Embora você ainda obtenha esquisitices ocasionais no comportamento de alguns navegadores, está mil vezes melhor do que era antes. Vamos dar uma rápida olhada no que são, de verdade, os padrões web. O que são padrões web? Usamos padrões diariamente, frequentemente sem perceber. Quando compramos uma lâmpada, por exemplo, sabemos que se comprarmos algum tipo de rosca, ela vai se encaixar na nossa luminária quando chegarmos em casa. Os padrões garantem que a lâmpada que compramos não seja um pouquinho maior ou só um pouco mais larga para se adaptar à nossa luminária. Os padrões estão todos à nossa volta: veja as tomadas em sua casa, as potências de seus aparelhos domésticos e as medidas de tempo, distância e temperatura usadas em tudo na nossa sociedade. www.webstandards.org 1 2 PFCG_BeginningHTML5AndCSS3.indb 2 29/09/2014 09:21:07 HTML5: Agora, Não em 2022 Padrões web seguem o mesmo princípio. À medida que os fabricantes e os desenvolvedores web têm ido na direção de incorporar os padrões, a necessidade de escrever marcações específicas para cada navegador diminuiu. Ao usar HTML bem estruturado para definir o conteúdo e o CSS para controlar a apresentação, deveríamos ser capazes de desenhar um site que será apresentado consistentemente em navegadores compatíveis com padrões, independentemente de sistemas operacionais (embora um bug sempre exista de vez em quando). Igualmente importante, quando a mesma marcação é reproduzida por navegadores menos capazes e incompatíveis com padrões — em navegadores baseados em texto ou para dispositivos móveis — o conteúdo deverá ainda permanecer acessível. Na posição de designers, os padrões web poupam-nos tempo e nos permitem dormir à noite, com a segurança de saber que nossa obra de arte artesanalmente criada está acessível, independentemente de quem esteja vendo, em qual navegador, e em qualquer plataforma. Nota: O que nós chamamos de padrões, oficialmente é chamado de “Recomendações” pela W3C. São as maneiras recomendadas de funcionamento para as tecnologias web. Não há nenhum tipo de lei que obrigue navegadores e vendedores de ferramentas a adotá-las; em vez disso, a adoção é um acordo para o bem da Web e o benefício mútuo de todos. Por que usar padrões web? Talvez uma pergunta melhor a ser feita seja “Por que ignorar os padrões web?”. Os benefícios de adotar uma abordagem de padrões web são tão convincentes, por que não usá-los? Os benefícios de se usar padrões web incluem os seguintes: • Reduz o tempo de desenvolvimento: você pode construir um único site que funcionará em diversas plataformas, navegadores, dispositivos etc. Sem os padrões, você provavelmente teria que desenvolver um site diferente para cada navegador. • Cria sites que são fáceis de atualizar e manter: com os padrões web e melhores práticas, você pode, por exemplo, atualizar um único arquivo de CSS para mudar o estilo para um site inteiro de várias páginas HTML. Antes disso ser a norma, costumávamos inserir a informação de estilo dentro do HTML, o que significava mudar a informação em cada página. Isso era realmente muito repetitivo e inconveniente. • Melhora as classificações por mecanismos de busca: o conteúdo dentro do HTML é baseado em texto e, por conseguinte, legível por mecanismos de busca. Além disso, escrever boas cópias e usar uma semântica HTML (como cabeçalhos) apropriada pode dar mais peso para palavras-chave apropriadas e jogar suas páginas para o topo das pesquisas do Google. • Melhora a acessibilidade: HTML e CSS bem escritos tornam os sites mais acessíveis a diversos grupos de usuários, como pessoas com deficiências, pessoas usando dispositivos móveis, pessoas com baixas taxas de conexão etc. 3 PFCG_BeginningHTML5AndCSS3.indb 3 29/09/2014 09:21:07 Capítulo 1 Agora que tivemos uma visão mais clara dos principais benefícios de uma abordagem de padrões web, vamos dar uma olhada em dois princípios que vamos olhar com profundidade neste livro: a importância da marcação semântica e do infame pavê da web. Marcação semântica Acreditamos na importância da marcação semântica (às vezes, chamado de POSH — Plain Old Semantic HTML —, sigla em inglês para Bom e Velho HTML Semântico). Acreditamos que o HTML é um elemento de design e que, antes de adicionar uma camada de apresentação (que aprimora a marcação subjacente), é importante focar a construção de uma sólida fundação de conteúdo bem estruturado. Marcação semântica é autodescritiva e usa os elementos corretos de HTML para o trabalho certo. Por exemplo, você poderia marcar um cabeçalho da seguinte forma: <div id=”heading” style=”font-size:300%; padding: 10px;”>My heading</div> Pareceria, é claro, com um cabeçalho, mas não funcionaria como um cabeçalho em termos de significado e propósito. Por conseguinte, teria um efeito negativo na otimização de mecanismos de busca (palavras-chave em cabeçalhos têm mais peso), acessibilidade (leitores de tela usam elementos de cabeçalho como orientação de navegação), desenvolvimento (é muito mais difícil atingir elementos com estilo e scripts quando você não usa os elementos semânticos apropriados) e muito mais. É muito melhor usar o elemento apropriado, assim: <h1>My heading</h1> Marcação semântica deveria ser também o mais leve possível, ou seja, removendo todas aquelas <divs> agrupadas e outros códigos macarrônicos. Isso torna os tamanhos dos arquivos menores e os códigos mais simples. Agora que entendemos a importância de construir uma sólida fundação HTML, está na hora de conhecer o pavê da Web. O pavê da web: separando aquelas camadas Todo mundo adora um pavê, principalmente no Natal. Andy Clarke, escrevendo no Stuff & Nonsense (Coisas e Bobagens) ( http://j.mp/ stuffandnonsense 2), em 2005, levou a metáfora do humilde pavê a novas alturas quando o usou para descrever o “Web Standards Trifle” (o pavê dos padrões web), uma espessa mistura de pão de ló, geleia de fruta, creme de baunilha, creme de leite e a cobertura, que é o mais importante. Você poderá ler seu post original em http://j.mp/standarstrifle3. A maioria do que foi escrito ainda é válido hoje. www.stuffandnonsense.co.uk/blog 2 www.stuffandnonsense.co.uk/archives/web_standards_trifle.html 3 4 PFCG_BeginningHTML5AndCSS3.indb 4 29/09/2014 09:21:07 HTML5: Agora, Não em 2022 A essência do que ele disse é que você deveria separar sua estrutura de dados, informação de estilo e script/comportamento em camadas distintas. • O HTML semântico fornece à estrutura dos dados um conjunto de conteúdo limpo e de fácil acesso. O HTML5 provê isso muito bem. Você deveria tornar esses dados tão acessíveis e utilizáveis quanto possível, sem qualquer estilização de melhorias de script. • O CSS fornece a informação de estilo, que pega a informação dos nossos dados e lhes dá a apresentação visual que desejamos. O CSS3 fornece ferramentas mais poderosas que seu antecessor, o CSS2. • O JavaScript (incluindo a linguagem básica e a codificação de APIs (Application Programming Interface — Interface de Programação de Aplicativos) definidas dentro do HTML5 e em outros lugares) fornece a camada de script/comportamento, que adiciona melhorias de usabilidade e funcionalidade mais rica aos nossos sites. O Dao do design web: aceitando a incerteza* O panorama dos navegadores está evoluindo rapidamente. No entanto, ao contrário da época do Velho Oeste das guerras de navegadores, o panorama de hoje está evoluindo e convergindo na direção dos padrões. Firefox, Safari, Opera, Chrome e, é claro, nosso velho amigo, o IE, estão todos — reconhecidamente em níveis diferentes — progredindo no sentido de dar suporte a todos os novos recursos do padrão dentro do HTML5, CSS3, etc. Muitos desenvolvedores estão também progredindo no sentido dos padrões web e suas melhores práticas associadas, embora muitos deles estejam sendo deixados de lado. Mas agora temos um novo tipo de incerteza com que se preocupar: não temos mais apenas navegadores de desktop para dar suporte. Há um rápido crescimento de pessoas acessando a internet via dispositivos móveis, tablets, TVs, consoles de videogame, e muito mais. A explosão de dispositivos como o iPhone e o iPad, da Apple, dispositivos com Android, da Google, Blackberrys, o Wii, o DS e as TVs com acesso à internet da Philips e da Sony estão abrindo caminho para um aumento significativo no número de pessoas acessando a web enquanto estão em movimento, na sala de estar, bem longe de suas mesas. A Opera, criadora do Opera Mini (uma das plataformas de navegador móvel mais populares ao redor do mundo), relata um significativo crescimento ano após ano (e mês após mês) de usuários que utilizam a internet em movimento. Isso parece destinado a crescer exponencialmente com o inexorável aumento do número de smartphones. * N.E. : Dao — O caminho, da filosofia religiosa de vida chinesa Daoismo, que enfatiza a harmonia, baseada na ideia de em que a vida deve ser vivida com equilíbrio e virtude, e que nada é totalmente bom ou totalmente ruim, em tudo convivendo o Yin (negativo) e o Yang (Positivo). No caso, a aceitação das incertezas da Web. 5 PFCG_BeginningHTML5AndCSS3.indb 5 29/09/2014 09:21:07 Capítulo 1 Com tantos dispositivos diferentes para se consumir conteúdo web, está se tornando cada vez mais difícil prever exatamente como seu site vai aparecer em todos os dispositivos de seus usuários. Em vez de ficarmos obcecados em ter o controle pleno dos pixels, precisamos aceitar o duvidoso e projetar sites flexíveis que se adaptem a diferentes contextos de navegação. Isso não é de forma alguma uma ideia nova. “The Dao of Web Design”, de John Allsopp, publicado no “A List Apart”, lá no ano de 2000, destacou a importância de os web designers aprenderem a se desapegar, aprendendo a conviver com a complexidade — e incontrolabilidade — da web, e aceitar a falta de controle, que é uma parte inerente do complexo mundo da web com o qual trabalhamos. Enfatizando as variáveis que surgem quando se desenha para a web (tamanho de tela, diferentes resoluções, profundidade do monitor, fontes instaladas etc.), Allsopp encorajou web designers na virada do milênio a aceitarem a imprevisibilidade inerente do ofício e desenhar para uma internet que não dispunha do controle preciso como na mídia impressa. Encorajando os web designers a olharem “pela outra ponta do microscópio”, ele reinterpretou o “controle” do design impresso como uma “limitação”, afirmando que “o fato de podermos controlar uma folha de papel é realmente uma limitação desse meio”. Leia novamente; é um sutil, mas importante ponto. Transporte-se para o presente e verá que essa visão não está tão distante da realidade. A fluidez da web é celebrada por muito mais pessoas hoje em dia. Você ainda vai conhecer muitos designers e clientes que são obcecados com a perfeição de pixels do design impresso na web, mas é mais fácil convencê-los de que a maneira fluida é a mais certa, principalmente agora que os dispositivos de navegação são mais variados que nunca. O site de Dan Cederholm, de 2007, Do Web Sites Need to Look the Same in Every Browser (Os sites precisam ser iguais em todos os navegadores?), na figura 1-1, responde à questão claramente com um enfático “Não!”. Figura 1-1. Os sites precisam ser iguais em todos os navegadores? Não! 6 PFCG_BeginningHTML5AndCSS3.indb 6 29/09/2014 09:21:07 HTML5: Agora, Não em 2022 Como coloca Allsopp, os web designers não são controladores e a Web não é impressa. Essa é uma mudança fundamental. Para os designers acostumados à estrutura fixa de referência que é típica do mundo da impressão, pode levar algum tempo para se acostumar com isso. Allsopp reitera, “como designers, precisamos repensar esta função, abandonar o controle e buscar uma nova relação com a página”. Repense a falta de controle; pare de ver isso como uma fraqueza, e veja como uma força. Esse é o ponto-chave do trabalho de Allsopp. Como ele propõe, “faça páginas que sejam adaptáveis”. Por quê? Porque o adaptável é acessível. Como coloca Allsopp, pense sobre “projetar a página universal”. Esta próxima citação reforça o que dissemos antes sobre o HTML semântico: onde o HTML provê um elemento apropriado, use-o. Onde não, use classes. Simples. HTML é, apesar da tendência de muitos designers preguiçosos de confiar demais em atributos de classe desnecessários, uma linguagem semântica rica e compreensiva, portanto deveríamos usá-lo para nosso proveito. E, como veremos quando virmos o HTML5 em capítulos posteriores, há elementos semânticos mais ricos ao nosso dispor. Sendo assim, precisamos confiar cada vez menos em classes no futuro. De fato, nossa tarefa parece ficar mais fácil. Boas novas! Acessibilidade Acessibilidade, às vezes abreviada como a11y (uma abreviatura da palavra “accessibility”, em inglês, que mistura letras e números: “a, depois 11 letras, então y”), deveria ser um fundamento de nossa abordagem. Aceitar o Dao do web design traz consigo um número de benefícios, inclusive mais acessibilidade a um público mais amplo e diverso. Fundamental para isso é considerar como diferentes usuários usam a web. Algumas pessoas usam-na da mesma forma que você. Outras usam diferentes dispositivos ou possuem conexões mais lentas com a internet. Outras ainda usam apenas o teclado. Algumas usam leitores de tela para ler páginas enviadas para eles. Algumas pessoas não conseguem ouvir o conteúdo de áudio. O que quer que faça, familiarize-se com uma população diversa de usuários. Não presuma que todos usem a internet exatamente como você. Achamos que a acessibilidade é AGoodThing™ (uma coisa boa), portanto não fique surpreso em nos ver destacando alguns dos benefícios (e potenciais armadilhas) que o HTML5 traz à festa da acessibilidade. Criando sua marcação Acreditamos piamente na ênfase na arte do design para a web e do desenvolvimento web. Prestar atenção aos detalhes é importante, assim como se orgulhar do próprio trabalho, mesmo quando se escreve marcação. 7 PFCG_BeginningHTML5AndCSS3.indb 7 29/09/2014 09:21:07 Capítulo 1 Em seu excelente livro, The Craftsman (O Artesão), Richard Sennett escreve sobre os artesãos envolvidos na criação do Linux, enfatizando seu foco “em alcançar qualidade [e] em fazer um bom trabalho”. Mais próximo ao mundo do web design, Dan Cederholm, em Handcrafted CSS (CSS feito à mão), afirma: Os detalhes nem sempre são óbvios. Em um móvel bem feito, talvez você só perceba o quanto ele é bem feito até começar a usá-lo. Puxe a gaveta e note os encaixes em asa de andorinha, por exemplo. Tudo isso pode ser relacionado com o web design. Igualmente, detalhes pouco óbvios podem, frequentemente, separar um bom design web de um ótimo design web. Talvez você não aprecie a qualidade de um site bem desenhado, até começar a usá-lo, ver sua intimidade, colocá-lo para fazer alguns testes. Concordamos plenamente com o Sr. Cederholm. A diferença entre bom conteúdo web e um ótimo conteúdo web é artesanal, é gastar um tempo extra para colocar os pingos nos “is” — prestar atenção nos detalhes. Conforme o mundo do design web evolui, nós nos vemos, cada vez mais, colaborando com outros e trabalhando em equipe. Uma abordagem sólida e bem construída de marcação — baseada em regras e padrões acordados — pode melhorar consideravelmente a colaboração, dinamizando o processo e (chegaríamos até ao ponto de dizer) tornando-o mais agradável. Achamos que um bom artesanato é importante, e temos certeza de que você também. Como foi criado o HTML5? You may ask yourself, well, how did I get here? — Talking Heads, “Once in a Lifetime” HTML5 é apenas um ponto numa longa linha no desenvolvimento do HTML, que tem visto uma variedade de versões com diferentes especificações. Embora elas tenham diferido em seus detalhes, cada versão do HTML teve um aspecto fundamental em comum: HTML é uma linguagem de marcação. Sim, HTML 4.01 e XHTML 1.0 podem diferir no estilo do código, mas eles dividem esta mesma meta em comum. Com as opiniões divergentes e, em diversos momentos, firmemente manifestadas pelos dois — por vezes opostos — campos que os suportam, tem sido frequentemente fácil perder de vista os pontos de convergência. 8 PFCG_BeginningHTML5AndCSS3.indb 8 29/09/2014 09:21:07 HTML5: Agora, Não em 2022 O HTML5, de várias maneiras, representa o melhor de todos os mundos, com uma grande quantidade de potencial novo acrescentado com boa prática, como se verá mais tarde. Antes de apresentarmos o HTML5 e suas diferentes facetas, façamos uma breve recapitulação de como nos encontramos onde estamos agora. Além do HTML4... Não havia nada de errado com o HTML4, sério. Era uma especificação perfeitamente boa, e a tecnologia funcionava perfeitamente para executar o trabalho para o qual havia sido feito inicialmente: fazer marcação em documentos estáticos com links entre eles. Mas as coisas nunca param quietas. Os desenvolvedores web não estavam felizes por simplesmente continuarem fazendo marcações em documentos estáticos para o resto de suas vidas. Eles queriam fazer sites dinâmicos que se comportassem mais como aplicativos do que páginas, e estavam começando a fazer isso usando tecnologias como PHP, JavaScript e Flash. Daí a necessidade para evoluir. Nota: O Flash originalmente se tornou popular porque o suporte a padrões web entre vários tipos de navegadores era muito ruim no fim dos anos 1990, e o plugin oferecia uma maneira de fazer com que o conteúdo se comportasse consistentemente entre navegadores. Além do mais, o Flash permitia que os desenvolvedores web fizessem coisas, como animação e vídeo na web. Os padrões web, na época, não tinham facilidades para dar suporte a isso. XHTML 1.0 Foi, na verdade, lá nos idos de 1998, mais ou menos na época em que as especificações do HTML4 estavam perto de ficarem prontas, quando a decisão foi tomada pelo W3C para direcionar a web no sentido do XHTML em vez de HTML (ver http://j.mp/futuremarkup4). Eles, então, colocaram um ponto-final no assunto do HTML4 (a última versão foi, na verdade, a 4.01, que incluía alguns ajustes de bugs e coisas do gênero) e, em vez disso, concentraram esforços nas especificações do XHTML 1.0. Em agosto de 2002, o W3C comentou que: A família XHTML é o próximo passo na evolução da internet. Ao migrar para o XHTML hoje, os desenvolvedores de conteúdo podem entrar no mundo XML (Extensible Markup Language — Linguagem de Marcação Extensível), com todos seus benefícios inerentes, enquanto que ainda podem permanecer confiantes na compatibilidade de seus conteúdos do passado e do futuro. www.w3.org/markup/future/ 4 9 PFCG_BeginningHTML5AndCSS3.indb 9 29/09/2014 09:21:07 Capítulo 1 Com essa chamada tão revigorante, não foi nenhuma surpresa que, quando se considerou como seria a melhor maneira de evoluir o HTML, o W3C inicialmente pôs todo o seu empenho no XHTML (perceba a palavra “inicialmente”). O XHTML 1.0 parecia um movimento sensato. Era, basicamente, apenas o HTML4 reformulado como um vocabulário XML, que trouxe consigo as mais estritas regras de sintaxe de XML (por exemplo, os valores de atributo devem possuir aspas envolvendo-os, os elementos precisam estar fechados). O objetivo era melhorar a qualidade e ter marcações mais eficientes. XHTML 2.0 e o retrocesso No entanto, o passo seguinte do W3C não funcionou muito bem. A versão seguinte do XHTML, XHTML 2.0, foi criada com uma abordagem um tanto quanto utópica. Ele continha algumas ideias muito boas e era uma especificação bem escrita, mas simplesmente não refletia o que os desenvolvedores web estavam, de fato, fazendo na web. Era mais algo que o W3C gostaria que eles estivessem fazendo, num mundo ideal. Além disso, não era compatível com o conteúdo anterior já existente na web. Muitos recursos funcionavam diferentemente; por exemplo, o mimetype (application/xhtml+xml) não funcionava de jeito nenhum no IE, e as ferramentas de desenvolvedor disponíveis não estavam prontas para funcionar com o XML. A comunidade ficou consternada com isso e ocorreu um retrocesso. Mais notadamente, em 2004, um grupo de desenvolvedores e implementadores com ideias semelhantes (incluindo representantes do Opera, Mozilla e, mais tarde, a Apple) uniram-se para formar um grupo dissidente de especificações, chamado de WHATWG (www.whatwg. org), que visava escrever especificações de marcação com um conjunto de recursos mais efetivo para construir a nova espécie de aplicativos web, sem — crucialmente — romper com a compatibilidade passada. O WHATWG criou a especificação Web Applications 1.0 (http://j.mp/webapplications15), que documentava comportamentos e recursos interoperáveis de navegadores existentes, assim como novos recursos para o acervo da web aberta, tais como APIs e novas regras de análise de DOM (Document Object Model — Modelo do Objeto Documento). Após muitas discussões entre membros do W3C, em 7 de março de 2007, o trabalho sobre HTML foi reiniciado com um novo Grupo de Trabalho de HTML, num processo de participação aberta. Uma das primeiras decisões do grupo de trabalho HTML WG foi adotar a especificação do Web Applications 1.0 e chamá-la de HTML5. O WHATWG e o W3C agora desenvolvem a especificação do HTML5, em conjunto com duas diferentes especificações. www.whatwg.org/specs/web-apps/2005-09-01/ 5 10 PFCG_BeginningHTML5AndCSS3.indb 10 29/09/2014 09:21:07
