Você está na página 1de 370

SMASHING

HTML5
TÉCNICAS PARA A NOVA GERAÇÃO DA WEB

Tradução de: Daniel Gomes Alves da Cruz


AGRADECIMENTOS DO EDITOR

Algumas das pessoas que ajudaram a trazer este livro ao mercado incluem o seguinte:

Editorial e Produção
Vice-presidente de Publicação de Consumidor e Tecnologia: Michelle Leete
Diretor Associado - Gerenciamento de Conteúdo de Livros: Martin Tribe
Publicador Associado: Chris Webb
Assistente de Publicação: Ellie Scott
Editor de desenvolvimento: Elizabeth Kuball
Editor de cópias: Elizabeth Kuball
Editor Técnico: Harvey Chute
Gerente Editorial: Jodi Jensen
Editor sênior do projeto: Sara Shlaer
Assistente Editorial: Leslie Saxman
Marketing
Gerente Sênior de Marketing: Louise Breinholt
Executivo de marketing: Kate Parrett

Serviços de Composição
Compositor: Serviços de Composição Wiley
Revisor: Susan Hobbs
Indexador: Indexação Potomac, LLC
SMASHING

HTML5
TÉCNICAS PARA A NOVA GERAÇÃO DA WEB

Bill Sanders

Publicação de John Wiley e Sons, Ltd


Esta edição foi publicada pela primeira vez em 2011
© 2011 William B. Sanders.

Escritório registrado
John Wiley & Sons Ltd, o átrio, portão sul, Chichester, Sussex Ocidental,
PO19 8SQ, Reino Unido

Para detalhes de nossos escritórios editoriais globais, para atendimento ao cliente e para
informações sobre Como solicitar a permissão para reutilizar o material protegido por direitos
autorais neste livro, consulte nosso website em www.wiley.com.
O direito do autor de ser identificado como o autor deste trabalho foi
afirmado em de acordo com o Copyright, Designs and Patents Act 1988.
Todos os direitos reservados. Nenhuma parte desta publicação pode ser reproduzida,
armazenada em um sistema, ou transmitida, sob qualquer forma ou por qualquer meio,
eletrônico, mecânico, fotocópia-gravação ou outro, exceto conforme permitido pelos direitos
autorais, desenhos e Patents Act 1988, sem a prévia autorização do editor.
Wiley também publica seus livros em uma variedade de formatos eletrônicos. Algum
conteúdo que aparece na impressão pode não estar disponível em livros eletrônicos.
As designações utilizadas pelas empresas para distinguir os seus produtos são
frequentemente marcas registradas. Todos os nomes de marcas e produtos usados neste
livro são nomes comerciais, marcas de serviço, marcas comerciais ou marcas registradas
de seus respectivos proprietários. o O editor não está associado a nenhum produto ou
fornecedor mencionado neste livro. Esta publicação destina-se a fornecer informações
precisas e fidedignas em relação a o assunto coberto. É vendido com o entendimento de
que o editor não é engajado na prestação de serviços profissionais. Se o conselho
profissional ou outro especialista em assistência é necessário, os serviços de um
profissional competente devem ser procurados.

Marcas comerciais: Wiley e o logotipo da Wiley Publishing são marcas comerciais ou


registradas marcas da John Wiley and Sons, Inc. e / ou suas afiliadas nos Estados
Unidos e / ou outros países e não podem ser usados sem permissão por escrito. iPhone,
iPad e iPod são marcas registradas da Apple Computer, Inc. Todas as outras marcas
registradas são propriedade de seus respectivos proprietários. A Wiley Publishing, Inc.
não está associada a nenhum produto ou fornecedor mencionado no livro. Este livro não
é endossado pela Apple Computer, Inc.
Um registro de catálogo para este livro está disponível na British Library.

978-0-470-97727-9

Situado em 10/12 Minion Pro por Wiley Composition Services


Impresso nos Estados Unidos por Krehbie
Este livro é dedicado a Jacob Sanders.
Agradecimentos do Autor

Tomei consciência da importância imediata do HTML5 graças a Michael Wilson, Zach


Dunn e Nick Greenfield, que me chamaram a atenção. Eles também me apresentaram
Smashing Magazine e uma série de outras novas tendências emergentes. Chris Webb, da Wiley,
guiado a direção do livro e, em conjunto com Margot Hutchinson da Waterside Productions,
foi capaz de abrir caminho para o livro seguir em frente. Ellie Scott de Wiley ajudou a cuidar de
os muitos detalhes necessários para forjar o início do livro. Elizabeth Kuball trabalhou como um
capaz editor para esclarecer e suavizar tudo o que eu escrevi, e Harvey Chute, o editor técnico,
trabalhou para garantir que todo o código fosse feito corretamente e ofereceu sugestões para
melhorar mento. Finalmente, meus colegas da Universidade de Tecnologia Multimídia de Hartford
e o programa de desenvolvimento, John Gray e Brian Dorn, ajudou quando solicitado, incluindo
um terrível momento em que um ponto e vírgula faltando destruiu um programa.

Sobre o autor
Bill Sanders é um dos membros fundadores da Universidade de Hartford Multimedia Programa de
Web Design e Desenvolvimento, onde ministra cursos cobrindo HTML5, design de interface e
design, CSS3, Flash, ActionScript 3.0, ASP.NET, C #, PHP e streaming vídeo. Ele escreveu
inúmeros livros sobre computação na Internet, em tópicos que vão desde JavaScript para padrões de
design do ActionScript 3.0. Ele mora em Connecticut rural com sua esposa, Delia e um cão e meio.
Conteúdo

Introdução 1

PARTE I: A LINGUAGEM DA WEB 5

Capítulo 1: Introdução ao HTML5 1


Criando com tags: uma visão geral 8
Incorporando os novos elementos HTML5 9
Usando tags contínuas do HTML4 11
Esquecer ou substituir tags descontinuadas 15
Escolhendo um navegador para interpretar HTML5 17
Mozilla Firefox 18
Google Chrome 19
Ópera 21
Apple Safari 22
Microsoft Internet Explorer 9 24
Visualizando diferentes exibições 24
Pegue a roda 25
Capítulo 2: Noções básicas sobre tags HTML5 27
Código de análise 28
Entendendo HTML5 e arquivos relacionados 28
Aprendendo quais arquivos funcionam com a Web 31
Saber como funcionam as tags 31
Começando com a tag HTML básica 32
Descrevendo sua página com tags 32
Identificando as partes de uma tag 33
Entendendo o papel da tag de comentário 35
Tags de aninhamento 38
Pegue a roda 40
Capítulo 3: Tags de Texto e um Pouco de CSS3 43
Os fundamentos 44
Um pouco mais de organização 45
Pensando em estrutura 47
Adicionando mais estrutura HTML5 49
Adicionando estilo ao texto com CSS3 52
Estilizando elementos HTML5 com propriedades CSS3 52
Criando Classes e IDs CSS3 59
Pegue a roda 63
Conteúdo

Capítulo 4: Trabalhando com valores de cores 65


Entendendo a cor RGB 66
Usando nomes 66
Percentagens RGB e HSL 67
Configurações de números inteiros decimais RGB 70
Configurações hexadecimais: pensando como seu Computador 71
Adicionando Transparência à Cor 74
Criando um esquema de cores 76
De uma cor base 76
De uma imagem 76
Integrando sua paleta de cores com sua página da Web 78
Pegue a roda 81

PARTE II: PÁGINAS, SITES E DESENHOS 83

Capítulo 5: Organizando uma Página 85


A parte superior do documento HTML5 86
Configurando sua base 86
Adicionando personagem ao seu site com metadados 87
Sabendo quando você precisa de um script 89
Um Design em Seções 91
Colocando Suas Coisas Organizadas 94
VIII Parágrafos, divisões e listas 94
Agrupando sem fraturar 99
Figuras e legendas 100
Organizando Arquivos 103
Organização de imagem e referência 103
Referência absoluta 104
Referência relativa 104
Pegue a roda 106
Capítulo 6: Exibindo dados com tabelas 109
Propriedades da tabela CSS3 para HTML5 110
Tabelas e dados tabulares 112
Noções básicas da tabela 113
Estilo de uma Tabela 114
Adicionando bordas com CSS3 114
Clarificação de dados com cores de fundo 117
Tabelas Complexas 120
Usando os atributos rowspan e colspan 120
Vãos práticos em tabelas 122
Pegue a roda 125
Capítulo 7: Tudo Sobre Links 127
O elemento de link e seus principais atributos 128
Folhas de estilo alternativas 128
Link ícones 131
Conteúdo

Pré-busca 133
Outros atributos de link 133
Links da Página 134
Mais do atributo rel 134
Âncoras de páginas e IDs 137
Alvos 140
Usando Iframes 143
Aninhando páginas da Web 144
Pegue a roda 146
Capítulo 8: Estratégias de Navegação 147
Conceitos de navegação na web 148
Navegação de designer e navegação do usuário 148
Navegação global 149
Usando JavaScript para chamar uma página vinculada 156
Criando consistência 159
Navegação vertical e horizontal 160
Aplicando pseudo-classes CSS3 160
Compreender as mecânicas do HTML5 da navegação vertical 162
Usando ícones gráficos na navegação 165
Sites de uma única página com Iframes 166
Vinculando a um gráfico 166
Fazendo e usando ícones em miniatura 167
Usando iframes em dispositivos móveis 169 IX
Pegue a roda 170

PARTE III: MÍDIA EM HTML5 173

Capítulo 9: Imagens 175


Noções básicas de arquivos de imagem HTML5 176
Formatos e pixels são importantes 176
Preservando camadas em gráficos da Web 178
Trabalhando com tamanhos de arquivos gráficos 179
Usando aplicativos gráficos para modificar o tamanho do arquivo de imagem 182
Colocar imagens e criar páginas da Web flexíveis 189
Posicionamento de imagem com o atributo align 189
Tamanho de imagem flexível com um pouco de JavaScript 191
Aplicativo para arquivos SVG dinâmicos de
Arquivos do Adobe Illustrator CS5 194
Pegue a roda 196
Capítulo 10: Som 199
Noções básicas de áudio em HTML5 200
Reprodução automática 200
Controles 200
Pré-carga 202
Loop 203
Suporte de Navegador para Áudio 203
Conteúdo

Salvo pela fonte: plano B 204


Atributo Tipo 204
Parâmetro do codec do tipo de origem 205
Criando arquivos de áudio 206
Gravador de Som do Windows 7 206
Estúdio de Som Macintosh OS X 208
Efeitos sonoros: FX em seu desktop 209
Sons de transição 209
Integrando efeitos sonoros em uma página da Web 211
Pegue a roda 214
Capítulo 11: Vídeo 215
Fazendo uma página HTML5 com vídeo 216
Compatibilidade de vídeo e navegador 218
Faça o meu WebM: The Miro Video Converter 219
Convertendo para 3GP: Adobe Media Encoder CS5 221
Fazendo vídeos para a web 222
Webcams 223
Filmadoras pequenas 223
Filmadoras padrão 224
Captura de tela de vídeo 225
Atributos de Vídeo e Fonte 225
Src 226
X Poster 226
Pré-carga 227
Loop 227
Reprodução automática 228
Controles 228
Largura e altura 229
Pegue a roda 229

PARTE IV: TAGS DINÂMICOS DE HTML5 MAIS UM POUCO


JAVASCRIPT E PHP 231

Capítulo 12: Adicionando JavaScript suficiente 233


Inserindo JavaScript em páginas HTML5 234
JavaScript em arquivos externos 234
Funções 235
Manipuladores de eventos 236
Usando o modelo de objeto de documento 239
Como o DOM funciona com sua página e JavaScript 240
Elementos HTML5 e o DOM 242
Armazenando Valores Temporários 244
Variáveis 244
Matrizes 248
Objetos 249
Pegue a roda 252
Conteúdo

Capítulo 13: Trovoando seu site com tela 253


Noções básicas de lona 254
Uma simples implementação de tela 256
Imagens em tela e sombras 264
Criando desenhos complexos com tela 269
Linhas e movimento 270
Curvas 275
Pegue a roda 281
Capítulo 14: Adicionando Formulários 283
Adicionando um Formulário 284
Atributos gerais do formulário 286
A forma como parte do DOM 290
Os muitos tipos de entrada 293
O atributo de lista, o tipo de URL e os datalists 294
Botões de opção e caixas de seleção: Elementos de entrada de fácil seleção 297
Seletor de data 301
Pegue a roda 303
Capítulo 15: Incorporando Objetos e Armazenando Informações 305
Geolocalização 306
Encontrar latitude e longitude 306
Obtendo o mapa 307
Trabalhando com as propriedades de geolocalização e
Plug-in do Google Earth 310 XI
Armazenamento em HTML5 311
Armazenamento de sessão 312
Armazenamento local 316
Adicionando e ajustando objetos em páginas HTML5 320
Adicionando um objeto 320
Ajustando um objeto 322
Pegue a roda 322
Capítulo 16: Captura de dados interativos 325
Idiomas do lado do servidor e HTML5 326
Configurando o PHP no seu computador (que acha que é um
servidor) 326
Testando PHP 327
Princípios Básicos do PHP 328
O apanhador de postagens 330
Data de validade 330
Estruturas Básicas do Programa PHP 332
Armazenamento temporário de dados 332
Principais operadores PHP 336
Fazendo um aplicativo de e-mail 337
Um simples aplicativo de email 338
Captura e envio de PHP 340
Adicionando um cabeçalho e resposta automática em PHP 342
Pegue a roda 344
Índice 345
Introdução
Em 1992, eu estava tropeçando na Internet (costumávamos tropeçar antes de surfar) com
um programa usando o protocolo Gopher. De El Paso, Texas, consegui pesquisar o
horário dos trens entre Londres e Cambridge, na Inglaterra. Na época, foi como um
milagre. Aqui estava eu West Texas com um horário de trem de Londres-Cambridge.
Inacreditável!

Pouco tempo depois, quando eu não achei que poderia ficar melhor que
Gopher na Internet, apareceu o navegador Mosaic e a World Wide Web. O
Netscape Navigator logo Mosaico plantado, e eu descobri HTML. Agora eu
era capaz de ver gráficos e texto, mais eu podia link para outras páginas da
Web. Em pouco tempo, trabalhei como criar minhas próprias páginas da Web
usando um editor de texto e a nova linguagem de marcação, HTML. Alguns
dos caras no conjunto de serviços de informática um anfitrião para mim e eu
estava no negócio.

Por um tempo, parecia que uma nova versão do HTML estava saindo a cada
ano. CSS e JavaScript foram introduzidos e mais e mais navegadores se
tornaram disponíveis. Ele apenas continuou recebendo melhor e melhor, mas
depois do HTML4 (em suas muitas formas, incluindo XHTML), as coisas
pareciam estagnar. Esta Idade das Trevas em HTML durou de 2000 a 2008.
Então a World Wide Web Consortium (W3C) publicou o Working Project
HTML5 em 2008. No entanto, após a publicaçãodos padrões HTML5 em um
formato de rascunho, tudo estava de volta a um rastreamento, tanto quanto
recebendo o meu mãos em um navegador HTML5. A equipe que desenvolve
os padrões tem sido metódica no processo de desenvolvimento e estava
planejando implementar o esboço final das normas em navegadores em 2012!

Então, um dia em 2009 ou 2010, li sobre uma versão beta de um navegador que suportava
HTML5 ou pelo menos alguns de seus recursos. Em 2010, vários navegadores estavam
suportando HTML5, incluindo navegadores criados para dispositivos móveis. Blogs on-line
como www.smashingmagazine.com estavam publicando posts sobre HTML5 e assim, pronto
ou não, o HTML5 estava aqui! De alguma forma O HTML5 escapou do zoológico e a corrida
começou a produzir navegadores HTML5. Nós entraram oficialmente no Período
Renascentista HTML. A emoção está de volta!
O HTML5 é tão grande que precisei selecionar um foco que abrangesse a essência
da marcação linguagem sem se transformar em uma mera referência ou
enciclopédia tentando tocar em tudo e não explica nada. Naturalmente, os novos
recursos seriam um grande foco ponto, mas eles existem no contexto de uma série
de outras tags, e leitores aprendendo HTML para o primeira vez precisa de
elementos fundamentais. Além disso, eu tive que soltar os elementos
descontinuados como um mau hábito e mostrar como os elementos continuados e
novos funcionam em conjunto. Além disso, CSS3 e JavaScript desempenha um
papel importante, mas eles são apenas introduzidos na medida em que se
relacionam com HTML5. (Smashing JavaScript e Smashing CSS cobrem essas
características importantes em detalhes). Eu dividi o Smashing HTML5 em quatro
partes que reúnem o coração e a alma de HTML5.
INTRODUÇÃO

PARTE I: A LINGUAGEM DA WEB


A primeira parte do livro começa com os diferentes navegadores disponíveis para HTML5:
incluindo navegadores de dispositivos móveis - e dá a você uma ideia de onde começar a trabalhar
com esse versão mais recente do HTML. Também lida com os detalhes de trabalhar com diferentes
tipos de arquivos e organizando-se de modo que a criação de páginas e sites da Web seja um
processo ordenado. Explica como use tags HTML5 (elementos) e os diferentes atributos e valores
que podem ser atribuídos a Tag. Além disso, você aprende como continuar com o CSS3. No final da
primeira parte, você aprende sobre usando cores e códigos de cores diferentes com HTML5
e como montar esquemas de cores para melhorar qualquer site.

PARTE II: PÁGINAS, SITES E DESENHOS


A segunda parte analisa a imagem maior da criação de páginas da Web e sites. De uma vez, designers
e desenvolvedores só precisava se preocupar com a forma como uma página apareceu em um tela de
computador - à medida que a tela real expandia para monitores que lembram o cinema drive-in telas.
De repente, os usuários com dispositivos móveis estavam olhando para páginas da Web e estratégias
de design teve que ser reformulado para incluir usuários móveis. Ao longo do livro, você verá páginas
da Web apresentado em configurações móveis para dispositivos como o iPhone e o Droid. Então,
espere ver Capturas de tela dos navegadores Windows 7 e Macintosh OS X intercaladas com capturas
de tela tiradas em dispositivos móveis exibidos nos navegadores Mini Opera e Safari móvel - bem
como outros navegadores móveis que você nem sabia que existiam. Não é a web do seu pai! (Não é
nem mesmo o seu Web da irmã mais velha.)

2
PARTE III: MÍDIA EM HTML5
Apenas um dos três capítulos desta parte trata da mídia que estava disponível em versões anteriores.
versões do HTML - Capítulo 9, em imagens. Os outros dois capítulos lidam com áudio e vídeo,
ambos novos para HTML5. Além dos tipos gerais de mídia, o HTML5 traz consigo decisões
diferentes sobre formatos de mídia. Vários dos formatos de vídeo são relativamente novos e foram
desenvolvidos para uso na Web em várias versões. Nem todos os navegadores HTML5 usam o
mesmos formatos de vídeo, mas, felizmente, o HTML5 tem estruturas em que ele pode verificar o
vídeo formatos até encontrar um que será executado em um determinado navegador. Além dos novos
elementos para áudio e vídeo vêm vários novos atributos e valores disponíveis para otimizar mídia no
Web e eu abordo esses atributos e valores nesta parte.

PARTE IV: TAGS DINÂMICOS DE HTML5 MAIS UM POUCO


JAVASCRIPT E PHP
Um dos recursos mais esperados do HTML5 tem sido o elemento da tela . No entanto, em Para
aproveitar ao máximo a tela , você precisa de JavaScript e CSS3. Então, nessa parte, você aprenda
JavaScript suficiente com o DOM (Document Object Model) HTML5 para funcionar com tela e
CSS3. Da mesma forma, o HTML5 trouxe vários novos atributos de formulário, mas, como na
maioria dos formulários, eles precisam de ajuda para processar as informações. Usando JavaScript,
INTRODUÇÃO

Você aprenderá como os dados de formulário podem ser salvos com os novos objetos de
armazenamento em HTML5. Além disso, você aprenderá a usar o PHP para processar informações
inseridas em formulários HTML5 para que você possa enviar e receber automaticamente e-mails via
Web. Além disso, dou uma olhada nos novos objetos de geolocalização e suas propriedades e
mostrar-lhe como você pode ter sua Web página carrega automaticamente um mapa com base em
suas coordenadas atuais de latitude e longitude. Você encontrará a Parte IV cheia de novos materiais
que adicionarão muitos recursos novos ao seu site.

3
PARTE I
I A LINGUAGEM

DA WEB

Capítulo 1: Introdução ao HTML5


Capítulo 2: Noções básicas sobre tags HTML5
Capítulo 3: Tags de Texto e um Pouco de CSS3
Capítulo 4: Trabalhando com valores de cores
SMASHING HTML5

CAPÍTULO 1
1
APRESENTANDO
HTML5

ESTE CAPÍTULO É uma visão geral do que é sobre alguns dos novos navegadores que são
novo, o que é o mesmo e o que foi removido específicos desenvolvido para dispositivos
de HTML que faz HTML5. Nesse momento, móveis, para que você possa teste páginas
uma das tarefas mais importantes é descobrir HTML5 no seu dispositivo móvel também. Para
quais navegadores funcionam com HTML5, Comece, baixe todos os navegadores HTML5
quais estão em desenvolvimento que prometem (abordado neste capítulo) para que você possa
compatibilidade com HTML5 e como cada um aprender o que os usuários verão quando
começou a implementar HTML5. Além disso, encontrarem um Página HTML5 da Web que
você vai querer aprender você criou.
PARTE I: A LINGUAGEM DA WEB

CRIANDO COM TAGS: UMA VISÃO GERAL


A maior parte do conteúdo na Internet é criada com HyperText Markup Language (HTML).
Você pode se surpreender ao saber que vários aplicativos usados todos os dias - por exemplo,
processador de texto - também foram criados com linguagens de marcação. No entanto,
como todo computador linguagens, com HTML, tudo o que você vê é o conteúdo, não a
linguagem subjacente. O idioma funciona como a armação de um prédio - você sabe que está
lá embaixo de toda aquela pintura e drywall, mas você não pode ver isso. Neste livro, eu faço
a linguagem do HTML muito visível e mostro você como usá-lo para construir suas próprias
estruturas.

Se você estiver familiarizado com versões anteriores de HTML e XHTML, poderá transferir a
grande parte do seu conhecimento para HTML5. E se você é novato em trabalhar com HTML,
você ache o HTML5 bem simples. Essencialmente, tudo que você precisa fazer é colocar seu
conteúdo entre um tag de abertura e uma tag de fechamento, chamada de container, e o
container irá estilizar seu texto ou exibir seus gráficos e mídia na página da Web. A figura 1-1
ilustra os contêineres:

Nome do elemento

Abertura de Tag
Container = entre
abrindo e fechando tags.
8 A tag <p> está dentro do
recipiente <body> e
'Hello' está dentro do <p>
Container.
Tag de fechamento

Figura 1-1: Contêineres em HTML5.

Por exemplo, a linha a seguir,

diz ao intérprete no seu navegador para criar um texto grande como este:

Este é um texto grande.


O texto dentro das chaves <> é o código. Nesse caso, h1 é o código para o texto grande.
Os parênteses indicam onde começar o contêiner ( <h1> ) e onde encerrar o contêiner
( </ h1> ) Tudo dentro do contêiner é configurado para o tamanho e o estilo da tag, que é
construído na tag ou criado usando CSS3.

Enquanto estamos começando aqui, você pode se divertir criando e visualizando alguns
HTML5 com pequenos exemplos. Tudo o que você precisa fazer é digitar qualquer código
fornecido neste capítulo editor de texto, como o Bloco de Notas, se você estiver executando
o Windows ou o TextEdit, se estiver usando um Mac. Salve o arquivo com a extensão .html
e, em seguida, abra-o em um navegador HTML5. Para abrir uma web
CAPÍTULO 1: APRESENTANDO HTML5

página, basta iniciar o seu navegador e, em seguida, na barra de menu, selecione Arquivo →
Abrir Arquivo (ou Abrir), e localize o nome do arquivo. (Você pode apenas clicar duas
vezes no ícone do arquivo na área de trabalho para abrir a maioria Arquivos HTML.)

INCORPORANDO OS NOVOS ELEMENTOS HTML5


Uma tag é composta de um elemento e atributos. A tag é identificada por seu elemento,
como <h1> - h1 é o elemento. Quando falamos de uma tag, geralmente estamos nos
referindo ao seu elemento, mas na verdade, uma tag é seu elemento e atributos. Atributos
são as diferentes características ou propriedades de um elemento que você pode codificar
para alterar os recursos do conteúdo na tag recipiente. Por enquanto, só vou lidar com o
elemento, então vou usar a tag terms e elemento de forma intercambiável.

Para dar uma noção dos novos elementos em HTML5, a Tabela 1.1 mostra todos os novos
elementos, juntamente com uma breve descrição de cada um. Mais adiante neste livro, dou
muitos exemplos e explico como usar esses elementos.

Tabela 1.1 Novos Elementos em HTML5

Novo Elemento Descrição

<article> Composição autônoma no documento


<aside> Conteúdo tangencialmente relacionado ao conteúdo do artigo
9
<audio> Contém de conteúdo de som
<canvas> Container de desenvolvimento gráfico

<command> Um comando que o usuário pode invocar

<datalist> Gerador de lista quando usado com o elemento <input> e seu novo atributo de lista

<details> Divulga detalhes de um elemento

<embed> Plug-in ou conteúdo interativo externo

<figcaption> Tag de legenda para o elemento figure

<figure> Contém um grupo de conteúdo de mídia e sua legenda

<footer> Recipiente para um rodapé de uma seção ou página

<header> Contêiner para cabeçalho de uma seção ou página

<hgroup> Um cabeçalho de uma seção com vários elementos h1 a h6 em um documento

<keygen> A representação do controle do gerador de pares de chaves..

<mark> Uma sequência de texto em um documento, marcada ou destacada para


referência em outro documento

continua
PARTE I: A LINGUAGEM DA WEB

Tabela 1.1 (continua)


Novo Elemento Descrição

<meter> Container para um intervalo conhecido de valores (por exemplo, uso de disco)

<nav> Representação de uma seção de um documento destinado à navegação

<output> Define o progresso de uma tarefa de qualquer tipo

<progress> Representação do progresso feito em uma tarefa (como porcentagem


completa em uma operação de download)

<rp> Indicador em Ruby (uma linguagem de programação) para definir o que mostra
para os navegadores que não suportam o elemento <ruby>

<rt> Marca o componente de texto rubi de uma anotação ruby

<ruby> Elemento para extensões com anotações ruby

<section> Identificador de tema para agrupamento de conteúdo

<source> Container para várias especificações de recursos de mídia

<summary> Informações sobre um elemento <details>

<time> Container para uma data / hora

<video> Elemento para vincular a um arquivo de vídeo

10 <wbr> Representação de uma oportunidade de quebra de linha para guiar a hifenização


de palavras longas ou cadeias de texto

Alguns dos novos elementos, como <video> e <audio>, adicionam multimídia a HTML e
representam uma grande capacidade nova para HTML. Outros, como o <ruby>, são bastante
especializados e a menos que você precise de certos caracteres do Leste Asiático, é
improvável que você use esse elemento.

Uma característica de muitas das novas tags é que elas funcionam em conjunto com CSS3 ou
JavaScript. No entanto, a maioria dos novos elementos ainda funciona por conta própria, sem
ajuda. Ao adicionar um estilo ou alguns dos recursos mais frios, você pode usar um pouco de
CSS3 ou JavaScript, mas você não precisa aprender toda a linguagem JavaScript ou mesmo
CSS3 para Tenha alguma diversão com isso.

Por exemplo, o script a seguir usa o novo elemento <datalist> que não foi disponível em
versões anteriores do HTML. Digite o seguinte código em um editor de texto, salve-o como
Datalist.html , abra-o no navegador da Web e você verá como ele ajuda os usuários a entrar
dados. (Você pode encontrar Datalist.html na pasta deste capítulo em www.wiley.com/go/
smashinghtml5.)

<!DOCTYPE HTML>
<html>
<head>
CAPÍTULO 1: APRESENTANDO HTML5

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>


<title>Lista de dados</title>
</head>
<body>
<p>
<label> Qual das seguintes opções você gostaria de aprender? <br /> <input type=”text”
name=”web” list=”lang”>
<datalist id=”lang”>
<option value=”HTML5”>
<option value=”JavaScript”>
<option value=”jQuery”>
<option value=”ActionScript 3.0”>
<option value=”Java”>
</datalist>
</label>
<br />
</p>
</body>
</html>

Quando você abrir o arquivo em um navegador Opera, você receberá uma lista de opções
de entrada, conforme mostrado na Figura 1-2.

11

Figura 1-2: Usando a tag <datalist> em um navegador Opera.

Ao contrário das versões anteriores do HTML, em que a entrada de texto não mostrava ao
usuário uma lista de opções, Um faz.

USANDO CONTINUAMENTE TAGS DO HTML4


Mesmo se você estiver familiarizado com HTML4 (ou versões anteriores de HTML), você
ficará surpreso com o número de elementos HTML que você pode não saber como usar ou
pode nem ter ouvido falar antes. Por exemplo, qual é a tag <q> ? Quando é usado? Se você é
novo em HTML, não tente lembre-se de todos os elementos da Tabela 1.2, mas repasse-os
para ter uma noção geral do tags disponíveis e um pouco sobre sua descrição.
PARTE I: A LINGUAGEM DA WEB

Tabela 1.2 Continuação Tags de Versões HTML Anteriores

Tags Continuação Descrição

<!--...--> Um comentário
<!DOCTYPE> O tipo de documento (apenas um em HTML5)
<a> Hiperlink para uma página ou área de página
<abbr> Uma abreviatura
<address> Contêiner para um endereço
<area> Uma área dentro de um mapa de imagem
<b> Texto em negrito
<base> Um URL base para todos os links em uma página
<bdo> Direção da exibição de texto
<blockquote> Um bloco de texto
<body> Começando um elemento do corpo
<br> Uma quebra de linha única
<button> Uma quebra de linha única
<caption> Uma legenda de tabela
<cite> Container para uma citação
<code> Formato para texto de código de computador
<col> Define os atributos das colunas da tabela
12 <colgroup> Contêiner para grupos de colunas da tabela
<dd> Contêiner para um valor para o elemento <dt>
<del> Contêiner para texto excluído
<dfn> Representação da instância definidora do termo
<div> Demarcação de divisão em um documento
<dl> Head para uma lista de associação
<dt> Especificação para um nome no grupo de nome-valor (lista de descrição)
<em> Texto enfatizado
<fieldset> Contêiner para um conjunto de controles de formulário
<form> Contêiner para um formulário normalmente com elementos de entrada
<h1> to <h6> Cabeçalho de texto 1 ao cabeçalho 6
<head> Contêiner para o primeiro código a ser interpretado pelo navegador
<hr> Regra horizontal (linha)
CAPÍTULO 1: APRESENTANDO HTML5

Tags Continuação Descrição

<html> Contêiner para um documento HTML

<i> Texto em itálico

<iframe> Enquadrar uma subjanela na linha

<img> Recipiente de imagens

<input> Campo de entrada do usuário dentro de um contêiner de formulário

<ins> Contêiner para texto inserido dentro dos limites de parágrafo implícito

<kbd> Contêiner para entrada do teclado do usuário

<label> Representação de uma legenda em uma interface de usuário

<legend> Título em uma borda plana

<li> Indicador de item da lista

<link> Uma referência de recurso (por exemplo, CSS)

<map> Contêiner do mapa de imagens

<mark> Texto em um contexto marcado para texto em contexto diferente

<menu> Contêiner para uma lista de comandos

<meta> Contêiner para meta informação 13


<object> Contêiner para objeto incorporado (por exemplo, um arquivo SWF)

<ol> Uma lista numerada (ordenada)

<optgroup> Um cabeçalho de agrupamento de opções em uma lista de opções

<option> Contêiner para opções individuais em uma lista suspensa

<p> Um bloco de parágrafos

<param> Parâmetros de plug-in

<pre> formato de texto pré-formatado

<q> Texto fechado entre aspas

<samp> Saída de código de computador ou snippet

<script> Contêiner para script para CSS, JavaScript ou outro script reconhecido

<select> Uma lista selecionável

<small> Texto pequeno

<span> seção Inline em um documento

<strong> Texto forte que parece negrito

<style> Contêiner para uma definição de estilo

continua
PARTE I: A LINGUAGEM DA WEB

Tabela 1.2 (continuação)

Continued Tags Description

<sub> Texto subscrito

<sup> Texto sobrescrito

<table> Uma definição de mesa

<tbody> Demarcação de um bloco de linhas para o corpo de uma tabela

<td> Uma célula de tabela

<textarea> Um contêiner de área de texto

<tfoot> Representação para um bloco de linhas de resumos de coluna para uma tabela

<th> Formato do cabeçalho da tabela

<thead> Representação de um bloco de linhas de resumos de coluna para um cabeçalho de tabela

<title> O título do documento

<tr> Demarcação de uma linha da tabela

<ul> Uma lista não ordenada (uma lista de marcadores)

<var> Estilo variável na fórmula


14
A maioria dos elementos com os mesmos nomes do HTML4 são os mesmos em todos os
aspectos HTML5, mas alguns têm significados ligeiramente modificados. Além disso, as
regras para algumas tags foram alteradas. Por exemplo, ao criar tabelas, a tag para
especificar uma linha <tr> não requer mais um fechamento tag </ tr> . Alguns atributos para
elementos também foram alterados. Enquanto você continua aprendendo sobre os novos
recursos do HTML5, você verá que muitos dos elementos "antigos" têm muitos novos
características. O script de tabela HTML a seguir fornece um novo exemplo com elementos
antigos. Digite este texto em seu editor de texto, salve-o como NewOldTable.html e abra-o
em um Opera navegador.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Tabela</title>
</head>
<body>
<table>
<caption>
=Tipos de elementos=
</caption>
<thead>
CAPÍTULO 1: APRESENTANDO HTML5

<tr>
<th> Tipo
<th> Texto
<th> Gráficos
<tbody>
<tr>
<th> Interface do Usuário
<td> Entrada de texto
<td> botão
<tr>
<th> Links
<td> sublinhado
<td> Ícone
</table>
</body>
</html>

Figure 1-3 shows what your table looks like.

15

Figura 1-3: Uma tabela criada com HTML5.

Geralmente, você não usa tabelas para formatar texto. Em vez disso, as tabelas são usadas
para formatar dados, como dados que são carregados de um banco de dados ou criados
dinamicamente por outro programa, como JavaScript. No HTML5, no entanto, as tabelas
usadas em conjunto com o CSS3 fazem um pouco mais de formatação do que nas versões
anteriores do HTML e CSS.

ESQUECENDO OU SUBSTITUINDO TAGS OBSOLETAS


Esse conjunto final de tags (consulte a Tabela 1.3) é para qualquer pessoa familiarizada com
HTML4 e versões anteriores do HTML. As tags a seguir se tornaram obsoletas, porque
colocaram certos problemas ou foram substituídas por outras estruturas que lidaram melhor
com o que costumavam fazer.

Se você é novo em HTML, pode ver isso para ter uma ideia do que evitar. Ao trabalhar com
HTML, você encontra muitas amostras na Web e provavelmente as incorpora ao seu próprio
código. No entanto, como o HTML5 é tão novo, você descobrirá que a maior parte do
HTML foi criado com versões anteriores que podem ter tags obsoletas e você deseja
substituí-las pelas estruturas mais recentes.
PARTE I: A LINGUAGEM DA WEB

Tabela 1.3 Obsoletas Tags

Tags excluídas Removido ou substituído

<acronym> Substituído por <abbr>

<applet> Substituído por <object>

<basefont> Melhor tratado pelo CSS

<bgsound> Substituído por <audio>

<big> Melhor tratado pelo CSS

<blink> Removido em HTML5

<center> Melhor manuseado pelo CSS

<dir> Substituído por <ul>

<font> Removido em HTML5

<frame> Removido em HTML5

<frameset> Removido em HTML5

<isindex> Substituído pelo <form> explícito

<marquee> Removido em HTML5

<multicol> Removido em HTML5


16
<nobr> Removido em HTML5

<noframes> Removido em HTML5

<noscript> Apenas em conformidade com a sintaxe HTML

<s> Melhor tratado pelo CSS

<spacer> Removido em HTML5

<strike> Melhor tratado pelo CSS

<tt> Melhor manipulado por CSS

<u> Melhor tratado pelo CSS

Uma das tags obsoletas mais comuns é <center>, mas é possível centralizar facilmente o
texto usando um pouco de CSS, conforme mostrado no exemplo a seguir. Digite este texto
em seu editor de texto, salve-o como CenterMe.html e abra-o no navegador da Web.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
h1 {
text-align:center;
}
CAPÍTULO 1: APRESENTANDO HTML5
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Center with CSS</title>
</head>
<body>
<h1> Cabeçalhos podem ser centralizados </h1>
</body>
</html>

Tudo o que você verá ao testar o código no seu navegador é:

Cabeçalhos podem ser centralizados

Pode parecer muito trabalhoso obter um cabeçalho centralizado simples, mas as páginas
geralmente são curtas e você pode centralizar qualquer cabeçalho com uma tag <h1>
porque mudou o comportamento da tag. Você pode alterar qualquer tag que quiser com
CSS. (Você aprenderá sobre o CSS3 no Capítulo 3, mas já o usou se vir o cabeçalho no
meio da página.)

ESCOLHENDO UM NAVEGADOR PARA COMPILAR O HTML5


Se você quiser iniciar uma conversa animada com outros desenvolvedores de HTML5, pergunte:
"Qual é o melhor navegador?" Você deve estar mais preocupado com o navegador que os
usuários do site usarão - não com o navegador usado por outros desenvolvedores. Em geral, os
desenvolvedores usam o melhor navegador até que outro melhor navegador apareça, então eles
podem usar navegadores mais avançados e melhores do que o usuário comum da Web. Se você
quiser que as pessoas que visitam seu site tenham a melhor experiência possível, tente descobrir
qual navegador elas provavelmente usarão. Uma ideia ainda melhor ao desenvolver softwares 17
para você ou para um cliente é testar suas páginas da Web em todos os principais navegadores e,
pelo menos, nas duas principais plataformas - Macintosh e Windows. Os principais
desenvolvedores de navegador também fazem navegadores para o sistema operacional Linux,
mas poucas pessoas usam sua caixa do Linux para navegar na Web.

Observando os principais navegadores que suportam HTML5, a maioria pode ser usada pelo
Windows ou pelos sistemas operacionais Macintosh, mas às vezes um navegador exigirá um
sistema operacional mais novo. Portanto, se você tiver um sistema mais antigo, certifique-se de
que os requisitos para o navegador usado funcionem com o seu sistema operacional.

Vários anos atrás, a Microsoft desistiu de fazer o Internet Explorer (IE) para o Macintosh. No
entanto, a Apple faz uma versão do seu navegador, o Safari, para o Windows. Os
desenvolvedores de navegadores - Google, Mozilla e Opera - não criam sistemas operacionais
para computadores, mas fazem navegadores. Nesta seção, analiso o Firefox, o Chrome, o
Opera, o Safari e o IE9.

Tenha em mente que os recursos dos navegadores mudam o tempo todo. O que está aqui é
o atual, mas pode ter mudado no momento em que você o leu.
PARTE I: A LINGUAGEM DA WEB

MOZILLA FIREFOX
O Mozilla tem suas raízes no navegador original da Netscape, chamado Netscape
Navegador, que foi introduzido no início dos anos 90. Apresentava um mascote que
lembrava a criatura do filme Godzilla. Mosaic foi um navegador desenvolvido na
Universidade de Illinois; mais tarde se tornou o Netscape Navegador. A combinação de
Mosaic e Godzilla resultou na Mozilla, que atualmente é uma empresa sem fins lucrativos,
a Mozilla Foundation. O Firefox é o navegador principal da Mozilla que suporta HTML5.

Além de suportar os sistemas operacionais Windows e Macintosh, o Firefox também


suporta o sistema operacional Linux. O Linux não é considerado um sistema operacional
primário para computadores domésticos, mas é para servidores. O Firefox está disponível
gratuitamente para todos os sistemas operacionais suportados. A Figura 1-4 mostra uma
captura de tela de um aplicativo HTML5 no Firefox.

18

Figura 1-4: O navegador Mozilla Firefox.


CAPÍTULO 1: APRESENTANDO HTML5

Observe que na janela da URL (a janela onde você coloca o endereço HTML), a referência é
para o file:///Volumes/Macintosh HD/ em vez de um endereço http:// Isso porque a página está
na área de trabalho do computador. Além disso, você verá que as coisas parecem diferentes
se exibidas em um ambiente Windows do que em um Macintosh - mesmo para o mesmo
navegador. (A página de exemplo é apenas para ilustração e não seleciona navegadores para
você.)

GOOGLE CHROME
O Google, famoso por seu mecanismo de pesquisa e mapas, criou seu navegador, o Chrome,
a partir do zero, com o HTML5 em mente. Tem navegadores para sistemas operacionais
Apple, Windows e Linux - todos disponíveis gratuitamente. A Figura 1-5 mostra a mesma
página da Web exata no mesmo computador da Figura 1-4 - veja se você consegue detectar
as diferenças.

19

Figura 1-5: Google Chrome exibindo a mesma página HTML5 mostrada na Figura 1-4.

Diferente dos estilos diferentes dos dois navegadores, pode ser difícil ver as diferenças na
página. Com uma página simples, as diferenças sutis não afetam a aparência da sua página
da web. No entanto, conforme suas páginas se tornam maiores e mais complexas, pequenas
diferenças podem crescer.
PARTE I: A LINGUAGEM DA WEB

Uma ferramenta de desenvolvimento de páginas da Web, o Adobe Browserlab


(https://browserlab.adobe.com), permite que você veja como uma página da Web
aparece em diferentes navegadores ao mesmo tempo. O Browserlab pode ser
executado diretamente do Adobe Dreamweaver CS5, ou você pode visitar a página
da Web do Adobe Browserlab. Para obter uma diferença um pouco maior, vamos
comparar o exemplo de página da Web no Firefox em um Macintosh com um no
Windows 7 executando o Google Chrome. A Figura 1-6 mostra como a comparação
lado-a-lado se parece. (Gráficos não são exibidos.)

20

Figura 1-6: Comparando navegadores no Adobe Browserlab.

Parte da diferença se deve às maneiras pelas quais os sistemas operacionais Windows e


Macintosh exibem interfaces de texto e de usuário (UIs). Outra exibição fornecida pelo
Browserlab é chamada de onionskin; ela sobrepõe uma sobre a outra e você pode ver mais
precisamente onde texto e UIs aparecem. A Figura 1-7 mostra essa diferença.

Quanto mais embaçada aparece uma casca de borracha, maiores são as diferenças na forma
como os materiais da página da Web são renderizados. Na Figura 1-6, você pode ver que a
visualização está muito desfocada, indicando que existem algumas diferenças importantes
entre os navegadores e os sistemas operacionais.
CAPÍTULO 1: APRESENTANDO HTML5

21

Figura 1-7: uma visão prejudicial de navegadores sobrepostos.

OPERA
Quando eu estava examinando o navegador Opera no momento de testar inicialmente os
diferentes navegadores, parecia que os melhores recursos de HTML5 estavam
funcionando. Além disso, o Opera tem um navegador especial, o Opera Mini 5, que você
pode baixar gratuitamente para seus dispositivos móveis. O HTML5 funciona bem em
dispositivos móveis, como você pode ver na Figura 1-8, que exibe a página da Web de
amostra em um iPhone usando o navegador móvel do Opera.
PARTE I: A LINGUAGEM DA WEB

22

Figura 1-8: Navegador do Opera Mini 5.

Navegadores Opera de tamanho normal também estão disponíveis para os sistemas


operacionais Windows, Macintosh e Linux. Ao criar páginas da Web, você deve planejar
dispositivos com tamanhos diferentes. Como você pode ver, o aplicativo de amostra que
estamos usando pode caber totalmente em um dispositivo móvel e em telas grandes.

APPLE SAFARI
A Apple faz navegadores Safari para Macintosh e Windows, bem como para dispositivos
móveis. Para fins comparativos, a Figura 1-9 mostra como o aplicativo de amostra aparece
no Mobile Safari da Apple, desenvolvido para o iPhone. Compare isso com o Opera Mini 5
na Figura 1-8.
CAPÍTULO 1: APRESENTANDO HTML5

23

Figura 1-9: O navegador do Mobile Safari.

Assim como há poucas diferenças entre as aparências das páginas da Web exibidas em um
computador desktop ou laptop, você não deve ver muitas diferenças entre o que diferentes
navegadores mostram em dispositivos móveis. Isso é uma coisa boa! Os desenvolvedores da
Web perdem bastante tempo tentando garantir que todas as suas páginas tenham a mesma
aparência em diferentes navegadores e plataformas. Com uma implementação comum de
HTML5, isso não deve ser um problema. Outros recursos exclusivos em navegadores, como
guias ou outras características que facilitam a navegação na Web, são aceitáveis desde que a
implementação do HTML5 pelo navegador seja implementada de acordo com as especificações
definidas pelo World Wide Web Consortium (W3C).
PARTE I: A LINGUAGEM DA WEB

MICROSOFT INTERNET EXPLORER 9


No momento da redação deste artigo, o Internet Explorer 9 (IE9) ainda estava em
fase beta. Segundo a Microsoft, seu navegador IE9 estará totalmente em
conformidade com os padrões HTML5. Sempre que possível, ao longo deste livro,
incluí exemplos que mostram o IE9 no trabalho com páginas da Web HTML5
usando o navegador beta do IE9. A Figura 1-10 mostra a página de teste no
navegador beta do IE9.

24

Figura 1-10: Internet Explorer 9.

VISUALIZANDO EXIBIÇÕES DIFERENTES


Como você viu, as páginas da Web podem ser visualizadas em vários navegadores e
sistemas operacionais diferentes. Os desenvolvedores da Web precisam considerar as
características dos dispositivos em que suas páginas serão visualizadas, como um
computador de mesa ou um celular. Suponha que você desenvolva para um iPhone e iPad
(ou algum outro dispositivo móvel e tablet); Se você puder visualizar seu trabalho lado a
lado, poderá compará-lo melhor. O Adobe Dreamweaver, uma ferramenta de
desenvolvimento de páginas da Web, permite que o desenvolvedor visualize várias
dimensões simultaneamente, conforme mostrado na Figura 1-11.
CAPÍTULO 1: APRESENTANDO HTML5

25
Para o aparelho de telefone iPhone: 480 x 320 Tabela ajustada para o iPad: 1024 x 768
Figura 1-11: Visualização em Multiscreen no Adobe Dreamweaver.

Você pode alterar as dimensões do dispositivo. Por exemplo, um Motorola Droid exibe uma
tela de 854 x 480 e um Sony VAIO UX exibe uma tela de 1024 x 600. A visualização
multiscreen ajuda você a decidir como configurar sua página para otimizá-la para seus
espectadores. Encontrar o melhor compromisso é uma arte que pode ser menos onerosa,
conhecendo o máximo possível o seu público-alvo e os dispositivos que provavelmente
usarão para visualizar seus materiais.

PEGUE A RODA
Para começar, este primeiro exemplo permite adicionar algumas informações sobre você.
Não se preocupe em entender tudo (ou qualquer coisa!), A menos que você tenha
experiência em HTML. Apenas substitua as coisas sobre você nas áreas marcadas com
sinais de igual duplo. Salve a página no seu computador usando o nome wheel1.html.
(Você pode encontrar wheel1.html na pasta deste capítulo em www.wiley.com/go/
smashinghtml5.)

<!DOCTYPE HTML>
<html>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
PARTE I: A LINGUAGEM DA WEB

<head>
<style type=”text/css”>
body {
background-color:blanchedAlmond;
color:saddleBrown;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:20px;
}
h1, h2 {
font-family:”Arial Black”, Gadget, sans-serif;
color:midnightBlue;
}
h1 {
text-align:center;
}
h3 {
background-color:goldenrod;
color:ghostwhite;
font-size:11px;
font-family:”Arial”;
}
</style>
<title>A roda</title>
</head>
26
<body>
<h1> ==Seu nome== : O poderoso desenvolvedor web HTML5</h1>
<h2> ==O nome da sua empresa== fornece serviços da Web completos</h2> <ul>

<li>==Serviço 1==</li>
<li>==Serviço 2== </li>
<li>==Serviço 3== </li>
<li>==Serviço 4== </li>
<li>==Serviço 5== </li>
</ul>
<h3>&nbsp; Todos os serviços garantidos. Nosso departamento de reclamações está localizado em: ==URL onde as
reclamações podem ser enviadas== &nbsp;. </h3>
</body>
</html>

Quando você testa em um navegador, veja se parece com o que você esperava. Além disso,
você pode querer ver o que parece em diferentes navegadores e em seu dispositivo móvel.
(Lembre-se: os navegadores da Web são gratuitos.) Se você quiser fazer mais algumas
alterações, acesse www.w3.org/TR/css3-color / # svg-color. Lá você encontrará uma lista
de todos os nomes de cores que você pode usar com o HTML5. Veja se você pode alterar
os nomes das cores no código para os que você gosta.
CAPÍTULO 2
SMASHING HTML5

2 Noções
básicas sobre
tags HTML5

OS PROGRAMADORES CARACTERIZAM linguagens como Java e aplicativos feitos com


as linguagens do COMPUTADOR, desde as o Flash. Na verdade, a maioria dos
linguagens de baixo nível, que virtualmente imitam navegadores era fornecida com os plug-ins
a linguagem nativa do computador, até as mais recentes do Flash, para que os usuários
linguagens de alto nível que estão próximas de pudessem ver as páginas criadas com o Flash e
como as pessoas falam. HyperText Markup o Flash Builder (Flex).
Language Version 5 (HTML5) é uma linguagem
de alto nível. No entanto, o HTML original tinha No entanto, os desenvolvedores da Web ainda
muito poucas “palavras” para descrever o que o queriam mais de HTML e CSS para rodar
desenvolvedor e o designer queriam. Conforme a nativamente com navegadores. Os criadores do
Web crescia, as demandas por HTML navegador adicionaram funcionalidade ao
aumentavam. Com a ajuda do Cascading Style JavaScript necessário para trabalhar com os
Sheets (CSS) e do JavaScript, os designers novos elementos no HTML5. Com as novas
poderiam fazer mais com as páginas da Web, mas versões de cada navegador, não apenas o
ainda assim faltava muita coisa. HTML5 estava sendo totalmente implementado,
como também o JavaScript e o CSS3. Este
Mais ajuda estava disponível para criar páginas capítulo explica como os diferentes elementos
da Web na forma de plug-ins que podiam ser HTML5 funcionam e como eles funcionam em
executados conjunto com CSS3 e JavaScript.
PARTE I: A LINGUAGEM DA WEB

CÓDIGO DE ANÁLISE
Mais cedo ou mais tarde, você ouvirá o código de análise de frase em referência a navegadores e
HTML5, CSS3 e JavaScript. Tudo isso significa que o navegador está lendo o código e
interpretando-o do que é dito para fazer. É como um intérprete internacional que fala inglês e
russo - o intérprete analisa o russo para que o falante de inglês o entenda e o inglês para que o
falante de russo o compreenda. Estritamente falando, o analisador é parte do interpretador no
navegador, mas para todos os fins práticos, basta pensar em analisar os envolvidos na obtenção da
página do que você disse nas tags que você usou em seu arquivo da web.

Para analisar corretamente o HTML5, duas coisas precisam acontecer: você precisa escrever o
código corretamente e o navegador deve interpretá-lo corretamente. É por isso que os padrões são
importantes. Basicamente, os padrões asseguram que quando você escreve código HTML5 de
acordo com as regras estabelecidas, seu código faz o que você espera em todos os navegadores e
em todos os computadores. Usando HTML5, CSS3 e JavaScript com os navegadores discutidos
no Capítulo 1, você não deve ter nenhuma surpresa quando todos estiverem em conformidade
com HTML5.

Ironicamente, os padrões permitem a criatividade da maioria dos designers e desenvolvedores. Se


você quiser que a página pareça ou aja de uma determinada maneira, seguindo os padrões usados
pelos navegadores que interpretam suas criações, eles terão a aparência que você deseja que eles
pareçam e se comportem como esperado. Se você ou o navegador não seguir os padrões, sua
criatividade estará arruinada. (Nós não queremos isso agora, não é?)

28
ENTENDENDO HTML5 E ARQUIVOS RELACIONADOS
Como você viu no Capítulo 1, para criar um arquivo HTML5, tudo o que você precisa fazer é
salvar o código usando um editor de texto como o Bloco de Notas (Windows) ou o TextEdit
(Mac) e usar a extensão .html no final do nome do arquivo. (MyCoolPage.html é um exemplo.) A
extensão .html é importante porque é reconhecida como uma página da Web e não como algo que
seu navegador não consegue analisar. Você também descobrirá que apenas certos tipos de outros
arquivos são reconhecidos pelo intérprete do navegador e precisam de certas extensões. Aqui
estão os tipos de arquivo mais comuns que você encontrará:

„ .jpg (JPEG arquivo gráfico)


„ .gif (GIF arquivo gráfico)
„ .png (PNG arquivo gráfico)
„ .svg (SVG arquivo gráfico)
„ .css (Folha de Estilo em Cascata)
„ .js (arquivo JavaScript)

Os mais importantes são os arquivos gráficos porque as ferramentas que você usa para seus
gráficos podem salvá-los automaticamente com nomes de arquivos diferentes daqueles que
podem ser usados para a Web. Por exemplo, o Adobe Photoshop salva automaticamente arquivos
como arquivos .psd e o Adobe Illustrator salva seus arquivos no formato .ai. Nenhum formato de
arquivo gráfico pode ser usado com páginas da Web. No entanto, a maioria das ferramentas de
criação gráfica salvará os arquivos como .jpg, .gif ou .png se você usar Salvar como em vez de
apenas
CAPÍTULO 2: NOÇÕES BÁSICAS SOBRE TAGS HTML5

Corrigindo as configurações da extensão


de arquivo padrão do Windows
As configurações padrão para o Windows 7 (e versões anteriores) são para ocultar as extensões
de arquivo. Isso dará aos seus arquivos uma aparência mais limpa, mas se você tiver que decidir
entre selecionar um arquivo gráfico com uma extensão .psd ou uma extensão .png, será
necessário ver qual é a extensão. Veja o que fazer:
1. Abra o painel de controle.
2. Escolha Aparência e Personalização → Opções de Pasta → Mostrar Arquivos e
Pastas Ocultos.
3. Desmarque Ocultar extensões para tipos de arquivos conhecidos (veja a figura).

29

Desmarque esta caixa


Desmarcar a caixa de seleção Ocultar extensões para tipos de arquivo conhecidos no Windows.

Agora você poderá ver todas as suas extensões de arquivo. Então, quando você quiser
carregar um arquivo gráfico, você saberá se é um arquivo .png, .jpg ou .gif apenas observando
o nome do arquivo exibido na tela do computador.
PARTE I: A LINGUAGEM DA WEB

Corrigindo Editor de Texto no seu Mac


Se o Editor de Texto no Mac tiver suas configurações padrão, você pode ter tido problemas ao
salvar arquivos HTML simples. Isso ocorre porque o tipo de arquivo padrão no qual o Editor de
Texto salva arquivos é o formato Rich Text (.rtf) e não o texto simples (.txt). Com .rtf, seu texto é
salvo com outro código que você não deseja em suas páginas da Web. Veja o que você precisa
fazer para corrigir isso para escrever páginas da Web:
1. Abra o Editor de Texto.
2. No menu Editor de Texto, na parte superior da tela, escolha
Preferências. A caixa de diálogo Preferências é exibida.
3. Selecione o botão de opção Texto Simples (veja a figura).

30

Alterando o Editor de Texto de Texto Rico para Texto Simples.

Agora, quando você cria uma página HTML5 no Editor de Texto, quando você salva o arquivo, o
padrão é .txt e você pode simplesmente alterar isso para .html usando Salvar como.
CAPÍTULO 2: NOÇÕES BÁSICAS SOBRE TAGS HTML5

APRENDENDO QUE ARQUIVOS TRABALHAM COM A WEB


Se você é novato em escrever páginas da Web, a primeira coisa a aprender é quais arquivos
funcionam com páginas da Web. Diretamente, o HTML5 reconhece a extensão.html e as
três extensões de arquivo gráfico discutidas anteriormente (.jpg, .png, e .gif). No entanto,
você verá uma referência aos arquivos .css Estes são arquivos CSS externos, sejam CSS3
ou versões mais antigas. Da mesma forma, os arquivos JavaScript são salvos com uma
extensão .js e eles também podem ter uma referência de link.

Os navegadores que analisam o HTML também analisam CSS e JavaScript. Na verdade,


você pode ter arquivos HTML com código CSS e JavaScript escritos diretamente nas tags
HTML. Sempre que vir a tag <script> , você encontrará um script JavaScript ou CSS no
contêiner de script (entre as tags de abertura <script> e fechamento </script>). Em outras
ocasiões, o desenvolvedor escolhe colocar todo o código CSS e JavaScript em arquivos
externos e carregá-los usando a tag <link> para CSS e a tag <script> para JavaScript.

Por exemplo, o código a seguir carrega o arquivo .css externo BoaAparência.css:

<link rel=”stylesheet” type=”text/css” href=” BoaAparência.css” />

Com JavaScript, o arquivo .js externo é chamado a partir do contêiner <script> em vez de
dentro de uma tag <link> O seguinte carrega um arquivo JavaScript chamado doMagic.js:

<script language=”JavaScript” src=”doMagic.js” />


31
Este livro concentra-se no HTML5, mas você definitivamente precisa do CSS3 para
formatação, então você também verá aqui um bom negócio. Na maioria das vezes, você
verá CSS incorporado ao código HTML. No Capítulo 3, você aprende mais sobre o uso de
CSS3 com HTML5. O Capítulo 12 fornece um pouco de JavaScript para usar com tags
HTML5, e você verá exatamente como criar e usar JavaScript com HTML5.

CONHECENDO COMO AS TAGS TRABALHAM


Quando você escreve código em HTML5, precisa saber quais elementos usar para conseguir
o que deseja. Como vimos no Capítulo 1, você pode alterar o tamanho e a aparência de uma
fonte usando a tag <h1>. Para começar, você não modificará as tags com CSS. Quando você
usa <h1>, você pode esperar obter sempre o mesmo texto negrito grande e preto. (Você pode
modificá-lo para ser uma pequena fonte verde com CSS, se quiser, mas terá que esperar pelo
Capítulo 3 para ver como usar o CSS para fazer isso.)

Em poucas palavras, suas tags funcionam dividindo sua página em seções que começam com
uma tag de abertura <element> e terminam com uma tag de fechamento </element>. Você
pode escrever todas as páginas HTML5 que você quiser usando esse método e não muito
mais, e sua página funcionará muito bem. Naturalmente, você vai querer criar páginas com
um pouco de talento e ajudar o navegador a saber logo de cara o que você está fazendo, mas
na maioria das vezes, você apenas escreve tags. Então, vamos começar com o contêiner
HTML5 básico
PARTE I: A LINGUAGEM DA WEB

INICIANDO COM O TAG HTML BÁSICO


Se você está familiarizado com o HTML4 e descreve o tipo de documento, sabe que pode
adicionar muitos detalhes para informar ao navegador o que há com sua página. Assim, a
primeira tag que você precisa considerar não é realmente uma tag HTML, mas sim uma tag
que se comunica com o navegador para informar que você está escrevendo HTML5 e não
uma das muitas versões de HTML4 ou XHTML. Aqui está:

<!DOCTYPE HTML>

É isso aí! Nada extravagante, apenas anuncia ao navegador: "Você pode esperar um tipo de
documento HTML5." Toda página da Web que você faz deve começar com essa tag e você
não precisa de uma tag de fechamento. O ponto de exclamação (!) Indica que não é uma tag
HTML, mas algo um pouco diferente.

DESCREVENDO SUA PÁGINA COM TAGS


Logo após a primeira tag que informa ao navegador o que ele pode esperar, você inicia seu
contêiner HTML (tudo entre as tags de abertura e fechamento). Essa tag anuncia o início
do código HTML e termina quando o navegador encontra a tag de fechamento. A tag
HTML de fechamento está no final de cada página HTML.

Após o elemento HTML, está o contêiner <head> container. Pense na área da cabeça como a
32 parte que mantém a casa de uma página. O que quer que esteja na cabeça será carregado
primeiro, não importa onde seja usado no restante da página HTML. Para começar, tudo o
que está entrando na cabeça é o título da página. O título aparece no topo da página da Web
quando você o executa. Por exemplo, considere o seguinte título:

<title> Página Seriamente Doce </title>

Esse título aparece no Windows e nas guias da página. Se você não fizer isso, você terá
um título em branco ou padrão. A Figura 2-1 mostra como o título aparece em diferentes
navegadores.

Como você pode ver, o título Seriously Sweet Page aparece em diferentes lugares nos
quatro principais navegadores. Em alguns, aparece no topo da janela e no separador,
apenas no topo da página e apenas no separador. Isso ajuda o usuário a encontrar sua
página quando várias páginas são abertas simultaneamente ou simplesmente lembra ao
usuário qual página ele está visualizando. Muitos outros conteúdos estão no contêiner
<head> , como CSS e JavaScript, mas, por enquanto, lembre-se de incluir um título.

Seguindo em frente, a tag <body> demarca o começo do conteúdo da página. Como o nome
indica, o corpo é a parte principal de qualquer página da Web e apenas o conteúdo dentro do
contêiner <body> é visível na página. Entre os elementos de corpo de abertura e fechamento,
você coloca tudo o que deseja em sua página. O conjunto de tags a seguir deve aparecer em
todas as páginas criadas. Na verdade, você também pode usá-lo como um modelo e salvá-lo
em algum lugar para não precisar começar com uma página vazia para codificar.
CAPÍTULO 2: NOÇÕES BÁSICAS SOBRE TAGS HTML5

Figura 2-1: O título que aparece nas páginas da Web e nas guias. 33

<!DOCTYPE HTML>
<html>
<head>
<title>O título vai aqui </title>
</head>
<body>
O conteúdo vai aqui: uma página realmente cheia
</body>
</html>

Ao prosseguir neste livro, você encontrará mais e mais elementos estruturais para incluir.
No entanto, as poucas linhas precedentes o tirarão e rodarão com suas páginas da Web.

IDENTIFICANDO AS PEÇAS DE UMA TAG


Até este ponto, usei os termos tag e elemento mais ou menos intercambiáveis. No entanto, o
elemento é apenas uma parte de uma tag. Cada tag possui atributos e os atributos possuem
valores. Assim, tags são melhor concebidas nos seguintes termos:

„ Elemento: O nome
„ Atributo: Alguma característica do elemento
„ Valores: Um estado ou condição do atributo
PARTE I: A LINGUAGEM DA WEB

A Figura 2-2 mostra todas as três partes de uma tag.

Atributo (linguagem)

Nome do elemento Valor (Inglês)


Figura 2-2: As partes de uma tag.

O número de atributos é diferente para diferentes elementos.

Dependendo do elemento, diferentes tipos de atributos estarão disponíveis e, dependendo


do atributo, diferentes tipos de valores poderão ser aplicados. Como regra geral, use
marcas de cota em torno de valores, incluindo números próximos. Aqui estão alguns
exemplos diferentes:

<form action=”http://localhost/php/phpversion.php” method=”post”> <input type=”text”


width=”120” hidden=”false”> <input type=”submit” value=”Sick ‘em”>
Você tem que ter cuidado com o que você coloca entre aspas duplas. Por exemplo,
34 value=”Sick ‘em” é permissível porque ‘em tem uma marca de aspas simples. No entanto,
o valor “”Sick ‘em,” ele disse” não funcionaria porque dois pares de aspas duplas estão
incluídos.

O atributo de linguagem
O atributo linguagem (lang) a tag HTML não é usado, a menos que você esteja criando uma
página para algo diferente do inglês. Por exemplo, o seguinte é uma lista de outros idiomas em
que você pode desenvolver páginas da Web e seus valores de atributo de idioma
correspondentes:
Š Países Árabes (Árabe): “ar“
Š Chinês (Mandarim): “cmn“
Š Alemão (Alemão): “de“
Š Israel (Hebraico): “he”
Š Índia (Hindi): “hi”
Š Japão (Japonês): “ja”
Š Portugal (Português): “pt”
Š Rússia (Russo): “ru”
Š Espanha (Espanhol): “es”
Ao contrário de alguns atributos, o atributo lang possui um amplo intervalo de valores. Vá para
www.iana.org/ assignments/language-subtag-registry para obter a lista completa.
CAPÍTULO 2: NOÇÕES BÁSICAS SOBRE TAGS HTML5

Uma situação típica que pode surgir é aquela em que sua página tem uma referência citada
em duas partes diferentes da página. Em um parágrafo, você pode colocar quantas aspas
desejar e elas serão exibidas na página. No entanto, apenas um único conjunto de aspas
duplas pode ser atribuído como um valor ao valor de um atributo. Considere o seguinte
script (quotes.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5):

<!DOCTYPE HTML>
<html>
<head>
<title>Cuidado com aspas</title>
</head>
<body>
<p> Nós lemos as noites selvagens de Emily Dickinson! Noites selvagens!”<p/>
<input type=”text” size=”50” value=”Emily Dickinson’s ‘Noites selvagens! Noites selvagens!’”>
</body>
</html>

No contêiner <p>, as aspas duplas identificam o nome de um poema. Se o mesmo texto deve
ser definido como um poema em um valor para um atributo, você pode usar apenas aspas
simples para o nome do poema, conforme mostrado no valor atribuído ao atributo value. A
Figura 2-3 mostra a aparência da página em um navegador.

35

Figura 2-3: Usando aspas em páginas e atributos HTML5.

Ao atribuir valores a atributos, lembre-se de ficar com aspas duplas para todo o valor e use
aspas simples para realçar as seções dentro do valor. Em geral, a vida será mais fácil se você
evitar usar aspas simples ao atribuir valores a atributos.

ENTENDENDO O PAPEL DA TAG DE COMENTÁRIO


O papel da tag de comentário é ajudar o desenvolvedor a se comunicar com outros
desenvolvedores, bem como servir como lembrete do que a página está fazendo. Uma página bem
organizada contém informações sobre o que a página está fazendo, o que pode ser adicionado ou
alterado e qualquer outra informação que ajude os desenvolvedores a analisar um script de página
da Web e ver rapidamente o que está acontecendo.

A tag de comentário é realmente duas tags - uma tag inicial e uma tag final. Ao contrário
de outras tags, a tag de comentário não possui texto para ajudar a identificá-la. O script a
seguir (comments.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5)
mostra onde a tag de comentário foi e explica o que está fazendo.
PARTE I: A LINGUAGEM DA WEB

<!DOCTYPE HTML>
<html>
<head>
<title>Use comentários em seu código</title>
</head>
<body>
<h2>Os comentários são importantes</h2>
<!--Observe que o cabeçalho usa um elemento h2 em vez de um elemento h1.--> Os comentários ajudam
você a lembrar e mostrar aos outros o plano de design da sua página. <br/> Aqui estão alguns usos
diferentes:

<h5>1. Explique aos outros o que você está fazendo.</h5>


<!--Esta página está explicando comentários.-->
<h5>2. Forneça instruções específicas para tags a serem usadas.</h5>
<!--Não use marcadores (<ul>). Ainda não aprendemos como fazer isso.--> <h5>3. Liste os valores
hexadecimais para o seu esquema de cores.</h5>
<!-- Use somente os seguintes valores de cor nesta página: 69675C, 69623D, ECE8CF, E8D986, B5AA69.-->

<h5>4. Lembre-se de recarregar o seu computador portátil.</h5>


<!--Depois de trabalhar por duas horas na codificação, não se esqueça de recarregar sua bateria!
Caso contrário, você pode perder tudo.-->
<h5>5Lembre-se de que você tem uma vida longe dos computadores.</h5> <!--Não esqueça seu
encontro com Lola na sexta à noite!-->
</body>
</html>
36
Como você pode ver quando carrega a página, nenhum dos comentários é visível no navegador, mas assim
que você voltar ao trabalho, codificando a página da Web, eles estarão lá. Você pode colocar qualquer tipo
de texto em um contêiner de comentários e não atrapalhará o que você vê.

Um dos muitos usos das tags de comentários é o que é chamado de comentário (usando suas tags de
comentário para remover temporariamente as tags que você deseja manter em uso para uso posterior).
Assim, em vez de excluir as tags, tudo o que você faz é colocar tags de comentário em torno delas e testar
sua página para ver se você gosta dela sem as tags em questão. Se você acha que ficou melhor no original,
basta remover as tags de comentário. Se a página parecer melhor sem as tags comentadas, basta remover as
tags permanentemente.

Por exemplo, suponha que você esteja se perguntando se uma página que está preparando para um cliente
parece melhor ou pior com um subtítulo e uma nota de rodapé. Aqui está o código original com o subtítulo:

<!DOCTYPE HTML>
<html>
<head>
<title>Comentando</title>
</head>
<body>
<header>
<h1>Coma no Restaurante do Joe</h1>
<h2>*Já passou pela maioria das inspeções de saúde desde 2005</h2>
</header>
CAPÍTULO 2: NOÇÕES BÁSICAS SOBRE TAGS HTML5

<section>
Joe tem a melhor comida do quarteirão! A comida é boa, barata e gostosa!
</section>
<footer>
<h6>*Poucos sustos em 2010 </h6>
</footer>
</body>
</html>

A Figura 2-4 mostra como a página se parece.

Figura 2-4: O design original


37
Depois de pensar sobre o design, você sugere ao dono do restaurante, que tem muito orgulho
do registro de seu restaurante, que talvez a mensagem seja melhor recebida se o subtítulo e a
nota de rodapé forem removidos. No entanto, em vez de remover as tags completamente,
basta comentá-las, como mostra o código a seguir (CommentOutCode.html na pasta deste
capítulo em www. wiley.com/go/smashinghtml5) mostra:

<!DOCTYPE HTML>
<html>
<head>
<title>Comentando</title>
</head>
<body>
<header>
<h1>Coma no Restaurante do Joe</h1>
<!-- <h2>*Já passou pela maioria das inspeções de saúde desde 2005</h2> --> </header>

<section>
Joe tem a melhor comida do quarteirão! A comida é boa, barata e gostosa!
</section>
<footer>
<!-- <h6>* Poucos sustos em 2010</h6> -->
</footer>
</body>
</html>
PARTE I: A LINGUAGEM DA WEB

Quando usar (e não usar) tags de comentário


Um problema geral com as tags de comentário é que elas não são usadas de maneira suficiente
em uma página da web. Às vezes, alguns comentários são suficientes e, se uma página precisar
apenas de alguns, você não deve adicionar mais. Outras vezes, uma página precisa de muito mais
comentários do que tem. O número de comentários necessários depende completamente do
tamanho e do escopo do projeto da Web e se você está trabalhando sozinho ou com outros
desenvolvedores.

No entanto, às vezes os desenvolvedores se empolgam e têm tantas tags de comentários que


você não consegue ver o fluxo do código HTML. Uma página com um comentário longo depois de
cada tag pode agir como arame farpado em um campo - você fica tropeçando nele e não consegue
chegar ao seu destino. Se um grande número de comentários for necessário para uma página
complexa, junte-os em um único contêiner e os outros desenvolvedores poderão ver o código
HTML e entender como ele é usado.

Depois de fazer as alterações comentando as tags indesejadas, você as exibe no seu cliente
novamente, conforme mostrado na Figura 2-5.
38

Figura 2-5: A página com o código comentado.

Se o cliente gostar mais do original, tudo o que você precisa fazer é remover as tags
de comentário e a página ficará como antes. Você pode querer experimentar várias
aparências diferentes; Ao usar a tag de comentário, você pode alterá-la rapidamente
enquanto mantém as tags originais. Elas são apenas comentadas.

ANINHAMENTO DAS TAGS


Quando você cria uma página HTML, pode aninhar tags - é possível colocar um contêiner
HTML5 em outro contêiner. Na verdade, tenho feito isso o tempo todo. A regra é: adicionar
uma tag de finalização dentro de um contêiner antes da tag final do contêiner. Portanto, se
você estiver escrevendo uma tag no recipiente de outra tag, feche o contêiner interno antes
de fechar o contêiner externo. Veja os exemplos a seguir para ver o que quero dizer.
CAPÍTULO 2: NOÇÕES BÁSICAS SOBRE TAGS HTML5

No exemplo a seguir, a tag <h1> é fechada fora do contêiner <section>:

<section>
<h1> Esmague isso!
</section>
</h1>

Em vez disso, deve ficar assim:

<section>
<h1>Esmague isso!</h1>
</section>

Aqui, a tag <body> é fechada fora do contêiner <html> O contêiner <h3> está correto.

<html>
<body> Coisas realmente interessantes
<h3>Não se esqueça de votar!</h3>
</html>
</body>

Em vez disso, deve ficar assim:

<html>
<body> Coisas realmente interessantes 39
<h3> Não se esqueça de votar!</h3>
</body>
</html>

Aqui, a tag <header> é fechada antes da tag <nav :

<header>
<nav>
<a href=”html5.org”>HTML5</a>&nbsp; | &nbsp;
<a href=”css3.org”>CSS3</a>>&nbsp; | &nbsp;
<a href=”php.net”>PHP</a>
</header>
<footer>
<a href=”html5.org”>HTML5</a>&nbsp; | &nbsp;
<a href=”css3.org”>CSS3</a>>&nbsp; | &nbsp;
<a href=”php.net”>PHP</a>
</nav>
</footer>

Em vez disso, use dois conjuntos de container <nav> - um para o cabeçalho e outro para o rodapé:

<header>
<nav>
<a href=”html5.org”>HTML5</a>&nbsp; | &nbsp;
PARTE I: A LINGUAGEM DA WEB

<a href=”css3.org”>CSS3</a>&nbsp; | &nbsp;


<a href=”php.net”>PHP</a>
</nav>
</header>
<footer>
<nav>
<a href=”html5.org”>HTML5</a>&nbsp; | &nbsp;
<a href=”css3.org”>CSS3</a>&nbsp; | &nbsp;
<a href=”php.net”>PHP</a>
</nav>
</footer>

Às vezes, quando você testa sua página HTML5, não vê o que espera - nem mesmo
nada. A primeira coisa que você precisa verificar é o aninhamento de tags.

Caso você esteja se perguntando sobre o & nbsp; código, é um espaço sem quebra. (O ponto-
e-vírgula faz parte da tag.) Simplesmente pense nele como um espaço ao redor do caractere
de barra vertical (|) usado para separar os links. No seu navegador, você verá:

HTML5 | CSS3 | PHP

Quando você coloca seu código de navegação dentro de tags <nav>, você pode identificá-lo
facilmente como navegação. No entanto, como todas as outras tags, você precisa prestar atenção
às convenções de aninhamento usadas no HTML5.
40

PEGUE A RODA
O HTML da página da Web a seguir (TakeTheWheel.html na pasta deste capítulo em
www.wiley.com/go/smashinghtml5 contém erros que precisam ser corrigidos. Começa com
várias tags que estão vazias ou parcialmente concluídas. Você será responsável por garantir
que as tags e o texto corretos sejam adicionados onde eles precisam estar. Às vezes, você
precisa fechar um contêiner que foi aberto (<tag>) ou abrir um contêiner que tenha sido
fechado (</tag>). E certifique-se de que suas tags estejam aninhadas corretamente. (Dica: a
primeira tag não é uma tag HTML, mas aquela especial que começa com um ponto de
exclamação!)

<! >
<html lang= >
<head>
<!-- Combinação de cores
0B0B0D,29272A,A99A93,E27107,F8AC00 -->
<style type=”text/css”>
body
{
background-color:#F8AC00;
color:#29272a;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:20px;
CAPÍTULO 2: NOÇÕES BÁSICAS SOBRE TAGS HTML5

}
h1
{
color:#29272A;
font-family:”Arial Black”, Gadget, sans-serif;
}
h2
{
text-indent:10px;
color:#0B0B0D;
background-color:#E27107;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
}
header
{
text-align:center;
}
</style>
<title>==???===</title>
< >
<body>
<header>
< >Minhas coisas favoritas</h1>
</header>
<section>
<h2>Minha música favorita </h2> 41
==????==<br/>
==????==<br/>
==????==<br/>
< >Meus filmes favoritos </h2>
==????==<br/> ==????==<br/>
==????==<br/>

<h2>Meus computadores favoritos </h2>


==????==<br/> ==????==<br/>
==????==<br/>

<h2>Minha TV favorita </h2>


==????==<br/> ==????==<br/>
==????== <br/>

< >
< >
<h5>Não sou responsável pelos o meus gostos.<br/>
Pegue ou largue..< >
</footer>
</body>
</html>

Este exercício deve ajudá-lo a prestar atenção aos pequenos detalhes. De todas as
armadilhas, são as pequenas coisas que escapam do radar.
SMASHING HTML5

CAPÍTULO 3
3 TAGS DE TEXTO E
UM POUCO DE CSS3

UMA PÁGINA WEB é diferente do tipo de Folha de papel de 81⁄2 por 11 polegadas - você
página que você coloca no seu processador de está lidando com uma plataforma de
texto e começa a digitar. As páginas da Web são visualização muito mais dinâmica. Então, a
projetadas para telas de computador de algum tipo primeira coisa que você quer pensar é como sua
- seja uma grande área de trabalho, um laptop ou página vai parecer em uma tela digital.
até mesmo um dispositivo móvel. Você não está
lidando com um
PARTE I: A LINGUAGEM DA WEB

OS FUNDAMENTOS
Antes de continuarmos a lidar com texto em uma página da Web, precisamos considerar os
elementos fundamentais de uma página da Web. Eles incluem três tipos de ações:

„ Exibindo texto
„ Carregando e exibindo gráficos
„ Vinculando a outras páginas

Para exibir texto, tudo o que você precisa fazer é digitá-lo na página no contêiner <body>.
Você pode estilizá-lo com a tag <h> como você sabe dos capítulos anteriores, mas o texto
básico requer apenas que esteja no corpo de uma página.

Carregar e exibir gráficos usa a tag <img> com o seguinte formato:

<img src=”imagemNome.png”>

44 Ao longo do livro, o termo URL costuma ser usado para se referir à localização de um
arquivo, independentemente do tipo de arquivo envolvido. URL significa Uniform
Resource Locator e refere-se a um protocolo padrão para encontrar e usar diferentes
tipos de arquivos.

44 Finalmente, um link para outra página usa o seguinte formato:

<a href=”outraPágina.html”>Link abel</a>

A href refere-se à referência de hipertexto da página vinculada ou, mais simplesmente, ao


endereço dela. Como os locais de origem de uma imagem, você verá o termo URL usado para o
endereço de uma página vinculada também.

Mais uma coisa que você precisa saber antes de continuar. A declaração de tipo de
documento (<!DOCTYPE HTML>) na primeira linha é importante - nunca a deixe de fora.
No entanto, uma linha igualmente importante é declarar a codificação de caracteres. Isso é
usado para informar ao navegador da Web que conjunto de caracteres de letras deve ser
usado, como o alfabeto de A a Z, caracteres hebraicos, japonês, Cryllic ou algum outro
conjunto. Você pode fazer isso de várias maneiras, mas este livro usa o seguinte código:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

Você sempre deve especificar a codificação de caracteres. Embora o uso da tag <meta>
seja um pouco longo, você pode simplesmente recortar e colar em todas as suas páginas da
Web. Se você não fizer isso, poderá encontrar vulnerabilidades de segurança e ninguém
quer isso.
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

Lançando uma página da Web juntos funciona bem, mas pode deixar muito a desejar em
termos do que o usuário vê e se ela quer visitar o site novamente. Vejamos uma página da
Web sem estrutura, mas com os elementos fundamentais de uma página da Web:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title> Fundamentos</title>
</head>
<body>
Isso é texto. Você não precisa de uma tag para Texto antigo simples (POT).
<a href=”outraPágina.html”> Clique aqui para outra página</a>
<img src=”logo.png”>
</body>
</html>

Como você pode ver na Figura 3-1, tudo está confuso. A imagem aparece bem no meio do
link (texto sublinhado em azul), a imagem aparece bem no meio da página e, geralmente,
não faz muito sentido.

45

Figura 3-1: Os elementos da Web mais básicos.

Quando você está organizando uma página da Web, os links devem ser organizados em um
sistema de navegação que seja fácil para aqueles que visualizam sua página da Web. Na página
mostrada na Figura 3-1, o link é dividido pelo gráfico e parece fazer parte do texto e não parte de
um sistema de navegação.

UM POUCO MAIS DE ORGANIZAÇÃO


Uma das convenções básicas do Web design é colocar o logotipo no canto superior
esquerdo da página. Da mesma forma, as páginas da Web colocam links organizados em
um sistema coerente de navegação. Ao adicionar mais duas tags, você pode percorrer um
longo caminho para organizar sua página:

„ <br>: Gera uma quebra de linha de espaço único


„ <wbr>: gera uma oportunidade de quebra de linha
PARTE I: A LINGUAGEM DA WEB

Uma quebra de linha (<br>) força uma quebra nas linhas de texto. Você pode pensar nisso como
um único espaço entre as linhas, ou se você é da velha escola, um retorno de carro. O HTML5
adicionou algo novo chamado de oportunidade de quebra de linha. Às vezes você terá uma
palavra muito longa, especialmente em URLs e endereços de e-mail. O elemento wbr não força
uma quebra de linha, mas você pode colocar a tag <wbr> onde deseja que uma palavra seja
quebrada caso a página seja compactada. Essa consideração é especialmente importante para
dispositivos móveis porque eles têm telas pequenas. Por exemplo, suponha que você tenha uma
URL muito longa sendo exibida como uma descrição sem vinculação,

www.eatatjoesfinerestaurant.com

Se o nome do link não estiver dividido e se a página for compactada, você verá uma grande
lacuna no texto ou a palavra quebrada onde você não deseja que ela seja. A tag <wbr> ajuda
você a manter seu texto quebrado onde quiser. Considere o seguinte script (BasicBreaks.html
na pasta deste capítulo em www.wiley.com/go/smashinghtml5), que usa as duas tags de
quebra de linha:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Adicionando quebra de linha e quebra de linha de oportunidades</title>
</head>
<body>
46 <img src=”logo.png”><br>

Isso é texto. Você não precisa de uma tag para Texto antigo simples (POT).<br> <br>

Ele disse: “Às vezes você tem palavras extremamente longas e quer ter certeza de que elas quebram em lugares
apropriados. Por exemplo, você tem um nome longo para uma URL como
www.eat<wbr>at<wbr>joes<wbr>fine<wbr>restaurante<wbr>.com , e se tiver que quebrar, você quer que a quebra
apareça em um lugar particular.”<br><br>
Ele disse: “Às vezes você tem palavras extremamente longas e quer ter certeza de que elas quebram em lugares
apropriados. Por exemplo, você tem um nome longo para um URL como www.eatatjoesfinerestaurant.com e, se tiver
que quebrar, deseja que a quebra apareça em um determinado lugar.”<br><br>

<a href=”outraPágina.html”> Clique aqui para outra página </a> </body>

</html>

Ao adicionar as duas tags de quebra de linha, a página parece muito melhor. O parágrafo
que não usa a tag <wbr> tem uma grande lacuna em que a URL longa não foi dividida em
pontos de quebra sensíveis. A Figura 3-2 mostra como a página aparece agora.

A Embora ainda não seja perfeito, é muito melhor do que o original, embora mais dois
parágrafos tenham sido adicionados. O gráfico está no canto superior esquerdo (como a
maioria dos logotipos são), os parágrafos são separados por quebras de linha e no primeiro
parágrafo usando o URL longo, as quebras são onde a marca <wbr> é especificada.
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

Figura 3-2: Adicionando quebras de linha.


47

PENSANDO SOBRE A ESTRUTURA


Neste ponto, mais pensamento deve entrar em estrutura. Com a capacidade de adicionar
texto, gráficos e links, a página pode ter muito mais recursos e muito mais conteúdo.
Portanto, você deve começar a pensar em coisas como cabeçalhos, navegação e
posicionamento além do logotipo no canto superior esquerdo. Comece com um esboço
simples. Use um pedaço de papel para anotar uma ideia de uma página da Web. (Use papel
e não suas ferramentas gráficas ainda). A Figura 3-3 mostra um exemplo:

Logotipo

Navegação
xxx xxx xxx
Gráfico
xxx Título

Texto

xxx xxx xxx Navegação

Figura 3-3: Esboce uma estrutura para o seu site.


PARTE I: A LINGUAGEM DA WEB

Dadas as tags discutidas até agora, você será capaz de criar uma página baseada no sketch?
O único atributo que falta é um para envolver o texto em torno da imagem. O atributo de
alinhamento do elemento img fará isso. Nesse caso, a imagem estará à esquerda e o texto à
direita, então a linha a seguir fará o seguinte:

<img src=”criança.png” alt=”criança” align=”left”>

Você deve ter notado que o atributo alt também foi incluído. Esse atributo permite que os
usuários saibam o que esperar se a imagem demorar um pouco para ser carregada.

Portanto, agora, com apenas algumas tags e um atributo adicionado, este próximo script faz
um bom trabalho ao criar a página com a estrutura no esboço da Figura 3-3.

Como você verá no código a seguir (Sketch2Web.html na pasta deste capítulo em www.
wiley.com/go/smashinghtml5), , usei um sinal de sustenido (#)em vez de um URL real nos
links de navegação. O sinal de libra funciona como um espaço reservado enquanto
trabalhamos na estrutura; funciona como um URL real, exceto que ele não vai a lugar
nenhum ou causa uma mensagem de erro.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title> Esboço para a Web</title>
48 </head>
<body>
<img src=”logo.png” alt=”logo”><br>
<a href=”#”>Brinquedos</a> &nbsp;|&nbsp;<a href=”#”> Roupas</a>&nbsp;|&nbsp;
<a href=”#”> Esportes</a> <br>
<br>
Um bom lugar para crianças <br>
<br>

<img src=”criança.png” alt=”criança” align=”left”> As crianças são um negócio sério. Eles precisam de brinquedos que
sejam seguros e educativos. Os brinquedos precisam ser divertidos e permitir que as mentes das crianças criem além de
qualquer funcionalidade que o brinquedo tenha. Não há razão para que eles não possam ser seguros e divertidos. As
crianças precisam de muitas roupas porque crescem tão rápido. E eles precisam de esportes para compensar a obesidade
infantil e as doenças associadas à obesidade.<br>
<br>
<a href=”#”> Brinquedos </a> &nbsp;|&nbsp;<a href=”#”> Roupas </a>&nbsp;|&nbsp;<a
href=”#”> Esportes </a>
</body>
</html>

Observe que não usamos nenhum dos elementos H apresentados nos dois capítulos
anteriores. Isso é porque eu os incluo na próxima seção e dou uma ideia melhor do valor
deles. A Figura 3-4 mostra como a página chegou perto do esboço na Figura 3-3.
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

49
Figura 3-4: Uma página com uma estrutura básica.
© David Sanders

Agora, a página da Web mostrada na Figura 3-4 tem mais estrutura do que qualquer um dos
exemplos anteriores. As barras de navegação na parte superior e inferior são úteis para o usuário,
mas talvez parecessem mais centralizadas na página. Talvez a barra de navegação superior esteja
no topo da página no centro, ao lado do logotipo. Além disso, o texto fica preso ao lado da
imagem e pode usar algum espaço. Naturalmente, o cabeçalho deve estar em um estilo, peso,
tamanho e fonte diferentes. Além disso, é muito chato - especialmente porque é para crianças. No
entanto, como a estrutura está chegando, você pode abordar esses outros detalhes quando
aprender a usar mais ferramentas de estilo.

ADICIONANDO MAIS ESTRUTURA HTML5


Na seção anterior, você aprendeu sobre o elemento wbr que é novo no HTML5, e esta seção
examina mais de perto a tag familiar <h..>. E algumas tags relacionadas para estruturar o
texto. Além disso, você viu como começar com um esboço desenhado à mão do que deseja
e implementá-lo em um script HTML5. Mover-se de um esboço bastante concreto para um
esboço de bloco mais geral ajuda a entender como o HTML5 é organizado em blocos. O
primeiro tipo de bloco examinado é o bloco de texto - na verdade, nós já começamos, nos
capítulos 1 e 2, discutindo <h1>, <h2>, e outros elementos h. A Figura 3-5 ilustra a
organização do bloco.
PARTE I: A LINGUAGEM DA WEB

Figura 3-5: Organização do bloco de texto.


Em termos de organizar sua página, o layout para diferentes níveis de elementos h é a tag
HTML5 <hgroup>. Por exemplo, dê uma olhada na seguinte página da Web
(HelementOrg.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) de
Wittgenstein (que parecia escrever usando tags h em 1918 quando terminou de escrever
50 Tratado da Lógica Filosófica):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title> Tratado da
Lógica Filosófica </title>
</head>
<body>

<h1> Tratado da Lógica Filosófica </h1>


<h1> por Ludwig Wittgenstein </h1>
<hgroup>
<h2>1 O mundo é tudo o que acontece.</h2>
<h3>1.1 O mundo é a totalidade dos fatos, não das coisas.</h3>
<h4>1.11 O mundo é determinado pelos fatos, e por serem todos os fatos.</ h4>

<h4>1.12 Para a totalidade dos fatos determina o que é o caso, e também o que não é o caso.</h4>

<h4>1.13 Os fatos no espaço lógico são o mundo.</h4>


<h3>1.2 O mundo se divide em fatos.</h3>
<h4>1.21 Cada item pode ser o caso ou não, enquanto todo o restante permanece o mesmo.</h4>

</hgroup>
</body>
</html>
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

Se olharmos para a página da Web, poderemos ver onde os diferentes elementos h dão
tamanhos diferentes às partes, mas não vemos os recortes que Wittgenstein usou em seus
escritos originais. A Figura 3-6 mostra a página da Web em um telefone celular - o que
quer que você pense em Wittenstein, seu estilo certamente funciona bem para telas móveis.

51

Figura 3-6: Formato de estrutura de tópicos usando tags <h> no iPhone.

Se você olhar para o Wittgenstein original, verá que o estilo de escrita dele usou um
contorno recuado que apareceu da seguinte maneira:

1 O mundo é tudo o que é o caso.


1.1 O mundo é a totalidade dos fatos, não das coisas.
1.11 O mundo é determinado pelos fatos e por serem todos os fatos.
1.12 Para a totalidade dos fatos determina o que é o caso, e também o que
não é o caso.

Podemos corrigir isso se quisermos adicionar recuos às tags <h..> . Podemos fazer isso
adicionando margens usando o CSS3, como você verá na próxima seção. No entanto, a
finalidade do elemento h e do<hgroup> não é definir recuos, mas ajudar com contornos
mais gerais. A tag <hgroup> define a tag de nível mais alto <h..> no contêiner hgroup como
o elemento de contorno. Por exemplo, uma vez que Wittenstein escreveu Tratado da
Lógica Filosófica totalmente em linhas gerais, todo o seu trabalho usando o elemento
hgroup seria exatamente como o esboço em seu Abstract real para o trabalho.
PARTE I: A LINGUAGEM DA WEB

1 O mundo é tudo o que é o caso.


2 Qual é o caso - um fato - é a existência de estados de coisas.
3 Uma imagem lógica dos fatos é um pensamento.
4 Um pensamento é uma proposição com um sentido.
5 Uma proposição é uma função de verdade das proposições elementares. (Uma
proposta elementar é uma função de verdade de si mesma.)
6 A forma geral de uma função de verdade é [p, E, N (E)]. Esta é a forma geral
de uma proposição.
7 Do que não podemos falar, devemos passar em silêncio.

O elemento hgroup está vinculado ao algoritmo de estrutura de tópicos em HTML5 e,


embora seja improvável que você o use para escritores como Wittenstein, é útil ajudar você
a pensar em sua página em termos de estrutura em uma página HTML5. Uma maneira de
pensar sobre a tag <hgroup> é como uma máscara (ou até mesmo um dispositivo de
camuflagem romulano) sobre outros elementos h abaixo do elemento de nível mais alto no
contêiner de hgroup . Em nosso exemplo, h3 e h4 são mascarados e somente o elemento h2 é
reconhecido como parte do contorno.

ADICIONANDO ESTILO A TEXTO COM CSS3


Ao longo do livro, a referência a Folhas de Estilo em Cascata será para CSS3. Isso ocorre
52 porque o HTML5 e o CSS3 estão emparelhados em muitos aspectos, mas, como outros
elementos que discuto neste livro, os continuados de versões anteriores foram incorporados à
versão mais recente de HTML e CSS. Nós realmente temos um mix de novos e antigos em
CSS3, assim como em HTML5. Portanto, se você estiver familiarizado com versões mais
antigas do CSS e vir as mesmas propriedades nas referências do CSS3, basta tratá-las como um
recurso contínuo.

ESTILIZANDO ELEMENTOS HTML5 COM PROPRIEDADES CSS3


Nos capítulos 1 e 2, você viu exemplos de CSS3, mas não deu explicações sobre o que
estava acontecendo para adicionar um novo estilo a um elemento existente. Aqui, o foco
está em adicionar estilo aos elementos h. Nos próximos três capítulos, você verá muito
mais aspectos do uso do CSS3. Aqui, eu me concentro no básico de incorporar o CSS3 no
seu HTML5.

Todas as folhas de estilo podem ser adicionadas de três maneiras:

Você pode usar a tag <style> para definir as propriedades dos elementos na página HTML5.
Você pode usar folhas de estilo externas, que são arquivos de texto nos quais você
armazena um estilo que deseja reutilizar.

A maioria dos desenvolvedores e designers profissionais prefere as folhas de estilo externas


CSS3, porque aperfeiçoar o estilo desejado exige muito trabalho. Quando você quiser fazer
uma alteração no design de um site, poderá fazer alterações em muitas páginas que usam
uma folha de estilos externa, apenas alterando a folha de estilos. É mais eficiente do que
alterar os atributos <style> em cada página da Web individual.
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

Você também pode adicionar estilos sem folhas de estilo usando estilos embutidos. Um
estilo inline é como uma técnica “Quebrar o vidro em caso de emergência!”. Uma página de
boa aparência tem um plano desenvolvido em uma folha de estilo. No entanto, às vezes,
você se depara com um caso em que precisa de algum recurso adicionado e, em vez de
alterar a folha de estilos, basta inseri-lo com uma tag.

Folhas de estilo incorporadas


Uma folha de estilo incorporada é simplesmente adicionar a folha de estilo diretamente no
script HTML5. No <head> do programa, adicione a folha de estilo usando o contêiner
<style> . Coloque o elemento que você deseja estilizar no contêiner de estilo e, em
seguida, adicione valores à propriedade a ser estilizada. A figura 3-7 mostra o formato
geral.
Digite para definir como folha de estilo
Tag de estilo aberto

Nome do elemento (tag)

Nota chaves Nota ponto e vírgula

Fechar tag de estilo O valor depende do tipo de propriedade 53

Propriedade depende do tipo de elemento

Figura 3-7: Uma folha de estilo incorporada.

Cada elemento possui um conjunto exclusivo de propriedades e cada propriedade possui


valores que podem ser atribuídos a ele. Quando você altera o valor da propriedade, esse valor
aparece no texto dentro do contêiner do elemento. Portanto, se você alterar a cor do texto
para vermelho, todo o texto dentro do contêiner do elemento será vermelho. O script a seguir
(CSS3fonts.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) fornece um
exemplo.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <style
type=”text/css”>
body {
background-color:#fbf7e4;
font-family:Verdana, Geneva, sans-serif;
margin-left:20px;
color:#8e001c;
}
h1 {
background-color:#8E001C;
color:#e7e8d1;
PARTE I: A LINGUAGEM DA WEB

font-family:”Arial Black”, Gadget, sans-serif;


text-align:center;
}
h2 {
background-color:#424242;
color:#d3ceaa;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
margin-left:5px;
}
</style>
<title>Folha de estilo incorporada em CSS3</title>
</head>
<body>
<h1>Este é o Big Head</h1>
<h2>&nbsp; Aqui está o segundo Head</h2>
O texto do corpo é estilizado para um pouco de margem de lucro e capta a cor do corpo junto com sua fonte. Observe
que o fundo das cabeças se estende por toda a página. Observe também que um espaço (& nbsp;) dá ao texto h2 um
recuo para que ele permaneça “dentro” do plano de fundo. Isso não é um problema com a cabeça h1 porque ela está
centralizada.

</body>
</html>

A Figura 3-8 mostra como a página estilizada parece.


54

Figura 3-8: Texto estilizado com CSS3.

Você deve estar ciente de que, quando você usa folhas de estilo, precisa prestar atenção aos
pequenos detalhes - como adicionar duas chaves, separar a propriedade dos valores por dois
pontos e terminar cada valor de propriedade com um ponto-e-vírgula. Se a sua folha de estilo
CSS3 não funcionar como você acha que deveria, verifique essas pequenas armadilhas!

Ao usar cores de fundo, o plano de fundo geralmente se estende por toda a página. Certos
elementos inline, como <span> , podem ser usados para conter o fundo do texto afetado.
Com as cores de plano de fundo nos cabeçalhos justificados à esquerda ou à direita, adicione
um espaço (&nbsp;) para não sangrar na cor do plano de fundo da página..
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

Folhas de estilo externas


Com todos os diferentes tipos de combinações de estilo que você pode ter que considerar -
incluindo formatos diferentes para desktops, laptops e pequenas telas móveis - o trabalho
envolvido na criação de uma boa folha de estilo ou conjunto de folhas de estilo pode ser
considerável. Salvando seu trabalho CSS3 em um arquivo de texto, você pode reutilizar sua folha
de estilo quantas vezes quiser. Além disso, você pode copiar seu CSS incorporado e colá-lo
facilmente em um arquivo de texto e salvá-lo como um arquivo .css.

Por exemplo, vamos pegar um esquema de cores com um conjunto de cores que um cliente
corporativo, o Mighty Smite Web Development, descreveu como a paleta corporativa. (Isso
significa que você pode usar somente o conjunto de cores fornecido.) Você começa com as
seguintes cores de empresa:

#3C371E, #8C5F26, #BCA55F, #F2CC6E, #F26205

A cor de fundo deve ser #F2CC6E. Você não precisa saber qual é a cor. Só precisa saber que a
empresa decidiu que vai ser a cor de fundo. Você disse que os designers podem descobrir o resto.

Além disso, você sabe que eles gostariam de ter uma versão com bom aspecto em um telefone
e outra diferente que pareça boa em um computador. Então, isso significa que você precisará
de duas folhas de estilo CSS3 diferentes. Mais tarde, você se preocupará em saber como o
navegador saberá se o usuário está visualizando a partir de uma área de trabalho com uma tela
do tamanho de um cinema drive-in ou visualizando a partir de um telefone Droid.
55
Tudo o que é necessário é a seguinte tag:

<link rel=”stylesheet” type=”text/css” href=”mightySmiteSmall.css” />

Essa tag está no contêiner <head> , em que a tag <style> seguiu o código CSS3. Agora o código
CSS3 entra em um arquivo separado. Observe que a tag <link> contém um atributo href atribuído
ao valor mightySmiteSmall.css. Esse é o nome do arquivo CSS3 na pasta deste capítulo em
www.wiley.com/go/smashinghtml5. O Small indica que foi desenvolvido para dispositivos móveis.
Outro arquivo CSS3 será criado, chamado mightySmiteLarge.css, para dispositivos não móveis.

Para criar um arquivo CSS3, tudo o que você precisa fazer é inserir o código CSS3 em um editor
de texto ou aplicativo de desenvolvimento da Web menos as tags <style> . O seguinte mostra o
exemplo a ser usado aqui:

@charset “UTF-8”;
/* CSS Document */
/*3C371E,8C5F26,BCA55F,F2CC6E,F26205 */
body
{
background-color:#F2CC6E;
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
color:#8C5F26;
font-size:11px;
max-width:480px;
PARTE I: A LINGUAGEM DA WEB

}
h1
{
color:#BCA55F;
background-color:#3C371E;
font-family:”Arial Black”, Gadget, sans-serif;
text-align:center;
}
h2
{
color:#F26205;
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif
}
h3
{
color:#3C371E;
font-family:Tahoma, Geneva, sans-serif;
}

A linha superior permite que o navegador saiba que é um conjunto de caracteres UTF-8 e as
segundas duas linhas são linhas de comentário. Eles são diferentes das linhas de comentário
no HTML5, mas funcionam da mesma maneira. A segunda linha de comentário é uma
maneira prática de acompanhar a paleta de cores e economizar tempo na configuração da
folha de estilo.

56 Para testar essa versão para celular do código CSS3, o seguinte arquivo HTML5 (ExternalSmall.
html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) é usado:

<!DOCTYPE HTML>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mightySmiteSmall.css” /> <meta http-
equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title> Folha de Teste do Sofware
Mighty Smite</title> </head>

<body>
<h1>Conglomerado de Software Mighty Smite</h1>
<h2>Esta é um head h2</h2>
<h3>Aqui está um head h3</h3>
Aquele que ama ou exerce ou deseja a dor, pode ocasionalmente adquirir algum prazer na labuta. Para dar um exemplo
trivial, qual de nós se submete a laborioso exercício físico, exceto para obter alguma vantagem com isso.
Desmoralizado pelos encantos do prazer, percebe que a dor não resulta em prazer algum. Está tão cego pelo desejo que
não pode prever quem não cumprirá seu dever por fraqueza de vontade.

</body>
</html>

Todos os estilos no arquivo CSS3 são usados para testar sua aparência, e o texto do corpo
começando com Lorem ipsum é um texto de preenchimento, usado para ter uma ideia de
como é um bloco de texto. (Ele é usado desde o século 16, então deve ser bom.)
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

Ao configurar o arquivo CSS3, a única configuração que é especificamente segmentada para


dispositivos móveis é a configuração de width no elemento body. Está definido para 480px porque
essa é a largura do iPhone usada nos testes. No entanto, dependendo de como os usuários seguram
seus dispositivos móveis, eles obterão resultados diferentes. As Figuras 3-9 e 3-10 mostram como a
página fica quando o telefone é mantido em ângulos diferentes.

57

Figura 3-9: Estilo vertical definido para o dispositivo móvel.

Figura 3-10: Estilo definido para dispositivo móvel horizontal.


PARTE I: A LINGUAGEM DA WEB

Densidade de pixels diferente


Quando você cria páginas da Web para saída que variam de grandes áreas de trabalho a
dispositivos móveis, é preciso considerar mais do que apenas o número de pixels nos planos
vertical e horizontal. No exemplo de folha de estilo externa CSS3, a largura é definida para 480
com o código max-width: 480px; para um iPhone com resolução horizontal de 480 pixels. No
entanto, quando você executa o aplicativo em seu dispositivo móvel, o texto pode ficar muito
grande ou muito pequeno. O que está acontecendo?
Nós tendemos a pensar em resolução de tela em termos do número de pixels - quanto mais
pixels, maior a resolução. Portanto, se você definir sua tela para 1680 x 1050, ela terá uma
resolução maior do que se eu configurá-la para 1024 x 768. No entanto, a resolução realmente
depende do número de pixels em relação ao tamanho da área de exibição. Mais importante que o
número de pixels é o número de pixels recheados em sua área de visualização ou pixels por
polegada (PPI) - densidade de pixels. Se você desenvolver sua página da Web em uma tela de
computador típica, a densidade de pixels será de aproximadamente 100. No entanto, é provável
que seu dispositivo móvel tenha uma densidade de pixels muito maior. Por exemplo, meu iPhone
3GS tem uma densidade de pixels de 132 e uma resolução de 480 x 320. Se eu fizer a atualização
para um iPhone 4, minha densidade de pixels será 326 e a resolução será 960 x 640. No entanto,
os telefones têm Área de visualização de 31/2 polegadas. A resolução do iPhone 4 é o dobro do
iPhone 3GS, e o seu ppi é cerca de 21/2 vezes maior. Para a minha página da Web, isso significa
que uma configuração de largura de 480 aparecerá como sendo apenas metade do iPhone 4,
apesar de preencher a largura dos modelos do iPhone 3GS.
58
No entanto, como faço meu desenvolvimento em um computador com um ppi de 99 em uma
tela de 20 polegadas, o melhor que posso obter é uma estimativa de como ele será em
qualquer dispositivo móvel. Posso estimar a aparência de uma página da Web em diferentes
dispositivos móveis, alterando o tamanho da janela do navegador, mas, em última análise,
você precisa realmente ver a aparência da sua página da Web HTML5 no dispositivo móvel
de destino.

Uma característica única de muitos dispositivos móveis é que eles permitem que páginas da Web sejam
visualizadas de diferentes aspectos - vertical ou horizontal. Então, quando estou preparando um arquivo
CSS3 para um dispositivo móvel, tenho a tendência de definir a largura para a horizontal. No entanto, você
descobrirá rapidamente que diferentes navegadores para celular funcionam de maneira diferente. No
momento em que este texto foi escrito, o navegador Apple Safari no iPhone exibia a página em uma
pequena página ilegível que precisava ser expandida, mas o navegador Opera Mini (como mostrado nas
Figuras 3-9 e 3-10) no mesmo O iPhone, usando a mesma tela de tamanho, exibia a página imediatamente
em um tamanho de visualização ideal, seja visto no horizonte ou verticalmente.

Estilo em linha
Uma terceira maneira de adicionar o CSS3 ao seu documento é simplesmente adicionar um atributo de style
a um elemento que redefina o conteúdo no contêiner do elemento. Por exemplo, o código a seguir
(InlineCSS3.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) tem alterações de estilo no
contêiner <div> e no segundo contêiner <p>:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

<title>Inline CSS3</title>
</head>
<body>
<div style=”font-family:Verdana, Geneva, sans-serif;font-size:24px;background-color:yellow;color:navy;”>
Isso é importante!</div>
<p> Mas isso... não tanto </p>
<p style=”font-size:10px;font-family:sans-serif;”> E isso você pode ignorar completamente ....
</body>
</html>

A Figura 3-11 mostra o que você vê quando testa a página da Web em um navegador.
Tenha em mente que a segunda linha não tem nenhum estilo adicionado.

59
Figura 3-11: Inline CSS3.

O uso de CSS3 inline pode ser inestimável quando algum recurso do arquivo externo CSS3 não
tem um estilo para algo em sua página da Web que precisa estar lá. Geralmente, inline é uma
daquelas ferramentas que você deseja usar com moderação e bom senso. Isso é especialmente
verdadeiro quando se lida com outros desenvolvedores e designers que estão trabalhando em uma
folha de estilo comum.

CRIANDO CLASSES E IDS CSS3


Classes e IDs CSS3 são formas de estender um estilo para qualquer elemento. Por exemplo,
suponha que você tenha um recurso que deseja adicionar apenas a alguns itens, como um realce
amarelo. Se você definir a cor de fundo de um elemento div ou a p como amarelo, todo o texto
em qualquer um desses contêineres será amarelo vivo - não o que você deseja. Por outro lado, se
você tiver uma classe que defina um plano de fundo amarelo, tudo o que você precisa fazer é
atribuir essa classe a um elemento para aliviá-la.

Classes CSS3
Você cria classes de estilo de maneira quase idêntica à dos estilos de elemento. As
definições de ponto (.) Usadas para criar uma classe em CSS3 são rótulos criados em
vez de usar nomes de elementos. A Figura 3-12 mostra como criar uma definição de
classe CSS3.
PARTE I: A LINGUAGEM DA WEB

Nome da classe

ponto

Figura 3-12: Criando definição de classe.

Como você pode ver, a definição do ponto vai para onde o nome do elemento vai. O resto é
idêntico às definições CSS3 para elementos. No entanto, implementar um estilo de classe é
um pouco diferente, pois pode ser usado em praticamente qualquer tag de elemento.

Para ver como podemos usar um pouco de texto realçado, um elemento inline muito útil é
span. A tag <span> pode ser adicionada no meio de um elemento de bloco e só altera essa
parte do conteúdo no contêiner de span sem alterar o restante do bloco. Para adicionar uma
classe a um elemento, use o seguinte formato:

<element class=”myClass”>

Observe que o nome da classe não inclui o "ponto" da definição de ponto. O ponto é usado
somente na definição de estilo para permitir que o analisador saiba que a palavra é uma
classe e não um elemento. O seguinte programa (SpanClass.html na pasta deste capítulo em
60 www.wiley.com/go/smashinghtml5) Você pode usar um exemplo de como usar uma classe
com o tag <span>.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
background-color:#F93;
}
.highlight {
background-color:yellow;
}
div {
font-family:”Comic Sans MS”, cursive;
font-size:18px;
}
h1 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#930;
text-align:center;
font-size:20px;
}
</style>
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Halloween


Highlight</title> </head>

<body>
<h1> Festa de Halloween!</h1>
<div> Você está convidado para uma festa de Halloween em <span class=”highlight”> Sábado, 29 de outubro</span>.
Fantasias são <span class=”highlight”><i>de rigueur</i></span>.</ div>

</body>
</html>

Ao testar o programa, você verá que as duas partes do texto nos contêineres <span> são
afetadas. A Figura 3-13 mostra como eles são exibidos em um navegador Google Chrome
em um Mac (superior) e em um navegador Opera Mini em um iPhone (parte inferior).

Celular

61

Computador desktop

Figura 3-13: Estilo definido pela classe no contêiner <span> no computador desktop (parte
superior) e no dispositivo móvel (parte inferior).

Ambos os displays mostram claramente que a classe CSS3 chamada highlight está
funcionando bem. No entanto, o navegador Opera Mini não exibe as fontes definidas nem as
palavras em itálico. (O navegador Safari exibe as palavras em itálico, mas não as fontes
definidas).
PARTE I: A LINGUAGEM DA WEB

IDs CSS3
Um ID CSS3 é configurado quase exatamente como uma classe, exceto pelo fato de usar um
sinal de sustenido (#) em vez de um ponto (.) na definição. Além disso, ao atribuir um ID, você
usa o ID em vez da classe para especificar qual ID usar com um elemento. Você ainda pode usar
IDs e classes com o mesmo elemento. A tag a seguir está perfeitamente correta:

<p ID=”this” class=”that”>

Ambos podem selecionar estilos e o ID fornece um ID exclusivo para o parágrafo.

O ID tem algumas diferenças importantes de uma classe. Tanto uma classe quanto um ID
podem ser usados como seletores de folha de estilo. No entanto, um ID possui algumas outras
limitações e recursos:

„ Um ID pode ser usado apenas uma vez em um documento.


„ Um ID pode servir como uma âncora (ver Capítulo 7).
„ Um ID pode atuar como referência de script. Isso é importante para o JavaScript.
„ Um ID pode ser usado como um nome em um elemento de objeto declarado - mais coisas
do JavaScript.
„ Um ID pode ser usado por agentes para processar informações na tradução de um
documento HTML.
62
Destes recursos, você usará apenas os dois primeiros até decidir incorporar JavaScript e outros
idiomas ao seu currículo. No entanto, se você prestar atenção a essas diferenças, suas páginas da
Web não terão problemas mais tarde (e outras pessoas pensarão que você é um profissional). O
exemplo a seguir (IDwork.html na pasta deste capítulo em www.wiley.com/go
smashinghtml5) mostra um uso do ID com CSS3:

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
#littleHead {
font-family:Verdana, Geneva, sans-serif;
background-color:#9FC;
font-size:16px;
}
#javascript {
/* red */
color:#cc0000;
}
#php {
/* azul */
color:#009;
}
#actionscript {
/* verde */
color:#063;
}
CAPÍTULO 3: TAGS DE TEXTO E UM POUCO DE CSS3

</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title> Usando IDs </title>
</head>
<body>
<div id=”littleHead”> Tudo o que você sempre quis <br>
saber sobre variáveis:</div>
<p id=”javascript”> Variáveis JavaScript não precisam receber um tipo de dados.</p>
<p id=”php”> Variáveis PHP podem ser empurradas para um tipo de dados com dicas de tipo.</p>
<p id=”actionscript”> As variáveis do ActionScript devem receber um tipo de dados.</p>
</body>
</html>

Ao olhar para esse código, você deve ter se perguntado quais são as marcas de asterisco de
barra (/ * ... * /). Muito simplesmente, eles são código de comentário para CSS3. Dentro de um
contêiner <style> e em folhas de estilo externas, elas funcionam exatamente como as marcas de
comentário <!-- --> no HTML5. A Figura 3-14 mostra o que você verá ao testá-lo.

63

Figura 3-14: IDs em uma página da web.

Se você tiver uma longa página da Web com discussões sobre JavaScript, PHP e ActionScript, o
usuário pode ter que rolar para baixo para encontrar o tópico que deseja. Usando IDs, você pode
escrever o URL para incluir o parágrafo exato que o usuário está tentando encontrar. Por
exemplo, o seguinte URL irá diretamente para o parágrafo que abrange o PHP:
www.smashingHTML5.com/myIDs#php. O #php adicionado chama o parágrafo específico com
o ID do php.

PEGUE A RODA
Este capítulo cobriu muito material e você vai querer ver o que pode fazer com ele. Aqui estão
dois desafios:

„ Você pode projetar melhor que isso! Depois de iniciar uma página da Web usando
diferentes elementos h, a página que resultou no que você vê na Figura 3-4 ainda precisa de
ajuda. Para uma página infantil, ela não é muito colorida e a fonte é chata. Além disso, o
texto está ao lado da imagem. Usando o CSS3, veja se você pode melhorar.
PARTE I: A LINGUAGEM DA WEB

„ Ajude o pobre Wittenstein! Depois de evitar balas na Primeira Guerra Mundial


enquanto preparamos o Tractatus Logico-Philosophicus, nossa página na Figura 3-6
mostra o trabalho de Wittenstein sem os travessões! No entanto, usando CSS3 e a
propriedade margin-left , veja se você pode corrigir esses elementos h para que todos os
elementos estejam lá. A propósito, se você quiser todas as 29 páginas do Tracta-tus
Logico-Philosophicus, você pode baixá-lo gratuitamente em http://filepedia.org/ tractatus-
logico-philosophicus.

Divirta-se com isso e veja a flexibilidade que o CSS3 oferece.

64
SMASHING HTML5

CAPÍTULO 4
4 TRABALHANDO
. COM VALORES
DE CORES

ATÉ ESTE ponto, você já viu vários exemplos de nomes de cores são usados, mas além das cores
uso de códigos de cores, mas, a menos que você básicas, você precisa entender como as cores são
entenda o que está procurando, é melhor analisar o construídas no CSS3. Ao fazer isso, você tem
código enigma. Em alguns exemplos, acesso a milhões de cores em vez de um punhado.
PARTE I: A LINGUAGEM DA WEB

ENTENDENDO A COR RGB


Se você já misturou cores em qualquer coisa, desde pinturas a dedo até um conjunto de
aquarela, você tem uma noção do que acontece quando você mistura cores. Para telas de
computador, as luzes vermelha, verde e azul são misturadas para gerar cores diferentes. Por
exemplo, se você misturar quantidades iguais de vermelho e verde, ficará amarelo.

Para misturar cores para páginas da Web, valores diferentes são misturados usando
números inteiros, porcentagens e números hexadecimais. O CSS3 também tem um
número limitado de cores nomeadas disponíveis que podem ajudar na hora de descobrir os
outros métodos de mistura de cores. O HTML5 e o CSS3 têm alguns elementos muito
sofisticados, como a tela, que podem fazer mais com cores e desenhos do que era possível
em versões anteriores do HTML. Esses elementos avançados exigem um pouco de
JavaScript, e você os encontrará discutidos em detalhes no Capítulo 13. Por enquanto,
começaremos com o básico.

USANDO NOMES
Uma das experiências mais estranhas ao trabalhar com HTML5 e CSS3 é o conjunto de
nomes usado com cores. Na raiz estão as 16 cores padrão mostradas na Tabela 4.1.

Tabela 4.1 Nomes de cores padrão

Agua Preto Azul Fúcsia

66 Cinza Verde Lima Marrom

Marinha Oliva Roxa Vermelho

Prata Cerceta Branco Amarelo

Usando o HTML5 que você aprendeu até agora, você pode criar facilmente um gráfico
mostrando todas as cores. (Na seção “Take the Wheel” no final deste capítulo, você vai
descobrir como recriar a tabela.) A Figura 4-1 mostra como eles se parecem em uma página da
Web em um dispositivo móvel.

Figura 4-1: As cores padrão do CSS3 em uma página da Web.

A partir dessa base-raiz, você pode incluir outros 131 nomes que parecem não ter rima ou razão
em termos de porque eles foram selecionados. Eles fazem parte de um conjunto criado nos anos
80, chamado X11. Eles foram adotados nos primeiros navegadores e estão conosco desde então.
Na documentação oficial do W3C, eles estão listados em Scalable Vector Graphics (SVG) e
todos os
CAPÍTULO 4: TRABALHANDO COM VALORES DE CORES

nomes foram adotados a partir do X11 original. (Veja www.w3.org/TR/SVG/types.


html#ColorKeywords).

A razão pela qual todos os nomes não foram listados aqui é porque designers e
desenvolvedores geralmente não os usam. Para os designers, os nomes 131 não apenas
limitam severamente sua paleta, mas os selecionados são loucos! Cores como papayawhip e
mistyrose dificilmente são nomes padrão para artistas. Da mesma forma, para os
desenvolvedores, os valores usados não correspondem a nenhum conjunto matemático,
como as cores antigas seguras para a Web, que seguem um padrão numérico lógico. (Claro,
se você quiser se divertir, vá em frente e inclua darkkhaki e ghostwhite na paleta de cores da
sua página da Web.) Nas próximas seções, você verá como criar a cor exata desejada de
mais de um milhão de combinações possíveis.

PORCENTAGENS DE RGB E HSL


Na mistura de cores de tinta, a quantidade de tinta é listada, às vezes, em porcentagens. Um
certo percentual de vermelho, verde e azul dará cores diferentes. Ao definir cores em CSS3,
você pode usar porcentagens de duas maneiras diferentes. Primeiro, você pode atribuir um
valor de cor usando o seguinte formato:

rgb(r%,g%,b%);

O primeiro valor é o percentual vermelho; o segundo, verde; e o terceiro, azul. Por exemplo,
a configuração, rgb(43.9%,50.2%,56.5%) gera a cor que os Los Angeles Dodgers usam.
Os três valores percentuais somam mais de 100%, então você sabe que o percentual de 67
anos é um percentual da cor em si e não do total. Como você pode ver, pode ser muito preciso
para valores, incluindo frações de porcentagens. O script a seguir (RGBpercent.html na pasta deste
capítulo em www.wiley.com/go/smashinghtml5) mostra como usar essa atribuição de cores em uma
página HTML5:

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
background-color:rgb(43.9%,50.2%,56.5%);
}
h1 {
background-color:rgb(11.8%,56.5%,100%);
color:rgb(100%,100%,100%);
font-family:”Arial Black”, Gadget, sans-serif;
font-style:italic;
text-align:center;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Dodgers azul </title>
</head>
<body>
PARTE I: A LINGUAGEM DA WEB

<h1>Los Angeles Dodgers<br>


(Antigamente do Brooklyn)</h1>
</body>
</html>

Quando você inicia a página, as cores saem exatamente como você instruiu, conforme
mostrado na Figura 4-2.

Figura 4-2: Configurando cores com porcentagens RGB.

68
Uma segunda maneira de atribuir cores usando porcentagens é usar um modelo de luz de
saturação de matiz (HSL). A grande vantagem do HSL é que a leveza é simétrica. Isso
facilita a definição de uma cor para o que você gostaria que fosse.

Ao pensar em um círculo de cores organizado em torno de 360 graus como uma bússola, você
seleciona um matiz. No topo, ou 0%, você encontra os vermelhos. Movendo-se no sentido
horário, a 30 por cento os matizes se tornam vermelho-amarelos. Aos 60%, eles são amarelos. E
assim por diante, em todo o espectro de cores, até chegar a 360% (0%) de onde você está de volta
aos tons vermelhos. Para designers que entendem o espectro de cores, isso facilita muito a
escolha de cores. Para criar uma cor mais clara, aumente o valor da luz; diminua o valor da luz
para tornar a cor mais escura. Por exemplo, suponha que você esteja tentando obter o tom certo
de vermelho. Você começa com a seguinte atribuição de cores:

hsl(0,100%,50%);

Observe que o primeiro valor não é uma porcentagem. Isso é porque tem valores entre 0 e
359 — os 360 graus de um círculo. (Lembre-se: 0 e 360 são o mesmo ponto no círculo.) Ao
aumentar e diminuir a luz (o terceiro parâmetro), você pode tornar sua cor mais clara ou
mais escura - o que é muito mais intuitivo do que alterar as porcentagens RGB. O seguinte
script HTML5 / CSS3 (HSLColor.html na pasta deste capítulo em www.wiley.com/go/
smashinghtml5) mostra como é fácil abaixar e aumentar o valor da luz para obter o tom
certo de vermelho.

<!DOCTYPE HTML>
<html>
<head>
CAPÍTULO 4: TRABALHANDO COM VALORES DE CORES

<style type=”text/css”>
.redBase {
color:hsl(0, 100%, 50%);
}
.redDarker {
color:hsl(0, 100%, 25%);
}
.redLighter {
color:hsl(0, 100%, 75%);
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Atribuição de
cores HSL</title>
</head>
<body>
<h1 class=”redBase”>Base Vermelha</h1>
<h1 class=”redDarker”>Vermelho Escuro</h1>
<h1 class=”redLighter”> Vermelho Mais leve </h1>
</body>
</html>

Ao usar o HSL pela primeira vez, é útil pensar em adicionar luz indo mais alto até o sol ou
tornando-o mais escuro, descendo até um poço. O processo de ajustes é mais fácil para os
designers obterem exatamente o que eles querem. A Figura 4-3 mostra como são as
diferentes tonalidades vermelhas.
69

Figura 4-3: O HSL facilita o ajuste de matizes.

Matiz e luz são bastante intuitivos para entender, mas a saturação pode ser um pouco
obscura. Essencialmente, a saturação é a quantidade de colorido em uma determinada cor.
Uma saturação de 100 por cento é o colorido completo de um matiz em uma determinada
luz, enquanto um percentual mais baixo subtrai de um matiz — algo como um
desbotamento de cor. Para todas as cores, uma luz de ponto médio ficará cinza quando a
saturação for 0%. Às vezes, uma cor desbotada ou muda é preferível, como jeans azul que
foram lavados muitas vezes.
PARTE I: A LINGUAGEM DA WEB

CONFIGURAÇÕES DE NÚMEROS INTEIROS DECIMAIS RGB


Uma segunda maneira de misturar suas cores usando a atribuição de valor rgb () é inserir valores
de 0 a 255 (um total de 256 valores porque você conta com 0), em vez das porcentagens usadas
no exemplo anterior. O valor 256 representa o número de combinações possíveis em dois bytes
de 8 bits. Em outras palavras, é baseado em como um computador armazena e processa
informações. Com um conjunto de três valores de 0 a 255, você pode gerar 16.777.216
combinações. No entanto, a tecnologia de cores é muito mais complexa do que podemos discutir
aqui, e o moderno processamento de cores continua gerando melhores processadores de cores.
Basta dizer que você pode gerar muitas cores com essas combinações de vermelho, verde e azul.
Este é o formato para atribuir um valor de cor:

rgb(integerR, integerG, integerB);

Por exemplo, amarelo, que mistura vermelho e verde, seria

rgb(255,255,0);

Não é tão intuitivo quanto o HSL, mas depois de um tempo, você começa a ter uma noção
de mixagens com base em 256 valores em vez de porcentagens. O exemplo a seguir
(DecColor.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) mostra uma
implementação simples.

<!DOCTYPE HTML>
<html>
70 <head>

<style type=”text/css”> body {

/* Fundo vermelho */
background-color:rgb(255,0,0);
}
h1 {
/* Texto Amarelo Grande */
color:rgb(255,255,0);
font-family:”Arial Black”, Gadget, sans-serif;
}
h2 {
/* Texto Azul + Fundo Cinzento */
color:rgb(0,0,255);
background-color:rgb(150,150,150);
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Cores Decimais</title>
</head>
<body>
<h1>&nbsp; Cabeçalho amarelo grande </h1>
<h2>&nbsp; Cabeçalho azul com um fundo cinza </h2>
</body>
</html>
CAPÍTULO 4: TRABALHANDO COM VALORES DE CORES

A única diferença entre usar RGB com valores de 0 a 255 e 0% a 100% é na percepção. Você
pode estar pensando que pode ser mais preciso com suas cores usando os 256 valores em vez
do intervalo de 0 a 100, mas esse não é o caso, pois você pode usar frações em atribuições de
porcentagem. Se você usa a notação de porcentagem ou a notação de 0 a 255 realmente se
resume a uma questão de preferência pessoal. A Figura 4-4 mostra o resultado usando o
navegador Opera Mini em um iPhone.

Figura 4-4: Cores misturadas usando valores inteiros, mostrados em um dispositivo


móvel.
Como você pode ver na Figura 4-4, o dispositivo móvel não está pegando a fonte Arial Black,
mas não tem problemas com as cores. Certifique-se de verificar o seu dispositivo móvel em 71
busca de fontes e outros efeitos, se eles forem essenciais para a aparência da sua página.
Lembre-se: a maioria dos computadores tem um conjunto muito mais completo de fontes e
estilos do que os dispositivos móveis. Com o tempo, porém, eles devem ser muito parecidos.

CONFIGURAÇÕES HEXADECIMAIS: PENSANDO COMO SEU


COMPUTADOR
Nos capítulos anteriores, você viu a atribuição de cores feita usando valores compostos de
valores alfanuméricos. (Um valor alfanumérico é qualquer valor que contenha números e letras.)
Por exemplo, o valor 6F001C gera um vermelho mocha rico. Se quebrarmos, podemos ver que
também é simplesmente uma mistura de vermelho, verde e azul. Mas, para entender o que está
acontecendo, precisamos entender um pouco sobre os sistemas de numeração de computadores.

Estamos acostumados a contar usando um sistema decimal. Usamos os valores de 0 a 9 (dez


dígitos) e, quando esses dez dígitos são usados, começamos com dois dígitos - 1 e 0 - que
chamamos de “dez”. Como você deve saber, os computadores são baseados em switches que
estão em um estado ligado ou desligado. Substituindo “1” por “On” e “0” por “Off”, podemos
escrever um código baseado em um sistema binário usando 1s e 0s; então, em vez de ter dez
dígitos para trabalhar, temos apenas dois. A Tabela 4.2 mostra o que é necessário para contar até
16 usando o sistema binário. Também inclui uma terceira coluna que mostra um sistema de
numeração de base 16 chamado hexadecimal.
PARTE I: A LINGUAGEM DA WEB

Tabela 4.2 Numeração de Sistemas


Binário Decimal Hexadecimal

0 0 0

1 1 1

10 2 2

11 3 3

100 4 4

101 5 5

110 6 6

111 7 7

1000 8 8

1001 9 9

1010 10 A

1011 11 B

1100 12 C

1101 13 D

72 1110 14 E

1111 15 F

Cada um dos valores binários é chamado um pouco. Um grupo de bits é chamado de byte.
Na Tabela 4.2, o maior valor binário é um byte de 4 bits. Os computadores são organizados
em diferentes tipos de bytes e o byte de 8 bits é comumente usado como uma referência geral
a um byte. No entanto, os computadores modernos são organizados em bytes de 8, 16, 32, 64
e até 128 bits. (Eles continuam aumentando, por isso, não espere que os bytes de 128 bits
sejam o limite máximo).

O valor mais alto para um sistema de contagem binária em um byte de 8 bits é 11111111.
Quando você olha para isso em comparação com números decimais e hexadecimais, você vê
um padrão muito interessante, como mostrado na Tabela 4.3.

Tabela 4.3 Valores de Byte


Binário Decimal Hexidecimal

11111111 255 FF

Como você pode ver na Tabela 4-3, o valor hexadecimal FF é o maior valor possível para
dois dígitos; da mesma forma, o valor binário 11111111 é o maior valor possível para
oito dígitos (um byte). No entanto, o número decimal é de três dígitos e não representa
um limite para esses dígitos. Em outras palavras, o sistema decimal não é muito simétrico
com o sistema de contagem binária, mas o sistema hexadecimal é.
CAPÍTULO 4: TRABALHANDO COM VALORES DE CORES

Como você sabe, o sistema RGB de atribuir inteiros a valores de cores usa valores de 0 a
255. Usando valores hexadecimais, você precisa apenas de dois dígitos (na verdade,
inteiros hexadecimais) para representar todos os 256 valores em um byte de 8 bits. É mais
puro.

Isso leva ao uso de inteiros hexadecimais na atribuição de valores de cores. Usando seis
valores - dois para vermelho, verde e azul — odos os valores de cores podem ser atribuídos
usando seis inteiros hexadecimais. Então voltando ao valor 6F001C , podemos ver o
seguinte:

Vermelho: 6F
Azul: 00
Verde: 1C

Acostumar-se ao hexadecimal pode levar algum tempo, mas depois disso, é fácil adicionar
valores de cor a eles. Além disso, você pode entendê-los da mesma maneira que os inteiros
decimais RGB, mas, em vez de valores de 0 a 255, você usa 00 a FF. O exemplo a seguir
(HexPalette.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) mostra
algumas cores usando hexadecimais.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/* Paleta -- use apenas essas cores! 73
69675C, 69623D, ECE8CF, E8D986, B5AA69
cinza, oliva, creme, creme escuro, caqui */
body {
font-family:”Comic Sans MS”, cursive;
background-color:#ECE8CF;
color:#69675C;
}
h1 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#B5aa60;
background-color:#E8D986;
text-align:center;
}
h2 {
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
color:#b5aa69;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Hexadecimal
com Paleta</title> </head>

<body>
<h1>Estilo com uma paleta de cores</h1>
<h2>&nbsp; Deserto no outono </h2>
No outono, quando o ar esfria um pouco, o deserto começa a se acomodar e se encobre
PARTE I: A LINGUAGEM DA WEB

em um conjunto de tons mais quentes.


</body>
</html>

Este exemplo usa uma paleta de cores e simplesmente coloca os valores de cor em um
comentário dentro do contêiner <style> para que ele possa ser exibido ao colocar a página
da Web unida. A Figura 4-5 mostra o que você pode esperar para ver.

Figura 4-5: Uma paleta de cores hexadecimais.

74
As cores pertencem a um conjunto de cores que criam certo humor ou sentimento. Este,
“Deserto no outono”, foi baseado no que o designer acredita ser uma paleta representando
aquela época do ano no deserto.

ADICIONANDO TRANSPARÊNCIA À COR


Um dos novos recursos que você pode ver em um navegador compatível com HTML5 é
transparência ou opacidade variável. Um objeto totalmente opaco na tela bloqueia o que
estiver abaixo dele, enquanto um objeto totalmente transparente permite que qualquer coisa
abaixo dele seja totalmente vista - como vidro. O valor usado para descrever o nível de
opacidade é expresso em uma propriedade alfa definida entre 0 e 1. Usando a formatação de
cores RGB ou HSL, o alfa é o quarto parâmetro. (Infelizmente, não há nenhum parâmetro alfa
hexadecimal em CSS3.) Por exemplo, rgba (255,0,0, 0.5) gera vermelho com 50% de
opacidade. Da mesma forma, hsla (120, 100%, 50%, 0.3) cria verde com 30% de opacidade
(ou 70% de transparência).

Na Parte IV deste livro, discuto maneiras de adicionar profundidade à sua página com a tag
<canvas> para que, ao empilhar objetos uns sobre os outros, você possa entender melhor por
que é importante ter alguma transparência em suas criações. Por enquanto, no entanto, você
precisa de algo que possa colocar sob blocos de texto que possam ser visualizados através
de um bloco de texto transparente. O método mais fácil é colocar um objeto de plano de
fundo usando a propriedade background-image. O trecho de código a seguir mostra como:

body { background-image:url(imageFile.png); }
CAPÍTULO 4: TRABALHANDO COM VALORES DE CORES

Você pode usar qualquer arquivo .jpg, .gif, ou .png para uma imagem de plano de fundo. Para
este exemplo, três círculos nas cores vermelho, verde e azul são usados como plano de fundo
e no topo são <h1> texto com 50% de opacidade para mostrar o efeito que cores diferentes
têm quando visualizadas através de um objeto transparente. O código a seguir
(Transparent.html na pasta deste capítulo em www. wiley.com/go/smashinghtml5) usa os
formatos rgba() e hsla().

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
background-image:url(Bolas rgb.png);
}
.transRed {
color:rgba(255, 0, 0, .5);
}
.transGreen {
color:rgba(0, 255, 0, .5);
}
.transBlue {
color:hsla(240, 100%, 50%, .5);
}
.transBackground
{
background-color:hsla(120, 100%, 50%, .5); 75
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Transparência/Opacidade</title> </head>

<body>
<h1 class=”transRed”>Testando 123, Testando 123, Testando 123</h1>
<h1 class=”transGreen”>Testando 123, Testando 123, Testando 123</h1> <h1
class=”transBlue”>Testando 123, Testando 123, Testando 123</h1>
<h1 class=”transBackground”>Testando 123, Testando 123, Testando 123</h1>
</body>
</html>

Os resultados mostrados na Figura 4-6 são mostrados em um iPhone e não parecem


diferentes do que você verá na tela do seu computador.

Como você pode ver, o texto e plano de fundo transparentes permitem que o objeto de plano
de fundo seja exibido. Quando uma cor é transparente, ela pega um pouco da cor subjacente;
então, quando você usá-lo, tenha em mente como a combinação das cores subjacentes e
sobrepostas se parece. (A propósito, a Figura 4-6 mostra porque você raramente quer usar
imagens de fundo — elas têm uma maneira de entulhar a tela e destruir qualquer
sensibilidade no texto).
PARTE I: A LINGUAGEM DA WEB

Figura 4-6: Texto transparente sobre gráficos sólidos.

CRIANDO UM ESQUEMA DE COR


Se você é um designer, você pode estar pensando: "Como é que eu vou conseguir as cores que
quero com todos esses números?" Se você é um desenvolvedor, você pode se perguntar: "Como
posso saber se o cores que uso juntas? ”Ambas as perguntas têm a mesma resposta: Kuler. O
Kuler é um site onde você pode inserir uma cor chave (cor base) e, usando algoritmos diferentes,
o Kuler trabalha quais cores são compatíveis e apresenta as informações para valores de cores
decimais e hexadecimais. Designers podem colocar em qualquer cor que quiserem usar na
76
criação de seus próprios esquemas de cores e o Kuler gera toda a matemática; os
desenvolvedores podem colocar as contas e o Kuler gera esquemas de cores.

Você pode encontrar o Kuler em http://kuler.adobe.com. Ele requer um plug-in Flash (que já
está integrado à maioria dos navegadores), mas se seu navegador não tiver um, você pode
obtê-lo gratuitamente em www.adobe.com/products/flashplayer. Você também pode baixar
um widget do Kuler que funciona na sua área de trabalho.

DE UMA COR BASE


Para criar um esquema de cores com o Kuler, você começa com uma cor base e
experimenta com algoritmos diferentes para gerar esquemas de cores. Em seguida, você
seleciona um algoritmo para mostrar diferentes maneiras de as cores parecerem boas juntas.
Com base na teoria das cores, você escolhe de forma análoga, monocromática, tríade,
complementar, composta, tons ou personalizada. A categoria personalizada é para designers
que usam suas habilidades artísticas para gerar uma paleta. (Os desenvolvedores são bem
servidos por um dos algoritmos automáticos.) A Figura 4-7 mostra um exemplo típico de
um esquema de cores centralizado em uma cor de base usando o algoritmo de tríade.

DE UMA IMAGEM
Além de criar uma paleta de cores a partir de uma cor base, você também pode carregar uma
imagem e o Kuler gera automaticamente um esquema de cores com base na cor da imagem. Por
exemplo, a Figura 4-8 mostra duas imagens diferentes — um logotipo e uma pintura — com suas
respectivas paletas de cores.
CAPÍTULO 4: TRABALHANDO COM VALORES DE CORES

Figura 4-7: Um esquema de cores com cor base.


77

Figura 4-8: esquemas de cores baseados em imagens importadas.


PARTE I: A LINGUAGEM DA WEB

Combinações de cores ruins


Para ver a diferença entre usar um bom esquema de cores e um bom esquema de cores, vamos
ver um exemplo. O livro de Leslie Cabarga, O guia do designer para combinações de cores,
contém um capítulo sobre cor ruim. A figura a seguir mostra o que duas páginas da Web
idênticas mostradas em um dispositivo móvel se parecem com um esquema de cores baseado
em uma foto e outra usando um exemplo de cor ruim do livro de Cabarga.

78

Cor boa e a ruim.

A figura à esquerda usa as cores escolhidas na foto e a da direita não — Além disso, é apenas
uma combinação ruim.

Ao usar uma imagem, você pode modificar ainda mais o esquema de cores selecionando
entre vários modos — colorido, brilhante, mudo, profundo e escuro. Todos os esquemas
de cores podem ser salvos e, quando carregados, eles mantêm todas as informações
necessárias para inserir dados de cores em uma página da Web HTML5.

INTEGRAÇÃO DA PALETA DE COR COM A


SUA PÁGINA WEB
Ter uma paleta de cores não significa que sua página terá boa aparência — mesmo em
cores. Dentro da mesma paleta, algumas cores combinam melhor que outras. Por exemplo,
CAPÍTULO 4: TRABALHANDO COM VALORES DE CORES

um fundo de meio-tom pode não fornecer o contraste necessário para outras cores de meio-
tom, portanto, uma cor escura ou clara na paleta pode ser uma opção melhor. A Figura 4-9
mostra a paleta de cores desenvolvida em torno de um logotipo que será usado como a
paleta da página.

Figura 4-9: Uma paleta de cores baseada em logotipo.

Os valores inteiros hexadecimais para as quatro cores são colados diretamente com o CSS3
na parte superior da página HTML5 para referência. O script a seguir (ColorsPhoto.html na
pasta deste capítulo em www.wiley.com/go/smashinghtml5) emprega as cores para que elas
funcionem com o logotipo e o restante da página.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/* 027333,7FA646,D9B448,F2DFA7 */
body {
margin-left:1em;
background-color:#F2DFA7;
color:#027333;
font-family:Verdana, Geneva, sans-serif; 79
font-size:11px;
}
h1 {
font-family:Tahoma, Geneva, sans-serif;
color:#7FA646;
}
h2 {
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
color:#7FA646;
background-color:#D9B448;
}
div
{
text-align:center;
}
a {
font-family:Arial, Helvetica, sans-serif;
text-align:center;
font-size:10px;
text-decoration:none;
background-color:#027333;
color:#F2DFA7;
}
a:hover {
color:#D9B448;
PARTE I: A LINGUAGEM DA WEB

}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Organizando Cores</title>
</head>
<body>
<div><nav>
<a href=”#”> &nbsp;Link 1 | </a>
<a href=”#”> &nbsp;Link 2 | </a>
<a href=”#”> &nbsp;Link 3 &nbsp;</a>
</nav> </div>
<img src=”Sandlightlogo.gif” alt=”Logo” align=”left”>

<header><h1>&nbsp; &nbsp;&nbsp;Bem vindo</h1></header>


<br><br>
<article>
<h2>&nbsp;Nós somos todos sobre...</h2>
A Sandlight Produções é uma empresa de desenvolvimento internacional especializada em HTML5 / CSS3,
streaming de vídeo, desenvolvimento de dispositivos móveis, educação on-line, arquitetura Action-Script 3.0, Flash
e PHP.
</article>
<br>
<footer><div>
<nav>
<a href=”#”> &nbsp;Link 1 | </a>
80 <a href=”#”> &nbsp;Link 2 | </a>
<a href=”#”> &nbsp;Link 3 &nbsp;</a>
</nav>
</div></footer>
</body>
</html>

O script CSS3 usa a propriedade a: passe o mouse para alterar a propriedade quando o
mouse estiver sobre o link. Na definição <a> da tag CSS3, a text-decoration é definida como
none, o que significa que o link de texto não será sublinhado. Sem o sublinhado, você quer
fazer algo para alertar o usuário sobre a presença de um link; você faz isso usando a
propriedade hover. Alterar a cor do texto do link de maneira sutil e eficiente mostra ao
usuário que o mouse está sobre o link. Tanto a cor inicial quanto a cor hover fazem parte da
paleta. Portanto, ao configurar a página, lembre-se de que mais do que apenas as tags
<body> e <h> usam a paleta de cores.

Esse design específico é focado em dispositivos móveis (veja o lado direito da Figura 4-
10), mas deve funcionar também com o computador e a tela da mesa (veja o lado esquerdo
da Figura 4-10).

Naturalmente, sua página sempre parecerá melhor se você tiver um Web designer que
faça o design da página. No entanto, até os desenvolvedores podem fazer com que
pareça melhor prestando atenção nas combinações de cores.
CAPÍTULO 4: TRABALHANDO COM VALORES DE CORES

Figura 4-10: Um esquema de cores aplicado a uma página.


81
PEGUE A RODA
Os dois desafios a seguir devem ser divertidos e você aprenderá muito fazendo os dois:

„ Reproduzindo a cartela de cores padrão: Na Figura 4-1 é uma imagem com as cores
padrão. Seu primeiro desafio é ver se você pode reproduzir a página da Web que exibe
essas cores. Aqui estão algumas dicas para começar:
• Defina cada cor nomeada como uma classe no seu container <style> com a mesma
cor para as cores de texto e plano de fundo.
.aqua { color:aqua; background-color:aqua; }

• Uma maneira de fazer isso é usar a tag <span> para atribuir classes ao conteúdo
do contêiner <span>.
<h3> <span class=aqua>NOMEDACOR</span><span class=black> NOMEDACOR
</span><span class=blue> NOMEDACOR </span><span class=fuchsia> NOMEDACOR
</span> <h3>
„ Sua foto pertence a uma página da Web! Esta é uma tarefa de três partes:
1. Faça uma imagem digital de si mesmo usando a câmera embutida no seu
computador ou faça o upload de uma de uma câmera digital.
2. Carregue a imagem no Kuler e crie uma paleta de cores.
3. Crie uma página da Web com sua imagem usando a paleta de cores que você criou no Kule
PARTE II
II
PÁGINAS, SITE

DESENHOS

Capítulo 5: Organizando uma Página


Capítulo 6: Exibindo dados com tabelas
Capítulo 7: Tudo sobre Links
Capítulo 8: Estratégias de Navegação
SMASHING HTML5

CAPÍTULO 5
5 Organizando
uma Página

MUITAS DAS novas tags em HTML5 são tags Alguns dos elementos organizacionais tornam-
organizacionais. Nos capítulos anteriores, alguns se claros apenas quando você começa a usar
foram usados, mas não foram realmente JavaScript, mas se você configurar sua página
explicados. Este capítulo analisa de perto a de acordo com as diretrizes do HTML5, sua
organização das páginas HTML5 com a ajuda do página será útil quando você começar a
CSS3 e uma maneira de entender esse processo adicionar um pouco de JavaScript.
organizacional.
PARTE II: PÁGINAS, SITES E DESENHOS

UM PARTE SUPERIOR DO DOCUMENTO HTML5


Os primeiros quatro capítulos deste livro explicam muito de como as informações acima da tag
<body> são colocadas em uso. O código acima da tag <body> não adiciona conteúdo à página da
Web, mas influencia como a página aparece e informa ao navegador que é uma página da Web
e que tipo de página da Web é. A Figura 5-1 mostra a organização geral da primeira parte da
página da Web.

Figura 5-1: Organizando o topo de uma página da web.


86
A tag <html> é o elemento-raiz e, dentro desse elemento, você pode incluir um atributo
de idioma. Em seguida, dentro do contêiner <head> estão os elementos de metadados.
Também no contêiner <head> estão os elementos de script; eles também são brevemente
abordados nesta seção e expandidos na Parte IV deste livro.

Além dos scripts CSS3, os exemplos até agora não colocaram muitas tags na head do
documento HTML5. A tag <meta> tem muitos usos, mas até agora usamos apenas para
especificar o conjunto de caracteres. Este capítulo mostra mais usos para a tag <meta>.

CONFIGURANDO SUA BASE


Dentro do site típico, você provavelmente terá várias páginas diferentes às quais sua página será
vinculada. Na verdade, o site típico é organizado como um sistema de navegação que liga
páginas diferentes. Se você definir uma tag <base> no head da sua página com um link para
um URL, poderá fazer referência a outras páginas relativas à página de base. Por exemplo,
os dois scripts a seguir (Base.html e FirstBase.html na pasta deste capítulo em
www.wiley.com/go/smashinghtml5) têm links um para o outro, mas são relativos à base
definida no contêiner do head.

<!DOCTYPE HTML>
<html><head>
<base href=”http://www.sandlight.com/html5/smashing/ “> <style
type=”text/css”>
body {
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

background-color:#FCC;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Base Inicial</title></head>
<body>
<h1>Este é a Base Inicial</h1>
<a href=”FirstBase.html”> Primeira Base </a>
</body></html>
<!DOCTYPE HTML>
<html><head>
<base href=”http://www.sandlight.com/html5/smashing/ “> <style
type=”text/css”>
body {
background-color:#FC0;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>First Base</title>
</head>
<body>
<h1> Esta é a Primeira Base </h1>
<a href=”Base.html”>Base Inicial</a>
</body>
</html>
87
O que esta acontecendo aqui? A tag <base> informa ao seu navegador como resolver
quaisquer referências a outros documentos no seu HTML — como a marca de âncora <a
href=”Base.html”> como a marca de âncora <base> ; ou seja,
http://www.sandlight.com/html5/smashing/.

ADICIONANDO PERSONAGEM AO SEU SITE COM METADADO


Até agora, usamos a tag <meta> para determinar se o seu site usa o conjunto de caracteres
UTF-8, mas o elemento meta pode fazer muito mais. Pense no elemento meta como aquele
que executa multitarefas. Um dos atributos mais importantes do elemento meta é o par name
e content. Com o atributo name definido para keywords, você pode especificar o content em
seu site. Dessa forma, os mecanismos de pesquisa podem encontrar seu site quando as
pessoas estão tentando encontrar seus produtos ou serviços — ou apenas os tópicos que
você gostaria de incluir em suas páginas da Web. Por exemplo, suponha que seu site tenha
links para blogs e outros sites sobre tópicos sobre canis. Sua meta tag seria algo como isto:

<meta name=”keywords” content=”kennels, dog fences, pet containment”>

Cada um dos valores de conteúdo deve ser separado por uma vírgula. Esses tokens podem
estar diretamente relacionados ao seu conteúdo ou ao que alguém pode procurar. As meta
tags de conteúdo são fáceis de configurar e você pode ajudar os usuários a encontrar o
caminho para seu site.
PARTE II: PÁGINAS, SITES E DESENHOS

Um outro atributo de tag <meta> que é muito legal é o http-equiv definido no estado
Refresh. Usando esse atributo, você pode atualizar automaticamente uma página ou até
mesmo alterar páginas HTML. Por exemplo, você pode fazer com que parte de seu site
tenha uma apresentação de slides automática para exibir fotos de uma festa ou de amigos
em um clube. O formato da tag para usar o estado Refresh é:

<meta http-equiv=”Refresh” content=”[secs]”>

Por exemplo, a tag a seguir atualiza (recarrega) a página a cada 30 segundos:

<meta http-equiv=”Refresh” content=”30”>

Não apenas você pode recarregar a mesma página, mas também recarregar páginas
diferentes. Se você quiser carregar uma sequência de páginas, poderá definir o conjunto de
meta tags inicial da seguinte maneira, para definir a página atribuída como um valor de URL
após 1⁄2 segundo:

<meta http-equiv=”Refresh” content=”.5; URL=pg2.html”>

Observe como o valor de conteúdo do número de segundos e do URL está no mesmo


conjunto de aspas. O código HTML5 a seguir inicia uma série de páginas que mantêm a
atualização até que uma página inicial seja carregada:

<!DOCTYPE HTML>
<html>
88 <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <meta http-
equiv=”Refresh” content=”.5; URL=pg2.html”> <title>Image 1</title>

</head>
<body>
<img src=”one.png” alt=”one”> </body>

</html>

Após a página inicial, você teria a seguinte sequência — apenas uma por página:

„ Página 2: <meta http-equiv=”Refresh” content=”.5; URL=pg3.html”>


„ Página 3: <meta http-equiv=”Refresh” content=”.5; URL=pg4.html”>
„ Página 4: <meta http-equiv=”Refresh” content=”.5; URL=pg5.html”>
.

„ Página 5: <meta http-equiv=”Refresh” content=”.5; URL=homeNow. html”>

A página inicial, homeNow.html, não teria o estado Refresh na tag <meta>. De fato, além do
elemento meta com o Content-Type, ele não teria outra meta tag. (Essa coisa continuaria para
sempre se você colocasse a página inicial de volta na primeira página!).
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

SABENDO QUANDO VOCÊ PRECISA DE UM SCRIPT


Quanto mais você usar HTML5, mais precisará de um script para aproveitar ao máximo
suas páginas da Web. A linguagem de script mais comum usada com o HTML5 é
JavaScript. Seu navegador tem um intérprete para JavaScript, assim como faz para HTML5.
Felizmente, o JavaScript é fácil de aprender e pode funcionar em pequenos trechos - mesmo
os não — desenvolvedores podem fazê-lo.

Para incluir o JavaScript, tudo o que você precisa fazer é adicionar um pequeno script à
cabeça da sua página. Este é o formato da tag:

<script type=”text/javascript”>

O programa JavaScript vai para o restante do contêiner <script> O código HTML5 a


seguir (ScriptTag.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5)
mostra como o JavaScript é fácil de aprender.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
alert(“I can do JavaScript!”);
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Um gosto de JavaScript</title>
</head> 89
<body>
Uma página da Web normal....
</body>
</html>

Ao testar esse pequeno programa, você verá uma caixa de alerta (mostrada na Figura 5-2).

Figura 5-2: uma janela de alerta do JavaScript.

Como observação, você verá que a janela de alerta do JavaScript está carregada antes de sua
página da Web ser carregada. Isso é porque tudo no contêiner principal é carregado
primeiro. Se você tiver um programa JavaScript mais elaborado que será usado na sua
página HTML5, convém testá-lo em diferentes navegadores e também colocá-lo em um
arquivo JavaScript externo. A Figura 5-3 mostra a mesma janela de alerta no Safari em um
iPhone; você pode ver claramente que a página da Web associada ao código HTML5 não foi
carregada.
PARTE II: PÁGINAS, SITES E DESENHOS

Assim que o usuário clica em OK, a página da Web é carregada. Enquanto isso, você pode
ver os arquivos do diretório em segundo plano no seu dispositivo móvel. Além disso,
observe que a janela de alerta mostra o domínio em que o JavaScript reside. Alguns
navegadores, como o Google Chrome, primeiro verificam se o usuário deseja aceitar o
JavaScript do site nomeado antes de mostrar o alerta real (um alerta duplo!).

90

Figura 5-3: Janela de alerta carregando antes da página da Web.

Tal como acontece com as folhas de estilo, os programas JavaScript podem ser carregados
a partir de arquivos externos. No entanto, em vez de usar o elemento link, os arquivos
JavaScript são carregados usando o elemento script, como mostra o exemplo a seguir:

<script type=”text/javascript” src=”smashingJS.js”></script>

O arquivo JavaScript é salvo usando a extensão .js, assim como os arquivos CSS3 são
salvos usando a extensão .css.

Você verá um bom uso do JavaScript ao usar a tag <canvas> e várias outras tags HTML5 na
Parte IV deste livro. Além disso, as tags <script> e o código JavaScript nelas podem ser
adicionadas no meio de um script HTML5. A vantagem de colocar seu JavaScript no
contêiner de cabeçalho é que ele é carregado primeiro antes da página da Web.
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

UM DESIGN EM SEÇÕES
Uma das principais mudanças no HTML5 em comparação com as versões HTML mais
antigas está nas seções. Antes do HTML5, você poderia pensar em seções em termos do
elemento body e algumas tags <h>. Em HTML5, uma página pode ser visualizada em
termos de várias seções com subseções. Um contexto maior em uma página da Web é um
article e, assim como um artigo em uma revista, é possível encontrar seções diferentes que
constituem os blocos de construção do artigo. A Figura 5-4 fornece uma visão geral das
seções em uma página HTML5.

91

Figura 5-4: Algumas seções que compõem uma página.

Ao observar a Figura 5-4, você pode ver diferentes blocos de informações, mas as tags
usadas geralmente não têm capacidade inerente de estruturar as informações visualmente.
As tags <h> , que são elementos de seção, certamente configuram texto para tamanhos
diferentes. No entanto, as outras tags de seção servem tanto para ajudar a organizar uma
página quanto para especificar a exibição visual da página.

Os elementos da seção incluem o seguinte:

„ Body
„ Section
„ Nav
„ Article
„ Aside
„ H1 . . . H6
„ Hgroup
PARTE II: PÁGINAS, SITES E DESENHOS

„ Header
„ Footer
„ Address

O elemento body é a raiz de seção, assim como o element html é a raiz da página. Nos
capítulos anteriores, você viu vários elementos da seção, então você está familiarizado com
eles. No entanto, um script ajuda a ver como eles são usados em conjunto e considera seus
usos (ArticleStructure.html na pasta deste capítulo em www.wiley.com/go/ smashinghtml5).
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Seções</title>
</head>
<body>
<article>
<header>
<h1>Pilotos e Aviões</h1>
<p><q>Eu nunca deixei um lá em cima.</q><i>Ace Davis</i></p> </header>

<nav><a href=”#”> Segurança</a> | <a href=”#”>Verificar listas</a> | <a


href=”#”>Desembarques</a></nav>
92 <section>

<h2>Histórias de voo por pilotos reais</h2>


<h3>... e outras curas para insônia.</h3>
<section>
<h4> Final Curto </h4>
<p>Como estávamos na curta final, o controle limpou o Maule para a decolagem imediata, o que aconteceu em
cerca de 15 pés de pista a uma velocidade de 20 mph. Encheu meu pára-brisa quando me aproximei da velocidade de
estol. Depois de perceber seu erro, a torre instruiu o Maule a fazer um loop e conseguimos pousar sem incidentes..</p>
</section>
<section>
<h4>Térmica na decolagem</h4>
<p> Decolando de Gila Bend, Arizona, com a temperatura ambiente de 130ºF, encontramos uma forte térmica
no final da pista, que levou o nosso Cessna 177b a 15.000 pés em 12 segundos, quando estabilizamos e seguimos para
a pista. Novo México através do jato, estabelecendo um novo recorde de velocidade.</p>
</section>
</section>
<aside>
<h2>Verdadeiro Piloto Encontrado!</h2>
<p> Emily Rudders, um piloto em Moose Bite, Vermont, foi recentemente considerado o único piloto
verdadeiro que existe. Quando lhe pediram para relatar sua mais excitante aventura voadora, Emily respondeu: <q>
Eu nunca nunca voei em nenhum avião. Só tiro quando eles voam e incomodam os alces.</q></p>
</aside>
<footer>
<address>
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

Contacte-nos em:<a href=”www.aopa.org”>AOPA</a>


</address>
</footer>
</article>
</body>
</html>

O objetivo das seções é dividir a página em partes coerentes. Eles são um conjunto
organizacional de elementos e, embora possam ser usados para formatação, esse não é o
objetivo principal deles. Para adicionar formatação a um parágrafo ou grupo de parágrafos,
os Padrões do W3C incentivam o uso da tag <div>.

A Figura 5-5 mostra como a página se parece. Embora não seja um design atraente, é
funcional. O artigo é sobre pilotos e voar. O cabeçalho do artigo anuncia o tópico (pilotos e
aviões) e fornece uma cotação de um piloto usando uma tag <q>. Após o cabeçalho, a
primeira seção é sobre histórias de voo. Aninhados dentro da primeira seção são duas
outras tags <section> que separam as duas histórias.

Uma seção um tanto relacionada sobre a veracidade das histórias de pilotos é colocada em
um contêiner de elementos separados. Na Figura 5-4, você deve ter notado que o lado foi
colocado em uma coluna separada, mas por si só, um elemento aside é uma referência ao
sentido da página. Não é um elemento de formatação como tal.

93

Figura 5-5: Uma página organizada com elementos de seção.


PARTE II: PÁGINAS, SITES E DESENHOS

Por que você realmente deve prestar


atenção à organização da seção
Você pode estar pensando que pode colocar uma página em funcionamento sem o incômodo das
tags de seção. Isso é verdade. No entanto, sob o capô da sua página da Web moderada é um
mecanismo estrondoso que pode fazer referência a diferentes partes da sua página. Conhecido
como o Document Object Model (DOM), os diferentes agrupamentos que você configurou usando
os elementos de seção podem ser endereçados como objetos diferentes e filhos de objetos em um
fluxo bem ordenado de dados percorrendo a Internet. Ao prestar atenção ao modelo
organizacional usado no HTML5, sua página da Web ficará feliz, a Internet ficará feliz e a galáxia
ficará feliz.

Finalmente, na parte inferior do artigo é um rodapé. Os elementos de rodapé podem ir a


qualquer lugar, incluindo dentro da section individuais e contêineres aside. Rodapés atuam
como um elemento organizacional de fechamento para os elementos de seção. Dentro do
rodapé é um elemento de endereço com um link para um URL relacionado ao artigo.

Olhando a página da Figura 5-5 e o código, você pode ver o sentido da página descrita nas
tags da seção. Conforme observado, eles não são realmente para formatação, mas para
organizar o sentido da página.
94
COLOCANDO SUAS COISAS ORGANIZADAS
epois de ter um plano organizacional geral, você deseja organizar seu conteúdo nas
diferentes seções. Na Figura 5-4, você viu que vários dos elementos de seção continham
elementos de agrupamento, como as marcas <p>. Elementos de agrupamento são o local
preferido para adicionar seus estilos CSS3; elementos de seção não são. Nesta seção, você
encontrará os principais elementos para ajudá-lo a organizar seus materiais.

PARÁGRAFOS, DIVISÕES E LISTAS


As tags <p> e <div> ostumavam ser os cavalos de batalha das páginas HTML para
agrupamento e estilo. Ambos ainda são importantes, mas é preciso lembrar que o trabalho
deles não é mais o de secar material na sua página. Em vez disso, pense em ambas as tags
como agrupando partes de uma seção. Por exemplo, o snippet de código a seguir mostra o
modo antigo de usar essas duas tags:

<div>
<h1>Tudo sobre coisas importantes</h1>
<p>
<h2>Encontrando o Amor Verdadeiro</h2>
</p>
<p>
<h2>Escolhendo a carreira certa</h2>
</p>
<p>
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

<h2>Obtendo um lugar de estacionamento</h2>


</p>
</div>

Esse código funciona perfeitamente em HTML5, mas é melhor organizado usando o


elemento mais específico para o trabalho. Um código melhor seria parecido com o
seguinte:

<header>
<h1>Tudo sobre coisas importantes</h1>
</header>
<section>
<h2>Encontrando o Amor Verdadeiro</h2>
<h2>Escolhendo a carreira certa</h2>
<h2>Obtendo um lugar de estacionamento</h2>
</section>

Na sua página da Web, eles são parecidos, mas, com o HTML5, você vai achar suas páginas
mais sensatas usando os novos elementos da seção.

Então a pergunta é: “Onde os elementos p e div podem ser usados?” Na verdade, você não
quer depender muito deles. No entanto, quando você deseja adicionar um elemento de
estilo ou algum outro atributo no meio de um <article> ou <section>, eles podem ser úteis.
Considere o seguinte (UseDiv.html na pasta deste capítulo em www.wiley.com/go/
smashinghtml5).
95
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
font-family:”Comic Sans MS”, cursive;
color:#0C6;
background-color:#FFC;
}
.girls {
background-color:pink;
}
.boys {
background-color:powderblue;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Nomes de Bebê</title>
</head>
<body>
<article>
<header>
<h1>Nomes de Bebê</h1>
</header>
<section>
PARTE II: PÁGINAS, SITES E DESENHOS

<div class=”girls”>
<h2>&nbsp;Meninas</h2>
<ul>
<li>Olivia</li>
<li>Tess</li>
<li>Emily</li>
</ul>
</div>
</section>
<section>
<div class=”boys”>
<h2>&nbsp;Meninos </h2>
<ul>
<li>Jacob</li>
<li>Ricky</li>
<li>John</li>
</ul>
</div>
</section>
</body>
</html>

A Figura 5-6 mostra a saída, mas o ponto importante é que a tag <div> foi empregada
apenas para fornecer as cores de fundo para dois elementos <section> diferentes.
96

Figura 5-6: Usando a tag <div> para estilização.


CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

Como você pode ver na listagem, o element div permitiu dois estilos de fundo diferentes
nos contêineres de section sem precisar adicionar classes à tag <section>. No geral, porém,
lembre-se de que <p> e <div> são elementos mais generalizados e, em todos os momentos,
você deve usar os elementos mais descritivos de seu objeto na página da Web.

Além de agrupar e estilizar usando a tag <div> , as listas também servem para delinear dados.
O HTML5 ainda usa as tags <ul> para agrupar nomes de bebês para meninos e meninas.
Entretanto, uma diferença sutil, porém importante, é construída em listas ordenadas (<ol>) e
não ordenadas (<ul>).

O uso de listas não ordenadas ou ordenadas depende do contexto. Por exemplo, na Copa do
Mundo da Federação Internacional de Futebol de 2010 (FIFA) na África do Sul, quatro das
equipes que competiram pelo campeonato foram Alemanha, Holanda, Espanha e Uruguai.
Se você fosse listá-los no início da competição, você poderia usar uma lista não ordenada.
No final da competição, você pode querer usar uma lista ordenada para mostrar os
resultados finais. A seguinte página da Web (ol_ul.html na pasta deste capítulo em
www.wiley.com/go/ smashinghtml5) reflete os diferentes agrupamentos, dependendo do
contexto e do significado que acompanha o contexto.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/*20268C,0C080C,2F8C2B,F27507,F20505 */
body { 97
background-color:#2F8C2B;
color:#0C080C;
font-family:Verdana, Geneva, sans-serif;
}
h2 {
background-color:#F27507;
color:#20268C;
font-family:”Comic Sans MS”, cursive;
}
h3 {
font-family:”Comic Sans MS”, cursive;
}
ol {
background-color:#F27507;
}
ul {
background-color:#F20505;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Ordenada e não ordenada</title>
</head>
<body>
<h2>&nbsp;World Cup 2010</h2>
<h3>Beginning</h3>
PARTE II: PÁGINAS, SITES E DESENHOS

<ul>
<li>Espanha</li>
<li>Holanda</li>
<li>Alemanha</li>
<li>Uruguai</li>
</ul>
<h3>Fim</h3>
<ol>
<li>Espanha</li>
<li>Holanda</li>
<li>Alemanha</li>
<li>Uruguai</li>
</ol>
</body>
</html>

Como você pode ver na Figura 5-7, o significado do grupo no início da Copa do Mundo não
tem hierarquia — a lista é de apenas quatro equipes na Copa do Mundo. No entanto, no
final, a ordem significa tudo, portanto, o elemento da lista ordenada é mais apropriado.

98

Figura 5-7: Listas ordenadas e não ordenadas transmitem diferentes significados.

Você também pode notar que os dois tipos diferentes de listas têm diferentes cores de fundo
adicionadas com CSS3. Portanto, ao usar elementos de agrupamento, você também pode
querer agrupar o conteúdo usando cores, conforme mostrado nas Figuras 5-6 e 5-7.
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

AGRUPANDO SEM FRATURAR


Um dos elementos de agrupamento que você provavelmente não deve usar para mais do que
agrupar a cabeça do restante da página (se é que isso) é a tag <hr>. O elemento hr (regra
horizontal) é simplesmente uma linha, mas deve ser usado de maneira judiciosa e escassa.
Veja, por exemplo, o seguinte trecho do poema “Kubla Khan” de Samuel Taylor Coleridge:

Em Xanadu fez Kubla Khan


Um imponente decreto de prazer:
Onde Alph, o rio sagrado, corria
Através de cavernas sem medida para o homem
Para um mar sem sol.

Então, duas vezes cinco quilômetros de solo fértil


Com muralhas e torres foram redondas;
E havia jardins luminosos com riachos sinuosos,
Onde floresceu muitas árvores de incenso;
E aqui havia florestas antigas como as colinas,
Envolvendo manchas ensolaradas de vegetação.

99
Mas oh! aquele profundo abismo romântico que inclinou
Abaixo a colina verde em frente a uma cobertura de cedro!
Um lugar selvagem! tão sagrado e encantado
Como abaixo de uma lua minguante foi assombrado
Por mulher chorando por seu amante demoníaco!

As três estrofes são divididas por um espaço duplo simples, como é o título. No entanto, se
as tags <hr> forem inseridas, como na listagem a seguir (HR.html na pasta deste capítulo em
www.wiley. com/go/smashinghtml5), você verá um resultado bem diferente em termos de um
sentido integrado de o poema.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/*A1A680,D9D7BA,D90404,8C0303,590202 */
body {
background-color:#A1A680;
color:#590202;
font-family:”Palatino Linotype”, “Book Antiqua”, Palatino, serif;
font-size:8px;
}
h4 {
PARTE II: PÁGINAS, SITES E DESENHOS

background-color:#D9D7BA;
color:#8C0303;
font-family:Tahoma, Geneva, sans-serif;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Too many HRs</title>
</head>
<body>
<header>
<h4>&nbsp;Kubla Khan</h4>
</header>
<article>
<hr>
Em Xanadu fez Kubla Khan<br>
Um imponente decreto de prazer: <br>
Onde Alph, o rio sagrado, corria<br>
Através de cavernas sem medida para o homem<br>
Para um mar sem sol.<br>
<hr>
Então, duas vezes cinco quilômetros de solo fértil<br><hr>
Com muralhas e torres foram redondas;<br>
E havia jardins luminosos com riachos sinuosos,<br>
Onde floresceu muitas árvores de incenso;<br>
E aqui havia florestas antigas como as colinas,<br>
Envolvendo manchas ensolaradas de vegetação.<br><hr>
Mas oh! aquele profundo abismo romântico que inclinou<br>
100 Abaixo a colina verde em frente a uma cobertura de cedro! <br>
Um lugar selvagem! tão sagrado e encantado<br>
Como abaixo de uma lua minguante foi assombrado<br>
Por mulher chorando por seu amante demoníaco!</article>
</body>
</html>

Como você pode ver, as tags <hr> estão todas dentro do elemento article , enquanto o
título é parte do elemento header. No entanto, na Figura 5-8, a página é mostrada em um
dispositivo móvel, e as regras horizontais não fazem nada para esclarecer e tudo para
fragmentar.

Onde sua página tem uma divisão principal, uma regra horizontal pode ser apropriada. No
entanto, mesmo assim, você deve adicionar o CSS3 para clarear o elemento hr para que ele
seja sutil — até mesmo a adição de transpartência ajudará. Bons designers sabem como
usar regras horizontais com moderação e subtilidade, mas os não-designers podem
facilmente fazer uma bagunça em suas páginas da Web com o uso excessivo de tags <hr>.

FIGURAS E LEGENDAS
Um dos elementos mais frustrantes em HTML5 é o uso de <figure> e <figcaption> juntos.
Colocando um elemento figcaption dentro de um contêiner de elemento de figure , você pode
assumir que eles formam um único objeto para layout e design. O elemento figcaption é
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

considerado filho da figure quando a figcaption é aninhada dentro de um elemento de figure.


No entanto, isso não significa que eles aparecerão na página juntos. De fato, alinhar uma
figura com sua legenda pode ser complicado.

101

Figura 5-8: Regras horizontais podem fragmentar o significado.

Em uma formatação CSS3 mais sofisticada, a figura e sua legenda podem ser tratadas como
um objeto com um relacionamento pai-filho. Só porque figure e figcaption são parte dos
elementos de agrupamento do HTML5, o que não significa que eles estejam formatados
juntos na página; em vez disso, significa que eles podem ser referenciados como um único
fluxo no conteúdo principal da página. Nesse meio tempo, você terá que trabalhar
cuidadosamente com os dois elementos juntos, conforme mostrado no seguinte programa
HTML5 (Figure_n_caption.html na pasta deste capítulo em www.wiley.
com/go/smashinghtml5) em que a legenda faz referência a uma imagem estilizada .

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/* 732D3F,A66879,D9C3B0,260101,F2F2F2 */
body {
background-color:#D9C3B0;
color:#732D3F;
PARTE II: PÁGINAS, SITES E DESENHOS

font-family:Verdana, Geneva, sans-serif;


font-size:11px;
}
aside {
margin-left:260px;
}
h1 {
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
background-color:#F2F2F2;
color:#A66879;
text-align:center;
}
figcaption {
color:#A66879;
background-color:#F2F2F2;
}
img {
margin:5px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Agrupamento de figura e legenda</title> </head>

<body>
<header>
102
<h1>Memórias de Baja</h1> </header>
<article>
<figure> <img src=”PuntaBufeo250.png” alt=”Punta Bufeo”><br> <figcaption>&nbsp;Tira de pouso na praia em
Punta Bufeo&nbsp;</figcaption>
</figure>
<section>
<p> Viagens para os melhores lugares em Baja são acessíveis por veículos off-road reforçados ou pequenos aviões.
As praias são imaculadas, sem aglomeração e organizadas. A pesca é mais recompensadora quando os peixes são
cozidos em tacos de peixe - uma iguaria a não perder. O <i>Mar de Cortez</i> (conhecido também como o<i>Golfo
de Baja</i> e <i>Mar Vermillion</i>) é um azul brilhante e claro. Claro que as praias são desertas e livres de detritos
deixados por outros.</p>

</section>
</article>
</body>
</html>

Você pode começar a pensar em elementos e seus descendentes. Nesse caso, o elemento
figcaption é um descendente do element figure. A Figura 5-9 mostra a legenda sob a figura,
ambas dentro do contêiner <figure>.

Como você pode ver claramente na Figura 5-9, o <figcaption> tem um estilo diferente,
embora seja um descendente do contêiner <figure>. No entanto, você não pode presumir que
um elemento da figcaption estará posicionado corretamente, como na Figura 5-9, apenas
porque é um filho do elemento de figure que ele contém.
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

103

Figura 5-9: Figura e figcaption usados com um gráfico.

ORGANIZANDO ARQUIVOS
Com um site simples, a organização dos arquivos é simples. À medida que a complexidade
de um site cresce, especialmente se vários designers e desenvolvedores estiverem
envolvidos, você precisará organizar seu site em diretórios separados e até em servidores,
às vezes. Nesta seção, você aprenderá sobre vários problemas organizacionais e como lidar
com a organização e o acesso aos arquivos.

ORGANIZAÇÃO DE IMAGEM E REFERÊNCIA


Um site típico terá uma ou mais pastas (diretórios) dedicadas a arquivos de imagem ou tipos de
arquivos de imagem. Na maioria dos exemplos até agora neste livro, os exemplos não usam
pastas separadas para imagens e as páginas HTML5 que as carregam; em vez disso, todos os
arquivos de imagem são colocados no mesmo diretório que os arquivos HTML5. Com um grande
número de páginas da Web e imagens para carregar nas páginas, uma maneira mais eficiente de
organizar um site é usar pastas separadas para diferentes agrupamentos de mídia. Como você
realmente organiza suas imagens depende de vários fatores diferentes. A seguir estão alguns
possíveis diretórios e subdiretórios que podem ser usados:
PARTE II: PÁGINAS, SITES E DESENHOS
„ Classificações Formais (Animais> Mamíferos> Rodentia> Myomorpha>
Mus musculus> Mickey)
„ Tópico (Férias> Onde Ir> Onde Ficar> O Que Fazer)
„ Processos (Cozimento> Preparando Massa> Preparando Massa> Configurando Forno>
Cronometragem)

Seja qual for o plano organizacional implementado, você precisa entender como acessar as
imagens, não importa como elas sejam organizadas. Todas as referências são para endereços
absolutos ou relativos.

REFERÊNCIA ABSOLUTA
Qualquer referência a uma imagem é por meio de um URL, seja uma listagem completa do
endereço ou uma referência apenas ao nome do arquivo. Um endereço absoluto começa com
http:// e inclui o caminho completo para o arquivo HTML5. Por exemplo, o seguinte é um
endereço absoluto para um arquivo:

http://www.smashinghtml5.com/organization/graphics/faces.html

Não importa de onde esse URL é chamado, ele o reconhece como o arquivo nomeado no final
do URL. O mesmo acontece com uma referência de origem (src) a uma imagem. Se o seu
código tiver o seguinte link, não importa onde a página da Web chamadora esteja localizada,
ele carregará nose.png.

<img src=”http://www.smashinghtml5.com/organization/graphics/nose.png”>
104
A página da Web chamadora poderia estar em um servidor totalmente diferente e iria para o
endereço absoluto.

A vantagem de usar endereços absolutos é que você não precisa se preocupar com o local de uma
página no seu site. Você não precisa nem se preocupar se estiver no mesmo servidor. No entanto,
isso deixa muito a desejar em termos de organização do site e, em seguida, há aqueles nomes de
URL longos que você precisa para obter o melhor resultado.

REFERÊNCIA RELATIVA
Uma referência relativa é relativa à posição da página de chamada em um site ou sua base
definida. No seu computador, sua página da Web tem uma posição de file em vez de uma
posição http. Por exemplo, o seguinte é a posição absoluta no arquivo somePage.html:

“file:///Macintosh HD/Users/billsanders/Desktop/HTML5/somePage.html”

Se eu tiver um gráfico na pasta HTML5/, posso usar seu endereço relativo para chamá-lo de
somePage.html. Por exemplo, se eu tiver anyGraphic.png na pasta HTML5, use a seguinte
referência relativa:

<img src=”anyGraphic.png”>
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

No entanto, se eu quiser organizar minhas imagens em uma pasta separada chamada images, dentro da
pasta HTML5, usaria o endereço relativo:

<img src=”images/anyGraphic.png”>

Você pode detalhar quantos níveis relativos desejar com cada nível separado por uma barra
(/). Por exemplo, um conjunto gráfico mais complexo seria semelhante ao seguinte:

<img src=”images/animals/dogs/greaterSwissMtDogs/myDoggy.png”>

Além de “drill down” você também pode querer “drill up”. Ao fazer drill up, você acessa
recursos nas pastas nas quais a sua página de chamada está. Por exemplo, suponha que você
tenha o seguinte caminho e sua página HTML5 na baseFolder.

topFolder/middleFolder/baseFolder

Para acessar um arquivo gráfico no middleFolder, você usaria o seguinte formato:

<img src=”.../anyGraphic.png”>

Se o gráfico estivesse no topFolder, você usaria o seguinte formato:

<img src=”../../anyGraphic.png”>
105
No detalhamento, você não nomeia a pasta de destino da sua página da Web de chamada. em
vez disso, você usa sucessivos ../ caracteres até que sua chamada esteja no nível desejado.
Isso significa que você pode detalhar o nível desejado e, em seguida, detalhar outro ramo.
Por exemplo, os seguintes exercícios até a topFolder, e, em seguida, dentro da topFolder,
detalham a pasta da imagem até o gráfico de destino:

<img src=”../../images/anyGraphic.png”>

A Figura 5-10 fornece uma ilustração gráfica geral do acesso a recursos em pastas de
nível superior e inferior.

.../imagens

imagens

qualquerArquivo.html

imagens/imagens

Figura 5-10: Caminhos Relativos.


PARTE II: PÁGINAS, SITES E DESENHOS

Conforme observado na seção “Configuração da sua base local”, anteriormente neste


capítulo, sua posição relativa pode ser definida para um local diferente daquele em que o
arquivo está localizado. Por exemplo, considere as duas páginas da Web a seguir (Earth.html
e Alien.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5). O primeiro
chama o segundo em um servidor diferente; no entanto, como a base da primeira página é
definida para o segundo servidor, a chamada é relativa. O primeiro arquivo é chamado
Earth.html e está localizado no domínio smashingHTML5.com na pasta smashing. No entanto,
sua base é definida como smashingHTML5.net na pasta smashing. Assim, ele pode usar uma
URL relativa para acessar o arquivo Alien.html em um servidor totalmente diferente.

Base definida para um servidor diferente


<!DOCTYPE HTML>
<html>
<head>
<base href=”http://www.smashingHTML5.net/html5/smashing/”>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Terra</title>
</head>
<body>
<h1>Esta é a terra</h1>
<a href=”Alien.html”>Decolar!</a>
</body>
</html>
106

Página da Web em um servidor diferente


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>O planeta
sensacional</title> </head>

<body>
<h1>Página de um servidor alienígena</h1>
</body>
</html>

Embora o domínio da primeira página (Earth.html) é smashingHTML5.com, a base é


definida como smashingHTML5.net. Como resultado, um link relativo para Alien.html,
que reside no smashingHTML5.net, é feito sem ter que usar um endereço absoluto.

PEGUE A RODA
Na primeira seção deste capítulo, você viu como usar o estado Refresh para alterar
automaticamente as páginas. Para se divertir um pouco com animação e com o estado
Refresh, dê uma olhada neste link para os trabalhos de Eadweard Muybridge:
CAPÍTULO 5: ORGANIZANDO UMA PÁGINA

http://138.23.124.165/collections/permanent/object_genres/photographers/muybridge/
contents.html#

O que é interessante sobre Muybridge é que, em 1878, ele foi capaz de criar filmes usando
uma série de fotografias. Então, bem antes de Thomas Edison inventar o filme, Muybridge
estava fazendo curtas-metragens (cerca de 12 quadros), dando-nos uma visão animada do
passado. A University of California, Riverside, preservou e animou o trabalho de Muybridge
usando arquivos GIF animados on-line. Para ver como você pode criar animações usando
páginas de atualização, baixe um dos GIFs animados da coleção de Muybridge no link acima
- estudos de locomoção - e extraia as 12 fotografias individuais do arquivo GIF. Você pode
extrair imagens GIF animadas com o Adobe Photoshop, o Adobe Fireworks e vários outros
programas. (Pesquise em "extrair imagens de GIF animado" em um mecanismo de pesquisa
para encontrar várias maneiras de obter imagens individuais. Se você tiver um Mac, poderá
usar o aplicativo Visualizar e arrastar as imagens individuais de Visualizar para uma pasta
separada).

Depois de extrair os arquivos GIF individuais, configure sua animação usando o estado
Atualizar com o elemento meta na seção <head> do seu programa. Para começar, use o
seguinte script HTML5 (an1.html na pasta deste capítulo em www.wiley.com/go/
smashinghtml5).

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> 107 107
<meta http-equiv=”Refresh” content=”0.1; URL=an2.html”>
<title>Image 1</title>
</head>
<body>
<img src=”an1.png” alt=”one”>
</body>
</html>

Os arquivos GIF individuais foram salvos como arquivos .png e renomeados an1.png a
an12.png (o an é para animação). Da mesma forma, os 12 arquivos HTML foram nomeados
usando an prefácio de an1.html a an12.html. Quando terminar, você terá um cavalo
ambulante. Se você vincular a 12ª página de volta ao primeiro, o cavalo continuará no
caminhão.
SMASHING HTML5

CAPÍTULO 6
6 EXIBINDO DADOS

COM TABELAS

QUANDO O HTML ESTAVA em sua infância, o exibir conjuntos de dados e para


elemento table foi usado para a maior parte da formatação geral de CSS3.
formatação da página. O advento do CSS
introduziu um novo conjunto de regras para Este capítulo explora as novas propriedades CSS3
formatação e a tabela foi abandonada como uma que você pode usar para realizar layouts gerais de
ferramenta de formatação - e por boas razões. No formatação, mas o foco principal do capítulo é a
entanto, alguns recursos de tabela em CSS3 foram exibição de dados tabulares. Dados tabulares nada
reintroduzidos para tipos específicos de mais são do que dados dispostos em uma tabela
formatação. Portanto, embora as tabelas ainda não para facilitar a leitura e não estruturas de layout
sejam ferramentas gerais de formatação, elas têm primárias.
funções-chave para
PARTE II: PÁGINAS, SITES E DESENHOS

PROPRIEDADES DA TABELA CSS3 PARA HTML5


Em uma declaração clássica de mensagens duplas, o World Wide Web Consortium (W3C), o
órgão oficial que define os padrões para HTML5, afirma enfaticamente: “Tabelas não devem ser
usadas como auxílios de layout”. Então, em uma nota após essa advertência, O mesmo
documento afirma: "Há uma variedade de alternativas ao uso de tabelas HTML para layout,
principalmente usando posicionamento CSS e o modelo de tabela CSS".

O que isto significa é que, em geral, os elementos da tabela não devem ser usados para layouts
além de dados tabulares. No entanto, se você precisar de tabelas em layouts, use as
propriedades da tabela CSS3.

A razão para essa admoestação é que quando o CSS se tornou disponível, todo o layout deveria
ser feito com CSS. A fim de não dissuadir designers e desenvolvedores de usar as propriedades
da tabela CSS3 (apenas), o W3C adicionou a observação de que não havia problema em usar as
propriedades e os atributos da tabela CSS3 no layout. Portanto, se você estiver familiarizado com
todos os avisos antigos sobre não usar elementos de tabela no layout, tenha certeza de que as
propriedades da tabela CSS3 são adequadas para o design — até certo ponto.

Para ver o que esse recurso CSS3 pode fazer por um design, a primeira etapa é examinar o valor
da propriedade de display CSS3 de table e table-cell. A propriedade display pode ser vista como
uma declaração de layout. Os valores dentro da exibição mapeiam como a exibição deve ser
organizada. Uma das maneiras mais fáceis de fazer uma exibição é usar os valores da tabela e
110 da célula da tabela. Pode ser útil pensar na propriedade da tabela como um grande contêiner e as
células da tabela como as células individuais no contêiner. No que diz respeito a designs mais
sofisticados, as table-cells estão muito próximas de uma tabela como uma ferramenta de design
e todos os problemas inerentes a ela. Então, use-o para aplicações simples, onde você só precisa
de algumas colunas para conseguir uma tarefa simples.

O formato CSS3 para configurar exibições usa classes predefinidas, uma classe de usuário ou um
ID. A propriedade de exibição é atribuída a uma tabela simples ou célula de tabela como um
valor. O seguinte é um exemplo (dentro de uma definição de estilo):

.story {
display: table;
}
.col1 {
display: table-cell;
width: 250px;
padding-right: 20px;
color:#cc0000;
}

A classe de story simplesmente define a propriedade de exibição como uma tabela. A classe col1,
que você pode colocar dentro da tabela, é exibida como uma célula da tabela e é útil pensar nela
como tal. O código a seguir (DisplayTable.html na pasta deste capítulo em www.wiley.com/go/
smashinghtml5) mostra como configurar um design que pode ser usado para exibir texto e gráficos
em duas colunas.
<!DOCTYPE HTML>
<html>
<head>
CAPÍTULO 6: EXIBINDO DADOS COM TABELAS

<style type=”text/css”>
body {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
h1 {
font-family:”Arial Black”, Gadget, sans-serif;
width:520px;
text-align:center;
color:#005500;
}
.story {
display: table;
}
.col1 {
display: table-cell;
width: 250px;
padding-right: 20px;
color:#cc0000;
}
.col2 {
display: table-cell;
width: 250px;
color:blue;
}
</style> 111
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Table with
Display Property</title> </head>

<body>
<header>
<h1>Copa do mundo de 2010</h1>
<div class=”col1”><img src=”copaImagens/us.gif”></div>
<div class=”col2”><img src=”copaImagens/england.gif”></div>
</header>
<br>
<article class=”story”>
<section class=”col1”> Durante a Copa do Mundo de 2010 na África do Sul, cada país foi representado por uma
equipe. Os Estados Unidos eram formados por jogadores de todos os EUA, onde o futebol foi jogado por equipes
jovens nos últimos 40 anos. No entanto, o futebol não pegou com o mesmo entusiasmo nos Estados Unidos
tem no resto do mundo— onde é conhecido como "futebol".
A equipe dos EUA fez bem, vencendo sua classe na primeira rodada.</section>
<section class=”col2”> Uma das poucas nações que tem mais de um país representado
na Copa do Mundo é o Reino Unido. Na primeira rodada, os Estados Unidos e a Inglaterra,
representados pela bandeira de St. George (em vez da Union Jack), empataram.
O empate encantou os americanos e desanimou os ingleses. Assim como os EUA,
a Inglaterra chegou ao segundo turno e, assim como os EUA,
eles também não conseguiram passar para o próximo nível.</section>
</article>
</body>
</html>
PARTE II: PÁGINAS, SITES E DESENHOS

A classe de story é um contêiner para ordenar diferentes seções que recebem classes col1 ou
col2. No entanto, as classes col1 e col2 não precisam ser colocadas em uma tabela. Observe
que os dois gráficos — um em cada uma das duas classes de célula de tabela — são
definidos usando tags <div> no contêiner <header>. Eles são usados novamente dentro do
contêiner <article> que recebeu uma classe de story (tabela). As duas seções foram definidas
como col1 e col2 , e embora elas não sejam vistas nos contêineres dos dois gráficos, você
pode ver que diferentes textos coloridos ajudam a mostrar seu status separado. A Figura 6-1
mostra o que você pode esperar em seu navegador.

112

Figura 6-1: Usando a propriedade de exibição CSS3 com valores de tabela.

Como você pode ver na Figura 6-1, o uso de células de tabela é uma maneira fácil de
configurar várias colunas. Quando você desenvolve sites mais sofisticados, deseja usar
definições de exibição CSS3 mais avançadas, além de tabelas e células de tabela, mas a
propriedade da table em CSS3 está disponível quando você precisa.

TABELAS E DADOS TABULARES


Tendo em mente que obteremos um choque elétrico se usarmos marcas de tabela padrão para
o design do site, esta próxima seção analisará de perto como usar tabelas para exibir dados
tabulares.
CAPÍTULO 6: EXIBINDO DADOS COM TABELAS

Os dados tabulares podem ser qualquer coisa, desde um conjunto de números a gráficos, até
um texto descritivo. Se você já pediu peças para o seu carro (ou qualquer outra coisa),
provavelmente as peças estão listadas em um formato tabular. Normalmente, você encontrará
uma descrição da peça, o número da peça, o modelo de ano para o qual a peça é, o modelo
do carro e o preço.

A chave para entender os dados tabulares é que eles são dispostos em linhas e colunas para
exibir informações em categorias comuns. Além disso, o propósito de uma tabela é
esclarecer informações para que o usuário possa encontrar o que ela precisa.

NOÇÕES BÁSICAS DE TABELA


Os elementos básicos de uma tabela são:

„ A tabela em si, <table>


„ As linhas da tabela, <tr>
„ As células da tabela, <td>
„ Os cabeçalhos da tabela, <th>

Geralmente, uma legenda da tabela <caption> é usada na parte superior da tabela. Uma tabela
clara geralmente tem cabeçalhos de coluna e linha claramente marcados. A célula no canto
superior esquerdo geralmente fica em branco para que a primeira coluna não marque os
cabeçalhos das linhas. no entanto, os padrões determinam que nenhuma célula seja deixada
vazia. Assim, a célula de canto em BasicTable.html contém "r / c" para preencher o espaço —
por enquanto, pelo menos. O exemplo a seguir mostra os elementos básicos da tabela em
uma tabela simples. A linha e as colunas têm títulos e as células de dados representam os
dados colocados nas linhas e colunas rotuladas.

<!DOCTYPE HTML> 113


<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Tabela Básica</title>
</head>
<body>
<table>
<caption>
Linhas e colunas em uma tabela
</caption>
<tr>
<td>r/c
<th>Coluna 1
<th> Coluna 2
<th> Coluna 3
<tr>
<th>Linha 1
<td>dados a
<td>dados b
<td>dados c
<tr>
PARTE II: PÁGINAS, SITES E DESENHOS

<th> Linha 2
<td>dados x
<td>dados y
<td>dados z
</table>
</body>
</html>

Um dos aspectos mais interessantes das tags de tabela é que as tags de fechamento são opcionais.
Nenhuma prática recomendada sugere que as tags de fechamento sejam usadas ou não. Formatar
o código para que as linhas sejam claramente delineadas é importante para entender o que você
vê. Ao não incluir as tags de fechamento da célula da tabela, o código parece ser muito mais
claro e menos confuso, e isso é bom. Assim, as tags da célula de fechamento serão deixadas de
fora, a menos que colocar uma delas ajudará a esclarecer o que está acontecendo na listagem. A
Figura 6-2 mostra o que você verá ao iniciar o arquivo em um navegador.

114

Figura 6-2: Uma tabela básica.

Observe que, enquanto as tags <th> t fazem com que o texto seja mostrado em negrito, a
tabela <caption> não. Isso pode ser corrigido com CSS3, assim como o resto da tabela para
torná-la mais útil. No entanto, para começar com as tabelas, tudo o que você precisa
entender é o básico.

ESTILO DE UMA TABELA


Você não usa tabelas para trabalhos de estilo geral, mas isso não significa que você pode ignorar
o estilo da tabela em si. A boa notícia em HTML5 é que as bordas nas tabelas não são um estado
padrão como nas versões anteriores do HTML. Na verdade, o atributo de borda da tabela não é
mais suportado em HTML5. Se você quer linhas ao redor das células, você tem que assumir essa
responsabilidade e adicioná-las usando CSS3. Bordas em torno de células ou qualquer outra coisa
deve ser feita de forma criteriosa ou (na opinião de muitos designers) de forma alguma.

ADICIONANDO BORDAS COM CSS3


O renomado pensador do design da informação, Edward Tufte, adverte que as fronteiras podem
sobrecarregar tanto o histórico que os dados são difíceis de ler e entender. Embora as bordas
separem claramente os dados tabulares, as bordas visíveis confundem as águas entre os dados,
tornando difícil diferenciar cada
CAPÍTULO 6: EXIBINDO DADOS COM TABELAS

ponto de dados. Para ver o que significa Tufte, digite o seguinte script (BadBorders.html
na pasta deste capítulo em www.wiley.com/go/smashinghtml5) e olhe para a página.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
table {
width:400px;
border-style:groove;
border-width:thick;
border-color:#FF5C19;
color:#C00;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
caption {
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:hsl(17, 60%, 40%);
padding:12px;
}
td, th {
border-style:solid; 115
border-width:thin;
border-color:#000;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Bordas estão cegando</title> </head>

<body>
<table>
<caption>
Clínica de cuidado de animais domésticos
</caption>
<tr>
<td>&#167;
<th>Gatos
<th>Cachorros
<th>Peixes
<tr>
<th>Alimentando
<td>Comida de gato é boa
<td>Doggy trata
<td>Yucky comida de peixe
<tr>
<th>Cuidado
<td>Postagem de risco
PARTE II: PÁGINAS, SITES E DESENHOS

<td>Uma bola de borracha


<td>Limpe o tanque e as bolhas de ar
</table>
</body>
</html>

A Figura 6-3 mostra os resultados, mas antes de examiná-los, examine cuidadosamente o código
CSS3. Além disso, o valor &#167 é um código de caractere para um símbolo inserido usando
o código em vez do teclado. Todos os caracteres UTF-8 podem ser digitados dessa maneira.
Certos símbolos, como os caracteres maior que (&gt;) e menor que (&lt;) devem ser
inseridos usando esse método; caso contrário, o analisador os lê como parte de uma tag.
Agora, dê uma olhada na Figura 6-3 para ver a página com as bordas.

116

Figura 6-3: As bordas podem interferir na clareza dos dados.

Ao tentar ler os diferentes elementos de dados, as bordas ficam no caminho. Para corrigir
isso, tudo o que você precisa fazer é adicionar preenchimento às bordas e à altura das
células. No estilo, altere as definições dos elementos td e th para o seguinte:

td, th {
height:50px;
border-style:solid;
border-width:thin;
border-color:#000;
padding:20px;
}

Tudo o que você alterou é a altura da célula e o espaço entre a borda e o texto
(preenchimento). No entanto, a diferença é significativa, como você pode ver na Figura
6-4.

Com o espaço adicional em torno dos dados, o valor da célula é muito mais claro. As
células não são muito bonitas, mas é fácil de cuidar — basta removê-las.
CAPÍTULO 6: EXIBINDO DADOS COM TABELAS

Figura 6-4: Adicionando espaço dentro das células da tabela.


117
CLARIFICAÇÃO DE DADOS COM CORES DE FUNDO
Nos velhos tempos, as impressões de computador eram feitas em papel com cores de
fundo alternadas para facilitar a separação de registros individuais. (Registros e linhas são
usados de forma intercambiável neste contexto.) Como você viu, as bordas pesadas que
se intrometem em cada célula de dados prejudicam a clareza. É por isso que as
impressões de computador mais antigas usavam cores de fundo diferentes. Portanto, em
vez de separar registros por bordas, você precisa ver como fazer isso usando cores
(consulte ColorRows.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5).

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
td {
width:70px;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
caption {
font-family:”Arial Black”, Gadget, sans-serif;
font-size:12px;
font-weight:500;
color:#360;
PARTE II: PÁGINAS, SITES E DESENHOS

background-color:hsla(113, 46%, 91%, 1);


}
.money {
text-align:right;
}
table {
background-color:#FFC;
}
.alt1 {
background-color:hsla(113, 46%, 91%, .8);
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Separação de Cores</title>
</head>
<body>
<table>
<caption>
Jogos de pensar doentes, Inc.
</caption>
<tr>
<th>Nome
<th>Acct No.
<th>Quantidade
<tr class=”alt1”>
118
<td>Joe Doaks
<td>ID065212
<td class=”dinheiro”> R$92.83
<tr>
<td>Jane Franco
<td>ID034986
<td class=”dinheiro”> R$17.78
<tr class=”alt1”>
<td>Fernando Rodriguez
<td>ID019921
<td class=”dinheiro”> R$221.83
<tr>
<td>Benny Jet
<td>ID073456
<td class=”dinheiro”> R$320.45
</table>
</body>
</html>

Por padrão, o elemento td justifica à esquerda o texto, o que é desejável na maioria dos
casos. No entanto, com números de ponto flutuante (números com pontos decimais), os
números são mais claros usando a justificação à direita. Então, uma das classes de folha
de estilo incluiu uma classe de dinheiro para justificar os dados financeiros.

A mesa inteira recebe um fundo amarelo claro. No entanto, a cor do plano de fundo da
tabela não afeta os materiais no contêiner <caption> . Assim, o elemento de caption obtém
CAPÍTULO 6: EXIBINDO DADOS COM TABELAS

um plano de fundo de cores compatível com os da tabela. Além disso, a tabela, embora
relativamente pequena, quer otimizá-la para pequenos dispositivos portáteis, de modo que o
texto é definido para 10px (10px é muito próximo do texto de 10 pontos). A Figura 6-5
mostra os resultados (com mais alguns registros adicionados para preencher a tela vertical)
em um dispositivo móvel.

119

Figura 6-5: Exibição de linha alternativa em uma tabela em um dispositivo móvel.

Usando uma cor com menos de 100% de opacidade (alguma transparência), o verde
alternado é ligeiramente misturado com a cor de fundo amarela clara. A cor de fundo da
legenda é a mesma da linha verde alternada, mas tem 100% de opacidade (sólido) e você
pode ver que ela tem um tom ligeiramente diferente. Os elementos th herdaram a cor de
fundo da tabela, mas funcionam bem como rótulos de colunas, sem outros ajustes.

As larguras das células são definidas para um valor não relativo (70px) porque a largura
reflete o fato de que a tabela é otimizada para exibição móvel. Como resultado, os nomes
podem ocupar linhas duplicadas e não prejudicar o design nem a funcionalidade da tabela.
PARTE II: PÁGINAS, SITES E DESENHOS

TABELAS COMPLEXAS
O termo complexo implica tabelas que são difíceis de entender. Na verdade, tabelas
complexas são soluções para problemas complicados. Se você usa tabelas para organizar
dados que saem de um banco de dados, é bem provável que você possa usar uma tabela
bastante padrão com um conjunto de linhas e colunas medidas do mesmo tamanho.

Quando você começa a usar uma tabela para exibir dados de praticamente qualquer coisa,
incluindo dados provenientes de um banco de dados, você pode encontrar situações em que
algo acontece para alterar o conjunto de linhas e colunas, e você precisa fazer ajustes para
se adequar mais uma única linha ou coluna do que o originalmente planejado.

I Para entender tabelas complexas, você precisa entender a ideia de uma célula. Uma tabela
nada mais é do que uma coleção de células ordenadas em linhas e colunas. A interseção de
uma coluna e linha é a célula. Em HTML5, você cria células usando as tags <td> e <th>. A
Figura 6-2, anteriormente neste capítulo, mostra as células básicas organizadas em linhas e
colunas.

USANDO OS ATRIBUTOS DE ROWSPAN E COLSPAN


Para alterar a característica padrão de uma célula de uma interseção entre uma única linha e
uma coluna, é necessário usar os atributos, o elemento de rowspan e/ou colspan do elemento
td. Cada atributo recebe um valor inteiro positivo que expande uma célula para cobrir várias
120 linhas ou colunas. A Figura 6-6 mostra uma tabela padrão composta de células de tamanho
igual e uma tabela comparativa com linhas e colunas expandidas.

Figura 6-6: Uma tabela com células de tamanho igual e uma tabela com rowspan e
colspan.

A Figura 6-6 mostra que a primeira célula na Fila 2 na tabela inferior ocupou o espaço de
três células na Fila 2 na tabela superior. Na Coluna 5 da tabela inferior, tanto a Linha 1 como
CAPÍTULO 6: EXIBINDO DADOS COM TABELAS

a Linha 2 foram recolhidas em uma única célula ocupando ambas as linhas. Importante, a
tabela superior tem dez células e a tabela inferior tem apenas sete células. Quando você
codifica tabelas com rowspan e colspan, , você usa menos tags <td> em comparação a uma
tabela que não usa (consulte RowColSpan.html na pasta deste capítulo em
www.wiley.com/go/smashinghtml5).

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
caption {
font-family:”Arial Black”, Gadget, sans-serif;
color:#C60;
}
table {
font-family:Verdana, Geneva, sans-serif;
}
td, tr {
border-style:solid;
border-width:thin;
border-color:#ccc;
width:120px;
padding:5px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> 121
<title>Colspan e Rowspan</title>
</head>
<body>
<table>
<caption>
Rowspan e Colspan
</caption>
<tr>
<td rowspan=”2”>Linha A e Linha B
<td>Coluna 2a
<td>Coluna 3a
<td>Coluna 4a
<tr>
<td>Coluna 2b
<td>Coluna n 3b
<td>Coluna 4b
<tr>
<td>Linha C
<td>Coluna 2c
<td colspan=”2”>Coluna n 3c e Coluna 4c
</table>
</body>
</html>

Este exemplo usa uma borda cinza muito clara para que você possa ver melhor as extensões —
vertical e horizontalmente. No entanto, você não precisa das bordas para usar spans.
PARTE II: PÁGINAS, SITES E DESENHOS

Na verdade, sem bordas, pode ser difícil distinguir onde as extensões realmente existem, o
que pode ser uma coisa boa. A Figura 6-7 mostra a tabela real com as duas extensões.

Figura 6-7: Adicionando extensões verticais e horizontais.

Você pode ver que a tabela na Figura 6-7 tem 10 células onde uma tabela completa de 4
por 3 teria 12. Da mesma forma, na listagem, você pode ver dez tags <td>. Tanto o
colspan quanto o rowspan podem ser um pouco complicados, mas se você pensar neles em
termos de fusões de células, eles serão um pouco mais fáceis de entender e trabalhar.

VÃOS PRÁTICOS EM TABELAS


122 Ao criar tabelas complexas usando colspan e rowspan, o exercício pode parecer um em
futilidade porque uma aplicação prática não parece tão óbvia. Alternativamente, você pode
procurar fazer tudo em CSS3 sem usar nenhum elemento ou atributo da tabela. Portanto,
o seguinte mostra um cenário simples, mas típico, no qual as células abrangentes são uma
solução prática.

Considere uma empresa de desenvolvimento /design da Web que configurou o


gerenciamento de projetos usando tabelas como uma maneira simples de acompanhar o
andamento de um projeto. A equipe de produção é dividida nos seguintes grupos, cada um
com um registro separado:

„ Coordenador de equipe (1)


„ Equipe de projeto (4)
„ Projeto rico interativo da aplicação (RIA) (2)
„ Desenvolvimento de front-end (3)
„ Desenvolvimento de back-end (2)

As colunas do projeto incluem o seguinte:

„ Uma tarefa
„ Um projeto
„ Team Membros da equipe
„ Data de vencimento
CAPÍTULO 6: EXIBINDO DADOS COM TABELAS

Isso deve ser simples o suficiente para entender e complexo o suficiente para ser útil. A
ironia de fazer essa tabela é adicionar as extensões onde apenas um item está na célula. É
quase contra-intuitivo porque a coluna dos membros da equipe terá várias linhas nas outras
células que têm um rowspan tamanho de equipe igual ao tamanho da equipe. O programa a
seguir (SpanProject. html na pasta deste capítulo em www.wiley.com/go/smashinghtml5)
ilustra como isso é feito.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/* F2F0E6,595443,A6A08D,3A3F59,8D91A6 */
caption {
font-family:”Arial Black”, Gadget, sans-serif;
color:#3A3F59;
}
table {
font-family:Verdana, Geneva, sans-serif;
background-color:#F2F0E6;
padding:5px;
border-collapse:collapse;
}
td, tr {
padding-right:8px;
font-size:11px; 123
border-collapse:collapse;
}
.bluish {
background-color:#8D91A6;
}
.brownish {
background-color:#A6A08D;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Rastreador de Projetos</title>
</head>
<body>
<table>
<caption>
Plano de projeto
</caption>
<tr>
<th>Tarefa
<th>Projeto
<th>Equipe
<th>Data de vencimento
<tr class=”bluish”>
<td>Coordenador
<td>Fogo Frio
PARTE II: PÁGINAS, SITES E DESENHOS

<td>Emma Peel
<td>01-21-2012
<tr class=”brownish”>
<td rowspan=”4”>Equipe de design
<td rowspan=”4”>Fogo Frio
<td>Sancho Panza
<td rowspan=”4”>10-01-2011
<tr class=”brownish”>
<td>John Watson
<tr class=”brownish”>
<td>Edward McMahon
<tr class=”brownish”>
<td>Vanna White
<tr class=”bluish”>
<td rowspan=”2”>Rich Interaction<br>
Design
<td rowspan=”2”>Fogo Frio
<td rowspan>Garth Algar
<td rowspan=”2”>11-12-2011
<tr class=”bluish”>
<td> John McIntyre
<tr class=”brownish”>
<td rowspan=”3”>Front End<br>
.

Desenvolvimento
<td rowspan=”3”>Fogo Frio
124 <td>Barney Rubble
<td rowspan=”3”>12-15-2011
<tr class=”brownish”>
<td>Ethel Mertz
<tr class=”brownish”>
<td>Paul Schaffer
<tr class=”bluish”>
<td rowspan=”2”>Back End<br>
Development
<td rowspan=”2”>Fogo Frio
<td rowspan>Louise Sawyer
<td rowspan=”2”>01-15-2012
<tr class=”bluish”>
<td>Andy Richer
</table>
</body>
</html>

Basicamente, as tags <td> que incluem um atributo rowspan são aquelas que precisam ser
grandes o suficiente para corresponder ao número de membros da equipe que estarão na
mesma linha. A Figura 6-8 mostra como a página aparece em um navegador.

A coisa mais importante a lembrar sobre as tabelas é que elas devem ser usadas de forma
criteriosa. Eles não são ferramentas de design gerais, mas você pode usar o CSS3 para
projetar a aparência do conjunto de dados tabulares nos elementos da table. Então pense,
“Dados tabulares, tabelas; conteúdo não tabular, somente CSS3. ”
CAPÍTULO 6: EXIBINDO DADOS COM TABELAS

Figura 6-8: Espaços de linhas múltiplos e diferenciais.

PEGUE A RODA
A Figura 6-9 mostra o resultado final da tabela de desafios. Ele tem cabeçalhos na
parte superior e inferior e as cores de plano de fundo das linhas estão em 20% e
40% de opacidade. Veja se você pode replicá-lo com HTML5 e CSS3.
125

Figura 6-9: Tabela de desafios.


PARTE II: PÁGINAS, SITES E DESENHOS

Sinta-se à vontade para alterar as regiões, cidades, equipes e comentários — especialmente se


você for um fã do New York Yankees. Você pode substituir cidades de todo o mundo e incluir
equipes de hóquei, rugby, futebol (futebol), críquete e mulheres. Apenas pegue a tabela para se
parecer com a da Figura 6-9.

126
SMASHING HTML5

CAPÍTULO 7
7 TUDO SOBRE LINKS

A MAIOR CAPACIDADE das páginas da Web, No entanto, este capítulo analisa como os links
além de exibir texto, gráficos e mídia, está carregam outras páginas da Web e como eles
carregando outras páginas. Usando páginas da são usados para acessar folhas de estilo
Web, as pessoas - incluindo designers e alternativas. Incluídos neste exame estão os
desenvolvedores - tendem a pensar em ir a algum diferentes atributos relacionados ao
lugar ou conseguir alguma coisa. Até pensamos carregamento de páginas, os detalhes de
em ajudar os usuários com mapas de sites e acesso a uma página e as propriedades CSS3
ferramentas de navegação que impliquem que eles usadas para os links de estilo e para o
estão em algum tipo de viagem. As questões de lançamento de recursos interativos nessas
navegação são importantes e são discutidas no propriedades.
Capítulo 8.
PARTE II: PÁGINAS, SITES E DESENHOS

O ELEMENTO DE LINK E SEUS PRINCIPAIS ATRIBUTOS


O principal elemento de link é o elemento a. Assim, a maior parte deste capítulo se concentrará
na tag <a>. No entanto, antes de fazer isso, é importante considerar a tag <link>. Ele também
carrega páginas e, embora os arquivos carregados usando o elemento de link não possam ser
vistos, eles são um tipo importante de recurso de carregamento de dados que precisa ser
entendido para um uso otimizado.

Os atributos usados com as tags <a> e <link> compartilham características de atributo com todos
os elementos HTML5, para que possam ser tratados como um atributo para <h1>, <body>, ou
qualquer outra tag HTML5. No entanto, os atributos usados com elementos de link tendem a se
concentrar no carregamento de arquivos (.html, .css, e.js) em vez de na aparência.

O elemento de link em si faz parte do conteúdo de metadados e é encontrado dentro do contêiner


de cabeçalho no topo de uma página da Web. No Capítulo 3, você viu como usar o link para
carregar arquivos CSS externos. Na primeira seção, mostro como configurar sua página da Web
para carregar folhas de estilo independentes mutuamente.

FOLHAS DE ESTILO ALTERNATIVAS


Em uma tentativa de tornar as páginas da Web tão acessíveis para o maior número possível de
usuários, os novos navegadores HTML5 têm menus pop-up que permitem a seleção de mais de
uma folha de estilos. Usando a tag <link> com o atributo rel definido para alternate stylesheet,
você pode incluir quantas folhas de estilo desejar, e o usuário pode selecionar o que ela mais
128
gosta. Este é o formato geral:

<link rel=”stylesheet” type=”text/css” href=”default.css” title=”default”>


<link rel=”alternate stylesheet” type=”text/css” href=”other.css” title=”alternate”>

A alternate stylesheet do valor de ref é uma entidade que é diferente do valor alternate que eu
abordo na próxima seção. Você pode carregar quantas folhas de estilo desejar; no entanto, o
usuário só pode alterar para uma folha de estilos alternativa — não para uma folha de estilos
comum.

Para ver como as folhas de estilo alternativas funcionam, o próximo exemplo começa com duas
folhas de estilo externas diferentes salvas em arquivos chamados warm.css e cool.css. Em
seguida, o código da página da Web cria o código que carrega a folha de estilo quente como
padrão e os usuários podem optar por alternar entre os dois estilos.

Warm Color Theme


@charset “UTF-8”;
/* Documento CSS */

body {
/*FFE0A3,7F7D78,FFFAF0,7F7052,CCC8C0 */
font-family:Verdana, Geneva, sans-serif;
font-size:11;
background-color:#FFFAF0;
color:#7F7052;
}
CAPÍTULO 7: TUDO SOBRE LINKS

h1 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#7F7D78;
text-align:center;
}
h2 {
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
background-color:#CCC8C0;
color:#FFE0A3;
}

Cool Color Theme


@charset “UTF-8”;
/* Documento CSS */

body {
/*056CF2,0F88F2,52B5F2,85D3F2,F2F2F2 */
font-family:Verdana, Geneva, sans-serif;
font-size:11;
background-color:#F2F2F2;
color:#056CF2;
}
h1 {
font-family:”Arial Black”, Gadget, sans-serif; 129
color:#52B5F2;
text-align:center;
}
h2 {
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
background-color:#85D3F2;
color:#0F88F2;
}

Os esquemas de cores quentes e frios usam código CSS3 idêntico, exceto pelos valores das
cores. Dessa forma, quando os comparamos, tudo, exceto a paleta de cores, será o mesmo.
A página da Web a seguir (AlternateStylesheets.html na pasta deste capítulo em www.
wiley.com/go/smashinghtml5) usa os dois arquivos externos CSS, sendo um o padrão
(stylesheet) e o outro o alternativo (alternate stylesheet):

<!DOCTYPE HTML>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”warm.css” title=”Warm View (Default)”> <link rel=”alternate stylesheet”
type=”text/css” href=”cool.css” title=”Cool scene”> <meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8”>
<title>Folhas alternativas externas de estilo</title>
</head>
<body>
PARTE II: PÁGINAS, SITES E DESENHOS

<h1>Quente e fresco</h1>
<h2>&nbsp;Alternar entre quente e frio&nbsp;</h2>
Para alternar, selecione Visualizar> Estilo de Página [ou Estilo] no menu do seu navegador e escolha o que você deseja.
Use o navegador Opera ou Firefox para iniciar e teste os outros navegadores HTML5.
</body>
</html>

O restante do uso depende do navegador. Ao testar os diferentes navegadores HTML5, no


momento de testar apenas os navegadores Opera e Firefox, na verdade, havia itens de menu
para selecionar diferentes folhas de estilo. Se você planeja usar folhas de estilo alternativas
com um conjunto geral de navegadores, teste-as primeiro com este programa. A Figura 7-1
mostra a configuração padrão no navegador Opera com a seleção da folha de estilo aberta.

130

Figura 7-1: Exibindo o estilo quente no navegador Opera.


CAPÍTULO 7: TUDO SOBRE LINKS

Como você pode ver na Figura 7-1, o menu View > Style do caminho do navegador Opera
mostra o título do estilo CSS3 padrão — Warm View (Padrão). Se os usuários quiserem
alternar para a folha de estilos alternativa, eles simplesmente selecionarão a cena legal. A
Figura 7-2 mostra o navegador Firefox selecionando a folha de estilos alternativa.

131

Figura 7-2: Alternando folhas de estilo no Firefox.

No Firefox, o menu para selecionar folhas de estilo é um pouco diferente, mas como o
navegador Opera, ele oferece aos usuários a oportunidade de alterar estilos
dinamicamente, se quiserem.

LINK ÍCONES
Além de usar o atributo rel para designar folhas de estilo, o valor mais usado é para
configurar um pequeno ícone para representar a página. Os ícones gráficos podem ser
atribuídos ao atributo rel usando o seguinte formato:

<link rel=”icon” href=”graphic.png” sizes=”32x32”/>

Nas versões anteriores do HTML, o valor de relação era o shortcut icon mas apenas o icon
também funciona.
PARTE II: PÁGINAS, SITES E DESENHOS

Ao configurar o exemplo a seguir (LinkIcon.html na pasta deste capítulo em www.


wiley.com/go/smashinghtml5), várias tags <meta> também são usadas. Eles contêm
informações sobre a página usada pelos mecanismos de pesquisa e, embora sejam sempre
úteis, não são necessários para configurar a relação de links para um ícone.

<!DOCTYPE HTML>
<html>
<head>
<meta name=”application-name” content=”HTML5, CSS3”/>
<meta name=”description” content=”HTML5 Linking icon”/> <meta
name=”application-url” content=”LinkIcon.html”/> <link rel=”icon”
href=”LinkAnchor.png” sizes=”32x32”/>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Ícone de página</title>
</head>
<body>
ÍconedeLink
</body>
</html>

Ao testar os ícones com quatro navegadores diferentes (Safari, Chrome, Opera, Firefox), os
ícones só apareceram nos navegadores Opera e Firefox. O Internet Explorer (IE) não foi
testado porque, no momento desta publicação, a Microsoft ainda estava desenvolvendo o IE9.
Além disso, nenhum dos navegadores móveis exibia o ícone da página. A Figura 7-3 mostra
onde os ícones (uma pequena âncora verde) aparecem nos navegadores Opera e Firefox.
132
a

Ícones no Firefox

Ícones no Opera
Figura 7-3: Exibindo ícones no Firefox e no Opera.

Ao criar um ícone, usei um arquivo .png definido como o padrão 32 x 32 pixels. Você
pode usar tamanhos diferentes, mas os limites não são claros; no entanto, eles são
definidos para onde a altura e a largura são as mesmas.
CAPÍTULO 7: TUDO SOBRE LINKS

PRÉ-BUSCA
Um novo valor HTML5 para o atributo rel no elemento de link é prefetch. Suponha que você
tenha uma página um pouco “pesada” — ela tem conteúdo grande, como gráficos, vídeo ou
áudio grandes. Antes que os usuários acessem a página, não seria bom pré-carregar a página
(gráficos e todos) para que, quando clicarem no link, tudo esteja pronto para eles? Isso é o que
a pré-busca é. Enquanto o navegador está ocioso, a pré-busca dá a ele algo para fazer. Por
exemplo, os seguintes usos usam pré-busca para carregar um vídeo:

<link rel=”prefetch” href=”Test.mov”>

Então, quando o usuário vai para a página com o vídeo, ele já começou a carregar - ou pode estar
completamente carregado e pronto para ser usado. Aqui estão alguns outros exemplos:

<link rel=”prefetch” href=”monkeys.html”>


<link rel=”prefetch” href=”monsterTrucksFull.png”>
<link rel=”prefetch” href=”http://www.sandlight.com”>
<link rel=”prefetch alternate stylesheet” =”http://wherever.org/fall.css”> href <link rel=”prefetch”
href=”sumVa.mp4” title=”Summer vacation”>

Antes de começar a planejar o uso do valor de pré-busca em todas as páginas com links para
uma página “pesada”, lembre-se de que seu valor depende de se os usuários provavelmente irão 133
para essa página. Por exemplo, suponha que você esteja criando um site para uma grande loja de
departamentos e os usuários selecionem entre várias exibições gráficas diferentes de produtos.
Se a página da Web buscar todos os gráficos na matriz de seleção, ela adicionará uma carga
pesada ao computador do usuário. Portanto, em vez de obter uma resposta nítida, o
carregamento da página selecionada pode ser lento porque possui todos os outros elementos
gráficos na memória que foram pré-buscados.

Uma maneira de otimizar a pré-busca é organizar suas páginas para que os links para uma
página pesada tenham um caminho que limite o pré-carregamento. As páginas que incluem
mídias que exigem muito tempo de carregamento devem ter um caminho para elas que tenha
apenas algumas opções com cargas pesadas.

OUTROS ATRIBUTOS DE LINK


Além do atributo rel, os outros atributos de link incluem:

„ href: Aponta para folhas de estilo e ícones externos.


„ media: Especifica o tipo de mídia para o link — tela, PDF, impressão; se nenhum valor
for atribuído à mídia, o padrão é "all".
„ hreflang: Fornece a linguagem de um recurso e é puramente consultivo.
„ type: Identifica o tipo de conteúdo do arquivo, como“ texto / CSS ” — os tipos MIME.
„ sizes: Especifica as dimensões de um ícone, como 32 x 32, 48 x 48 e outros tamanhos
usados para figuras gráficas usadas como ícones.
„ title: Tem um valor real ao usar folhas de estilo alternativas, mas, por outro lado, é aconselhável.

Como você viu nos exemplos usando o atributo rel, esses outros atributos são freqüentemente
usados em conjunto com rel.
PARTE II: PÁGINAS, SITES E DESENHOS

LINKS DA PÁGINA
O elemento a em HTML5, assim como em versões anteriores do HTML, é um dos
elementos-chave do idioma. Seu uso principal é servir como um meio para carregar uma
página usando o atributo href. Sem o atributo href, a tag <a> pode servir como um espaço
reservado, mas para todos os efeitos, o elemento a é realmente uma combinação do elemento
e do atributo. É por isso que tendemos a pensar em termos de uma href ou de uma tag <a
href> em vez de apenas um elemento por si só. Esta seção examina as nuances do elemento a
com o foco no atributo href, mas o primeiro tópico é usar o atributo rel com o elemento a.

MAIS DO ATRIBUTO REL


O atributo rel está relacionado a mais do que apenas o elemento link, e enquanto a maioria
dos valores rel designados ao link também se aplicam aos elementos a e area, apenas um
subconjunto é examinado aqui. A lista completa de valores aplicáveis para o atributo rel
no elemento a inclui o seguinte:

alternate
„ archives
„ author
„ bookmark
„ external
134
first
help
index
last
license
next
nofollow
noreferrer
prev
search
sidebar
tag
up

Destes, vários são para organizar a navegação, e estes serão discutidos mais no Capítulo 8.
Por exemplo, index, first, last, prev, e next (entre outros) referem-se à ordem de navegação.
Eu os apresento aqui para que, quando a navegação em um contexto maior for discutida no
Capítulo 8, você esteja familiarizado com os conceitos. Outros valores atribuídos ao atributo
rel no contexto de a elemento têm mais a ver com a identificação de determinadas
características, como o autor do link ou um link de ajuda, e eu os discuto primeiro.
CAPÍTULO 7: TUDO SOBRE LINKS

Relações de autor
Às vezes, uma página da Web inclui o autor da página e você pode entrar em contato com
ela. Para ajudar a identificar a relação, um valor de author pode ser atribuído ao link. Um
link comum para tais situações é a palavra-chave mailto: usada em uma atribuição href. Por
exemplo, a listagem a seguir (AuthorLink.html na pasta deste capítulo em
www.wiley.com/go/smashing html5) usa o valor do author junto com o link mailto.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/* FFF8E3,CCCC9F,33332D,9FB4CC,DB4105 */
body {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
background-color:#CCCC9F;
color:#33332D;
}
h1 {
background-color:#33332D;
color:#9FB4CC;
font-family:”Arial Black”, Gadget, sans-serif;
text-align:center;
} 135
h2 {
background-color:#DB4105;
color:#FFF8E3;
}
a {
text-decoration:none;
font-size:9px;
color:#DB4105;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Autor</title>
</head>
<body>
<header>
<h1>Tudo sobre HTML5</h1>
</header>
<article>
<header>
<h2> &nbsp;Aqui está a Sabedoria das Eras&nbsp;</h2> </header>

<section> Whoaaa!&#8213;<em>Sabedoria das Eras?</em>&#8213;Isso é muita responsabilidade! Por que não


&#8213;<em>O melhor que posso fazer desde 2010?</em>
<p>Quem escreveu isso de qualquer maneira?</p>
<h3>Ele fez!&#8595;</h3>
PARTE II: PÁGINAS, SITES E DESENHOS

<footer>
<nav><a href=”mailto:bill@billzplace.net” rel=author>Bill Sanders</a></nav>
</footer>
</section>
</article>
</body>
</html>

Ao criar o link de e-mail do autor, o elemento a é estilizado para se livrar do sublinhado —


o estilo padrão dos links - e o substitui por uma cor pequena, mas perceptível. Até certo
ponto, a página inteira atrai o foco para o link, como você pode ver na Figura 7-4.

136

Quando o cursor é colocado sobre o link para o e-mail do autor...


... uma mensagem aparece no canto inferior direito.
Figura 7-4: Usando o link de e-mail do autor.

O elemento cite pode ser confundido com o valor do author atribuído ao atributo rel em um
elemento a. Primeiro, cite é um elemento independente e, em segundo lugar, itálico o
conteúdo em um contêiner cite. Por exemplo, o snippet a seguir mostra como as duas
palavras-chave são usadas no mesmo parágrafo:

<p>A maioria das citações pode ser encontrada nos trabalhos de<a href=”http://www.willieS.com”
rel=”author”>William Shakespeare</a>,especialmente o famoso livro de referência, <cite>Os trabalhos completos de
Camford do bardo</cite>.</p>

O texto nesse código gera:

A maioria das citações pode ser encontrada nos trabalhos de William Shakespeare,
especialmente o famoso livro de referência Os trabalhos completos de Camford do
Bardo.
CAPÍTULO 7: TUDO SOBRE LINKS

Como você pode ver ao colocar esse código em uma página da Web, o valor do author é
consultivo e o elemento cite altera a aparência do texto. Em alguns aspectos, ambos são
consultivos, pois cada um chama a atenção para o conteúdo — um no código e o outro na
tela.

Tipos de links sequenciais e hierárquicos


Você pode organizar seus links usando os tipos de link hierárquico e seqüencial. Os valores
de rel hierárquica incluem index e up. O valor up refere-se a um nível acima na hierarquia, e
o index refere-se ao topo. Por exemplo, o código a seguir faz referência a um diretório que é
o topo da hierarquia, três níveis acima da página de chamada.

<a href=”/” rel=”index up up up”>Home</a>

O caminho mais claro no exemplo é feito referenciando o index e o número de níveis up.

Os tipos de links sequenciais incluem first, last, next, e prev com cada palavra-chave relativa
a uma página dentro de uma sequência. Por exemplo, o código a seguir vai para a próxima
página em relação a uma página na sequência:

<a href=”page4.html” rel=”next”>Page 4</a>

A implementação desses tipos de link é diferente para diferentes navegadores, e eles são mais
bem usados com o elemento de link para mapear a organização de um site em relação a uma 137
determinada página do que para direcionar uma página usando o elemento a.

ÂNCORAS DE PÁGINAS E IDS


Além de vincular diretamente a uma página, você pode vincular a um local específico em
uma página. Uma maneira de vincular diretamente a um local em uma página é atribuir uma
âncora a uma tag na página usando o atributo name. Por exemplo, o código a seguir irá pular
para a posição na página atual onde o nome do "desenvolvedor" é encontrado:

<a href=”#developer”>Desenvolvedores</a>

Para configurar o alvo usando uma âncora, basta atribuir uma tag ao nome da âncora da seguinte
forma:

<div name=”developer”>

Ao testar a técnica de âncora em navegadores HTML5, ela não funcionou em vários. Os


navegadores HTML5 pareciam ter adotado o uso de CSS3 para criar IDs e usá-los
exclusivamente. O exemplo a seguir (AnchorID.html na pasta deste capítulo em
www.wiley.com/go/ smashinghtml5) mostra como usar IDs como âncoras:

<!DOCTYPE HTML>
<html>
<style type=”text/css”>
/*D4CBA0,BD4A14,804130,4F3C33,6D7F59*/
PARTE II: PÁGINAS, SITES E DESENHOS

body {
font-family:Verdana, Geneva, sans-serif;
background-color:#D4CBA0;
color:#804130;
}
h1 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#4F3C33;
background-color:#BD4A14;
text-align:center;
}
h2 {
color:#6D7F59;
}
h3 {
margin-left:15px;
color:#4F3C33;
}
a {
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:11px;
color:#BD4A14;
text-decoration:none;
}
nav {
138 text-align:center;

}
#fsquirell { };
#cats { };
#dogs { };
</style>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Âncoras</title>
</head>
<body>
<article>
<header>
<nav><a href=”#fsquirrel”>Esquilos voadores</a>&nbsp; | <a href=”#cats”>Gatos</ a>&nbsp; | <a
href=”#dogs”>Cachorros</a></nav>
<h1>Cuidar de animais de estimação</h1>
Caso você não esteja interessado em Flying Squirrels, você pode selecionar as âncoras “Cat” ou “Dog” e ir direto ao seu
tópico de interesse. </header>

<section ID=”fsquirrel”>
<header>
<h2>Cuidado e manuseio de esquilos voadores</h2>
</header>
<h3>Hangares</h3>
<h3>Pistas de decolagem</h3>
CAPÍTULO 7: TUDO SOBRE LINKS

<h3>Treinamento de Vôo</h3>
<h3>Alimentos para companhias aéreas</h3>
<h3>Bagagem (esses esquilos têm muito disso ...)</h3>
</section>
<section ID=”cats”>
<header>
<h2>Cuidados e manuseio de gatos</h2>
</header>
<h3>Cesta Kitty</h3>
<h3>Correção de postagem</h3>
<h3>Caixa de areia</h3>
<h3>Comida para gatos</h3>
<h3>Rato de Brinquedo e Catnip</h3>
</section>
<section ID=”dogs”>
<header>
<h2>Cuidados e manuseio de cães</h2>
</header>
<h3>Casa de cachorro</h3>
<h3>Passeios</h3>
<h3>Quebrando a Casa</h3>
<h3>Comida para cães</h3>
<h3>Mastigar Brinquedos e Bolas</h3>
</section>
<footer>
<nav><a href=”#fsquirrel”>Esquilos voadores</a>&nbsp; | <a href=”#cats”>Gatos</ 139
a>&nbsp; | <a href=”#dogs”>Cães</a></nav>
</footer>
</body>
</html>

Ao usar IDs CSS3 para âncoras em dispositivos móveis, você descobrirá que seu design não
é tão limitado para os tamanhos de tela pequenos. Como você pode ver na Figura 7-5, as
âncoras facilitam a navegação em uma página em um dispositivo móvel.

Na Figura 7-5, a tela à esquerda é a página inicial de um navegador Opera Mini. Quando o
link Cães é tocado (ou clicado em um dispositivo não móvel), a página vai para a informação
do cão. Observe que o menu está na parte superior e inferior da página. De um modo geral,
se a sua página é longa o suficiente para exigir IDs para mover a página, você deve ter um
menu superior e inferior. Se a página é muito longa, você pode dar um ID ao elemento nav e,
em seguida, cada link da seção para o menu.

Se você quiser configurar um link diretamente para um ID ou âncora, basta adicionar


#name ao URL. Por exemplo, se em algum outro lugar do seu site (ou mesmo de outro
site), você deseja um link direto para o material sobre gatos. Você simplesmente criaria o
seguinte link:

<a href=”http://my.domain.com/AnchorsID.html#cats”>
PARTE II: PÁGINAS, SITES E DESENHOS

140 Figura 7-5: Usando IDs para âncoras.

Dentro do mesmo diretório, você escreveria:

<a href=”AnchorsID.html#cats”>

No Capítulo 8, você verá como usar IDs e âncoras no planejamento de uma estratégia de design
de navegação.

ALVOS
Até este ponto, todos os links foram aqueles que substituem a página chamadora por uma nova
página a ser carregada na janela do seu navegador. No entanto, você pode usar o atributo target
com a tag <a> para atribuir diferentes formas de exibição de uma página - conhecido como
contexto de navegação. Você pode selecionar os seguintes contextos de navegação usando target:

„ _self substitui a página atual; padrão se nenhum contexto for atribuído.


„ _blank abre a nova página em uma nova janela do navegador — um novo contexto de
navegação.
„ _parent abre a nova página no documento“ parent ”da página atual. O documento pai
geralmente é a janela do navegador que fez com que a página atual fosse aberta.
„ _top abre a nova página em todo o corpo da janela atual do navegador.
CAPÍTULO 7: TUDO SOBRE LINKS

Esses contextos de navegação são atribuídos conforme mostrado no trecho a seguir:

<a href=”somePage.html” target=”_blank”>

O sublinhado na nomeação de todos os contextos de navegação é necessário.


Então, algo como target =”blank” não funcionaria — tem que ser target=”_blank”.

Em versões mais antigas do HTML, os elementos frame e frameset eram amplamente usados
e ambos podiam ser nomeados como valores target. Da mesma forma, os contextos de
navegação _parent e _top seriam usados para abrir uma página em um quadro diferente. Em
HTML5, o principal uso do atributo target é selecionar o contexto de navegação _blank
sobre_self (padrão).

Novos contextos de navegação em navegadores de computador


Quando você usa o atributo target no elemento a para criar um contexto de navegação _blank
em seu computador, a página atual permanece na tela e a página solicitada aparece em uma
nova janela ou guia do navegador. O programa a seguir (Link2Target.html na pasta deste
capítulo em www.wiley.com/go/smashinghtml5) é uma ilustração simples de como isso
funciona.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
h1 { 141
font-family:”Arial Black”, Gadget, sans-serif;
color:#060;
}
a{
color:#900;
}
h3 {
font-family:Verdana, Geneva, sans-serif;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Abrir nova página</title>
</head>
<body>
<header>
<h1>Página original</h1>
</header>
<nav>
<h3><a href=”http://www.w3.org” target=”_blank”>World Wide Web</a></h3>
</nav>
</body>
</html>
PARTE II: PÁGINAS, SITES E DESENHOS

A Figura 7-6 mostra sua tela quando você testa o programa no seu computador e clica no link.

Dependendo da configuração do seu navegador, sua nova página pode aparecer em uma
nova guia, em vez de em uma janela separada. Você pode arrastar a guia para criar uma
janela separada para que ambas as páginas possam ser visualizadas simultaneamente.

142

Figura 7-6: Abrindo uma nova janela na tela do computador.

Novos contextos de navegação em navegadores de dispositivos


móveis
Quando uma página da Web usa um contexto de navegador _blank em um dispositivo móvel,
você não tem a capacidade de ver várias páginas em uma única janela de visualização. Em vez
disso, a página de chamada é tratada como uma página anterior (Opera Mini) que pode ser
acessada pressionando uma seta para trás ou algum outro método. O navegador Safari para o
iPhone tem um ícone de páginas no canto inferior direito que mostra o número de páginas
atualmente carregadas. Quando o usuário toca no ícone de páginas, até oito páginas podem ser
visualizadas em uma janela onde o usuário pode deslizar para visualizá-las em seqüência. A
Figura 7-7 mostra o contexto das páginas em um navegador Safari em um iPhone.

Se a página for aberta usando um contexto de navegação _blank no navegador Safari móvel, ela
não terá um link de retorno como no navegador Opera Mini; no entanto, ele é aberto em uma
nova janela do navegador ao lado da página de chamada.
CAPÍTULO 7: TUDO SOBRE LINKS

Página aberta em nova janela.

Chamando a página com um valor


_blank atribuído ao atributo de
destino.

143

Figura 7-7: Exibindo várias páginas no Safari no iPhone.

USANDO IFRAMES
O elemento iframe O elemento iframe declara um quadro in-line. Usando quadros embutidos,
você pode carregar outras páginas da Web ou outras mídias em uma única página da Web. O
elemento representa o que é chamado de contexto de navegação aninhado. A seção “Metas” deste
capítulo discute diferentes contextos de navegação em termos de diferentes janelas e guias. Um
nested browsing context ocorre quando uma página é aninhada dentro de outra página.
Essencialmente, uma tag <iframe> coloca uma página da Web dentro da outra.
PARTE II: PÁGINAS, SITES E DESENHOS

Você pode se perguntar por que você iria querer uma página da Web dentro de outra. Por que não
apenas abrir uma nova janela ou aba? Um dos motivos é permitir que os usuários tenham uma
ideia do que pode estar nas páginas e vinculem-se a qualquer que seja o usuário que seja mais
interessante, relevante ou apropriado.

Outros usos de iframes incluem colocar imagens em miniatura em uma página e permitir que o
usuário selecione diferentes miniaturas para exibir a imagem em tamanho real. Isso permite que
você crie uma única página da Web na qual o usuário pode visualizar várias imagens diferentes
selecionando links de imagens que exibem a imagem na mesma página — tudo isso sem precisar
usar JavaScript ou Ajax.

ANINHANDO PÁGINAS DA WEB


O elemento iframe HTML5 possui vários atributos; algumas das quais são novas no HTML5.
No entanto, para começar, tudo o que você precisa saber é a tag básica e como ela é
implementada. A seguir, a tag <iframe> dos bare bones com uma página da Web incorporada:

<iframe src=”http://www.w3.org”></iframe>

Essa tag simplesmente coloca a página da Web de origem no canto superior esquerdo da
página de chamada. Para ver melhor as opções e o controle sobre o iframe, o programa a
seguir (iframeWeb. html na pasta deste capítulo em www.wiley.com/go/smashinghtml5)
incorpora duas páginas da Web diferentes em si e adiciona vários atributos que você pode
ver.
144
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/*657BA6,F2EDA2,F2EFBD,F2DCC2,D99379*/
body {
background-color:#F2EDA2;
}
h1 {
font-family:Verdana, Geneva, sans-serif;
color:#657BA6;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Iframe Web</title>
</head> <body>
<!DOCTYPE
HTML> <html>
<body>
<article>
<header>
<h1>Antes iframes</h1>
</header>
<section>
<iframe name=”info” width=”480”, height=”320” sandbox=”allow-same-origin” seamless
src=”http://www.smashingmagazine.com”></iframe>
CAPÍTULO 7: TUDO SOBRE LINKS

<iframe name=”info2” width=”480”, height=”320” sandbox seamless src=”http://www.


w3.org”></iframe>
</section>
<footer>
<h1>Depois iframes</h1>
</footer>
</article>
</body>
</html>

</body>
</html>

Nas duas tags <iframe>, você pode ver vários atributos, alguns dos quais você viu em outros
elementos. O próprio elemento iframe possui sete atributos, além de atributos globais
HTML5. Os atributos do elemento são:

„ src
„ srcdoc
„ name
„ sandbox
„ seamless
width
145
„ height

Destes sete, srcdoc, sandbox, e seamless são novos. No momento em que este artigo foi escrito, o
srcdoc não foi implementado em nenhum dos navegadores testados, mas quando está, ele navega para
um arquivo de texto / HTML com informações específicas para o iframe. O atributo sandbox ,
disponível no navegador Google Chrome, é usado para restringir os tipos de conteúdo e
funcionalidade que podem ser fornecidos em um iframe, por motivos de segurança. O atributo
seamless também não foi implementado, mas quando estiver, todos os links serão abertos no contexto
de navegação pai, em vez do contexto de navegação aninhado — dentro do iframe. Os navegadores
mais antigos e os navegadores HTML5 que ainda não foram implementados ignoram todos esses
novos atributos de iframe. Portanto, você pode adicionar os atributos a tags <iframe> para configurar
bons hábitos para que, quando estiverem disponíveis, eles possam ajudar a adicionar segurança a suas
páginas da web. A Figura 7-8 mostra como as páginas incorporadas aparecem na tela do computador.

Os títulos h1 antes e depois das páginas incorporadas mostram que as páginas incorporadas
não estão sujeitas ao estilo CSS3 da página pai. Além disso, você pode ver que cada página
está dentro de outra página — antes e depois da inserção das outras duas páginas da Web.

Se você observar o código, verá que suas dimensões (320 x 480) sugerem a resolução de
visualização de um dispositivo móvel. No entanto, quando testado em um dispositivo móvel, o
iframe é aberto para exibir todas as páginas incorporadas. Nenhuma barra de rolagem aparece
nos navegadores móveis, portanto, a única alternativa para mostrar todo o conteúdo das páginas
incorporadas é permitir que elas sejam deslocadas horizontalmente e verticalmente no iframe.
Inicialmente, isso pode parecer um fator decisivo para iframes em dispositivos móveis; No
PARTE II: PÁGINAS, SITES E DESENHOS

entanto, no Capítulo 8, você verá como os iframes podem ser usados como sites da Web de
página única otimizados para navegadores móveis.

Figura 7-8: Incorporando páginas da Web dentro de uma página da Web.

146
PEGUE A RODA
Configurar um site próprio pode ser muito divertido, e uma das tarefas é fazer com que todos
os links funcionem em conjunto. No próximo capítulo, você aprenderá sobre as estratégias
de navegação, mas, por enquanto, precisa praticar um conjunto de links e ícones. Aqui está
seu desafio:

1. Crie três páginas da Web. Inclua várias seções com cabeçalhos e subtítulos de modo
que cada um vá além da área de visualização da tela vertical. (Em outras palavras, o
espectador teria que rolar para baixo para ver as seções inferiores).
2. Em cada uma das páginas da Web, configure um link para um ícone (consulte “Ícones
de link” neste capítulo). Cabe a você se deseja que cada página tenha um ícone de
página (todos diferentes) ou um ícone de site (todos iguais).
3. Crie duas folhas de estilo CSS3 diferentes (externas) e forneça estilos alternativos e
acesse-as em todas as páginas (consulte “Folhas de estilo alternativas” neste capítulo).
4. Crie uma terceira folha de estilo que não tenha nada além de IDs que serão usados
como âncoras. Coloque um ID em cada seção de suas páginas.
5. Finalmente, crie links em cada uma das três páginas que serão vinculadas às outras duas
páginas e a todos os IDs em cada página.

Faça este exercício divertido para você. Você pode criar páginas para fazer o que quiser. Não
há motivo para ser sério (a menos que você tenha um cliente em mente!). Então, não se
preocupe com o conteúdo, mas faça exatamente o que você gostaria.
SMASHING HTML5

CAPÍTULO 8
8 ESTRATÉGIAS DE
NAVEGAÇÃO

FALANDO AO REDOR UM site é geralmente Como este livro foca no HTML5, este capítulo
conhecido como navegação, e o HTML5 mostra como configurar diferentes sistemas de
reconhece esse fato introduzindo uma tag navegação usando elementos HTML5
<nav>. Com sites simples, a navegação é específicos. No entanto, antes de iniciar as tags
simples. No entanto, a navegação ruim ou mais específicas a serem usadas, você precisa
inadequada pode invadir praticamente qualquer entender alguns conceitos gerais de navegação
site. Da mesma forma, uma boa navegação pode da Web.
facilitar até mesmo o site mais complexo para o
usuário encontrar o que ele deseja.
PARTE II: PÁGINAS, SITES E DESENHOS

CONCEITOS DE NAVEGAÇÃO NA WEB


Ao pensar em navegação, os Web designers consideram

„ Design de interface: ennifer Tidwell descreve melhor o design de interface para a Web em
seu livro Designing Interfaces. Muitos dos processos e padrões que Tidwell discute são
abordados neste capítulo também, mas com nada perto da profundidade e do escopo, como
Tidwell faz, então se você quiser mais informações sobre este assunto, não deixe de
conferir seu livro.
„ Design da informação: Em um tópico muito mais amplo, o design da informação, Edward
Tufte mostrou como tipos diferentes de informações podem ser apresentados para que sejam
mais bem compreendidos. De especial interesse para o design de navegação na Web é a
noção de que a informação é a interface. Em outras palavras, a navegação é uma informação
organizada para que os usuários possam encontrar o que desejam.

Nem os conceitos de Tidwell nem de Tufte podem ser resumidos em uma definição clara. A ideia
de interação é a de responder a outra ação, como duas pessoas discutindo. Isso é interação social e
é algo que fazemos o tempo todo — incluindo interação mediada pelo computador, como bate-
papos por texto. O mesmo conceito se aplica ao tratamento de uma página da Web como um
substituto para outra pessoa. O usuário faz algo e a página da Web responde a partir de um
conjunto finito de opções criadas pelo designer. Quanto melhor o trabalho que o designer faz,
mais natural é para o usuário. Tentar criar um ambiente de interação confortável é o objetivo do
bom design de interação.
148
NAVEGAÇÃO DO DESIGNER E NAVEGAÇÃO DO USUÁRIO
O design de navegação contém um número quase ilimitado de possibilidades e você deseja
configurar sua navegação para que os usuários possam se locomover facilmente. A primeira coisa
a se perguntar é: “Quem é o usuário típico?” Então, diga a si mesmo: “Não sou eu, querida.” Se
você se lembra do título daquela velha música de Bob Dylan, você estará no caminho certo.
Jennifer Tidwell aponta que uma máxima no design da interface é: “Conheça seus usuários, pois
eles não são você!” Dois corolários podem ser adicionados a essa máxima:

„ Quanto melhor o designer, maior a probabilidade de a interface ser ruim.


„ Desenvolvedores excelentes quase sempre fazem interfaces ruins.

Então, se você deseja ser um grande designer ou desenvolvedor, provavelmente criará uma
interface ruim, a menos que você preste atenção. Eis o motivo: os grandes designers se
concentram no aspecto da página, não na capacidade dos usuários de navegar em um site. Os
designers querem mostrar sua criatividade e isso é bom. No entanto, quando essa criatividade é
tal que os usuários não podem navegar de uma página para outra, há um problema.

Uma das piores interfaces de usuário já criadas foi no site do Museu de Arte Moderna de Nova
York (MoMA). A navegação foi baseada em torno de uma pilha de cubos sem rótulos. Os
usuários deveriam colocar o mouse sobre cada cubo e um rótulo apareceria com o nome do item
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

vinculado. Para que o site do MoMA funcionasse, alguns códigos sofisticados eram necessários
sob o capô. O código aqueceria os berbigões do coração de qualquer desenvolvedor, mas levou a
um desastre porque, como o designer, o desenvolvedor estava pensando sobre o que ele era um
codificador talentoso e não sobre a experiência do usuário. Obtendo o nome do link para aparecer
quando o mouse se move leva algum talento de codificação que o designer não possui. Então, se
você quiser criar um sistema de navegação realmente péssimo, combine o melhor designer e o
melhor desenvolvedor!
Você pode ser um bom designer e / ou desenvolvedor e ainda criar boas interfaces? Claro, mas
você tem que pensar sobre isso. Você deve levar em consideração o usuário típico. Quem são
seus usuários? Eles são crianças ou adultos? O seu público é homem, mulher ou ambos? Qual
faixa etária? Qual é o estilo do usuário? Eles são empresários? Se sim, que tipo de negócios e
onde eles estão na organização? Eles são gerentes ou são as pessoas que fazem o trabalho real?
Descubra quem são seus usuários. (Você já sabe quem você é).

Se você é um designer e está criando um site para outros Web designers, deseja mostrar a eles
como você é um bom designer ou como eles podem se tornar designers melhores? Da mesma
forma, se você é um desenvolvedor e está criando um site para outros desenvolvedores, você
definitivamente deseja mostrar o código que permitirá que eles façam uma programação
seriamente doente. Os desenvolvedores querem ver algum código. No entanto, os designers não
querem ver o código — Eles estão mais interessados em ferramentas e técnicas de design, não em
código. (Claro designers, amor código CSS3!) Trabalhe o que sua base de usuários quer em seu
plano de navegação.

A melhor maneira de descobrir se sua interface é boa é testá-la com usuários comuns. Se você
está criando um site educacional para alunos da terceira série, deseja que alunos da terceira 149
série o testem. Da mesma forma, se você está vendendo alta costura para mulheres ricas, não
quer que as adolescentes testem sua navegação. Pode levar um pouco mais de tempo, mas você
terá um site muito melhor se testar seu site com o tipo de público que o usará.

Conhecer seus usuários não significa que você tenha um design desbotado ou use tecnologia de
ponta em seu site. O que significa é que você precisa conhecer seus usuários e descobrir o que
eles acham que seu site fará por eles. Você não vai mudar seus usuários. Faça o seu site para eles,
não para você. Se o site não for para seus usuários, eles não retornarão.

NAVEGAÇÃO GLOBAL
A navegação global em páginas da Web refere-se a categorias amplas de navegação que podem
ser colocadas em todas as páginas de um site. A navegação global ajuda os usuários a
acompanhar onde eles estão em um site, portanto, não importa para onde eles forem, eles verão
um roteiro familiar.

Ao mapear uma viagem de Santa Bárbara, na Califórnia, até Ocean City, em Nova Jersey, você
encontrará as principais rodovias interestaduais. Os links vão de I-210> I-15> I-40> I-44> I-70 e
finalmente I-76. Estes podem ser considerados os elementos globais na viagem de 3.000 milhas
de costa a costa. No entanto, entre as principais rodovias interestaduais, você encontrará vias de
conexão menores, como o CA-134E, que conecta a US-101 à I-210.
PARTE II: PÁGINAS, SITES E DESENHOS

Da mesma forma na navegação global, você deve considerar a navegação entre os


principais links. Por exemplo, suponha que você tenha um site grande com a navegação
global dividida em três categorias:

„ Animal
„ Vegetal
„ Mineral

Isso é certamente global e os links se encaixam bem em todas as páginas, como as


seguintes:

Animal | Vegetal | Mineral

No entanto, dentro de cada uma dessas categorias gerais, você precisará de algo mais
específico. Por exemplo, suponha que um usuário queira encontrar uma raça de cão — um
cão majoritário suíço. O caminho a seguir seria possível, dependendo do designer:

Animal
Mamífero
Cão
Raças
Maior cão suíço da montanha
150
Cada submenu terá muitas opções, por isso, vamos considerar quais elementos estão
disponíveis em HTML5 para lidar com esses caminhos de navegação da navegação
global.

Usando listas na navegação global


Uma maneira de abordar a navegação global é usar listas. Por exemplo, considere o
seguinte script (ListNavigation.html na pasta deste capítulo em www.wiley.com/go/
smashinghtml5) que usa navegação global e navegação local.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/* 3C514C,98AB98,D3DFD3,A6A47D,8C1616 */
body {
color:#3C514C;
background-color:#D3DFD3;
font-family:Verdana, Geneva, sans-serif;
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

}
h3 {
color:#8C1616;
background-color:#A6A47D
}
a{
color:#8C1616;
font-size:11px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Navegação Global</title>
</head>
<body>
<nav> <a href=”#”>Animal</a> | <a href=”#”>Vegetal</a> | <a href=”#”>Mineral</a> |
<ul>
<h3>&nbsp;Animais</h3>
<li><a href=”#”>Mamíferos</a></li>
<li><a href=”#”> Peixes</a></li>
<li><a href=”#”>Passáros</a></li>
<ul>
<h3>&nbsp;Mamíferos </h3>
<li><a href=”#”>Cães</a></li>
<li><a href=”#”>Gatos</a></li>
<li><a href=”#”>Outros</a></li>
<ul> 151
<h3>&nbsp;Cães</h3>
<li><a href=”#”>Golden Retriever</a></li>
<li><a href=”#”>Setter Vermelho</a></li>
<li><a href=”#”>Pastor alemão</a></li>
<li><a href=”#”>Maior cão suíço da montanha</a></li>
</ul>
</ul>
</ul>
</nav>
</body>
</html>

Apenas olhando o código, você pode suspeitar que esse tipo de sistema de navegação irá
sobrecarregar rapidamente a página. A Figura 8-1 mostra o que aparece, embora as escolhas
possíveis tenham sido drasticamente cortadas.
PARTE II: PÁGINAS, SITES E DESENHOS

152

Figura 8-1: Navegação de lista.

Com uma tela grande o suficiente e opções abreviadas como as usadas no exemplo, pode ser
possível ter um sistema de navegação usando as tags <ul>. No entanto, com o sistema de
lista de navegação em dispositivos móveis, o melhor conselho é: “Nem pense nisso!” A
Figura 8-2 mostra como a navegação ocupa a janela inteira em um dispositivo móvel.

Claramente, como você pode ver na Figura 8-2, é necessário algum outro sistema de
navegação para que o tópico possa ser visualizado. O sistema de navegação ocupa a página
inteira. Na verdade, parece mais um mapa do site, que discuto mais adiante neste capítulo,
mas não pode ser usado na navegação global.
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

153

Figura 8-2: A navegação de lista aglomera a área de exibição em um dispositivo móvel.

Menus suspensos e navegação global


Uma abordagem alternativa para navegação global usando links de texto é usar elementos
que podem fornecer mais informações em um local menor. Um desses elementos é a tag
<select>. O elemento select exibe o primeiro item em uma lista de opções que podem ser
vistas somente quando o usuário clica na janela de seleção que aparece. O formato é
composto de uma tag <select> junto com uma tag <option> aninhada no container de select.
Cada contêiner de option contém um objeto visível quando o menu suspenso é aberto. O
trecho a seguir mostra o formato básico:

<select id=”animals” name=”global1”>


<option value=”horses”>Horses</option>
<option value=”dogs”>Dogs</option>
...
</select>
PARTE II: PÁGINAS, SITES E DESENHOS

Essa pode ser uma maneira útil de colocar todos os links de um site em uma área pequena para
uso como um menu global. Você pode aninhar tantas tags <option> dentro do container
<select> que você quiser. Para ver como isso pode ser configurado como um sistema de
navegação global, o script HTML5 a seguir (SelectNav.html na pasta deste capítulo em
www.wiley.com/go/smashinghtml5) ilustra um exemplo simples.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Menu suspenso</title>
</head>
<nav>
<label for=”animals”>Animais&nbsp;</label>
<select id=”animals” nome=”global1”>
<option value=”horses”>Cavalos</option>
<option value=”dogs”>Cães</option>
<option value=”cats”>Gatos</option>
<option value=”rabbits”>Coelho</option>
<option value=”raccons”>Guaxinins</option>
</select>
<label for=”vegetables”>Vegetais&nbsp;</label>
<select id=”vegetables” nome=”global2”>
<option value=”carrots”>Cenouras</option>
154 <option value=”squash”>Abóbora</option> <option
value=”peas”>Ervilhas</option> <option
value=”rice”>Arroz</option>
<option value=”potatoes”>Batatas</option>
</select>
<label for=”minerals”>Minerals&nbsp;</label>
<select id=”minerals” nome=”global3”>
<option value=”tin”>Estanho</option>
<option value=”gold”>Ouro</option>
<option value=”copper”>Cobre</option>
<option value=”iron”>Ferro</option>
<option value=”mercury”>Mercúrio</option>
</select>
</nav>
<body>
</body>
</html>

Com tantas tags HTML5, você pode esperar uma página da Web muito maior. No entanto,
como mostra a Figura 8-3, muito pouco espaço é ocupado.

O código HTML5 não tem CSS3 para formatar o texto e, como você pode ver, a fonte do
corpo padrão é uma fonte serifada e a fonte do menu padrão é sans-serif. Quando você usa
CSS3 para estilo, trabalhe com a tag <select> para estilo em vez da tag <option> . Se você
estilizar o elemento option, poderá estilizar a família de fontes com bons resultados, mas
outros estilos são imprevisíveis entre diferentes navegadores.
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

Figura 8-3: Exibindo opções de menu com a tag <select>.

Se as categorias parecerem um pouco superficiais, você poderá adicionar mais detalhes em


um formato de estrutura de tópicos usando a tag <optgroup>. Com cada tag, um novo
subgrupo é adicionado. Você pode aninhá-los em vários níveis, se desejar. A listagem a
seguir (Optgroup.html na pasta deste capítulo em www. wiley.com/go/smashinghtml5) mostra
como o elemento optgroup é usado em conjunto com as tags <select> e <option>.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”> 155
155
select {

background-color:#F2EFBD;
color:#657BA6;
font-family: Verdana, Geneva, sans-serif;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Menu suspenso estratificado</title> </head>

<nav>
<label for=”animals”>Animais</label>
<select id=”animals” nome=”global1”>
<optgroup label=”Dogs”>
<option value=”hounds”>Cães</option>
<option value=”work”>Trabalhar</option>
<option value=”terrier”>Terriers</option>
</optgroup>
<optgroup label=”Horses”>
<option value=”race”>Corrida</option>
<option value=”work”>Trabalhar</option>
<option value=”show”>Show</option>
</optgroup>
<optgroup label=”Rabbits”>
<option value=”pets”>Animais de estimação</option>
PARTE II: PÁGINAS, SITES E DESENHOS

<option value=”pests”>Pragas</option>
<option value=”easter”>Páscoa</option>
</optgroup>
</select>
</nav>
<body>
</body>
</html>

Por algum motivo, diferentes navegadores têm exibições diferentes dos títulos de categoria
gerados pelo elemento optgroup. A Figura 8-4 mostra como o mesmo menu aparece em diferentes
navegadores.

Safari Firefox Chrome Opera Internet Explorer 9

156

Figura 8-4: Usando a tag <optgroup>.

Dos quatro navegadores testados, o Firefox se destaca como único. Os cabeçalhos de optgroup
estão em itálico e as combinações de cores são preservadas quando o menu é aberto. Os outros
navegadores exibem o esquema de cores correto somente quando o menu é fechado. (Isso dará aos
designers outro desafio? Sim!)

USANDO O JAVASCRIPT PARA CHAMAR UMA PÁGINA


VINCULADA
Qualquer sistema de navegação global precisa de uma maneira de chamar diferentes páginas da
Web e os menus suspensos precisam de uma maneira de chamar um item selecionado. Até este
ponto, a tag <a> fez um bom trabalho ao cuidar dos links, mas você provavelmente notou que os
menus suspensos não tinham links. A tag <select> precisa funcionar com o elemento form (que é
abordado em detalhes no Capítulo 14) e uma função JavaScript. (O Capítulo 12 contém mais
detalhes sobre como começar e usar JavaScript.) No lado do HTML5, o snippet a seguir mostra o
essencial:

<form name=”menuNow”>
<label for=”animals”>Animais</label>
<select id=”animals” name=”global1” onChange=”optionMenu()”>
<option value=”animals/horses.html”>Cavalos</option>
<option value=”animals/dogs.html”>Cachorros</option>
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

Os nomes dos elementos de form e select são importantes porque o JavaScript usa os
nomes como um caminho para a option selecionada. (Se você estiver familiarizado com
as matrizes, todas as opções serão tratadas como elementos da matriz).

O JavaScript é colocado em um arquivo separado porque, se você for usá-lo com um


sistema de navegação global, não será necessário reescrevê-lo em todas as páginas. O
JavaScript a seguir deve ser salvo em um arquivo de texto chamado globMenu.js.

function optionMenu()
{
var choice = document.menuNow.global1.selectedIndex;
var urlNow = document.menuNow.global1.options[choice].value;
window.location.href = urlNow;
}

O que isso reflete é o DOM (Document Object Model) HTML5. O document é a página da
Web, menuNow é o nome do elemento de form, global1 é o nome do elemento de select e
selectedIndex é a opção selecionada. Como o selectedIndex é um número entre 0 e o número
de opções no contêiner de tags <select>, ele pode ser usado para escolher o elemento da
matriz (opção), que é selecionado. Qualquer valor armazenado na opção é passado para a
variável chamada urlNow. Por exemplo, a seguinte linha tem um URL relativo de
animals/dogs.html:

<option value=”animals/dogs.html”>Cachorros</option> 157

A linha final no JavaScript, window.location.href = urlNow, tem a mesma função que a


seguinte linha HTML5:

<a href=”animals/dogs.html”>

Neste contexto, uma função JavaScript diferente teria que ser escrita para cada tag <select>
porque a função usa uma referência específica para aquela tag (global1). JavaScript mais
sofisticado poderia ser desenvolvido para usar variáveis para os diferentes nomes de
elementos, mas a função empregada aqui é relativamente curta e mais fácil de
implementar.

Para testar isso sozinho, crie páginas da Web simples com os seguintes nomes:

„ horses.html
„ dogs.html
„ cats.html
„ rabbits.html
„ raccoons.html

As páginas da Web podem ter apenas nomes — nada sofisticado. Em seguida, no mesmo
diretório, insira o seguinte código HTML5 (SelectNavJS.html na pasta deste capítulo em
www. wiley.com/go/smashinghtml5).
PARTE II: PÁGINAS, SITES E DESENHOS

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript” src=”globMenu.js” />
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Menu Suspenso</title>
</head>
<body>
<article>
<header>
<nav>
<form name=”menuNow”>
<label for=”animals”>Animais</label>
<select id=”animals” name=”global1” onChange=”optionMenu()”>
<option value=”animals/horses.html”>Cavalos</option>
<option value=”animals/dogs.html”>Cães</option>
<option value=”animals/cats.html”>Gatos</option>
<option value=”animals/rabbits.html”>Coelhos</option>
<option value=”animals/raccoons.html”>Guaxinins</option>
</select>
<label for=”vegetables”>Vegetais</label>
<select id=”vegetables” name=”global2”>
<option value=”carrots”>Cenouras</option>
<option value=”squash”>Abóbora</option>
<option value=”peas”>Ervilhas</option>
158 <option value=”rice”>Arroz</option>
<option value=”potatoes”>Batatas</option>
</select>
<label for=”minerals”>Minerais</label>
<select id=”minerals” name=”global3”>
<option value=”tin”>Estanho</option>
<option value=”gold”>Ouro</option>
<option value=”copper”>Cobre</option>
<option value=”iron”>Ferro</option>
<option value=”mercury”>Mercúrio</option>
</select>
</form>
</nav>
</header>
</article>
</body>
</html>

Teste a página usando o Google Chrome ou o Opera — no momento da redação, esses


eram os únicos dois navegadores que haviam implementado esse aspecto do HTML5.

Por enquanto, você não fará nada com os dois menus suspensos, mas, no final do capítulo,
terá a oportunidade de concluí-los com algumas adições ao arquivo JavaScript.
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

CRIANDO CONSISTÊNCIA
Uma das características mais importantes de um bom sistema de navegação é a consistência. O
usuário tem que saber onde encontrar o sistema de navegação, não importa onde esteja no site. Se
uma página tiver a navegação na parte superior e a próxima página não, no mesmo site, os
usuários podem não saber onde estão em relação a onde começaram ou para onde estão indo.
Uma das mais equivocadas peças de sabedoria sobre consistência pode ser encontrada no ensaio
de Ralph Waldo Emerson, “Autossuficiência”. Citando apenas uma parte do pensamento de
Emerson, muitas pessoas são induzidas a acreditar que a consistência é má. Essa famosa citação é
“. . . Consistência é o hobgoblin das mentes pequenas. . . O que Emerson escreveu
completamente é: “Uma consistência tola é o hobgoblin de mentes pequenas, adorado por
pequenos estadistas e filósofos e divinos. Com consistência, uma grande alma simplesmente não
tem nada para fazer. ”A razão pela qual a citação é importante é que Emerson nunca disse que
consistência é algo ruim. Consistência tola é o problema — não consistência. Quando se trata de
navegação, a consistência é essencial e evite consistentemente a consistência tola. Em outras
palavras, não coloque um sistema de navegação ruim e repita, porque é consistente. No que diz
respeito a uma grande alma que não tem nada para fazer, isso pode ser uma coisa boa. Com
consistência, você não precisa reinventar o sistema de navegação a cada nova página. Uma
grande alma teria diferentes consistências para diferentes públicos e tipos de sites; mas dentro do
site, a consistência é constante.
159
Em seu trabalho sobre agrupamento de elementos, Jennifer Tidwell fala sobre o uso de seções
codificadas por cores para ajudar os usuários a acompanhar onde eles estão. Usando cores, você
pode adicionar clareza à navegação global. As três categorias globais que foram selecionadas
para navegação — animal, vegetal e mineral — podem ser um bom exemplo de consistência
múltipla (cada menu é consistente com os outros menus). Para a categoria animal, você pode
usar tons marrons; para a categoria vegetal, tons verdes; e para a categoria mineral, tons de
níquel. Figura 8-5 mostra
um exemplo em que a navegação global está em vigor e as diferentes páginas têm um esquema
de cores que as diferencia umas das outras e, ao mesmo tempo, coloca cada uma no
agrupamento apropriado.

Figure 8-5: Global navigation and color grouping.


PARTE II: PÁGINAS, SITES E DESENHOS

Na Figura 8-5, observe que a navegação global incorpora a paleta de cores das respectivas
categorias. Seria uma consistência tola insistir que os esquemas de cores sejam os mesmos.
No entanto, a navegação global é consistente e cada página é consistente com as outras
páginas na mesma categoria.

NAVEGAÇÃO VERTICAL E HORIZONTAL


Além de usar o plano horizontal ao longo da parte superior e inferior de uma página para
navegação, os designers entre faces geralmente reservam parte do lado de uma página da
Web para navegação. A Figura 8-6 mostra o design geral dessa abordagem.

Links globais

Área de conteudo
Links de tópicos

Figura 8-6: Navegação vertical e horizontal.


160
Ao usar planos de link horizontal e vertical, o usuário pode ver todos os links globais e os
links para o tópico atual simultaneamente. Mais da área de visualização é ocupada pelo
sistema de navegação, mas com os monitores maiores se tornando padrão nos
computadores, isso não é um grande problema. Com os tablets eletrônicos, como o iPad,
que têm telas menores, ele entra na área de visualização utilizável, mas não muito. No
entanto, em telefones celulares, especialmente quando visualizados verticalmente, o espaço
de conteúdo é severamente reduzido.

Para criar uma área para uma área de link vertical com HTML5, basta configurar uma
página de duas colunas abaixo da área geralmente reservada para o logotipo e a barra de
navegação global.

APLICANDO PSEUDO-CLASSES CSS3


Ao lidar com sistemas de navegação mais complexos, você pode querer considerar pseudo-
classes CSS3. Estas são definições de classe adicionadas a um elemento. Para navegação, as
quatro pseudoclasses a seguir são importantes porque estão associadas à tag <a>:

„ link
„ visited
„ hover
„ active
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

Cada um tem a mesma formatação que outros elementos, mas eles são declarados com o
nome do elemento separado por dois pontos. Por exemplo, o trecho de código a seguir
mostra como a pseudo-classe em hover é estilizada:

a:hover
{
color:#A69055;
}

Quando esse código é adicionado a uma folha de estilos, sempre que o mouse passar sobre o
link (tag <a>), ele mudará a cor para a definição de hover. É claro que as cores definidas
para a tag <a> precisam ser diferentes do hover, mas você pode adicionar sinais sutis ou
grosseiros ao usuário de que o texto é um link. Da mesma forma, você pode alterar outros
recursos usando as pseudo-classes. Os exemplos a seguir darão uma ideia:

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
a {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
a:link {
161
color:#cc0000;
text-decoration:none;
}
a:hover {
font-size:14px;
}
a:visited {
color:#00cc00;
text-decoration:none;
}
a:active {
background-color:#ffff00;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Pseudo Classes em Links</title> </head>

<body>
<a href=”#”>Clique aqui </a>
</body>
</html>

Ao usar pseudo-classes para navegação, você deseja manter o usuário em mente. Adicionar
efeitos estranhos a pseudo-classes pode ser divertido, mas você precisa perguntar se os efeitos
ajudarão ou confundirão os usuários. Se você puder adicionar um efeito que os usuários associem
ao fazer escolhas, esse efeito provavelmente será útil.
PARTE II: PÁGINAS, SITES E DESENHOS

Por exemplo, aumentar a fonte quando o mouse termina, foi uma idéia tirada do encaixe do
Macintosh, onde os ícones aumentam quando o mouse passa sobre eles. No entanto, você
pode querer perguntar se transformar o link em outra cor e alterar a decoração do texto é uma
boa ideia para uma turma visitada. Isso realmente ajuda o usuário? Além disso, experimente
em diferentes navegadores e veja se os resultados são consistentes. Lembre-se de que só
porque você pode alterar a aparência de um link, isso não significa que você precisa.

COMPREENDER COMO MECÂNICAS DO HTML5 DA NAVEGAÇÃO


VERTICAL
A parte mais importante da criação de uma seção vertical a ser usada para navegação em
seu site é seccionar uma parte da página na qual você pode colocar os links. Este exemplo
usa a tag <aside> para definir a navegação vertical. No entanto, como é navegação, a tag
<nav> também é usada, de modo que qualquer referência JavaScript ao Document Object
Model (DOM) possa reconhecer a seção como usada para navegação. A listagem a seguir
(VertHor.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) mostra como.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/*141919,2D2B21,A69055,C9B086,FFB88C –Arte Japonesa */
body {
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
162 color:#2D2B21;
background-color:#C9B086;
font-size:12px;
}
.content {
display:table-cell;
width:600px;
padding:15px;
}
aside {
display:table-cell;
width:100px;
background-color:#FFB88C;
padding-right:5px;
}
h1 {
font-family:Papyrus;
color:#2D2B21;
text-align:center;
}
h2 {
color:#A69055;
}
a {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
text-decoration:none;
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

color:#141919;
}
a:hover {
color:#A69055;
}
.centerNav {
text-align:center;
}
.indentNav {
margin-left:15px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Serviços Web em abundância</title> </head>
<body>
<img src=”designLogo.png” width=”64” height=”66” align=”left”>
<nav class=”centerNav”> <a href=”#”>Design Gráfico</a>&nbsp;|&nbsp; <a
href=”#”>Desenvolvimento</a>&nbsp;|&nbsp; <a href=”#”>Design de Interface</a>&nbsp;|&nbsp;
<a href=”#”>Arquitetura do Site</a></nav>
<header>
<h1>Serviços da Web Honoráveis</h1>
</header>
<aside>
163 163
<nav class=”indentNav”> <a href=”#”>Visão geral</a><br> <br>
<a href=”#”>Navegação</a><br>
<br>
<a href=”#”>Assinatura de RSS</a><br>
<br>
<a href=”#”>Iframes</a><br>
<br>
<a href=”#”>Estilos de Navegação CSS3</a><br>
<br>
<a href=”#”>Identificação do Público</a><br>
<br>
<a href=”#”>Teste de Grupo de Foco</a><br>
<br>
<a href=”#”>Adicionando opções móveis</a><br>
<br>
</nav>
</aside>
<section class=”content”>
<header>
<h2>Design de Interface</h2>
</header>
Honorável Web Services tem serviços completos de design de interface. Você pode escolher na lista a seguir,
selecionando apenas os serviços desejados. <ul>

<li>Interfaces de link de texto simples</li>


PARTE II: PÁGINAS, SITES E DESENHOS

<li>Menus suspensos</li>
<li>Links de botão</li>
<li>Links do Datalist</li>
<li>Navegação iframe</li>
<li>Estilo de navegação</li>
</ul>
Selecione um dos links à esquerda para ver mais informações. Também não deixe de conferir nossos serviços em
design gráfico, desenvolvimento e arquitetura no menu ao longo da parte superior da página.</section>
</body>
</html>

Ao executar este programa, você pode ver que, embora isso forneça uma ampla variedade
de opções de usuários, fica claro. A navegação global ao longo do topo fornece todas as
opções principais. Em seguida, em cada página de uma coleção global, os usuários poderão
selecionar opções específicas para o tópico selecionado. A Figura 8-7 mostra o que você
pode esperar quando testar o programa em um navegador HTML5 na tela do computador.

164

Figura 8-7: Fornecendo opções de navegação horizontal e vertical.


CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

Quando você olha para a mesma página em um dispositivo móvel, o espaço ocupado à
esquerda, onde o menu vertical foi colocado, empurra o conteúdo para baixo. Os usuários
precisam rolar mais. Observe também que o menu horizontal na parte superior é
pressionado, de modo que agora ocupa duas funções. A Figura 8-8 mostra os resultados em
um navegador móvel.

Para dispositivos móveis, as barras de navegação horizontais de duas camadas — t que não
enviam conteúdo abaixo da área de visualização — podem atendê-lo melhor. Como você
pode ver na comparação das Figuras 8-7 e 8-8, a barra de navegação horizontal se divide em
duas camadas no dispositivo móvel sem ocupar muito espaço. No entanto, a barra de
navegação vertical entra na área de conteúdo e força mais conteúdo (incluindo a própria
barra de navegação) abaixo da área de exibição.

165

Figura 8-8: menus vertical e horizontal em um dispositivo móvel.

USANDO ÍCONES GRÁFICOS NA NAVEGAÇÃO


Além de usar texto para vincular a outras páginas, você também pode usar arquivos gráficos —
JPEG, PNG ou GIF. O uso de imagens gráficas para vinculação pode ajudar os usuários a
encontrar rapidamente o que procuram. Por exemplo, uma seta para a direita ou para a esquerda
pode ser rapidamente identificada como vinculada à próxima ou à última página. Tais imagens
PARTE II: PÁGINAS, SITES E DESENHOS

transcendem as diferenças de idioma e ajudam uma base de público mais ampla. Da mesma
forma, as crianças mais novas são mais propensas a entender certos símbolos do que certas
palavras.
.

O formato para usar imagens para identificar links é o mesmo que para o texto. No entanto, em
vez de colocar texto em um contêiner <a>, você usa uma referência de imagem. O trecho de
código a seguir mostra o formato básico

<a href=”page2.html”><img src=”arrowRight.jpg”></a>

Os usuários vêem um ícone de seta e clicam nele em vez de uma mensagem de texto.
Geralmente, os designers usam texto e uma imagem para enviar usuários para outra página,
conforme mostrado no próximo trecho:

<a href=”page2.html”><img src=”arrowRight.jpg”>Próxima página</a>

Além disso, alguns designers criam ícones com texto embutido no símbolo, como mostrado na
Figura 8-9.

Figura 8-9: Vincular imagem com texto.


.

Uma vantagem que os designers encontram ao usar o texto gráfico é que eles podem usar
166 qualquer fonte que quiserem sem medo de que o usuário não tenha essa fonte específica em seu
sistema. Também ajuda a evitar que os usuários se percam porque os símbolos gráficos com texto
são fáceis para o usuário identificar e entender.

SITES DE UMA ÚNICA PÁGINA COM IFRAMES


Pense em um site como uma zona de carregamento. Sempre que você clica em um link, você
carrega outra página — gráficos e tudo. Às vezes, tudo que você quer fazer é carregar apenas uma
coisa. Isso evita que o usuário tenha que esperar que todas as outras coisas sejam carregadas ou
recarregadas. Se você conhece um pouco de JavaScript e Ajax, você pode fazer isso, mas e com
apenas HTML5? A resposta é sim!
.

Esta seção examina como vincular gráficos e alterar o gráfico em um iframe. Ao criar
aplicativos projetados especificamente para dispositivos móveis, você deseja usar a menor
largura de banda possível. Ao alterar apenas uma coisa em uma página da Web, o dispositivo
móvel precisa apenas carregar ou recarregar um único item, portanto, o tempo de resposta é
menor.
.

VINCULANDO A UM GRÁFICO
Geralmente, quando pensamos em adicionar gráficos a uma página, pensamos na tag <img> tag. .
Afinal, essa tag é o que usamos para colocar gráficos em uma página da Web. No entanto, você
também pode usar a tag <a href> para carregar um gráfico. Em vez de atribuir um caminho de
página da Web à atribuição href , atribua um gráfico. Por exemplo, a linha de código a seguir
carrega uma página em branco com um gráfico:

<a href=”myGraphic.jpg”>Meu gráfico</a>


CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

Quando os usuários clicam no texto do link, a página atual desaparece e o gráfico aparece no
canto superior esquerdo de uma nova página.
.

Colocar um gráfico em um elemento iframe funciona da mesma forma que colocar uma página
da Web em um iframe (consulte o Capítulo 7). O link é para o destino no iframe e, em vez disso,
para outra página da Web. Isso significa que a página da Web atual permanece no lugar e o
gráfico é aberto no iframe.
.

O script a seguir usa ícones gráficos para a navegação. No entanto, em vez de navegar para outra
página, a navegação coloca um gráfico diferente na área de visualização principal — um iframe.
Fazendo versões em miniatura do gráfico a ser exibido (chamado de miniaturas), os usuários
vêem sua seleção primeiro no design de navegação. Ou seja, as miniaturas orientam os usuários
para a exibição em tamanho real.
.
FAZENDO E USANDO ÍCONES EM MINIATURA.
.

Para se preparar para o aplicativo, primeiro crie versões em tamanho original e miniaturas de todos os
gráficos. Os gráficos de tamanho normal e as miniaturas devem ter o mesmo tamanho. No exemplo a
seguir, os gráficos em tamanho total são definidos como 250 x 312 pixels e as miniaturas são definidas
como 63 x 79 pixels. As miniaturas precisam ser pequenas o suficiente para servir como
botões de navegação, mas grandes o suficiente para os usuários terem uma ideia de como os gráficos
167
maiores serão. Observe que as dimensões do iframe são iguais às dos gráficos de tamanho normal.
Uma vez que os gráficos estão preparados, eles são colocados em diretórios separados para as
miniaturas e gráficos em tamanho real. (Os nomes, polegares e retratos são usados no exemplo a seguir
[IFrameNavigation.html in this chapter’s folder at www.wiley.com/go/smashinghtml5].)

.
<!DOCTYPE HTML>
.
<html>
.
<head>
.
<style type=”text/css”>
.
/*F2CF8D,401E01,F2AA6B,8C3503,F28D52*/
.
body {
.
font-family:Verdana, Geneva, sans-serif;
.
background-color:#F2CF8D;
.
color:#401E01;
.
font-size:11px;
} .

.
h1 {
.
font-family:”Harrington”, Arial, sans-serif;
.
font-size:36px;
.
color:#8C3503;
.
margin-left:10px;
.
}
.
h4 {
.
font-family:”Arial Black”, Gadget, sans-serif;
.
color:#8C3503;
.
margin-left:86px;
.
}
aside {
PARTE II: PÁGINAS, SITES E DESENHOS

margin-left:10px;
}
h5 {
margin-right:40px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Navegação Iframe</title>
</head>
<body>
<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
<h1>Estúdio de Retratos</h1>
</header>
<aside>
<iframe name=”fullSize” width=”250”, height=”312” seamless src=”portraits/man.
jpg”></iframe>
</aside>
<section>
<nav> <a href=”portraits/man.jpg” target=”fullSize”><img src=”thumbs/thumbMan. jpg”></a> <a
href=”portraits/woman.png” target=”fullSize”><img src=”thumbs/thumb-Woman.png”></a> <a
href=”portraits/boy.jpg” target=”fullSize”><img src=”thumbs/
168
thumbBoy.jpg”></a> <a href=”portraits/girl.png” target=”fullSize”><img src=”thumbs/
thumbGirl.png”></a>
<h4>Selecione o retrato</h4>
</nav>
</section>
<section>
<h5> Todas as criações são de um artista pouco conhecido, <b>Mo Digli Anni</b>, de Puddle Spunky, Ohio.
Ao clicar nos botões de miniaturas, você pode enviar a imagem para a janela de visualização maior. </h5>
</section>
</article>
</body>
</html>

Quando você testar o exemplo, verá o retrato do homem e as quatro miniaturas do homem,
mulher, menino e menina abaixo da imagem dentro do iframe. A Figura 8-10 mostra a
página na tela do monitor do computador.

Como você pode ver na Figura 8-10, os usuários são instruídos a clicar nos botões de
miniatura para visualizar os diferentes “retratos”. A interface é razoavelmente intuitiva e os
usuários sabem o que esperar quando clicam em um dos botões gráficos. A melhor parte é
que somente o gráfico para o retrato selecionado é carregado no iframe em vez de carregar
uma nova página com todos os botões gráficos e outros materiais da página.
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

169

Figura 8-10: Imagens usadas para navegação.

USANDO IFRAMES EM DISPOSITIVOS MÓVEIS


Ao testar o aplicativo em um dispositivo móvel, os resultados dependiam do navegador
móvel HTML5 em uso. A Figura 8-11 mostra o navegador Opera Mini à esquerda; Como
você pode ver, o texto abaixo das imagens é formatado para ser legível. No entanto, no
momento do teste, o Opera Mini pareceu recarregar a página inteira quando cada botão foi
selecionado.

A imagem à direita na Figura 8-11 é do navegador móvel do Safari. O texto na parte inferior
não seguiu a formatação CSS3 e foi para o lado direito da tela. No entanto, as imagens no
iframe funcionaram perfeitamente e, à medida que cada botão de miniatura foi clicado, a
imagem em tamanho real foi carregada sem recarregar a página inteira.
PARTE II: PÁGINAS, SITES E DESENHOS

170
Figura 8-11: Navegadores móveis diferentes lidam com texto de maneira diferente.

Vários tipos diferentes de empresas e sites de redes sociais usam aplicativos semelhantes.
Por exemplo, fotógrafos profissionais usam miniaturas de suas fotos que os usuários clicam
para visualizar as imagens em tamanho real. Da mesma forma, os sites de redes sociais
podem usar páginas semelhantes para exibir e carregar fotos dos amigos de cada usuário
sem precisar sair da página.

Como os dispositivos móveis têm áreas de exibição tão pequenas, o uso de iframes nos
designs de navegação é bastante útil. Tentar clicar em pequenos links de texto pode ser
difícil, mas, como você pode ver nos dois navegadores móveis na Figura 8-11, os botões
gráficos são fáceis de ver e podem ser usados para carregar a imagem em tamanho normal ou
outros materiais no espaço do iframe.

PEGUE A RODA
Este capítulo tem dois desafios diferentes:

„ Desafio do JavaScript: O primeiro desafio é concluir a vinculação do JavaScript na


seção "Usando o JavaScript para chamar uma página vinculada". A página HTML5
chamada Select NavJS.html possui três tags <select> diferentes — uma para animais,
vegetais e minerais . Somente a tag <select> animal contém uma função de evento
JavaScript. Adicionando mais duas funções ao arquivo JavaScript (globMenu.js) que
são semelhantes à primeira função, mas com um nome diferente, você deve ser capaz
CAPÍTULO 8: ESTRATÉGIAS DE NAVEGAÇÃO

de criar funções para as tags <select> para os menus vegetal e mineral. (É basicamente
uma questão de copiar e colar a função original e colá-la duas vezes e depois apenas
alterar o nome da função.) Em seguida, basta adicionar o atributo OnChange às duas
outras tags <select>. As duas outras tags <select> têm nomes de global2 e global3 que
você pode adicionar às funções JavaScript — observe onde o global1 está localizado no
JavaScript original. (Não se preocupe se você não puder fazer este exercício! Sem
conhecer o JavaScript, pode ser complicado.)
„ Desafio Iframe: você pode colocar quantos elementos iframe em uma página desejar.
Suponha que você queira comparar diferentes conjuntos de objetos — carros, roupas ou
dispositivos móveis. Por exemplo, digamos que você esteja criando um site para
comparar diferentes modelos de Fords e Toyotas. Os Fords aparecem no iframe esquerdo
e os Toyotas na direita. Abaixo de cada iframe, há links que exibem diferentes tipos de
carros — econômica, sedans, híbrida, vans, caminhões e SUVs. Cada marca de
automóvel tem links abaixo dele para que você possa trazer os comparáveis — como
dois híbridos. Veja se você pode criar um site desse tipo — usando o conteúdo de sua
escolha. (A propósito, Edward Tufte, a autoridade de design da informação, recomenda
enfaticamente que informações comparativas sejam apresentadas para que os usuários
possam visualizá-las na mesma janela de visão — o que você pode ver em uma única
exibição).

Esses dois desafios usam os materiais deste capítulo e podem ser aplicados a muitos
aplicativos diferentes.

171
PARTE III
III MÍDIA EM
HTML5

Capítulo 9: Imagens
Capítulo 10: Som
Capítulo 11: Vídeo
SMASHING HTML5

CAPÍTULO 9
9 IMAGENS
UM DOS recursos mais interessantes do que provavelmente serão usadas, como colocá-las
HTML5 é a capacidade de usar arquivos onde você deseja em sua página da Web e como
Scalable Vector Graphics (.svg). Os artistas que otimizá-las para uso na Web. Grande parte deste
usam programas como o Adobe Illustrator que capítulo, por necessidade, deve usar aplicativos
criam gráficos vetoriais podem salvar seus gráficos que você talvez não tenha. Esses
arquivos como .svg e colocá-los diretamente em aplicativos incluem o Adobe Illustrator, o Adobe
suas páginas da Web. Como os arquivos .svg Photoshop e o Adobe Fireworks. No entanto, você
contêm gráficos vetoriais, as imagens podem pode substituir outros aplicativos, como o
ficar maiores ou menores sem perder sua Microsoft Paint ou o Corel Draw. Por fim, para
resolução, como acontece com os gráficos desenhar gráficos e fotografias, você terá que
bitmap. No entanto, você ainda pode usar seus confiar em suas próprias habilidades, tanto em
gráficos de bitmap favoritos no formato .jpg, termos de habilidades artísticas quanto na
.gif, ou .png para exibição estática. capacidade de usar programas de desenho gráfico.
(Em uma pitada, você pode baixar arquivos de
Este capítulo procura esclarecer o uso de gráficos imagem de domínio público da Web no tipo de
na Web em termos dos principais tipos de imagens arquivo que você precisa).
PARTE III: MÍDIA EM HTML5

NOÇÕES BÁSICAS DE ARQUIVOS DE IMAGEM HTML5


Uma verdade fundamental sobre arquivos gráficos na Web é que eles têm peso. O peso, no
contexto de uma página HTML5, refere-se ao tamanho do arquivo medido em termos do número
de pixels armazenados em uma imagem. De um modo geral, imagens maiores e de maior
qualidade têm mais pixels. A conseqüência do tamanho da Web é que os gráficos mais pesados
demoram mais para serem movidos pela Internet e carregados em uma página HTML. Se você já
viu uma página da Web aguardando o carregamento de um gráfico grande, sabe que pode ser
frustrante e fazer com que o dedo do botão do mouse comece a se mexer, querendo apertar o
botão Voltar no navegador.

Compreendendo algo sobre os diferentes tipos de arquivo e como otimizar seu tamanho, você
pode ajustar melhor os arquivos e aproveitar ao máximo as imagens na sua página, tanto em
termos de aparência quanto de tempo de carregamento.

FORMATOS E PIXELAS SÃO IMPORTANTES


O que mais importa em uma tela é a aparência de uma imagem. A aparência de uma imagem
depende em grande parte da resolução do monitor. Quanto maior a resolução da exibição de .
um monitor ou dispositivo móvel, melhor será a aparência da imagem. Ao mesmo tempo, .
um gráfico com mais informações vai parecer melhor do que um gráfico com menos informações.
Isso também significa que um gráfico que ocupa mais espaço na tela exigirá mais informações do
que uma imagem menor e levará mais tempo para carregar.
176
Para entender melhor o que precisa ser entendido para criar gráficos de boa aparência que
.

não consomem muita largura de banda e carregam rapidamente, é necessário observar mais
.
.

de perto os diferentes tipos de formatos gráficos da Web. As próximas quatro subseções


.

fornecem uma breve visão geral de cada formato.


.

Gráficos vetoriais escaláveis (SVG)


Gráficos vetoriais são desenhos criados usando fórmulas matemáticas que especificam pontos e
desenham linhas entre os pontos. Os gráficos de bitmap colocam “bits” de cores em pontos
diferentes. Por exemplo, se você desenhar uma linha reta em gráficos vetoriais, o computador
levará os pontos A e B e desenha uma linha entre eles. A mesma linha desenhada com gráficos
bitmap especifica todos os pontos para colocar bits para compor a linha. (Essa explicação
simplifica o processo, mas fornece uma ideia aproximada da diferença entre gráficos vetoriais e
gráficos de bitmap).

Como os gráficos vetoriais usam fórmulas, quando um gráfico é alterado, ele não fica pixelizado
como os gráficos de bitmap. Imagine uma linha de 100 pixels de comprimento que você deseja
alterar para 400 pixels de comprimento. Com gráficos vetoriais, tudo o que precisa ser mudado é a
distância entre dois pontos. Com gráficos de bitmap, você precisa adicionar mais 300 pixels. Se
você tentar alterar uma linha gráfica mapeada por bit em uma página da Web alterando sua
largura de 100 pixels para 400 pixels, ela estenderá os 100 pixels originais para cobrir uma largura
de 400 pixels, e é por isso que parece pixelado.

Outro novo recurso importante dos gráficos SVG é a capacidade de alterar dinamicamente
diferentes aspectos da imagem. Usando JavaScript, você pode pegar um arquivo .svg exibido
em uma página da Web e alterá-lo dinamicamente — não mudando figuras, mas alterando
realmente um parâmetro.
CAPÍTULO 9: IMAGENS

Felizmente, algumas ferramentas fornecidas recentemente ajudam a criar regiões separadas a


serem alteradas e geram o código necessário para fazer as alterações (consulte a seção
“Aplicativo para arquivos SVG dinâmicos a partir de arquivos do Adobe Illustrator CS5”
mais adiante neste capítulo).
.

Formato de Informação Gráfica (GIF)


A coisa boa sobre os arquivos GIF é que eles podem produzir alguns dos menores arquivos e
suportam a transparência do plano de fundo. Em grande parte, isso acontece porque eles podem
manipular apenas 256 cores e obter transparência desativando uma das cores. O conjunto de cores
conhecido como “Web safe” é baseado no fato de que arquivos GIF podem manipular apenas 256
cores. Esse formato é extremamente limitante para designers que desejam uma paleta de cores
maior e o formato não é recomendado para fotografias digitais que não sejam em preto-e-branco
com tons de cinza limitados.
.

Um formato para arquivos GIF é um arquivo animado. Se um GIF animado for carregado, ele
começa a ser reproduzido — folheando as imagens sequencialmente — exibindo ações
animadas. Como o GIF animado está contido em um único arquivo, ele pode ser carregado
diretamente em uma página HTML5 usando a tag <img>. Arquivos GIF animados típicos são
relativamente curtos. Caso contrário, o pacote de arquivos dentro do arquivo GIF animado é
muito grande para carregamento rápido.
.

Além do número limitado de cores disponíveis para as criações de GIF, a CompuServe e a


Unisys mantêm direitos autorais sobre o formato e estabelecem um requisito de licenciamento.
Em vez de se preocupar em ser processado, a maioria dos desenvolvedores simplesmente optou
por outros formatos gráficos.
177
Grupo de especialistas em fotografia conjunta (JPEG)
.
A maioria das fotografias digitais na Web usa o formato JPEG. Da mesma forma, gráficos mais
complexos com várias cores e tons preferem JPEG para preservar a aparência pretendida pelo
fotógrafo ou artista. Como resultado, a maioria das imagens em sites que exibem serviços ou
produtos estão no formato JPEG. Os arquivos JPEG tendem a ser maiores que os GIFs, mas
com o aumento da largura de banda na Internet, o tamanho não é tão problemático quanto era
antes.
.

O formato JPEG não oferece suporte a transparência, como arquivos GIF, e não possui um
formato animado. Além disso, os arquivos JPEG usam o que é chamado de compactação com
perdas, o que pode reduzir a fidelidade da imagem. Comparada à compactação sem perdas que
suporta uma replicação exata dos dados originais, a compactação com perdas é considerada mais
uma aproximação dos dados originais que compõem a imagem.
.

O formato JPEG padrão é de código aberto e não requer permissão de licenciamento.


Curiosamente, alguns recursos patenteados para JPEG podem exigir licenciamento, mas esses
recursos não foram incluídos na maioria dos arquivos JPEG para que os desenvolvedores e
designers possam usar livremente o formato JPEG.
.

Gráficos de rede portáteis (PNG)


Em parte, o formato PNG foi desenvolvido como uma alternativa aos requisitos de licença de
patente no formato GIF. No entanto, o desenvolvimento também foi motivado pelo desejo de ter
mais de 256 cores e uma exibição sem perdas. O formato PNG também suporta transparência e
um canal alfa.
PARTE III: MÍDIA EM HTML5

De uma só vez, nem todos os navegadores suportavam o formato PNG e alguns


desenvolvedores não o usavam, apesar de suas muitas vantagens. No entanto, esses dias já
se foram há muito tempo e qualquer navegador que suporte o HTML5 suportará o PNG.
Como resultado, qualquer desenvolvedor ou designer de HTML5 pode usar arquivos PNG
sem medo de que o navegador não possa carregá-los.

PRESERVANDO CAMADAS EM GRÁFICOS DA WEB


Uma das grandes vantagens dos arquivos PNG é que eles preservam as camadas. Designers
que usam ferramentas como o Adobe Illustrator, o Adobe Fireworks e o Adobe Photoshop
organizam seus gráficos em camadas. Uma aplicação simples de uma camada é rotular uma
fotografia. Por exemplo, suponha que você tenha uma foto rotulada e salva como um arquivo
JPEG, conforme mostrado na Figura 9-1.

178

Figura 9-1: Uma imagem JPEG com etiqueta incorporada.

Depois de terminar o gráfico e salvá-lo como um arquivo JPEG, você percebe que ele está
rotulado incorretamente. É uma glória da manhã, não uma margarida. Como o arquivo é
salvo no formato JPG, a camada com o rótulo Daisy não é preservada. Ao editar o arquivo,
você descobrirá que o rótulo está fundido com o restante do gráfico.

Com um arquivo PNG, não apenas as camadas são preservadas, mas se você usar um plano
de fundo transparente, ele recuperará o plano de fundo da sua página da Web e a
transparência será preservada. A Figura 9-2 mostra que a simples troca de camadas corrige o
problema da etiqueta e fornece um fundo transparente.
CAPÍTULO 9: IMAGENS

Com gráficos multicamadas, a preservação da imagem final da Web no formato PNG


economizará tempo de edição. Neste exemplo específico, em um arquivo JPEG, apagar o
rótulo errado e substituí-lo pelo correto em um espaço abaixo da imagem principal não é
muito difícil. No entanto, com gráficos mais complexos que incluem várias camadas, em
vez de refazer todo o gráfico, os designers podem apenas editar a camada.

179

Figura 9-2: Arquivo PNG com camada preservada e plano de fundo transparente
(mostrado em um editor gráfico).

O único problema infeliz em preservar camadas em um arquivo PNG é que ele aumenta o
tamanho do arquivo. O arquivo JPEG é de apenas 33 kilobytes (KB) e o PNG é de 225 KB.
No entanto, na próxima seção, você verá como reduzir o tamanho de um arquivo para poder
manter as camadas e ainda ter um arquivo carregado rapidamente.

TRABALHANDO COM TAMANHOS DE ARQUIVOS GRÁFICOS


Dados os diferentes tipos de arquivos gráficos da Web que podem ser carregados, a tentação
é usar o tipo que possui o menor tamanho de arquivo. De fato, em alguns casos, esse é o
caminho a percorrer. No entanto, quando o site precisa da mais alta qualidade, o truque é ver
como obter a mais alta qualidade com o menor uso de largura de banda — o formato com as
menores configurações. A menos que você esteja usando o formato SVG, lembre-se do
principal ditado gráfico de bitmap da Web:

Nunca altere as dimensões de um gráfico de bitmap com atributos HTML5 em um


elemento.
PARTE III: MÍDIA EM HTML5

Você pode alterar as dimensões de um gráfico com um aplicativo gráfico como o Adobe
Photoshop ou o Microsoft Paint. Mas quando você altera o tamanho de um gráfico de
bitmap usando atributos HTML5 como largura e altura, seus resultados, especialmente
quando você tenta aumentar um objeto, tendem a amassar ou esmagar o objeto. A Figura 9-
3 mostra três imagens GIF, e você pode ver que o gráfico ampliado tem bordas irregulares e
os pixels estão começando a aparecer como pequenas caixas.

Figura 9-3: Um GIF ampliado usando atributos HTML5.

A figura do meio é a original com dimensões originais. Se uma ferramenta gráfica fosse
usada para ampliar a imagem, ela apareceria sem suavização (sem bordas irregulares). Você
pode ver a mesma coisa com fotografias digitais, como mostrado na Figura 9-4.
180
A imagem original está à esquerda. A imagem ampliada mostra bordas irregulares e a
imagem está começando a ficar desfocada. A imagem na extrema direita é tão pequena que
é difícil ver muitos detalhes e determinar até que ponto parece esmagada (pixels juntos
para distorcer). Use o programa a seguir (ImageDistortion.html na pasta deste capítulo em
www.wiley. com/go/smashinghtml5) para testar alguns dos seus próprios gráficos.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Distorção gráfica da Web</title> </head>

<body>
<!-- Original -->
<img src=”photo.jpg” width=”100” height=”127”>
<!-- Enlarged 400% -->
<img src=”photo.jpg” width=”400” height=”508”>
<!-- Reduced 50% -->
<img src=”photo.jpg” width=”50” height=”63.5”>
</body>
</html>
CAPÍTULO 9: IMAGENS

181

Figura 9-4: Foto digital JPG ampliada usando atributos HTML5 para ampliar e encolher.

Para encontrar a largura e a altura de um gráfico, use o ponteiro do mouse para selecionar
o arquivo de imagem e, em seguida,

„No Windows, clique com o botão direito do mouse e selecione Propriedades →


Detalhes e leia os valores de Largura e Altura. Você pode encontrar as dimensões de
um arquivo gráfico movendo o mouse sobre o arquivo.
No Mac OS X, pressione Ctrl + clique no arquivo de imagem e selecione Obter
informações. Na seção Mais informações, veja as dimensões mostrando Largura x
Altura.

A maioria das ferramentas da Web, como o Dreamweaver, fornece dicas de código nas
dimensões da imagem. Da mesma forma, praticamente todos os programas de edição
gráfica exibem as dimensões da imagem quando o arquivo é carregado.
PARTE III: MÍDIA EM HTML5

USANDO APLICATIVOS GRÁFICOS PARA MODIFICAR O


TAMANHO DO ARQUIVO DE IMAGEM
Ao discutir o tamanho de uma imagem, dois significados diferentes são usados:

O tamanho do arquivo em termos de suas dimensões


O número de bytes que ocupa

Normalmente, nessa discussão, o contexto deve deixar claro qual sentido de tamanho está
sendo usado, mas na maioria das vezes, o termo tamanho refere-se ao número de bytes em
um arquivo, e dimensões se refere ao tamanho da imagem na tela.

O Adobe Photoshop é um aplicativo comumente usado para fazer ajustes no tamanho e na


qualidade dos gráficos. Além disso, o Photoshop fornece informações visuais que designers e
desenvolvedores podem usar para decidir quanto de redução de bytes o gráfico pode
aguentar antes de sua aparência sofrer. As Figuras 9-5 e 9-9 mostram esse processo. (As
Figuras 9-6 a 9-8 mostram informações sobre os arquivos e como eles aparecem em uma
página da Web).

182

Figura 9-5: Exibição de informações de tamanho e imagem na visualização de


quatro direções.
CAPÍTULO 9: IMAGENS

Alterando os tamanhos de arquivo JPEG


Começando com um arquivo TIFF muito grande que deve ser convertido em um arquivo PNG,
JPEG ou GIF, o processo de edição de arquivos começa com três níveis de qualidade — máximo,
médio e baixo. A Figura 9-5 mostra o arquivo TIFF original e três renderizações JPEG.

A imagem TIFF original no canto superior esquerdo tem mais de meio megabyte e precisa ser
reduzida de forma significativa e convertida em um formato que os navegadores HTML5 possam
ler. A figura superior direita no formato JPEG é definida para a qualidade máxima — 100 . Na
linha inferior, a figura inferior esquerda é de baixa qualidade definida como 2, e a figura inferior
direita é considerada de qualidade média, definida como 60. A menor arquivo da Web é apenas
8.6K e o maior é 127.1K. Uma rápida olhada mostra pouca diferença com essa imagem em
particular.

Para obter uma ideia mais definitiva, os dois extremos das configurações de qualidade da Web
são salvos no disco. Então (em um Macintosh) cada um é visto para as configurações de tamanho
como mostrado na Figura 9-6.

183

Figura 9-6: Verificando as propriedades do arquivo de imagem.

Ao observar a Figura 9-6, você pode ver que ambas têm dimensões idênticas (432 x 343), mas
uma tem 12 KB de informações e a outra tem 139 KB. O motivo para iniciar ajustes comparando
a melhor e a pior qualidade, como está implícito no tamanho do arquivo, é que as diferenças
visuais são mais aparentes. Estudos de percepção descobriram que o exame de diferenças de
minutos tende a encobrir essas diferenças, enquanto as diferenças extremas são claras. Por isso,
quando você começa a fazer ajustes, é melhor começar com as grandes diferenças. A Figura 9-7
mostra os dois arquivos em uma página da Web.
PARTE III: MÍDIA EM HTML5

Figura 9-7: Arquivos JPEG de alta qualidade e baixa qualidade em uma página da
Web.

Como você pode ver, a imagem de qualidade mais baixa (esquerda) e a imagem de melhor
qualidade (direita) são muito semelhantes. No contexto de outros materiais em uma página
da Web, algumas diferenças de qualidade podem aparecer. No entanto, as imagens que têm
as características dessas duas mostradas na Figura 9-7 não sofrem muito na aparência na
184 Web quando o tamanho do arquivo é reduzido.

Uma diferença maior com os tamanhos de arquivos JPEG pode ser vista com fotos digitais.
Na Figura 9-8, a foto à esquerda é a de menor qualidade (8K) e a da direita (115K) é a mais
alta, com tamanhos de arquivo correspondentes.

.
Figura 9-8: Fotos digitais de baixa e alta qualidade no formato JPEG.
CAPÍTULO 9: IMAGENS

As diferenças entre as duas fotos com as diferentes configurações são mínimas, mas a diferença
nos kilobytes é bastante grande — 8K versus 115K. Em um monitor de vídeo, a imagem na
Figura 9-8 à esquerda tem uma definição mais fraca em torno das bordas, mas se o público
principal tiver largura de banda muito baixa disponível, reduzir o tamanho dos arquivos JPEG
não reduzirá significativamente a qualidade da imagem.

A imagem na Figura 9-8 foi fotografada com uma webcam, e fotografias digitais tiradas com
câmeras de alta qualidade mostram muito mais detalhes que podem ser perdidos com a perda de
informações obtidas quando o tamanho do arquivo é reduzido. No entanto, fotos digitais de alta
qualidade precisam ser reduzidas significativamente em tamanho para serem práticas para a Web.

Boa iluminação economiza largura de banda


Independentemente do tipo de câmera que você está usando, uma imagem bem iluminada ficará
melhor do que uma bem mal iluminada. Tudo o que vemos (e sua câmera vê) é o reflexo da luz
dos objetos. Se você prestar um pouco de atenção à iluminação do seu assunto, suas imagens
digitais ficarão melhores.

Você não precisa de um estúdio de iluminação para tirar boas fotos, mas adicionando a luz
corretamente, sua foto digital ficará melhor, e você poderá remover mais informações do arquivo
e ainda assim ter a aparência boa o suficiente para colocá-las Na internet. Aqui estão algumas
dicas:

Use luz difusa. Se você tirar uma foto em um dia nublado, as fotos geralmente ficam
melhores. Isso é porque as nuvens difundem a luz. (Se você já viu aquelas fotos em que os 185
sujeitos infelizes têm que se alinhar e olhar para o sol, eles não apenas parecem rabugentos, as
fotos são superexpostas.) Para dentro de casa, aponte uma luz para o papel branco e deixe-a
refletir a luz. sobre o assunto. Um pedaço de papel alumínio amassado achatado faz um bom trabalho de
difusão da luz.
Use luz natural sempre que possível. Se você estiver tirando fotos internas, abra as
cortinas e os persianas e deixe a luz natural entrar.

Alterando os tamanhos dos arquivos PNG e GIF


Voltando agora para alterar o tamanho dos arquivos com arquivos PNG e GIF, as diferenças
tendem a ser mais significativas com a redução do tamanho do arquivo e as informações que o
acompanham. Dê uma olhada na Figura 9-9 e você poderá ver imediatamente que as diferentes
configurações têm diferentes níveis de qualidade.

Na Figura 9-9, as duas principais imagens são arquivos GIF e as duas inferiores são PNG.
Quando arquivos GIF são reduzidos, eles perdem cores. A imagem no canto superior esquerdo
tem apenas 32 cores e a da direita tem 256 (o que também não é muito). Ao comparar os
tamanhos dos dois arquivos GIF, o da parte superior esquerda é apenas a metade da direita.
Compare isso com os diferentes níveis de qualidade usando arquivos JPEG na Figura 9-5.

Os dois arquivos PNG são rotulados como PNG-24 (à esquerda) e PNG-8 (à direita). O formato
PNG-8 tem apenas 128 cores, enquanto o PNG-24 pode lidar com milhões de cores. O 8 e o 24
referem-se ao processamento de cores de 8 e 24 bits. Em poucas palavras, o PNG-24 é de uma
qualidade superior.
PARTE III: MÍDIA EM HTML5

186

Figura 9-9: Alterando os tamanhos dos arquivos PNG e GIF.

Alterando os tamanhos dos arquivos SVG


Ao contrário dos gráficos de bitmap, a alteração dos tamanhos dos gráficos SVG é
simples e não prejudica a aparência da imagem. O seguinte código de página da Web
mostra um arquivo .svg de 500 x 400 exibido em tamanhos diferentes, determinado pelos
atributos width e height: O script a seguir (SVG. html na pasta deste capítulo em
www.wiley.com/go/smashinghtml5) usa um único arquivo .svg para exibir vários
tamanhos diferentes sem distorção.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Teste SVG </title>
</head>
CAPÍTULO 9: IMAGENS

<body style=”background-color:#BAD9CB” >


<!-- Safari, Chrome e Opera -->
<img src=”logo500x400.svg” width=100 height=80>
<img src=”logo500x400.svg” width=200 height=160>
<img src=”logo500x400.svg” width=300 height=240><br>
<img src=”logo500x400.svg” width=500 height=400>

<!-- Firefox e Opera


<object width=100 height=80 type=”image/svg+xml” data=”logo500x400.svg”></object> <object width=200
height=160 type=”image/svg+xml” data=”logo500x400.svg”></object> <object width=300 height=240
type=”image/svg+xml” data=”logo500x400.svg”></
object><br>
<object width=500 height=400 type=”image/svg+xml” data=”logo500x400.svg”></object> -->

</body>
</html>

No momento em que este artigo foi escrito, o Firefox não usava a tag <img> com os arquivos
.svg , mas exigia a tag <object>. O navegador Opera funcionou com os dois formatos. A
Figura 9-10 mostra os resultados. Como você pode ver, o logotipo da Figura 9-10 parece o
mesmo, independentemente do tamanho em que foi exibido.

187

Figura 9-10: Uma imagem SVG alterada pela alteração de atributos sem distorção.
PARTE III: MÍDIA EM HTML5

Escala de cinza no Internet Explorer


Uma observação interessante ao trabalhar com tamanhos de arquivo é o uso de uma
propriedade CSS especial reconhecida apenas pelo Internet Explorer. Alguns designers
usam configurações de escala de cinza para reduzir o tamanho de seus gráficos ou para o
efeito de escala de cinza. Se você quiser uma opção interessante usando o Microsoft
Internet Explorer, você pode escrever um pequeno código CSS para converter arquivos de
cores em escala de cinza. Use o seguinte snippet em uma definição de estilo:

<style type=”text/css”>
img {
filter:gray;
}
</style>

A Figura 9-11 mostra uma figura colorida (Figura 9-8) que é transformada em escala de
cinza usando somente CSS.

188

Figura 9-11: Usando o filtro de escala de cinza CSS do Internet Explorer.

Usar essa técnica é uma maneira rápida de ver como a figura fica em uma escala de cinza
antes de renderizá-la em um modo de escala de cinza. Se você estiver atualizando um site e
quiser visualizar as imagens na página em escala de cinza, poderá adicionar o CSS e testá-lo
primeiro no Internet Explorer. Se você deseja manter o tamanho do arquivo baixo e a
qualidade aumentada, uma imagem JPEG em escala de cinza, em vez de colorida, cortará o
tamanho do arquivo pela metade.
CAPÍTULO 9: IMAGENS

COLOCAR IMAGENS E CRIAR PÁGINAS DA


WEB FLEXÍVEIS
A tag <img> é a principal usada para chamar gráficos, e embora o CSS3 seja a principal
ferramenta para levar as coisas para onde você quiser em uma página da Web, você pode
usar certos atributos <img> para ajudar. Esta seção examina as opções que você tem para
colocar o texto onde deseja ir em sua página da Web e como usar determinados atributos-
chave com a tag <img>.

POSICIONAMENTO DE IMAGEM COM O ATRIBUTO DE ALINHAMENTO


Para começar a analisar o posicionamento, considere o atributo align da tag <img>. A única
vantagem é que não há maneira mais fácil de posicionar a imagem rapidamente em relação
ao texto. O script a seguir (ImagePlacement.html na pasta deste capítulo em
www.wiley.com/ go/smashinghtml5) ilustra isso.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D*/
body {
background-color:#F2F2F2;
color:#0D0D0D;
font-family:Verdana, Geneva, sans-serif; 189
}
h1 {
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
color:#595959;
background-color:#049DBF;
text-align:center;
}
h2 {
color:#048ABF;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Posicionamento Simples</title>
</head>
<body>
<article>
<header>
<h1>Ginásio de Programadores da Web</h1>
</header>
<section>
<header>
<h2>Treino do Programador</h2>
</header>
<figure> <img src=”webDeveloper.gif” width=”250” height=”263” align=”left” align=”workout”>
</figure>
PARTE III: MÍDIA EM HTML5

Você sabe que tem pensado nisso. Já não é hora de você começar a trabalhar em suas &lt;alt&gt; ags? Crie seus
elementos e atributos em HTML5 na academia do desenvolvedor da Web. Depois de começar, você pode adicionar um
pequeno &lt;canvas&gt; trabalho de tag e entrar em algum CSS3 sério. O ginásio está aberto 24 horas por dia, 7 dias
por semana, para sua comodidade— e você pode acessá-lo em qualquer lugar do mundo! Todos os seus amigos
participaram e basta olhar para eles— Eles até adicionam vídeos às suas páginas da Web! Você também pode fazer
isso! Não deixe passar outro dia com você, desejando ser um desenvolvedor da Web. Começa hoje!</section>
</article>
</body>
</html>

O posicionamento direito e esquerdo da imagem é simples. Tudo o que é necessário é


atribuir os valores “left” e “right” ao atributo align . A Figura 9-12 mostra o posicionamento
da imagem nas posições esquerda e direita.

190

Figura 9-12: Posicionamento de imagem com o atributo align.

Na Figura 9-12, a página à direita parece bem, mas a página à esquerda encravou o texto
contra a imagem. Além disso, a página depende totalmente das configurações e do tamanho
da página do usuário. Em outras palavras, usar o atributo align para colocar imagens pode
fazer sua página parecer horrível. A Figura 9-13 mostra duas outras visualizações da mesma
página que transformam sua aparência.

Na Figura 9-13, a figura à esquerda mostra o texto espalhado por toda a página, enquanto a
figura à direita, um dispositivo móvel, mostra a imagem bem, mas o texto tem apenas uma
palavra de largura, serpenteando ao longo do lado da imagem. O resto está abaixo da área de
visualização.
CAPÍTULO 9: IMAGENS

Figura 9-13: Visualizações diferentes de uma página.

TAMANHO DE IMAGEM FLEXÍVEL COM UM POUCO DE JAVASCRIPT


No Capítulo 12, você entenderá melhor essas informações, mas preciso de JavaScript nesta
seção para mostrar como suas páginas podem ser mais flexíveis com imagens de tamanhos
diferentes. JavaScript tem uma pequena propriedade chamada navigator.appVersion. Quando
essa propriedade é colocada em um script, você pode descobrir informações sobre o
hardware que está sendo usado para carregar a página da Web. Se você descobrir que a
página está sendo carregada em um dispositivo móvel, em vez de carregar a imagem em
tamanho total na página da Web, ela carregará a página menor.

Para fazer isso funcionar, pegue o mesmo arquivo GIF usado para a página da Web original 191
criada na seção anterior e faça um segundo com cerca de um terço do tamanho do original.
Crie uma pasta e nomeie-a como flexImages e coloque os arquivos GIF grandes e
pequenos. Nomeie o arquivo grande, WebDeveloper.gif e o menor lilWebDeveloper.gif, , e
coloque-os na pasta flexImages. Em seguida, insira o programa a seguir (ImageFlex
Size.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) e salve-o no
mesmo diretório da pasta flexImages.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
var envir=navigator.appVersion;
envir=envir.substring(5,11);
var imageNow=new Image();
var showNow;
function showImage()
{
if(envir==”iPhone” || envir==”(iPhon”)
{
showNow=”flexImages/lilWebDeveloper.gif”;
}
else
{
showNow=”flexImages/WebDeveloper.gif”;
}
PARTE III: MÍDIA EM HTML5

imageNow.src=showNow;
document.pix.src=imageNow.src;
}
</script>
<style type=”text/css”>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D*/
body {
background-color:#F2F2F2;
color:#0D0D0D;
font-family:Verdana, Geneva, sans-serif;
}
h1 {
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
color:#595959;
background-color:#049DBF;
text-align:center;
}
h2 {
color:#048ABF;
}
img {
padding:5px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
192
<title>Tamanho Flexível da Imagem</title>
</head>
<body onload=”showImage()”>
<article>
<header>
<h1>Ginásio de Programadores da
Web</h1>
</header>
<section>
<header>
<h2>Treino do programador</h2>
</header>
<figure> <img src=”flexImages/WebDeveloper.gif” name=”pix” align=”left”> </ figure>

Você sabe que tem pensado nisso. Já não é hora de você começar a trabalhar em suas &lt;alt&gt; ags? Crie seus
elementos e atributos em HTML5 na academia do desenvolvedor da Web. Depois de começar, você pode adicionar um
pequeno &lt;canvas&gt; trabalho de tag e entrar em algum CSS3 sério. O ginásio está aberto 24 horas por dia, 7 dias
por semana, para sua comodidade— e você pode acessá-lo em qualquer lugar do mundo! Todos os seus amigos
participaram e basta olhar para eles— Eles até adicionam vídeos às suas páginas da Web! Você também pode fazer
isso! Não deixe passar outro dia com você, desejando ser um desenvolvedor da Web. Começa hoje!</section>
</article>
</body>
</html>
CAPÍTULO 9: IMAGENS

Primeiro, experimente o programa no seu computador. Você deve ver exatamente o que viu
quando testou originalmente (consulte a Figura 9-12). Agora, experimente em um navegador
para dispositivos móveis. Em vez de uma imagem grande que empurra todo o texto para um
lado, você vê uma imagem menor cercada por texto, como a do seu computador. Isso porque
a página da Web conseguiu usar o JavaScript para determinar se a página foi carregada por
um iPhone ou outra plataforma ou dispositivo.

Coloque o arquivo da página da Web e as duas imagens em sua pasta no mesmo diretório em
um servidor. Quando você testa, parece que foi feito para o iPhone, mas foi feito para o
iPhone ou qualquer outro dispositivo. Usando este e outro código JavaScript, você pode
fazer muito mais com HTML5 do que com apenas HTML5.

193

Figura 9-14: Exibindo um pequeno gráfico para um dispositivo móvel.

O JavaScript usado no exemplo é o mais minimalista possível. No entanto, a lógica disso


pode ser descrita da seguinte maneira:

Coloque o conteúdo de navigator.appVersion em uma variável chamada envir (abreviação


de environment).
PARTE III: MÍDIA EM HTML5

Como navigator.appVersion gera uma descrição longa, obtenha apenas a parte dos
resultados que mostram o iPhone ou não.
Crie um novo objeto de imagem chamado imageNow.
Inicialize uma variável chamada showNow (que você usará na função).
Crie uma função que pergunte: "Isso é um ambiente do iPhone ou não?" Se for um
ambiente do iPhone, use o pequeno gráfico; Caso contrário, use o gráfico grande. (Em
uma peculiaridade do Opera Mini, o JavaScript retorna “ (iPhon” como os seis primeiros
caracteres do navigator. appVersion; portanto, o código precisa consultar se encontrou “
(iPhon” ou “iPhone” — isso mostra como o JavaScript acomoda pode ser).

É claro que existem muito mais tipos de dispositivos móveis disponíveis e você precisa
alterar o código JavaScript para adicionar mais à lista de dispositivos móveis além do
iPhone, mas a lógica é a mesma — um pouco mais JavaScript.

A propósito, se você nunca fez nada com JavaScript, não espere entender o código na
marcação da página da Web. Esta demonstração mostra apenas o que pode ser feito com
JavaScript. O futuro da Web precisa incluir muitos tipos diferentes de plataformas de
navegação na Web, e essa pequena demonstração é apenas uma amostra do que você pode
fazer. (Se você é um desenvolvedor experiente de JavaScript, pode criar algo um pouco mais
elegante!)

PEDIDO DE ARQUIVOS SVG DINÂMICOS DOS ARQUIVOS ADOBE ILLUSTRATOR


CS5
.

194
O Adobe Illustrator CS5 (AI) tem um recurso adicional, o Adobe Illustrator CS5 HTML5
Pack, disponível em http://labs.adobe.com. Ele foi projetado para permitir que designers
gráficos que usam AI convertam facilmente seus arquivos .ai em arquivos .svg contendo
partes que podem ser alteradas dinamicamente usando HTML5. Para ter uma ideia de como
funciona, o exemplo a seguir começa com uma imagem gráfica simples em AI. Ele tem duas
camadas e, em uma das camadas, o designer deseja uma cor variável que possa ser
codificada em HTML5. A camada a ser dada uma característica variável é selecionada e
visualizada no painel Appearance (como mostrado na Figura 9-15).

Figura 9-15: O preenchimento é definido como uma variável no Adobe Illustrator


CS5.
CAPÍTULO 9: IMAGENS

O (X) na Figura 9-15 indica que o preenchimento é uma variável que pode ser alterada com
HTML5. Para acessar o recurso a ser alterado (a cor de preenchimento neste caso), o AI gera
o código para o formato de arquivo SVG que pode ser visualizado e / ou salvo durante a
conversão de um arquivo .ai para um arquivo .svg. Durante o processo de conversão, o
designer clica no botão Mostrar código SVG e localiza o nome da camada do recurso
variável. Neste exemplo, o código SVG específico era o seguinte:

<g id=”Button”>
<ellipse fill=”param(SVGID_2__FillColor) #A35563” cx=”50” cy=”50” rx=”40”
ry=”40.5”/>
</g>

O id com o valor Button is from the name of the layer in AI. O valor do nome do param
SVGID_2__FillColor, que é gerado automaticamente pelo AI.

Para trabalhar as informações do SVG em um programa HTML5, o arquivo .svg deve ser
referenciado em um elemento <object> e o parâmetro em uma tag <param>. O arquivo
JavaScript Param.js também é gerado automaticamente pelo AI e deve ser carregado no
contêiner <head> para que o Firefox analise corretamente o código. O código a seguir
(AI2svg.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) funciona com os
navegadores Firefox, Safari, Chrome e Opera, mas com algumas diferenças de exibição.

<!DOCTYPE HTML>
<html> 195
<head>
<script src=”Param.js”></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>AI -> SVG</title>
</head>
<body>
<article>
<section>
<figure>
<object type=”image/svg+xml” data=”butnBkground.svg”>
<!--No param tags -->
</object>
</figure>
<figure>
<object type=”image/svg+xml” data=”butnBkground.svg”>
<param name=”SVGID_2__FillColor” value=”#cc0000” />
</object>
</figure>
</section>
</article>
</body>
</html>

Para ilustrar a sequência de processos, a Figura 9-16 mostra o arquivo AI original e os


resultados da saída no Opera quando a página AI2svg.html é carregada.
PARTE III: MÍDIA EM HTML5

Arquivo do
Adobe Illustrator

Convertido de
SVG para Web

Preencha a cor da camada convertida em variável


Figura 9-16: O arquivo AI original é transformado em um formato SVG com cor de
preenchimento variável.

Os arquivos Param.js e .svg devem estar na mesma pasta que a página HTML5, assim como
arquivos CSS3 e gráficos externos devem estar na mesma pasta que o HTML5 que os chama
ou no caminho especificado pelo código HTML5 . A melhor parte, porém, é que os designers
e desenvolvedores podem se concentrar nas tags HTML5, enquanto o Adobe Illustrator CS5
cuida da geração do JavaScript e dos nomes dos parâmetros. Claro, isso significa que os
designers podem usar gráficos vetoriais e ter recursos dinâmicos em suas criações de IA.
196
.
PEGUE A RODA
Este primeiro exercício é uma caça ao tesouro da Web. Você pode encontrar muitas ferramentas
gratuitas na Web que podem ser usadas para alterar o tamanho de um arquivo gráfico — tanto
em termos de dimensões quanto de número de bytes na imagem. Mesmo que você tenha uma
ferramenta como o Adobe Photoshop ou o Microsoft Paint, encontre um aplicativo na Web que
funcione no seu computador. (Você pode encontrar vários, se quiser).

Pegue um arquivo gráfico existente que não esteja no formato JPEG, PNG ou GIF. Por
exemplo, encontre um gráfico com uma extensão .tif ou .tiff. (Pode ser uma fotografia
digital ou um gráfico desenhado — ou alguma combinação de ambos). Em seguida, faça o
seguinte:

1. Converta o arquivo para o formato JPEG, PNG e GIF.


Agora você tem quatro arquivos - o original e três formatos da Web.
2. Faça uma segunda cópia de todos os gráficos da Web, nomeando o segundo para que
ele indique que será de baixa qualidade.
Por exemplo, se você tiver um arquivo chamado car.jpg, copie-o e nomeie a segunda
cópia como carLow.jpg.
3. Usando o aplicativo de imagem encontrado na Web, crie o arquivo de qualidade
mais alta e mais baixa para cada um dos três tipos de arquivo.
CAPÍTULO 9: IMAGENS

4. Usando HTML5 e CSS3, crie uma página da Web com três linhas. No lado
esquerdo, coloque as imagens da mais alta qualidade e, no lugar certo, a menor
qualidade.
5. Entre todas as imagens, coloque o texto de sua preferência.
Este é um bom momento para procurar lorem ipsum na Web. Figura 9-17 mostra o
formato geral.

Figura 9-17: Exibindo os diferentes tipos e qualidades de gráficos


no texto. 197

Este exercício tem dois propósitos:

Para fornecer a você um exercício de colocação de texto — trabalho com CSS3 deste
capítulo e capítulos anteriores. Usar o atributo align na tag <img> tem sérias limitações.
Para trazer para casa a idéia de que todas as alterações nas imagens devem ser feitas
usando um software que altera as características de uma imagem antes de colocar sua
página da Web em conjunto.

Para aqueles que querem fazer mais com gráficos vetoriais, experimente o Adobe Illustrator
CS5 HTML5 Pack. Se você não tiver o Adobe Illustrator CS5, poderá fazer o download de
uma avaliação gratuita de 30 dias. Tente criar variáveis a partir de diferentes partes de um
design de AI usando várias camadas com nomes que se tornam o nome do ID do parâmetro
que você alterará.
SMASHING HTML5

CAPÍTULO 10
10 SOM
ADICIONAR SOM PARA páginas da Web Você aprenderá a trabalhar com os diferentes
permite que os desenvolvedores criem uma atributos e configurações da tag <audio>. Além
ampla gama de sites. Sites que reproduzem disso, você verá como diferentes navegadores
música, fornecem instruções ou adicionam lidam com som e diferentes arquivos de som. Tal
efeitos sonoros certamente ampliam o leque de como acontece com os gráficos, programas
possibilidades do que você pode fazer com o especializados estão disponíveis para criar áudio e
HTML5. Este capítulo examina como preparar o editá-lo. Portanto, depois de examinar os elementos
som para a Web e como você pode usar o som e atributos básicos do HTML5, este capítulo mostra
para ajudar suas páginas da Web a produzir como criar sons para o seu site.
algum ruído.
PARTE III: MÍDIA EM HTML5

NOÇÕES BÁSICAS DE ÁUDIO EM HTML5


Uma das novas tags mais interessantes da coleção HTML5 é <audio>. Com ele, você pode
reproduzir arquivos de áudio usando os alto-falantes do computador ou o fone de ouvido em
um dispositivo móvel. O formato básico para selecionar um arquivo de som a ser
reproduzido é:

<audio src=”jazz.mp3”></audio>

O atributo src funciona exatamente como em uma tag <img> — é uma referência à
origem do arquivo. No entanto, para obter o áudio para reproduzir, você precisa examinar
os atributos.
.

REPRODUÇÃO AUTOMÁTICA
O atributo de autoplay é bastante autoexplicativo. Assim que a página é carregada, os sons
começam a tocar. Antes de adicionar o atributo de autoplay , você quer ter certeza de que
todos os seus usuários ficarão bem em ouvir o que você estiver jogando. Uma maneira de
garantir que os usuários não retornem a uma página é ter um som contínuo que seja ativado
automaticamente. Com essa preocupação de lado, o script a seguir (BasicAudio.html na pasta
deste capítulo em www.wiley.com/go/smashinghtml5) mostra como criar uma página simples
que começa a ser reproduzida assim que é lançada:

<!DOCTYPE HTML>
<html>
200 <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Áudio Básico</title>
</head>
<body>
O áudio está entre as linhas<br>
----------------------------------------
<br>
<audio src=”jazz.wav” autoplay></audio> <br>
.

----------------------------------------
</body>
</html>

Você pode testar esse script com qualquer navegador, exceto o Google Chrome, porque ele é
o único que não reconhece arquivos de som no formato .wav. Use um arquivo de som .mp3
ou .ogg para testes do Chrome.

CONTROLES
Conforme observado, se o seu som (música, efeitos sonoros ou mesmo apenas conversas)
irritar seus usuários, eles não voltarão. Então, como você controla o som? A maneira mais
fácil é adicionar o atributo controls Assim como no autoplay, você não precisa atribuir um
valor. Basta incluí-lo na tag <audio> e ele aparecerá automaticamente. Experimente o
seguinte programa (Controls.html e ele aparecerá automaticamente. Experimente o seguinte
programa www.wiley.com/go/smashinghtml5):
CAPÍTULO 10: SOM

<!DOCTYPE HTML>
<html>
<style type=”text/css”>
/* 694703,A83110,E89F06,F5D895,B3CF83 */
body {
background-color:#B3CF83;
font-family:Verdana, Geneva, sans-serif;
color:#694703;
}
h1 {
font-family:Braggadocio, “Arial Black”;
color:#A83110;
}
</style>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Controles</title>
</head>
<body>
<article>
<header>
<h1>Jazz esta noite</h1>
</header>
<section>
<p>Clique no triângulo para iniciar o show:</p>
<audio src=”mists.ogg” controls></audio> 201
<p> Os || dois tubos símbolo pára tudo isso. </p>
</section>
</article>
</body>
</html>

Quando você executar este programa, certifique-se de usar um navegador compatível com o
arquivo de áudio. (Use um arquivo .wav se o tipo de arquivo .ogg não funcionar com seu
navegador.) Dependendo do tipo de navegador usado, você verá controles diferentes do player.
A Figura 10-1 mostra como os diferentes navegadores se parecem. (O navegador Google
Chrome é exibido com o som sendo reproduzido).

A única característica comum da barra de controle de áudio é o botão de início do triângulo na


extrema esquerda, e o som ativado / desativado na extrema direita. O botão de parada / pausa
também é semelhante, mas os gráficos de cada um são únicos. (As diferentes imagens da barra de
controle podem dar aos projetistas ajustes ao tentar projetar uma página com áudio para ser
totalmente compatível com todos os navegadores).

Fornecer algum tipo de controle para os usuários é essencial. O navegador Google Chrome
oferece uma ótima barra para que o usuário possa ver claramente onde está em relação ao início e
ao final do áudio. Para áudios instrutivos, a barra de controle deslizante (a barra vertical que você
pode ver no navegador Chrome na Figura 10-1) é importante para que o aluno possa arrastar a
barra de rolagem para revisar as partes de uma lição que são difíceis de entender.
PARTE III: MÍDIA EM HTML5

Opera Safari

202

Chrome Firefox
Figura 10-1: Uso dos controles do reprodutor de áudio.

PRÉ-CARREGAMENTO
O atributo de preload da tag <audio> pode ser importante porque começa a pré-carregar o
áudio antes de ser reproduzido. Dessa forma, os usuários não precisam se sentar e mexer
os polegares enquanto o áudio é carregado depois que eles são pressionados. O formato
mais simples para o atributo de preload é como os controles e o autoplay — ele só precisa
ser adicionado sem um valor, como mostra a seguir:

<audio src=”Shadows.wav” preload controls></audio>


Quando o preload é empregado, você pode usar a autoplay, mas não tenho certeza se faz
muito sentido fazer isso. O autoplay inicia a reprodução de áudio assim que a página é
carregada, enquanto o preload é usado para carregar um arquivo de áudio antes que o
comando de reprodução seja emitido pelo controlador.

Você pode atribuir valores ao atributo preload:

„ none: Não ter nenhum como um valor pode parecer estranho, mas alguns navegadores
podem ser configurados para pré-carregar automaticamente arquivos de áudio. No
entanto, se a chance de usar um determinado áudio for remota, o desenvolvedor pode
decidir não usar recursos da Internet e, portanto, atribui o valor none ao atributo de
preload.
CAPÍTULO 10: SOM

„ metadata: todos os arquivos de áudio (e vídeo) têm metadados como duração ou outros
dados de som que o autor do som inseriu no arquivo de áudio. Quando a chance de usar um
arquivo de áudio é baixa, mas (apenas no caso) o carregamento dos metadados é razoável e
não ocupa muito os recursos da Internet.
„ auto: se o atributo preload estiver presente, ele pré-carregará automaticamente as
informações do arquivo de áudio. A atribuição automática simplesmente atua como
um lembrete de que o arquivo será pré-carregado. (É o mesmo que não ter qualquer
atribuição de valor para um atributo de preload).

Quanto mais diversificado for o seu público e mais áudio na sua página da Web, mais você
deseja fornecer ao atributo de preload opções.

LOOP
Quando você quer que um som se repita indefinidamente, você usa um loop. A vantagem de
usar um loop é que você pode pegar uma música relativamente curta e repeti-la para que soe
como uma composição completa. Desta forma, você pode usar uma quantidade mínima de
recursos da Internet e ter música contínua. O formato é como os outros atributos que agem
como booleanos — eles estão ativados ou desativados. O seguinte é um exemplo:

<audio src=”Shadows.wav” autoplay loop></audio>


203
Nessa linha estão as sementes de sua própria destruição. Por vários motivos, os usuários podem
querer desativar o som. Você pode usar o JavaScript para criar uma rotina simples que faça isso,
mas é mais fácil adicionar o atributo controls e deixar o usuário desativá-lo. No entanto, alguns
designers, com boas razões, preferem não ter o controle de áudio em nenhum lugar do design;
Eles acreditam que uma boa música seria parte integrante do design. Nesse caso, comece a
procurar o JavaScript para desativar a coisa. Não importa o quão bom seja um trecho de som,
repetido incessantemente, ele se torna lavagem cerebral, e isso não é permitido pela Convenção de
Genebra.

SUPORTE DE NAVEGADORES PARA ÁUDIO


Na época em que escrevo, ao testar formatos de áudio, não encontrei nenhum formato
compatível com todos os navegadores. Pior ainda, nenhum formato único é suportado por
todos os navegadores HTML5. A Tabela 10.1 mostra a divisão.
.

Tabela 10.1 Navegadores e suporte ao formato de áudio

Browser MP3 WAV OGG

Chrome Yes No Yes

Firefox No Yes Yes

Internet Explorer 9* Yes No No*

Opera No Yes No

Safari Yes Yes No


* A Microsoft anunciou que o IE9 estaria suportando o formato OGG, mas na versão beta do IE9, isso não aconteceu.
PARTE III: MÍDIA EM HTML5

Como você pode ver, o único formato de áudio que chega perto do suporte de todos os
navegadores é o .wav. A boa notícia é que os arquivos .wav estão amplamente disponíveis e
você pode encontrar praticamente qualquer som no formato .wav format. No entanto, se um
número significativo de seu público-alvo preferir o navegador Google Chrome aos outros, você
precisará de um Plano B.

SALVO PELA FONTE: PLANO B


Normalmente, se você tiver que determinar qual navegador vai funcionar com recursos
diferentes, terá que separar o JavaScript. Felizmente, o HTML5 tem um elemento que pode
oferecer vários formatos de áudio diferentes e permitir que o navegador selecione o que é
compatível.

A tag <source> pode ser colocada dentro do contêiner <audio> com a origem e a URL do áudio
dentro da tag <source>. Suponha que você esteja exibindo um site com materiais didáticos de
áudio. Por exemplo, você fala com alunos por meio de HTML5. Em vez de dizer a todos que eles
precisam usar um determinado tipo de navegador, tudo o que você precisa fazer é ter arquivos
para todos os navegadores possíveis e permitir que o navegador escolha o que desejar. Por
exemplo, digamos que você esteja configurando a Lição 3 em uma página da Web. O seguinte
forneceria uma seleção de arquivos que nenhum navegador passaria:

<audio controls>
<source src=”instruction3.ogg”>
<source src=”instruction3.mp3”>
<source src=”instruction3.wav”>
204
</audio>

A tarefa de criar várias versões de arquivos de áudio pode ser irritante, mas, mesmo que você
tenha programado em JavaScript, precisará de várias cópias da mídia. (No Capítulo 9, várias
cópias de um arquivo gráfico eram necessárias para plataformas móveis e não móveis que
usavam JavaScript para classificar se a página estava sendo visualizada em um iPhone ou outra
coisa qualquer.)

ATRIBUTO TIPO
Ao configurar vários tipos diferentes de fontes de áudio para garantir que todos os navegadores
compatíveis com HTML5 o executem, você pode aprimorar o processo adicionando o atributo
type à tag <source>. As informações no atributo type informam ao navegador se ele deve
tentar carregar o arquivo. Por exemplo, o snippet a seguir mostra o formato:

<source src=’mists.ogg’ type=’audio/ogg’>

O motivo para incluir um atributo type é economizar tempo. O intérprete no navegador observa a
linha e percebe que o tipo indica que ela pode ou não ser reproduzida. Se não, nem se incomoda
em tentar. Por exemplo, suponha que você tenha a opção de fazer dois testes — um em HTML5 e
outro em física quântica. A menos que você tenha experiência em física quântica, não vai
desperdiçar seu tempo tentando. No entanto, sabendo que um teste será em HTML5, você sente
que pode tentar. É o mesmo com o atributo type. Se vir o tipo e determinar "não consigo
reproduzir", não tenta.
CAPÍTULO 10: SOM

Se o atributo type não estiver em vigor, o navegador tentará carregá-lo e, se falhar, passará
para a próxima tag <source> e tentará.

O snippet a seguir mostra todos os tipos:

<audio controls>
<source src=”instruction3.ogg” type=”audio/ogg”>
<source src=”instruction3.mp3” type=”audio/mpeg”>
<source src=”instruction3.wav” type=”audio/wav”>
</audio>

Todos os valores devem ser tipos MIME válidos. Os válidos seguem a regra do media-type
definida nas especificações do W3C para HTML5. O atributo type é opcional, mas se o seu site
tiver muito tráfego, você deverá cortar todas as chamadas desnecessárias. O atributo type ajuda
você a fazer isso. Para mais ajuda, você precisa considerar o parâmetro codec na próxima seção.

PARÂMETRO DO CODEC DO TIPO DE ORIGEM


Geralmente, se você inserir um valor para o atributo type , tudo o que você precisa incluir é o tipo
geral. No entanto, quando mais de um único codec estiver disponível, você deverá adicionar os
codecs que o navegador pode ler. Novamente, especificar o codec não permitirá que o navegador
acesse um determinado codec que, de outra forma, não seria capaz de fazer. Em vez disso, ele
fornece um alerta para o navegador, de modo que, se não for possível lê-lo, o navegador nem
sequer tenta. É como um vendedor de jornais perguntando: "O que você quer? Temos trabalhos
em inglês, espanhol e mongol. ”Se você ler inglês e espanhol, poderá escolhê-los, mas, se souber
que não sabe ler mongol, nem tente.
205
Antes de passar para uma análise mais detalhada do parâmetro codec, certifique-se de entender o
que é um codec. A palavra codec é uma combinação dos termos compressão e descompressão.
Então, quando falo de um codec, estou falando sobre como um arquivo é codificado (geralmente
encolhido) e decodificado (expandido para que possa ser reproduzido).

O tipo de codec, mesmo que os tipos de arquivo sejam os mesmos, pode ser diferente. Para
acelerar o processo de determinar se o arquivo pode ser lido, adicionar o parâmetro codec filtra os
tipos de codec que o navegador não consegue ler. Por exemplo, os seguintes são todos os arquivos
.ogg com codecs diferentes:

<source src=”songFest.ogg” type=”audio/ogg; codecs=vorbis”>


<source src=” songFest.spx” type=”audio/ogg; codecs=speex”>
<source src=”audio.oga” type=”audio/ogg; codecs=flac”>

Então lembre-se, codecs e tipos de arquivos são cavalos de cores diferentes. Se suas páginas da
Web podem usar informações completas de codecs em um arquivo, você também pode usá-lo.
Caso contrário, alguns navegadores podem tentar iniciar o som apenas para descobrir que o
codec é incompatível.
PARTE III: MÍDIA EM HTML5

Alguns tipos de arquivos de áudio são mais prováveis do que outros para ter uma ampla
gama de codecs. O snippet a seguir mostra codecs típicos para todos os arquivos de
som HTML5 que podem ser lidos pelos navegadores HTML5:

<audio controls>
<source src=”sound.ogg” type=”audio/ogg; codecs=vorbis”>
<source src=”jazz.mp3” type=”audio/mpeg; codecs=mp3”>
<source src=”Shadows.wav” type=”audio/wav; codecs=wav”>
</audio>

O trecho acima não mostra todos os codecs possíveis de todos os tipos de áudio. No entanto,
representa os tipos típicos de códigos usados no áudio da Internet.

CRIANDO ARQUIVOS DE ÁUDIO


O Windows 7 e o Macintosh OS X incluem programas que você pode usar para criar seus
próprios arquivos de áudio. Eles vêm carregados no seu computador e, a menos que você os
tenha removido, você deve estar pronto para começar a fazer gravações de som.

Versões anteriores do Windows também têm um aplicativo Sound Recorder, mas ele parece
diferente daquele usado no exemplo. Além disso, o gravador de som que faz parte do Windows
XP salva os arquivos no formato .wav , para que estejam todos prontos para uma página da Web.
No entanto, a versão mais recente do gravador de som que acompanha o Windows 7 salva
somente arquivos no formato .wma e deve ser convertida em um tipo de arquivo reconhecido
pelos navegadores HTML5.
206
.
GRAVADOR DE SOM DO WINDOWS 7
A primeira coisa que você quer fazer quando grava é configurar algum tipo de microfone
para a gravação. A maioria dos computadores que executam o Windows 7 possui microfones
internos e você pode usá-los. Caso contrário, você precisará conectar o microfone que
planeja usar e verificar se está configurado corretamente. Normalmente, o seu computador
pode encontrar os drivers de áudio que você precisa, mas alguns microfones vêm com
drivers de software que você precisa instalar. Instruções para tais instalações virão com o
microfone.

Para selecionar um microfone, use o seguinte caminho: Painel de Controle> Hardware e


Sons> Gerenciar Dispositivos de Áudio. Quando a janela Som for exibida, selecione a guia
Gravação. Você verá as seleções mostradas na Figura 10-2.

Suas seleções de gravação podem ser diferentes, mas, em geral, você tem um microfone de
entrada ou de linha. Ao fazer uma seleção, clique em OK e agora você está pronto para abrir
o aplicativo Gravador de som.

No menu Iniciar, selecione Todos os Programas> Acessórios> Gravador de Som. (Se você
estiver executando o Windows XP, escolha Todos os programas> Acessórios>
Entretenimento> Gravador de som.) A Figura 10-3 mostra como é o Gravador de som
quando está pronto para gravar (na parte superior) e enquanto está gravando (parte inferior).
CAPÍTULO 10: SOM

Figura 10-2: Seleções de gravação do Windows 7.

207

Figura 10-3: O aplicativo Gravador de som no Windows 7.

Quando estiver pronto para começar a gravar, clique no círculo vermelho e comece a falar.
Enquanto fala, você verá uma barra verde ao lado do timer no meio da barra do gravador. Se essa
barra não estiver se movendo enquanto você fala, significa que seu microfone não está
funcionando corretamente. Caso contrário, você verá a barra de som verde entrar e sair enquanto
fala. Quando terminar, clique no botão Parar gravação — um quadrado azul. (No Sound Recorder
no Windows XP, o botão Stop Recording é um retângulo preto ao lado do círculo vermelho que
inicia a gravação.)

Quando você clica no botão Parar gravação, uma nova janela Salvar como é aberta e você pode
selecionar o diretório onde deseja salvar sua gravação de áudio. Como observado, no Windows
7, a única opção é no formato .wma (Windows Media Audio). Se você estiver usando a versão do
Windows XP, selecione Salvar ou Salvar como para abrir uma caixa de diálogo a ser usada para
escolher o diretório, o nome de arquivo e o formato — que é .wav (mas não .wma!).

Se você usa a versão mais antiga do Gravador de som, está tudo pronto com um arquivo .wav que
pode ser reproduzido usando a tag HTML5 <audio>. Caso contrário, você terá que converter o
arquivo .wma em um formato aceitável para navegadores HTML5.
PARTE III: MÍDIA EM HTML5

ESTÚDIO DE SOM MACINTOSH OS X


Macs vêm junto com um programa chamado Sound Studio. Os Macs também têm
microfones embutidos, ou você pode usar um microfone externo se tiver os drivers corretos
instalados. Você pode selecionar um microfone externo (incluindo aqueles embutidos em
qualquer câmera conectada) nas Preferências do Sistema> Som> Entrada ou no Sound
Studio. Enquanto você escolhe o dispositivo de entrada, qualquer ruído aparecerá em um
gráfico de nível de entrada, por isso fale ao fazer as configurações para ter uma ideia do
nível de som.

Para abrir o Sound Studio, selecione Ir> Aplicativos> Sound Studio (pasta)> Sound
Studio.app no Finder. Quando o Sound Studio for aberto, você verá uma linha do tempo e
uma janela Níveis de entrada, conforme mostrado na Figura 10-4.

208

Figura 10-4: Linhas do tempo do Sound Studio e a janela Níveis de entrada.

Convertendo arquivos
Se você estiver usando áudio para o público em geral, você vai precisar de

Š Um editor de som que salva arquivos de áudio como arquivos .wav e .mp3 ou .ogg.
Š Um programa de conversão. Uma simples pesquisa na Web revelará várias. Por exemplo,
se você estiver usando o Gravador de som do Windows 7, precisará de um programa para
converter de formato .wma para.mp3, .wav, ou .ogg. Geralmente, o processo é bastante
simples para plataformas Mac ou Windows.
Uma variedade de produtos de conversão está disponível, mas vários para o Windows 7 podem
ser encontrados em http:// software-download.name/audio-converter-windows-7/. On the Mac, I tested
Switch Sound File Converter (http://download.cnet.com/Switch-Audio-Converter/3000-
2140_4-10703967.html) e achou fácil de usar; converteu tipos de arquivos de som típicos do Mac
(como arquivos .aiff) em arquivos de som reconhecidos pelos navegadores HTML5. Faça uma
pesquisa na Web e você encontrará muito mais conversores para Windows e Macs.
CAPÍTULO 10: SOM

Para fazer uma gravação, clique no botão vermelho Gravar. Se você quiser fazer uma pausa
para reunir seus pensamentos, clique no botão Pausar. Quando terminar, clique no botão Parar
e selecione Arquivo na barra de menus. Se você escolher Salvar ou Salvar como, poderá
salvar o arquivo para navegadores HTML5 no formato .wav. No entanto, se você selecionar
Exportar com o QuickTime, o arquivo estará no formato de áudio .mp3. Assim, usando o
Sound Studio no Mac, você pode gerar dois dos três formatos HTML5 disponíveis para
armazenar suas gravações de áudio.

EFEITOS SONOROS: FX EM SEU DESKTOP


A gama de efeitos sonoros disponíveis na Web, seja grátis ou por um preço, deve começar
com qualquer efeito sonoro que você possa desejar. O melhor lugar para começar é no
FlashKit (www. flashkit.com/soundfx). Embora o site seja dedicado ao Flash, ele tem mais de
7.000 (e crescentes) efeitos sonoros de domínio público gratuitos para você escolher. Além
disso, você pode fazer o download deles no format .wav ou .mp3, para que eles já estejam
definidos para serem usados em uma página da Web em HTML5. Se você pesquisar na Web,
poderá encontrar praticamente qualquer efeito de som desejado.

Se quiser gravar seus próprios efeitos sonoros, você pode usar ruídos domésticos simples e os
aplicativos de gravação de som em seu computador. Por exemplo, um cachorro latindo, um
avião sobrevoando ou qualquer outro som que você possa ouvir, você pode gravar. (Tenha
cuidado com a música com direitos autorais, embora!)

SONS DE TRANSIÇÃO
209
Um som interativo sutil, mas eficaz, pode ser usado para adicionar um componente de
áudio às transições de página. Em um mundo tátil de botões, interruptores e maçanetas,
nossas ações frequentemente evocam sons. Você pode fazer seus links da Web fazerem a
mesma coisa. Use as etapas a seguir para criar uma transição simples:

1. Navegue para www.flashkit.com/soundfx.


2. Selecione Sound FX no menu da página inicial.
3. Selecione Interfaces> Cliques nas Categorias de Interfaces.
4. Selecione um som de clique que você gosta.
Se preferir, escolha um Zoop, Zang ou Zing — apenas certifique-se de que ele seja curto.
5. Faça o download das versões .wav e .mp3.
6. Renomeie um arquivo click.wav e o outro click.mp3.
7. Coloque os arquivos .mp3 e .wav em uma pasta.
Agora, na mesma pasta em que você colocou os arquivos de som, coloque as duas
páginas a seguir (TransitionSound.html e SoundOpen.html na pasta deste capítulo em
www. wiley.com/go/smashinghtml5).
PARTE III: MÍDIA EM HTML5

Página Inicial Sem Som


<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
a {
font-family:Verdana, Geneva, sans-serif;
color:#cc0000;
font-size:24px;
text-decoration:none;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Som de Transição</title>
</head>
<body>
<a href=”SoundOpen.html”>Clique para a próxima página</a>
</body>
</html>

Reproduzir Som Quando Aberto


<!DOCTYPE HTML>
210 <html>
<head>
<style type=”text/css”> body {

font-family:Verdana, Geneva, sans-serif;


color:#cc0000;
font-size:24px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Som em aberto</title>
</head>
<body>
<audio autoplay>
<source src=”click.wav” > <source
src=”click.mp3” >
</audio>
Esta página clica.
</body>
</html>

Salve as duas páginas HTML5 na mesma pasta junto com os dois arquivos de som. Teste as
páginas HTML5 com vários navegadores. Quando você clica no link, ele abre uma página da
Web e uma tag <audio> com o atributo autoplay deve reproduzir o som de clique logo após o
carregamento da página. Se você tem um site onde os links vão e voltam, o som toca quase
simultaneamente com a ação de clique, de modo que soa como se clicar no link fizesse o som.
CAPÍTULO 10: SOM

Claro, essa é a ideia. Caso contrário, se a página demorar um pouco para ser carregada, o
clique será emitido quando a página aparecer — como se estivesse se encaixando no lugar.

No momento da redação deste artigo, os navegadores Opera e Firefox no Macintosh não


funcionavam quando o atributo type era adicionado à tag <source>, mas com o Safari e o
Chrome ele funcionava. No entanto, quando o atributo type foi omitido, as páginas da Web
funcionaram bem com todos os navegadores HTML5 do Macintosh. Nos testes do
Windows 7, as versões mais recentes do Firefox e do Safari não geraram som, mas tanto o
Opera quanto o Chrome fizeram com os mesmos arquivos. (É por isso que os
desenvolvedores da Web envelhecem rapidamente.) No entanto, o HTML5 ainda é jovem e
muitos dos recursos do HTML5 ainda estão em desenvolvimento. Então, quando você estiver
lendo isso, essas diferenças podem ter sido resolvidas.

INTEGRANDO EFEITOS SONOROS EM UMA PÁGINA DA WEB


Um recurso de efeitos sonoros que pode dificultar o trabalho se você não estiver usando o
atributo controls fará com que eles sejam disparados quando quiser. Com HTML5 simples, a
única maneira de disparar um som é colocar uma página em um iframe e reproduzir o áudio
automaticamente. Com JavaScript, estão disponíveis soluções muito mais sofisticadas e
sofisticadas, mas, funcionalmente, o uso de iframe funciona.

As quatro páginas HTML5 a seguir são compostas de uma página que carrega três outras
páginas em um iframe. À medida que cada página é carregada, ela produz um efeito sonoro:
um latido de cachorro, um grito e uma explosão. O usuário vê o iframe virar a cor do botão do 211
alto-falante que foi clicado e ouve o efeito de som, e nenhum JavaScript foi usado. A Figura
10-5 mostra o que os usuários vêem quando clica no ícone do alto-falante verde.

Figura 10-5: Disparando sons usando links para um iframe.

Você precisará fazer o download (ou criar) três sons, ambos nos formatos .wav e .mp3. Use
efeitos sonoros curtos e quando cada um dos botões do ícone é clicado, o som é reproduzido
pela página carregando no iframe. A página que está sendo carregada não tem nada além do
som e, para essa demonstração, ela possui uma cor de segundo plano que corresponde à cor
do ícone do alto-falante. Coloque todas as páginas e os seis arquivos de som na mesma
pasta. (Os arquivos a seguir estão na pasta deste capítulo em
www.wiley.com/go/smashinghtml5: SoundFrame.html, sound1.html, sound2. html,
sound3.html.)
PARTE III: MÍDIA EM HTML5

Uma Página Com iframe Chama Outras Páginas Com Efeitos


Sonoros
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
h3 {
color:#cc0000;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Quadros de som</title>
</head>
<body>
<article>
<header>
<h3>Testador de Som</h3>
<iframe name=”ifSound” width=”125” height=”10”></iframe> </header>

<section> <a href=”sound1.html” target=”ifSound”><img src=”Redspeaker.gif”


width=”40” height=”40”></a> <a href=”sound2.html” target=”ifSound”><img
src=”Greenspeaker.gif” width=”40” height=”40”></a> <a href=”sound3.html”
target=”ifSound”><img src=”Bluespeaker.gif” width=”40” height=”40”> </a> </section>
</article>
212
</body>
</html>

Uma página com um cachorro latindo e um fundo vermelho


<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
background-color:#cc0000;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Som 1: Vermelho</title>
</head>
<body>
<audio autoplay>
<source src=”dog.wav” >
<source src=”dog.mp3” >
</audio>
</body>
</html>
CAPÍTULO 10: SOM

Uma Página Com Um Grito E Um Fundo Verde


<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
background-color:#060;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Som 2: Verde</title>
</head>
<body>
<audio autoplay>
<source src=”scream.wav” >
<source src=”scream.mp3” >
</audio>
</body>
</html>

Uma Página Com Uma Explosão E Um Fundo Azul


<!DOCTYPE HTML>
<html> 213
<head>
<style type=”text/css”>
body {
background-color:#0000cc;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Som 3: Azul</title>
</head>
<body>
<audio autoplay>
<source src=”boom.wav” >
<source src=”boom.mp3” >
</audio>
</body>
</html>

Você pode se divertir muito testando sons diferentes. Certifique-se de testá-lo em


diferentes navegadores HTML5. Além disso, tente fazer seus próprios efeitos sonoros
— você pode recrutar seu cachorro, gato e papagaio (que já foi de propriedade de um
marinheiro).
PARTE III: MÍDIA EM HTML5

PEGUE A RODA
Este desafio é fazer uma revista em quadrinhos. Pense em uma história simples que pode ser
contada em quatro painéis. Cada painel terá um desenho (ou foto digital), mas nenhum texto.
Quando o usuário clica em cada painel, uma gravação de áudio “diz” o que o texto diria em um
típico quadrinho. Você precisará usar um iframe para acionar cada uma das quatro gravações de
áudio, e cada um dos painéis de quadrinhos será realmente um botão para vinculá-lo à página
com o áudio do painel. Você pode usar clip-art para os painéis, se quiser, e pode aprimorar a
história com efeitos sonoros para acompanhar o áudio.

214
CHAPTER 11
SMASHING HTML5

11 VÍDEO
UM DOS recursos mais importantes adicionados Web não é verdadeiro streaming video; em vez
ao HTML5 é o vídeo. Se você já usou o YouTube, disso, é um tipo de download progressivo. Como o
está ciente do poder do vídeo na Web. Do mesmo vídeo é baixado do servidor da Web, ele é exibido
modo, os usuários do Adobe Flash incorporaram pela página da Web, por isso pode ser lento. Na
vídeo em seus programas durante anos. Então, o verdade, a maioria dos vídeos criados por
vídeo na Web não é exatamente novo. No entanto, entusiastas do Flash provavelmente será esse tipo
os novos recursos do HTML5 possibilitam o de vídeo. Streaming de vídeo, neste momento,
acesso ao vídeo diretamente de uma página da requer um servidor de vídeo de streaming, como o
Web em HTML5, algo que o HTML nunca Adobe Flash Media Server. No entanto, você pode
conseguiu fazer em construções anteriores sem um esperar ver desenvolvimentos em streaming real à
link para um arquivo Flash .swf ou algum outro medida que o vídeo HTML5 se torna mais
arquivo binário que transmite vídeo independente popular.
das tags colocadas em um arquivo HTML.
Se você leu o Capítulo 10, verá muitas das tags
Uma ressalva importante para adicionar aqui é de vídeo familiares. Este capítulo analisa muitas
que o vídeo que é exibido pela sua página da das mesmas tags, como <source>, mas com o
objetivo de carregar e reproduzir vídeo.
PARTE III: MÍDIA EM HTML5

FAZENDO UMA PÁGINA HTML5 COM VÍDEO


Para começar a usar o vídeo, você precisa de um arquivo de vídeo. Você pode criar um no seu
computador, ou você pode baixar um da Web. Então a questão é: que tipo de arquivo de vídeo?
A Torre de Babel fez mais sentido do que todos os codecs de vídeo, então esta seção começa
com o mais onipresente de todos os formatos de vídeo atuais, o H.264. Como formato de vídeo, o
H.264 é geralmente chamado de MPEG-4 ou sua extensão de arquivo, .mp4. Este formato de
vídeo ganhou popularidade como o primeiro formato de vídeo de alta definição para a Web. A
maioria das pessoas o viu pela primeira vez na Web como um arquivo Flash .f4v, e os resultados
foram muito melhores do que os vídeos da Web anteriores.

A tag principal usada no vídeo é, para surpresa de ninguém, <video>. Assim como em uma
imagem ou áudio, o primeiro atributo necessário é uma fonte, e o atributo src é usado para
identificar a origem. Então, criar páginas da Web com vídeo é bem simples. A listagem a seguir
(SimpleVideo.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5)
exibe os fundamentos do vídeo em uma página da Web HTML5.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Vídeo Simples</title>
</head>
<body>
.
<video src=”mbAux1small.mp4” controls preload=”auto”></video>
216
</body>
</html>

Para testar e executar esse arquivo, você precisa de um navegador Safari porque, no momento da
redação deste, é o único navegador com o qual ele trabalha. (O navegador é gratuito, então vá em
frente e tente).

Quando você executar o programa, verá seu vídeo ser reproduzido no navegador Safari. A
maneira como os controles são configurados, você terá que esperar até ver uma imagem, o que
significa que o vídeo está pronto. Clique na seta para iniciar no controlador e você verá o seu
vídeo ser reproduzido. A Figura 11-1 mostra o que você pode esperar para ver se você toca e
pausa o vídeo.

Obviamente, você quer que seu vídeo seja reproduzido em mais de um navegador. Se o seu vídeo
puder ser visualizado usando apenas um navegador, você perderá muitos usuários. Felizmente, o
HTML5 tem uma maneira simples de resolver o problema. Em um contêiner <video>, você pode
adicionar quantas tags <source> desejar. O atributo de origem (src) é movido para a tag <source>.
Se você colocar várias tags <source> no contêiner <video>, o navegador examinará os arquivos
de vídeo e selecionará o que ele sabe reproduzir e o reproduzirá automaticamente. Se puder
reproduzir mais de um único tipo de formato de vídeo, ele começa a reproduzir o primeiro que
reconhece e ignora todo o resto. Tudo isso pode ser feito usando HTML5 sem ter que quebrar o
JavaScript. O snippet a seguir mostra o formato básico de acessar arquivos de vídeo dessa
maneira:
CAPÍTULO 11: VÍDEO

<video>
.
<source src=”someVid.3gp”>
<source src=”someVid.mp4”>
<source src=”someVid.ogv”>
<source src=”someVid.webm”>
</video>

Figura 11-1: Visualizando um vídeo simples no navegador Safari.

Embora existam muitos formatos diferentes para vídeo digital, os que serão usados para
ilustração e discutidos neste capítulo são os seguintes: 217

„ H.264: .mp4 e .mov

„ OGG: .ogv

„ WebM: .webm

„ 3GP: .3gp

No momento da redação deste texto (e possivelmente para o futuro), diferentes formatos


serão executados em diferentes navegadores. No entanto, usando a tag <source>, você pode
facilmente consultar vários navegadores diferentes. Por exemplo, o código a seguir
(SimpleVideoSource.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5)
reproduz o mesmo vídeo em qualquer um dos navegadores testados, incluindo dois
navegadores móveis.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Vídeo Seletivo</title>
</head>
<body>
<video controls preload=”auto”>
<source src=”multiformats/mbAux1.3gp”>
<source src=”multiformats/mbAux1small.mp4”>
PARTE III: MÍDIA EM HTML5

<source src=”multiformats/mbAux1small.ogv”>
<source src=”multiformats/mbAux1small.webm”>
</video>
</body>
</html>

Quando eu testei o programa com diferentes navegadores e plataformas, todos eles


conseguiram encontrar o formato de arquivo que preferiam e reproduzir tanto o vídeo
quanto o som. A Figura 11-2 mostra o vídeo sendo reproduzido em um navegador móvel
Safari em um iPhone.

218

Figura 11-2: Reprodução de vídeo em um iPhone.

A qualidade do jogo foi bastante consistente em todos os navegadores. Tanto no navegador


móvel Safari quanto no Perfect Browser para o iPhone, além do tamanho da tela, a
qualidade do vídeo era muito boa. Mais importante, carregou rapidamente.

COMPATIBILIDADE DE VÍDEO E NAVEGADOR


Duas questões muito diferentes devem ser abordadas ao discutir o vídeo e a compatibilidade
com HTML5 na Web. Uma é simplesmente quais navegadores funcionam com quais
formatos de vídeo. Usarei o termo formato de vídeo para se referir a uma combinação de
contêineres de vídeo (invólucros nos quais os vídeos reais são incluídos) e codecs
(tecnologia de decodificação de código) — principalmente consultando a extensão
associada aos arquivos. Tecnicamente, há muito mais sobre arquivos de vídeo do que os que
tenho espaço para discutir aqui, mas, para começar a usar vídeos, é necessário reconhecer
arquivos diferentes pelas extensões de vídeo e em quais navegadores eles serão
reproduzidos.
CAPÍTULO 11: VÍDEO

Deixando os especialistas fazerem o seu trabalho


Especialistas em tecnologia parecem se debruçar sobre as questões complexas e interessantes
que cercam porque diferentes empresas escolheram formatos específicos. Apple, Microsoft,
Google, Opera, Adobe e Mozilla selecionaram os formatos de arquivo que fizeram por motivos
relacionados a patentes, direitos de uso, licenças e considerações financeiras, além de integrar a
tecnologia a outros planos que possam ter. Tudo o que você precisa se preocupar é o que
funciona para seus sites — se perguntando por que uma tecnologia é preferida a outra pelos
provedores de navegador é melhor deixar para os especialistas. Você só precisa saber o que vai
funcionar e como implementá-lo.

Neste momento, ir além do que pode ser testado e comprovado é um pouco arriscado. No
entanto, acho que podemos examinar quatro tipos diferentes de contêineres e codecs de arquivos
e usar os quatro listados no início do capítulo. O formato do contêiner 3GP está relacionado ao
MPEG-4, mas na verdade é um formato H.263, e sua principal adoção foi para dispositivos
móveis como o iPhone. A Tabela 11.1 mostra a matriz de compatibilidade dos principais
navegadores nos quais testes de vídeo foram feitos ou decisões foram tomadas.

Tabela 11.1 Navegadores e suporte ao formato de vídeo

Browser H.264 OGG WebM 3GP

Chrome Não Sim Sim Não 219


Firefox Não Sim Desconhecido Não

Internet Explorer 9 *Não Não Não Sim

Opera Não Sim Sim Não

Safari Sim Não Não Sim

Safari Mobile Não Não Não Sim

* A Microsoft anunciou que suportaria o H.264, mas o IE9 não pôde reproduzir o formato MP4 na hora de
testar a versão beta do navegador.
Dada a variedade de compatibilidade entre navegadores e formatos de arquivo, você precisa saber
como converter entre os diferentes formatos. Esta próxima seção examina como fazer isso. A
conversão precisa acontecer primeiro entre o tipo de arquivo usado pelo instrumento de gravação
(uma câmera ou aplicativo de compartilhamento de tela) ou um software de edição de vídeo. O
segundo tipo de conversão é entre o vídeo totalmente preparado para a Web e os possíveis tipos
de arquivos necessários para páginas HTML5. Quando todos os tipos de arquivos necessários
estiverem prontos, tudo o que você precisa fazer é colocá-los em tags <source> dentro de um
contêiner <video>.

FAÇA O MEU WEBM: O CONVERSOR DE VÍDEO DO MIRO


De todos os formatos de arquivo testados, somente o Opera trabalhou com o formato WebM.
No entanto, várias outras empresas que criam navegadores também estão envolvidas no
projeto WebM e, assim, no futuro, ele pode se revelar um formato mais importante do que é
atualmente.
PARTE III: MÍDIA EM HTML5

Mais informações sobre o WebM podem ser encontradas no site do WebM Project em
www.webmproject.org.

Um programa de conversão que foi testado e para o WebM foi o Miro Video Converter. É
simples de usar e oferece muitas opções de conversão — não apenas de e para o WebM.
A Figura 11-3 mostra o Miro Video Converter convertendo um MP4 em um arquivo
WebM.

220

Figura 11-3: Convertendo arquivos usando o Miro Video Converter.

O Miro Video Converter está disponível gratuitamente no site www.mirovideoconverter.com.


O processo de conversão envolve arrastar ou carregar o arquivo a ser convertido em uma
janela central e clicar em um botão Convert. É muito simples e adaptável.

Para arquivos .ogv, selecione Theora no menu e clique no botão Convert. O arquivo
resultante tem a extensão .theora.ogv, mas removendo o .theora, você pode executá-lo bem
com apenas a extensão .ogv. Na conversão de um arquivo .mp4 para o arquivo .ogv, o
tamanho do arquivo foi reduzido de 54MB para 11MB — uma redução de cinco vezes.
CAPÍTULO 11: VÍDEO

CONVERTENDO PARA 3GP: ADOBE MEDIA ENCODER CS5


Ao converter para o formato 3GP para exibição em dispositivos móveis, o Adobe Media
Encoder CS5 (AME) mostrou muitas vantagens. O codificador é fornecido com vários
produtos Adobe diferentes e, para este livro, testei-o com o Adobe Premier ao editar
arquivos MP4 gerados por uma câmera de vídeo de alta definição (HD).

Além de ter a capacidade de converter arquivos em formato 3GP, o AME foi capaz de
fazer algumas edições básicas. A função mais importante era reduzir as dimensões do
vídeo e, portanto, o tamanho do arquivo e o tempo necessário para transmitir o vídeo pela
Internet. Isso é especialmente crucial para dispositivos móveis.

A Figura 11-4 mostra um arquivo que foi salvo originalmente em um formato de 720 x 480.
Em seguida, foi reduzido para 320 x 212. Normalmente, os vídeos são formatados em uma
proporção de 4: 3. No entanto, o formato HD da câmera de vídeo usada é 16: 9, então as
dimensões são mais largas do que você poderia esperar de um vídeo criado usando uma
webcam embutida no seu computador. Ao preparar o vídeo para a Web, isso pode ser uma
consideração importante. Da mesma forma, ao definir os atributos de width e height em uma
tag <video>, não se esqueça das dimensões alteradas.

221

Figura 11-4: Convertendo arquivos usando o Adobe Media Encoder.

Como você pode ver na Figura 11-4, o AME fornece uma boa quantidade de informações
sobre arquivos. No painel à esquerda, ele exibe visualmente o arquivo com o qual você está
trabalhando atualmente.
PARTE III: MÍDIA EM HTML5

Quando a conversão é concluída, o AME fornece vários formatos de exibição genéricos


diferentes. Por exemplo, a Figura 11-5 mostra o que você pode esperar em um dispositivo
móvel com uma exibição horizontal.

222
Figura 11-5: Exibição de vídeo no Adobe Device Central.

Ao observar a Figura 11-5, você tem uma excelente ideia de como será seu vídeo no
dispositivo de destino. O Adobe Device Central oferece vários modos de exibição
diferentes para que você possa otimizar o vídeo antes de colocá-lo na Web.

FAZENDO VÍDEOS PARA A WEB


Antes de recorrer aos vários atributos do elemento de vídeo, esta seção considera toda a
questão da criação de vídeos e salvamento deles no seu computador. A variedade de tipos
de vídeo disponíveis para exibição na Web é ampla, e a criação e o armazenamento deles
são igualmente variados. Aqui apenas quatro são considerados:

„ Webcams
„ Câmeras de Vídeo Pequenas
„ Câmeras de Vídeo Padrão
„ Captura de Vídeo da Tela

O foco é obter os materiais da câmera em um formato de arquivo que possa ser usado
imediatamente ou convertido para uso com HTML5.
CAPÍTULO 11: VÍDEO

WEBCAMS
No momento da redação deste artigo, a maioria dos laptops vem com webcams embutidas. Da
mesma forma, muitos desktops também funcionam. Para computadores que não vêm com
webcams embutidas, há vários disponíveis que podem ser conectados à porta USB.

Para usuários do Windows 7, o melhor software para fazer vídeos com a webcam é geralmente o
do fabricante da webcam. Por exemplo, tanto a Logitech quanto a Creative, duas empresas que
fabricam webcams, têm um excelente software que registra e armazena arquivos de vídeo que
podem ser convertidos para uso na Web. Você também pode adicionar efeitos especiais com o
software aos seus vídeos.

Além disso, com o Windows 7 e o Vista, você pode baixar o mais novo software Microsoft
Movie Maker gratuitamente em: http://explore.live.com/windows-live-movie-maker. Ao
contrário do Windows XP, que vem embalado com o Windows Live Movie Maker, você
precisa baixar o software de criação de filmes da Microsoft se tiver as versões do sistema
operacional Windows 7 ou Vista.

Os computadores Apple Macintosh geralmente vêm com webcams iSight integradas. Os


laptops iMacs e MacBook possuem webcams incorporadas no topo central dos monitores. Os
modelos que não vêm com webcams têm webcams iSight disponíveis que se conectam às
portas USB ou Firewire.

Para criar vídeos, o aplicativo Photo Booth que vem com o software Mac pode ser usado para
criar vídeos. Todos os arquivos tirados com o Photo Booth são salvos como arquivos 223
QuickTime com a extensão .mov. Eles estão no formato MP4 e, se você alterar a extensão de
.mov para .mp4, , eles serão reconhecidos como o mesmo arquivo.

As webcams são úteis para determinados tipos de projetos de vídeo. Para fazer vídeos
instrutivos para a Web, o instrutor pode se sentar em frente à webcam e conversar e exibir
materiais para o público. Fazer páginas da Web em HTML5 para fornecer slides que suportem a
apresentação de vídeo torna a criação de um pacote instrucional tão simples quanto fazer
virtualmente qualquer apresentação semelhante não destinada ao uso na Web.

CÂMARAS DE VÍDEO PEQUENAS


A principal desvantagem das webcams de criar vídeos que podem ser incorporados no HTML5
é que eles estão vinculados a um computador — seja integrado ou conectado a uma porta USB
ou IEEE 1394 Firewire. Isso torna o uso móvel de webcams problemático, mesmo para laptops
altamente portáteis.

Webcams sem fio estão disponíveis, mas elas tendem a ter um alcance limitado e são mais caras.
No entanto, várias alternativas altamente portáteis estão disponíveis. As mais comuns são
câmeras de vídeo incorporadas em telefones celulares. Telefones celulares usados durante os
protestos após as eleições iranianas de 2009 proporcionaram a exposição mundial da retaliação
do governo contra aqueles que protestaram contra a fraude eleitoral. Como os jornalistas
ocidentais foram proibidos de cobrir as consequências das eleições, a cobertura de notícias foi
fornecida por vídeos de celulares transmitidos no YouTube e anunciados pelo Twitter.
PARTE III: MÍDIA EM HTML5

Uma nova geração de pequenas filmadoras HD foi introduzida e é totalmente portátil,


além de salvar vídeos em um formato de estado sólido. Por exemplo, o Flip Mino HD
com dimensões de 3,94 "x 1,97" x 0,63 "(A x L x P) é menor do que muitos telefones
celulares. A Figura 11-6 mostra um Flip típico com um logotipo da empresa embutido na
câmera.

Figura 11-6: Camcorders pequenas de alta definição são adaptadas para a Web.

224 Além da Flip, as câmeras de vídeo HD também estão disponíveis na Kodak, na forma da
filmadora Kodak Pocket Video. Ambas as filmadoras Flip e Kodak são gravadoras de estado
sólido, portanto, não são necessárias fitas de vídeo digital ou cartões de memória flash
removíveis — assim como nenhum é necessário para telefones celulares. As pequenas filmadoras
vêm com software de edição de vídeo limitado e salvam vídeo no formato H.264 em
computadores Windows e Macintosh.

A qualidade do vídeo é de filmadoras maiores e mais caras, e elas são muito mais portáteis.
Eles foram projetados desde o início para uso na criação de vídeos para sites de redes sociais
como Facebook e YouTube; Como resultado, seus arquivos de saída nativos são ordenados
por encomenda para exibição em elementos de vídeo HTML5.

CÂMARAS DE VÍDEO PADRÃO


O termo padrão aqui se refere a câmeras de mão com recursos como lentes de zoom,
armazenamento de fita cassete mini DV, cartões de memória flash e outros recursos que
podem ser colocados em plataformas maiores. A gama de filmadoras ampliou-se ao ponto
em que o alcance é de versões de baixo custo, usadas para gravações pessoais de famílias,
até aquelas utilizadas por cineastas independentes.

Como as filmadoras (realmente) pequenas, as padrão vêm com conectores USB ou IEEE
1394 Firewire. Os conectores podem ser alimentados diretamente em software de edição de
vídeo, como o Adobe Premier, o Apple Final Cut ou o Vegas. O vídeo editado pode ser salvo
em um formato que possa ser usado pelos navegadores HTML5.
CAPÍTULO 11: VÍDEO

CAPTURA DE VÍDEO DE TELA


Captura de tela de vídeo trata sua área de trabalho como uma gravação de vídeo e um microfone
conectado ou embutido em seu computador como um microfone de gravação de vídeo. Por
exemplo, um dos pacotes de software de captura de vídeo de tela mais estabelecidos é o Camtasia.
É fácil de usar e possui vários recursos para zoom, panorâmica e geralmente simular uma
filmadora destinada a sua tela. A Figura 11-7 mostra os controles básicos.

Figura 11-7: O software de captura de tela de vídeo faz uma gravação ao vivo de sua área
de trabalho.

Basicamente, tudo o que o Camtasia requer é que o usuário selecione a tela e o microfone e
clique no botão Rec (como mostrado na Figura 11-7). Disponível para o Windows 7 e Macintosh
OS X, é um pacote de software amplamente usado para treinadores e educadores que trabalham
em um projeto na tela para que os espectadores possam acompanhá-lo.

Outro aplicativo de captura de vídeo de tela pode ser encontrado como parte do Apple Quick-
Time Player. Ele salva automaticamente arquivos no formato .mov (.mp4) que estão prontos
para serem usados com um site HTML5. O processo de gravação é extremamente fácil e, além
de selecionar o microfone, é uma operação de gravação de início e fim em uma etapa.
225

ATRIBUTOS DE VÍDEO E FONTE


Diversos atributos diferentes para as tags <video> e <source> são essenciais para uma
implantação de vídeo bem-sucedida no HTML5. Depois de criar, editar e converter vídeos
para a Web, o próximo passo é colocá-los na página da Web. Esta seção aborda os
seguintes atributos de elemento de video:

„ src
„ poster
„ preload
„ loop
„ autoplay
„ controls
„ width e height

Esses atributos da tag <video> são discutidos em conjunto com a tag <source> porque nem
todos os navegadores lêem os mesmos tipos de arquivo, portanto, várias origens diferentes
devem ser listadas. A tag <source> t permite que os navegadores escolham qual arquivo de
vídeo é compatível com suas próprias funções de exibição de vídeo (como foi mostrado no
início do capítulo).
PARTE III: MÍDIA EM HTML5

SRC
O atributo type faz parte da tag <source>. Conforme mostrado no início do capítulo, o
atributo src é usado para selecionar um arquivo de vídeo a ser reproduzido. Se o navegador
não conseguir reproduzir o tipo de arquivo atribuído, ele será direcionado ao próximo
arquivo na lista de fontes. Para acelerar esse processo, o atributo type permite que o
navegador saiba que tipo de arquivo está aguardando para ser reproduzido e contém um
parâmetro MIME que informa qual codec está em uso. Isso evita que o navegador tente
carregar o arquivo e falhe. Em vez disso, determina a partir das informações do tipo se o
arquivo de vídeo é compatível.

<source src=”fileName.ext” type=”video/type; codecs=’c1, c2’”>

A atribuição de tipo pode ser feita com ou sem o codec. Se você não souber o codec, poderá
deixar em branco e confiar no tipo para permitir que o navegador saiba se pode reproduzir o
arquivo. Se você souber o codec ou vários codecs, poderá colocar mais de um codec na lista
de atribuições de codecs. Onde você não tem certeza de que é melhor deixar a atribuição de
codecs em branco. O seguinte (TypeVideoSource.html na pasta deste capítulo em
www.wiley.com/go/ smashinghtml5) mostra as atribuições de tipo para os quatro principais
tipos de arquivos de vídeo que você pode usar na Web.

<!DOCTYPE HTML>
<html>
226 <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>Vídeo Seletivo</title>
</head>
<body>
<video controls preload=”auto”>
<source src=”mbAux1.3gp” type=”video/3gpp; codecs=’mp4v.20.8’”>
<source src=”mbAux1small.mp4” type=”video/mp4; codecs=’mp4v.20.8’”>
<source src=”mbAux1small.ogv” type=”video/ogg; codecs=’theora, vorbis’” > <source
src=”mbAux1small.webm” type=”video/webm; codecs=’vorbis,vp8’” >
</video>
</body>
</html>

Para determinar o tipo e o codec de um arquivo, você pode encontrar vários programas
diferentes na Web. Um disponível sem custo com versões para Windows, Macintosh e
diversos sistemas operacionais Linux é o MediaInfo disponível em
http://mediainfo.sourceforge.net/en.

POSTER
O atributo de poster é usado com vídeos grandes e conexões de Internet lentas. É simples
de usar e, se você sabe que levará algum tempo até que o seu vídeo chegue à tela e comece
a ser reproduzido, o pôster dá ao usuário algo para observar enquanto espera. O formato é
simples, conforme mostrado no seguinte trecho:
CAPÍTULO 11: VÍDEO

<video poster=”message.png”>
<source src=”multiformats/mbAux1.mp4” type=”video/mp4”>
</video>

Observe que o atributo poster está na tag <video> , embora todas as informações do arquivo
estejam na tag <source>. Não há conflito entre os atributos de vídeo e aqueles na origem.

PRELOAD
O atributo de preload da tag <video> parece natural para incluir em todas as páginas da Web que
usam vídeo. Assim que a página é carregada, o vídeo começa a ser carregado. Isso pode ser
importante para uma página com um único vídeo como a principal característica da página. No
entanto, se for uma parte menor da página ou se vários vídeos estiverem em uma única página, o
pré-carregamento poderá gerar recursos. Portanto, embora útil, o atributo precisa ser empregado
de maneira criteriosa. Ele usa o seguinte formato:

<video preload=”auto”>
<source src=”mbAux1small.webm” type=”video/webm; codecs=’vorbis,vp8’” >
</video>

O atributo preload tem vários valores que podem ser atribuídos. Eles são idênticos aos
valores de pré-carregamento de áudio.

none: Não ter none como um valor pode parecer estranho, mas alguns navegadores podem
ser configurados para pré-carregar arquivos de vídeo automaticamente. No entanto, se a
chance de usar um determinado vídeo for remota, o desenvolvedor pode decidir não usar
recursos da Internet e, portanto, atribui o valor none ao atributo de preload.. 227
„ metadata: todos os arquivos de vídeo têm metadados como duração, largura, altura ou alguns
outros dados colocados no arquivo de origem. Quando a chance de usar um arquivo de vídeo
é baixa, o carregamento dos metadados é razoável e não ocupa muitos recursos da Internet.
„ auto: se o atributo preload estiver presente, ele pré-carregará automaticamente as
informações do arquivo de áudio. A atribuição auto simplesmente atua como um
lembrete de que o arquivo será pré-carregado (mesmo que não tenha qualquer
atribuição de valor a um atributo preload).

Quanto mais diversificado for o seu público e mais vídeo em seu site, mais você deseja
fornecer ao atributo de preload opções.

LOOP
Um loop de vídeo é algo que você deve planejar com cuidado para não perder todos os
espectadores. Um loop significa que o mesmo vídeo vai começar do começo novamente assim
que terminar. O seguinte é um exemplo:

<video loop controls>


<source src=”phantom.3gp”>
</video>
PARTE III: MÍDIA EM HTML5

Observe que no trecho acima, um atributo de controls é incluído. Isso é para que os usuários
possam pará-lo, se quiserem. Se você configurar um loop com autoplay e incorporá-lo à sua
página, poderá perder muitos espectadores. Se você criar um anúncio de loop, não espere
que as pessoas se sintam atraídas pelo serviço ou produto anunciado — eles perceberão
isso, mas não no bom sentido.

Existe um certo tipo de loop, mais observado na música do que no vídeo, que pode ser útil.
Se for curto o suficiente e não tiver grandes movimentos, um loop pode ocupar muito
poucos recursos e reutilizar o mesmo vídeo armazenado em um cache. Uma demonstração
de um processo ou até mesmo um anúncio que não seja chato pode ser usado dessa maneira.

AUTOPLAY
Como o atributo loop, o atributo autoplay precisa ser usado com alguma premeditação
quando usado com vídeo. A autoplay é uma combinação de preload e inicia
automaticamente a reprodução de vídeo. O formato é booleano e definir a reprodução
automática na tag <video> é o suficiente para iniciá-la.

<video poster=”wait.jpg” autoplay>


<source src=”phantom.3gp”>
</video>

228 No trecho acima, o usuário não tem controle para interromper a reprodução do vídeo, mas
sem um atributo de loop , ele apenas toca uma vez e pára. Se a página não for mais do que o
vídeo, é bastante seguro usar a autoplay sem um controlador. Além disso, o snippet tem um
pôster para permitir que a vista saiba o que está por vir, para o caso de haver uma carga
longa. No contexto de um site ao usar autoplay, certifique-se de incluir um link para a
próxima página para o caso de o usuário não querer ver o vídeo mais de uma vez.

CONTROLS
O atributo controls gera um painel de controle gráfico abaixo do vídeo. Permite ao
usuário realizar as seguintes funções:

„ Comece o vídeo
„ Pare o vídeo
„ Silencie o vídeo
„ Controlar o volume do som
„ Posição do tempo
„ Controle de depuração

O atributo controls é um booleano e é implementado conforme mostrado no trecho a seguir:

<video controls>
<source src=”multiformats/mbAux1small.webm”>
</video>
CAPÍTULO 11: VÍDEO

A implementação do controlador é ligeiramente diferente nos diferentes navegadores (como


estão no controlador de áudio). A Figura 11-8 mostra os navegadores Opera e Chrome que
exibem o mesmo vídeo.

Figura 11-8: O Opera (à esquerda) e navegadores Chrome exibindo o controlador de


vídeo.

As diferenças nos controles são principalmente estilo, mas como você pode ver na
comparação entre os navegadores Opera e Chrome, o navegador Opera exibe a hora no vídeo
atual em relação ao tempo total, enquanto o navegador Chrome mostra apenas a posição
atual da hora do vídeo.

WIDTH AND HEIGHT 229


Ao contrário do áudio, os atributos de width e height no vídeo são muito importantes. Os
navegadores usam os valores de width e height como dicas para renderizar o vídeo.
Quanto mais próximos estiverem os valores do tamanho real, melhor será o aspecto do
vídeo. O seguinte mostra o formato:

<video width=”352” height=”288”>


<source src=”multiformats/mbAux1small.ogv”>
</video>

A maioria dos vídeos mantém uma proporção de 4: 3, como 320 x 240; no entanto, com o
HD, a proporção é diferente e, às vezes, a edição alterou as dimensões de um vídeo. Você
pode selecionar um arquivo de vídeo e ver suas propriedades, mas às vezes não recebe as
dimensões. Por exemplo, em um Macintosh OS X, as informações de dimensão para
arquivos .ogv e .webm não foram fornecidas em uma consulta de propriedades (Ô + I). O
mesmo vídeo em um formato MPEG4, no entanto, mostrou as dimensões.

PEGUE A RODA
Este exercício requer uma câmera de vídeo, e não importa se é uma webcam ou uma filmadora
de vídeo de ponta. Se você já viu uma apresentação com o Microsoft Power-Point, sabe que,
como uma pessoa fala, o palestrante aponta para slides diferentes com gráficos e texto. Para este
PARTE III: MÍDIA EM HTML5

exercício, pense em algo que você gostaria que alguém entendesse. Usando uma combinação
de imagens, vídeo e texto para criar uma apresentação da Web de três páginas. Conforme os
usuários vão de uma página para outra, o vídeo em cada página é iniciado automaticamente,
mas eles têm um controlador para pará-lo ou fazer outras alterações de visualização. Inclua
uma imagem para ilustrar o tópico e o texto para explicar o que é a apresentação. Você pode se
sentar na frente de uma webcam para fazer o vídeo.

230
PARTE IV
TAGS DINÂMICOS
IV EM HTML5 MAIS

UM POUCO

JAVASCRIPT E PHP

Capítulo 12: Adding Just Enough JavaScript


Capítulo 13: Trocando seu Site com Telas
Capítulo 14: Adicionando Formulários
Capítulo 15: Incorporando Objetos e Armazenando
.Informações

Capítulo 16: Captura de Dados Interativos


SMASHING HTML5

CAPÍTULO 12
.

12 ADICIONANDO
APENAS
JAVASCRIPT

JAVASCRIPT É UMA linguagem de com diferentes implementações da linguagem em


programação da Web que você pode usar com diferentes navegadores. Como o JavaScript atende a
HTML5. Ele pode ser usado para acessar certas um padrão ECMAScript (ECMA-262), essas
partes de suas páginas da Web escritas em HTML5 diferenças são pequenas, e o que discutirei neste
e fazer outras coisas que simplesmente não podem capítulo são apenas os aspectos do JavaScript que
ser feitas sem JavaScript. Este capítulo introduz você pode usar com o HTML5.
alguns recursos básicos que serão usados
especificamente com elementos HTML5. Finalmente, JavaScript e Java não têm nada em
comum — o JavaScript não é baseado em uma
JavaScript é considerado uma linguagem de script versão interpretada do Java. Eles poderiam ser
porque é interpretada pelo navegador em tempo de chamados de cães e gatos ou maçãs e laranjas
execução (quando você realmente abre uma página por tudo que eles têm em comum. O nome com
da Web) em vez de compilada e armazenada em java soou melhor. Então, se você quiser
seu computador como um arquivo binário. Versões pesquisar algo na Web sobre JavaScript, não
um pouco diferentes de JavaScript podem entrar será ajudado se procurar apenas Java.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

INSERINDO JAVASCRIPT EM PÁGINAS HTML5


Os programas JavaScript são colocados na cabeça de uma página da Web porque essa parte
da página da Web é carregada primeiro, por isso, ela fica pronta quando o restante da
página é carregado. Eles agem muito parecidos com os scripts CSS3 e, assim como os
scripts CSS3, podem ser colocados em outros lugares além do cabeçalho da página. No
entanto, para este capítulo, vou mantê-lo simples e todo o JavaScript estará na cabeça. Por
exemplo, experimente o seguinte programa (js1.html na pasta deste capítulo em
www.wiley.com/go/ smashinghtml5).

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <script
type=”text/javascript”>
document.write(“A chat with HTML5 is taking place shortly....”);
</script>
<title>Primeiro JavaScript</title>
</head>
<body>
</body>
</html>
.
234 Quando você testar o programa, verá o texto na sua página e nada mais. A chave para ..
.

entender a relação entre HTML5 e JavaScript está na função: document. write(). O document
se refere à página da Web e write()é um método que informa à página da Web o que
fazer. Nesse caso, write()instrui o programa a escrever o texto entre aspas na página da
Web.

JAVASCRIPT EM ARQUIVOS EXTERNOS


Assim como os arquivos CSS3, você pode criar programas JavaScript em arquivos de
texto e salvá-los externamente. A extensão .js é usada para identificar arquivos JavaScript.
Por exemplo, o seguinte programa JavaScript é apenas uma linha:

document.write(“This is from an external file...”);

Salve como externalJS.js em um formato de arquivo de texto. Em seguida, insira o seguinte


programa HTML5 e salve-o na mesma pasta que o programa externalJS.js. A parte
principal da página é a tag <script> usada para especificar o programa JavaScript a ser
usado.

<!DOCTYPE HTML>
<html>
<head>
<script src=”externalJS.js”></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>JavaScriptExterno</title> </head>
<body>
</body>
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

Quando a página da Web é aberta, você vê o conteúdo da instrução document.write().O


método write()é apenas uma função interna que espera que uma linha de texto seja exibida na
tela. Nesse caso, o texto é de um arquivo externo; caso contrário, é o mesmo que incorporá-
lo a um script de página da Web.

FUNÇÕES
Funções JavaScript são pacotes de código que são iniciados quando chamados pela página
da Web. A vantagem das funções é que você pode usá-las para empacotar o código e fazer
alterações para adicionar novo conteúdo. A função interna write()requer apenas que você
digite algum texto para impressão no documento (página da Web). Você não precisa
depender de funções internas, mas pode criar as suas próprias. Por exemplo, o seguinte é um
programa JavaScript externo com uma função simples que abre uma função alert().(Uma
função do usuário usando uma função interna.) Salve o seguinte programa JavaScript como
nameMe.js:

// Documento JavaScript
var name=”Little Willie Hacker”;
function getName(someName)
{
alert(someName);
}
getName(name)

Todas as funções são seguidas por parênteses. Se necessário, o desenvolvedor pode colocar
235
um parâmetro entre parênteses. Nesse caso, o parâmetro é chamado de someName. Quando a
função é chamada, o desenvolvedor coloca um nome, um número ou qualquer outra coisa
desejada no espaço onde someName está. Neste caso, um nome rotulado de variável é
atribuído ao valor Little Willie Hacker. Na parte inferior do programa, a linha getName(name)
chama a função, colocando a variável no parâmetro. A função passa o valor da variável para
a função alert()dentro da função getName(), então você pode esperar ver uma caixa de alerta
na tela quando o programa for iniciado. O seguinte HTML5 (JSfunction.html na pasta deste
capítulo em www.wiley.com/go/smashinghtml5) chama o JavaScript que chama a função.

<!DOCTYPE HTML>
<html>
<head>
<script src=”nameMe.js”></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Função Externa</title>
</head>
<body>
</body>
</html>

Esse programa JavaScript foi lançado assim que a página é carregada. Um uso mais
importante das funções do JavaScript reside na sua capacidade de esperar pelo
JavaScript até ele precisar dele. A próxima seção mostra como.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

TRABALHADORES DE EVENTOS
The real power of JavaScript with HTML5 can be better seen when the program waits until
the user does something to launch a script. For example, if the user clicks something, you
can launch any JavaScript program you want. You use an HTML5 event handler. The page
detects some kind of action (an event) and has a built-in function that recognizes the event.

HTML5 recognizes a lot of events. Some of the events occur automatically — such as when
the page loads. Other events occur when users do something with the mouse or keyboard. The
elements in Table 12.1 shows a sample of some of the different events handlers.

Tabela 12.1 Uma amostra de manipuladores de eventos HTML5

onchange onclick ondbleclick ondrag ondragend


ondragenter ondragleave ondragover ondragstart ondrop
onkeydown onkeypress onkeyup onmousedown onmousemove
onmouseout onmouseover onmouseup onmousewheel onpause
onplay onplaying onprogress onloadstart onload

O formato geral de todos os eventos ligados a elementos é:


.

236 <element onEvent = “javascriptFunction()”>

Por exemplo,

<body onLoad = “announceSomething()”>

usa o elemento body com o manipulador de eventos onLoad para disparar uma função
JavaScript chamada announceSomething().

Detectando uma variedade de eventos


Para ver como os manipuladores de eventos funcionam com JavaScript, o programa a seguir
(ClickDetect. html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) tem três
manipuladores de eventos diferentes e três funções JavaScript diferentes que são ativadas
pelos eventos. O primeiro envia um alerta quando a página é carregada, o segundo é
acionado quando o link superior é clicado e o terceiro lança um alerta quando o segundo link
é clicado duas vezes.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
h1, h2 {
font-family:Tahoma, Geneva, sans-serif;
}
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

a {
text-decoration:none;
color:#060;
}
</style>

<script type=”text/javascript”>
function detectLoaded()
{
alert(“Page is loaded.”);
}
function detectClick()
{
alert(“You clicked a link.”);
}
function detectDoubleClick()
{
alert(“You double-clicked another link.”);
}
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Manipulador de eventos</title>
</head>
<body onLoad=”detectLoaded()”>
<hgroup>
<h1> <a href=”#” onClick=”detectClick()”>Clique Aqui</a></h1> 237
<h2> <a href=”#” onDblClick=”detectDoubleClick()”>Clique Duas Vezes</a> </h2>
</hgroup>
</body>
</html>

As funções JavaScript podem ser o que você quiser, o que permite que você interaja muito mais
com os usuários. Você pode fornecer instruções, opções, cuidados ou o que quiser.

Manipulando com qualquer elemento


Na área de "clique" no programa anterior, uma tag de link, <a>, é usada para configurar o
manipulador de eventos, usando o seguinte formato:

<a href=”#” onClick=”clickEventHandler()”>

Esse tipo de código não é novidade para o HTML5. Ele é usado aqui por um motivo
simples: quando o mouse passa sobre o texto na tag <a>, o cursor muda para que os
usuários saibam que estão sobre o texto vinculado.

No entanto, você pode configurar um manipulador de eventos em qualquer elemento. Por


exemplo, considere a seguinte página da Web (ClickP.html na pasta deste capítulo em
www.wiley.com/go/smashing html5).
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
p {
font-family:Verdana, Geneva, sans-serif;
color:#FF0;
background-color:#00F;
font-size:24px;
text-align:center;
font-weight:bold;
}
</style>
<script type=”text/javascript”>
function showArticle()
{
alert(“You just clicked within a <article> container”);
}
function showHeader()
{
alert(“You just clicked within a <header> container”);
}
function showP()
{
alert(“You just clicked within a <P> container”);
238 }
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”> <title>OnClick em
qualquer elemento</title>
</head>

<body>
<article onClick=”showArticle()”>
<header onClick=”showHeader()”>
<h1>Este é um Elemento H1 no Cabeçalho</h1> </header>
<section>
<p onClick=”showP()”>Clique Neste Parágrafo</p>
Este é simplesmente o texto antigo no contêiner do artigo. Clique aqui só para ver o que acontece.</section>
</article>
</body>
</html>

Observando o programa acima, você deve ter notado que alguns eventos estão incorporados
dentro de outros elementos que também possuem manipuladores de eventos. Por exemplo,
todos os elementos estão dentro da tag <article>. O que acontecerá quando você clicar no
parágrafo que tem um manipulador de eventos? Ou o <header>? Eles só vão reagir ao evento
mais íntimo ou mais externo?
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

Observe atentamente os dois painéis na Figura 12-1.

239

Figura 12-1: Manipuladores de eventos aninhados.

No painel superior, assim que um usuário clica na linha “Clique neste parágrafo”, o evento
é relatado na caixa de alerta (no painel superior). Então, quando o usuário clica no botão
OK no pop-up de JavaScript, o segundo alerta aparece, informando que ele também clicou
no contêiner <article>. Uma maneira de ver os eventos está borbulhando, começando no
nível mais baixo da hierarquia de elementos e, em seguida, borbulhando até o nível mais
alto.

USANDO O MODELO DE OBJETO DE DOCUMENTO


O Document Object Model (DOM) para HTML5 representa uma árvore de hierarquia. Na
base (raiz) de cada página da Web ou documento está a tag <html>, e o resto dos elementos
na página são um ramo em algum lugar ao longo da árvore. O JavaScript usa o DOM para
endereçar e manipular uma página da Web além do que você pode fazer com o HTML5
sozinho. Toda a árvore do DOM é uma representação do documento que reside na memória
do seu computador.

Quando qualquer parte da árvore DOM é endereçada, faz isso referenciando um elemento
dentro da árvore, começando com o document. Cada elemento na árvore é endereçado na
ordem da hierarquia que começa com o document. Os diferentes elementos em uma página
da Web são as diferentes propriedades ou métodos (funções internas) do document
separados por um ponto (.).
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Por exemplo,

document.forms.fred;

aborda um formulário chamado fred dentro de um documento. A marcação HTML5


se parece com o seguinte:

<form name= “fred”>

Outras vezes, você verá uma função incorporada que faz algo com o documento, como

document.write(“This is straight from the Document”);

que imprime texto na tela. Além disso, a raiz da janela junto com o documento tem várias
funções internas que são úteis para manipular áreas de visualização de uma página da Web.

COMO O DOM FUNCIONA COM SUA PÁGINA E JAVASCRIPT


Para ter uma ideia melhor de como o DOM funciona com sua página e JavaScript, é útil
ver o que pode ser feito com as janelas de uma página da Web — a parte de exibição de
sua página da Web. O seguinte (PageOpener.html na pasta deste capítulo em
www.wiley.com/go/ smashinghtml5) mostra como carregar uma nova janela a partir de
um documento atual, deixando a página atual no lugar.
240 .
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
a {
text-decoration:none;
color:#cc0000;
font-size:24px;
}
header {
text-align:center;
}
</style>
<script type=”text/javascript”>
function someOtherWindow()
{
window.open(“OtherWindow.html”,”ow”,”width=400,height=200”);
}
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Abrir Outra Página</title>
</head>
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

<body>
<header> <a href=”#” onClick=”someOtherWindow()”>Clique Para Abrir Nova Janela</a> </
header>
</body>
</html>

Esta página requer uma segunda página para abrir como uma janela separada. O seguinte
(OtherWindow. html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) fornece
uma página para abrir e, ao mesmo tempo, o script baseado em DOM para fechar a janela
aberta.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
h1,h4 {
font-family:Verdana, Geneva, sans-serif;
color:#930;
}
a {
text-decoration:none;
color:#cc0000;
text-align:center;
}
</style>

241
<script type=”text/javascript”> 241 function shutItDown()
{
window.close();
}
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Outra Janela</title>
</head>
<body>
<h1>Esta janela tem uma mensagem importante. . . .</h1>
<h4>Aguarde enquanto eu descubro o que é. . . .</h4>
<a href=”#” onClick=”shutItDown()”>Feche a janela!</a>
</body>
</html>

A Figura 12-2 mostra o que você pode esperar quando a página da Web é aberta como segunda janela.

Até este ponto do livro, quando uma página foi vinculada a outra página, a página atual
desapareceu assim que o usuário clicou em um link. No entanto, com esse pequeno JavaScript,
você pode “conversar” diretamente com a página e informar que deseja que uma nova janela de
um tamanho especificado seja aberta enquanto sua janela atual permanece aberta.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Figura 12-2: Abrindo uma segunda janela.

ELEMENTOS HTML5 E O DOM


Para dar uma ideia melhor de como trabalhar com o DOM em HTML5, alguns elementos
novos exigem referências DOM nas próprias tags. Um desses novos elementos é a tag
<output>. No momento desta publicação, o Opera era o único navegador que tinha
implementado totalmente esse novo elemento, então você pode querer testá-lo
inicialmente com o Opera. Antes de incorporá-lo totalmente ao seu site, teste-o com todos
os outros navegadores, pois você poderá considerá-lo muito útil como elemento-chave do
HTML5.
242
Quando você usa a tag <output>, você pode colocar os resultados de um cálculo
diretamente na página da Web. Você não precisa criar uma função JavaScript ou até
mesmo um script. No entanto, os materiais contidos em uma tag <output> devem seguir as
mesmas regras DOM do JavaScript. O contêiner de saída não exige conteúdo entre as tags
de abertura e fechamento. No entanto, todos os cálculos devem estar dentro da própria tag
<output>.

O elemento de saída funciona em conjunto com a tag <form> abordada em detalhes no


Capítulo 14, mas por enquanto o foco está na estrutura DOM no uso da tag <output>. O
script a seguir (shoppingOutput.html na pasta deste capítulo em www.wiley.com/
go/smashinghtml5) mostra como incorporar o elemento em uma página HTML5 funcional.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/*042B45,FFC54F,FFE6BF,E8A5B5,FF0A03*/
body {
font-family:Verdana, Geneva, sans-serif;
background-color:#FFE6BF;
color:#042B45;
}
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

input {
background-color:#FFE6BF;
}
h1 {
color:#E8A5B5;
background-color:#042B45;
text-align:center;
}
h3 {
color:#FFC54F;
background-color:#FF0A03;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Carrinho de Compras Simples</title>
</head>
<body>
<header>
<h1>Calculadora de Compras</h1>
</header>
<form>
<input name=cost type=number>
&nbsp;Cost <br>
<input name=tax type=number>
&nbsp;Tax--Enter as decimal percent (e.g., .06) <br>
<h3> &nbsp;Total = $ 243
<output onforminput=”value = cost.valueAsNumber * tax.valueAsNumber + cost.
valueAsNumber”></output>
</h3>
</form>
</body>
</html>

A tag <form> não possui informações além da própria tag. Para esta aplicação, não precisa de
nenhum. Dentro do contêiner <form> , dois formulários de entrada são denominados cost e tax.
No contexto do DOM, cada um é um objeto com certas propriedades, uma das quais é
valueAsNumber. Qualquer que seja o número do caractere no formulário de entrada, ele é tratado
como um número real em vez de um caractere de texto. O valueAsNumber é uma propriedade da
tag <input> e não o tipo de number usado neste exemplo. (Poderíamos ter usado um valor de text
para o tipo de entrada e termos os mesmos resultados usando a tag <output>.) O formulário de
entrada number tem um tipo de janela de entrada “giratório”, mas os valores na janela de entrada
não são convertidos automaticamente em dados numéricos. A Figura 12-3 mostra os resultados da
página da Web em um navegador Opera (o único navegador HTML5 que implementou o
manipulador de eventos onFormInput no momento desta publicação).

Observe como o manipulador de eventos onFormInput funciona. Conforme as informações


são inseridas no formulário, os resultados são calculados e exibidos. Inicialmente, o
resultado é NaN (não é um número) porque a entrada de imposto é nula, resultando em um
resultado não-numérico. No entanto, assim que o imposto é inserido, a saída é alterada para
um número.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Figure 12-3: Using the <output> tag for calculations in Opera browser.

STORING TEMPORARY VALUES


Neste breve resumo do JavaScript, analisamos bastante, por isso, se algum deles escapa de
você, não se preocupe. A maior parte do que você precisa saber sobre JavaScript no contexto
do HTML5 é trabalhar com o DOM. Nesta seção, mostro como os dados são armazenados
temporariamente na memória do seu computador ao olhar para uma página da Web. Os
usuários podem inserir dados clicando em um botão, uma caixa de seleção, um botão de opção
ou um link ou usando o teclado. (Tudo isso estará relacionado ao que acontece com o DOM —
confie em mim).
244
Para usar as informações que os usuários inserem, o JavaScript tem maneiras de
armazená-las na memória e disponibilizá-las posteriormente na sessão. Examinando as
diferentes estruturas em JavaScript, você pode ter uma ideia de como isso acontece.

VARIÁVEIS
Uma variável é algo que muda — varia. Você pode pensar em uma variável como uma caixa
com um rótulo nela. Por exemplo, você pode ter uma caixa com o rótulo “MobilePhone”. Na
caixa, você pode colocar apenas uma coisa. Você pode alterar o que está na caixa — o que
chamamos de valor da caixa. Então, se você tiver o iPhone na sua caixa do MobilePhone,
você pode retirá-lo e colocar um iPhone diferente (um modelo mais novo) ou um telefone
diferente, como um Android. Agora, a caixa tem um valor diferente. O par de valores de
rótulo (ou par de nome e valor) é a combinação do rótulo da variável e seu valor atual.

Você não precisa colocar o nome de um celular na caixa do MobilePhone. Você pode colocar o
que quiser — um walkie-talkie ou um elefante rosa. Atribua qualquer valor que você queira e
qualquer tipo de valor, incluindo outra variável. Se eu quisesse, poderia colocar um número —
um número real, não apenas um que identificasse algo como um endereço de rua. No entanto,
uma prática boa e prática é usar nomes de variáveis que podem ser associados ao que você espera
colocar (ou atribuir) à variável.
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

Por exemplo, se você estiver criando um site que espera ser usado para inserir preços e
impostos (como foi feito na seção anterior, “Elementos HTML5 e o DOM”), faz sentido usar
nomes de variáveis significativos, como “ custo "e" imposto ".

Para criar uma variável, basta fornecer um nome e atribuir um valor a ele. Por exemplo,

billVar=”Brought to you by Bill’s variable.”;


alert(billVar);

cria uma variável chamada billVar. Em seguida, ele atribui o valor Brought to you by
Bill’s variable. Quando a variável é colocada na função de alerta, observe que não
aspas rodeiam a variável.

Tipos de dados
Quando você atribui valores a uma variável JavaScript, pode atribuir qualquer tipo que
desejar e depois alterá-lo para um tipo diferente. Primeiro, porém, você precisa ter uma
ideia dos diferentes tipos de dados disponíveis. A lista a seguir fornece uma breve
descrição de cada um:

„ String: Tratado como texto, normalmente entre aspas


„ Number: Um número real (inteiro ou real) que responde a operações matemáticas
„ Boolean: Um tipo de dados de dois estados (verdadeiro ou falso, 0 ou 1)
„ Function: Um conjunto de operações JavaScript contidas em um módulo 245
„ Object: Uma coleção encapsulada de propriedades (variáveis / matrizes) e
métodos (funções)

Você viu como as variáveis de string funcionam. Quando você coloca números em uma
string, eles são tratados como texto em vez de números. Por exemplo, a seguinte string trata
o "123" exatamente como "Elm Street" — como texto.

funHouse=”123 Elm Street”;

Da mesma forma, se você usasse a seguinte atribuição, ainda teria texto e os resultados
mostrariam:

firstNumber=”123”;
secondNumber=”7”;
total=firstNumber + secondNumber;
document.write(total);

Em vez de mostrar "130", os resultados mostram "1237". Em seguida, tente o seguinte:

firstNumber=123;
secondNumber=7;
total=firstNumber + secondNumber;
document.write(total);
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Agora, os resultados mostram "130" como esperado quando você adiciona números.
Sempre que o operador de mais (+) é usado com texto, ele é chamado de concatenação e
simplesmente agrupa tudo. Se você colocar qualquer tipo de texto em uma lista de números
a serem adicionados, e apenas um dos números for texto, todo o restante será tratado como
texto e concatenado.

Diferentes tipos de variáveis juntos


O programa a seguir (SimpleVariable.html na pasta deste capítulo em www.wiley.
com/go/smashinghtml5) usa todos os diferentes tipos de dados. Você precisará analisar de
perto os diferentes tipos de dados para determinar os resultados esperados. Os comentários
no código devem ajudá-lo a ver todos os tipos de dados JavaScript.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
/*BAD9CB,048C3F,7BA651,F2BE5C,F2A950 */
body {
background-color:#BAD9CB;
font-family:Verdana, Geneva, sans-serif;
color:#048C3F;
}
</style>
<script type=”text/javascript”>
246
function advertisement()
{
billVar=”Brought to you by Bill’s variable.”;
return billVar;
}
//Variável com função
popUpAd=advertisement();
document.write(popUpAd);
//Variável com código HTML5
cr=”<br>”;
document.write(cr);
// Variável com string
funHouse=” Elm Street”;
// Boolean variable var
fate=true;
// Variável com string
query=”Will I find true happiness in HTML5? The answer is: “;
// Variáveis com números
fun=100;
house=23;
// Matemática com variáveis
funPlusHouse=fun + house;
// Adicionando variável numérica e de string (concatenação)
showAddress=funPlusHouse + funHouse;
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

browser=navigator.platform;
document.write(showAddress);
document.write(cr);
document.write(query);
document.write(fate);
document.write(cr);
document.write(browser);
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Variável Simples</title>
</head>
<body>
</body>
</html>

Dependendo do tipo de computador usado, o valor da variável do navegador será diferente.


(Isso certamente varia.) A página foi executada em um computador com Windows 7 e
Macintosh para ver como uma variável variava. A Figura 12-4 mostra a saída diferente do
mesmo programa.

247

Figura 12-4: Exibindo tipos de computadores variáveis na tela.

O valor da variável, navigator.platform , é um objeto. O objeto do navigator tem uma


propriedade, platform, que informa em qual tipo de computador o navegador está sendo
executado. Ao testar o programa no Windows 7 (consulte o painel superior na Figura 12-4)
com um sistema operacional de 64 bits, os resultados mostram o Win32. Isso porque os
navegadores testados eram de 32 bits, incluindo uma versão anterior do Internet Explorer 9.
Os resultados da MacIntel (consulte o painel inferior na Figura 12-4) estavam em um
computador Macintosh com um processador Intel exibido em um navegador Opera.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

MATRIZES
Uma variável pode ter apenas um único valor por vez. O valor pode ser calculado com
base em uma combinação de valores diferentes, mas, uma vez armazenado em uma
variável, ele se torna um. Por exemplo, como mostrado na seção anterior sobre variáveis,

firstNumber=123;
secondNumber=7;
total=firstNumber + secondNumber;

A variável denominada total é a soma das duas primeiras variáveis. É uma entidade única.
Isso seria verdade se eles fossem concatenados também. Então, lembre-se: as variáveis
podem ter apenas um valor por vez. A Figura 12-5 fornece uma ilustração gráfica da
diferença entre variáveis e matrizes.

Variável Matriz

AmorVerdadeiro material[0] material [1] material[2] material [3]


248
Nome variável: Nome da
matriz:
AmorVerdadeiro
material

Figura 12-5: Armazenando dados em variáveis e matrizes.

Como você pode ver na Figura 12-5, apenas um único item é armazenado na variável
chamada AmorVerdadeiro, mas a matriz, material, tem muitas, coisas, Você chama cada um
dos dados armazenados com o nome da matriz com um número entre chaves. Então, o
material[1] é uma âncora e o material[2] é uma calculadora.

Alguns aplicativos exigem vários valores em um único objeto, facilitando a recuperação e


o armazenamento de dados. Cada valor em uma matriz é chamado de elemento. Você faz
referência a cada um por um número, começando com zero (0) e numerado
sequencialmente (consulte a Figura 12-5). Suponha que você tenha uma matriz chamada
fruta. Você pode atribuir valores conforme mostrado aqui:

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
fruit=new Array();
fruit[0]=”rasberries”;
fruit[1]=”peaches”;
fruit[2]=”apples”;
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

fruit[3]=”plums”;
document.write(fruit[1]);
var myFruit=fruit.pop();
document.write(“<br>” +myFruit + “<br>”);
document.write(fruit.length);
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Matriz 1</title>
</head>
</html>

O resultado do programa anterior são as palavras pêssegos, ameixas e 3 na tela. Os pêssegos


foram retirados da matriz por referência numérica e colocados em uma função de saída de
tela. Em seguida, usando o método pop(), o elemento na parte superior da matriz foi colocado
em uma variável chamada myFruit e exibida na tela. Finalmente, o método pop()removeu um
elemento do array e o colocou na variável myFruit, então agora o array tem um comprimento
de 3 — e é isso que é mostrado na tela. Cada elemento em um array funciona como uma
variável. A diferença é que faz parte de um objeto maior — o array.

OBJETOS
O tipo de dados final usado para armazenar valores é um objeto. (Não era o Array um objeto?
Sim. Você já está à frente do jogo!) Todos os objetos são semelhantes aos arrays, pois podem
conter mais de um valor único. No entanto, os objetos possuem várias propriedades internas. As
propriedades têm valores fixos (chamados constantes) ou valores que mudam dependendo das
circunstâncias. Até mesmo o objeto Array possui um — length de propriedade interno. Ele
retorna o número de elementos na matriz. Portanto, se você adicionar as duas linhas a seguir
ao programa de matriz na seção anterior, verá o tamanho da matriz:
249
...
document.write(fruit[1]);
//Adicione as duas linhas seguintes
document.write(“<br>”);
document.write(fruit.length);

O valor de fruit.length é 4 — é sempre um maior que o elemento de matriz com numeração


mais alta porque o comprimento é o número real de elementos na matriz que começa com o
valor 1. (É baseado em um em vez de em zero).

Algumas propriedades de objetos são chamadas de métodos. Um método é uma função que
faz algo em relação ao objeto. Por exemplo, um método de objeto Array é pop().O método
pop()retorna o último elemento na matriz. É uma forma de atribuir uma variável ao método
de um objeto — da mesma forma que você pode atribuir uma variável a uma função. Vamos
consertar esse programa da última seção novamente. Desta vez, a variável myFruit é
atribuída fruit.pop().Isso significa que tudo o que está no topo da pilha da matriz é removido.
No entanto, se usado em uma atribuição de variável, ele atribui o elemento removido à
variável conforme a correção a seguir do trecho anterior mostra:
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

...
document.write(fruit[1]);
//Adicione as três linhas seguintes
var myFruit=fruit.pop();
document.write(“<br>” + myFruit + “<br>”);
document.write(fruit.length);

Quando você testar o programa da seção anterior com as alterações acima, verá que o último
elemento adicionado tem um valor de plum e é o que é impresso na tela. No entanto, o
comprimento não é mais 4, mas agora 3. Isso ocorre porque o método pop() method removes the
element from the array. (A propósito, o var na frente da variável myFruit é opcional para
declarar uma variável, mas ajuda a distingui-lo dos elementos da matriz nesta lista).

Criando seus próprios objetos


Se você criar alguns dos seus próprios objetos, poderá ter uma ideia de como os objetos
funcionam no DOM. Além disso, para ajudar a esclarecer as coisas, a partir de agora, uma
referência às propriedades de um objeto em geral se refere a propriedades e métodos. No entanto,
quando fico específico ao falar sobre as partes individuais de um objeto, a referência será uma
propriedade (alguma característica do objeto) ou um método (uma função associada ao objeto).

A criação de objetos é semelhante à declaração de variáveis e à atribuição de valores. O objeto


em si é uma espécie de base de operações para fazer muitas coisas diferentes e ter características
diferentes. O primeiro passo é simplesmente usar um nome e a palavra-chave new. Por exemplo,
o seguinte declara um objeto AddingMachine:
250
AddingMachine=new Object();

Em seguida, para adicionar uma propriedade, você inventa um novo nome para a propriedade
e atribui a ela um valor. O nome do objeto e sua propriedade são separados por um ponto (.).
Por exemplo, o seguinte adiciona uma propriedade denominada firstNumber e atribui a ela
um valor de 4:

AddingMachine.firstNumber=4;

Assim como uma variável, você pode alterar o valor firstNumber para outra coisa.

Para adicionar um método (uma função) é tão fácil. No entanto, em vez de usar uma função
nomeada, você usa uma função anônima. Por exemplo, o seguinte adiciona o valor de duas
propriedades para o objeto AddingMachine e as envia para a tela:

AddingMachine.total=function()
{
document.write(this.firstNumber + this.secondNumber);
}

A palavra-chave this é uma referência ao AddingMachine. É o mesmo que escrever Adding


Machine.firstNumber. Observe também que function() não tem nome — é anônimo.
CAPÍTULO 12: ADICIONANDO APENAS JAVASCRIPT

Agora é hora de juntar tudo e ver o que acontece (veja UserObject.html na pasta deste
capítulo em www.wiley.com/go/smashinghtml5):

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
AddingMachine=new Object();
//Propriedades do objeto
AddingMachine.firstNumber=4;
AddingMachine.secondNumber=66;
//Método de objeto
AddingMachine.total=function()
{
document.write(this.firstNumber + this.secondNumber);
}
//Dispare o método!
AddingMachine.total();
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Simple Object</title>
</head>
</html>

Note que o método AddingMachine.total() usa o método document.write(). 251


(Você pode identificar os métodos em JavaScript procurando os parênteses.) Além disso,
observe que para disparar o método, o nome do objeto e da função são listados e vão para fora.
Ao testá-lo, você verá que os resultados são o total das duas propriedades.

De volta ao modelo de objeto de documento e aos objetos do


navegador
Este capítulo cobriu muito território muito rapidamente. Na verdade, a última seção é o
primeiro passo na Programação Orientada a Objetos (OOP). Então, se você não pegou tudo,
não se preocupe. O objetivo é torná-lo mais confortável com o DOM em HTML5. Se você
entender termos como propriedades e métodos, eles não parecerão estranhos.

À medida que entramos em muitos dos novos recursos do HTML5, você poderá navegar por
todos os termos e entender o que está acontecendo. Em outras palavras, será mais fácil
aprender. Isso não significa que você precisa se tornar um programador de OOP para
entender essas coisas. Significa apenas que um pouco de OOP ajuda muito a entender os
objetos do DOM e do navegador que são úteis ao usar elementos como a canvas.

Ao longo do livro, você viu objetos que pertencem ao navegador. Eu não os discuti como
tal, mas é o que eles são. O navegador tem os seguintes objetos que são importantes para
usar o HTML5. Incluem-se os seguintes:

História
Localização
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

„ Navegador
„ Tela
„ Janela

Por exemplo, na seção "Tipos de dados", anteriormente neste capítulo, você viu como a
propriedade navigator.platform foi usada para encontrar o tipo de computador em uso.

The HTML5 DOM itself has far more objects, and the most used is the Document property.
The list of objects is the same as the list of elements. So, a list of all the DOM objects is a
list of all elements, plus some others that are used in conjunction with the DOM. For
example, the following are included in the HTML5 DOM but aren’t exactly elements:

„ Document
„ Event
„ Image
„ Link
„ Meta

Alguns desses objetos vemos em tags. Por exemplo, o objeto de imagem é visto nas tags <img>.
Suas propriedades são semelhantes aos atributos do elemento img. Outros, como o documento,
estão implícitos em que uma página da Web é o documento. O objeto de event é empregado na
manipulação de eventos com métodos como onClick. O resto são elementos, então eles devem
estar familiarizados. Mas, em vez de atributos em uma tag, espere encontrar propriedades
com os mesmos nomes e funções que os atributos equivalentes.
252
PEGUE A RODA
As fontes de dados são importantes para entender, e uma maneira de compreendê-las é
praticar usando tipos diferentes. O desafio é fazer o seguinte:

1. Selecione uma string — uma de suas frases ou informações favoritas. Por


exemplo, "Todos os objetos são compostos de propriedades e métodos".
2. Atribua a string a uma variável e use document.write()para enviá-la para a tela.
Divida a sequência em várias palavras separadas e coloque cada palavra em um
elemento de matriz diferente e, em seguida, use o método e o documento
array.pop(), document. write()para exibi-los na tela em uma única mensagem.
.

3. Por fim, crie um objeto com uma propriedade que tenha a sequência que você
selecionou. Crie um método para a propriedade que exibe a string para a tela.
. SMASHING HTML5

CAPÍTULO 13
13 TROCANDO
SEU SITE
COM TELA
UMA DAS adições mais importantes ao Na maioria das vezes, escrever código
HTML5 é a tag <canvas>. Com ele, você pode JavaScript é apenas atribuir valores a
desenhar praticamente qualquer coisa em uma propriedades e, como você sabe como atribuir
página HTML5. Com apenas dois atributos, valores a atributos — height=”200”, por
width e height, não há muito o que lembrar sobre exemplo — há menos novidades em escrever
os atributos. No entanto, o elemento canvas é esse tipo de código do que você pode pensar.
implementado no que pode ser chamado de
estilo DOM (Document Object Model). O Para ajudá-lo, o JavaScript em uso emprega o
capítulo 12 descreve o DOM em detalhes. que você pode chamar de “OOP Lite”. O DOM
Essencialmente, o estilo DOM significa escrever representa a programação orientada a objetos
o JavaScript necessário com referências a (OOP) em que todas as referências são para
objetos e seus métodos e propriedades. diferentes objetos e suas propriedades. Ao
configurar o JavaScript usando um estilo
Se esse tipo de conversa tiver você tremendo em semelhante — criando objetos e, em seguida,
seus chinelos, relaxe. Ao longo do livro, as tags atribuindo-lhes propriedades e métodos — seu
HTML5 (elementos) usaram atributos e os código se parecerá muito com expressões
atributos são apenas propriedades dos tiradas do DOM.
elementos.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

NOÇÕES BÁSICAS DE TELA


Como o elemento canvas é uma parte crucial do HTML5 e funciona apenas com
navegadores compatíveis com HTML5, a primeira coisa que você deseja fazer é informar
aos usuários que precisam de um navegador HTML5. Vários métodos estão disponíveis
para descobrir se o canvas funciona com o navegador, mas o mais fácil e mais informativo
(para o usuário) é colocar uma mensagem no contêiner <canvas>. Somente usuários sem
navegadores compatíveis com HTML5 veem o texto no contêiner. Por exemplo, a linha
seguinte, facilmente confundida com o clamor de uma rainha do drama, transmite a
mensagem. Ao mesmo tempo, permanece invisível para usuários que possuem
navegadores HTML5:

<canvas id=”colorScheme” width=”600” height=”100” > Vamos, Jack e Jill! Você


<i>realmente</i> precisa obter um navegador compatível com HTML5. Você está perdendo a<b>tela!</
b></canvas>

Eu desenterrei um velho (muito antigo!) Navegador Internet Explorer para o Mac. A


Figura 13-1 mostra o que apareceu quando abri a página com a tag <canvas>.

254

Figura 13-1: Mensagem exibida com um navegador não HTML5.

Apenas para ser justo, eu corri o mesmo programa em uma versão inicial (muito cedo!) Do
Internet Explorer 9. Como você pode ver na Figura 13-2, o desenho da canvas aparece, mas a
mensagem não.

Figura 13-2: Tela em um navegador HTML5.


CAPÍTULOP 13: TROCANDO SEU SITE COM TELA

Poderíamos escrever algo mais sofisticado, mas a mensagem é a mensagem, então vamos
sair bem o suficiente sozinhos. Se você tem um navegador HTML5, tudo é Jake. Se não, o
usuário descobre porque não em uma mensagem. (Você pode querer afinar a mensagem
para o seu público — de Jane Austen a Ivan, o Terrível).

Antes de começarmos a criar seus próprios desenhos, vamos analisar mais uma forma de
evitar o consumo de água quente com usuários que não usam HTML5. Além de adicionar
texto, você pode adicionar fotos ou qualquer outra coisa no contêiner <canvas>. Por
exemplo, o script a seguir (Canvas-Photo.html na pasta deste capítulo em
www.wiley.com/go/smashinghtml5) oferece uma alternativa para uma apresentação mais
sofisticada de uma imagem fotográfica usando a canvas.

<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
body {
font-family:Verdana, Geneva, sans-serif;
background-color:#060;
color:#0FC;
}
img {
padding-top:10px;
padding-bottom:10px;
}
</style> 255
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Garotopescador</title>
</head>
<body>
<body onLoad=”CanvasMaster.showCanvas()”>
<canvas id=”photo” width=”300” height=”272” > Visualizador gentil, se você vir esta mensagem, significa que
(infelizmente) você não tem um navegador HTML5. (Mas você pode ver a foto e a legenda).<br>

<figure> <img src=”fisherkid.jpg” width=”300” height=”272” alt=”kid fishing”/><br> <figcaption> Garoto pescando
</figcaption>
</figure>
</canvas>
</body>
</html>

O visualizador não HTML5 não só receberá a mensagem sobre a atualização do


navegador, mas também o verá no estilo descrito em CSS3. Ele também poderá ver a foto
e a legenda, como mostra a Figura 13-3.

Se você usar um navegador HTML5, o programa anterior apresentará uma grande tela em
branco sem nada. Portanto, certifique-se de que, se você estiver usando uma alternativa
para navegadores que não sejam HTML5, terá algo realmente na canvas.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

256

Figura 13-3: Fornecendo materiais alternativos para navegadores não HTML5.


© David Sanders

UMA SIMPLES IMPLEMENTAÇÃO DE TELA


Quando você está trabalhando com o Adobe Dreamweaver para criar uma página HTML5, é
possível visualizar a página no modo Design para visualizar o que será exibido na tela. No
entanto, com material dentro de um contêiner <canvas> , tudo o que você vê é o contorno.
Esse esquema fornece uma excelente imagem visual de como a canvas aloca uma
determinada parte da página para renderizar imagens, mesmo que ela pareça ser um
retângulo em branco.

Basicamente, você está começando com uma tela vazia definida pelos atributos width e
height da tag <canvas>. Se você pensar na primeira etapa da criação de uma tela na sua
página da Web em termos de esticar uma tela em um quadro, isso ajuda a visualizar o
processo.

Understanding the grid


Para trabalhar com êxito com canvas, você precisa entender a grade e as coordenadas
cartesianas. Basicamente, o canto superior esquerdo é a posição 0,0 na sua página. Conforme
CAPÍTULOP 13: TROCANDO SEU SITE COM TELA

você se move para a direita, o primeiro valor aumenta. Se você mover 15 pixels para a
direita, o valor se tornará 15,0 — este é o eixo x. Conforme você desce, o segundo valor
(eixo y) aumenta. Se você desceu 20, a posição seria expressa como 15,20. Suponha que
você quisesse usar essa posição como ponto de partida e criar um quadrado de 100 pixels.
Isso ajuda a visualizar a posição e o tamanho em relação à página da Web com as grades,
mas você tem uma ideia mais clara da imagem que está criando sem as marcas da grade.
Usando ambos ajudará.

Configurando para desenhos de tela


Agora estamos prontos para preencher a caixa em branco. Para fazer isso requer
JavaScript. A única coisa que você faz com a tag <canvas> é descrever a área onde você
pode colocar seus gráficos em um contexto de renderização e um ID de referência. Então,
começando pequeno, este primeiro pequeno desenho começará com a seguinte tag:

<canvas id=”redHot” width=”100” height=”100” >

Isso deve ser bem familiar. A width e height foram simplificadas para serem iguais a 100
pixels e o novo nome do objeto da tela é redHot. Já cobri a tag de fechamento </canvas> e
a mensagem no contêiner. E o resto do trabalho é toda programação JavaScript
trabalhando com o DOM.

Como observado anteriormente, tentarei simplificar as coisas usando um pouco de OOP no


JavaScript para refletir a estrutura de programação do DOM. Então, a primeira tarefa é criar um
objeto e um método para isso. 257
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()...

Como você viu no Capítulo 12, tudo que faz é configurar um objeto e um método para o
objeto — uma função que chamará as operações do JavaScript quando precisarmos.

Em seguida, o programa precisa de uma maneira de acessar o nó DOM da tela. Essa é a parte
do DOM que tem métodos e propriedades canvas relacionadas e canvas. O primeiro passo é criar
um objeto que contenha o nó DOM. Em vez de pensar em atribuir um nó a uma variável, pense
nisso como criar uma instância de um objeto que tenha as propriedades e os métodos do objeto
de canvas.

canvasNow = document.getElementById(“redHot”);

Essa linha cria um objeto que contém o objeto de tela chamado redHot.

Uma vez que temos uma instância de um objeto de tela, o programa precisa de um contexto de
renderização. Sobre o único contexto disponível é um chamado 2d, sugerindo um contexto de
desenho bidimensional. O objeto canvas (canvasNow) possui um método chamado getContext()
para fazer o que diz: obter o contexto de renderização.
contextNow = canvasNow.getContext(‘2d’);
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

A instância do contexto de renderização é denominada contextNow. Possui os


métodos e propriedades do contexto de renderização 2d.

Fazendo o desenho
Antes de ir para o desenho real, você pode estar se perguntando sobre os objetos canvasNow e
contextNow. Essas não são realmente variáveis? Afinal, variáveis podem ser objetos atribuídos.
Bem, essa é uma maneira de pensar sobre eles, mas as variáveis são atribuídas a objetos com
seus próprios métodos e propriedades. Então, eles não são realmente instâncias de objetos?
Quando uma variável recebe um número real, ela é, para todos os efeitos, um número. Você pode
fazer operações matemáticas exatamente como você pode com um número literal. Em vez de
discutir se as estruturas do programa são realmente variáveis ou objetos, apenas trate-as como
objetos (assim como variáveis com texto ou números podem ser tratadas como strings ou
números).

Primeiro, atribua ao desenho uma cor. Você pode usar qualquer uma das técnicas disponíveis
para criar uma cor, conforme descrito no Capítulo 4. Este exemplo usa o formato hexadecimal:

contextNow.fillStyle = ‘#cc0000’;

A propriedade fillStyle é apenas para a cor de preenchimento e não para o traço (contorno) do
objeto.

Em seguida, a cor de preenchimento precisa de uma forma para preencher. Para preencher
um retângulo, use o seguinte:
258 contextNow.fillRect(5,20,100,100);

Para explicar tudo nesse último pedaço de código, a Figura 13-4 divide-o.

Posição X
Largura

Altura
Posição Y
Figura 13-4: Detalhes do método fillRect ().

Os dois primeiros valores colocam-no na área da tela — não na página da Web inteira
— e os segundos dois valores especificam a largura e a altura do retângulo.
5

O último requisito é realmente preencher o retângulo com a cor especificada. A próxima


linha executa essa tarefa:

contextNow.fill();

Não importa quantas operações sejam definidas, um único método fill()cuida de todos os
preenchimentos definidos no método maior.
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

Agora que todas as peças estão no lugar, elas precisam ser reunidas em um programa
HTML5. A listagem a seguir (SimpleSquare.html na pasta deste capítulo em
www.wiley.com/go/ smashinghtml5) contém todo o script:

<!DOCTYPE html>
<html>
<head>
<script language=”javascript”>
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“redHot”);
contextNow = canvasNow.getContext(‘2d’);

contextNow.fillStyle = ‘#cc0000’; // hex value color


contextNow.fillRect(5,20,100,100); // x, y, width, height

contextNow.fill();
}
</script>
<style type=”text/css”>
body {
font-family:Verdana;
color:#cc0000;
}
259
</style>
<title>Quadrado Vermelho</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”>
<figure>
<canvas id=”redHot” width=”100” height=”100” > Você está sentindo falta do Quadrado Vermelho!
Obtenha o HTML5, camarada!</canvas>
<figcaption> <br/>
Quadrado Vermelho</figcaption>
</figure>
</body>
</html>

Como você pode ver, o programa inclui CSS3 e uma legenda simples junto com as tags
<figure> e <figcaption> apropriadas ao redor da tag <canvas>. Os resultados desse script são
mostrados na Figura 13-5.

Observe que o script também contém uma mensagem para navegadores não-HTML5, mas
como a Figura 13-5 mostra a imagem da tela, o navegador não exibirá nenhum conteúdo no
contêiner <canvas>.
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

Figura 13-5: Desenho de tela simples exibido no navegador Opera.

Trabalhando com vários desenhos


Agora que você vê como criar um único desenho, mostrarei vários desenhos. Enquanto
estamos nisso, isso também deve ser testado em um dispositivo móvel para ver como a tag
<canvas> e o JavaScript funcionam em um ambiente móvel.

O script a seguir (Tortilla.html na pasta deste capítulo em www.wiley.com/go/


smashinghtml5) é muito semelhante ao script usado para criar o quadrado vermelho
260 mostrado na Figura 13-5. No entanto, ao desenhar vários objetos, sua posição se torna mais
importante, como mostra o seguinte script:

<!DOCTYPE html>
<html>
<head>
<script language=”javascript”>
//Esquema de cores Valores colados aqui: 8C6E37,BFA380,593723,736055,261F1E
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“totillaHues”)
contextNow = canvasNow.getContext(‘2d’);

contextNow.fillStyle = ‘#8C6E37’; // cor do valor hexadecimal


contextNow.fillRect(5,20,100,100); // x, y, largura, altura
// primeira cor

contextNow.fillStyle = ‘#BFA380’; // cor do valor hexadecimal


contextNow.fillRect(105,20,100,100); // segunda cor

contextNow.fillStyle = ‘#593723’; // cor do valor hexadecimal


contextNow.fillRect(205,20,100,100); // terceira cor

contextNow.fillStyle = ‘#736055’; // cor do valor hexadecimal


contextNow.fillRect(305,20,100,100); // quarta cor
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

contextNow.fillStyle = ‘#261F1E ‘; // cor do valor hexadecimal


contextNow.fillRect(405,20,100,100); // quinta cor

contextNow.fill(); // preencha tudo!


}
</script>
<style type=”text/css”>
body {
font-family:Verdana;
color:#570026;
}
</style>
<title>Sinta-se como uma tortilla!</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”>
<figure>
<canvas id=”totillaHues” width=”500” height=”120” > Não tortillas para você! Obtenha seu
HTML5 browser...pronto! </canvas>
<figcaption> <br/>
Tortilla Flat
</figcaption>
</figure>
</body>
</html>

Os parâmetros importantes neste script são os dois primeiros no método fillRect(). Eles são 261
as posições x e y, e não há dois quadrados no mesmo espaço. Os quadrados estão alinhados
em uma linha horizontal, então tudo que você precisa prestar atenção é o valor x porque a
posição vertical será a mesma.

Uma vez que todos os métodos fillStyle() e fillRect()estejam dispostos, os desenhos requerem
apenas um único método fill()para exibi-los todos. A Figura 13-6 mostra como a figura aparece
em um navegador Safari móvel em um iPhone.

Figura 13-6: Vários desenhos exibidos em um navegador móvel.


PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

A imagem na Figura 13-6 pode parecer vagamente familiar. No Capítulo 4, o programa de


esquema de cores Adobe Kuler tinha um layout similar, e as cores foram desenvolvidas no
Adobe Kuler.

Adicionando traçados e removendo desenhos


Mais dois métodos associados ao desenho de retângulos são strokeRect() e clear-
Rect().Ambos os métodos possuem parâmetros semelhantes ao método fillRect() — x, y,
width, height. Eles funcionam da mesma forma, na medida em que especificam quais áreas
adicionar um traço ou remover um desenho.

O programa a seguir (StrokeAndRemove.html na pasta deste capítulo em www.wiley.


com/go/smashinghtml5) mostra como você pode adicionar três métodos ao objeto
CanvasMaster, que chamarei de addStroke(), punchOut(), e chomp().O primeiro método
desenha um contorno dentro da área da tela, o segundo faz um furo no meio do retângulo e o
terceiro método remove tudo na área definida.

<!DOCTYPE html>
<html>
<head>
<script language=”javascript”>
//cores: 595241,B8AE9C,FFFFFF,ACCFCC,8A0917
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
262 {
canvasNow = document.getElementById(“strokeAndChomp”); contextNow =
canvasNow.getContext(‘2d’);

contextNow.fillStyle = ‘#ACCFCC’;
contextNow.fillRect(5,20,100,100);

contextNow.fill();
}
CanvasMaster.addStroke=function()
{
contextNow.strokeStyle=’#595241’;
contextNow.strokeRect(7,22,91,76);
}
CanvasMaster.chomp=function()
{
contextNow.clearRect(5,20,100,100);
}
CanvasMaster.punchOut=function()
{
contextNow.clearRect(40,45,30,30);
}
</script>
<style type=”text/css”>
body {
font-family:Verdana;
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

color:#8A0917;
background-color:#B8AE9C;
}
a{
text-decoration:none;
color:#595241;
margin-left:16px;
}
</style>
<title>Derrame e corte</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”>
<article>
<figure>
<canvas id=”strokeAndChomp” width=”100” height=”100” > Você deve ver o que os navegadores
HTML5 veem! Pegue um agora!</canvas>
<figcaption> <br/>
Trabalho Quadrado</figcaption>
</figure>
<section>
<p><a href=”#” onClick=”CanvasMaster.addStroke()”>Adicionar traço</a></p>
</section>
<section>
<p><a href=”#” onClick=”CanvasMaster.chomp()”>Devorar o quadrado</a></p> </section>

<section> 263 <p><a href=”#” onClick=”CanvasMaster.punchOut()”>Furador</a></p> 263


</section>
<section>
<p><a href=”#” onClick=”CanvasMaster.showCanvas()”>Substituir Quadrado</a></p> </section>
</article>
</body>
</html>

Esta página está formatada para um dispositivo móvel. Foi testado no Opera Mini em
um iPhone, conforme mostrado na Figura 13-7.

Um quadrado azul aparece na carga inicial. Quando você adiciona uma linha de traço, um
quadro aparece dentro da imagem original. Se você adicionar mais traços, descobrirá que o
traço escurece. Quando você clica na seleção Punch Hole, um pequeno quadrado aparece
no meio do quadrado azul. A seleção Gobble Up Square remove a imagem e o traço. Se
você clicar no texto Adicionar pincel após ter removido o quadrado azul, verá a linha de
traço apenas sem retângulo azul.
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

Figura 13-7: Adicionando um traço e removendo parte ou todo um retângulo.


264
IMAGENS EM TELAS E SOMBRAS
Um dos recursos divertidos e simples da tela é usá-lo com imagens carregadas. A Figura 13-
3 mostra um exemplo típico do que você pode carregar em uma página da Web usando a tag
<img>. Usar a tag <img> está ok, mas você pode tornar muito mais interessante com a tag
<canvas>.

Carregando uma imagem na tela


Para carregar uma imagem, seja um GIF, um PNG ou um JPEG, é necessário um objeto
Image que possa ser criado com JavaScript. Dentro do método usado para criar um contexto
de renderização, você corre o risco de ter seu usuário vendo um espaço em branco onde a
imagem carregada vai a menos que você tenha um evento que lhe permita saber que o
arquivo foi carregado. Felizmente, isso é muito simples de usar usando o manipulador de
eventos onLoad, como mostra o seguinte snippet:

...
pic = new Image();
pic.onload = function()
{
contextNow.drawImage(pic,10,10);
}
pic.src = ‘imageName.jpg’;
...
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

O método de contexto de renderização drawImage()espera três parâmetros:

„ A referência ao arquivo que você está carregando: Nesse caso, a foto do rótulo é o
nome de referência do arquivo que está sendo usado.
„ A posição x e y: É um pouco mais envolvente do que usar a tag <img>, mas não muito,
e esse método permite posicionar a imagem onde você quiser nos parâmetros da tela.
„ A origem da imagem: Você adiciona a origem da imagem dentro do método que cria o
contexto de renderização — não diferente da identificação usando o elemento img.

Adicionando uma sombra


Adicionar uma sombra a uma imagem dá uma aparência tridimensional — ela é elevada
fora da página. O contexto de renderização tem quatro propriedades de sombra:

„ shadowColor=”color”;
„ shadowOffsetX=horizontal value;
„ shadowOffsetY=horizontal value;
„ shadowBlur=blur value;

A cor pode ser atribuída usando qualquer um dos métodos discutidos no Capítulo 4. Os desvios
de sombra dependem de quão grande você deseja sua sombra. Experimente com valores diferentes,
começando com cerca de 5. No exemplo a seguir, cada um é definido como 10 para fornecer
sombra suficiente para fazer a imagem subir na tela, mas não para sobrecarregar a imagem.
Finalmente, o valor de desfoque pode ser maior ou menor dependendo dos valores de
deslocamento e da quantidade de desfoque que você deseja. Com valores de deslocamento
maiores, você precisa de maiores valores de desfoque.
265
Para fazer com que a sombra tenha um efeito sobre a imagem, todas as propriedades de
sombra devem ser inseridas antes de escrever o método drawImage().Isso é tudo que existe
para isso. O outro JavaScript para configurar a renderização do contexto da tela é muito
semelhante aos desenhos da seção anterior. O código a seguir (PhotoShadows.html na pasta
deste capítulo em www.wiley.com/go/ smashinghtml5 carrega a imagem e coloca o
sombreamento nela:

<!DOCTYPE html>
<html>
<head>
<script language=”javascript”>
//cores: F4F1BC,736F36,BFB95A
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“picFrame”);
contextNow = canvasNow.getContext(‘2d’);

pic = new Image();


pic.onload = function()
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

{
contextNow.shadowColor =’#BFB95A’;
contextNow.shadowOffsetX=10;
contextNow.shadowOffsetY=10;
contextNow.shadowBlur=4;
contextNow.drawImage(pic,10,10);
}
pic.src = ‘fisherkid.jpg’;
}
</script>
<style type=”text/css”>
body {
font-family:Verdana;
color:#736F36;
background-color:#F4F1BC;
}
</style>
<title>Enquadrar a Foto</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”>
<article>
<figure>
<canvas id=”picFrame” width=”340” height=”300” > Esta é uma foto que você perdeu
porque você não tem HTML5.</canvas>
<figcaption> <br/>
266 Foto com sombra</figcaption> </figure>
</article>
</body>
</html>

Antes de inserir suas próprias imagens, verifique o tamanho e o tamanho que a tag <canvas>
reservou. Nesse caso, havia espaço suficiente para a imagem (uma fotografia) e o
sombreamento gráfico. A Figura 13-8 mostra os resultados em um navegador Google Chrome.

As combinações de cores usadas com a imagem são importantes. Você descobrirá que algumas
cores funcionam melhor que outras. Os usados na Figura 13-8 são um conjunto monocromático
baseado nas cores da imagem. Como você pode ver, a sombra levanta bem a foto da tela.

Compare a imagem na Figura 13-3 com a da Figura 13-8. Na Figura 13-3, você vê o que acontece
com os navegadores que não são HTML5; na Figura 13-8, o que os navegadores HTML5 podem
exibir. Além disso, neste último uso da mesma foto digital, os navegadores que não são HTML5
veem apenas a mensagem de que não estão vendo a imagem. Se desejar, você pode adicionar a
mesma imagem e esquema de cores sem a sombra projetada para navegadores que não sejam
HTML5.
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

Figura 13-8: Imagem e drop shadow com <canvas>.


© David Sanders 267

Trabalhando com filtros


Antes de passar para formas complexas, vamos analisar filtros para adicionar cores às
imagens. A Internet é uma enorme biblioteca de fotos e desenhos sem direitos autorais; use
seu mecanismo de pesquisa favorito para fazer uma pesquisa de imagens. (Mas lembre-se
de que nem todas as fotos que você encontra on-line são livres de cópias — certifique-se de
ter permissão para usar qualquer imagem que encontrar.) Muitos dos desenhos são em preto
e branco e podem ser um forte contraste com outros elementos. de uma página. Uma
maneira de integrá-los é adicionar um filtro, que você pode fazer facilmente criando uma
forma colorida parcialmente transparente e posicionando-a na parte superior da imagem.
Usando a tela, esse processo é bem fácil. A chave para o processo é a seguinte linha:

context.fillStyle = ‘rgba(rn, gn, bn, alpha)’;

Em vez de usar um valor hexadecimal, ele usa RGB com um canal “alfa”— rgba() — que
controla a transparência. O último parâmetro é um valor entre 0 e 1. Quanto maior o valor,
mais opaca a imagem será. Usando um valor menor que 1, você pode controlar o grau de
opacidade. O restante da forma corresponde às dimensões da imagem e está posicionado no
mesmo espaço.

Para integrar uma imagem com o resto da página - o plano é adicionar uma tonalidade de
cor usando a cor do plano de fundo. O programa a seguir (FilterImage.html na pasta deste
capítulo em www.wiley.com/go/smashinghtml5) adiciona a imagem primeiro e,
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

em seguida,desenha o objeto retângulo em cima dela com uma cor de preenchimento


transparente.

<!DOCTYPE html>
<html>
<head>
<script language=”javascript”>
//cores: F26A4B,F2D091=rgb(242,208,145)
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“filterFrame”); contextNow =
canvasNow.getContext(‘2d’);

pic = new Image();


pic.onload = function()
{
contextNow.drawImage(pic,0,0);
contextNow.fillStyle = ‘rgba(242, 208, 145, .6)’;
contextNow.fillRect(0,0,472,306);
contextNow.fill();
}
pic.src = ‘dance.gif’;
}

268
</script>
<style type=”text/css”>
body {
font-family:Verdana;
color:#F26A4B;
background-color:#F2D091;
}
</style>
<title>Filtrando Imagens</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”>
<article>
<figure>
<canvas id=”filterFrame” width=”472” height=”306” > Você não sente falta apenas da imagem filtrada, mas
sente falta da dança! Obtenha um navegador HTML5! </canvas>
<figcaption> <br/>
Imagem filtrada</figcaption>
</figure>
</article>
</body>
</html>

Observe que a sequência carregou a imagem pela primeira vez e colocou o desenho na parte
superior usando o seguinte trecho:
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

contextNow.drawImage(pic,0,0);
contextNow.fillStyle = ‘rgba(242, 208, 145, .6)’;
contextNow.fillRect(0,0,472,306);
contextNow.fill();

Se o desenho é adicionado primeiro, a imagem simplesmente fica em cima dele como se nenhum
filtro fosse usado. Agora, com o filtro adicionado, a imagem se ajusta melhor à página, como mostra
a Figura 13-9.

269

Figura 13-9: Uma imagem filtrada que se mistura com o fundo.

Usando o Adobe Photoshop ou algum software de edição de imagens semelhante, você


poderia adicionar o filtro à imagem e carregar a imagem filtrada com uma tag <img> padrão.
No entanto, usando a tela e o HTML5, você pode fazer as alterações sem nenhum software
adicional.

CRIANDO DESENHOS COMPLEXOS COM TELA


As formas mais simples são retângulos, e elas são ótimas para quadrados e retângulos, mas
você só pode fazer muito com caixas antes de precisar de algumas linhas e curvas. Esta
seção examina os seguintes elementos de desenho complexos que fazem parte da tela. (O
termo de contexto refere-se ao nome do objeto de contexto de renderização.)
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

„ context.beginPath()
„ context.moveTo(x, y)
„ context.closePath()
„ context.lineTo(x, y)
„ context.quadraticCurveTo(cpx, cpy, x, y)
„ context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
„ context.arcTo(x1, y1, x2, y2, radius)
„ context.arc(x, y, radius, startAngle, endAngle, anticlockwise)
„ context.rect(x, y, w, h)
„ context.fill()
„ context.stroke()
„ context.clip()
„ context.isPointInPath(x, y)

Saber usar esses métodos com uma tag <canvas> não garante que eles tenham boa
aparência. O restante deste capítulo examina a maioria desses métodos. Você deve estar
bem no caminho para criar muitas formas diferentes até o final do capítulo.

LINHAS E MOVIMENTO
270 A melhor maneira de começar a pensar em usar as ferramentas de tela para desenhar é
visualizar todos os desenhos em uma grade, da mesma forma que você fez com os
retângulos. No entanto, dada a complexidade relativa do desenho de forma livre, mesmo
com linhas retas, o ponto inicial é com imagens em uma grade. A Figura 13-10 mostra dois
desenhos que podem ser criados com linhas retas.

0,0 Cada caixa de grade é 20 x 20 pixels.

Figura 13-10: Imagens em uma grade.

As caixas de grade têm 20 pixels de largura e 20 pixels de altura. Se você pegar um lápis
e um pedaço de papel quadriculado (ou ligar a grade em um programa de desenho),
poderá replicar as imagens na Figura 13-10. Começando com a imagem esquerda na
Figura 13-10, um desenho típico consistiria nas seguintes etapas:
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

1. Coloque o lápis na posição 40,20 na grade.


Para fazer isso com o DOM da tela, use context.beginPath() e context.
moveTo(40,20). Este é o ponto de partida.
2. Desenhe uma linha a partir do ponto inicial até cerca de 72, 20 para a parte
superior do manípulo da pasta. Use context.lineTo(72,20) para o equivalente de tela.
3. Mova o lápis para cerca de 72, 38.
Use context.lineTo(72,38) para um desenho de tela.
4. Continue desta maneira até que o contorno da pasta esteja completo.
5. Quando você quiser desenhar o interior da alça, pegue o lápis, mova-o para onde
deseja começar a desenhar o interior da alça.
Com tela, você usa context.moveTo(x,y) para começar em uma nova posição e, em
seguida, usa context.lineTo(x,y) para finalizar. No entanto, você não precisará
reutilizar con-text.beginPath().
6. Em um desenho a lápis e caneta, assim que seu desenho estiver completo, você
terá o contorno da pasta. Com canvas, você precisa incluir context.stroke () para
adicionar as linhas.

Quando você chega ao penúltimo ponto do seu desenho, você pode usar o context.
método closePath()para ir ao ponto que você iniciou e que é usado no programa.
O script a seguir (SimpleLineDrawing.html na pasta deste capítulo em www.wiley.
com/go/smashinghtml5) fornece todas as etapas.
271
<!DOCTYPE html>
<html>
<head>
<script language=”javascript”>
//cores: 8C6E37,BFA380
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“simpleDraw”);
contextNow = canvasNow.getContext(‘2d’);
contextNow.beginPath();
contextNow.moveTo(40,20);
contextNow.lineTo(72,20);
contextNow.lineTo(72,38);
contextNow.lineTo(88,38);
contextNow.lineTo(88,78);
contextNow.lineTo(28,78);
contextNow.lineTo(28,38);
contextNow.lineTo(40,38);
contextNow.lineTo(40,20);
contextNow.closePath();
contextNow.moveTo(46,26);
contextNow.lineTo(66,26);
contextNow.lineTo(66,38);
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

contextNow.lineTo(46,38);
contextNow.closePath();
contextNow.stroke();
}
</script>
<style type=”text/css”>
body {
font-family:Verdana;
color:#000000;
}
</style>
<title>Filtrando Imagens</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”>
<article>
<figure>
<canvas id=”simpleDraw” width=”90” height=”80” > Se você conseguir identificar o desenho, você ganha um bilhão
de dólares! Oh, me desculpe . . . Parece que você não tem um navegador HTML5.</canvas>
<figcaption> <br/>
Picasso estava aqui</figcaption>
</figure>
</article>
</body>
</html>
272
A Figura 13-11 mostra o que você pode esperar ver. (Se você trabalhou as coordenadas
em seu próprio país, o seu provavelmente parece melhor!)

Figura 13-11: Imagem desenhada na tela.


CAPÍTULO 13: TROCANDO SEU SITE COM TELA

Até aí tudo bem, mas a pasta original é marrom, então vai precisar de um pouco de cor. A
maneira de colorir é a mesma dos retângulos: Use context.fillStyle =”color”. Os métodos
complexos de desenho incluem context.fill()para preencher um esboço. Então, retirar o
context.stroke(), substituí-lo por context.fill(), e adicionar um método fillStyle deve fazer o
truque. A figura 13-12 mostra os resultados.

Figura 13-12: A imagem preenchida cobrindo a alça.


273
Ao observar a Figura 13-12, você pode ver que o contorno e a cor estão corretos, mas, em
vez de uma alça, há um bloco. Sempre que uma série de métodos de desenho é usada sem
iniciar um novo caminho e, em seguida, quando o método context.fill()é chamado, ele é
preenchido no início do caminho. Como resultado, tudo é preenchido e não apenas as partes
que você deseja.

Para corrigir isso, dois métodos context.fill()são empregados. Uma é no final do primeiro
esboço da pasta e a segunda é no final do contorno da alça. O primeiro é preenchido com
marrom e o segundo é preenchido com branco. Além disso, um segundo context.
beginPath()é adicionado no início do desenho do identificador. O programa a seguir
(SimpleLineDrawingFilled.html na pasta deste capítulo em www.wiley.
com/go/smashinghtml5) tem todo o código revisado para gerar a imagem preenchida.

<!DOCTYPE html>
<html>
<head>
<script language=”javascript”>
//cores: 960, fff, 000
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“briefCase”);
contextNow = canvasNow.getContext(‘2d’);
contextNow.beginPath();
contextNow.moveTo(40,20);
contextNow.lineTo(72,20);
contextNow.lineTo(72,38);
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

contextNow.lineTo(88,38);
contextNow.lineTo(88,78);
contextNow.lineTo(28,78);
contextNow.lineTo(28,38);
contextNow.lineTo(40,38);
contextNow.lineTo(40,20);
contextNow.closePath();
contextNow.fillStyle =”#960”;
contextNow.fill();
contextNow.beginPath();
contextNow.moveTo(46,26);
contextNow.lineTo(66,26);
contextNow.lineTo(66,38);
contextNow.lineTo(46,38);
contextNow.closePath();
contextNow.fillStyle =”#fff”;
contextNow.fill();
}
</script>
<style type=”text/css”>
body {
font-family:Verdana;
color:#000;
}
</style>
274 <title>Desenho de linha preenchido</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”> <article>

<figure>
<canvas id=”briefCase” width=”90” height=”80” > Se você conseguir identificar o desenho, você ganha um bilhão
de dólares! Oh, me desculpe . . . Parece que você não tem um navegador HTML5.</canvas>

<figcaption> <br/>
Picasso estava aqui</figcaption>
</figure>

</article>
</body>
</html>

Quando você testa essa revisão, os resultados ficam bem próximos do desenho original. Compare
a Figura 13-10 e a Figura 13-13 para ver o quanto a imagem gerada pelo programa está próxima
do original.

Você pode usar as linhas para desenhar qualquer coisa que não tenha curvas. Na próxima
seção, você verá como adicionar curvas às suas ferramentas de tela artísticas.
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

Figura 13-13: O desenho final da pasta.

CURVAS
Fazer curvas, mesmo com ferramentas de desenho, é mais complicado do que desenhar linhas
retas. Para entender como fazer curvas, inicio esta seção com uma discussão de arcos e os
métodos DOM da tela para criá-los. Vamos ver algumas das geometrias, mas não muito. (Você
precisa entender um pouco da geometria, mas não se preocupe — é básico.)
275
A primeira coisa que você precisa entender é a diferença entre graus e radianos. A maioria
das pessoas sabe que um círculo tem 360 graus. Em uma rosa dos ventos, 360 ou 0 graus (12
horas) são para o norte. Conforme você se move no sentido horário para 90 graus (3 horas), a
bússola aponta para o leste; a 180 graus (6 horas), sul; e a 270 graus (9 horas), a oeste.

No entanto, você deve usar radianos em vez de graus, portanto, todos os graus devem
ser convertidos em radianos. Use a seguinte fórmula:

Radianos = (PI ÷ 180) × graus

Então, digamos que você queira saber os radianos para o oeste (9 horas), 270 graus:

Radianos = (3,14159265 ÷ 180) = 0,01745329251994


Radianos = 0,01745329251994 × 270
Radianos = 4.71238898

Uma maneira simples de fazer a mesma coisa é simplesmente multiplicar graus por
0.01745329251994 ou em JavaScript:

radians = (Math.PI/180)* degrees;


PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

Você pode encontrar muitas calculadoras on-line para fazer a conversão para você.

Arcos
O método DOM da tela para desenhar arcos context.arc().O método tem vários
parâmetros que precisam ser entendidos em conjunto e individualmente:

„ x,y: Centro do círculo


„ radius: Raio do círculo
„ startAngle: Ponto inicial do arco expresso em radianos
„ endAngle: Ponto final do arco expresso em radianos
„ anticlockwise: Booleano (verdadeiro no sentido anti-horário e falso no sentido horário)

Acho útil imaginar uma rosa-dos-ventos ou um relógio com as quatro direções cardeais e a
hora / graus — norte (12 ou 0 graus), leste (3 ou 90 graus), sul (6 o '). relógio ou 180 graus)
e oeste (9 horas ou 270 graus). Uma instrução de arco completo é semelhante ao seguinte:

contextNow.arc(150,100,50,six,0,true);

276 Este arco tem seu centro em x = 150 e y = 100, e tem um raio de 50. O ângulo inicial é
ajustado em 6, que é uma variável que criamos para representar a posição das 6 horas em
180 graus. . O valor da variável foi convertido em radianos. Ambos os graus e radianos têm
o mesmo valor na posição de 12 horas (0) e é usado como o ângulo final. Finalmente, o arco
é definido como verdadeiro - no sentido anti-horário.

Este próximo programa é usado para experimentar diferentes arcos. Quatro variáveis — 12,
3, 6, e 9 — são definidas em radianos correspondentes às posições de um relógio. Certas
declarações são comentadas, mas serão usadas posteriormente.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“beHappy”);
contextNow = canvasNow.getContext(‘2d’);
contextNow.beginPath();
contextNow.moveTo(0,0);
contextNow.lineTo(300,0);
contextNow.lineTo(300,200);
contextNow.lineTo(0,200);
contextNow.closePath();
contextNow.stroke();
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

// RADCON = (Math.PI/180) ;
RADCON=0.01745329251994;
twelve=0;
three = RADCON * 90; six
= RADCON * 180; nine =
RADCON * 270;

contextNow.beginPath();
contextNow.arc(125,100,50,six,twelve,true);
//contextNow.closePath();
//contextNow.fill()
contextNow.stroke();
}
</script>
<style type=”text/css”>
body {
font-family:Verdana, Geneva, sans-serif;
color:#cc0000;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Sorriso</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”>
<figure>
<canvas id=”beHappy” width=”300” height=”200” > Você não vê um sorriso porque não tem um 277
navegador HTML5. Nenhum sorriso para você!</canvas> <figcaption>
<p>O retângulo representa os limites da tela</p>
</figcaption>
</figure>
</body>
</html>

A variável RADCON é uma constante (π ÷ 180), então todos os graus foram ajustados para
radianos multiplicando seus valores por RADCON. Conforme observado, os nomes das
variáveis representam as posições em um relógio. Além disso, um retângulo ao redor da
área em que o arco é desenhado representa os limites da largura e da altura da tag <canvas>.
A Figura 13-14 mostra o resultado.

O ponto inicial do arco está à esquerda e se moveu no sentido anti-horário até o ponto final
à direita. Altere a seguinte linha:

contextNow.arc(125,100,50,six,twelve,true);

para:

contextNow.arc(125,100,50,six,twelve,false);
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

Figura 13-14: Um arco em tela.

Isso mudou o desenho do sentido anti-horário para o horário, mas isso fez uma grande
diferença, como você verá ao testá-lo.

278 Em seguida, usando o mesmo programa, altere a linha de volta para:

contextNow.arc(125,100,50,six,twelve,true);

Em seguida, remova as linhas de comentário (//) da seguinte linha:

//contextNow.closePath();

E teste novamente. A mudança final no programa preencherá o arco. Descomente a linha


do seguinte:

//contextNow.fill()

para isso:

contextNow.fill()

E adicione linhas de comentário para que a declaração de traço seja:

//contextNow.stroke()

Quando as mudanças são feitas, seu arco agora parece uma chaleira, como mostrado na Figura
13-15.
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

Figura 13-15: Um arco com um caminho fechado e preenchimento.

A única maneira de realmente aprender a trabalhar com arcos é praticar com eles. Use o
script nesta seção para tentar coisas diferentes.

279
Círculos e gradientes
Até agora, apenas um único tipo de preenchimento foi usado — um sólido. Nesta seção,
você verá como fazer um círculo usando um arco e preenchê-lo com um gradiente.

Primeiro, fazer círculos é fácil usando o método context.arc().Os parâmetros radianos são 0 e
Math.PI*2. E o parâmetro anti-horário é falso. (Esse é o truque.) Por exemplo, este próximo
exemplo usa a seguinte linha para criar um grande círculo que será preenchido com um
gradiente, para que pareça um pôr do sol:

contextNow.arc(200,200,150,0,Math.PI*2,false);

Para criar um preenchimento de gradiente, linear e radial, é bastante simples. A primeira etapa é
usar o método DOM context.createLinearGradient()da tela. O método espera quatro parâmetros: x0,
y0, x1, y1. O preenchimento de gradiente se move de x0 para x1 e de y0 para y1. Um gradiente
linear reto da esquerda para a direita teria um único valor em x1, e o restante seria 0. Um
gradiente de cima para baixo teria valor em y0 ou y1, com o restante definido como 0.

Para definir as cores do gradiente, use o método gradient.addColorStop().Espera dois


parâmetros. O primeiro é um número baseado em zero de 0 a 1 e o segundo é a cor.
Quando isso estiver concluído, atribua o contexto ao context.fillStyle. O trecho a seguir
mostra as etapas na adição de um preenchimento de gradiente:

sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

sunsetGradient.addColorStop(0, “yellow”);
sunsetGradient.addColorStop(1, “#cc0000”)
contextNow.fillStyle = sunsetGradient;

Neste exemplo específico, o gradiente é vertical. A primeira cor, amarela, está no topo e a
segunda cor, vermelha, está no fundo. Juntando tudo, o script a seguir (Sun-set.html na
pasta deste capítulo em www.wiley.com/go/smashinghtml5) cria um pôr do sol para você.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
CanvasMaster=new Object();
CanvasMaster.showCanvas=function()
{
canvasNow = document.getElementById(“sunset”);
contextNow = canvasNow.getContext(‘2d’);
sunsetGradient=contextNow.createLinearGradient(0, 0, 0,379);
sunsetGradient.addColorStop(0, “yellow”);
sunsetGradient.addColorStop(1, “#cc0000”)
contextNow.fillStyle = sunsetGradient;
contextNow.beginPath();
contextNow.arc(200,200,150,0,Math.PI*2,false);
280 contextNow.closePath();
contextNow.fill()
}
</script>
<style type=”text/css”>
body {
font-family:Verdana, Geneva, sans-serif;
color:#cc0000;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Pôr do Sol</title>
</head>
<body onLoad=”CanvasMaster.showCanvas()”>
<figure>
<canvas id=”sunset” width=”400” height=”400” > Uma pena, você não pode ver o belo pôr do sol porque você não
tem um navegador HTML5. Aloha ...</canvas> <figcaption>

<p>Pôr do Sol</p>
</figcaption>
</figure>
</body>
</html>

Ao testar a página, você verá um grande círculo com um gradiente de amarelo a vermelho.
Você pode usar a mesma técnica de gradiente com outras formas também. A Figura 13-16
é exibida na versão móvel do Safari em um iPhone.
CAPÍTULO 13: TROCANDO SEU SITE COM TELA

Figura 13-16: Um círculo com preenchimento gradiente.


281
Há muito mais o que você pode fazer com a tela, e um dos melhores recursos de imagens
criadas usando objetos DOM de tela é que eles não são tão caros (eles não usam largura
de banda) para serem carregados como arquivos gráficos de bitmap. Nós apenas
desnaturamos a superfície desse novo elemento poderoso em HTML5.

PEGUE A RODA
Trabalhar com telas é muito divertido e variado, e é difícil saber por onde começar.
Então, experimente os seguintes pequenos projetos para testar esse ótimo novo elemento
em HTML5:

„ Na Figura 13-13, você vê dois objetos de linha — uma pasta e uma casa. Veja se você
pode desenhar a casa usando os métodos empregados para criar a pasta.
„ Tire uma foto de um quadro de imagem e sobreponha outra imagem que pareça estar
no quadro. (Este projeto requer que você corrija os tamanhos de quadro e imagem
para que um caiba no outro.)
„ Encontre ou crie uma foto digital e sobreponha um pôr do sol sobre ela. (Como
alternativa, crie uma imagem com outro tipo de gradiente e sobreponha-a a uma foto
digital ou outra imagem. Que tal um filtro de gradiente?)
SMASHING HTML5

CAPÍTULO 14
.

14 ADICIONANDO
FORMULÁRIOS

UM DAS características mais importantes de pessoas usando computadores. Em vez disso,


qualquer página da Web é sua capacidade de trata as pessoas como algo que elas não são, e
interagir com uma pessoa. Na linguagem da ciência isso pode acabar com problemas para você,
da computação, há um subcampo chamado mais cedo ou mais tarde. Este capítulo mostra
interface de computador humano, que trata os como adicionar formulários interativos e tratar
humanos como outro tipo de interface, como uma pessoas como pessoas.
impressora, unidade USB ou webcam. Isso não
desumaniza
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

ADICIONANDO UM FORMULÁRIO
Os formulários são realmente em duas partes (ainda mais em alguns casos). A primeira
parte é a tag <form> que configura um contêiner para diferentes tipos de entrada. A forma
típica pode ser visualizada da seguinte maneira:

Begin Form
Input 1
Input 2
Input 3
Input 4
End Form

Então, ao discutir formas, estamos falando sobre a forma e seus atributos e elementos de
entrada e seus atributos. Com os formulários em HTML5, você encontrará muitos novos
atributos e elementos.

Apenas para que você não fique entediado, o seguinte (degree2radians.html na pasta deste
capítulo em www.wiley.com/go/smashinghtml5) é um exemplo de uma calculadora simples
para converter graus em radianos (veja o Capítulo 13 para uma prática usar para o
conversor). Basta digitar os graus que você deseja converter e receber os radianos
equivalentes.
284
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
FormMaster=new Object();
FormMaster.resolveForm=function()
{
const RADCON=Math.PI/180;
degreesNow=document.converter.degrees.value;
radiansNow=degreesNow * RADCON;
document.converter.radians.value=radiansNow;
}
</script>
<style type=”text/css”>
/*048ABF,049DBF,F2F2F2,595959,0D0D0D */
h3 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#595959;
}
body {
font-family:Verdana, Geneva, sans-serif;
color:#049DBF;
background-color:#0D0D0D;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

<title>Converter Graus em Radianos</title>


</head>
<body >
<article>
<header>
<h3>Conversor de Grau em Radiano</h3>
</header>
<section>
<form name=converter>
Enter degrees:<br>
<input type=number name=degrees required >
<br>
Radianos:<br>
<input type=number name=radians>
<br>
<input type=submit name=submit value=”Convert to Radians” onClick=”FormMaster.
resolveForm()”>
</form>
</section>
</article>
</body>
</html>
.

Se você está familiarizado com os formulários em HTML, sabe que esse formulário é
diferente — ele contém uma entrada numérica que trata as entradas como números reais,
em vez de texto que precisa ser convertido em números por JavaScript. Isso não estava
disponível em versões mais antigas do HTML. A Figura 14-1 mostra o número de “spinners”
que aparecem no Opera quando as páginas da Web usam a entrada numérica.
285

Figura 14-1: Inserindo números para cálculos e conversão.

Como você verá neste capítulo, muito é novo, e usando JavaScript e (mais tarde) PHP,
você pode fazer muito com formulários HTML5. Portanto, prepare-se para encontrar vários
novos recursos e motivos para atualizar seus navegadores para HTML5.
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

FORMULÁRIO GERAL ATRIBUTOS


O formulário (pense na nave mãe) tem vários atributos que afetam cada elemento de entrada
no contêiner do formulário. No entanto, o primeiro foco está no próprio formulário. Tem os
seguintes atributos:
„ accept-charset
„ action
„ autocomplete
„ enctype
„ method
„ name
„ novalidate
„ target

Muitos desses atributos raramente são usados e alguns só fazem sentido quando você
começa a usar programas como PHP e ASP.NET, nos quais passa dados para e de um banco
de dados. No entanto, vamos examiná-los todos.

Accept-charset, enctype, e novalidate


O atributo accept-charset, se especificado, geralmente designa utf-8 como a codificação de
caracteres a ser usada com os dados do formulário. Isto é, trata todas as entradas como
codificação utf-8. Uma declaração simples como a seguinte é suficiente:
286 .
<form name=motherShip accept-charset=utf-8>

Se nenhuma codificação de caracteres for atribuída, ela será considerada desconhecida e


usará a codificação de caracteres padrão. Ao usar várias codificações, cada uma é separada
por um espaço em HTML5 em vez de vírgulas e ponto e vírgula, como nas versões
anteriores do HTML.

Na maioria das vezes, o atributo enctype é deixado em branco e usa o estado padrão. O
atributo enctype tem três palavras-chave e estados (palavra-chave / estado):

„ application/x-www-form-urlencoded (padrão)
„ multipart/form-data
„ text/plain

Um formulário pode ser configurado para aceitar texto simples e receber o seguinte:

<form enctype=”text/plain”>

Na maior parte, no entanto, esse é outro atributo que não está incluído na tag <form>.
Isso é porque o padrão (urlencoded) é o que você deseja.
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

O atributo novalidate é um booleano usado no envio do formulário; bloqueia a validação dos


dados inseridos pelo usuário durante o envio. Isso pode economizar tempo, mas também
pode levar a falhas. Às vezes, um formulário simples ou um formulário aberto (dados de
envio desconhecidos) não é validado porque a configuração de traps para validação também
é desconhecida. Se presente na tag de formulário, os elementos enviados não serão
validados:

<form nonvalidate>

Isso efetivamente bloqueia a validação de submissão.

Uma solução melhor está no formnovalidate booleano e nos atributos obrigatórios que
podem ser colocados em elementos de entrada individuais. Por exemplo, o formulário a
seguir não tem validação para um botão de cancelamento e o nome do meio não é
obrigatório, embora o nome e o sobrenome sejam.

<form name=motherShip accept-charset=utf-8>


Primeiro nome:
<input type=text name=fn required>
<br>
Nome do meio:
<input type=text name=mn >
<br>
Último nome:
<input type=text name=ln required>
<br>
287
<input type=submit name=submit value=”Send the info!”>
<input type=submit formnovalidate name=cancel value=”Cancel”> </form>

Os atributos accept-charset, enctype, e novalidate não são os que você provavelmente usará
em demasia. No entanto, os atributos do elemento de input para exigir entrada de dados e
não-concessão podem ser bastante úteis.

Ação e método
Você não precisará desses dois atributos importantes até o Capítulo 16, portanto, esta seção
será breve e direta. Atribui-se ao atributo de action um URL que é lançado assim que o botão
Enviar é clicado. Ele envia os dados do formulário para a URL (um programa do lado do
servidor, como Perl, PHP ou ASP). O atributo method é POST ou GET. Quando você envia
dados da sua página da Web ou envia e recupera dados, use POST. Se tudo o que você deseja
fazer é recuperar dados, use GET. A seguir, os valores típicos atribuídos aos dois atributos:

<form action=”http://www.sandlight.com/treasures.php” method=”post”>

No Capítulo 16, você verá que esses dois atributos são sempre usados ao lidar com PHP.
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

Autocomplete
Um atributo de formulário bastante simples, mas importante, é autocomplete. Tem dois
estados,on e off, e o padrão é on. Basicamente, se você não quiser o autocomplete, basta
defini-lo como off. Caso contrário, é o estado padrão dos formulários. Às vezes, o
autocomplete pode ser um incômodo; se assim for, basta adicionar a seguinte linha:

<form autocomplete=”off”>

Com o estado desativado, uma palavra reutilizada não será exibida. Por exemplo, se
você alterar seu endereço de e-mail, seu endereço antigo poderá aparecer
automaticamente nas caixas de endereço de e-mail se o preenchimento autocomplete is
não estiver definido como off.
.

Name and target


O atributo name é um dos atributos mais importantes de um formulário porque é usado no
DOM para identificá-lo. Como propriedade do objeto de documento, ele pode ser
referenciado como um elemento de matriz, como forms[0] ou por nome.
Organizacionalmente, é muito mais fácil referenciar um formulário e seus filhos por um
nome.

Além de um atributo de name, os formulários têm um atributo global, id. Ambos os atributos
possuem nomes. No DOM, a referência é para o atributo name. No entanto, dentro de um
único documento da Web (página), outros elementos podem identificar o formulário com
uma referência ao id. do formulário. Além disso, um novo recurso do HTML5 é que o filho
do formulário pode existir fora do contêiner <form> e ter um atributo de formulário
vinculando-o a qualquer formulário da página. Por exemplo, o seguinte elemento de entrada
de texto é parte do formulário com o id de ralph.
288 .
<input type=text form=ralph name=hometown>

O elemento de entrada de texto pode estar em qualquer lugar da página, e isso significa que
os designers não precisam colocar todas as entradas em um só lugar. Experimente o seguinte
script (FormID.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) e teste-o
com o Opera (que implementou esse novo recurso).

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
FormMaster=new Object();
FormMaster.resolveForm=function()
{
favorite = document.formName.favURL.value;
personName=document.formName.person.value; message=personName + “’s
favorite Web site is “ +favorite; document.formName.output.value=message;
}
</script>
<style type=”text/css”>
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

h3 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#97CCA6;
}
body {
font-family:Verdana, Geneva, sans-serif;
color:#EFF09E;
background-color:#AB1F33;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Entradas de formulário remoto</title>
</head>
<body >
<article>
<header>
<h3>IDs para conectar</h3>
</header>
<section>Qual é o seu site favorito?<br>
<label>Site favorito:
<input type=url form=formID name=favURL>
</label>
</section>
<section>
<blockquote> Esta seção representa uma quebra entre a primeira entrada (solicitando uma URL)
e o restante do formulário ao qual o formulário da URL pertence. Isso dá aos designers muito mais 289
liberdade para montar um site interativo.</blockquote>
</section>
<section>
<form name=formName id=formID>
<label>Qual o seu nome?
<input type=text name=person>
</label>
<br>
Output:<br>
<textarea name=output cols=50 rows=5></textarea>
<br>
<input type=submit name=submit value=”Gather in the Chickens”
onClick=”FormMaster.resolveForm()”>
</form>
</section>
</article>
</body>
</html>

Observe que dentro do contêiner <form> com o name=formName e id=formID é um único


elemento de entrada, uma tag <textarea> e um botão Enviar. Mais importante, no entanto,
observe que o elemento de entrada com o name=favURL está fora do contêiner de
formulário. No entanto, ele atribui a id do formulário na página — formID. Em HTML5, é
tratado como se estivesse dentro do container <form>. A Figura 14-2 mostra que os dados
inseridos no elemento de entrada do tipo url (name=favURL) são capturados pelo DOM
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

no JavaScript como parte da mesma forma que o restante dos elementos de entrada do
formulário pertencentes ao formulário denominado formName.

290

Figura 14-2: A entrada pode ser colocada fora do contêiner de formulário.

Agora, você não precisa se preocupar com onde colocar seus formulários de entrada.
Desde que os elementos de entrada recebam o ID do formulário, eles são tratados como
se estivessem dentro do contêiner do formulário.

O atributo target refere-se ao contexto de navegação do formulário no envio do formulário.


Se nenhum valor de destino for atribuído, o contexto de navegação será o mesmo que se _self
atribuído a um atributo de destino. Os outros contextos de navegação são _blank, _parent, ou
_top. O contexto de navegação em _blank é bastante útil quando você tem informações de um
script do lado do servidor que substitui o conteúdo na página de chamada por seu próprio
conteúdo. O uso do _blank permite que os usuários vejam a página chamadora e as
informações da página chamada.

O FORMULÁRIO COMO PARTE DO DOM


Embora o DOM seja geralmente discutido como um arranjo de nós, ele também pode ser
descrito em termos de objetos — depois de todo objeto ser o nome do meio do DOM! Para ver
como formulários e entradas são organizados no DOM, você pode usar referências JavaScript
para diferentes partes de um formulário. O DOM referencia os elementos do formulário como
um array de formulários dentro de um documento. Os elementos de entrada relacionados a um
formulário são elementos da matriz do formulário, sendo o primeiro nó os elements[0], usando
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

um sistema de contagem baseado em zero. LDa mesma forma, formulários compõem uma
matriz baseada em zero com a primeira forma sendo forms[0]. (Nota: Ambos os elementos
e formulários são plurais, embora <element> e <form> sejam singulares).

Para ajudar a ver as partes em um arranjo de DOM, o seguinte script simples (NameID.html
na pasta deste capítulo em www.wiley.com/go/smashinghtml5) demonstra diferentes
maneiras de referenciar os mesmos objetos em um documento com formulários. A maneira
preferida é por nome de objeto e propriedade. As diferentes combinações são apenas para
demonstração. Ele também usa vários tipos de entrada também.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
FormMaster=new Object();
FormMaster.resolveForm=function()
{
alpha = document.motherShip.elements[0].value;
beta = document.forms[0].secondInput.value;
gamma = document.motherShip.thirdInput.value;
delta = document.forms[0].elements[3].value;
epsilon = document.motherShip.fifthInput.value;
const cr=”\n”;
message=alpha+cr+beta+cr+gamma+cr+delta+cr+epsilon;
document.motherShip.output.value=message; 291
}
</script>
<style type=”text/css”>
h3 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#677E52;
}
body {
font-family:Verdana, Geneva, sans-serif;
color:#89725B;
background-color:#B0CC99;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>DOM e formulários</title>
</head>
<body >
<article>
<header>
<h3>DOM, o formulário e os nós</h3>
</header>
<form name=motherShip>
<input type=number name=firstInput>
Number<br>
<input type=email name=secondInput>
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

E-mail<br>
<input type=text name=thirdInput>
Text<br>
<input type=text name=fourthInput>
Text<br>
<input type=url name=fifthInput>
URL<br>
<textarea cols=”15” rows=”6” name=output></textarea>
<input type=button value=”Send to DOM” onClick=”FormMaster.resolveForm()”>
</form>
</section>
</article>
</body>
</html>

Quando você testar o programa, digite o texto e os números apropriados e clique no botão Enviar
para o DOM. No programa JavaScript, observe que, desde que os nomes de elementos ou seus
nomes de elementos apropriados (ou nomes de nós) sejam usados, os materiais inseridos são
enviados para a área de texto usada para uma exibição de saída. A Figura 14-3 mostra os
resultados que você pode esperar ver.

292

Figura 14-3: Entradas do usuário exibidas na página.

O conteúdo é recuperado através dos caminhos DOM e colocado em variáveis e, em seguida,


enviado para o elemento <textarea> para exibição. Entre os cinco elementos, uma constante
(const cr=”\n”) coloca um caractere de controle para forçar um avanço de linha.
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

OS MUITOS TIPOS DE ENTRADA


Um dos principais novos recursos do HTML5 é a adição de vários tipos diferentes de
atributos de entrada. Não apenas isso, mas os diferentes atributos de entrada funcionam com
dispositivos móveis. Por exemplo, se você usa um tipo de entrada de email ou url um teclado
especial com ponto (.) E ponto-com (.com) aparece quando você começa a inserir dados no
formulário em alguns dispositivos móveis.

Juntamente com novos tipos de entrada, há atributos adicionais que afetam como sua
página interage com os usuários. Dos 29 atributos de entrada, 11 são novos no HTML5.
Como os novos tipos de entrada, queremos ver como usar esses atributos. Por causa de
muitos tipos de entrada e outros atributos, eles foram reunidos em duas tabelas. A Tabela
14.1 mostra todos os valores de tipos diferentes que você pode usar com o atributo type e a
Tabela 14.2 mostra todos os atributos, cada um com uma breve descrição.

Tabela 14.1 Digite valores para o elemento de entrada HTML5

Tipo Valor Características Tipo Valor Características

button Botão de ação checkbox Seleção

color* Cor bem date* Seletor de data

datetime* Seletor de data datetime-local* Seletor de data

email Endereço de e-mail file Upload de arquivo

hidden Não exibido image Coordenadas da imagem 293


month* Seletor de data number* Valor numérico

password Esconde a senha radio Seleção

range* Gama numérica reset Limpa entradas

search* Gama numérica submit Enviar dados de formulário

tel Número de telefone text Valor da cadeia

time* Seletor de data url* Endereço da Web

week* Seletor de data


*Novo no HTML5

No momento da redação deste artigo, nem todos esses tipos foram implementados nos
principais navegadores. No entanto, como os navegadores continuam trabalhando para
implementar totalmente os novos padrões HTML5, não tenha medo de fazer experiências
com diferentes tipos. Agora, para os atributos gerais de entrada (incluindo o tipo!) Na
Tabela 14.2.
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

Tabela 14.2 Atributos do elemento de entrada

Atributo de Entrada Características Atributo de Entrada Características

accept Tipo de arquivo aceito alt Dica de carregamento de arquivos

autocomplete* Digitação completa autofocus* Define o foco para o campo

checked Estado selecionado disabled Inutilizável

form* Definir código de formulário formaction* Substituição de formulário

formenctype* Substituição de formulário formmethod* Substituição de formulário

formnovalidate* Substituição de formulário formtarget* Substituição de formulário

height* Altura em pixels list* Sugere lista de dados

max* Valor máximo maxlength Comprimento máximo

min* Valor máximo multiple Vários valores

name Nome DOM pattern* Expressão regular

placeholder* Desaparece na entrada readonly Não é possível inserir

required* Deve preencher size Num char visível

src Fonte step* Número de passos


294 type Tipo de entrada value Valor atribuído

width* Largura em pixels


*Novo no HTML5

Com todas as diferentes combinações de atributos e seus valores, as próximas seções examinam
diferentes agrupamentos de elementos, atributos e valores relacionados a formulários em
combinações. A primeira seção aborda o uso do element datalist com os atributos list e form.
Como acontece com todas as seções a seguir, este pacote contém tantos recursos quanto possível,
enquanto ainda se concentra nos principais recursos em discussão.

O ATRIBUTO DE LISTA, O TIPO DE URL E OS DATALISTS


Um dos novos atributos que podem ser usados com formulários é a lista. No início deste capítulo,
observei que as páginas da Web deveriam ser experiências lisas e interativas para os usuários.
Quanto menos trabalho os usuários tiverem para colocar em um formato interativo, melhor. O
atributo list fornece uma lista de itens sugeridos em um elemento de entrada e os usuários podem
selecionar na lista ou digitar uma resposta. No entanto, o atributo list é, na verdade, uma
referência a uma tag <datalist> em outro lugar na página da Web. Além disso, se você colocar o
contêiner <datalist> em um container <form> , os elementos <input> após a lista de dados não
serão exibidos na página. Então, o que você precisa fazer é fornecer um atributo id na tag
<datalist> e atribuí-lo ao atributo list na tag <input>. A lista de dados é mantida fora do container
<form> , mas é conectada por meio do ID da lista de dados.
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

Exibindo uma opção na janela de alerta


Um exemplo simples configura uma entrada para os usuários digitarem ou selecionarem
um URL. Depois que o URL é inserido, o usuário pressiona um botão Enviar e uma janela
de alerta é exibida com o endereço. O script a seguir (DataList.html na pasta deste capítulo
em www.wiley.com/go/ smashinghtml5) mostra como reunir todas as partes.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
FormMaster=new Object();
FormMaster.resolveForm=function()
{
place=document.traveler.getURL.value;
alert(place);
}
</script>
<style type=”text/css”>
h3 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#B9121B;
}
body {
font-family:Verdana, Geneva, sans-serif;
295
color:#4C1B1B;
background-color:#FCFAE1;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Lista e Lista de dados</title>
</head>
<body >
<article>
<header>
<h3>A Lista e Lista de dados</h3>
</header>
<section>
<datalist id=favoriteSites>
<option value=”http://www.smashingmagazine.com/” label=”Smashing”>
<option value=”http://www.sandlight.com/” label=”Sandlight”>
</datalist>
</section>
<section>
<form name=traveler>
<label> Insira um dos seus sites favoritos:</label>
<br>
<input type=url list=favoriteSites name=getURL>
<br>
<input type=submit value=”Show your URL” onClick=”FormMaster.resolveForm()”>
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

</form>
</section>
</article>
</body>
</html>

Observando o script, você pode estar se perguntando o que o atributo label está fazendo na
tag <option> no contêiner <datalist>. Não há nenhum atributo de label noform ou no
elemento de input (consulte a Tabela 14.1 e a Tabela 14.2). Isso porque o atributo label não
está no form ou nos elementos de input, mas na tag <option>. Embora isso possa parecer
óbvio, quando você abre a página, você vê não apenas os URLs, mas também o rótulo na
janela de entrada de URL. O que está acontecendo é que a tag <input type=url> contém uma
referência às opções da lista de dados por meio do atributo list na marcação do elemento de
input.

No momento do teste, a lista de dados é exibida no Opera usando o Windows 7 ou o Mac OS X.

No painel superior esquerdo, você pode ver as seleções disponíveis na lista de dados (junto
com um rótulo para cada uma). Depois que o usuário faz uma seleção, ele aparece na janela
de entrada, como mostrado no painel superior direito. Por fim, no painel inferior, você pode
ver que ele é passado para a função JavaScript que o exibe em uma janela de alerta.
(Observe que a janela de alerta do Opera também exibe o domínio.)
296 O ponto importante sobre esse processo é que os usuários não precisam digitar URLs. Todo
mundo que já digitou uma URL fez um erro de digitação em algum momento. Ao usar a
lista de dados para ajudar, não apenas o URL sugerido é mais provável de ser selecionado,
mas também é mais fácil para o usuário.

Elementos Datalist em dispositivos móveis e teclados de URL


Testes do aplicativo no navegador Mini Opera em um iPhone revelaram que a lista de
dados não apareceu. Outros testes com a versão móvel do navegador Safari mostraram
que ele não funcionava com o Safari ainda.

No entanto, durante esses testes, um teclado exclusivo para o novo tipo de url e email de
elementos de entrada foi revelado. O navegador Safari móvel reconhece um formulário de
entrada digitado como url e email e, quando usado, exibe um teclado que inclui tanto um
ponto (.) Como uma tecla ponto.com (.com) , além de algumas outras chaves comumente usadas
com URLs e e-mail endereços. A Figura 14-4 mostra os navegadores Safari (esquerda) e Mini
Opera (direita) lado a lado exibindo o programa de lista de dados no mesmo iPhone. Se você
olhar com cuidado, você pode ver a diferença.

A importância de um navegador móvel reconhecer que a entrada espera um URL ou


endereço de e-mail é que ele considere o usuário. Com o teclado especial, os usuários não
precisam alternar entre o teclado numérico / símbolo e o teclado alfabético.
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

Figura 14-4: Teclado especial para dispositivos móveis para formulário de URL 297
(à esquerda) e teclado móvel padrão (à direita).

BOTÕES DE OPÇÃO E CAIXAS DE SELEÇÃO: ELEMENTOS DE ENTRADA


DE FÁCIL SELEÇÃO
Se você usa botões de opção e caixas de seleção com programas externos acessando
bancos de dados ou fazendo algum outro tipo de operação do lado do servidor, é muito
fácil no lado do HTML5. Basta usar um botão Enviar e tudo é enviado para o lado do
servidor para esses programas. (Eu mostro a você como fazer isso usando uma versão deste
exemplo no Capítulo 16).

Como esse próximo script da Web devolve a entrada de volta a um objeto <textarea> na
página, os dados inseridos precisavam ser verificados usando JavaScript com um pequeno
loop para primeiro ver se o atributo checked era true ou false. Se o item foi verificado, ele
adiciona o valor a uma propriedade FormMaster denominada this.countVal. (É como uma
variável, mas de acordo com a programação do tipo DOM, ela é atribuída a um objeto.) Uma
vez terminada, envia apenas os que foram verificados para a saída. O script da Web a seguir
(bastante longo) (RadioCheck.html na pasta deste capítulo em www.wiley.com/go/smashing
html5) faz isso.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
FormMaster=new Object();
FormMaster.resolveForm=function()
{
this.countVal=””;
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

this.topCount=document.checkRadio.length-2;
for(var count=0;count < this.topCount;count++)
if(document.checkRadio.elements[count].checked)
{
this.countVal+=document.checkRadio.elements[count].value+”\n”;
}
document.checkRadio.outNow.value=this.countVal;
}
</script>
<style type=”text/css”>
/* 735840,733119,BF5D39,352D1B,C0B787 */
body {
background-color:#C0B787;
color:#733119;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
margin-left:20px;
}
h1 {
font-family:”Arial Black”, Gadget, sans-serif;
color:#733119;
}
h2 {
color:#BF5D39;
}
298 h3 {
color:#BF5D39;
}
#dataEntry {
display:table;
}
#lang {
display:table-cell;
width:200px;
}
#out {
display:table-cell;
width:300px;
}
aside {
display:table-cell;
width:250px;
}
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>2-Clique-Escolha</title>
</head>
<body>
<article>
<header>
<h1>Seleções E-Z</h1>
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

</header>
<div id=”dataEntry”>
<div id=”lang”>
<section>
<h2>Linguagem Web</h2>
<form name=checkRadio>
<label>
<input type=checkbox name=html value=”HTML5” checked>
HTML5</label><br>
<label>
<input type=checkbox name=css value=”CSS3”>
CSS3</label><br>
<label>
<input type=checkbox name=js value=”JavaScript”>
JavaScript</label><br>
<label>
<input type=checkbox name=php value=”PHP”>
PHP5</label><br>
<label>
<input type=checkbox name=asp value=”ASP.NET”>
ASP.NET</label><br>
<label>
<input type=checkbox name=action value=”ActionScript 3.0”> ActionScript
3.0</label>
</section>
299 299
</div> <section>
<aside>
<h2>Especialização</h2>
<fieldset>
<legend>Foco na web</legend>
<label>
<input type=radio name=work value=”Graphic Design”>
Design </label><br>
<label>
<input type=radio name=work value=”Interface Design”>
Design de interface</label><br>
<label>
<input type=radio name=work value=”Front End”>
Desenvolvimento Front End</label><br>
<label>
<input type=radio name=work value=”Back End”>
Desenvolvimento de back-end</label><br>
</fieldset>
</aside>
</section>
</div>
<section>
<div id=”out”>
<fieldset>
<legend>Janela de saída</legend>
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

<textarea name=outNow rows=10 cols=40 ></textarea> </fieldset>

</div>
</section>
<section>
<div>
<p>
<input type=button name=getEm value=”Relay your selections”
onClick=”FormMaster.resolveForm()”>
</p>
</div>
</section>
</form>
</div>
</article>
</body>
</html>

Embora isso seja um pouco longo, a maioria foi formatada para parecer decente e fácil para
os usuários. A tag <fieldset> foi usada para destacar um grupo de botões e para encapsular
a janela de saída. É uma ótima tag para usar quando você deseja agrupar elementos. A tag
<legend> permite colocar um rótulo no retângulo ao redor do conjunto de campos. A
Figura 14-5 mostra o que você pode esperar quando carregar a página.

300

Figura 14-5: caixas de seleção e botões de opção.


CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

Quando você o executa pela primeira vez, percebe que o HTML5 já foi selecionado. Isso
porque o atributo checked é adicionado à tag. É um booleano, mas você não precisa atribuir
um valor true ou false. Depois que a página é carregada, veja o que acontece quando você
clica nela.

O que você vê na janela de saída é que todos os valores que foram atribuídos aos botões de
opção selecionados e caixas de seleção. Em implementações mais práticas, esses mesmos
dados seriam passados e armazenados em um banco de dados.

SELECIONADOR DE DATA
O último atributo de entrada que temos espaço para cobrir neste capítulo é simples de
implementar, mas tem resultados impressionantes. O novo atributo de data para o elemento
de input é poderoso e fácil de incluir em um formulário. Vários novos atributos de data e
hora foram adicionados ao elemento de entrada, mas apenas o próprio atributo de data é
mostrado. O programa a seguir (Pickers.html na pasta deste capítulo em www.wiley.com/go
/smashinghtml5) mostra como configurá-lo e usá-lo para enviar informações.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
FormMaster=new Object();
FormMaster.resolveForm=function()
{ 301
alert(document.calendar.dateNow.value);
}
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Data</title>
</head>
<body >
<form name=calendar>
<input name=dateNow type=”date” onChange=”FormMaster.resolveForm()”> </form>
</body>
</html>

Com apenas essa pequena marcação no contêiner do form, você pode criar um calendário
completo. Você pode usar o manipulador de eventos onChange para capturar a data
selecionada no calendário. A Figura 14-6 mostra o aplicativo em um navegador Opera (o
único encontrado para funcionar até agora com esse novo atributo de entrada) em um
ambiente Windows 7.

Nesta implementação específica, assim que o usuário faz uma seleção, a janela de alerta
é aberta e mostra a data selecionada, conforme mostrado na Figura 14-7.

O objetivo é mostrar como é fácil passar o valor de data selecionado. Tais dados podem ser
armazenados em um banco de dados para fazer reservas online.
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

Figura 14-6: Uma marcação simples fornece um calendário on-line.

302

Figura 14-7: Passando o valor de data para JavaScript.

A pequena janela atrás da janela de alerta mostra a data selecionada em uma pequena
janela. (A pequena janela mostra a data selecionada sem nenhuma outra programação
necessária.) A importância deste novo recurso HTML5 está na facilidade com que os
usuários podem selecionar uma data. Se você já trabalhou com uma ferramenta semelhante
ao fazer reservas on-line ou de companhias aéreas, sabe o quanto é valioso. O único
problema no momento em que este texto foi escrito é que nenhum outro navegador HTML5
além do Opera o inclui.
CAPÍTULO 14: ADICIONANDO FORMULÁRIOS

PEGUE A RODA
A principal lição deste capítulo é como usar o DOM para acessar as informações do formulário. O
formato básico é:

document.form.element.value

Você precisa usar JavaScript (nesta fase) para acessar dados que geralmente seriam passados
para um programa do lado do servidor como PHP, ColdFusion ou ASP.NET. No entanto,
para simular isso, os exemplos neste capítulo usaram um tipo de entrada de botão para
acionar um programa JavaScript que envia os resultados para uma <textarea> onde é
possível ver o que normalmente seria enviado ao back-end para processamento. Aqui está o
desafio:

„ Crie uma loja online que venda uma linha de produtos (pelo menos cinco) ou
entregue serviços (novamente, pelo menos cinco). Exemplos seriam uma loja de
computadores ou um serviço de design da Web.
„ Projete uma interface na qual os usuários insiram seu nome, e-mail, URL, endereço,
cidade, estado, código postal e um nome de usuário e senha, com o mínimo de esforço
possível da parte deles. Para torná-lo à prova de balas, teste-o com alguém que nunca o
viu antes.
„ Os usuários, em seguida, selecionam vários produtos ou serviços (novamente com o
mínimo de esforço possível da parte deles).
„ As ofertas selecionadas são exibidas em uma <textarea> com seus preços individuais
correspondentes junto com o imposto apropriado.
O programa também gera uma etiqueta de remessa. Ele será exibido apenas na 303
<textarea> — não impressa.

Quanto mais elementos de formulário e atributos que você pode usar, que não foram
discutidos no capítulo, melhor.
SMASHING HTML5

CHAPTER 15
15 EMBUTINDO OBJETOS
E ARMAZENANDO
INFORMAÇÃO

POR ANOS, OS USUÁRIOS conseguiram especiais diretamente relacionados ao novo


fazer algumas coisas notáveis na Web graças a recurso ou por meio de um URL que atende ao
diferentes tipos de plug-ins carregados no novo recurso. O HTML5 possui vários desses
navegador. De modo geral, dois plug-ins objetos, e um dos mais interessantes é o objeto
principais são instalados na maioria dos de geolocalização. Então, será o primeiro a
navegadores: Adobe Flash Player e Java. analisar antes de ver como o Java e o Flash
funcionam com o HTML5.
Alguns dos novos recursos do HTML5
funcionam melhor em conjunto com plug-ins
PARTE IV: TAGS DINÂMICOS EM HTML5 PLUS UM POUCO JAVASCRIPT E PHP

GEOLOCAZAÇÃO
O objeto de geolocation faz parte do objeto de navigation no DOM HTML5. É um meio de
encontrar sua localização, mais ou menos. Em vários testes, localizou com sucesso o estádio
da minha localização. Os atributos mais importantes do objeto de geolocation são os
atributos latitude e longitude. Isso porque, com esses valores, você pode carregar um mapa da
sua localização geral.

Criar uma página HTML que mostre aos usuários sua latitude e longitude é aceitável, mas os
navegadores HTML5 também podem carregar um mapa em seus sites usando o Google
Maps. O URL para esse recurso é:

“ http://maps.google.com/maps?hl=en&ie=UTF8&ll= “ + latitude + “, “ + longitude +


“&spn=0.054166,0.110378&z=13&output=embed”

As variáveis de latitude e longitude contêm valores de coordenadas. Então, o truque é


localizar os valores de latitude e longitude para inserir onde eles são necessários.

ENCONTRANDO LATITUDE E LONGITUDE


A obtenção desses valores exige JavaScript bem direto do seu navegador — em seu
dispositivo móvel ou computador. Aqui está o código básico:

306 navigator.geolocation.getCurrentPosition(someFunction);

Para filtrar navegadores que não reconhecem o objeto de geolocalização, use uma armadilha
simples:

if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(someFunction);
}
else
{
alert(“Geolocation not recognized”)
}

Isso informa aos usuários se seus navegadores reconhecem a geolocalização.

A função chamada para obter as informações de posição faz a chamada, mas espera-se que
inclua um parâmetro que armazene as informações reais sobre o local. Seguindo a prática de
usar objetos e métodos, a chamada é feita:

...
navigator.geolocation.getCurrentPosition(LocationMaster.lookUpPosition);
...

Este, por sua vez, obtém o método que retorna os valores solicitados:
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

LocationMaster=new Object();
LocationMaster.lookUpPosition=function(position)
{
this.latNow=position.coords.latitude;
this.longNow=position.coords.longitude;
...

Observe que o parâmetro position é como uma variável que armazena os valores de latitude e
longitude. Não é uma propriedade do objeto de geolocalização — cords.latitude e cords.
longitude são as propriedades. (A posição do nome poderia ser qualquer nome que quiséssemos
— Rumpelstiltskin teria trabalhado, mas a posição é mais descritiva.)

Depois que os valores são atribuídos ao objeto de parâmetro, eles se tornam parte do objeto
Location-Master usando a palavra-chave this. Os nomes das propriedades — latNow e longNow
— armazenam os valores como uma variável. A única diferença é que eles fazem parte de um
objeto.

OBTENDO O MAPA
A única coisa que a página HTML5 trabalhando com JavaScript faz é obter as coordenadas.
Obter o mapa, então, é simplesmente uma questão de inserir esses valores na solicitação de mapa.
Então, para finalizar o método, o programa usa a seguinte linha:

document.getElementById(“mapHolder”).src = “http://maps.google.com/
maps?hl=en&ie=UTF8&ll=“ + this.latNow + “,” + this.longNow + “&spn=0.054166,0.11037
307
8&z=13&output=embed”;

Você encontra um novo método no núcleo DOM HTML5: getElementById. Nesse caso, o ID é
o de um elemento iFrame. Então o mapa é o objeto de origem — assim como uma imagem é
carregada através da identificação da fonte:

<img src=“myImage.jpg”>

A única diferença é que o local onde o mapa é carregado é especificado pelo ID do iFrame,
e não pela página por padrão.

Colocando o mapa na página da Web


Qualquer outro carregamento após a página ter sido carregada não pode ser colocado em qualquer
lugar da página. O <iframe> pode ser um alvo além do documento principal. Usar o <iframe> sem
nenhum dos seus atributos especificados produz uma janela de visualização relativamente
pequena. No entanto, a ideia é ver quantas tags e quão pouco código JavaScript eu posso usar
para exibir o mapa na página.
.

Colocando tudo junto em uma página simples


Eu testei todos os principais navegadores no Windows 7 e Macintosh OS X, e o seguinte
(MiniGeoLoc.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) representa
um ponto de partida simples para uma página que exibe um mapear perto do usuário
originário.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

<!DOCTYPE html >


<html>
<head>
<style type=“text/css”>
/* BF7F6C,FFDDAE,B59D7B,40372B,E6C79C */
body {
font-family:Verdana, Geneva, sans-serif;
color:#40372B;
background-color:#FFDDAE;
}
h3 {
font-family:Tahoma, Geneva, sans-serif;
color:#BF7F6C;
}
</style>
<script>
LocationMaster=new Object();
LocationMaster.lookUpPosition=function(position)
{
this.latNow=position.coords.latitude;
this.longNow=position.coords.longitude;

document.getElementById(“mapHolder”).src = “http://maps.google.com/ maps?hl=en&ie=UTF8&ll=“ +


this.latNow + “,” + this.longNow + “&spn=0.054166,0.11037 8&z=13&output=embed”;

308 }

if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(LocationMaster.lookUpPosition);
}
else
{
alert(“Try a different HTML5 browser. This one is not working with geolocation.”);

}
</script>
<title>Mapa Mínimo</title>
</head>
<body>
<article>
<header>
<h3>Sua localização</h3>
</header>
<section>
<iframe id=“mapHolder”> </iframe>
</section>
<section>
<p>Este exemplo de utilização da geolocalização e do Google Maps é muito simples. Foi testado nos
principais navegadores e navegadores móveis.</p>
</section>
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

</article>
</body>
</html>

Quando você testar essa página da Web, tente primeiro usando o navegador Firefox mais
recente. Em seguida, experimente com o Google Chrome e o Opera. Com o Safari, que
reconhece o objeto de geolocation, não consegui carregar o mapa no iframe. Ironicamente,
quando testado no navegador Safari móvel em um iPhone, funcionou bem. (Mais sobre isso
em um segundo.) A Figura 15-1 mostra o programa em todos os navegadores, exceto o
Safari e o Internet Explorer, que rodam no Windows 7.

309

Figura 15-1: Localização geográfica usada para encontrar longitude e latitude para o Google
Maps.

A Figura 15-1 mostra a página da Web carregada com o mapa no Firefox, Chrome e Opera.
Você pode arrastar o mapa em torno do iframe com o mouse e nos navegadores Safari e
Perfect em um iPhone, com os dedos. No entanto, nos navegadores móveis, o iframe e a
imagem foram estendidos arrastando-se para baixo.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Adaptando a página para visualização móvel


Para torná-lo mais prático para usuários móveis, fiz alguns ajustes no programa para alterar
a orientação do mapa alterando o <iframe> para o seguinte:

<section>
<iframe id=“mapHolder” width=“240” height=“320”> </iframe>
</section>

Agora, em uma orientação vertical, o mapa era mais fácil de ler. A Figura 15-2 mostra o
programa em um iPhone nos navegadores Perfect (à esquerda) e Safari (à direita). Perto da
parte inferior da página, as instruções fornecem aos usuários de dispositivos móveis
instruções para ampliar a imagem sem arrastar o mapa para fora do iframe.

310

Figura 15-2: O mapa em um ambiente móvel.

A Figura 15-2 ilustra que, ao puxar a página para fora e para fora do mapa (painel
esquerdo), os usuários móveis podem ajustar o mapa para que possam lê-lo facilmente
(painel direito).

TRABALHANDO COM AS PROPRIEDADES DE GEOLOCALIZAÇÃO E O PLUG-IN DO GOOGLE EARTH

Experimentar o objeto de geolocalização pode ser muito divertido e muito informativo.


A seguir, uma lista completa de suas propriedades:
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

„ latitude: Coordenadas geográficas em graus decimais


„ longitude: Coordenadas geográficas em graus decimais
„ altitude: Altura em metros
„ accuracy: Níveis de exatidão das coordenadas de latitude e longitude em metros
„ altitudeaccuracy: Níveis de precisão de altitude em metros
„ heading: Direção da viagem do dispositivo de hospedagem em graus (mais relevante
para um dispositivo móvel)
„ speed: velocidade atual do dispositivo de hospedagem em metros / segundo (mais
relevante para um dispositivo móvel)

Se você tiver um dispositivo móvel, experimente diferentes cabeçalhos e velocidade — com


outra pessoa dirigindo! Todas as propriedades de geolocalização podem ser enviadas para um
formulário para exibição, se você quiser. Se usado com um dispositivo móvel, você precisará
de um servidor de soquete aberto ou de atualizações frequentes de navegador / página.

Um aspecto final da geolocalização é o uso do plug-in do Google Earth. A Figura 15-3 mostra
uma versão revisada da página da Web básica com o plug-in que pode gerar uma visualização
3D da área mapeada.

Você pode atualizar a página da Web de amostra para as mesmas dimensões, fornecendo à tag
<iframe> os seguintes atributos: width=500 height=400. Em seguida, clique na opção Terra na
parte superior da área do mapa. Se o seu navegador tiver o plug-in, ele mostrará a 311
visualização 3D. Caso contrário, você terá a chance de fazer o download do plug-in e instalá-
lo no seu navegador..

ARMAZENAMENTO EM HTML5
Além de cookies que armazenam dados no navegador do usuário, quando você pensa em
armazenamento, geralmente um banco de dados e outros programas como PHP e ASP.NET
vêm à mente. No entanto, o DOM HTML5 agora tem um objeto de armazenamento que
pode ser usado em quatro contextos:

Armazenamento de sessão
Armazenamento global
Armazenamento local
Armazenamento de banco de dados

Nem todos os navegadores suportam todos esses contextos de armazenamento, mas como os
navegadores são continuamente atualizados para incluir HTML5, eles incluem mais
contextos. No momento desta publicação, o Safari, o Chrome e o Opera suportavam todos
os contextos, exceto o armazenamento global; O Firefox suportava todos eles, exceto o
armazenamento do banco de dados.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

312

Figura 15-3: uma visualização 3D da área do mapa com o plug-in do navegador do Google Earth.

Todo o armazenamento é feito em pares chave / valor. A chave é um identificador para


um determinado valor. (A chave é algo como uma variável com um rótulo e um valor
atribuído.) As próximas duas seções explicam como trabalhar com armazenamento local e
de sessão. O armazenamento global e de banco de dados é implementado de forma menos
universal no momento, por isso, estou colocando-os de lado.

ARMAZENAMENTO DA SESSÃO
O armazenamento de sessão permite que os usuários armazenem dados para uma única
página da Web, desde que essa página da Web esteja sendo visualizada. Assim que o usuário
sair da página, todos os dados armazenados serão perdidos. Para jogos interativos,
calculadoras e qualquer outro tipo de página que precise de armazenamento temporário
enquanto a página é visualizada, você pode usar o armazenamento de sessão.

Para começar, você precisa dar uma olhada nos setters e getters de armazenamento de
sessão. Este é o formato básico para definir (armazenar) um valor:
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

sessionStorage.setItem(“keyName”, value );

A key deve ser uma string, enquanto o valor pode ser qualquer tipo de dado aceitável — número,
texto, booleano, objeto, função. Os itens a seguir representam algumas atribuições de dados válidas:

this.myKey=“secondKey”; //Nome da chave atribuído à propriedade


function eek() //Uma função com um valor de retorno
{
return “eeeek!”;
}
jill=“My name is Jill”; //Uma variável
//Atribuir valores a chaves
sessionStorage.setItem(“firstKey”,88); //Um número (literal numérico)
sessionStorage.setItem(this.myKey,true ); //Boleano
sessionStorage.setItem(“thirdKey”,eek() ); //Função
sessionStorage.setItem(“fourthKey”,”My name is Jack” ); //String literal
sessionStorage.setItem(“fifthKey”,jill ); //Variável

Como você pode ver, você pode usar variáveis para as duas chaves e seus valores. Contanto que
a variável (ou propriedade) seja uma string, ela pode ser usada como uma chave — você pode
até usar uma função que retorna uma string como uma chave. Um valor pode ser uma string ou
nonstring.

Depois de armazenar os dados, você precisa recuperá-los com um método getter. O seguinte
mostra o formato geral para obter os dados armazenados — você tem que saber o nome da
key para todos os valores que você deseja recuperar. 313

sessionStorage.getItem(“keyName”);

Você pode pensar no nome da chave da mesma maneira que faz um nome de variável. Se você
souber o nome da variável, poderá encontrar seu valor. Os nomes das chaves funcionam da
mesma maneira.

Este próximo programa (SessionStore.html na pasta deste capítulo em www.wiley.com/


go/smashinghtml5) fornece uma ilustração simples de como trabalhar com armazenamento de
sessão. Você provavelmente será lembrado de trabalhar com variáveis, pois os valores são
válidos apenas enquanto você não alterar a página.

<!DOCTYPE HTML>
<html>
<head>
<script type=“text/javascript”>
StorageMaster=new Object();
//Set values
StorageMaster.setPositions=function()
{
sessionStorage.setItem(“firstBase”,document.players.firstBase.value );
sessionStorage.setItem(“secondBase”,document.players.secondBase.value );
sessionStorage.setItem(“thirdBase”,document.players.thirdBase.value );
}
//Get values
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

StorageMaster.getFirst=function()
{
playerName=sessionStorage.getItem(“firstBase”);
alert(playerName + “ is on first”);
}
StorageMaster.getSecond=function()
{
playerName=sessionStorage.getItem(“secondBase”);
alert(playerName +” is playing second”);
}
StorageMaster.getThird=function()
{
playerName=sessionStorage.getItem(“thirdBase”);
alert(playerName+ “ is assigned to third”);
}
</script>
<style type=“text/css”>
body {
background-color:#EBD4B2;
color:#273A4B;
font-family:Verdana, Geneva, sans-serif;
}
h2 {
background-color:#273A4B;
color:#D49756;
314 text-align:center;

}
h3 {
color:#323F14;
}
fieldset {
color:#790007
}
#playerTable {
display:table;
}
#getPlayer {
display:table-cell;
width:250px;
}
</style>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>Armazenamento</title>
</head>

<body>
<article>
<header>
<hgroup>
<h2>Gerente de beisebol</h2>
<h3>Atribuir jogadores:</h3>
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

</hgroup>
</header>
<section>
<form name=players>
<input type=text name=firstBase placeholder=“First base”>
&nbsp;Primeira Base<br>
<input type=text name=secondBase placeholder=“Second base”>
&nbsp;Segunda Base<br>
<input type=text name=thirdBase placeholder=“Third base”>
&nbsp;Terceira base<br>
<input type=button onClick=“StorageMaster.setPositions()” value=“Assign
Positions”>
</section>
<br>
<div ID=“playerTable”>
<section ID=“getPlayer”>
<fieldset>
<legend>Quem está jogando o que?</legend>
<input type=button onClick=“StorageMaster.getFirst()” value=“Quem está no primeiro?”>
<br>
<input type=button onClick=“StorageMaster.getSecond()” value=“Quem está no segundo?”>
<br>
<input type=button onClick=“StorageMaster.getThird()” value=“Quem está no terceiro?”>
<br>
</fieldset>
</form> 315
</section>
</div>
</body>
</html>

Quando você carregar a página pela primeira vez, verá um novo atributo HTML5
em todas as janelas de entrada de texto. — No código, eles se parecem com isso:

<input type=text name=thirdBase placeholder=“Third base”>

Assim que o usuário começa a digitar um valor, ele desaparece imediatamente. Então, vá
em frente e teste-o, preenchendo as três janelas de texto e, em seguida, clique no botão
Atribuir Posições. Isso define os valores no armazenamento da sessão.

Para recuperar os dados armazenados, basta clicar em qualquer um dos três botões no Who’s
Playing What? caixa. A Figura 15-4 mostra o que você pode esperar para ver.

Se você tentar recuperar os dados armazenados antes de clicar no botão Atribuir posições,
receberá um valor nulo na janela de alertas. Se você sair da página e retornar, também
receberá valores nulos até reatribuir as posições.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Figura 15-4: Dados armazenados retornados em uma janela de alerta.


316
ARMAZENAMENTO LOCAL
A principal diferença entre armazenamento de sessão e armazenamento local é que o
armazenamento local é persistente. Os usuários podem sair do site, desligar seus computadores,
voltar no dia seguinte e os dados ainda estão lá. O armazenamento local funciona muito bem
como cookies, mas existem algumas diferenças importantes:

„ Cookies permitem muito pouco espaço de armazenamento; armazenamento local permite


muito mais.
„ Os cookies são retransmitidos automaticamente a cada solicitação para o servidor, e o
armazenamento local não é — o que significa que o armazenamento local é muito menos
trabalhoso para o servidor e o navegador. O armazenamento local é transmitido apenas a
pedido.

Você verá que localStorage e sessionStorage usam os mesmos métodos getter / setter. Assim,
quando você conhece um, conhece o outro. No entanto, você pode definir um valor usando
localStorage, desligar seu computador, jogar uma partida de futebol, voltar para casa, ligar o
computador e seus dados ainda estarem armazenados em seu computador. O exemplo a seguir
(LocalStorage.html na pasta deste capítulo em www.wiley.com/go/smashinghtml5) mostra como
armazenar, recuperar e limpar dados do localStorage.

<!DOCTYPE HTML>
<html>
<head>
<script type=“text/javascript”>
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

StorageMaster=new Object();
//Definir valores
StorageMaster.setRegistration=function()
{
this.hobbyNow=““;
this.topCount=document.interest.elements.length;
for(var count=0;count < this.topCount;count++)
{
if(document.interest.elements[count].checked)
{
this.hobbyNow=document.interest.hobby[count-1].value;
}
}
localStorage.setItem(“uName”,document.interest.userName.value);
localStorage.setItem(“uHobby”,this.hobbyNow);
localStorage.setItem(“uState”,document.interest.resState.value);
}
//Obter valores
StorageMaster.getReg=function()
{
userProfile=“User Profile:\n”;
nameNow=localStorage.getItem(“uName”)+”\n”;
hobbyNow=localStorage.getItem(“uHobby”)+”\n”;
stateNow=localStorage.getItem(“uState”)+”\n”;
fileLength=localStorage.length + “ profile items”;
this.profile=userProfile+nameNow+hobbyNow+stateNow+fileLength; 317
.
document.getElementById(“profile”).innerHTML = this.profile;
}
StorageMaster.clearReg=function()
{
localStorage.clear();
alert(“Local storage cleared”);
}
</script>
<style type=“text/css”>
/*962D3E,343642,979C9C,F2EBC7,348899 */
body {
background-color:#F2EBC7;
color:#962D3E;
font-family:Verdana, Geneva, sans-serif;
}
h2 {
color:#979C9C;
}
fieldset {
color:#348899;
}
#hobbyTable {
display:table;
}
#getHobby {
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

display:table-cell;
width:275px;
}
#profile {
display:table-cell;
background-color: #979C9C;
padding: 3px;
width:150px;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:14px;
}
</style>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>
<title>Armazenamento</title>
</head>
<body>
<article>
<header>
<h2>Registro de Hobby</h2>
</header>
<section>
<form name=“interest”>
<input name=userName placeholder=“Name please”>
&nbsp;Name<br>
<div id=“hobbyTable”>
318 <section id=“getHobby”>
<fieldset>
<legend>Qual é o seu passatempo favorito?</legend>
<label>
<input type=radio name=hobby value=“travel”>
Viagem</label>
<br>
<label>
<input type=radio name=hobby value=“reading”>
Leitura</label>
<br>
<label>
<input type=radio name=hobby value=“theater”>
Teatro</label>
<br>
<label>
<input type=radio name=hobby value=“ballet”>
Balé</label>
<br>
<label>
<input type=radio name=hobby value=“monster trucks”> Caminhão
Monstro Comícios </label>
<br>
</fieldset>
</section>
</div>
<input type=text name=resState placeholder=“Your state of residence”>
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

&nbsp;State<br>
<input type=button onClick=“StorageMaster.setRegistration()” value=“Registre-se”>
<input type=button onClick=“StorageMaster.getReg()” value=“Encontrar informações”>
<input type=button onClick=“StorageMaster.clearReg()” value=“Apagar os dados”>
</form>
</section>
<br>
<pre id=“profile”></pre>
</body>
</html>

Um dos recursos adicionados a este exemplo é o uso de botões de opção para transmitir dados a
serem armazenados. Os botões de opção são importantes porque facilitam a escolha dos usuários.
É preciso um pouco mais de trabalho para obter os dados corretos dos botões de opção e das
caixas de seleção, mas isso reflete o truísmo da Web de que quanto mais trabalho o
desenvolvedor faz, menos trabalho os usuários precisam fazer.

Outro recurso do armazenamento local é que ele está relacionado ao navegador. Cada navegador
tem seu próprio armazenamento. Portanto, se você armazenar os dados usando um navegador
Safari, um navegador Chrome não poderá acessar esses dados. A Figura 15-5 mostra a página
carregada em um navegador Chrome que armazenou dados usando o armazenamento local. No
entanto, se o mesmo programa em um navegador diferente (o Opera, por exemplo) tentar
recuperar os dados, ele mostrará que é nulo.

319

Figura 15-5: Acessando dados de armazenamento local.

Você também pode perceber que, quando carrega o programa pela primeira vez, não vê a janela
de saída. Em vez disso, você vê uma linha cinza abaixo dos botões. Assim que você clicar no
botão Find Info, as informações aparecerão onde a linha cinza estava. Um pequeno trabalho
DOM CSS3 e HTML5 faz o truque. Primeiro, no CSS3, configure o ID:
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

#profile {
display:table-cell;
background-color: #979C9C;
padding: 3px;
width:150px;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:14px;
}

Usando a linha JavaScript,

document.getElementById(“profile”).innerHTML = this.profile;

as informações armazenadas neste this.profile foram enviadas para a página da Web em que
a seguinte tag foi colocada:

<pre id=“profile”></pre>

Antes do HTML5, o envio dinâmico de dados para uma página da Web sem recarregar a página
era muito mais complexo. No entanto, para alguns programas, como o Adobe Flash CS5, é muito
fácil, como explica a próxima seção.

ADICIONANDO E AJUSTANDO OBJETOS EM PÁGINAS


DA WEB HTML5
320
Quando o HTML foi lançado pela primeira vez, não era possível fazer muito, por isso os
desenvolvedores começaram a usar programas como o Java e o Flash, que forneciam a
funcionalidade que o HTML não conseguia. Muito disso não é mais verdade com o HTML5, mas
mesmo que o HTML5 possa fazer muito mais do que as versões anteriores do HTML, versões
posteriores do Flash e do Java ainda podem fazer muito mais.

Muito pode ser dito sobre os méritos relativos do Adobe Flash CS5 (a versão mais recente do
Flash no momento da redação deste artigo) e do HTML5, mas no futuro previsível, eles
provavelmente trabalharão juntos, apesar do fato de que o iPhone e o iPad da Apple não suporta
o Flash Player. Além do fato de que o Flash pode fazer muito, ele também forneceu
consistência entre diferentes plataformas e navegadores. Assim, mesmo que diferentes
fabricantes de navegadores tivessem versões diferentes do HTML DOM e ideias diferentes
sobre qual era a melhor implementação de CSS e JavaScript, o plug-in do Flash era consistente
em todos os navegadores e plataformas. Então, quando designers e desenvolvedores usaram o
Flash, eles tiveram a garantia de uma apresentação consistente.
.
ADICIONANDO UM OBJETO
.Para ter uma ideia de como incorporar um objeto em HTML5, criei uma animação simples de
uma estrela cadente no Flash CS5. A Figura 15-6 mostra a pequena animação na janela de design.
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

Figura 15-6: uma animação em Flash.

Você pode colocar a animação em uma página da Web de várias maneiras diferentes, mas o
mais fácil é publicá-la no Flash, que gera automaticamente uma página da Web com uma
referência ao arquivo binário em um formato .swf. Em navegadores com plug-ins Flash, que
são virtualmente todos os navegadores — eles são enviados (ou baixados) com o plug-in
Flash incluído — o seguinte código (ShootingStar. html na pasta deste capítulo em
www.wiley.com/go/smashinghtml5) mostra o objeto em um wrapper HTML5.

<!DOCTYPE HTML>
<html>
<head>
321
<title>ShootingStar</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”> <style type=“text/css”
media=“screen”>
html, body { height:100%; background-color: #ffffff;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id=“flashContent”>
<object classid=“clsid:d27cdb6e-ae6d-11cf-96b8-444553540000” width=“300”
height=“200” id=“ShootingStar” align=“middle”>
<param name=“movie” value=“ShootingStar.swf” />
<param name=“quality” value=“high” />
<param name=“bgcolor” value=“#ffffff” />
<param name=“play” value=“true” />
<param name=“loop” value=“true” />
<param name=“wmode” value=“window” />
<param name=“scale” value=“showall” />
<param name=“menu” value=“true” />
<param name=“devicefont” value=“false” />
<param name=“salign” value=““ />
<param name=“allowScriptAccess” value=“sameDomain” />
<!--[if !IE]>-->
<object type=“application/x-shockwave-flash” data=“ShootingStar.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

swf” width=“300” height=“200”>


<param name=“movie” value=“ShootingStar.swf” />
<param name=“quality” value=“high” />
<param name=“bgcolor” value=“#ffffff” />
<param name=“play” value=“true” />
<param name=“loop” value=“true” />
<param name=“wmode” value=“window” />
<param name=“scale” value=“showall” />
<param name=“menu” value=“true” />
<param name=“devicefont” value=“false” />
<param name=“salign” value=““ />
<param name=“allowScriptAccess” value=“sameDomain” /> <!--<![endif]-->
<a href=“http://www.adobe.com/go/getflash”>
<img src=“http://www.adobe.com/images/shared/download_
buttons/get_flash_player.gif” alt=“Get Adobe Flash player” /> </a>

<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>

322
AJUSTANDO UM OBJETO
O elemento-chave HTML5 é a tag <object>. Vários parâmetros foram incluídos, mas todos
eles podem ser alterados para se adequar melhor ao seu site. Por exemplo, a cor do plano de
fundo é definida como branca (#ffffff) e, digitando-se uma cor de plano de fundo diferente,
você pode associá-la ao seu site. Da mesma forma, você pode alterar o CSS e qualquer outra
coisa que você queira.

Outro programa chamado Flex e Flash Builder também gera arquivos .swf. Usando uma
linguagem muito poderosa chamada ActionScript 3.0, os desenvolvedores podem criar
programas com a mesma profundidade e potência que os programas estabelecidos, como
Java e C ++. No entanto, tudo que o desenvolvedor HTML5 precisa fazer é adicionar o
arquivo .swf com seu próprio código ou código gerado automaticamente pelo Flash e pelo
Flash Builder.

PEGUE A RODA
Eu acho que você vai gostar desse desafio. Envolve os novos objetos de geolocalização e
localStorage no HTML5. Como você viu neste capítulo, tudo o que você precisa para
colocar um mapa do Google em sua página da Web é o valor da latitude e longitude do
local. O objeto de geolocalização gera esses valores para você em HTML5 na sua posição
atual. Se você tiver um dispositivo móvel, poderá gerar essas informações em vários locais
diferentes. Alternativamente, você pode ir a um programa de mapeamento on-line, inserir
um endereço e o programa de mapeamento fará isso por você. Então aqui está o desafio:
CAPÍTULO 15: EMBUTINDO OBJETOS E ARMAZENANDO INFORMAÇÃO

„ Obtenha a longitude e a latitude de cinco locais diferentes.


„ Digite os valores de longitude e latitude em um objeto localStorage.
„ Configure cinco botões que chamarão um programa JavaScript que carregará
cinco mapas quando solicitado.

Basicamente, você criará uma página da Web que carregue mapas de qualquer lugar que
você escolher. Você não precisa mais de JavaScript do que o pouco que foi abordado neste
capítulo.

323
SMASHING HTML5

CAPÍTULO 16
16 CAPTURA DE DADOS
INTERATIVOS

UM DOS os aspectos mais poderosos e práticos de e aqueles feitos por outras pessoas? Uma maneira de fazer
trabalhar com a programação da Web são a isso seria reescrever seu site para cada entrada e comentário.
capacidade de armazenar e recuperar dados. O Mas isso seria tão estranho que pouco blogando aconteceria.
HTML5 tem alguma capacidade para esse
armazenamento e recuperação de dados; no entanto, Os blogs são configurados usando diferentes linguagens do
como o Capítulo 15 mostrou, todos os dados lado do servidor, como o PHP. O esmagador WordPress de
armazenados serão relacionados ao navegador de um Thord Daniel Hedengren: Além do Blog (Wiley) explica
indivíduo. Como você viu no Capítulo 15, no como otimizar usando o software de blog do WordPress.
Grande parte da discussão é como usar o PHP para ajustar o
momento, todos os navegadores não estão
seu blog. No entanto, além de trabalhar com blogs, o PHP
exatamente funcionando juntos na caixa de areia
pode armazenar e recuperar dados do banco de dados de
quando se trata de armazenamento de dados. Além servidores para qualquer coisa, desde uma loja online até
disso, os dados são armazenados no computador do membros de um time de futebol. Ao contrário do
usuário e, embora isso seja útil para algumas coisas, armazenamento local, quando os dados são armazenados
como reconhecer os interesses de um usuário ao usando PHP, eles podem ser recuperados usando PHP por
retornar a um site, todo usuário tem algum tipo de qualquer pessoa em qualquer lugar. (Essas pessoas não
armazenamento local. Como você armazena dados precisam ir até sua casa e usar seu navegador em seu
(como um comentário no blog) para que qualquer computador para recuperar dados que você armazenou usando
pessoa com um navegador possa acessá-lo? HTML5 - e agradeça a suas estrelas da sorte por isso.) O
melhor de tudo, se você quiser fazer uma mudança, tudo que
Para lhe dar uma idéia do que este capítulo apresenta, você precisa fazer é digitar as informações e elas são enviadas
considere algo simples que você pode fazer na Web: para um banco de dados no qual as alterações são refletidas na
manter e comentar em um blog. Suponha que você página da Web. Neste capítulo, apresento uma linguagem do
tenha um blog que discuta o HTML5. Uma ou duas lado do servidor, PHP. O foco é começar e fazer algumas
vezes por semana, você se senta e escreve uma coisas com HTML5 que você não pode fazer sem o PHP.
entrada de blog sobre HTML5. Agora, suponha que
você atraia uma grande audiência de leitores do blog,
e esses leitores comentam sobre suas entradas. Como
você armazena e recupera seus comentários
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

LINGUAGENS DO LADO DO SERVIDOR E HTML5


Usando HTML5, todo o processamento é feito no cliente — o seu navegador no seu computador.
Em um contexto maior, isso é chamado de processamento no lado do cliente. Seu navegador
analisa as tags HTML5 e exibe a página da Web que ele recupera de um servidor da Web. Tudo o
que o servidor Web faz é servir o HTML, e o seu navegador faz o resto.

O processamento do lado do servidor é diferente. O servidor — um servidor PHP, neste caso —


processa a informação que obtém de diferentes fontes e envia HTML para o seu navegador para
mostrar no seu computador. A grande diferença é que o servidor pode interagir com outros tipos
de dados que o seu navegador não pode. Por exemplo, ele pode interagir com um banco de
dados que armazena dados que qualquer pessoa pode enviar pela Web.

Voltando ao nosso exemplo de reescrever sua página da Web toda vez que você quiser fazer uma
entrada de blog ou comentário, é basicamente o que o PHP faz. Imagine que o PHP é um pequeno rato
(supercaféinizado) que vive no servidor e é realmente bom em escrever HTML5. Sempre que você faz
uma entrada de blog ou alguém posta um comentário, o mouse rapidamente reescreve o HTML5 para
que sua página da Web reflita as mudanças. É assim que o PHP funciona. A Figura 16-1 mostra uma
ilustração do processo.

Processamento do lado do cliente

Cliente Servidor
Solicita página HTML5
326 Retorna HTML5

Processamento do lado do servidor


Cliente Servidor
Armazenamento
Solicita a página do PHP
Retorna HTML5

Figura 16-1: Processamento no lado do cliente e do servidor.

Na Figura 16-1, o trabalho real está entre o armazenamento e o servidor. As informações


armazenadas precisam ser configuradas de maneira que possam ser lidas pelo seu navegador. E
isso é o que o PHP faz — ele pega as informações armazenadas (enviadas como uma entrada de
blog, por exemplo) e as envia de volta como HTML5.

CONFIGURANDO O PHP NO SEU COMPUTADOR (QUE PENSA QUE É UM SERVIDOR)


Você pode acessar o PHP de três maneiras:

„ Inscreva-se para um serviço de hospedagem.


„ Baixe e instale um servidor e PHP no seu computador.
„ Se você tiver o Mac OS X, ele já está no seu computador — basta configurá-lo.
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

Dois desses métodos envolvem a configuração de um servidor em seu computador e o


terceiro depende de um serviço de hospedagem. O mais fácil é se inscrever em um serviço
de hospedagem com PHP. Então você apenas carrega seus arquivos PHP como se fosse uma
página da Web. Um serviço de hospedagem que foi testado extensivamente e tem preços
razoáveis é em www.jtl.net. (O serviço mínimo do Linux é tudo que você precisa).

Se você deseja instalar o PHP no seu computador, faça o seguinte:

„ Apenas Windows: Vá para http://windows.php.net/download e faça o download da


última versão estável do PHP5. (Você encontrará "Qual versão eu escolho?" Na coluna
da esquerda para ajudar você a escolher o que precisa para o seu sistema.) Você
também precisará instalar um servidor Apache. você pode obter um gratuitamente em
www.apache.org.
„ Apenas no Macintosh: Vá para http://foundationphp.com/tutorials/php_
leopard.php e siga as instruções para acessar o PHP em seu sistema. (Tenha muito
cuidado, pois você usará o Terminal integrado no seu Mac e alterará alguns
arquivos importantes.) Este site mostra como configurar o PHP e o servidor
Apache integrado.
„ O método mais fácil para todos os usuários: Se você quiser baixar e instalar tudo de
uma vez (PHP, servidor Apache e banco de dados MySQL) para o seu Mac, vá para
www.mamp.info/en/ index.html e, para o Windows, vá para www.wampserver.com/en.
Essa é a maneira mais fácil de configurar um banco de dados real no seu computador.
„
„ Configurar o PHP e o Apache pode ser complicado, mas depois de configurado, você
não precisa fazer isso novamente.Se você usar o método all-in-one (o último listado
acima), você pode obter o servidor MySQL com o qual você pode configurar um banco
de dados no seu computador.

TESTANDO PHP 327


Depois de configurar o sistema, seja no seu computador ou em um serviço de
hospedagem, insira o programa a seguir e teste-o:

<!DOCTYPE HTML>
<html>
<head>
<?php
print phpinfo();
?>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Testar PHP</title>
</head>
<body>
</body
</html>

Salve o programa como First.php e coloque o arquivo na pasta raiz do Apache. Por exemplo,
o caminho a seguir é típico para o Windows: c:/Program File/apache Groub/
apache/htdocs/php. A pasta adicionada, php, é onde colocar seu First.php. Em um Mac,
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

usando o PHP embutido, o caminho é Macintosh HD/Library/WebServer/Documents/


php/First.php.

Em seguida, abra um navegador e digite http://localhost/php/First.php e pressione Enter ou


Return. Ao contrário de uma página da Web normal, você precisa chamar o arquivo de um
navegador. Você não pode clicar duas vezes na área de trabalho — localhost é o nome do
servidor em que é executado. A Figura 16-2 mostra o que você verá se tudo estiver instalado
corretamente.

328

Figura 16-2: Página de teste do PHP.

Sua versão instalada pode ser diferente, mas essa informação diz que o PHP está instalado
em seu sistema e pronto para ser usado.

NOÇÕES BÁSICAS DE PHP


Antes de chegar a algo prático, os primeiros passos descrevem algumas sintaxes básicas e
operações do PHP. O PHP tem muitos recursos exclusivos, mas é muito parecido com
JavaScript com um conjunto de símbolos ligeiramente diferente. Os fundamentos mais
importantes começam com dados “capturados” do PHP enviados pelo cliente. Para enfatizar
a diferença entre as operações do lado do cliente e do lado do servidor, o código PHP será
divorciado de um wrapper HTML5.
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

Quando você insere dados em um formulário HTML5 e clica no botão Enviar, os dados do
formulário são enviados para o servidor. Neste primeiro exemplo, o nome e o e-mail serão
enviados do programa HTML5 do lado do cliente para o programa PHP do lado do servidor,
e ele retornará o HTML para o cliente. Se você tiver um servidor remoto — um serviço de
hospedagem — certifique-se de incluir a URL completa do arquivo PHP. Este exemplo
supõe um localhost com o arquivo HTML5 e PHP no mesmo diretório, mas isso é apenas
para torná-lo mais simples. A página HTML5 a seguir (SendData.html na pasta deste
capítulo em www.wiley.com/go/smashinghtml5) enviará os dados.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
SendMaster=new Object();
SendMaster.eLert=function()
{
alert(“Opa! Parece ser um pouco boo-boo no formato de e-mail.”);
}
</script>
<style type=”text/css”>
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#336600;
font-size:14px;
background-color:#FFCC33;
} 329
</style>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1” />
<title>Remetente de Dados</title>
</head>
<body>
<form action=”formCatcher.php” method=”post”>
<fieldset>
<legend>Enviar nome e email para o PHP</legend>
<input size=20 name=”formName” placeholder=”Enter Name”> <p/>

<input type=email size=32 NAME=”formEmail” placeholder=”Enter Name”


onInvalid=”SendMaster.eLert()” >
<p />
</fieldset>
<input type=”submit” name=”sender” value=”Send” >
</form>
</body>
</html>

O script inclui um tipo de texto e um formulário de entrada de tipo de email. (Se nenhum
tipo de formulário for atribuído, o padrão será um tipo de texto.) Um detalhe importante a
ser observado é que o botão Enviar recebe um nome (sender) usado pelo script PHP para
determinar se os dados desse formulário foi enviado.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

O APANHADOR DE POSTAGENS
No lado do PHP que captura os dados, a matriz $_POST espera o nome do formulário. Duas
variáveis são declaradas primeiro — $name e $email. Variáveis em PHP têm um prefixo de
sinal de dólar ($)No entanto, antes que o programa PHP tente atribuir a variável com dados
da matriz $_POST, uma boa prática é verificar a função isset()que verifica se o botão Enviar
(chamado sender) enviou os dados. (O código a seguir está em formCatcher. php na pasta
deste capítulo em www.wiley.com/go/smashinghtml5).

<?php
//Pegar dados HTML5
$name;
$email;
if(isset($_POST[‘sender’]))
{
$name=$_POST[“formName”];
$email=$_POST[“formEmail”];
}
print “$name’s email address is $email”;
?>

Formatar a saída usando a instrução print combina as variáveis e o texto em um único conjunto de
aspas duplas. Entre aspas, o PHP ainda reconhece as variáveis porque o prefixo cifrão ($) diz ao
interpretador que, mesmo entre aspas, a palavra é uma variável. A maioria das outras linguagens
330 exige concatenação ao unir variáveis e literais. A Figura 16-3 mostra a forma como preenchida e
a saída gerada pelo PHP. (Observe o endereço do host local na janela de URL para os painéis
superior e inferior).

Esse é um programa simples, mas mostra como o PHP passa dados do HTML5 para o PHP.
Você também encontrará um resultado muito interessante na janela de e-mail quando digitar
algo que não esteja no formato de e-mail. Você descobrirá que não é passado para o módulo
PHP. Em vez disso, ele usa a nova estrutura HTML5 — o formato de entrada de e-mail — e
age como um validador de entrada de dados que não diz ao usuário que ela está confusa.

DATA DE VALIDADE
Para ajudar os usuários, a parte HTML5 do aplicativo usa uma rotina de captura de erros
e informa aos usuários que eles cometeram um erro nas duas partes da página da Web.
Primeiro, o formulário de e-mail inclui um manipulador de erros:

<input type=email size=32 NAME=”formEmail” placeholder=”Enter Name”


onInvalid=”SendMaster.eLert()”>
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

331

Figura 16-3: Entrada de dados e saída de dados.

Segundo, a rotina JavaScript no <head> da página aciona uma mensagem de alerta:

SendMaster=new Object();
SendMaster.eLert=function()
{
alert(“Opa! Parece ser um pouco boo-boo no formato de e-mail.”);
}

Você pode querer anotar duas características importantes sobre a codificação:

„ Ele usa onInvalid em vez deonError. O manipulador de eventos onError é tão


comumente usado para qualquer tipo de erro que você pode assumir que funcionaria
aqui também, mas apenas em trabalhos onInvalid neste caso.
„ A rotina de captura de erros está no e-mail <input> em vez da tag de entrada
<input>. Como o erro ocorre ao clicar no botão Enviar, parece que o tratamento de erro
estaria na tag do botão Enviar, mas não é. A Figura 16-4 mostra a mensagem de erro e o
erro que a causou — observe o cursor da mão no botão enviado (Submit).
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Figura 16-4: Entrada inválida capturada no formato de e-mail.

O atributo value do botão Submit deve ser chamado de qualquer coisa, menos “Submit”,
como uma boa prática de design interativo. Por isso, seu valor é definido como Send. (Não
quer enviar.) Além disso, a mensagem não é um daqueles suspiros histéricos como "FATAL
ERROR!" Formato de e-mail ilegal! ”Alguns usuários acham essas mensagens
desconcertantes. Além disso, eles são imprecisos — ninguém morreu ou foi preso. Foi
apenas um boo-boo.

332 ESTRUTURAS BÁSICAS DO PROGRAMA PHP


Nesta breve introdução ao PHP, você ainda pode aprender o suficiente para fazer uma
aplicação prática. No entanto, primeiro você aprenderá algumas das estruturas básicas do
PHP. Se você conhece JavaScript ou outras linguagens de script ou programação, as
estruturas serão familiares. No entanto, o PHP tem suas idiossincrasias e muitos leitores não
estão familiarizados com a programação, portanto, essa discussão é básica e focada.

ARMAZENAMENTO DE DADOS TEMPORÁRIOS


Todos os idiomas incluem uma certa maneira de armazenar dados temporariamente em
contêineres chamados variáveis, constantes ou algum tipo de objeto, como uma matriz.
Algumas linguagens são fortemente tipadas e outras são pouco tipadas. Java, C # e
ActionScript 3.0 são todos fortemente tipados. Isso significa que você precisa decidir sobre
um determinado tipo de dados e atribuir esse tipo de dados ao seu armazenamento. Por
exemplo, uma variável do ActionScript 3.0 é declarada como:

var userName:String=”SoSueMe”;

Isso significa que você só pode atribuir tipos de dados de string à variável, username. Se
você atribuir uma função de número, Boolean ou nonstring, isso causará um erro.

PHP é como JavaScript. Se você atribuir a variável PHP,

$userName =”SoSueMe”;
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

você pode alterá-lo para qualquer outro tipo de dados ou expressões como

$userName =55;
$userName =true;
$userName =(15 * 3);

Linguagens com tipagem fraca têm certas vantagens e desvantagens, mas tendem a ser mais
fáceis de aprender inicialmente.

Variáveis
Como mencionado anteriormente neste capítulo, todos os rótulos de variáveis começam
com um sinal de dólar ($).Eles podem ser colocados em outras strings e reconhecidos
independentemente do tipo de dados. Experimente o seguinte (variableInString.php na pasta
deste capítulo em www.wiley.com/go/ smashinghtml5):

<?php
$ram = “dynamic random access memory”;
$speed =”much GHz in”;
$money= 2;
$truism =”You can’t have too much $ram or too $speed a processor. (That will be $money cents for the advice.)”;

print $truism;
?> 333
Quando você testar esse código, verá a seguinte saída:

Você não pode ter muita memória de acesso aleatório dinâmica ou muito GHz em um processador.
(Isso será de 2 centavos para o conselho.)

Na maioria das outras linguagens, você teria que usar a concatenação.

Constantes
Constantes são como variáveis no PHP, exceto que elas não mudam de valor. Eles recebem
valores de uma maneira muito diferente das variáveis e são sensíveis a maiúsculas e
minúsculas. Por convenção (e boa prática), eles estão em maiúsculas (LIKE_THIS). O formato
básico da atribuição é:

define(“CONSTANT_NAME”, “value”);

Experimente o seguinte pequeno script (constants.php na pasta deste capítulo em www.wiley.


com/go/smashinghtml5), , para ter uma ideia de como eles funcionam:

<?php
define(“FRED”, “Fred J. Jones “);
define(“MONEY”, 200);
define(“BUCKS”, “$”);
echo FRED , “ donated “ , BUCKS , MONEY , “ to charity.”; ?>
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

A saída desse pequeno script é:

Fred J. Jones doou $200 para caridade.

Como você pode ver colocando o caractere de cifrão ($)em uma constante, você pode
usá-lo com expressões financeiras e não será confundido com uma variável. A propósito,
você pode usar o echo ou print (bem como outras declarações) em PHP para enviar saída
para a tela.

Matrizes
Uma matriz é um objeto que contém vários valores. É como um contêiner em um contêiner onde
objetos diferentes são armazenados — bonecos da China, peças de automóveis de Detroit,
computadores do Japão e milho de Iowa. Eles funcionam exatamente como os arrays fazem em
JavaScript, mas são configurados de maneira um pouco diferente. (Veja o Capítulo 12 para mais
informações sobre arrays.)

As matrizes são nomeadas como variáveis, exceto que elas são atribuídas a objetos de matriz.
Para configurar um array, você pode usar um dos dois formatos básicos. O formato preferido
funciona como uma matriz associativa. Em vez de identificar um elemento de matriz com um
número, é dada uma chave com um valor — um par de valores-chave. Este é o formato geral
para configurar um array associativo:

$associate = array(“key1” => “value1”,”key2” => “value2”);

O outro tipo de matriz tem uma chave numérica. Normalmente, é configurado listando os
elementos da matriz no seguinte formato:
334
$numeric=array(“el0”,”el1”,”el2”,3, true);

No entanto, ele também pode ser configurado usando o método key=>value:

$assoNum = array(0 => “value1”,1 => “value2”,1 => “value2”);

O pequeno script a seguir (array.php na pasta deste capítulo em www.wiley.com/go/


smashinghtml5) mostra várias combinações diferentes que você pode ver:
<?php
$associate = array(“key1” => “value1”,”key2” => “value2”,”keyEtc” => “valueEtc”); $boxCar=array(“tools”,”oil
drum”,”cow”,7, false, “computer parts”); $mixedBag=array(1=>”first”,2=>”second”,”third”=>3,4=>4);

echo $associate[“key2”] . “<br>”;


echo $associate[“keyEtc”] . “<br>”;
echo $boxCar[5] . “<br>”;
echo $boxCar[0] . “<br>”;
echo $mixedBag[2],$mixedBag[“third”];
?>
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

Você verá a seguinte saída:

value2
valueEtc
computer parts
tools
second3

Matrizes são importantes no PHP porque os dados do banco de dados são frequentemente carregados
em uma matriz para saída.

Objetos e propriedades
Objetos em PHP são baseados em classes de usuário — não há objeto Object()como há em
JavaScript. Fazer uma aula é como criar um objeto com todas as variáveis, matrizes,
constantes e funções que você gosta em um só lugar. Aqui estão os princípios básicos para
criar uma classe, adicionar propriedades e adicionar métodos neste exemplo
(PropMethod.php na pasta deste capítulo em www. wiley.com/go/smashinghtml5):

<?php
class PropMethod
{
private $propString=”I work well with HTML5”;
private $propNum=2044;
private $propBool=true;
335
public function showString()
{
echo $this->propString, “<br>”;
}
public function showNum()
{
echo $this->propNum, “<br>”;
}
public function showBool()
{
echo $this->propBool;
}
}
$testPM=new PropMethod();
echo $testPM->showString();
echo $testPM->showNum();
echo $testPM->showBool();
?>

A saída para essa pequena classe é

Eu trabalho bem com HTML5


2044
1
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Tudo, mas o 1 provavelmente era esperado. Algumas linguagens tratam os booleanos


como pares verdadeiro / falso ou 1/0. Então true + true = 2 e true * false = 0.

O objeto $testPM é o objeto e funciona como qualquer outro objeto em outras linguagens.
No JavaScript, no entanto, o objeto e a propriedade são separados por pontos (.)Enquanto no
PHP, eles são separados por setas (->).Os seguintes são equivalentes:

myObject.myProp=20; //JavaScript
myObject->myProp=20; //PHP

Você encontrará outras diferenças, mas as semelhanças são muito mais numerosas entre
o PHP e o JavaScript.

PRINCIPAIS OPERADORES DO PHP


Como todas as linguagens da Web, o PHP tem operadores, e uma lista completa deles pode
ser encontrada no manual oficial do PHP em http://us.php.net/manual/en/language.operators.
php. Aqui, apenas alguns que serão usados no programa para fazer um aplicativo de e-mail, e
outros são únicos de outras maneiras. Então, embora você tenha que depender do manual
para todos os operadores PHP, o que foi examinado nas próximas seções fará com que você
esteja em funcionamento.

Tarefa
336 Para atribuir um valor a uma variável ou objeto, o sinal de igual (=) serve como o operador
de atribuição. Operadores PHP compostos atribuem o valor da variável atual mais, menos,
multiplicado por ou dividido pelo valor atribuído. O exemplo a seguir (assignment.php na
pasta deste capítulo em www.wiley.com/go/smashinghtml5) mostra os principais usos dos
operadores de atribuição:

<?php
$sampleNum=20;
$sampleString=”Hurricane”;
$sampleNum += 50;
$sampleString .= “ is coming.”;
echo $sampleNum,”<br>”;
$sampleNum *= 2;
echo $sampleNum,”<br>”;
$sampleNum /= 4;
echo $sampleNum,”<br>”;
echo $sampleString;
?>

Antes de analisar o resultado, veja se você pode prever o que será:

70
140
35
O furacão está chegando.
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

Um dos operadores únicos no PHP é o uso do ponto (.) Para concatenação. Um operador
composto une dois operadores em um para facilitar a codificação, e o operador. =
Compound pega o valor esquerdo e o associa ao valor correto. Outra maneira de ver isso é
que ele atribui seu valor atual e o valor atribuído a ele para criar um terceiro valor, que se
torna o novo valor da variável.

Aritmética
Os operadores aritméticos são bastante padronizados em comparação com outras
linguagens de programação. Os principais incluem

„ + (adição)
„ – (subtração e negação)
„ / (divisão)
„ * (multiplicação)
„ % (módulo)

Sobre o único que alguém tem problemas com é módulo (%). Refere-se a quaisquer restos de
números inteiros após a divisão. No entanto, eles podem ser úteis. Por exemplo, o pequeno
programa a seguir (modulo.php na pasta deste capítulo em www.wiley.com/go/smashinghtml5),
demonstra como ele pode ser usado com um booleano:

<?php
337
for ($count = 1; $count <= 12; $count++) {
$valid = $count % 2;
if($valid)
{
echo $count, “ is odd<br>”;
}
else
{
echo $count, “ is even<br>”;
}
}
?>

O programa itera através de uma série de números divididos por 2. Mesmo números
divididos por 2 retornam 0 e números ímpares retornam 1 — os valores booleanos
reconhecem como falso e verdadeiro, respectivamente. A instrução if()está procurando
por um true ou false e aceitará uns e zeros como booleanos. Ao enviar fundos alternados
nos dados da tabela provenientes de um banco de dados, o operador de módulo é usado
para alternar as cores usando o truque de dividir números de registro por 2 e usar o
restante (módulo) como um booleano.

FAZENDO UM APLICATIVO DE E-MAIL


Depois de todo o trabalho feito com formulários e diferentes tipos de entrada em HTML5, você
descobrirá que com um pequeno PHP você pode criar formulários de e-mail com os quais os
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

usuários podem enviar consultas. O primeiro formulário será muito simples e fornecerá
aos usuários uma seção de comentários que eles podem usar para sua página da Web.

As noções básicas de criação de um centro de aplicativos de e-mail em torno da função


mail() no PHP. A função mail() espera três ou quatro parâmetros. No primeiro aplicativo de
email, somente os três primeiros são usados.

UM SIMPLES APLICATIVO DE E-MAIL


A primeira coisa que você quer fazer em um aplicativo de e-mail é configurar a parte
HTML5 do par HTML5-PHP para fornecer uma entrada clara para os usuários. Usando a
verificação de validação incorporada em alguns dos formulários de entrada (onInvalid), você
pode impedir que os usuários enviem inadvertidamente um email, número de telefone ou
URL ou outros dados de formulário formatados incorretamente. Portanto, este primeiro e-
mailer HTML5 utilizará (novamente) o formulário de entrada de e-mail e usará o
manipulador de eventos onInvalid. O programa a seguir (EZmailer.html na pasta deste
capítulo em www.wiley. com/go/smashinghtml5) deve ser bastante familiar.

<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
MailMaster=new Object();
MailMaster.eMess=function()
338 {
alert(“Hmmmm ... Parece que a entrada de e-mail tem algo fora do tipo. . . . Por favor, dê uma olhada e veja se
você pode consertá-lo.”)
}

</script>
<style type=”text/css”>
/*DDDCC5,958976,611427,1D2326,6A6A61 */
body {
background-color:#DDDCC5;
color:#1D2326;
font-family:Verdana, Geneva, sans-serif;
}
h2 {
background-color:#958976;
color:#DDDCC5;
text-align:center;
font-family:”Arial Black”, Verdana, Arial;
}
h3 {
color:#611427;
}
fieldset {
color:#6A6A61;
}
</style>
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>


<title>E-mail Simples</title>
</head>
<body>
<article>
<header>
<h2>Remetente</h2>
</header>
<section>
<header>
<h3>Preencha o formulário e envie-nos suas dúvidas, idéias e discursos.</h3>
</header>
<form action=”mailer1.php” method=”post”>
<input name=userName>
&nbsp;Por favor, insira seu nome.<br>
<input name=mailNow type=email onInvalid=”MailMaster.eMess()”>
&nbsp;Digite o endereço de e-mail para enviar a resposta.<br>
<input name=subject>&nbsp;Qual assunto você gostaria de abordar?<br>
<fieldset>
<legend>Comentários</legend>
<textarea name=talk cols=70 rows=15 ></textarea>
</fieldset>
<input type=submit name=sender value=”Send email”>
</form>
</section>
</article> 339
</body>
</html>

Uma das principais linhas no script HTML5 é a ação no formulário que envia as
informações para o PHP para processamento:

<form action=”mailer1.php” method=”post”>

O formulário não recebeu um nome porque, para esse aplicativo, não precisávamos de
um. No entanto, adicionar um nome ao formulário geralmente é uma boa prática e, se
necessário, ele deve estar disponível.

Todos os atributos de nome nos elementos de entrada são cruciais. Cada nome nas tags do
elemento de entrada é passado para o PHP como um elemento da matriz na matriz $_POST.
O elemento é então passado para uma variável que é usada no email enviado a um
destinatário — normalmente, o proprietário do site. Nesse caso, é você. A Figura 16-5
mostra a página de entrada e os dados do formulário que serão enviados para o programa
PHP para processamento no lado do servidor.

Assim que o usuário clica no botão Enviar E-mail, ele recebe um aviso:

Seu e-mail foi enviado para waz@wazooHome.net. Obrigado pelo seu interesse em Wazoo
Web Site Design e Desenvolvimento.

Para ver como isso aconteceu, precisamos examinar a parte do aplicativo em PHP.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

340

Figura 16-5: Formulário de entrada de dados a ser enviado como um e-mail.

CAPTURA E ENVIO DE PHP


Em seguida, um programa PHP captura os dados enviados do HTML5 e os envia ao
destinatário pretendido, o proprietário da empresa. Primeiro, dê uma olhada no código PHP
em mailer1.php (disponível na pasta deste capítulo em www.wiley.com/go/smashinghtml5).
Então, você pode ver como o e-mail é enviado.

<?php
$name;
$email;
$comments;
$subject;
$eBiz=”waz@wazooHome.net”;
if(isset($_POST[‘sender’]))
{
$name=$_POST[“userName”];
$email=$_POST[“mailNow”];
$comments=$_POST[“talk”];
$subject=$_POST[“subject”];
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

}
$comments .= “\r\r\r\nFrom-> $name : Send reply to: $email”;
mail($eBiz,$subject,$comments);
echo “Your e-mail has been sent to $eBiz. Thank you for your interest in Wazoo Web
Site Design and Development.”;
?>

Ao olhar para o código PHP, você pode ver que não é preciso muito. Primeiro, os quatro
fragmentos de dados da página HTML5 são passados para quatro variáveis PHP:

$name
$email
$comments
$subject

Em seguida, a variável $comments é concatenada com informações sobre o nome do


remetente e o endereço de e-mail. Em seguida, usando a função mail(), o programa usa a
seguinte linha para enviar tudo para o proprietário do site:

mail($eBiz,$subject,$comments);

Finalmente, uma mensagem simples é enviada ao usuário que enviou o e-mail. A Figura 16-6
mostra o e-mail recebido pelo Wazoo Web Site Design e Desenvolvimento.
341

Figura 16-6: E-mail gerado por código PHP e HTML5.

Ao ter uma página de e-mail automática em seu site, você (ou seus clientes) pode gerar
muito mais negócios. A chave para usar algum tipo de e-mail gerado pela Web é facilitar o
envio de um e-mail e gerar mais negócios para o site.
PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

ADICIONANDO UM CABEÇALHO E RESPOSTA AUTOMÁTICA EM PHP


Como foi sugerido no e-mail fictício usado no exemplo, seria bom ter uma resposta
automática por e-mail aos usuários quando eles enviam um e-mail. Novamente, usando a
função mail()em PHP, tudo o que você precisa fazer é adicionar um segundo mailer. Usando
a variável $name e $email, você pode personalizar uma resposta. Além disso, você pode
adicionar um cabeçalho ao email que é enviado ao usuário e ao proprietário do site.

Primeiro, a função mail() requer um quarto parâmetro. Quebrando os quatro parâmetros,


você pode dispor o seguinte:

„ Destinatário (endereço de e-mail)


„ Assunto (o que é colocado na linha de assunto)
„ Conteúdo (o corpo da mensagem)
„ Cabeçalho (os endereços De e Responder a)

No exemplo inicial, o endereço De e Responder a foi concatenado ao conteúdo.


No entanto, usando o parâmetro header, você pode deixar o cabeçalho cuidar dele.

Esta listagem seguinte (mailer2.php na pasta deste capítulo em www.wiley.com/go/


smashinghtml5) mostra o mesmo programa com o cabeçalho adicionado e a resposta
automática. Muito pouco foi adicionado e muito foi aprimorado.
342
<?php
$name;
$email;
$comments;
$subject;
$eBiz=”waz@wazoo.net”;
if(isset($_POST[‘sender’]))
{
$name=$_POST[“userName”];
$email=$_POST[“mailNow”];
$comments=$_POST[“talk”];
$subject=$_POST[“subject”];
}
$headers = “From-> $name :\r\n Send reply to: $email”;
$reply=”Querido $name , \r\n Obrigado por nos enviar seus comentários. Nós da Wazoo Web Site Design e
Desenvolvimento acreditamos que o atendimento ao cliente é essencial para fazer negócios— não um serviço
opcional..\r\n”;

$reply .= “Assim que pudermos analisar seus comentários, um de nossos associados entrará em contato com você.”;

$reply .=”\r\n Atenciosamente, Phillip Pickle, \r\n Presidente, WWDD”;


mail($email,” Obrigado por seus pensamentos”,$reply);
mail($eBiz,$subject,$comments,$headers);
echo “Seu e-mail foi enviado para $eBiz. Obrigado pelo seu interesse no design e desenvolvimento do site da
Wazoo.”;

?>
CAPÍTULO 16: CAPTURA DE DADOS INTERATIVOS

A variável $headers adiciona o material do cabeçalho que foi concatenado ao conteúdo. Uma
nova variável, $reply, fornece o texto para responder automaticamente ao remetente. Dessa
forma, os usuários obtêm feedback imediato. A Figura 16-7 mostra como a resposta automática
se parece com o destinatário.

Figura 16-7: Resposta automática de e-mail.


343
O usuário vê que seu nome está no cabeçalho e a linha de assunto é baseada no que o
usuário acabou de enviar. Mesmo que o usuário provavelmente perceba que é uma resposta
gerada automaticamente, ele gosta do fato de que uma empresa de desenvolvimento da
Web pode fazer isso para seus negócios.

A adição do cabeçalho facilita a adição de um cabeçalho onde você deseja. No


primeiro exemplo, o cabeçalho era realmente um rodapé no final da mensagem. Desta
vez, é onde ele pertence na parte superior do e-mail, conforme mostrado na Figura 16-
8.

Figura 16-8: Um cabeçalho adicionado a um e-mail.


PARTE IV: TAGS DINÂMICOS EM HTML5 MAIS UM POUCO JAVASCRIPT E PHP

Como você pode ver na Figura 16-8, o cabeçalho está no topo do e-mail. Além disso, em
todos os exemplos, o PHP fez um excelente trabalho ao manter o formato originalmente
inserido na caixa de comentários no formulário de entrada HTML5.

PEGUE A RODA
Um dos pontos repetidos ao longo do livro é tornar sua página fácil de usar. O formulário de
e-mail usado neste capítulo era muito simples, mas e quanto a algumas informações que o
dono do site queria saber? Um formulário de comentários é aberto e é uma ferramenta
valiosa para se comunicar com seus usuários. No entanto, às vezes você ou seu cliente
precisa de informações muito específicas. Esse desafio exige algumas alterações no
programa de email para incluir o seguinte:

„ Quatro botões de opção solicitando informações sobre o tipo de negócio do usuário


„ Quatro caixas de seleção solicitando informações sobre os serviços em que o usuário
estava interessado em usar

Isso pode não parecer um grande desafio, mas se você pode facilitar a entrada de dados para os
usuários e acessar essas informações em PHP, então você tem algumas ferramentas muito
poderosas ao seu alcance.

344
ÍNDICE

índice

SÍMBOLOS E
NUMÉRICOS objetos em páginas da Web, 320 aplicando pseudo-classes CSS3,
+ (operador de adição), 337 estilo para texto com CSS3 160–162
<> (parênteses de seta), 8–9 folhas de estilo incorporadas, 53–54 Valor do atributo do idioma árabe,
/ (operador da divisão), 337 folhas de estilo externas, 55–58 34
. (ponto), 60 estilo inline, 58–59 arcos, desenho, 276–279
“” (Aspas duplas), 34, 35 estilo de elementos HTML5 operadores aritméticos, 337
% (operador de modulo), 337 com propriedades CSS3, 52–53 matrizes
* (operador de multiplicação), 337 estilos para desenhos, 262–264 visão geral, 248–249
# (sinal de libra), 62 transparência para cores, 74–76 PHP, 334–335
; (ponto e vírgula), 40 operador de adição (+), 337 $ _POST, 330
- (operador de subtração e negação), ajustando parênteses de seta (<>), 8–9
337 Tamanho do arquivo GIF, 185–186 atribuição
| (barra vertical), 40 tamanho do arquivo de imagem cores usando porcentagens, 67–69
Formato de vídeo 3GP, 217, 221– com gráfico ícones para o atributo rel, 131–132
222 aplicações, 182 valores para pré-carregar o
Tamanho do arquivo JPEG, 183–185 atributo, 202–203
A objetos em páginas da Web, 321 operadores de atribuição, 336–337
<a> links de tags. ver links Tamanho do arquivo PNG, 185–186 atributos
rerência absoluta, 104 Tamanho do arquivo SVG, 186–187 accept-charset, 286–287
atributo accept-charset, Páginas da Web para visualização ação, 287 345
286–287 em dispositivos móveis alinhar, 189-191
atributo de ação, 287 310 autocomplete, 288
adicionando Adobe Browserlab, 20 reprodução automática, 200, 228
respostas automáticas em PHP, 342– Adobe Dreamweaver CS5, 20 colspan, 120–122
344 Adobe Illustrator, 194-196 controles, 228–229
bordas para tabelas com CSS3, 114- Adobe Media Encoder CS5, defi ned, 33
117 221–222 enctype, 286–287
sombras, 265–267 função alert (), 235 altura, 229
formulários janelas de alerta, exibindo opções href, 133
atributo accept-charset, 286–287 em, 295–296 hreflang, 133
atributo de ação, 287 alinhar atributo, 189-191 lang, 34–35
autocomplete, 288 folhas de estilo alternativas, 128– link, 133
DOM, 290-292 131 lista, 294
atributo de nome, 288–290 âncoras (página), 137–140 loop, 227-228
visão geral, 284–285 apple mídia, 133
cabeçalhos em PHP, 342–344 webcams do iSight, 223 nome, 288–290
Estrutura HTML5, 49–52 Jogador do QuickTime, 225 novalidado, 286–287
metadados para páginas da Web, Safari da Apple. Veja também video cartaz, 226–227
87–88 suporte para áudio, 203 pré-carga, 202 a 203, 227
usando para interpretar HTML5,
22–23
ÍNDICE

atributos (continuação) bit, 72 C


rel tag <body>, 32–33, 86 Cabarga, Leslie (autor)
atribuindo ícones para, 131-132 livro, organização de, 2–3 Guia do designer para cores
pré-busca, 133 Booleano, 245 Combinações, Th e, 78
valores para, 134 bordas, adicionando a tabelas com filmadoras, 223–224
rowspan, 120–122 CSS3, 114-117 Software Camtasia, 225
tamanhos, 133 <br> tag, 45–46 tag <canvas>
src, 44, 226 Browserlab (Adobe), 20 adicionando estilos, 262–264
alvo, 140–141, 290 navegadores criando desenhos
título, 133 Apple Safari arcos, 276–279
tipo, 133, 204–205 suporte para áudio, 203 círculos, 279-281
largura, 229 usando para interpretar HTML5, curvas, 275–276
áudio. Veja também video 22–23 gradientes, 279-281
Suporte para Apple Safari, 203 suporte de áudio, 203–204 linhas, 270–275
atributo autoplay, 200 compatibilidade com vídeo movimento, 270–275
suporte ao navegador para, 203–204 Adobe Media Encoder CS5, visão geral, 258-260, 269-270
controles, 200–202 221–222 grade, 256–257
convertendo arquivos, 208 visão geral, 218–219 imagens
criando arquivos WebM Miro Video Converter, adicionando sombras,
Macintosh OS X Sound 219-220 265–267
Estúdio, 208–209 exibindo ícones com, 132 filtros, 267–269
visão geral, 206 Google Chrome carregamento, 264–265
Gravador de Som do Windows 7, controles de áudio do navegador, implementação, 256
206–207 201–202 visão geral, 253–256
loop, 203 suporte para áudio, 203 exemplos práticos, 281
visão geral, 199-200 usando para interpretar HTML5, Removendo Desenhos, 262–264
exemplos práticos, 214 19–21 scripts, 89–90
atributo de pré-carregamento, 202– Microsoft Internet Explorer criação de desenhos, 257–258
203 em tons de cinza, 188 transparência, 74
efeitos sonoros suporte para áudio, 203 trabalhando com vários desenhos,
integrando em páginas da Web, usando para interpretar HTML5, 24 260–262
211-213 Mozilla Firefox tag <caption>, 113 a 114
visão geral, 209 suporte para áudio, 203 legendas, organização, 100–103
transições de sons, 209–211 usando para interpretar HTML5, Coordenadas cartesianas, 256–257
tag <source>, 204 18-19 células (tabela), 120
tag <audio>. ver áudio Ópera tag <center>, 16–17
relações de autor, 135–137 suporte para áudio, 203 mudando
346
atributo autocomplete, 288 usando para interpretar HTML5, Tamanho do arquivo GIF, 185–186
atributo de reprodução automática, 21–22 tamanho do arquivo de imagem com
200, 228 visão geral, 17 gráfico
respostas automáticas, adicionando exemplos práticos, 25–26 aplicações, 182
em PHP, visualizando diferentes exibições, Tamanho do arquivo JPEG, 183–
342–344 24–25 185
usando folhas de estilo com objetos em páginas da Web, 321
B diferente, 130 Tamanho do arquivo PNG, 185–186
cores de fundo, clarificação de contextos de navegação Tamanho do arquivo SVG, 186 a
dados nos navegadores de computador, 187
com 117-119 141–142 Páginas da Web para visualização
largura de banda, poupança, 185 em navegadores de celular, 142–143 em dispositivos móveis
cor base, criando esquemas de cores byte, 72 310
de 76 caixas de seleção, 297–301
tag <base>, 86–87 Atributo de idioma chinês
valor, 34
ÍNDICE

escolhendo consistência (navegação) CSS3


Safari da Apple, 22–23 aplicando pseudo-classes CSS3, adicionando bordas a tabelas com
Google Chrome, 19 a 21 160–162 114–117
microfones no Windows 7 Mecânica HTML5 da vertical adicionando estilo ao texto com
Gravador de som, 206 navegação, 162–165 folhas de estilo incorporadas, 53–54
Microsoft Internet Explorer, 24 visão geral, 159–160 folhas de estilo externas, 55–58
Mozilla Firefox, 18-19 usando ícones gráficos na estilo inline, 58–59
Ópera, 21–22 navegação, estilo de elementos HTML5
visão geral, 17 165–166 com propriedades CSS3,
Chrome (Google) navegação vertical e horizontal, 52–53
controles de áudio do navegador, 160 aplicando pseudo-classes,
201–202 constantes (PHP), 333–334 160–162
suporte para áudio, 203 controles (áudio), 200–202 criando
usando para interpretar HTML5, atributo de controles, 228–229 classes, 59–61
19–21 convertendo arquivos, 208–209 IDs, 62–63
círculos, desenho, 279-281 criando relacionamento com HTML5, 31
classes (CSS3), 59-61 arquivos de áudio propriedades da tabela para HTML5,
código, parsing, 28 Macintosh OS X Sound 110–112
parâmetro de codec, do tipo Estúdio, 208–209 curvas, desenho, 275–276
atributo, 205–206 visão geral, 206
cor Gravador de Som do Windows 7, D
fundo, esclarecimento de dados 206–207 dados
com 117-119 desenhos de tela, 258-260 esclarecimento com fundo
“Web seguro”, 177 esquemas de cores, 74–78 cores, 117–119
valores de cor desenhos complexos com tela tipos de, 245-246
adicionando transparência à cor, arcos, 276–279 validação em PHP, 330–332
74–76 círculos, 279-281 dados (interativo)
criação de esquemas de cores, 74–78 curvas, 275–276 aplicações de e-mail
integrando paletas de cores com gradientes, 279-281 adicionando cabeçalhos e auto-
Páginas da Web, 78–81 linhas, 270–275 resposta,
exemplos práticos, 81 movimento, 270–275 342–344
Cor RGB visão geral, 269-270 criando, 337–340
configurações hexadecimais, 71–74 consistência na navegação Captura e envio de PHP, 340–341
nomes, 66–67 aplicando pseudoclasses CSS3, visão geral, 325
visão geral, 66 160–162 347
PHP
Percentagens RGB e HSL, Mecânica HTML5 da vertical validação de dados, 330–332
67–69 navegação, 162–165 visão geral, 328–330
Configurações de números inteiros visão geral, 159–160 Matriz $ _POST, 330
decimais RGB, usando ícones gráficos em Estruturas de programa PHP
70–71 navegação, 165–166 matrizes, 334–335
atributo colspan, 120–122 vertical e horizontal constantes, 333–334
tag <comment> navegação, 160 objetos, 335–336
papel de, 35–37 Classes CSS3, 59-61 operadores, 336–337
quando usar, 38 IDs de CSS3, 62–63 propriedades, 335–336
compatibilidade (navegador) HTML5 com tags, de 8 a 9 armazenamento temporário de
Adobe Media Encoder CS5, objetos, 250–251 dados,
221–222 sons de transição, 209–211 332–333
visão geral, 218–219 Páginas da Web, 216–218, 307–309 variáveis, 333
WebM Miro Video Converter, exemplos práticos, 344
219-220
ÍNDICE

dados (interativo) (continuação) removendo, 262–264 encontrando, 181


idiomas do lado do servidor estabelecendo para, 257-258 escala de cinza no Internet Explorer,
visão geral, 326 trabalhando com múltiplos, 260–262 188
configurando PHP, 326–327 Dreamweaver CS5 (Adobe), 20 visão geral, 179–181
testando PHP, 327–328 sombras, 265–267 arquivos
elemento <datalist> menus suspensos, na navegação áudio, criando
em dispositivos móveis e URL global, Macintosh OS X Sound
teclados, 296–297 153–156 Estúdio, 208–209
visão geral, 9 arquivos dinâmicos SVG, 194-196 visão geral, 206
datalistas, 294 Gravador de Som do Windows 7,
selecionador de data, 301–302 E 206–207
configurações de números inteiros elementos convertendo, 208–209
decimais (RGB), extensão, 54 externo, 234–235
70–71 datalist, 9, 296–297 consertando a extensão padrão do
densidade (pixel), 58 defi ned, 33 Windows
navegação de designer, 148–149 Referências DOM, 242–244 configurações, 29
Guia do designer para combinações rodapé, 94 HTML5 e afins, 28
de cores, manuseio, 237–239 organizando
O (Cabarga), 78 iframe, 143–146 referência absoluta, 104
projetando em seções, 91–94 link, 128 reorganização de imagem e
Interfaces projetadas (Tidwell), 148 novo HTML5, 9-11 referência, 103–104
detectando eventos, 236–237 estilo com propriedades CSS3, referência relativa, 104–106
descontinuados, 15–17 52–53 para a Web, 31
exibindo mesas, 113 filtros, 267–269
escolhas em janelas de alerta, aplicações de e-mail encontrando
295–296 adicionando cabeçalhos e tamanho do arquivo, 181
ícones com navegadores, 132 autoreplies, latitude, 306–307
exibe, visualizando, 24–25 342–344 longitude, 306-307
tag <div>, 94–98 visão geral, 337–340 Firefox (Mozilla)
operador de divisão (/), 337 Captura e envio de PHP, 340–341 suporte para áudio, 203
divisões, organização, 94-98 folhas de estilo incorporadas, 53–54 usando para interpretar HTML5,
348 declaração de tipo de documento, 44 Emerson, Ralph Waldo (autor) 18-19
DOM (modelo de objeto de “Autossuficiência”, 159 fixação
documento) atributo de enctype, 286–287 TextEdit no Macintosh, 30
efeitos do navegador, 251–252 manipuladores de eventos, 236 Extensão de arquivo padrão do
forma como parte de 290-292 eventos, detectando, 236–237 Windows
como funciona com JavaScript arquivos externos, JavaScript em, configurações, 29
240–242 234–235 FlashKit, 209
Elementos HTML5 com, 242–244 folhas de estilo externas, 55–57 Flip Mino HD camcorder, 224
visão geral, 239–240 elementos de rodapé, 94
relação com seções, 94 Tag <form>, 242 a 244
ponto (.), 60 F formatos (imagem), 176
aspas duplas (“”), 34, 35 tag <figcaption>, 100–103 agrupamento de formatação, 99–100
descarregando efeitos sonoros, 211 tag <figure>, 100–103 formulários
desenhos (tela) figuras, organizando, 100–103 adicionando
adicionando estilos, 262–264 tamanho do arquivo atributo accept-charset,
criando mudando 286–287
arcos, 276–279 com aplicações gráficas, atributo de ação, 287
círculos, 279-281 182 autocomplete, 288
curvas, 275–276 JPEG, 183–185 DOM, 290-292
gradientes, 279-281 Tamanho SVG, 186-187 atributo de enctype, 286–287
linhas, 270–275 atributo de nome, 288–290
movimento, 270–275
visão geral, 258-260, 269-270
ÍNDICE

atributo novalidate, gráficos, com links para, 166–167 código de análise


286–287 Formato de Informação Gráfica consertando o TextEdit no
visão geral, 284–285 (GIF), 177, 185–186 Macintosh,
atributos, 286–292 escala de cinza no Internet Explorer, 30
tipos de entrada 188 consertando o arquivo padrão do
caixas de seleção, 297–301 grade, 256–257 Windows
datalists, 294, 296–297 agrupamento sem formatação, configurações de extensão, 29
selecionador de data, 301–302 99–100 como os arquivos funcionam com a
exibindo opções em alerta Web, 31
janelas, 295–296 H HTML5 e arquivos relacionados, 28
atributo de lista, 294 Formato de vídeo H.264, 217 visão geral, 28
visão geral, 293–294 elementos de manuseio, 237–239 exemplos práticos, 40–41
botões de rádio, 297–301 tag <cabeça>, 32, 86 elementos de estilo com CSS3
Tipo de URL, 294 cabeçalhos, adicionando em PHP, propriedades, 52–53
visão geral, 283 342–344 usando tags do HTML4, 11–15
exemplos práticos, 303 Valor do atributo do idioma modelo de matiz de saturação-luz
funções, 235, 245 hebraico, (HSL),
34 67–69
G Hedengren, Th ord Daniel (autor) Linguagem de marcação de
geolocalização Esmagando WordPress: Além hipertexto. Vejo
adaptando páginas para visualização o Blog, 325 HTML (marcação de hipertexto)
móvel, atributo de altura, 229 Língua); HTML5
310 configurações hexadecimais, 71–74
encontrar latitude e longitude, tag <hgroup>, 50–52 I
306-307 tipos de link hierárquico, 137 ícones
recebendo mapas, 307 Valor do atributo da linguagem exibindo com navegadores, 132
Plug-in do Google Earth, 310–311 hindi, 34 gráfico, 165–166
visão geral, 306 navegação horizontal, 160 link, 131–132
Colocar mapas em páginas da Web, tag <hr>, 99–100 miniatura, 167–169
307 atributo href, 133 identificando partes de tags, 33–34
exemplos de prática, 321–322 atributo hreflang, 133 IDs
propriedades, 310–311 Percentagens de HSL e RGB, 67–69 CSS3, 62-63
colocando páginas juntas, 307-309 HTML (HyperText Markup página, 137–140
objeto de geolocalização. Language), elemento iframe, 143–146
veja a geolocalização história de, 1 iframes
Valor do atributo do idioma alemão, tag <html>, 86 exemplos práticos, 171 349
34 HTML4, usando tags contínuas sites de uma única página com
GIF (Graphics Information Format), de 11 a 15 ligando para gráficos, 166–167
177, 185–186 HTML5 em dispositivos móveis, de 169 a
navegação global adicionando estrutura, 49–52 170
menus suspensos, 153–156 escolhendo navegadores para visão geral, 166
visão geral, 149–150 interpretar ícones de miniatura, 167–169
usando listas em, 150–153 Safari da Apple, 22–23 Illustrator (Adobe), 194-196
Google Chrome Google Chrome, 19 a 21 imagens
controles de áudio do navegador, Microsoft Internet Explorer, 24 aplicação para SVG dinâmico
201–202 Mozilla Firefox, 18-19 arquivos do Adobe Illustrator
suporte para áudio, 203 Ópera, 21–22 Fichas CS5, 194-196
usando para interpretar HTML5, 19– visão geral, 17 em tela e sombras
21 visualização de exibições, 24–25 adicionando sombras,
Plug-in do Google Earth, 310–311 criando com tags, 8–9 265–267
gradientes, desenho, 279-281 descontinuados, 15–17 filtros, 267–269
aplicações gráficas, modificando elementos, 9–11 carregando imagens, 264–265
tamanho do arquivo de imagem tags de aninhamento, 38–40 criando esquemas de cores de,
com, 182 visão geral, 7, 27 76–77
ícones gráficos, usando na Enviar feedback
navegação, Histórico
165–166 Salvas
Comunidade
ÍNDICE

imagens (continuação) functions, 235 Inserindo em páginas da Web


tamanho do arquivo handling with elements, 237–239 detectando eventos, 236–237
largura de banda, 185 overview, 234 manipuladores de eventos, 236
alterando o tamanho do GIF, 185– integrating sound eff ects into Web arquivos externos, 234–235
186 pages, 211–213 funções, 235
alterando o tamanho do JPEG, 183– interactive data manuseio com elementos,
185 e-mail applications 237–239
alterando o tamanho do PNG, 185– adding headers and autoreply, visão geral, 234
186 342–344 visão geral, 233
Alterar tamanhos de SVG, 186–187 creating, 337–340 exemplos práticos, 170–171, 252
tons de cinza na Internet PHP catch and send, 340–341 armazenando valores temporários
Explorador, 188 overview, 325 matrizes, 248–249
modificando, 182 PHP criando objetos, 250–251
tamanhos de arquivo, 179–181 data validation, 330–332 DOM e objetos do navegador,
tamanho flexível com JavaScript, overview, 328–330 251–252
191–194 $_POST array, 330 objetos, 249-250
formatos, 176 PHP program structures visão geral, 244
GIF (informação gráfica arrays, 334–335 tipos de dados, 245–246
Formato), 177 constants, 333–334 variáveis, 244-245, 246-247
JPEG (Joint Photographic objects, 335–336 JPEG (especialistas em fotografia
Grupo de Peritos), 177 operators, 336–337 conjunta
visão geral, 175, 176 properties, 335–336 Group), 177, 183–185
pixels, 176 temporary data storage,
colocando com o alinhar 332–333 K
atributo, 189-191 variables, 333 Filmadora Kodak Pocket Video,
PNG (rede portátil practice examples, 344 224
Gráficos), 177–178 server-side languages Kuler, 76
exemplos práticos, 196–197 overview, 326
preservando camadas na Web setting up PHP, 326–327
gráficos, 178–179 testing PHP, 327–328 L
reorganização e referenciamento, interface design, 148 atributo lang, 34–35
103–04 Internet Explorer (Microsoft ) idiomas (lado do servidor)
SVG (vetor escalável grayscale on, 188 visão geral, 326
Gráficos), 176–177 support for audio, 203 configurando PHP, 326–327
tag <img>, 44 using to interpret HTML5, 24 testando PHP, 327–328
design de informação, 148 iSight webcams, 223 latitude, achado, 306–307
quadros inline camadas, preservando em gráficos
aninhamento de páginas da Web, da Web,
J 178–179
144–146 Japanese language attribute value,
350 visão geral, 143–144 linhas, desenho, 270–275
34 elemento de link, 128
estilo inline, 58–59 JavaScript
tipos de entrada (formulários) ligando para gráficos, 166–167
calling linked pages with, ligações
caixas de seleção, 297–301 156–158
datalists, 294, 296–297 quadros inline
DOM (Document Object aninhamento de páginas da Web,
selecionador de data, 301–302 Model)
exibindo opções em alerta 144–146
how it works, 240–242 visão geral, 143–144
janelas, 295–296 HTML5 elements, 242–244
atributo de lista, 294 elemento e atributos do link
overview, 239–240 folhas de estilo alternativo,
visão geral, 293–294 flexibility of image size with,
botões de rádio, 297–301 128–131
191–194 atributos de link, 133
Tipo de URL, 294
inserindo JavaScript em páginas da ícones de links, 131–132
Web
detectando eventos, 236–237
manipuladores de eventos, 236
arquivos externos, 234–235
ÍNDICE

visão geral, 128 metadados, adicionando a páginas visão geral, 159–160


pré-busca, 133 da Web, usando ícones gráficos, 165–166
visão geral, 127 87–88 navegação vertical e horizontal, 160
links de páginas Microsoft Internet Explorer visão geral, 147
relações de autor, 135–137 em tons de cinza, 188 exemplos práticos, 170-171
contextos de navegação em suporte para áudio, 203 sites de uma única página com
navegadores, usando para interpretar HTML5, 24 iframes
141–142 Microsoft Movie Maker, 223 iframes em dispositivos móveis,
contextos de navegação no celular Miro Video Converter, 219–220 169–170
navegadores, 142–143 navegador móvel, contextos de ligando para gráficos, 166–167
hierárquico e sequencial navegação visão geral, 166
tipos de links, 137 em, 142–143 ícones de miniatura, 167–169
visão geral, 134 dispositivos móveis usando JavaScript para chamar
âncoras de páginas e IDs, adaptando páginas da Web para, 310 ligado
137–140 elementos de datalista em, 296–297 páginas, 156–158
IDs de página, 137–140 usando iframes on, 169-170 Conceitos de navegação na web
atributo rel, 134 modificando navegação de designer, 148–149
tipos de links sequenciais, 137 Tamanho do arquivo GIF, 185–186 navegação global, 149–156
metas, 140–141 tamanho do arquivo de imagem com visão geral, 148
exemplos práticos, 146 aplicativos gráficos, navegação do usuário, 148–149
Linux, suportado pelo Mozilla 182 & nbsp; código, 40
Firefox, 18 Tamanho do arquivo JPEG, 183– operador de negação (-), 337
atributo de lista, 294 185 tags de aninhamento, 38–40
listas objetos em páginas da Web, 321 aninhamento de páginas da Web,
organizando, 94-98 Tamanho do arquivo PNG, 185–186 144–146
usando na navegação global, Tamanho do arquivo SVG, 186 a Navegador Netscape. veja Mozilla
150–153 187 Firefox atributo novalidate, 286–287
carregando imagens na tela, Páginas da Web para visualização número, 245 351
264–265 em dispositivos móveis
armazenamento local, 316-320 310 O
longitude, encontrando, 306-307 modulo (%) operador, 337 Programação Orientada a Objetos
atributo loop, 227–228 MoMA (Museu de Arte Moderna), (OOP), 251
loop de áudio, 203 148–149 objetos
Mosaico. veja o Mozilla Firefox adicionando em páginas da Web,
M Movie Maker (Microsoft), 223 320
Mac OS X, encontrando o tamanho Mozilla Firefox ajustar em páginas da Web, 321
do arquivo em, 181 suporte para áudio, 203 criando, 250–251
Macintosh usando para interpretar HTML5, definido, 245
consertando o TextEdit em 30 18-19 geolocalização
instalando PHP, 327 operador de multiplicação (*), 337 adaptando páginas para celular
Estúdio de som Macintosh OS X, Museu de Arte Moderna (MoMA), visualização, 310
208–209 148–149 encontrar latitude e longitude,
mapas Muybridge, Eadweard (fi lm 306-307
ficando, 307 fabricante), 106–107 recebendo mapas, 307
colocação em páginas da Web, 307 Plug-in do Google Earth,
atributo de mídia, 133 N 310–311
Media Encoder CS5 (Adobe), atributo de nome, 288–290 visão geral, 306
221–222 nomes para cores, 66–67 colocando mapas em páginas da
menus (drop-down), no global estratégias de navegação Web,
navegação, 153–156 criando consistência 307
tag <meta>, 44, 86, 87-88 aplicando pseudoclasses CSS3, exemplos de prática, 321–322
160–162
Mecânica HTML5 da vertical
navegação, 162–165
ÍNDICE

objetos, geolocalização âncoras de página, 137–140 nidificação, 144–146


(contínuo) atributo rel, 134 organizando
propriedades, 310–311 tipos de links sequenciais, 137 projetando em seções, 91–94
colocando páginas juntas metas, 140–141 figuras e legendas, 100–103
307-309 páginas (Web) arquivos, 103–106
visão geral, 249-250 adaptação para visualização móvel, agrupamento sem fraturar,
PHP, 335–336 310 99–100
Formato de vídeo OGG, 217 adicionando visão geral, 45–47
OOP (programação orientada a metadados para, 87–88 parágrafos, divisões e
objetos), objetos, 320 listas, 94–98
251 adicionando estilo ao texto com exemplos práticos, 106–107
opacidade, aumentando a cor, 74–76 CSS3 parte superior do documento
Ópera folhas de estilo incorporadas, 53–54 HTML5,
suporte para áudio, 203 folhas de estilo externas, 55–58 86–90
usando para interpretar HTML5, estilo inline, 58–59 visão geral, 43
21–22 estilo de elementos HTML5 densidade de pixels, 58
operadores (PHP) com propriedades CSS3, colocando mapas, 307
aritmética, 337 52–53 estrutura de, 47-49
atribuição, 336–337 ajustando objetos, 321 paleta (cor), integrando com
organizando âncoras, 137–140 Páginas da Web, 78–81
legendas, 100–103 chamando com JavaScript, 156–158 parágrafos, organizando, 94-98
paginas web criando código de análise, 28
legendas, 100–103 Classes CSS3, 59-61 Aplicação Photo Booth, 223
projetando em seções, 91–94 IDs de CSS3, 62–63 PHP
divisões, 94–98 visão geral, 216–218, 307–309 adicionando
figuras, 100–103 descrevendo com tags, 32–33 respostas automáticas em, 342–344
arquivos, 103–106 fundamentos de, 44-45 cabeçalhos em, 342–344
agrupamento sem fraturar, Estrutura HTML5, 49–52 matrizes, 334–335
99–100 inserindo JavaScript em pegar e enviar, 340–341
listas, 94–98 detectando eventos, 236–237 constantes, 333–334
visão geral, 45–47 manipuladores de eventos, 236 validação de dados, 330–332
parágrafos, 94-98 arquivos externos, 234–235 operadores
exemplos práticos, 106–107 funções, 235 aritmética, 337
parte superior do documento manuseio com elementos, atribuição, 336–337
352 HTML5, 237–239 resumo, 328–329
86–90 visão geral, 234 Matriz $ _POST, 330
tag <output>, 242 a 244 integrando paleta de cores com, estruturas de programa
78–81 matrizes, 334–335
P integrando som em 211-213 constantes, 333–334
<p> tag, 35, 94-98 ligações objetos, 335–336
âncoras de página, 137–140 relações de autor, 135–137 propriedades, 335–336
IDs de página, 137–140 contextos de navegação no armazenamento temporário de
links de páginas computador dados,
relações de autor, 135–137 navegadores, 141–142 332–333
contextos de navegação no contextos de navegação no celular variáveis, 333
computador navegadores, 142–143 configuração, 326–327
navegadores, 141–142 link sequencial hierárquico teste, 327–328
contextos de navegação no celular tipos, 137 píxeis
navegadores, 142–143 visão geral, 134 densidade de 58
tipos de link hierárquico, 137 âncoras de página, 137–140 visão geral, 176
visão geral, 134 atributo rel, 134
metas, 140–141
ÍNDICE

pixels por polegada (PPI), 58 R tipos de links sequenciais, 137


colocação botões de rádio, 297–301 idiomas do lado do servidor
imagens com atributo de referência visão geral, 326
alinhamento, absoluto, 104 configurando PHP, 326–327
189-191 parente, 104–106 testando PHP, 327–328
mapas em páginas da Web, 307 Tags refrescantes, 88 armazenamento de sessão, 312–316
plug-ins, 310–311 atributo rel configurando
PNG (Portable Network Graphics), atribuindo ícones para, 131-132 para desenhos de tela, 257–258
177–178, 185–186 pré-busca, 133 PHP, 326–327
Atributo da língua portuguesa valores para, 134 definições)
valor, 34 referência relativa, 104–106 extensão de arquivo, 29
Matriz $ _POST, 330 removendo desenhos de lona, hexadecimal, 71–74
atributo de pôster, 226–227 262–264 base inicial em páginas da Web, 86–
sinal de libra (#), 62 Cor RGB 87
PPI (pixels por polegada), 58 configurações hexadecimais, 71–74 Inteiro decimal RGB, 70–71
exemplos práticos nomes, 66–67 Web sites de página única com
áudio, 214 visão geral, 66 iframes
navegadores, 25–26 Percentagens RGB e HSL, 67-69 ligando para gráficos, 166–167
tag <canvas>, 281 Configurações de números inteiros em dispositivos móveis, de 169 a
valores de cor, 81 decimais RGB, 170
formas, 303 70–71 visão geral, 166
geolocalização, 321–322 atributo rowspan, 120–122 ícones de miniatura, 167–169
Tags HTML, 40–41 Valor do atributo do idioma russo, Tamanho
iframes, 170 34 Arquivo
imagens, 196-197 mudando JPEG, 183–185
dados interativos, 344 alterando o tamanho do SVG, 186–
JavaScript, 170 a 171, 252 S 187
links, 146 Safari (Apple). Veja também video encontrando, 181
estratégias de navegação, 170–171 suporte para áudio, 203 tons de cinza na Internet
organizando páginas da Web, 106– usando para interpretar HTML5, Explorador, 188
107 22–23 modificando com gráfico
armazenamento, 321–322 economizando largura de banda, 185 aplicações, 182
tabelas, 125–126 Gráficos vetoriais escaláveis (SVG), visão geral, 179–181
tags, 25–26 175–177, 186–187, 194–196 imagem, 191-194
vídeo, 229–230 captura de tela de vídeo, 225 atributo de tamanhos, 133
Web design, 63–64 Tag <script>, 89–90 Smashing WordPress: Além do
pré-busca, 133 scripts, razões para usar, 89–90 Blog (Hedengren), 325
atributo de pré-carregamento, 202– seções, projetando em, 91-94 som. Veja também video
203, 227 Tag <select>, 153–156 Suporte para Apple Safari, 203 353
visualizando exibições diferentes, selecionando atributo autoplay, 200
24–25 Safari da Apple, 22–23 suporte ao navegador para, 203–204
propriedades Google Chrome, 19 a 21 controles, 200–202
geolocalização, 310–311 microfones no Windows 7 convertendo arquivos, 208
estilizando elementos HTML5 com Gravador de som, 206 criando fi les
CSS3, 52–53 Microsoft Internet Explorer, 24 Macintosh OS X Sound
Mozilla Firefox, 18-19 Estúdio, 208–209
Ópera, 21–22 visão geral, 206
Q visão geral, 17
Jogador do QuickTime (Apple), 225 Gravador de Som do Windows 7,
“Autossuficiência” (Emerson), 159 206–207
ponto e vírgula (;), 40 loop, 203
visão geral, 199-200
exemplos práticos, 214
atributo de pré-carregamento, 202–
203
ÍNDICE

som (continuação) estilo inline, 58–59 controles, 200–202


efeitos sonoros estilo de elementos HTML5 convertendo arquivos, 208
integrando em páginas da Web, com propriedades CSS3, criando arquivos, 206–209
211-213 52–53 loop, 203
visão geral, 209 folhas de estilo visão geral, 199-200
transições de sons, 209–211 alternativo, 128–131 exemplos práticos, 214
tag <source>, 204 incorporado, 53–54 atributo de pré-carregamento, 202–
tag <source> externo, 55–57 203
parâmetro do codex, 205–206 usando com navegadores diferentes, efeitos sonoros, 209–213
visão geral, 204 130 tag <source>, 204
atributo type, 204–205 tag <style>, 52–53 <base>, 86–87
elemento de extensão, 54 mesas de estilização <body>, 32–33, 86
Valor do atributo do idioma adicionando bordas com CSS3, <br>, 45–46
espanhol, 34 114–117 <canvas>
vãos (tabela), 122–125 esclarecimento de dados com fundo adicionando estilos, 262–264
atributo src, 44, 226 cores, 117–119 criando desenhos, 258-260,
armazenamento operador de subtração (-), 337 269–281
local, 316-320 SVG (Scalable Vector Graphics), grade, 256–257
visão geral, 311–312 175–177, 186–187, 194–196 imagens, 264–269
exemplos de prática, 321–322 Conversor de arquivo de som de implementação, 256
sessão, 312–316 comutação, 208 visão geral, 253–256
dados temporários, 332–333 exemplos práticos, 281
armazenando valores temporários T Removendo Desenhos, 262–264
matrizes, 248–249 tabelas scripts, 89–90
criando objetos, 250–251 complexo criação de desenhos, 257–258
DOM e efeitos do navegador, atributo colspan, 120–122 transparência, 74
251–252 visão geral, 120 trabalhando com vários desenhos,
objetos, 249-250 atributo rowspan, 120–122 260–262
visão geral, 244 Propriedades da tabela CSS3 para <legenda>, 113–114
tipos de dados, 245–246 HTML5, 110–112 <center>, 16–17
variáveis, 244-245, 246-247 elementos, 113 <comentário>, 35–38
aula de história, 110–112 visão geral, 109 criando, 8–9
streaming de vídeo, 215 vãos práticos, 122–125 descontinuado, 15–17
seqüência de caracteres, 245 exemplos práticos, 125–126 <div>, 94–98
354 estrutura estilo <figcaption>, 100–103
HTML5, 49–52 adicionando bordas com CSS3, <figure>, 100–103
Programa PHP 114–117 <form>, 242–244
matrizes, 334–335 esclarecimento de dados com fundo <cabeça>, 32, 86
constantes, 333–334 cores, 117–119 <hgroup>, 50–52
objetos, 335–336 dados tabulares, 109, 112–114 como eles trabalham
propriedades, 335–336 dados tabulares tag HTML básica, 32
armazenamento temporário de definido, 109 tag de comentário, 35–38
dados, visão geral, 112–114 descrevendo páginas com tags,
332–333 Tag 32–33
variáveis, 333 <a>.Ver links identificando partes de tags,
Página da Web, 47–49 <audio> 33–34
estilo Suporte para Apple Safari, 203 atributo de idioma, 34–35
adicionando aos desenhos de tela, atributo autoplay, 200 visão geral, 31
262–264 suporte ao navegador para, 203–204 <hr>, 99–100
adicionando ao texto com CSS3 <html>, 86
folhas de estilo incorporadas, 53–54 HTML4, 11–15
folhas de estilo externas, 55–58
ÍNDICE

<img>, 44 TextEdit, fixando em Macintosh, 30 objetos, 249-250


<meta>, 44, 86, 87-88 Formato de vídeo 3GP, 217, 221– visão geral, 244
aninhamento, 38–40 222 tipos de dados, 245–246
<output>, 242–244 ícones de miniatura, 167–169 variáveis, 244-245, 246-247
visão geral, 27 Tidwell, Jennifer (autor) variáveis
<p> 35, 94-98 Projetando Interfaces, 148 visão geral, 244–245
código de análise trabalhar em agrupar elementos, PHP, 333
consertando o TextEdit no 159–160 tipos de, 246–247
Macintosh, atributo de título, 133 barra vertical (|), 40
30 tag <tr>, 14 navegação vertical
consertando o arquivo padrão do sons de transição, 209–211 Mecânica de HTML5 de 162–165
Windows transparência, adicionando à cor, visão geral, 160
configurações de extensão, 29 74–76 vídeo. Veja também audio
como os arquivos funcionam com a Tufte, Edward (design de atributo de reprodução automática,
Web, 31 informação 228
HTML5 e arquivos relacionados, 28 pensador), 114–115, 148 compatibilidade do navegador
visão geral, 28 atributo de tipo, 133, 204–205 Adobe Media Encoder CS5,
exemplos práticos, 25–26, 40–41 221–222
refrescante, 88 U visão geral, 218–219
<script>, 89–90 Teclados de URL, elementos de WebM Miro Video Converter,
<selecionar>, 153–156 datalista 219-220
<source> em, 296–297 atributo de controles, 228–229
parâmetro do codex, 205–206 Tipo de URL, 294 criando para a Web
visão geral, 204 navegação do usuário, 148–149 filmadoras, 223–224
atributo type, 204–205 visão geral, 222
<style>, 52–53 captura de tela de vídeo, 225
<tr>, 14 V webcams, 223
<video> valores criando páginas da Web com,
atributo de reprodução automática, atribuindo ao atributo de pré- 216–218
228 carregamento, atributo de altura, 229
compatibilidade do navegador, 202–203 atributo loop, 227–228
218–222 definido, 33 visão geral, 215, 225
atributo de controles, valores (cor) atributo de pôster, 226–227
228–229 adicionando transparência à cor, exemplos práticos, 229-230
74–76 355
criando para Web, 223–225 atributo de pré-carregamento, 227
criando páginas da Web com, criação de esquemas de cores, 74–78 atributo src, 226
216–218 integrando paletas de cores com atributo de largura, 229
atributo de altura, 229 Páginas da Web, 78–81 tag <video>. Veja video
atributo loop, 227–228 exemplos práticos, 81
visão geral, 215, 225 Cor RGB
configurações hexadecimais, 71–74 W
atributo de pôster, 226–227 W3C (World Wide Web
exemplos práticos, 229-230 nomes, 66–67
visão geral, 66 Consortium),
atributo de pré-carregamento, 227 nas mesas, 110
atributo src, 226 Percentagens RGB e HSL,
67–69 tag <wbr>, 45–46
atributo de largura, 229 Rede
<wbr>, 45–46 Configurações de números inteiros
decimais RGB, filmadoras, 223–224
atributo de meta, 140–141, 290 criando vídeo para
armazenamento temporário de 70–71
valores (temporário), armazenando visão geral, 222
dados, 332–333 webcams, 223
testando PHP, 327–328 matrizes, 248–249
criando objetos, 250–251 design, 63–64
texto, adicionando estilo ao arquivos para, 31
folhas de estilo incorporadas, 53–54 DOM e efeitos do navegador,
folhas de estilo externas, 55–58 251–252
estilo inline, 58–59
estilizando elementos HTML5 com
Propriedades CSS3, 52–53
ÍNDICE

Web (continuação) Estrutura HTML5, 49–52 visão geral, 45–47


conceitos de navegação inserindo JavaScript em parágrafos, divisões e
navegação de designer, 148–149 detectando eventos, 236–237 listas, 94–98
navegação global, 149–156 manipuladores de eventos, 236 exemplos práticos, 106–107
visão geral, 148 arquivos externos, 234–235 parte superior do documento
navegação do usuário, 148–149 funções, 235 HTML5,
preservando camadas em gráficos, manuseio com elementos, 86–90
178–179 237–239 visão geral, 43
captura de tela de vídeo, 225 visão geral, 234 densidade de pixels, 58
paginas web integrando paleta de cores com, colocando mapas, 307
adaptação para visualização móvel, 78–81 estrutura de, 47-49
310 integrando som em 211-213 Cores “Web safe”, 177
adicionando ligações Web sites, página única com
metadados para, 87–88 relações de autor, 135–137 iframes
objetos, 320 contextos de navegação no ligando para gráficos, 166–167
adicionando estilo ao texto com computador em dispositivos móveis, de 169 a
CSS3 navegadores, 141–142 170
folhas de estilo incorporadas, 53–54 contextos de navegação no celular visão geral, 166
folhas de estilo externas, 55–58 navegadores, 142–143 ícones de miniatura, 167–169
estilo inline, 58–59 link sequencial hierárquico webcams, 223
estilo de elementos HTML5 tipos, 137 Formato de vídeo WebM, 217, 219–
com propriedades CSS3, visão geral, 134 220
52–53 âncoras de página, 137–140 atributo de largura, 229
ajustando objetos, 321 atributo rel, 134 janelas
âncoras, 137–140 metas, 140–141 encontrando o tamanho do arquivo
chamando com JavaScript, 156–158 nidificação, 144–146 em, 181
criando organizando fixar configurações de arquivo
Classes CSS3, 59-61 projetando em seções, 91–94 padrão, 29
IDs de CSS3, 62–63 figuras e legendas, 100–103 instalando PHP, 327
visão geral, 216–218, 307–309 arquivos, 103–106 Microsoft Movie Maker, 223
descrevendo com tags, 32–33 agrupamento sem fraturar, Gravador de Som do Windows 7,
fundamentos de, 44-45 99–100 206–207
Consórcio World Wide Web
356 (W3C), nas tabelas, 110
função write (), 235