A LINGUAGEM DE MARCACAO

QUE REVOLUCIONOU A WEB

Maurício Samy Silva

N o vate c
HTML5
A LINGUAGEM DE MARCACÃO
QUE REVOLUCIONOU A WEB

Maurício Samy Silva

Novatec
HTML5
A LINGUAGEM DE MARCACÃO
QUE REVOLUCIONOU A WEB

Maurído Samy Silva

Novatec
- ••yright £" 2011 da Novatec Editora Ltda.

Truos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998.

- proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorizaçã
por escrito, do autor e da Editora.

Editor: Rubens Prates

Capa: Carolma Kuwabata
Revisão gramatical: Débora Facin
Editoração eletrônica: Camila Kuwabata e Carolina Kuwabata

ISBN: 978-85-7522-261-4

Histórico de impressões:

Fevereiro/2013 Terceira reimpressão

Maio/2012 Segunda reimpressão
Novembro/2011 Primeira reimpressão
Julho/2011 Primeira edição

Novatec Editora Ltda.

Rua Luís Antônio dos Santos 110
02460-000 - São Paulo, SP - Brasil
Tel.: +55 11 2959-6529
Fax: +55 11 2950-8869
E-mail: [email protected]
Site: www.novatec.com.br
Twitter: twitter, com/novateceditora
Facebook: facebook.com/novatec
Lmkedln: linkedin.com/in/novatec
Dados Internacionais de Catalogação na Publicação (CIP)
(Câmara Brasileira do Livro, SP, Brasil)

Silva, Maurício Samy

HTML 5 / Maurício Samy Silva. -- São Paulo :
Novatec Editora, 2011.

Bibliografia.
ISBN 978-85-7522-261-4

i. HTML (Linguagem de programação para

Internet) 2. internet (Rede de computadores)
3. Websites - Desenvolvimento I. Título.

11-06541 CDD-005.133

índices para catálogo sistemático:

1. HTML : Linguagem de programação para

Internet : Desenvolvimento de sites : Ciência
da computação 005.133
VC20130221
Sumário

-g ra d e c im e n to s ........................................... . 12

lenção de responsabilidade.................. ......................................................................... 12

Abre o autor............................................................................................................... 13

'T r o d u ç ã o ................................................................................................................... 15

õpítulo 1 ■ Apresentação da H TM L5............................................................................. 20

11 Introdução................................................. 20
1.2 Histórico.................................................................................................................... 22
1.3 Criação da H TM L5.................................................................................................26
1.4 Estrutura da especificação para a H TM L5....... •............................................... 27
1.5 Princípios de desenvolvimento da H TM L5..................................................... 28
1.5.1 Compatibilidade.............................................................................................. 28
1.5.2 Utilidade............................................................................................................ 32
1.5.3 Interoperabilidade.......................................................................................... 34
1.5.4 Acesso universal................................... 35
1.6 Diferenças entre HTML5 e H T M L 4........... .......................................................36
1.6.1 Introdução......................................................................................................... 36
1.6.2 Sintaxe................................................................................................................37
1.7 A HTML5 nos navegadores atuais...................................................................... 39
1.7.1 Os novos elementos e o Internet Explorer.............. 39
1.7.2 Os novos elementos e o modelo de renderização.................................... 40
1.7.3 Biblioteca JavaScript Modermzr..................................................................40
1.8 Templates H T M L 5.................................................................................................. 42
1.8.1 Template m ínim o......................... 46
1.8.2 Template HTML5 - versão 1 ........................................................................48
1.8.3 Template HTML5 - versão 2 ................................................ .......................49
1.8.4 Template XHTML5 - versão 1 ..................................................................... 50
1.8.5 Template XHTML5 - versão 2 ..................................................................... 51
1.8.6 Template XHTML5 - versão 3 .....................................................................52

Apífulo 2 ■ Novidades na 54
2.1 Introdução..................................................................................................................54
2.2 Modelo de conteúdo................................. 54
 HTML 5

2.3 Atributos globais..................................................................................................... 56

2.3.1 accesskey................................................................... 56
23.2 class................................................................................................................. 57
2.3.3.contenteditable................................................................................................. 57
2.3.4 contextmenu.....................................................................................................58
2.3.5 d ir....................................................................................................................... 59
2.3.6 draggable...................................... 59
23.7 hidden................................................................................................................60
23.8 i d ................................. 60
2.3.9 item*.................................................................................................................. 61
2.3.10 lang............................................................................... 61
2.3.11 spellcheck......................................................................................................... 61
23.12 style...................................................................................................................62
23.13 tabindex.......................................................................................................... .62
2.3.14 tide.................................................................................... 62
2.4 Novos elementos...................................................................................................... 62
2.4.1 article........................................................................ 62
2.4.2 aside.................................................................................................................... 63
2.4.3 audio...................................................................................................................64
2.4.4 canvas..................................................................................................... 64
2.4.5 command......................................................................... :............................. 64
2.4.6 menu................................................................................................................... 65
2.4.7 datalist............................................................................................................... 67
2.4.8 details..................................................................................................... 68
2.4.9 summary................................................................... 69
2.4.10 figure.................................................................................................................. 70
2.4.11 figcaption...........................................................................................................70
2.4.12 footer................................................................................................................. 71
2.4.13 header........................... 73
2.4.14 hgroup.......................................... 74
2.4.15 keygen................................................................................................................75
2.4.16 m ark.................................................................................................................. 75
2.4.17 meter.................................................................................................................. 76
2.4.18 nav.............................................. 77
2.4.19 output................................................................................................................ 78
2.4.20 progress............................................................................................................80
2.4.21 ruby.................................................................................................................... 81
2.4.22 section..................................... 81
2.4.23 source................................................................................................................ 82
2.4.24 tim e....................................................................................................................82
2.4.25 track...................................................................................................................83
2.4.26 video................................................................................................................. 83
jTiano 7

apítulo 3 « Audios vídeo. .8 4

3.1 audio....................................... 84
3.2 video..................................... .91
3.2.1 track.............................. 99
3.2.2 Codificação de vídeos 101
3.3 API para áudio e vídeo...... 113
3.3.1 Atributos...................... 115
3.3.2 M étodos...................... 123
3.3.3 Eventos......................... 124

rpítulo 4 ■ Canvas.... 140

-.1 Canvas.................. 140
4.1.1 API de canvas 144

spítulo 5 « Atributos HTML... 171

5.1 Atributos globais.............................................................. 171
5.1.1 accesskey.................................................................... 171
5.1.2 class............................................................................ 173
5.1.3 contenteditable........................................................ 173
5.1.4 contexmenu............................................................... 174
5.1.5 d ir ............................................................................... 174
5.1.6 draggable.................................................................. 175
5.1.7 dropzone................................................................... 176
5.1.8 hidden....................................................................... 176
5.1.9 id ................................................................................. 177
5.1.10 itemid, itemprop, itemref, itemscope, itemtype. 178
5.1.11 lang............................................................................ 178
5.1.12 spellcheck............................................................... 178
5.1.13 style........................................................................... 179
5.1.14 tabindex.................................................................. 179
5.1.15 title........................................................................... 180
5.2 Novos atributos............................................................... 180
5.2.1 async.......................................................................... ,181
5.2.2 autocomplete.........1............................................... .181
5.2.3 autofocus................................................................. .181
5.2.4 autoplay e controls................................................ 182
5.2.5 challenge................................................................. 182
5.2.6 default...................................................................... 182
5.2.7 dirname.................................................................... 183
5.2.8 form .......................................................................... 183
5.2.9 formaction............................................................... 183
5.2.10 formenctype.......................................................... 183
5.2.11 formmethod........................................................... 184
5.2.12 formnovalidate..................................................... 184
8

5.2.13 formtarget
5.2.14 icon...........
5.2.15 keytype ....
5.2.16 kind ..........
5.2.17 list.............
5.2.18 lo o p ..........
5.2.19 low...................................................................................................................IS-
5.2.20 manifest........................................................................................................19“
5.2.21 max..................................................................................................................18“
5.2.22 m in ...............................................................................................................
5.2.23 novalidate....................................................................................................IS 5
5.2.24 open........................................................................ '
5.2.25 optimum...................................................... ...............................................IS S
5.2.26 pattern..........................................................................................................18 S
5.2.27 ping................................................................................................................ 189
5.2.28 placeholder...................................................................................................189
5.2.29 poster........................................................................................................ 190
5.2.30 preload.......................................................................................................... 190
5.231 pubdate.......................................................................................................... 190
5.2.32 radiogroup.................................................................................................... 190
5.2.33 required..........................................................................................................191
5.2.34 reversed...................... 191
5.2.35 sandbox......................................................................................................... 192
5.2.36 scoped............................................................................................................193
5.2.37 seamless......................................................................................................... 193
5.2.38 sizes....................................................... 194
5.2.39 srcdoc.............................................................................................................194
5.2.40 srclang................................................ 195
5.2.41 step..................................................................................................................195
5.2.42 wrap................................................................................. 195

Capítulo 6® F o r m u l á r i o s . .... ..... .... ................................................................................ 196

6.1 Introdução................................................................................................................ 196
6.2 Atributos..................................................................................................................197
6.2.1 placeholder .................................................................................................... 198
6.2.2 autofocus.................. 198
6.2.3 required........................................................................................................... 198
6.2.4 autocomplete..................................................................................................199
6.2.5 dirname...........................................................................................................200
6.2.6 form ............................................................................................ 201
6.2.7 formaction....... ..............................................................................................202
6.2.8 formenctype.................................................................................................. 202
6.2.9 formmethod....................................................... 202
6.2.10 formnovalidate............................... ..203
 9

■I 7_ wrmtarget................................. 203
■ ___ i s t ...................................................... 204
■1.1: max............................................ 204
: 11- a im ............................................ 204
■1.15 novalidate................................ 205
rtbnto type para elemento input 205
- :1 search........................................... 205
.206
.207
em ail................ .208
date tim e.......... .209
:.3a date.................. .209
7 tim e.................. . 210
-.1.5 m onth.............. . 210
: .3.9 week................. ..211
:.5.10 datetime-local ..2 1 1
'.5.11 number........... . 212
:.5.12 range............... . 212
'.3.13 color................ . 213

: : : w o 7 q Geolocalização............................................. ................... ... .. . . . . . . . . . . . . . . . . . . . . . ............... ..........2 1 4

” 1 Introdução.................................................................................................................214
M Segurança e privacidade................................................................. 215
~ - Interface Geolocation.............................................................................................216
- - Métodos do objeto geolocation............................................................................217
74.1 getCurrentPosition(callback sucesso, callback erro, {opções posição})217
74.2 watchPosition(callback sucesso, callback erro, {opções posição}) ...223
” 5 Google Maps A P I.................................................................................................. 224
75.1 Introdução....................................................................................................... 224
7.5.2 API do Google Static M aps.........................................................................224
7.5.3 API V3 do Google Maps.............................................................................. 229

1: pitulo 8 * Armazenamento de dados ... .... ..... .... ..... .... ..... .... ..... .... ..... .... ..... .... ..... .... ..2 3 3
5.1 Web Storage..............................................................................................................233
8.1.1 sessionStorage................................................................................................. 235
8.1.2 localStorage..................................................................................................... 237
8.1.3 Armazenagem com JS O N ............................................................................241
8.1.4 Evento storage................................................................................................244
8.1.5 Banco de dados............................................................................................. 246
3.2 Verificando suporte...............................................................................................251

Capítulo 9 ■ APIs para comunicação......................................................................................... ..................25 2

9.1 Web Messaging........................................................................................................252
9.2 Web Socket............................................................................................................. 258
10 HTML 5

9.2.1 Propriedades e métodos.............................................................................. 260

9.2.2 Eventos.............................................................................................................261
9.3 Web Workers.......................................................................................................263

Capítulo 10 ■ Offline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7 5
10.1 Introdução..............................................................................................................275
10.2 Manifesto...............................................................................................................276
10.2.1 Atualização do manifesto..........................................................................278
10.3 API Application cache........................................................................................ 279
10.3.1 Propriedades e métodos............................................................................. 280
10.3.2 Eventos.......................................................................................................... 281
10.3.3 Atualizando o cache...................................................................................283
10.4 Verificando suporte............................................................................................. 284
10.5 Exemplo prático ............ 284

Capítulo 1 1 » Acessibilidade................. ..... .... ..... .... ..... .... ..... .... ..... .... ..... .... ..... .... ..... .... ..2 8 7
11.1 WAI-ARIA.............................................................................................................. 287
11.1.1 Role..................................................................................................................288
11.1.2 Atributos....................................................................................................... 294
11.2 Microdados...........................................................................................................297
11.2.1 Sintaxe............................................................................................................298
11.3 Microdados DOM A P I........................................................................................30Í
11.3.1 Suporte nos navegadores............................................................................ 302

Apêndice  ■ Elementos da HTML5 .......„.„.„...„.„„.„..„........„„„„....„.....„..„.,......„„...„...........„...303

Apêndice B * Atributos da HTML5..........,...„..,,........„.„..,„„,„.....„.„„..„.„„...„......„„„,.„.„........„„.307

Apêndice C ■ Atributos para eventos da HTML5 ....„................„......„........„.„...„„„„„.„....„.....„311

Referências .........„.......„....„...„..„..„„.....„„„„„.„„.„„„..„...„...„.„„„„.„„.„.„.„„....„„„„.......„„„„„„....„.„.......314

índice remissivo 315

Ao meu neto, Leonardo, e aos seus pais, Carol e Rogério.
Agradecimentos

Agradeço a Deus, por ter me dado forças, disposição e motivação para escrever este
livro.

Sou grato aos profissionais da Novatec Editora, em particular ao editor, Rubens

Prates, que, ao longo de todo o processo de criação, esteve presente guiando-me com
suas dicas e informações sobre as particularidades e implicações editoriais próprias
à criação de um livro.

Meu maior agradecimento é a você, leitor, por interessar-se em aprender HTML5

e honrar-me com a leitura deste livro.

Isenção de responsabilidade

Todos os esforços foram feitos para assegurar o fornecimento de informações as

mais precisas, completas e exatas possíveis neste livro. Contudo, tais informações
são fornecidas “como estão” e sem nenhuma garantia, seja expressa, seja implícita. O
autor, a editora, os distribuidores e qualquer entidade envolvida direta ou indireta­
mente na sua comercialização não assumirão responsabilidade alguma por eventual
prejuízo ou dano, direto ou indireto, consequente aos dados contidos neste livro.

12
 A

:*ore o autor

■cio Samy Silva é graduado em Engenharia Civil pelo Instituto Militar de

... nharia (IME). Fundador e ex-diretor-presidente da Planep Engenharia, exer-
. . r o magistério paralelamente à Engenharia, foi, ao longo de 25 anos, professor
. Geometria Descritiva e Matemática. Seu primeiro contato com programação
: ara computadores deu-se ainda na graduação, ao aprender a linguagem Fortran.
quela época, era comum passar noites trabalhando em uma máquina perfuradora
;.e cartões que seriam processados em um poderoso IBM/360. Em 1982, adquiriu
;eu primeiro computador pessoal, u m T K -80 com processador Z-80A de 3,25MHz,
teclado de membrana com 40 teclas e memória RAM de 1KB expansível até 16KB.
Trabalhou com os modelos TK-82, TK-85, TK-2000, DGT-100 e assim por diante,
até os dias atuais.

Sua experiência com desenvolvimento de sites iniciou-se em 1999, com o

FrontPage, considerada uma ferramenta sensacional na construção de sites. Em 2002,
por acaso, teve seu primeiro contato com o site do W 3C e, como ficou vivamente
impressionado com a proposta desse consórcio, começou a pesquisar e a estudar as
Web Standards, tendo como fonte de consulta o material publicado na internet em
língua inglesa. Ao contrário do que ocorre nos dias atuais, em que vários desenvol­
vedores escrevem em blogs pessoais sobre Web Standards, a literatura a respeito do
assunto em português era, então, praticamente nula, mas, mesmo assim, quando
encontrada, limitava-se ao básico do básico.

No segundo semestre de 2003, estimulado pela completa falta de material de

consulta gratuita na internet e impulsionado por sua veia de educador desenvolvida
durante anos em sala de aula, decidiu lançar o site CSS para Web Design, o qual é
nacionalmente conhecido como o site Maujor, hospedado em http://www.mau 30r . c 01n/. A

proposta inicial do site era divulgar a Cascading Style Sheet (CSS), ou folha de estilo
em cascata, com base no compartilhamento de suas experiências com tal técnica.
Com a pronta aceitação e o sucesso crescente do site, o objetivo inicial tornou-se
mais ambicioso e passou a ser a divulgação das Web Standards.

13
 HTML 5

No início de 2006, com a popularização e a adesão maciça aos blogs, criou o Blog
do Maujor, hospedado em http://www.niaujor.com/blog/, com o propósito semelhante ao
do site, mas com uma dinâmica mais ativa e a efetiva participação de seus leitores.

Tanto o site quanto o blog constituem referência nacional para Web Standards e,
sem dúvida, foram e continuam sendo um dos grandes responsáveis pela divulgação
e popularização das Web Standards, assim como, em particular, das CSS no Brasil.

Maujor, como é conhecido o autor, é ainda um ativo frequentador de fóruns,

escreve para vários portais brasileiros voltados a desenvolvedores web, é autor de
artigos em inglês e de trabalhos relacionados às CSS publicados em sites internacio­
nais sobre Web Standards. Ocupa o segundo lugar na lista de tradutores mundiais
de documentos do W 3C por quantidade de documentos versados. Publicou em seu
site mais de 40 traduções de artigos sobre Web Standards escritos por consagra­
dos autores internacionais. Traduziu para o português as ferramentas para testes
de acessibilidade em sites, denominadas analisador de contraste de cores e barra
de ferramentas para acessibilidade na web, ambas em parceria com o WAT-C, um
consórcio australiano voltado ao desenvolvimento de ferramentas destinadas a
testes de acessibilidade.

M aujor é autor dos seguintes livros: Construindo sites com CSS e (X)HTML; Criando
sites com HTML; JQuery - A biblioteca do programador JavaScript; AJAX com jQuery;
JavaScript - Guia do Programador; CSS3 - Desenvolva aplicações web profissionais com uso dos
poderosos recursos de estilização das CSS3; jQuery Mobile; e. jQuery UI, todos publicados
pela Novatec Editora.
 •trodução

: '.era o objetivo de fornecer aos profissionais envolvidos no desenvolvimento

: os conceitos fundamentais para a criação de sites e aplicações com uso
mugem de marcação HTML5. Trata-se de um livro pioneiro que mostra e
,:r.;a as funcionalidades dessa linguagem de marcação e pretende fornecer
: uma visão do estágio em que se encontra a especificação.

: uri 11 capítulos e apêndices. Os capítulos foram estruturados de modo que a

: : u consulta ao livro possa ser feita de acordo com o capítulo que interessa,
r.e o entendimento do capítulo anterior seja pré-requisito para a compreensão
.títulos posteriores.

: r a quem foi escrito este livro

uvro destina-se a pessoas envolvidas na criação de sites tanto na área de design
: :t:o na de desenvolvimento e programação, com conhecimento da linguagem
.1. e noções básicas de JavaScript.

u objetivo é fornecer informações detalhadas do funcionamento da linguagem,

i udando seus elementos e atributos, bem como apresentar as AP Is que dela fazem
. ::e ou estão relacionadas. Explicações teóricas em linguagem corrente e clara,
:. 'oensando, sempre que possível, o jargão técnico avançado, são acompanhadas de
.-mplos práticos explicados passo a passo e complementados por arquivo HTM L
■ Y; consulta, disponíveis online no site do livro em h t t p : / / l iv r o h t m l5 .c o m .b r e também

: .ira download para consulta local.

Para tirar o máximo proveito dos ensinamentos contidos em cada capítulo, é

: ;e-requisito razoável conhecimento da linguagem de marcação HTM L, de CSS e
:.e JavaScript.

Os iniciantes irão se beneficiar deste livro por principiarem seus estudos em uma
innte que aborda as mais modernas técnicas de escrita do código, ensejando uma
mudança no rumo de seu estudo que irá reduzir a curva de aprendizado e acelerar

15
1c HTML 5

tal processo. Não se intimide com conceitos ou terminologias que lhe sejam com­
pletamente desconhecidos nos primeiros capítulos. Com a sequência da leitura, as
dúvidas tenderão a desaparecer naturalmente.

Convenções tipográficas
Com a finalidade de destacar diferentes tipos de informação, adotaram-se algumas
convenções tipográficas mostradas a seguir.

Dica

Texto contendo uma dica sobre o assunto tratado:

C< No mês de outubro de 1994, Tim Berners-Lee em parceria com a CERN, onde a web
j -, foi por ele inventada, criaram o World W ide Web Consorrium (W 3C ), com sede no
Laboratório da Ciência da Computação do Massachusetts Institute of Technology
(M1T).

Alerta

Texto contendo um lembrete sobre procedimento extra em relação ao assunto

tratado:

Os atributos da AP1 não são definitivos. Uns poderão ser abandonados; outros,
acrescidos, pois as especificações para a HTM L5 estão em fase de rascunho. Os
■; atributos aqui mostrados são atualmente previstos na especificação, mas não significa
que podemos usá-los indiscriminadamente em fase de produção.

Terminologia

Texto estabelecendo a adoção de grafia-padrão em todo o livro para termos ou frases

com mais de uma terminologia, tradução ou significado:

O termo inglês browser é usado no jargão da internet para designar um programa

capaz de ler e apresentar ao usuário os conteúdos de um documento web escrito
em linguagem de marcação. Browser vem do verbo to browse, que significa folhear.

Chamada

Uma chamada para uma seção anterior na qual o assunto em questão foi explicado
com detalhes.
 17

::í:nplo: Outra funcionalidade importante da biblioteca é que ela agregou

: aesenvolvido por Remy Sharp e mostrado no item 1.1.8 que faz com que o
. : : r Internet Explorer...

. exemplo, a chamada é para a seção 1.1.8 do capítulo 1.

scripts

" meações e scripts que exemplificam a teoria, transcreveram-se somente os

■ t que interessam ao assunto tratado. Omitiram-se os trechos que não dizem
ou não são relevantes ao entendimento do assunto, para não ocupar espaço
■-tessário no livro.

* Blocos de marcação são marcados com fonte monoespaçada:

<article>
<hl>Pequenas tarefas</hl>
<footer>Publicado em <tiine pubdate>05/02/2011</time>.</footer>
<p>Trocar a lâmpada da sala da sala.</p>
</article>

■ Trechos de marcação que merecem destaque são marcados em negrito:

<div contenteditable="true">
<p s p e l l c h e c k = " t r u e " >
Conteúdo editável a ser verificado pelo corretor ortográfico
</p>
</div>

Para explicar passo a passo cada linha de um script, este é apresentado com
aas linhas numeradas e, a seguir, os comentários são referenciados ao número da
inha comentada:

1. < scrip t typ e = "te xt/ja va s c rip t">

2. fu nctio n i d ( i d ) {
3. return doc ument.getElementByld(id);
4. }
5. fu nctio n i n i t () {
6. var container = i d ( ' f u n d o - c o n t r o l e s ' ) ;
7. var c t r = i d ( ' s o m ' ) ;
8. var play = i d ( ' p l a y ' ) ;
9. var pause = document.g etEle m en tB yId('p au se ');
10 . var vmais = docum en t.g etElem entB yld('vm ais');
IS HTML 5

Código comentado:

Linha(s) Descrição

Linha 2 a 4 Cria a função id() quesimplificaasintaxeparadocument.getElementById().

Linhas 5 a 31 Cria a função init() que contém o script a ser executado depois que
a página é carregada. Na linha 32 chama-se essa função no evento
onload.

Linhas 6 a 11 Cria variáveis para armazenar os elementos do DOM que serão

manipulados pelo script.

Arquivos para download

Os códigos dos exemplos mostrados no livro estão disponíveis para download e/

ou consulta on-line no site do livro, em h ttp.7/iivro htm i5 .co m .br. Os documentos estão
separados em pastas por capítulos e foram nomeados com sintaxe própria, conforme
o exemplo a seguir:
c3-a u d io -e x l.h tm l

Esse é um arquivo do capítulo 3 contendo o primeiro exemplo demonstrativo

de uso do elemento audio.

Adicionalmente, no final do script, há uma indicação do arquivo em que foi

inserido, conforme convenção mostrada no exemplo a seguir:
caudio controls>
<source src="som.ogg" type="audio/ogg">
<source src="som.mp3" type="audio/mpeg">
<source src="som.wav" type="audio/wave''>
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href="som.mp3">download de som.mp3</ax/p>
</audio>

[c3-audio-ex1.html]

Destaques em geral

Palavras ou termos cujo significado deva ser destacado são grafados em itálico.

Por exemplo:

A presença do atributo Controls faz com que o navegador renderize uma barra de
controle nativa contendo botões do tipo play e pause bem como controle de volume.
- :;dução 19

"laveis

lores variáveis em códigos são grafados em itálico.

Por exemplo:
addírack( tipo, legenda, idioma)

Site do livro
j site de suporte a este livro está localizado em http ://livro h tm i5 .c o m .b r.

No site, incluíram-se as facilidades relacionadas a seguir.

■ Arquivo de códigos: os códigos dos exemplos mostrados no livro estão disponíveis

tanto para consulta online quanto para download.

■ Errata: efetuou-se um exaustivo trabalho de revisão tipográfica. Contudo, a

prática mostra que nenhum livro está isento de erros - e com este não há de
ser diferente. Uma página do site dedicada à errata encontra-se disponível
para consulta.

« Feedback: incentivam-se vivamente os leitores a emitir opinião sobre qualquer

aspecto do livro. Serão de grande valia informações sobre qualquer erro
detectado para aperfeiçoar futuras edições e atualizar a errata. Você pode se
comunicar com a editora pelo e-mail [email protected] ou diretamente com
o autor pelo e-mail [email protected].
 Apresentação da HTML5

Neste capítulo, será apresentada a linguagem de marcação HTML5, relatando-se

suas origens, finalidades e destinação. Será feito um breve relato histórico de sua
evolução, examinando as motivações que resultaram na sua criação, a filosofia que
norteia o desenvolvimento das especificações para a linguagem e as principais di­
ferenças conceituais para as versões anteriores da linguagem HTML.

1 .1 Introdução
H TM L é a sigla em inglês para HyperText Markup Language, que, em português, sig­
nifica linguagem para marcação de hipertexto.

O conceito de hipertexto admite um sem-número de considerações e discus­

sões que fogem ao escopo deste livro. Para o bom entendimento das definições,
podemos resumir hipertexto como todo o conteúdo inserido em um documento
para a web e que tem como principal característica a possibilidade de se interligar
a outros documentos da web. O que torna possível a construção de hipertextos são
os links, presentes nas páginas dos sites que estamos acostumados a visitar quando
entramos na internet.

Desde a invenção da web porTim Berners-Lee, a H TM L evoluiu por oito versões

que são:

■ HTM L

■ H TM L +

■ H TM L 2.0

20
 : : j Io 1 ■ Apresentação da HTML5

■ HTM L 3.0

i H TM L 3.2

. H TM L 4.0

■ HTM L 4.01 (versão atual)

■ HTM L5 (versão em fase de desenvolvimento)

Tecnicamente, o W 3 C considera oficialmente somente as versões HTM L 2.0, H TM L

3.2, H TM L 4.0, H TM L 4.01 e HTML5. As versões H TM L e HTM L+ são anteriores
à criação do W 3 C e a versão H TM L 3.0 não chegou a ser lançada oficialmente,
transformando-se na versão HTM L 3.2.

A web foi inventada em 1992 por Sir Tim Berners-Lee. Atualmente Tim é diretor
: ? World Wide Web Consortium (W 3C), pesquisador sênior do Laboratório da
Lència da Computação e Inteligência Artificial (CSAIL) do Instituto de Tecnologia
:.e Massachusetts (MIT) e professor de Ciência da Computação na Universidade
se Southampton, na Inglaterra.

Tim Berners-Lee trabalhava na Seção de Computação da Organização Europeia

ce Pesquisa Nuclear (CERN), com sede em Genebra, na Suíça, quando iniciou
pesquisas visando a descobrir um método que possibilitasse aos cientistas do
mundo inteiro compartilhar eletronicamente seus textos e pesquisas e que tivesse
a funcionalidade de interligar os documentos. Estavam criadas as noções web e de
'.inks como são conhecidas atualmente.

Em 1990, Tim criou o protótipo de um navegador para rodar em computadores

da NeXT, uma companhia fundada em 1985 por Steve Jobs, atual CEO da Apple.
Inicialmente, o navegador foi chamado de WorldWideWeb e, posteriormente, reno­
meado para Nexus, a fim de evitar confusão com a World Wide Web.

O termo inglês browser é usado no jargão da internet para designar um programa

capaz de ler e apresentar ao usuário os conteúdos de um documento web escrito
em linguagem de marcação. Browser vem do verbo lo browse, que significa folhear
casualmente as páginas de um livro e foi traduzido para o português como navegador,
gerando a tão bem conhecida expressão “navegar na internet”. São exemplos de
navegadores o Internet Explorer, o Firefox, o Opera, o Chrome e o Safari, entre outros.
Neste livro, adotaremos o termo em sua forma traduzida: navegador.

Tim Berners-Lee acreditava que seria possível interligar hipertextos em com­

putadores diferentes com uso de links globais, também chamados de hiperlinks.
Ele desenvolveu um software próprio e um protocolo para recuperar hipertextos,
22 HTML 5

denominado HTTP. O formato de texto que criou para o H TTP foi chamado de
H TM L.Tim tomou como base para criação da HTM L a especificação SGML, que é
um método internacionalmente reconhecido e aceito, contendo normas gerais para
a criação de linguagens de marcação. A marcação para hiperlinks conduzindo a do­
cumentos que não estivessem em um mesmo computador obviamente não constava
das normas para SGM L e foi inventada por Tim, demonstrada pela primeira vez em
1990, em uma estação de trabalho NeXT, nos laboratórios da CERN. Estava criado
o embrião da World W ide Web, bem como a primeira versão da linguagem HTM L
para a marcação de hipertextos. A partir daí, a evolução cronológica da H TM L deu-
se conforme relatado sumariamente a seguir.

Em setembro de 1991, foi criada a lista de discussão eletrônica denominada WWW-

talk, com o propósito de trocar ideias e experiências sobre a H TM L desenvolvida
por Tim Berners-Lee. Um dos frequentadores da lista era Dave Raggett, dos labo­
ratórios da Hewlett-Packard, em Bristol, Inglaterra. Dave, empolgado com a nova
ideia, desenvolveu suas pesquisas e acabou por escrever a H TM L+, uma versão
elaborada e enriquecida da H TM L original desenvolvida por Tim. Em outubro de
1993, Dave Raggett deu por encerrada as discussões e, no mês seguinte, publicou a
versão final da HTM L+.

A H TM L+ começa com a seguinte afirmação:

Documentos marcados com HTML+ são constituídos de títulos, parágrafos,

listas, tabelas e figuras.

E continua estabelecendo:

Ao contrário da maioria das tecnologias destinadas à criação de documentos, a

HTML+ não se destina a determinar a aparência; assim, nomes e tamanhos de
fontes, margens, tabulações, espaçamentos entre os elementos não são funções
da linguagem. Fica a cargo dos softwares responsáveis pela renderização dos
documentos marcados com HTML+ a maneira como os documentos devam
ser apresentados (talvez com base em configurações de preferência do usuário).

Convém salientar com muita ênfase que, desde sua criação, os idealizadores
da H TM L tiveram a preocupação de retirar da linguagem de marcação qualquer
atribuição ou função de apresentação, ou seja, HTM L destina-se exclusivamente
a estruturar documentos. É nessa destinação que se fundamentam os princípios
básicos do desenvolvimento seguindo os Padrões Web.
 * Apresentação da HTML5 2i

. ::,\o de 1992 marcou o interesse do Centro Nacional de Aplicações para Super-

.r.eutadores (NCSA) da Universidade de Illinois - então representado por Joseph
- '. ;_'.in e Dave Thompson, os quais acabaram por desenvolver um navegador que
: aenominado Mosaic. Da NCSA participaram ainda dois expoentes da web: Marc
ndreessen, que apresentou a ideia de um elemento para marcação de imagens nos
zipertextos - e depois ficou milionário vendendo produtos para a web —, e Eric
Bina, um brilhante programador considerado um gênio da web.

Em 1993, Lou Montulli criou o navegador de texto denominado Lynx versão 2.0a
e Dave Raggett começou a trabalhar no desenvolvimento do navegador Arena, que
se destinava a demonstrar, na prática, a implementação de todas as funcionalidades
inventadas e discutidas até então. Ainda nesse ano a Sun Microsystems lançou a
versão 1 do navegador Mosaic.

As grandes companhias não se interessaram pela nova invenção, alegando não

acreditar que pudessem tirar proveito algum da web e que se tratava de um meio
de comunicação restrito e de emprego exclusivo na área acadêmica.Tal pensamento
desestimulou as pesquisas que vinham sendo desenvolvidas, pois estas dependiam
de patrocínio. As equipes, que até então desenvolviam seus projetos em horas vagas,
refrearam o ímpeto inicial por falta de tempo e verba. O trabalho continuou, mas
em um ritmo aquém do esperado pelos envolvidos no projeto.

No mês de maio de 1994, a Spyglass comprou a licença de comercialização da

versão aperfeiçoada do navegador Mosaic. Ainda nesse mês ,de maio, a CERN
organizou, em Genebra, a primeira conferência para a World Wide Web com a
apresentação da H TM L+, criada por Dave Raggett. A conferência contou com a
participação de aproximadamente 380 pessoas, a maioria envolvida com atividades
e instituições acadêmicas.

j\ No mês de outubro de 1994,Tim Berners-Lee em parceria com a CERN, onde a web foi por
y ' ,sj ele inventada, criaram o World Wide Web Consortium (W3C), com sede no Laboratório
AN da Ciência da Computação do Massachusetts Institute of Technology (MIT).

Com a criação de novos navegadores, a H TM L tornou-se um caos, com cada

fabricante inventando novas formas de marcação H TM L exclusivas para seus nave­
gadores. Em uma tentativa de organizar a situação, Dan Connolly e colaboradores
fizeram um levantamento minucioso de tudo o que existia na H TM L e propuseram,
em julho de 1994, a especificação H TM L 2.0, uma tentativa de consolidar e unificar
as diferentes formas H TM L de marcação que vinham sendo criadas. Adicionalmente,
Dan e sua equipe escreveram a primeira Definição do Tipo de Documento (DTD)
para a H TM L 2.0, uma espécie de descrição matemática da linguagem.
24 HTML 5

Em setembro, foi criado pela Força-Tarefa para Engenharia de Internet (IETF) o

primeiro grupo de trabalho para a HTML. A IETF é uma organização internacional
que congrega interessados nos vários aspectos da internet, com a finalidade de desen­
volver normas e tecnologias pertinentes à operação e à evolução da arquitetura da
internet. A criação desse grupo de trabalho marcou a abertura do desenvolvimento
da H TM L para qualquer pessoa interessada, independentemente de pertencer ou
não a uma organização ou órgão particular, isto é, a discussão tornou-se aberta ao
público em geral.

Marc Andreessen e Jim Clark haviam fundado a Mosaic Communications que,

em novembro desse ano, transformou-se na Netscape Communications Corporation.
Nascia a Companhia que se tornaria, em pouco tempo, a senhora absoluta da web,
impulsionada com a aceitação unânime da nova versão do navegador Mosaic. O
sucesso da Netscape deveu-se, entre outros fatores, primordialmente, ao investimen­
to maciço nas funcionalidades de proporcionar acesso à internet, mesmo para os
usuários com dispositivos mais precários. A Netscape tornou-se a sensação e muitos
ainda acreditam erroneamente que a web foi criada pela Netscape. Por outro lado, a
companhia isolou-se em suas pesquisas e desenvolvimentos, adotando a política de
inventar H TM L própria, sem participação da comunidade interessada e passando
ao largo de conferências e encontros públicos relacionados.

No mês de outubro de 1994, foi criado o World Wide Web Consortium (W3C),
um consórcio internacional formado por empresas, instituições, pesquisadores,
desenvolvedores e público em geral, com a finalidade de desenvolver a web a seu
potencial máximo, criando normas e especificações aplicáveis aos diversos segmen­
tos e setores da web, desde tecnologias e softwares até fabricantes e fornecedores.

O W 3C tem sua sede principal distribuída em três lugares distintos: nos Labora­
tórios de Ciência da Computação do MIT, em Massachusetts, nos Estados Unidos,
no Instituto Nacional de Pesquisas de Informática e Automação, na França, e na
Universidade de Keiko, no Japão, além de escritórios espalhados em várias cidades
do mundo. As mais proeminentes e brilhantes cabeças envolvidas com o desenvol­
vimento para a web foram convidadas a formar o núcleo básico do W 3C. Nomes de
projeção internacional no envolvimento com a web foram convidados a participar,
destacando-se Henrick Frystyk Neilsen, Anselm Baird-Smith, Jay Sekora, Rohit
Khare, Dan Connolly, Jim Gettys, Tim Berners-Lee, Susan Hardy, Jim Miller, Dave
Raggett,Tom Greene, Arthur Secret, Karen MacArthur, Arnaud le Hors, Hâkon Lie,
Bert Bos e Chris Lilley, entre outros.
 ■ -in tação da HTML5 25

1995 assinalou o início de um desenvolvimento frenético de novas

; .ira a H TM L, com prioridade para a criação de elementos e atributos
. .iT.ição em total desacordo com o propósito inicial da linguagem, qual
: rr uma linguagem exclusivamente de marcação e estruturação de textos.
: elementos para definir tamanhos, tipos e cores de letras dos textos,
. : //do, texturas e toda uma parafernália relacionada, completamente fora
. : inicial da HTM L.

~.i> final da H TM L 2.0 foi publicada em 22 de setembro de 1995.

i . vo de 1995, Dave Raggett lançou sua proposta para a H TM L 3.0, que vem
; nmeira sugestão de uma marcação específica para estilização e apresentação,
: u io tempo que também propõe a criação do atributo class. Surgiu, ainda, a
. , vu para tabelas, para notas de rodapé e formulários. A marcação para tabelas
mande discussão na época, tendo sido efetivada somente na versão seguinte
-: t m l.

ii setembro, a Netscape propôs o conceito defram es em documentos H T M Le

: ementou essa funcionalidade em seu navegador, sem consultas à comunidade,
n era prática comum.

Em novembro, a M icrosoft lançou a versão 2.0 do Internet Explorer. Bert Bos,

- . -:on Lie, Dave Raggett, Chris Lilley e colaboradores iniciaram, nesse mesmo mês,
. .realização das folhas de estilo em cascata (CSS).

Em dezembro, dissolveu-se o grupo de trabalho para a HTML.

Em fevereiro de 1996, o W 3C criou o H TM LERB, um grupo formado por repre-

entantes da IBM, Microsoft, Netscape, Novell, Softquad e do W 3C Consortium,
■/.'.carregado de rever e padronizar a H TM L com a finalidade de acabar com as
.mplementações proprietárias.

Em dezembro, o H TM L ERB transformou-se no Grupo de Trabalho da HTML,

:.ue existe até hoje. Esse mês assinalou o início dos estudos para a implementa­
ção de uma marcação provisoriamente denominada Cougar, a qual, mais tarde,
iransformar-se-ia no HTML4.

Em janeiro de 1997, o W 3C endossou a HTM L 3.2 como uma Recomendação

oficial. Com essa versão, a HTM L incorporou os elementos t a b l e e a p p l e t , bem como
elementos para marcar subscritos, sobrescritos e texto ao redor de imagens.
26 HTML 5

Em julho de 1997, foi lançada a versão rascunho para a Cougar, depois deno­
minada HTML4.

Em dezembro desse ano, o W 3C endossou a EITML4 como uma Recomendação

oficial.

Em dezembro de 1999, o W 3C publicou as Recomendações para o H TM L 4.01.

Essa é a versão atual da HTML.

1.3 Criação da HTML5

Em maio de 2007, o W 3C reconsiderou sua decisão de encerrar o desenvolvimento
da H TM L em favor da XH TM L e tornou pública sua decisão de retomar os estudos
para o desenvolvimento da HTML5, tomando como base o trabalho que já vinha
sendo desenvolvido pelo WHATWG.

W H A TW G é a sigla em inglês para Web Hypertext Application Technology Working

Group, que, em português, significa Grupo de Trabalho para Tecnologias de Hiper­
texto em Aplicações para Web. O W HATW G foi criado em 2004 por desenvolvedores
da Apple, da Fundação Mozilla e do navegador Opera, que, descontentes com os
rumos adotados pelo W 3C, propuseram-se a desenvolver as especificações para
HTML5, Web Forms 2.0 e Web Controls 1.0. Atualmente, o foco único do Grupo de
Trabalho é a HTML5, uma vez que a Web Forms 2.0 também foi assimilada pelo
W 3C e os estudos para Web Controls 1.0 foram interrompidos.

O W H A TW G desenvolve a H TM L5 em conjunto com o W 3C e ambos mantêm

em seus sites uma versão das especificações que diferem ligeiramente em pequenos
detalhes. A versão do W H A TW G é menos restritiva do que a versão do W 3C. Por
exemplo: em vários itens da especificação, apresenta exemplos ilustrativos e infor­
mações sobre suporte da funcionalidade descrita, nos navegadores modernos. Essas
informações adicionais não constam da versão do W 3C.

No dia 19 de janeiro de 2011, Ian Hickson, editor da HTML5, publicou no blog

da W HATW G uma matéria informando que a especificação para a HTM L5 conti­
nuaria a ser desenvolvida exclusivamente pelo W 3C , ficando sob responsabilidade
do W HATW G a continuidade do desenvolvimento de uma especificação para a
H TM L geral, isto é, sem sufixo designativo da versão.
 Apresentação da HTML5 27

- Estrutura da especificação para a H TM L5

: rrir.cação para a HTM L5 está estruturada em 10 seções, a saber:

mfraestrutura comum: define terminologia, classes, algoritmos, sintaxes e partes

comuns das especificações.

1 Semântica, estrutura e APIs para documentos HTML: definem as funcionalidades do

DOM H TM L e dos elementos H TM L em geral.

: Elementos HTML: explicam o significado de cada um dos elementos HTM L. São

estabelecidas regras de uso dos elementos na marcação, bem como diretrizes
de manipulação deles pelos agentes de usuário.

- Microformatos: a especificação para a HTML5 prevê um mecanismo para marcar

informações sobre o documento, no formato nome/valor, para serem lidas
por máquinas. Essa seção descreve esse mecanismo e os algoritmos capazes
de converter documentos HTM L em outros formatos. Adicionalmente, nessa
seção definem-se alguns vocabulários para Microformatos: informações de
contato, calendário de eventos e licenças.

5. Carregamento de páginas web: documentos HTM L não aparecem do nada - essa

seção define as muitas funcionalidades relacionadas ao tratamento de páginas
web pelos diferentes dispositivos.

6. APIs para aplicações web: descrevem as funcionalidades básicas para desenvolvi­

mento de scripts em aplicações HTML.

7. Interação com o usuário, descreve os diferentes mecanismos de interação do usuário

com um documento HTML.

8. APIs para comunicação: tratam dos mecanismos de comunicação entre aplicações

H TM L rodando em domínios diferentes e no mesmo cliente.

9. Sintaxe HTML: descreve a sintaxe HTML.

10. Sintaxe XHTML: descreve a sintaxe XHTM L.

A especificação contém ainda apêndices nos quais são estabelecidas regras de

renderização para os navegadores, listadas as funcionalidades obsoletas e con­
siderações da Internet Assigned Numbers Authority (IANA), órgão responsável
pela coordenação geral de protocolos para a Internet, nomes de domínio (DNS) e
endereço IP.
28 HTML 5

1.5 Princípios de desenvolvimento da HTML5

Em 26 de novembro de 2007, o Grupo de Trabalho da HTM L pertencente ao W 3C
publicou uma nota contendo um conjunto de diretrizes a ser seguido pelo Grupo
de Trabalho e que descreve os princípios de desenvolvimento da HTML5. Tal nota
está hospedada no site do W 3C : h t t p ://w w w .w 3.o rg/TR /htm l-de s ig n-p rin cip le s /.

Os princípios descritos visam a orientar o Grupo de Trabalho que desenvolve a

H TM L5 nas seguintes áreas:

b Compatibilidade

□ Utilidade

□ Interoperabilidade

a Acesso universal

Vejamos a seguir cada uma dessas áreas e seus princípios de desenvolvimento

para a HTML5.

1 .5.1 Compatibilidade

Compatibilidade é um termo que pode ser interpretado de várias maneiras. É fre­

quente o uso dos termos “retrocompatibilidade” e “compatibilidade futura”, contudo,
dependendo do contexto, nem sempre fica claro o que eles significam. Os princípios
de compatibilidade previstos na Nota do W 3C esclarecem o termo compatibilidade
em diferentes contextos, conforme descritos a seguir.

1.5 .1.1 Suporte para conteúdos existentes

Existem milhares de páginas web codificadas em desacordo com as diretrizes da

H TM L e que são renderizadas a contento e funcionam perfeitamente, pois o trata­
mento dado pelos navegadores aos erros de marcação é muito complacente.

Historicamente os fabricantes de navegadores cada vez mais implementaram

mecanismos de tratamento de erros de marcação capazes de simplesmente ignorá-
los. O nível de sofisticação dos mecanismos chegou a tal ponto que os navegadores
praticamente “adivinham” o que o desenvolvedor deveria ter feito quando cometeu
um erro de marcação e, na maioria dos casos, renderizam o conteúdo como se erros
não existissem.
 • - presentação da HTML5 29

---■"e a marcação de uma lista não ordenada com um nível de aninhamento:

L icem K/li>
M>
<li>item 1.1
<li>item 1 .2</li>
</ul>
1: item 2
<ul>
<li>item 2.1
<li>item 2.2</li>

- .meação em questão contém vários erros, mas, se constar de um documento

; ido com o tipo de MIME text/html, e qualquer D OCTYPE ou mesmo sem
. . renderizada normalmente como uma lista de dois itens, cada um deles com
; ..bitens e respectivos marcadores-padrão.

marcação XHTM L servida com o tipo de M I M E application/xhtml+xml o nave-

■acusará um erro fatal e o usuário será brindado com uma mensagem de erro.

.: mo sabemos, a tentativa de evoluir a HTM L para XH TM L fracassou e foi

cHonada pelo W 3C em favor da HTML5 e esta ao contrário da XHTM L, segundo
cicípio da compatibilidade, deverá ser desenvolvida de modo a não “quebrar”
,::ação errada.

Muitos sites usam o elemento upara marcar textos sublinhados. Esse elemento foi
meado em desuso pela HTM L4; contudo, a HTM L5 deve prever suporte para ele.

Esses dois simples exemplos bem ilustram o princípio da compatibilidade, põ­

em não é só marcação errada e elemento em desuso que ele contempla. APIs de
..mecificações HTM L antigas, funcionalidades e comportamentos não previstos em
. mecificaçÕes e até mesmo funcionalidades proprietárias devem ser consideradas
. :>desenvolvimento da HTML5.

Convém ainda ressaltar que renderizar corretamente marcação errada não im­
plica documento válido.

Segundo esse princípio, a HTM L5 está sendo desenvolvida de modo que a mar­
cação mostrada anteriormente renderiza normalmente em HTML5, mas os autores
devem evitá-la ao criar documentos novos. Elas serão suportadas em documentos
antigos quando migrados para HTML5.
30 HTML 5

As perguntas que devem ser feitas para se chegar à conclusão sobre o suporte
ou não a uma funcionalidade ou comportamento são:

■ A quantidade de conteúdos dependente da funcionalidade ou comportamento

é considerável?

h A funcionalidade ou comportamento ocorre em sites populares e de grande

audiência?

■ A funcionalidade ou comportamento é para consumo global ou localizado?

■ A funcionalidade ou comportamento é para a web pública ou restrito a dis­

positivos particulares?

■ A funcionalidade ou comportamento funciona em vários dispositivos ou está

restrito a determinado dispositivo?

1.5.1.2 Degradação graciosa

Degradação graciosa é a tradução literal para “graceful degradation” cujo significado

é o seguinte:

A criação de um conteúdo deve ser projetada de modo que usuários e agentes

de usuários tenham acesso a ele independentemente do dispositivo e condições
que estejam usando, ainda que os mais precários possíveis.

O conteúdo é criado implementando-se as mais modernas e avançadas tecno­

logias com o objetivo de estilizar, incrementar apresentação e usabilidade e tudo
mais que achar conveniente.

Nessas condições, o princípio da degradação graciosa estabelece que dispositi­

vos e usuários sem suporte para as tecnologias avançadas não ficarão privados da
informação transmitida pelo conteúdo. Por exemplo: projetar um box com bordas
arredondadas e sombras proporciona degradação graciosa para usuários com na­
vegador sem suporte para CSS3 que verão o box com bordas não arredondadas e
sem sombras, porém terão acesso ao conteúdo nele inserido. Ao projetar um menu
dropdown com JavaScript, é preciso garantir que o menu será acessível e funcional
para usuários sem suporte ou com JavaScript desabilitado.

Esses dois simples exemplos bem ilustram o princípio da degradação graciosa

que, em última análise, significa o seguinte:

Ao acrescentar funcionalidades cujo suporte é previsto nos mais modernos

navegadores, é preciso que os desenvolvedores garantam mecanismos capazes
 * Apresentação da HTML5 31

: v '. cnderizar o conteúdo de forma a não perder a informação transmitida,

. ccr.io o conteúdo é renderizado em agentes de usuário antigos nem para
.: .‘..trios que navegam com algumas funcionalidades desabilitadas.

. _ ,:.:;do esse princípio, a HTM L5 está sendo desenvolvida de modo a fornecer

■,;mos capazes de proporcionar uma solução alternativa para a degradação
. Hm se tratando de novas funcionalidades, na maioria dos casos, as seguintes
r ir.tções são levadas em conta:

■ 1f ovos elementos ou atributos, quando não entendidos pelo agente de usuário,

cevem prever um mecanismo adicional de transmissão de semântica, sem
•;erder sua funcionalidade.

■ Xovos métodos ou atributos devem ser capazes de ser testados via ECMAScript
entes de serem usados.

> Xovos elementos ou atributos devem ser semânticos e capazes de receberem

estilização mínima.

■ Xovos elementos capazes de comportarem um mecanismo de renderização

sofisticado devem prever uma alternativa de transmissão do seu conteúdo
cara agentes que não os suportem.

: ntudo, esse princípio não é absoluto no desenvolvimento da HTML5. Em al-

í casos, a nova funcionalidade simplesmente não irá funcionar em determinada
í ; e de agentes de usuário ou ainda é impossível de se prover degradação graciosa.
; exemplo: as novas APIs que dependem de linguagem de script para funcionar
: zuncionarão em agentes de usuário sem suporte para o script.

?s exemplos a seguir ilustram o princípio da degradação graciosa aplicado ao

; envolvimento da HTM L5:

» Os novos elementos canvas e audio destinados a implementar multimídia em

um documento preveem um mecanismo de apresentação de conteúdo alter­
nativo para navegadores que não suportam esses elementos, como mostrado
na marcação a seguir:
<canvas>Insira aqui o conteúdo alternativo</ca nvas>
<audio>Insira aqui o conteúdo altern ativo</audio>

■ O novo método getElementsByClassNameQ é muito mais rápido do que seu equiva­

lente tradicional desenvolvido com ECMAScript. Segundo o princípio da degra­
dação graciosa, mecanismos de verificação de suporte para esse método podem
ser usados para servir o método equivalente para agentes que não o suportam.
32 HTML 5

1.5.1.3 Não reinventar a roda

Segundo esse princípio, se uma tecnologia já está implementada e é largamente

usada para atender a determinados casos, não há necessidade de se criar uma nova
funcionalidade para atender àqueles casos. Mesmo porque é mais fácil ampliar
funcionalidades já existentes e testadas do que partir do zero criando nova funcio­
nalidade com o mesmo propósito.

O exemplo clássico da aplicação desse princípio é a adoção dos elementos marquee

e do atributo c o n ten te dita b le que já existem, não constam das especificações para a
HTM L, mas agora passam a fazer parte da HTML5.

1.5 .1.4 Pavimentar os caminhos existentes

Segundo esse princípio, se uma prática é amplamente usada pelos desenvolvedores,

é preferível adotá-la a proibi-la ou inventar algo novo para substituí-la.

É comum a prática de os autores usarem, em documentos HTM L, a marcação

<br/> em detrimento de <br>. Não há nenhum dano em se permitir a continuidade
dessa prática.

1.5 .1.5 Evofução em lugar de revolução

Revoluções, por vezes, mudam o mundo para melhor. Contudo, na maioria dos casos,
é melhor aperfeiçoar práticas existentes do que simplesmente descartá-las. Segundo
esse princípio, se uma técnica é usada pelos desenvolvedores, é preferível aperfeiçoá-
la e adotá-la em vez de obrigar os autores a estudar e aprender novas técnicas.

1.5.2 Utilidade

Utilidade visa a garantir que a marcação HTM L possa ser usada de modo efetivo
para todos os fins a que ela se destina.

1.5.2.1 Solucionar problemas reais

Alterações nas especificações devem ser feitas para solucionar problemas atuais reais.
Abstrações e ilações teóricas sobre problemas existentes devem ser descartadas em
favor de uma solução pragmática e efetiva. Todos os problemas atuais devem ser
estudados e resolvidos, se possível.
I: pítulo 1 h Apresentação da HTML5 33

.5.2.2 Prioridades

: noridades é um princípio que considera uma cadeia de interessados quando há

: rnflitos em relação à implementação de uma funcionalidade na HTML5.

.\esses casos, ao se criar uma funcionalidade, os usuários serão considerados em

çrimeiro lugar. Seguem-se a estes os implementadores das funcionalidades que são
seguidos pelos que criam especificações; em último lugar, considera-se a pureza
teórica da questão.

1.5.2.3 Segurança

Segurança é um princípio que visa a assegurar que as funcionalidades da HTML5

não ofereçam brechas que possibilitam violar as normas de segurança do modelo
Tveb. Preferencialmente as considerações sobre segurança devem ser tratadas dire-
ramente nas especificações.

Por exemplo: a comunicação entre documentos de diferentes sites é muito útil;

contudo, implementar tal funcionalidade sem restrições pode colocar em risco a
segurança dos dados transmitidos. A funcionalidade para comunicação entre do­
cumentos está projetada na HTM L5 paralelamente a mecanismos que impedem a
violação das regras de segurança.

1.5.2.4 Separação de camadas

A HTM L foi projetada para separar a marcação estrutural da apresentação. Nesse

contexto, marcação que expresse estrutura é preferida sobre marcação para apre­
sentação. Contudo, marcação estruturada é um meio para se alcançar um fim tal
como ocorre quando consideramos o funcionamento da funcionalidade indepen­
dentemente do tipo de mídia do usuário.

Esse princípio estabelece que não são necessárias considerações profundas e

detalhamento refinado sobre questões relacionadas à semântica se o fim pode ser
alcançado por uma via mais simples. Definir um padrão razoável de semântica para
diferentes tipos de mídia é suficiente. Deve ser feito um balanço ponderado entre
semântica refinada e uso prático antes de se chegar a uma conclusão. Nomes de
elementos e atributos da marcação devem ser práticos e pragmáticos em lugar de
verbosos e muito detalhados.

Faculdade de Tecnologia
S e n a c R io
B IB L IO T E C A
 HTML 5

Por exemplo: o elemento a rtic le define um artigo individual sem detalhar a ma­
neira como ele deve ser renderizado. Em determinado contexto, um artigo pode ser
único na página e disposto em múltiplas colunas ao passo que em outro contexto
possa coexistir com vários outros artigos multicolunares em uma mesma página.

Os elementos b e i são largamente usados. É muito melhor estabelecer novas

regras de renderização para eles, nos diferentes tipos de mídia, do que simplesmente
bani-los das especificações.

1.5.2.5 Consistência do DOM

O princípio da consistência do DOM, como o próprio nome sugere, visa a criar

funcionalidades na HTM L5 que permitam a produção de uma árvore do documen­
to consistente e facilmente acessível às linguagens de script e programas em geral.
Discrepâncias são admitidas desde que necessárias a contemplar dispositivos do
passado, mas, nesses casos, as diferenças devem ser minimizadas.

1.5 3 Interoperabilidade

Interoperabilidade visa a aumentar as chances de uma implementação H TM L

funcionar nos mais variados dispositivos e sistemas.

1.5 3 .1 Comportamentos definidos

Esse princípio visa a que as funcionalidades, quando for o caso, comportem-se de

maneira bem definida em lugar de deixar livremente por conta dos agentes de usu­
ário a tarefa de estabelecer como será o comportamento. Contudo, deve-se permitir
que as implementações tenham certa liberdade para incrementar algum compor­
tamento em áreas como de interface do usuário e da qualidade de renderização.

1.5.3.2 Evitar soluções complexas

Esse princípio dá preferência ao uso de soluções simples. Funcionalidades simples

são mais fáceis de serem implementadas pelos agentes de usuário, além de facilitarem
a interoperabilidade e o entendimento pelos autores. No entanto, simplicidade não
deve ser desculpa para se ferir outros princípios de desenvolvimento da HTML5.
Capítulo 1 ■ Apresentação da HTML5 35

1.5.3.3 Tratamento de erros

Esse princípio estabelece que os erros de marcação devem ser tratados de modo a
não frustrar o usuário apresentando-lhe uma mensagem de erro. Nos casos de erro
é preferível um mecanismo de degradação graciosa a uma mensagem de erro fatal.

1.5.4 Acesso u n iv e rs a l

Acesso universal visa a garantir o acesso às funcionalidades da HTM L5 pelo maior

número possível de dispositivos e sistema segundo os princípios a seguir:

1.5 .4 .1 Independência de mídia

As funcionalidades da HTM L5 devem, sempre que possível, funcionar nos mais

variados tipos de plataformas, dispositivos e mídias. Isso não significa que determi­
nada funcionalidade deva ser descartada porque não é suportada por essa ou aquela
plataforma. Por exemplo: funcionalidades de interação não devem ser descartadas
pelo fato de não serem suportadas em mídia impressa, como ocorre com o elemento
a que simplesmente não funciona quando impresso.

1.5 .4.2 Suporte muitilíngua

Essa funcionalidade visa a facilitar a produção de documentos nos diferentes idio­

mas existentes no mundo.

1.5.4.3 Acessibilidade

Essa funcionalidade visa a facilitar o acesso ao conteúdo independentemente do

dispositivo ou das necessidades especiais do usuário. Isso não significa que uma
funcionalidade deva ser descartada se um grupo de usuários não tiver acesso a ela,
mas se devem prever meios alternativos de acesso. É o caso do elemento img que não
deve ser banido porque usuários cegos não conseguem ver imagens. Usa-se o atributo
alt para fornecer um meio alternativo de acesso à imagem para aqueles usuários.
36

1.6 Diferenças entre HTM15 e HTML4

As principais diferenças entre a HTM L5 e a H TM L4 têm suas .. -
a H TM L5 estar sendo desenvolvida com o propósito de substituir HT
criada nos anos 90 quanto a XHTiVIL que foi uma tentativa frustrada de reforir.
a H TM L4 como uma aplicação XML.

1.6.1 In tr o d u ç ã o
A especificação para a HTM L5 iniciada no ano de 2004 e incorporada pelo W 3C
no ano de 2007 tem como objetivo geral estudar e resolver problemas relacionados
à implementação de um HTM L contemporâneo e ao mesmo tempo compatível com
conteúdos existentes. Para cumprir esse objetivo, considera os seguintes pontos:

a Definição de uma linguagem única denominada HTM L5 que pode ser escrita
tanto com a sintaxe HTM L quanto com a sintaxe XML.

a Definição de modelos de processamento detalhados com vista a promover a

interoperabilidade da linguagem.

Q Aperfeiçoamento da marcação dos documentos.

0 Criação de marcação e APIs para novas tecnologias, tais como as aplicações

Web.

Nesse contexto, podemos agrupar as diferenças entre as duas linguagens nas

seguintes áreas:

1 .6 .1 .1 Retrocompaíibilidade

A HTM L5 está sendo desenvolvida em dois níveis de requisitos de conformidades.

Requisitos para autores e requisitos para agentes de usuário. Considere, para ilustrar
a diferença nessa área, os elementos is in d e x e p la in te x t. De acordo com a HTML4,
esses elementos estão em desuso (deprecated) e seriam banidos das próximas es­
pecificações para a HTM L. Segundo os princípios de desenvolvimento da HTML5,
esses elementos perdem sua condição de “em desuso” e passam a ser considerados
elementos obsoletos (obsoletes). A diferença é que eles não serão banidos da espe-
cificação. Continuarão constando como requisitos para agentes de usuário e seu
uso pelos autores é desaconselhado.
 : : tulo 1 ■ Apresentação da HTML5 37

Xa prática isso significa que os fabricantes de agentes de usuário devem imple-

tntar funcionalidades que permitam reconhecer e renderizar apropriadamente
: 'aeles elementos nos dispositivos futuros, muito embora o uso deles, pelos autores,
desaconselhado.

X a H TM L5 não existem elementos em desuso (deprecated) com o sentido que

ralavra tem na HTML4.

O mesmo acontece com outros elementos em desuso segundo a HTM L4, como
; elementos font, u, s etc.

' .6.1.2 Modelo de desenvolvimento

■essa área a diferença é que a H TM L5 não será considerada concluída até que haja
:clo menos duas implementações completas das funcionalidades da especificação.
Hrá criada uma suíte de testes para verificar o funcionamento de todas as funcio­
nalidades nas duas implementações. O objetivo aqui é assegurar que a especificação
pode ser implementada e usada pelos autores tão logo esteja finalizada.

Para as versões anteriores da linguagem HTML, a especificação final era aprovada

por um comitê do W 3C antes mesmo de ser totalmente implementada.

1 .6 .2 S in ta x e

A especificação para a HTM L5 define uma sintaxe que é compatível tanto com a
HTML quanto com a XH TM L. Os documentos usando a sintaxe HTM L com o
:ipo de M IM E text/html são parseados segundo regras compatíveis com as atuais
implementações populares.

Observe a seguir um exemplo de marcação HTML:

<!OOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 1 Transitional//EN" ,,http://www.w3.org/TR/html4/loose.dtd">
<html lang="pt- br" >
<head>
<meta http-equiv="Content-T ype" content= "te xt/h tm l; charset= utf- 8">
< t i t l e > T í t u l o da p ág in a</title >
< lin k re l= "s ty le s hee t" type="text/css" hre f= "/e s tilo s /m ain.cs s ">
</head>
<body>
<hl>Minha página HTML4</hl>
</body>
</html>
38 HTML 5

A seguir, a marcação HTM L5 compatível com a sintaxe HTML:

< ! DOCTYPE httnb
<html lang="pt- br" >
<head>
<meta chars et= "utf-8">
< t i t l e > T í t u l o da página < / t i t l e >
<linl< re l= "s ty le s h ee t" hre f= "/e s tilo s /m ain.cs s ">
</head>
<body>
<hl>Minha página HTML5</hl>
</body>
</html>

1.6 .2 .1 DOCIYPE

A declaração DOCTYPE (tipo de documento) deve ser feita na primeira linha da marcação
H TM L para garantir renderização no modo standard. Para maiores informações,
ver: http://niaujor.com/wBctuto/qatips/doctype.html. Nada deverá existir acima da declaração
de D O CTYPE nem mesmo uma linha em branco.

Existem doze diferentes DOCTYPES para uso em documentos H TM Le XHTM L

e todos eles são verbosos e difíceis de se guardar na memória. Todos eles fazem refe­
rência e contêm um link apontando para um documento com as regras de sintaxe
para a versão H TM L ou X H TM L na qual o documento foi escrito.

Em HTM L5 o DOCTYPE foi simplificado, não havendo mais necessidade do link, e

o DOCTYPE existe com a única função de habilitar a renderização em modo standard
para documentos escritos com a sintaxe HTM L. Os navegadores já entendem a
declaração DOCTYPE segundo a sintaxe HTML5.

1.6 .2 .2 Codificação de caracteres

A codificação de caracteres em um documento web pode ser feita de três maneiras

distintas:

h Com uso do parâmetro c h arset no cabeçalho H T T P C onte nt-Typ e.

a Uso de um caractere Unicode Byte Order Mark (BOM) no início do docu­

mento.

Uso do elemento meta com o atributo c h a rs e t.

Capítulo 1 ■ Apresentação da HTW1L5 39

Em H TM L5 a declaração da codificação de caracteres com uso do elemento meta

foi simplificada, pois não há mais a necessidade dos atributos http-equiv e content.
Contudo, convém notar que a sintaxe H TM L4 para esse elemento também é válida
em HTM L5 e, se você a preferir, pode usá-la sem problemas. Para maiores informa­
ções, ver: h t t p :/ / w w w .w 3 .o rg / In te rn a tio n a l/ 0 -c h a rs e t.

1.6.2.3 Elemento link

Em HTM L5 o atributo type para links a folhas de estilos e para Scripts é dispensável,
mas a declaração desse atributo pode ser usada, opcionalmente, em HTML5.

1 .7 Â HTML5 nos navegadores atuais

Desenvolver um projeto web em HTM L5 para os navegadores atuais é uma opção
que pode ser considerada; caso você decida por ela, é preciso levar em conta algumas
restrições e mecanismos existentes para contorná-las.

A maioria, mas não todas as funcionalidades da HTML5, já é suportada por

um ou mais navegadores atuais; contudo, existem mecanismos desenvolvidos com
a linguagem JavaScript que permitem detectar suporte para as funcionalidades
criando condições de o desenvolvedor oferecer um conteúdo alternativo para uma
funcionalidade não suportada por esse ou aquele navegador. Vejamos a seguir
algumas considerações sobre esse tema.

1.7.1 Os novos elementos e o Internet Explorer

A HTM L5 criou vários elementos novos que não são estilizáveis com uso das CSSC
nos navegadores Internet Explorer nas versões anteriores à versão 9, pois esses
navegadores, ao contrário dos navegadores standards, não aplicam regras CSS a
elementos que não conhecem.

Em uma marcação HTML, se você resolver criar um novo elemento chamado xpto
(ainda que ele não seja válido) e escrever uma regra CSS como mostrada a seguir, o
conteúdo inserido no elemento será normalmente estilizado na cor vermelha com
fundo na cor preta, exceto nos IE8 e anteriores,
xpto { color: red; background-color: black; }

Se você pretende servir seu documento HTML5 para aqueles navegadores, precisa
inserir um mecanismo capaz de fazer com que eles reconheçam os novos elementos
40 HTML 5

da linguagem. Tal mecanismo é oferecido pelo método createElement() da JavaScript,

conforme mostrado a seguir:
< ! - - [ i f I t e I E 8]>
<script>
d oc um ent .createElement("xpto")j
</script>
< ![en d if]-->

Existem aproximadamente trinta novos elementos na HTM L5 e uma alternativa

para o script, criando todos esses elementos individualmente da forma como mos­
trada anteriormente; foi desenvolvida por Remy Sharp que apresentou o script em
uma matéria no seu blog, disponível para consulta em http://re mysha rp.com/ 2009/ 01/ 07/

htm l5 -e n a b lin g -s c rip t/ .

O script de Remy Sharp encontra-se hospedado no Google em endereço público;

podemos criar em nossos documentos um hotlink para o script, inserindo-o na seção
head do documento, como mostrado a seguir:
< ! - - [ i f l t e I E 8]>
< script src="h t t p : / / h t m l 5 s h i m . g o o g l e c o d e . c o m / s v n / t r u n k / h t m l 5 . j s " x / s c r i p t >
< ! [ e n d i f ] -->

1 „7.2 Os novos elementos e o modelo de renderização

Outro aspecto importante a considerar, e esse válido para .todos os navegadores, é

que os novos elementos, todos eles, renderizam seus conteúdos como elementos
inline, pois os modelos de conteúdo da HTM L5 são prática e conceitualmente
diferentes dos modelos das HTM L anteriores.

Se quisermos que um ou mais dos novos elementos sejam renderizados segundõ

o conceito nível de bloco da HTML4, devemos declarar explicitamente essa condição
em regra CSS, conforme mostrado a seguir:
xpto { display: block; }

1 .7 3 Biblioteca Ja v a S c r ip t M o d e r n iz r
Modermzr é uma pequena biblioteca JavaScript que está sendo constantemente
atualizada por seus autores, destinada a detectar suporte nativo pelos navegadores
para as funcionalidades das novas tecnologias para a web. As funcionalidades
contempladas pela biblioteca são aquelas que estão sendo implementadas pelas
especificações para a HTM L5 e para as CSS3.
: 3pítulo 1 ■ Apresentação da HTML5 41

A biblioteca foi desenvolvida por Faruk Ate§ com a colaboração de Paul Irish e
-mcontra-se disponível para download em www.modernizr.coin.

O script da biblioteca cria um objeto JavaScript denominado Modernizr e vá-

::as propriedades para esse objeto. As propriedades e métodos criados têm nomes
aènticos aos das novas funcionalidades a detectar. Observe os exemplos a seguir:
Modernizr.canvas; / / propriedade para verifica r suporte ao novo elemento canvas
Modernizr.audio; // propriedade para verificar suporte ao novo elemento audio
Modernizr. bord erradius; // propriedade para verificar suporte a bordas arredondadas das CSS3
Modernizr. multip le bgs; // propriedade para verificar suporte a múltiplos backgrounds das CSS3

Uma vez linkada a biblioteca a um documento web, podemos testar o suporte a

ema nova funcionalidade, conforme exemplo a seguir, em que testamos o suporte
cara o elemento canvas.
i f (M o d e rn izr.c a n v a s ) {
// s c r i p t para uso de canvas
} else {
alert("La m entOj seu navegador não suporta canva s");

A biblioteca cria e adiciona classes ao elemento html, oferecendo ao desenvolvedor

c possibilidade de estilizar diferenciadamente um ou mais elementos na página
conforme o navegador ofereça ou não suporte a determinada funcionalidade.

Suponha o seguinte cenário para exemplificar o uso dessas classes:

Se o navegador oferecer suporte para múltiplos backgrounds, os parágrafos do

documento serão na cor vermelha; se não suportar, serão na cor azul.

Abiblioteca identifica o suporte pelo navegador e acrescenta a classe com pmome

multiplebgs ao elemento html. Não havendo suporte, o nome da classe acrescentada
o,.

no-multiplebgs e a folha de estilos para resolver o problema proposto no cenário

criado é:
<style>
.m u ltip le b g s p { color: red; }
.n o -m u ltip le b g s p { color: blue; }
</style>

Notar que o acréscimo da classe, como mostrado, possibilita uma autêntica con­
dicional na folha de estilos, pois as regras mostradas cumprem a mesma finalidade
da condicional mostrada no script a seguir.
42 HTML 5

<script>
var para = document.getElementsByTagNameCp");
i f (Modernizr.multiplebgs) {
f o r (va r i= 0; ic p a r a .l e n g t h ; i++) {
p a r a [ i ] . s t y l e . c o l o r = " re d " ;

}
} else {
f o r (va r i= 0; i< p a r a .le n g t h ; i++) {
p a r a [ i ] . s t y l e . c o l o r = " b lu e ";

}
}
</script>

Outra funcionalidade importante da biblioteca é que ela agregou o script de­

senvolvido por Remy Sharp, mostrado no item 1.7.1, que faz com que o navegador
Internet Explorer, nas versões 8 e anteriores, reconheça, para fins de aplicação de
estilização, os novos elementos da HTML5. Assim, o uso da biblioteca dispensa o
uso do script de Remy Sharp.

Atualmente não existe um endereço público de hospedagem da biblioteca para

incorporá-la aos nossos documentos com uso de um hotlink. Você deverá fazer o
download da biblioteca, hospedá-la no seu servidor e linká-la às suas páginas,
conforme mostrado a seguir:
< ! DOCTYPE html>
<html la n g = " p t- b r " >
<head>

c s c r ip t src="path/modernizr-v.n.min. j s " x / s c r i p t >

</head>
<body>

Maiores detalhes sobre a biblioteca, incluindo a relação de todos os objetos,

propriedades e classes por ela criadas encontram-se em http://w ww.modem izr.com/docs/.

UTempSates HTML5
A sintaxe H TM L5 é bastante flexível, pois a marcação pode ser escrita segundo as
regras da H TM L4 que admitem, por exemplo, que valores de atributo sejam ou não
marcados com aspas ou apóstrofes, que algumas tags, como p e li, não sejam fechadas
e uma série de outras regras que dão liberdade de escolha da marcação conforme
:.■: rxo 1 ■ Apresentação da HTML5 43

xxterência pessoal do autor. Escrever HTM L5 com base nessas regras significa
. zuzir um documento HTML5, ou em conformidade com a sintaxe HTML.

7 zr outro lado, a HTM L5 pode também seguir a sintaxe XM L e ser escrita

. z tztdo suas regras que são bem rígidas, pois não admitem, por exemplo, valores
■: tributos sem aspas ou apóstrofes e tags sem fechamento. Se você desenvolve
.HTML, deve estar bem familiarizado com essa sintaxe. Escrever HTM L5 com
nas regras da XM L significa produzir um documento XHTM L5, ou em con-
nudade com a sintaxe XML.

Xessa seção apresentaremos as formas de escrever HTM L5 segundo as diversas

r.taxes permitidas pela linguagem, desenvolvendo alguns templates ilustrativos.

.xntes de passarmos aos templates, façamos algumas considerações sobre a

taraação XH TM L.

Seja você um desenvolvedor experiente, seja um iniciante que cria conteúdos

. .: :: uso de marcação HTM L, é quase certo que, assim como eu, desenvolve seus
z : aumentos segundo as regras da XHTM L.

Existem milhões de páginas na Internet desenvolvidas com essa marcação; isso

z : rque quem as criou estava se preparando para o futuro, pois até o início de 2007
"Y3C alardeava que o futuro da H TM L era a X H TM L e que não haveria novas
ursòes da HTML.

O objetivo do W 3C ao criar a XH TM L foi proporcionar meios aos desenvolve-

tres de incluir as funcionalidades da XM L nos documentos para a web. Em março
tu 2007, Tim Berners-Lee publicou um press release afirmando o seguinte:

Após a publicação do HTML4 e seguindo as conclusões do Workshop 1998, o

W3C focou na transformação do HTML em um formato com base em XML
chamado XHTML devido aos benefícios próprios do formato XML. A primeira
recomendação XHTML completa foi publicada no início de 2000. Contudo,
devido ao maciço legado do conteúdo Web, com base em variações do HTML,
os fabricantes de navegadores começaram vagarosamente a adotar o XHTML.
Isso resultou em pouca motivação para os desenvolvedores de conteúdos
adotar o XHTML em seu ambiente tradicional de desenvolvimento. Expoentes
das comunidades de desenvolvedores e de design apelaram ao W3C para a
necessidade urgente de uma revisão dos seus compromissos com o HTML,
acrescentando novas funcionalidades (a começar com a Norma para HTML4)
em uma maneira que seja consistente com as práticas da comunidade e ao
mesmo tempo retrocompatíveis. O W3C garantirá interoperabilidade por meio
da implementação de suítes de testes robustas e de serviços de validação para
as futuras tecnologias e que estarão à disposição da comunidade.
44 HTML 5

O W3C com o forte suporte dos seus Membros e com mais recursos (tanto
em pessoal quanto em hardware) tem o prazer de retomar os trabalhos para o
HTML. O W3C modificou os Estatutos do Grupo de Trabalho do HTML com
o propósito de permitir a efetiva participação dos fabricantes de navegadores,
projetistas de aplicações e desenvolvedores de conteúdos, pois depende do
trabalho conjunto dessas pessoas o sucesso do HTML do futuro.

Estava decretada a morte da XH TM L em favor da HTML5. Contudo, o legado

da XH TM L permanece e você que já se acostumou com a sintaxe rígida da mar­
cação não terá de rever o que aprendeu, pois ela continua perfeitamente válida na
HTML5, assim como é válida também a sintaxe H TM L4 muito menos rígida e mais
complacente do que a da XHTM L.

Um documento XH TM L para ser puro e poder se beneficiar das funcionalidades

da X M L - e foi para isso que a XH TM L foi criada - deve ser servido com o tipo de
M IM E a pp licatio n/xm l ou a pp lic atio n /xh tm l+ xm l. Contudo, a maioria dos documentos
XH TM L na web é servida com o tipo M IM E para HTMLtext/html, o que significa
que não são conformes com a XML.

A tentativa de o W 3C evoluir a HTM L para conformidade com X M L fracassou,

porque páginas XH TM L servidas como X M L que contenham qualquer violação
com a sintaxe XM L causarão um erro fatal de parseamento e a página simplesmente
não será renderizada.

Por outro lado, apesar da rigidez com o tratamento de erros, a sintaxe XH TM L

foi bem recebida pelos desenvolvedores e é amplamente tisada.

Observe a marcação XH TM L a seguir:

<?php header('Content-Type: application/xhtml+xml'); ?>
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 . 0 T ra n s i ti o n a l/ / E N "
11h t t p : //www. w3. o rg / T R / x h t m ll/ D T D / x h t m ll -t r a n s i ti o n a l. dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-T ype" co ntent= "te xt/h tm l; ch ars et= utf- 8" />
< title> Pá gina XHTML< /title>
< s ty le typ e ="tex t/cs s " media="all''>
/ * regras de e s t i l o * /
</style>
</head>
<body>
<hl>Página com marcação XHTML</hl>
<p>Essa página contém marcação XHTML cstrong class="destaque">sem e rro s < /s tro n g x /p >
Capítulo 1 h Apresentação da HTML5 45

<p>Foi servida com t i p o de MIME <code>application/xhtml+xml</codex/p>

</body>
</html>

Para demonstrar o exemplo que desenvolvemos, inserimos na primeira linha da

página contendo a marcação XH TM L a função h e a d e rQ do PHP, com a finalidade de
servir a página como aplicação XML. O documento está de acordo com a sintaxe
XM L e será renderizado normalmente em navegadores que suportam XM L.

Vamos supor que o desenvolvedor do exemplo tenha se esquecido de usar aspas

no valor destaque da classe para o elemento strong inserido no primeiro parágrafo,
como mostrado a seguir.
<p>Essa página contém marcação XHTML cstrong class=destaque>sem e rro s < /s tro n g x /p >

Se o documento for servido com o tipo de M IM E text/html, o erro de marcação

será ignorado pelo navegador e a renderização do documento será normal. Contudo,
servindo o documento como XM L com o tipo de M IME application/xml ou application/
xhtml+xml o erro será fatal e não haverá renderização, conforme figuras 1.1 e 1.2.

Na figura 1.1 mostramos a não renderização da página nos navegadores Firefox

e Safari.

f à rsufeéi i ,:: - _______ V i rt&Ê

I VT s; ;,j http: o-;aíhossfcyhtrrilS/pg.htnaI- rrd.phpi

I http://lQ calhost/.../pg-Hhtml->im l.php

Erro no processamento de XML: formatado incorretamente

Posição: http://localhost/html5/pg-xhtml-xml.php
Número da linha 19, coluna 52:

• jV-E síía pãgiit.H rwnf-èm m a r o r^.Ao X H T M L strong d a s s ^ J e s t aq' s-rroS' / s t rouq '/p. •

Figura 1.1 —Erro em documento XHTML em navegador standard.

46 HTML 5

Notar que não há um padrão de apresentação da mensagem de erro, a manei­

ra de apresentá-lo ao usuário difere de um navegador para outro. O navegador
Opera, ao apresentar a mensagem de erro, oferece adicionalmente um link para a
renderização da página como se o erro não existisse. Por outro lado, o navegador
Internet Explorer, que não oferece suporte para XM L, comporta-se apresentando ao
usuário uma caixa de diálogo com opção de abrir o arquivo com outro programa
ou salvá-lo (Figura 1.2).

http,7/focalhüít/html5/pq-xhtrnl-xml,pbp

H Página em B ranco :» P ág in a •

mmmmm J- 'r LA ^ T:
D e se ja salvar ou abrir este a ig u iv o ?

Nom e: pg-xhfcml-xml.php

; ^ ; Tipo: P H P Script, 6 7 3 b y te s
Origem: localhoSt

Abrir Sa lv a r j j| C ancela r J

Em bota a rqu ivo s provenientes d a Internet p o ssa m ser úteis, a lgu n s

arqu ivos p od em danificar s e u com putador. S e v o c ê n ã o confiar em
s u a origem, n ã o abra nem sa lve este arquivo. Q ual é o r isc o ?

Figura 1.2 - Erro em documento XHTML no ÍE.

Essa rigidez no tratamento de erros contribuiu muito para a não adoção da

XH TM L como XM L pelos desenvolvedores. Estima-se que mais de 95% das pági­
nas web contenham pelo menos um erro de marcação. Quem se arriscaria a ter seu
site “quebrado” por conta de uma distração ou um mínimo engano involuntário?

1 .8.1 T e m p la te m ín im o

Em HTML5, um documento para ser válido, além do D O CTYPE, deve conter o

elemento title e nada mais. Assim, um template mínimo da HTM L5 pode ser es­
truturado da seguinte forma:
< ! DOCTYPE html>
< title > T e m p la te < / title >
< ! - - Aqui os conteúdos da pagina -->
Capítulo 1 ■ Apresentação da HTML5 47

A marcação mostrada anteriormente valida como HTML5, contudo a marcação

a seguir não valida.
< ! DOCTYPE html>
< title> Te in plate< /title >
< ! - - Aqui os conteúdos da página -->

Notar que na primeira marcação o comentário HTM L inserido na última linha

do código mostrado contém um texto não acentuado e na segunda marcação o
texto foi acentuado.

O uso de caracteres não ASCII (tais como acentuação) na marcação HTML5,

mesmo em comentários, obriga que se declare explicitamente a codificação de ca­
racteres. Se isso não for feito, a renderização dos caracteres não ASCII será truncada
e o documento não passará no validador. Assim, chegamos ao template mínimo,
conforme mostrado a seguir:
< ! DOCTYPE htinl>
<title> Te ff lp la te < /title >
<raeta ch arset=utf-8>
< ! - - Aqui os conteúdos da página -- >

E evidente que esse template mínimo não deve ser usado em um site real, mas
você poderá usá-lo para testes e experiências com a linguagem HTML5.

A sintaxe para D O C TYPE é case insensitive (não distingue minúsculas de mai-

úsculas), o que significa que qualquer uma das sintaxes seguintes é perfeitamente
válida.
< ! DOCTYPE html>
< ! doctype html>
< ! DOCTYPE HTML>
< ! doctype HTML>
< ! DoctyPE hTMl>

Apesar da flexibilidade com a sintaxe, aconselho a usar a primeira ou a segun­

da forma mostrada, que são aquelas preferidas pela maioria dos desenvolvedores.
Escolha entre as duas a que mais lhe agrada e siga com ela.

É muito provável que você esteja familiarizado com uma sintaxe H TM L para
declaração de caracteres no documento com o uso do elemento m eta, conforme
mostrado a seguir.
<meta http-equiv="Conten t-T ype" co ntent= "te xt/h tm l; ch arset= ut f-8">
48 HTML 5

Na sintaxe HTML5, essa declaração foi abreviada para:

<meta charset=utf-8>

Pelo princípio da compatibilidade, a HTM L5 continua a oferecer suporte para a

sintaxe da H TM L e você, se preferir, pode usá-la nos documentos novos ou deixá-la
como está nos documentos existentes migrados para a HTML5.

Tal como na HTM L, em HTML5 o uso de aspas ou apóstrofes nos valores dos
atributos é facultativo; assim, as duas sintaxes mostradas a seguir são válidas.
<meta charset=utf-8>
<meta ch arset= "utf-8">

Como já dissemos, a sintaxe HTM L5 é compatível tanto com a H TM L quanto

com a XH TM L; portanto, se você está criando um documento XH TM L, terá de
fechar as tags e usar aspas em nomes de atributo. Deverá escrever como mostrado
a seguir:
<meta ch ars e t= "utf-8 " />

1o8„2 Template HTML5 - versão 1

A seguir, vamos examinar e comentar um template HTM L5 com base em sintaxe
HTM L4.

A seção head de um documento H T M L 5 deve conter obrigatoriamente o elemento

title e opcionalmente são admitidos os seguintes elementos naquela seção: base,
command, link, meta, noscript, script, style. Desses sete elementos opcionais apenas o
elemento command não é previsto nas versões anteriores da linguagem H T M L , pois
se trata de um novo elemento da H T M L 5 .

Em aplicações que já possuem um título intrínseco, por exemplo, um e-mail escrito

em HTM L que já tem um campo destinado ao assunto, o elemento t i t l e pode ser
dispensado.

Observe a marcação a seguir:

< ! DOCTYPE html>
<html la n g = " p t- b r " >
<head>
<meta chanset=''utf-8">
< ti tle > T e m p la te < / title >
<meta name="description" content="Template HTML5 do l i v r o do Maujor.">
<meta name="keywords" c o n te n t= " lis ta de palavras-chave">
1'pítulo 1 ■ Apresentação da HTML5 49

<meta name="author" content=''Mauricio Sainy S i l v a " >

<meta name="generator" content="HTMl-Kit 292">
<meta name="robots" c o n t e n t = " a ll " >
<1ink re l= "s ty le s hee t" href="mais. css">
<style>
I* e s t il o s incorporados *1
</style>
rscript src ="pa th/m o de rnizr-1 .5 .m in.]'s">< /sc rip t>
cscrip t s r c = " s c r i p t s . j s " x / s c r i p t >
</head>
<body>
< ! - - Aqui os conteúdos da página -- >
</body>
</html>

O elemento meta destina-se a fornecer metadados, ou seja, informações adicionais

: : ore a página. Informações essas que não podem ser transmitidas com uso dos
: .emais elementos permitidos na seção head do documento.

Os atributos previstos nas especificações da H TM L5 para o elemento meta são:

- =:e, h tt p -e q u iv , co n te n t e c h a rs e t, além dos atributos globais. Sempre que o atributo
■ate ou h ttp -e q u iv for definido, deve-se definir também o atributo c o n te n t. Nesses
r : sos, o metadado é do tipo par nome/valor no qual o valor do atributo name éo
come no par e o valor do atributo conte nt é o valor no par.

A quantidade de elementos meta a inserir na seção head do documento e o tipo

r.e metadado a codificar são funções de cada projeto; no exemplo mostrado, os
r.ementos foram inseridos apenas a título de ilustração, assim aquela seção não
: retende ser um guia rígido de metadados.

No exemplo, inserimos na seção head, também a título de ilustração, os elementos

l i n k , s ty le e s c r i p t .

Notar que todos os valores de atributos na marcação mostrada estão entre aspas.

1 .8.3 Template H T M L 5 - versão 2

.’amos examinar e comentar a seguir um template HTM L5 idêntico ao template
mostrado no item anterior, também com base em sintaxe HTML4.

Observe a marcação a seguir:

<!D0CTYPE html>
chtml lang=pt-br>
50 HTML 5

<head>
<meta ch arset=utf-8>
< ti tle > T e m p la te < / title >
<meta name=descpiption content="Template HTML5 do l i v r o do Maujor,">
<meta name=keywords c o n te n t= " lis ta de palavras-chave">
oneta name=author content="Mauricio Samy Silva ">
<meta name=generator content="HTML-Kit 292">
<meta name=robots content=all>
< lin k re l= sty le she et href=mais. css>
<style>
/* e s t il o s incorporados * /
</style>
< script s r c = " p a t h / r a o d e r n iz r -1 .5 .m in .j s ''x / s c r ip t>
< script s rc = s c rip ts . j s x / s c r i p t >
</head>
<body>
< ! - - Aqui os conteúdos da página -->
</body>
</html>

Nessa versão mostramos a sintaxe alternativa que admite valores de atributos

sem aspas.

Mas por que conservamos as aspas em alguns valores do atributo content? Notar
que para os casos em que isso ocorreu o valor do atributo é uma frase ou conjunto
de palavras separadas por espaços e, se tirarmos as aspas, o valor do atributo deixa
de ser único, o que não é válido. Com aspas, o parser H TM L interpreta o valor do
atributo como uma só string. Notar que, para o elemento meta que fornece informa­
ções para os robôs que visitam a página, o valor do atributo co n te n t está sem aspas,
pois tal valor é uma só palavra.

1.8.4 Tempiate XHTML5 - versão 1

Vamos examinar e comentar a seguir um tempiate XH TM L5 com base em sintaxe
X M L e destinado a ser servido com o tipo de M IM E text/html.

Observe a marcação a seguir:

<! DOCTYPE h tm b
<html lang="pt- br" >
<head>
<meta charset=” u t f - 8 " />
< title > T e m p la t e < / title >
Capítulo 1 ■ Apresentação da HTML5 51

<meta name="description'' content="Template HTML5 do l i v r o do Maujor." />

<meta name=''keywords" co n te n t= " lis ta de palavras-chave" />
<meta name="author" content="Mauricio Samy S i lv a " />
cmeta name="generator" content="HTML-Kit 292" />
<meta name="robots" co nte n t= " a ll" />
< lin k re l= "s ty le s h e e t" href="niais.css">
<style>
/ * e s t i l o s incorporados * /
</style>
< s c rip t s r c = " p a t h / m o d e r n i z r - 1 .5 .m i n .j s " x / s c r i p t >
< s crip t s r c = " s c r i p t s . j s " x / s c r i p t >
</head>
<body>
< ! - - Aqui os conteúdos da página -- >
</body>
</html>

Nessa versão o template é compatível com a sintaxe XML, pois valores de atributo
estão entre aspas e elementos vazios estão fechados. Convém ressaltar que, embora
escrito com a sintaxe XM L, o template não está apto a se valer das funcionalidades
da X M L e deverá ser servido com o tipo de MIME text/html.

1.8.5 Template XHTML5 - versão 2

Vamos examinar e comentar um template X H T M L5 com base em sintaxe X M L,
destinado a ser servido com o tipo de M I M E a p p lic a tio n / x m l ou a p p lic a tio n / x h tm l+ x m l.

Observe a marcação a seguir:

chtml xinlns="http://www.w3.org/1999/xhtml" xm l:lang = "p t-b r">

<head>

< ti tle > T e m p la te < / title >

cmeta name="description" content=”Template HTML5 do l i v r o do Maujo r." />
<meta name="keywords" co n te n t= " lis ta de palavras-chave" />
<meta name="author" content="Mauricio Samy S i lv a " />
<meta name="generator" content="HTML-Kit 292" />
cmeta name="robots" c o ntent= "all " />
c l in k re l= "s ty le s hee t" href="m ais.css" />
<style>
/* e s t il o s incorporados * /
</style>
52 HTML 5

<script src = "pa th/m o de rnizn-l .5.m in. j s " x / s c r i p t >

< s crip t s r c = " s c r i p t s . j s " x / s c r i p t >
</head>
<body>
< ! - - Aqui os conteúdos da página -- >
</body>
</html>

Nessa versão o template é compatível com a sintaxe XM L e apto a valer-se das

funcionalidades da XM L devendo ser servido com o tipo de M I M E application/xml
ou application/xhtml+xml.

Em documentos XML, não há necessidade da declaração de DOCTYPE, pois por

padrão a renderização acontece em modo standard. Também não há necessidade de
declaração da codificação de caracteres, pois por padrão ela é em. UTF-8. Contudo,
é indispensável que se declare o atributo xmlns no elemento-raiz do documento
apontando para o arquivo que contém o namespace para XML. Notar ainda que o
atributo para definição do principal idioma no qual os conteúdos do documento
foram escritos é xml:lang e não lang como na sintaxe HTML.

1 .8.6 Template XHTML5 - versão 3

Com a chegada da HTML5, o Consórcio W 3C criou o conceito de marcação poliglota
e publicou especificações e diretrizes para a criação de tal marcação.

As especificações definem marcação poliglota assim:

Documento que usa marcação poliglota é um documento HTML5, que é, ao

mesmo tempo, um documento HTML e XML escrito conforme um conjunto
de regras definidas. Marcação poliglota é processada e compatível com a
HTMLe com aXHTML, segundo as regras das especificações para a HTML5.

Nessa versão o template usa uma marcação poliglota, conforme segue:

< ! DOCTYPE htrnb
<html xmlns="http://www.w3.org/1999/xhtml" la n g = "p t -b r " xm l:lang = "p t-b r">
<head>
<meta ch arse t= "utf-8 " />
< ti tle > T e m p la te < / title >
<meta name="description" content="Template HTML5 do l i v r o do M a u jo r.” />
<meta name="keywords" c o n t e n t = T i s t a de palavras-chave" />
cmeta name="author" content="Mauricio Samy S i lv a " />
<meta name="generator" content="HTML-Kit 292" />
:=pítulo 1 ■ Apresentação da HTML5 53

<meta naine="robots" co n t e n t = " a U " />

< lin k re l= "s ty le s h ee t" href="mais.css" />
<style>
/ * e s t i l o s incorporados * /
</style>
< s crip t src= "pa th/m o de rnizr-1.5 .m in. j s " x / s c r i p t >
< s crip t s r c = " s c r i p t s . j s " x / s c r i p t >
</head>
<body>
< ! - - Aqui os conteúdos da página -- >
</body>
</html>

A marcação poliglota deve satisfazer aos seguintes requisitos:

O D OCTYPE, como prevê a XM L, deve ser declarado em maiusculas e o html

:u e se segue ao D O C TYPE deve ser em minúsculas. Lembre-se de que em H TM L
s sintaxe é insensível ao tamanho de caixa, mas em marcação poliglota é rígida.

Os elementos html, head, title e body devem obrigatoriamente constar da marcação.

O elemento html deve obrigatoriamente conter os atributos xm lns, la ng e x m L la n g .

Os namespaces XM L permitidos em marcação poliglota são aqueles para as

tecnologias S V G e MathML e devem ser declarados nos elementos svg e math res-
oectivamente, conforme sintaxe mostrada a seguir:
<svg xmlns = " http://w ww.w3.o rg /2000/svg ">,. ,</ sv g >
<math xmlns="http://www.w3.org/1998/Math/MathML">.. ,</math>

O outro namespace permitido é para xlink que pode ser declarado tanto no
elemento html quanto no elemento svg que contenha essa funcionalidade, como
mostrado a seguir:
<html xmlns="http://www.w3.org/1999/xhtml"
x m ln s :x li n k = " http://www.w 3.org /19 99 /xlin k " la ng ="p t-br" xm l:lang = "p t-b r">

ou
<svg x m ln s :x lin k = " h ttp ://w w w .w 3 .o rg / 19 9 9 /x lin k " > .. ,</ sv g >

A declaração de caracteres deve constar da seção head do documento.

A sintaxe da marcação deve seguir as regras da XM L. Para maiores informações

sobre sintaxe XM L, consulte: http://www.maujor.com/w3c/xhtmll0_2ed.html e http://www.maujor.

com/w3ctuto/xhtmlfaq. htm l.
 Novidades na HTML5

Neste capítulo teremos uma visão geral das novidades introduzidas pelas especi­
ficações da H TM L5 mostrando o novo modelo de conteúdo da linguagem. Abor­
daremos os tópicos que dizem respeito às diferenças entre as linguagens H T M L4 e
HTMLó.Tais diferenças são relativas principalmente à criação de novos elementos
e atributos, à redefinição de alguns elementos e atributos existentes, à atualização
de elementos e atributos considerados obsoletos, à criação de novas APIs e à ex­
tensão das interfaces HTMLDocument e H T M LE le m e n t. Relacionaremos os atributos globais
definindo e exemplificando cada um deles. Estudaremos com detalhes os novos
elementos da linguagem, definindo-os, esclarecendo as regras de emprego e mos­
trando exemplos de uso.

2,1 introdução
A maioria dos elementos e atributos da H TM L4 continua válida na H TM L5 e, em
consequência, nada do que você aprendeu até agora sobre marcação H T M L terá
sido inútil. Os seus velhos e conhecidos elementos hl, p, div, s p an, b l o c k q u o t e bem
como os atributos c l a s s , t i t l e , a c c e s s k e y , name, v a l u e e tantos outros estão previstos
na H TM L5 com as mesmas finalidades e valor semântico que tinham na H TM L4 .

2.2 Modelo de conteúdo

A especificação para a HTM L5 estabelece um Modelo de Conteúdo que vem a ser
a descrição do tipo de conteúdo que se espera ser inserido em cada elemento. Os
conteúdos de cada elemento H TM L deverão estar de acordo com o que estabelece
o modelo de conteúdo para o elemento.

54
Capítulo 2 ■ Novidades na HTML5 55

Cada elemento pertence a uma ou mais categorias que agrupam elementos

segundo seu modelo de conteúdo. As categorias de conteúdos são:

■ Metadados

■ Fluxo

■ Seção

■ Cabeçalhos

■ Frase

■ Incorporado

■ Interativo

■ Formulário

A especificação para a H TM L5 mostra uma ilustração de como as categorias de

conteúdos se relacionam entre si. Transcrevemos na figura 2.1 a ilustração conforme
consta do site http://www.wha twg.org.

Figura 2.1 - Modelo de conteúdo.

Os elementos de formulários, além de poderem pertencer às categorias de Fluxo,

de Frase e/ou Interativa, pertencem também a uma categoria específica denominada
Formulário que se desdobra nas seguintes subcategorias:

■ Listas

■ Rótulos

■ Envio

a Limpeza

Acredito ser desnecessário definir o tipo de conteúdo de cada categoria, pois o

nome da categoria já passa a ideia exata para o tipo.
56 HTML 5

2 3 Atributos globais
Atributos globais são aqueles que podem ser usados com todos os elementos da
HTML5, ou seja, não somente com os elementos novos, mas também com os ele­
mentos da H TM L4 que agora fazem parte da HTML5.

No item 2.4 apresentaremos os elementos da HTM L5 e faremos referências aos

atributos que eles suportam. Quando se tratar de elemento que suporte os atribu­
tos globais, apenas citaremos seu suporte a eles sem mais considerações, pois, para
não repeti-los em cada um dos elementos, vamos examiná-los separadamente e em
detalhes nesta seção.

2 3 .1 accesskey
(Atributo tecla de acesso) Destina-se a permitir que o usuário dê o foco ao elemento
com uso do teclado, ou seja, atribui uma tecla de acesso ao elemento. O valor desse
atributo é um caractere ou uma lista de caracteres do teclado, separados por espaço.
Observe, nos exemplos a seguir, a sintaxe para uso desse atributo em duas situações
diferentes de um documento.
<ul>
< l i x a h r e f= " / s i t e - a .h t m l " a c c e s s k e y = " a " > S i te A < / a x / l i >
< l i x a h r e f = 7 s i t e - b . h t m l " a c c e s s k e y = " b " > S it e B < / a x / l i >
d ix a h r e f = " / s i t e - c . htm l" a c c e s s k e y = " c " > S it e C < / a x / l i >
</ul>

Nessa primeira situação, o agente de usuário deve prover meios de dar o foco
aos links para os sites A, B e C quando o usuário pressiona as teclas Ctrl+Shift+a,
Ctrl+Shift+b, Ctrl+Shift+c respectivamente.

Vejamos outro exemplo:

<form a c tion =7b us ca .p hp ">

<label>Buscar: cinput type=''busca" name="q" a c c e s s k e y = " b 0"></label>

<input type="submit">
</form>

Nessa situação, o foco deve ser dado ao campo de busca quando o usuário
pressiona as teclas Ctrl+Shift+b. Se o usuário estiver usando um dispositivo móvel
ou outro similar que possua somente teclado numérico, o foco deve ser dado ao se
pressionar a tecla 0.
Capítulo 2■ Novidades na HTML5 57

O atributo accesskey teve seu uso redefinido na HTML5, pois, em versões ante­
riores da HTM L, ele não era um atributo global. Estava restrito aos elementos a,
area, button, input, labei, legend e textarea.

2 3 .2 dass

■Atributo classe) Destina-se a atribuir uma classe identificadora para o elemento.

Trata-se de um atributo identificador e a diferença para o atributo identificador
único id estudado adiante é que em um mesmo documento o nome da classe pode
ser usado para identificar várias instâncias de um mesmo elemento, bem como para
identificar elementos diferentes. Observe, nos exemplos a seguir, a sintaxe para uso
desse atributo em diferentes elementos de um documento.
<p c l a s s = " d e s ta q u e " > T e x t o do parágrafo marcado com a classe destaque</p>
<hl class="destaque corum">Cabeçalho de nível 1 marcado com a classe destaque</hl>

Para os elementos mostrados, uma folha de estilo é capaz de identificar os di­

ferentes elementos identificados com a classe destaque e estilizar todos eles com a
mesma cor, por exemplo. É permitido definir mais de um valor para esse atributo
e nesse caso as regras de estilos definidas para ambos os valores serão aplicadas ao
elemento. A ordem de declaração dos valores é irrelevante e, havendo conflito de
regras de estilo aplicadas aos valores, prevalece o efeito cascata das folhas de estilos.

233.contenteditab5e
(Atributo conteúdo editável) Atributo novo, criado pela HTML5. Esse atributo ad­
mite os valores true e false e se destina a permitir que o usuário edite os conteúdos
do elemento no navegador. Trata-se de um atributo inventado pela Microsoft e
suportado pelos seus navegadores há tempos e que foi introduzido na especificação
para a HTML5. E um atributo herdado, pois, quando definido com o valor true para
um elemento Container, faz com que seus elementos-descendentes sejam editáveis.

Observe, a seguir, a sintaxe para uso desse atributo.

<div contenteditable="true">
<hl> Cabeçalho do n í v e l </hl>
<p>Parágrafo <span>um</spanx/p>
<p contenteditable="false">Parágrafo dois</p>
<img s rc="im agens/a vatar.gif" a lt = " a v a t a r do Maujor" />
</div>
58 HTML 5

Nesse exemplo todos os conteúdos do div são editáveis. Para o parágrafo dois
não é possível editar o seu conteúdo textual, contudo é possível editá-lo como um
todo, apagando-o por exemplo.

23=4 contextmenu
(Atributo menu de contexto) Atributo novo, criado pela HTM L5 não é suportado
por nenhum navegador atual. Esse atributo cria um menu de contexto personali­
zado para o elemento em que foi inserido. Menu de contexto é aquele que se abre
quando o usuário clica com o botão direito do mouse sobre o elemento para o qual
ele foi projetado. Se você clicar com o botão direito do mouse em qualquer lugar da
barra de ferramentas de seu sistema operacional, ou sobre uma figura em um site
da web, abre-se um menu de contexto.

O valor desse atributo deve ser igual ao valor do atributo id do Container do

menu de contexto personalizado. Observe, a seguir, a sintaxe para uso desse atributo.
<form name="exemplo">
<label>Nome base: <ínput name="nbase" type=”t e x t “ contextmenu="merm_nome"></label>
<menu type="co ntext" id="menu_nome">
<command la bel="Es colh er randomicamente um nome"
onclick="document. forms, exemplo, elements. nbase. value = escolherNome()">
xcommand label="Preencher demais campos"
onclick="preencherCampos(document.forms,exemplo.elements.nbase.value) ">
</menu>
</form>

Nesse exemplo criamos um menu de contexto que se abre quando o usuário

entra em um campo de texto de um formulário rotulado como “Nome base”. O
evento que dispara a abertura do menu de contexto não é necessariamente o clique
com o botão direito do mouse, mas sim depende do elemento em que o menu for
atrelado. No nosso caso, o menu está atrelado a um controle in pu t do tipo text eo
menu abrirá quando o usuário der o foco àquele controle.

O menu de contexto deve ser construído com uso do novo elemento menu da
HTML5.

No exemplo o menu de contexto oferece duas opções ao usuário. Ambas as op­

ções quando escolhidas disparam o funcionamento de uma função JavaScript que
preenche o controle input do formulário.
Capítulo 2 ■ Novidades na HTML5 59

2.3.5 d ir
(Atributo direção do texto) Destina-se a especificar a direção de escrita do texto.
Esse atributo admite dois valores, a saber: ltr, sigla em inglês para left to right, que
traduzimos por “da esquerda para a direita”, que vem a ser a direção da escrita
ocidental (por exemplo: o português), e rtl, sigla em inglês para right to left, que
traduzimos por “da direita para a esquerda”, que vem a ser a direção da escrita
oriental (por exemplo: o japonês). Observe, nos exemplos a seguir, a sintaxe para
uso desse atributo.
<p dir="ltr">Texto com a trib u to de direção ocidental</p>
<p dir="rtl" >Texto com a trib u to de direção oriental</p>

Existe a propriedade CSS direction que cumpre a mesma finalidade desse atri­
buto e admite os mesmos valores além do valor inherit, como mostrado a seguir
com estilização in-line.
<p style="direction:ltr;">Texto com e s t il iz a ç ã o de direção ocidental</p>
<p style="direction:rtl; " >Texto com a tr i b u to de direção orie ntal</p>

A especificação para a HTM L5 recomenda expressamente o uso do atributo dir

em lugar da estilização com a propriedade direction, com a finalidade de manter
a informação sobre a direção do texto acessível para agentes de usuário com CSS
desabilitada, como é o caso de mecanismos de busca.

2.3.6 draggable
(Atributo de arraste) Atributo novo, criado pela HTML5. Esse atributo torna arras-
tável o elemento em que foi inserido. Admite os valores true, false e auto. O valores
true e f a l s e fazem o elemento tornar-se arrastável ou não respectivamente e o valor
define o arraste-padrão para essa funcionalidade, conforme implementada no
a u to

navegador, isto é, se por padrão o elemento é arrastável ele permanece arrastável

quando o valor a u to for definido. Observe, a seguir, a sintaxe para uso desse atributo.
<div id="drag" draggable="true"x/div>

Nesse exemplo o div#drag é arrastável na página, mas isso não significa que sim­
plesmente definindo o atributo você possa arrastar livremente o elemento. E preciso
estabelecer, com uso de JavaScript, as condições de arraste. A especificação para a
HTML5 criou vários atributos e métodos que visam a criar as facilidades de arraste.
60 HTML 5

23.7 hidden
(Atributo de relevância) Atributo novo, criado pela H TM L5; não é suportado por
nenhum navegador atual. Esse atributo torna irrelevante o elemento em que foi
inserido. É um atributo booleano para o qual não há necessidade de se definir
valores. Quando presente torna o elemento irrelevante. Os agentes de usuário não
devem renderizar elementos marcados com esse atributo.

Esse atributo não deve ser usado meramente para esconder elementos. Sua fina­
lidade é desconsiderar conteúdos irrelevantes para determinado contexto ou não
relacionados ao conteúdo atual.

Observe, a seguir, a sintaxe para uso desse atributo.

<div id = " t e la " h i d d e n x / d i v >

(Atributo identificador único) Destina-se a atribuir um nome identificador para o

elemento. Em um mesmo documento, o nome usado para identificar um elemento
deve ser único, isto é, não é válido atribuir o mesmo nome de id para mais de um
elemento. Observe, nos exemplos a seguir, a sintaxe para uso desse atributo em
várias instâncias de ocorrência do elemento parágrafo em um documento.
<p i d = ” cor-um ">Texto do parágrafo marcado com o identificador cor.-uitx/px
<p i d = " d i f e r e n t e " > T e x t o do parágrafo marcado com o identificador díferente</p>
<p Íd = "a b c 3 " > T e x to do parágrafo marcado com o identificador abc3</p>
<p Í d = " c o r - d o i s " > T e x t o do parágrafo marcado com o identificador cor-dois</p>

O valor do atributo id é um nome que você pode escolher à vontade. Nas versões
anteriores da HTM L, existiam restrições quanto ao primeiro caractere do nome
escolhido, como: não é válido começar o nome de um atributo com um número ou
hífen. Por outro lado, o caractere underscore ( _ ) é válido. A HTML5, porém, esta­
belece unicamente que valores de id devem ter, pelo menos, um caractere e quando
mais de um não pode haver espaço em branco entre eles.

Mas, afinal, qual é a utilidade de se identificar um elemento no documento?

Programas, scrípts e folhas de estilo têm a capacidade de se comunicar com a mar­
cação H TM L e conseguem selecionar elementos com base em seu identificador. Por
exemplo: o parágrafo mostrado anteriormente, com id cujo valor é cor-um, é facilmente
identificado por um arquivo de folhas de estilo e estas poderão estilizá-lo com uma
cor diferente da adotada para os demais parágrafos do documento.
Capítulo 2 ■ Novidades na HTML5 61

23.9 ite m *

(Atributo para Microdados) A HTM L5 criou o Modelo Microdados que é uma

extensão de Microfonnats e se ciestina a fornecer um mecanismo complementar de
adição de semântica aos elementos HTML, destinada à leitura por máquinas, como
robôs de indexação. Nesse modelo, Microdados é a denominação para um grupo de
pares item/propriedades. Itens e propriedades são inseridos como atributos/valores
em elementos da marcação. No modelo Microdados, um item relaciona-se com
suas propriedades com uso dos atributos item scope, ite m p ro p , it e m r e f, ite m ty p e , ite m id .

Para maiores detalhes sobre esses novos atributos da HTML5, consulte o capítulo 11

23.10 lang
(Atributo de idioma) Destina-se a definir o idioma do conteúdo de um elemento.
Se esse atributo não estiver presente no elemento, o idioma é o mesmo definido no
seu elemento-pai. Todos os navegadores suportam esse atributo e é de boa prática
sempre declará-lo no elemento-raiz html com a finalidade de informar aos agentes
de usuário o idioma principal no qual a página foi escrita. Os valores para esse
atributo são as abreviaturas dos idiomas do mundo inteiro relacionadas em norma
internacional. Observe, nos exemplos a seguir, a sintaxe para uso desse atributo no
elemento-raiz de um documento escrito em português do Brasil e em um elemento
dentro desse documento marcando um termo escrito em inglês.
<html l a n g = " p t - b r " >

<p>0 termo in glês <span lang="en">welcome</span> significa bem-vindo</p>

2 3 .11 speücheck
(Atributo de correção) Atributo novo, criado pela H TM L5; não é suportado por
nenhum navegador atual. Esse atributo se destina a disponibilizar a funcionalida­
de de correção ortográfica e gramatical para os conteúdos textuais inseridos nos
elementos para os quais o atributo foi definido. Funciona criando um corretor se­
melhante à ferramenta corretora de alguns editores de textos, por exemplo, o Word
da plataforma Windows. A especificação não define a interface de usuário para a
correção. Os valores possíveis para esse atributo são t r u e e f a l s e indicando correção
habilitada ou não, respectivamente. Observe, no exemplo a seguir, a sintaxe para
uso desse atributo em um campo de texto do tipo textare a. No exemplo tudo o que
for digitado no campo será submetido ao corretor ortográfico,
ctextarea rows="8" cols="40" s p e l l c h e c k = " t r u e " x / t e x t a r e a >
62 HTML 5

2 3 .1 2 síyle

(Atributo para estilização) Destina-se a definir regras de estilo para o elemento em

que é aplicado. Com o uso desse atributo, você pode, por exemplo, aplicar cores,
mudar o tamanho das letras, posicionamentos e praticamente tudo que diga respeito
à apresentação visual do conteúdo do elemento em que o atributo for aplicado. Veja,
a seguir, um exemplo de aplicação desse atributo.
<p s t y l e = " c o l o r : r e d ; " > U m parágrafo e s t i l i z a d o na cor vermelha</p>

23.13 tabindex
(Atributo de tabulação) Destina-se a definir uma ordem de tabulação, ou seja, a
sequência em que os elementos receberão o foco quando o usuário navegar com
uso do teclado. Veja, a seguir, um exemplo de aplicação desse atributo.
<p tabindex="5">Parágrafo</p>
<p tabindex="l">Parágrafo</p>
<a href="#" tabindex="4">link</a>
<img src="imagem.png" alt="" tabindex="2" />
<h4 tabindex="3">Título 4</h4>

23.14 title
(Atributo título) Destina-se a definir um título para o elemento em que é aplicado.
Leitores de tela normalmente leem o valor desse atributo. Veja, a seguir, um exemplo
de aplicação do atributo.
<p title="ConteÚdo do título">l)m parágrafo para exemplificar o a tr i b u to t i t l e < / p >

2 .4 Novos elem entos

A especificação para a HTM L5 introduziu novos elementos de marcação com a

finalidade de oferecer aos desenvolvedores melhores opções para estruturar seus do­
cumentos. Examinaremos a seguir os novos elementos de marcação, sua apresentação
e finalidades, categorias, interface a que pertencem e atributos para eles previstos.

2.4.1 article
Destina-se a marcar um conteúdo autossuficiente em uma página, documento ou
aplicação. O conteúdo marcado é, a princípio, reusável e pode ser distribuído de
Capítulo 2 ■ Novidades na HTML5 63

::rm a independente, por exemplo: via RSS. Alguns exemplos de conteúdos para
í erem marcados com esse elemento são: um post em um fórum, um artigo de uma re-
msta ou jornal, uma matéria publicada em um blog, um comentário postado por um
rsitante, um widget ou gadget interativo ou qualquer outro conteúdo independente.

Elementos a rtic le podem ser aninhados e nesses casos o conteúdo aninhado

ceve estar relacionado com o conteúdo no qual foi aninhado. Por exemplo: uma
matéria publicada em um blog que admita comentários dos leitores é apropriada
cara ser marcada com esse elemento contendo aninhados outros elementos a rtic le
rara marcar os comentários, como mostrado a seguir:
<article>
// Marcação HTML para uma matéria do blog
< artic le>
// Comentário 1 sobre a matéria
< /a rticle >
< a rtic le >
// Comentário 2 sobre a matéria
< /a rticle >

< / a r tic le >

Atributos para este elemento: atributos globais.

2.4.2 aside
Destina-se a marcar um conteúdo separado, mas tangencialmente relacionado com
: conteúdo em volta dele. Em tipografia são os blocos de conteúdos nas barras-
..iterais. Esse elemento pode ser usado para obter o efeito tipográfico que ele confere
.to conteúdo. Mas, cuidado, usar aside para marcar conteúdos simplesmente porque
estão posicionados à esquerda ou à direita do conteúdo principal nem sempre é
ema escolha acertada. A posição do conteúdo candidato a ser marcado com aside
cão deve ser considerada, mas sim considere-se o tipo de conteúdo.

Como regra geral e não absoluta e definitiva, uma boa indicação de conteúdo
rara aside é aquele que, embora relacionado ao conteúdo principal, não prejudicará
í na compreensão se for retirado.

Alguns exemplos de conteúdos para serem marcados com esse elemento são:
yullquotes ou barras-laterais, banners e textos com propaganda, agrupamento de
mecanismos de navegação e outros conteúdos que possam ser considerados se-
rarados do conteúdo principal. Observe o exemplo a seguir que demonstra o uso
64 HTML 5

desse elemento para marcar a coluna de um blog contendo links para as categorias
de posts e blogroll.
<body>
// Marcação HTML para o topo do blog
<artic le >
// Post 1
< /a rticle >
<art ic le >
// Post 2
< /a rticle >

<aside>
<nav>
<hl>Categorias</hl>
<ub
< l i x a h re f= "cr'> ca te go ria K / a x / l i >
< l i x a href="c2">categoria 2 < / a x / l i >
</ul>
<hl>Blog ro ll< /h l>
<ul>
< l i x a hre f ="h t t p : / / b l o g l . com">Blog K / a x / l i >
< l i x a hre f= " http://b lo g2.com">Blog 2 < / a x / l i >
</ul>
</nav>
</aside>

Atributos para este elemento: atributos globais.

2 .4 .3 a u d io

Esse elemento será estudado com detalhes no capítulo 3.

2.4.4 canvas
Esse elemento será estudado com detalhes no capítulo 4.

2.4.5 commarsd
Esse elemento destina-se a marcar um comando a ser evocado pelo usuário. Um
comando pode fazer parte de um menu de contexto ou barra de ferramenta criada
com o elemento menu (ver 2.4.6) ou ainda ser um comando isolado na página, por
Capítulo 2 q Novidades na HTML5 65

exemplo, definindo um atalho de teclado. Esse elemento para ser renderizado deve
ser usado como elemento-filho do elemento menu. Atualmente nenhum navegador
oferece suporte para esse elemento.

O elemento command admite os seguintes atributos: atributos globais, type , la b e i,

e title .
i c o n , d i s a b l e d , ch ecked, r a d i o g r o u p

O atributo type define o tipo de comando, podendo ser do tipo comando asso­
ciado a uma ação, um comando de escolha de uma opção ou ainda uma seleção.
Os valores possíveis para esse atributo são: command, ch eckbox e r a d i o . O valor-padrão
e command que cria um comando normal associado a uma ação. O valor checkbox cria
um comando do tipo caixa de seleção de opções e o valor radio um comando tipo
seleção do item de uma lista.

O atributo labei destina-se a definir um nome para o comando e deve ser uma
string não vazia.

O atributo icon destina-se a definir um elemento gráfico para representar o

comando.

O atributo disabled é booleano e, quando presente, destina-se a desabilitar comando.

O atributo checked é booleano e, quando presente, destina-se a selecionar uma

opção do comando. Não deve ser usado se o comando é do tipo command.

O atributo radiogroup destina-se a agrupar comandos do tipo radio. Só deve ser

usado se o comando é do tipo radio.

O atributo title destina-se a fornecer ao usuário uma dica descritiva do comando.

2 A 6 m enu

Esse elemento destina-se a marcar uma lista de comandos e é usado como elemento
Container para elementos command. Atualmente nenhum navegador oferece suporte
para esse elemento.

O elemento menu admite os seguintes atributos: atributos globais, type e labei.

O atributo type define o tipo de menu que está sendo criado. Os valores possíveis
para esse atributo são: context, toolbar e list. O valor-padrão é lis t que simplesmente
cria uma lista de comandos sem qualquer ação. O valor context cria um menu do
tipo contexto e o valor toolbar um menu tipo barra de ferramenta.

Observe a seguir dois exemplos de uso dos elementos command e menu.

66 HTML 5

Exemplo 1: Nesse exemplo criamos um menu do tipo barra de ferramentas com

três opções para alinhamento: à esquerda, no centro e à direita. Cada opção poderá
ser acionada por clique em um ícone que irá disparar a execução de uma função
JavaScript. O exemplo a seguir esclarece o uso dos atributos estudados anteriormente.
<menu type="toolbar ">
<coitimand type="ra dio" radiogroup="alinhamento" checked="checked"
label="Esquerda" ic on =''icons/alL.png" o n c li c k = " s e t A líg n ( ' esq') " >
«rommand type="ra dio" radiogroup="alinhamento"
label="Centro" icon=l,ic ons /alC . png" o n c li c k = " s e t A lig n ( ' ce n tro ' ) " >
ccommand type="ra dio" radiogroup="alinhamento"
la b e l = " D i r e i ta " icon= "icons/alR.png " o n c l i c k = " s e t A l i g n ( ' d i r ' ) ' ' >
</menu>

Exemplo 2: Nesse exemplo criamos um menu do tipo barra de ferramentas com

três itens: Arquivo, Editar e Ajuda. Cada item contém uma lista de opções de escolha
para realizar uma ação mediante disparo de uma função JavaScript. Para o item
Arquivo a ação é seguir um link.
<menu type="toolb ar">
< li>
<menu la bel="Arquivo ">
<button type="button" o n c lic k = "fn o v o ( ) " > N o v o .. ,</button>
<button type="button" o n c l i c k = " f a b r i r ( ) " > A b r i r . . .</button>
<button type=” button" o nclick = "fs alvar()"> Sa lva r< / bu tton >
<button typ e ="button" oncli ck="fsalvarc om o()"> Salv ar como.. .</button>
</menu>
< /li>
<li>
<menu la b e l= " E d it a r ">
cbutton type="button" o ncli ck = ''e co piar()'‘ >Copiar</button>
cbutton type="button" o nclick="e cortar( )">Recort ar< /button>
<button type=''button" onclick ="e cola r( )">Cola r< /b utto n>
<button type=''button" o n c li c k = " e e x c l u ir ( ) " >Excluir</bu tto n>
</menu>
< /li>
< li>
<menu label="Ajuda">
< l i x a h r e f= " h e lp .h t m r '> A j u d a < / a x / li>
< l i x a h r e f= " a b o u t.h tm l"> S o b re < /a x /li>
</menu>
< /li>
</menu>
Capítulo 2 ■ Novidades na HTML5 67

Observe na figura 2.2 uma opção de renderização do menu correspondente à

marcação do exemplo 2.

Arquivo Ajuda

Copiar
Recortar
Colar
Excluir

Figura 2.2 - Elementos menu e command.

2.4.7 datalist
Esse elemento foi criado para ser usado em conjunto com o elemento input. Destina-
se a fornecer uma lista de sugestões para preenchimento do campo input e permite
sue o usuário selecione uma das opções de uma lista de opções predefinida como
sugestão pelo desenvolvedor ou então entre no campo um valor diferente daqueles
sonstantes da lista de opções sugeridas. Navegadores que não oferecem suporte
rara esse elemento renderizam normalmente o campo input, já que se trata de um
elemento previsto nas especificações anteriores da H T M L e largamente suportado
pelos navegadores. Atualmente somente os navegadores Opera e Firefox oferece
suporte para esse elemento.

Para o elemento input foi criado pela HTM L5 um atributo novo. Ele permite rela­
cionar o campo com a lista de opções sugeridas. Trata-se do atributo list. Define-se
um valor qualquer para o atributo lis t do campo input e um id com o mesmo valor
para o elemento datalist criando um vínculo entre o campo e a lista de opções su­
geridas. A marcação mostrada no exemplo a seguir esclarece a criação desse vínculo.

O exemplo mostrado a seguir cria uma lista de opções sugeridas, para preen­
chimento de um campo destinado a coletar o nome de uma fruta. Esse exemplo
está disponível no site do livro e atualmente deverá ser carregado no navegador
Opera 11+ ou Firefox 4+ para se visualizar seu efeito.
<label f o r = " fr u " > F r u ta p r e f e r i d a :< / l a b e l x b r >
list="frutas"
<input typ e = " te x t" id = "fru " >
<datalist id="frutas">
•coption value="Abacate">
<option value="Abacaxi">
<option value="Banana">
<option value="Mamão">
68 HTML 5

<option value="Manga">
<option value="Pera">
< / d a ta lis t>

•(>, [c2-datalist.html]

Ao dar-se o foco ao campo aparece a lista de sugestões. Caso a opção do usuário

não conste da lista, ele poderá entrar normalmente o nome da fruta de sua prefe­
rência no campo de texto. Observe na figura 2.3 a renderização desse elemento no
navegador Opera.

. H- ILSdufTaUJor || !____ __ _____i __ _ _ _ ______

n j í } ■ . V J flle:/ /lo ca lho st/D :/Sltes/ livroH TM L5/codigos/ca p_02/ c2-d atalist1html

(Heimento datallst
t r u t a p re fe rid a :

Abacate
Abacaxi
Banana
Mamao
:ufr> F ru ta p re fe rid a : <hx>
Manga
:e x t ,f . .r..S:~="f r u t a s " .:!d=,rf r u " >
Pera
,ff r u t a s ">
04 = "Abacate” >
05 ~ pfí±iacaxi.?p>

Figura 2.3 - Elemento datalist.

No navegador Firefox o comportamento é diferente. As sugestões só aparecem

quando o usuário digita a primeira letra.

2.4.8 details
Esse elemento destina-se a fornecer informações textuais ou controles de formulário
adicionais sobre determinada página ou sobre um conteúdo específico da página.
Por padrão os conteúdos fornecidos por esse elemento não são colocados à vista do
usuário e o acesso a eles se dá mediante ação do usuário, normalmente por clique em
um elemento. Ao usuário é facultada a opção de mostrar ou esconder os conteúdos.

O elemento d e ta ils admite os seguintes atributos: atributos globais e open.

O atributo open quando presente faz com que os conteúdos adicionais sejam colo­
cados à vista quando o elemento é renderizado. Esse elemento poderá ser usado
em conjunto com o elemento summary (ver 2.4.9, a seguir).
Capítulo 2 ■ Novidades na HTML5 69

2.4.9 summary
-ís e elemento foi criado para uso em conjunto com o elemento d e ta ils e destina-se
zornecer um rótulo ou breve sumário das informações adicionais fornecidas por
. a ta ils . Trata-se de um elemento primeiro-filho do elemento d e ta ils e que admite
■.cenas os atributos globais.

A especificação prevê que se esse elemento não for usado como elemento-filho
;e d e ta ils o agente de usuário deverá fornecê-lo nativamente com o conteúdo tex-
: v.al “Details”. Experimente fazer uma cópia do exemplo fornecido no site retirando
: elemento summary da marcação para visualizar essa funcionalidade. Experimente
:embém usar o atributo open no elemento d e t a ils .

O exemplo a seguir esclarece o uso dos elementos d e ta ils e summary, mas nenhum
■rvegador atual oferece suporte para esses elementos. No entanto, existe um plugin
fjuery desenvolvido por Mathias Bynens (http://github.com/mathiasbynens/noSelect-jQuery-
-1-gin) que simula o comportamento do navegador para esses elementos.

Na página de exemplo disponível no site do livro usamos o plugin de Mathias e

cê poderá visualizar o comportamento do navegador para o exemplo em qualquer
\-vegador recente.
<details>
<summary>Livros do Maujor</summary> // clicando esse elemento mostra/oculta o conteúdo adicional
<dl>
<dt>Construindo s ite s com CSS e (X)HTML</dt>
<dd>Ano: 2007</dd>
<dd>Páginas: 438</dd>
<dt>jQuery - A b ib lio te c a do programador la vaScri pt</dt>
<dd>Ano: 2008</dd>
<dd>Páginas: 543</dd>
<dt>A3AX com jQuery - Requisições AIAX com a simplicidade de jQuery</dt>
<dd>Ano: 2009</dd>
<dd>Páginas: 327</dd>
<dt>3avaScript - Guia do programador</dt>
<dd>Ano: 2010</dd>
<dd>Páginas: 604</dd>
</dl>

< /d e ta ils >

-Ah [c2-details.html]
70 HTML 5

2 A I O fig u r e

Esse elemento destina-se a servir de Container para conteúdos independentes re­

lacionados a um conteúdo específico no fluxo do documento. Use esse elemento
para marcar conteúdos, como imagens, ilustrações, diagramas, fotos, gráficos, vídeos,
linhas de códigos e similares. Os conteúdos desse elemento, embora relacionados
ao conteúdo principal, podem ser retirados do fluxo principal e serem posiciona­
dos tangencialmente a ele, ou mesmo movidos para uma página específica ou um
apêndice.

Esse elemento admite apenas os atributos globais e poderá ser usado em conjunto
com o elemento figcaption (ver 2.4.11).

2 A 1 1 fig c a p tio n

Esse elemento destina-se a marcar uma legenda para o conteúdo inserido com uso
do elemento figure e deve constar da marcação como elemento-filho do elemento
figure. Admite apenas os atributos globais.

Os exemplos a seguir esclarecem alguns usos desses elementos.

Exemplo 1 : marcar uma imagem

<figure>
<img src="copacabana.png" alt="Vista da praia de Copacabana, Posto 6.">
<figcaption>Copacabana a eterna princesinha do m ar.</figcaption>
</figure>

Exemplo 2: marcar um vídeo

<figure>
<video src="matrix.mov"x/video>
< f ig c a p t i o n > T r a i le r do filme M a t r ix .< / f ig c a p t io n >
</figure>

Exemplo 3: marcar parte de um poema

<figure>
<p>iieu canto de morte,<br>
Guerreiros, ouvi: <br>
Sou filho das selvas, <br>
Nas selvas cresci; <br>
Guerreiros, descendo<br>
Da tribo tupi.</p>
Ispítulo 2 ■ Novidades na HTML5 '

<figcaption>
<cite>I-3uca-Pirama</cite> l^o. verso do IV canto do poema épico de Gonçalves Dias.
</figcaption>
</figure>

Exemplo 4: marcar um trecho de código

<figure>
<figcaption>Regra CSS para estilização do elemento Hl.</figcaption>
<prexcode>hl {
font: italic 22px sans-serif;
color: red;
text-align: center;
}
</codex/pre>
</figure>

2,4.12 footer
Esse elemento destina-se a marcar o rodapé de uma seção ou da página como um
::d o e deve conter informações sobre o conteúdo da seção ou página, como o seu
;.utor, links para documentos relacionados, direitos autorais e similares. Admite
apenas os atributos globais.

E importante notar que a HTM L5 altera radicalmente a semântica e uso desse

e.emento em relação às versões anteriores da HTM L. O conceito tradicional de
mdapé é que cada página tenha seu rodapé único normalmente marcado com um
:iv#rodapé (ou div#footer).

Em HTM L5 uma página poderá conter vários rodapés, pois é válido que cada
; eção da página tenha seu próprio rodapé, bem como a página pode também conter
seu rodapé à maneira como estamos acostumados a marcar em (X)HTML.

O elemento footer em si não cria na marcação uma nova seção tal como criam
: s elementos article, aside, nav e section.

Outra mudança no uso desse elemento diz respeito ao posicionamento do rodapé

em relação ao conteúdo da seção no qual ele está inserido, pois nada impede que
: rodapé seja marcado no início da seção, não havendo obrigatoriedade de ele ser
posicionado no final, muito embora essa seja a posição mais comum para o rodapé.

Convém ressaltar que as informações de contato sobre o autor ou editor de uma

seção ou página devem ser marcadas com uso do elemento address e este, por sua
vez, poderá estar contido no elemento footer.
72 HTML 5

O elemento address destina-se a fornecer informações de contato do autor ou editor,

portanto não deve ser usado para marcar endereços em geral. Para marcar endereços
que não sejam do autor ou editor use o elemento p (parágrafo).

Os exemplos a seguir esclarecem alguns usos para o elemento footer.

<article>
<!-- conteúdo do elemento article -->
<footer>
<!-- informações sobre o conteúdo de article -->
</footer>
</article>

Exemplo 2:
<nav>
<!-- conteúdo do elemento nav -->
<footer>
<!-- informações sobre o conteúdo de nav -->
</footer>
</nav>

Exemplo 3:
<body>
<!-- conteúdos da página -->
<section>
<article>
<!-- conteúdo do elemento article -->
<footer>
<!-- informações sobre o conteúdo de article -->
</footer>
</article>
<footer>
<!-- informações sobre o conteúdo de section -->
</footer>
</section>
<footer>
<!-- informações sobre o conteúdo da página -->
</footer>
</body>
; : pítulo 2 ■ Novidades na HTW1L5

Exemplo 4:
<body>
< f o o t e r x a h r e f = " . . / " > I r para a Home P a g e < / a x / f o o t e r >
<hgroup>
<hl>Lorem ipsum</hl>
<h2>The ipsum o f a l l lorems</h2>
</hgroup>
<p>A dolor s i t amet, consectetur . . . </p>
< f o o t e r x a h r e f = " . ./" > I r para a Home P a g e < / a x / f o o t e r >
</body>

2.4.13 header

lís e elemento destina-se a marcar o cabeçalho de uma seção ou da página como

nni todo e deve conter os elementos hl-h6 (não obrigatoriamente) bem como infor­
mações sobre o conteúdo da seção. Também pode ser usado para marcar uma tabela
ae conteúdos para a seção, um formulário de busca ou logotipos importantes para
a página. Admite apenas os atributos globais.

Uma página poderá conter vários elementos header e estes, por sua vez, os ele­
mentos hl-h6. Assim, é válido marcarmos na mesma página vários elementos hl-h6.

O elemento header em si não cria na marcação uma nova seção tal como criam
is elementos article, aside, nav e section.

Os exemplos a seguir esclarecem alguns usos para o elemento header.

Exemplo 1:
<body>
<header>
< h l> T ítu lo p rin c ip a l da página</hl>
</header>
// conteúdo da página
</body>

Exemplo 2:
<artic le >
<header>
< h l> T ítu lo da seção a rtic le < / h l>
<ul>
< l i > D a t a : . . ,< / l i >
< l i > H o r a :. . ,< / l i >
 HTML 5

< l i > C a t e g o r i a :. . . < /li>

</ul>
</header>
// conteúdo do elemento a r t i c l e
< / a rtic le >

Exemplo 3:
<body>
<header>
<hl>Dogos online</hl>
<nav>
<ul>
< l i x a hre f=7jo go s">log os< /a >
< l i x a href="/forum">Forum</a>
< l i x a href="/download">Download</a>
</ul>
</nav>
<h2>Notícia impontante</h2> < ! - - aqui começa a segunda subseção -->
< ! - - conteúdo da subseção " N o t íc i a importante" -->
<p>Atualize seu software para o jogo de hoje.</p>
<h2>logos</h2> < ! - - aqui começa a t e r c e i r a subseção -- >
</header>
<p>Você tem t rê s jogos a t i v o s : </p>
< ! - - conteúdo da subseção "logos" -->

Esse elemento destina-se a agrupar os elementos hl-h6, quando existir mais de um de­
les como cabeçalho de uma seção ou da página. Admite apenas os atributos globais.

Uma página poderá conter vários elementos hgroup.

Os exemplos a seguir esclarecem o uso para esse elemento.

Exemplo 1:
<hgroup>
<hl>Capítulo 2</hl>
<h2>Novidades na HTML5</h2>
</hgroup>
Capítulo 2 ■ Novidades na HTML5 75

Exemplo 2:

< artic le>

<header>
<hgroup>
<h2>Título do artigo</h2>
<h3>Subtitulo do artigo</h3>
<hgroup>
<pxtiroe>18 dezembro de 20 10</tim ex/p >
</header>
< ! - - conteúdo de a r t i c l e - - >
< / a rtic le >

2.4.15 keygen
Esse elemento destina-se a manipular um par de chaves criptografadas, públicas e
privadas para autenticação da comunicação com o servidor por ocasião do envio
de formulários.

O elemento keygen admite os seguintes atributos: atributos globais, autofocus, challenge,

disabled, form, keytype e name.

Atualmente não existe um consenso sobre como implementar esse elemento

e nem mesmo o reconhecimento por parte dos fabricantes de software sobre sua
relevância. Assim, não entraremos em maiores detalhes deixando registrado apenas
sua existência nas especificações para a HTML5.

esse elemento destina-se a marcar uma palavra ou trecho de texto que deva ser desta­
cado com o propósito de servir como referência. Admite apenas os atributos globais.

Por exemplo: em uma citação usamos esse elemento para marcar determinada
oalavra que se tornou relevante para o contexto em que a citação foi inserida.

Não confundir esse elemento com o elemento strong. O elemento strong destina-
se a marcar um trecho importante ao qual se pretende dar forte ênfase e o elemento
iark um trecho relevante para o contexto no qual está inserido e para o qual se
ore tende dar destaque.

Atualmente os navegadores renderizam o trecho de texto marcado com esse ele­

mento com um fundo na cor amarela, destacando-o visualmente do restante do texto.
76 HTML 5

2 A l 7 m eter
Esse elemento destina-se a marcar uma medida escalar compreendida entre deter­
minados limites conhecidos.

Esse elemento não deve ser usado para marcar uma medida representativa do
andamento de uma tarefa, por exemplo, a porcentagem de arquivo sendo baixada
para o disco local em uma operação de download. Para isso existe o elemento
que estudaremos adiante. Também não é apropriado o uso desse elemento
progress

para marcar uma medida representativa de uma porção da qual não se conhecem
os limites superiores e inferiores, por exemplo, a altura de uma pessoa, já que não
existe limite superior e inferior para a altura de pessoas.

Alguns exemplos de uso adequado para o elemento meter seriam: para marcar
a porcentagem de uso do espaço em disco, o número de votos obtidos por um
candidato em uma eleição na qual a quantidade total de votantes é conhecida ou
a quilometragem atingida por um corredor de maratona em determinado instante.

O elemento meter admite os seguintes atributos: atributos globais, value, min, max,
low, high e optimum.

O atributo value define o valor da medida marcada e é um atributo de uso

obrigatório.

O atributo min define o valor mínimo da escala à qual a medida marcada pertence
e se for omitido será considerado igual a 0.

O atributo max define o valor máximo da escala à qual a medida marcada pertence
e se for omitido será considerado igual a 1.

O atributo lowdefine um valor dentro da faixa à qual a medida pertence e abaixo

do qual se considera um valor baixo.

O atributo high define um valor dentro da faixa à qual a medida marcada pertence
e acima do qual se considera um valor alto.

O atributo optimum define um valor considerado ótimo dentro da faixa à qual a

medida marcada pertence.

Se o valor dos atributos min e max não for especificado, eles serão, por padrão,
iguais a 0 e 1 respectivamente.

Recomenda-se que os autores forneçam uma alternativa textual a ser inserida

como conteúdo desse elemento para garantir o acesso à informação transmitida por
esse elemento em agentes de usuário que não suportam o elemento meter.
Capítulo 2 ■ Novidades na HTML5 77

O atributo global t i t l e deve ser usado para indicar a unidade de medida do valor
representado pelo elemento.

Os exemplos a seguir esclarecem o uso para esse elemento.

Exemplos:
•oneter v a l u e = " 0 . 7 ' ' x / m e t e r > // 0 , 7 em um f a ix a de 0 a 1 ou seja 70%
<meter value="8" min="2" max="20"x/meter> // 8 em uma escala que va i de 2 a 20

<meter value="9" min="0" max=“ 10" low="4" high="8" optimum="10"></ineter>

// 9 em uma escala que v a i de 0 a 10 e para a qual va lores entre 0 e 4 são considerados baixo s,
// entre 8 e 10 alt os e o v a lo r ótimo é 10

<meter value="7" min="0" max="10">7 pontos em 10 possíveis</meter> // com t e x t o a lt e r n a t iv o

<meter value="80" min="0" max="120" title="Km/h">Velocidade de 80Km/h</meter> // com a tr ibu to t i t l e

Atualmente os únicos navegadores que suportam esse elemento é o Chrome e o

Opera que renderizam uma barra retangular na cor cinza preenchida em cor sólida
em uma porção correspondente ao valor representado.

2.4.18 nav
Esse elemento destina-se a marcar uma seção da página que contenha links para
outras páginas ou para outras partes dentro da própria página, ou seja, uma seção
contendo links para navegação externa ou interna. Admite apenas os atributos globais.

Nem todos os grupamentos de links em uma página são candidatos a serem

marcados com esse elemento. Somente os maiores grupos de link devem ser com
ele marcados. Por exemplo: é comum no rodapé do site a inserção de um pequeno
grupo de links para algumas páginas do site, como as de termos de serviço, direitos
autorais, política de privacidade, home page etc. Para esses grupamentos o elemento
fo o te r é suficiente e não devemos usar o elemento nav.

O exemplo a seguir esclarece o uso desse elemento em duas seções de uma página.
<body>
<hl>A linguagem de marcação HTML5</hl>
<nav>
<ul>
< l i x a h r e f= 7 " > H o m e < / a x / li >
< l i x a href="/codigos">Códigos dos e xe m plos < /a x /li >
. . . m a i s link s internos ao s i t e . . .
</ul>
</nav>
< artic le>
78 HTML 5

<header>
<hl>Elemento Canvas</hl>
<p>A API para gráficos criados com Ja va Script.< /p >
</header>
<nav>
<ul>
< l i x a href=''#metodos''>Métodos da A P I < / a x / l i >
< l i x a h re f= "# atrib utos "> Atrib uto s da A P I < / a x / l i >
. . . m a i s lin k s in ternos à p á g i n a . . .
</ul>
</nav>
<div>
csection id="metodos">
<hl>Métodos para formas complexas</hl>
< p > ...m a is conteúdo.. ,</p>
</section>
csection id = "a trib u tos ">
<hl>Atributos para e s t iliza ç ã o < /h l>
< p > . . . mais conteúd o ...< /p >
</section>
. . . mais conteúdo.. .
</div>
<fo oter> // não usado o elemento nav

< p x a href="?editar">Editar</a> | <a href="?apagar">Apagar</a> |

<a href="?renomear">Renomear</ax/p>
</footer>
< /a rtic le >
<footer>
<pxsmall>© Copyright 2011 L i v r o HTML5 do H a ujor< /s m a llx/p >
</footer>
</body>

Esse elemento destina-se a servir de Container para o resultado de um cálculo. Para

esclarecer sua finalidade, vamos apresentar um exemplo prático de uso bastante
comum em sites de compra online.

Considere um formulário no qual o usuário define, em um de seus campos,

o número de itens de determinada mercadoria que deseja comprar e cujo preço
unitário é conhecido no site.
Capítulo 2 ■ Novidades na HTML5 79

Ao preencher o campo “quantidade”, imediatamente aparece em um campo “valor

total” o resultado da multiplicação da quantidade pelo valor unitário do produto
a adquirir. Na H TM L atual não existe um elemento específico para marcar o re­
sultado da multiplicação, e o que se faz é usar um campo de texto (elemento in p u t
ty p e = "te x t") para apresentar o valor total.

A H TM L5 criou o elemento o u tp u t para marcar resultados de cálculos, que é o

indicado para o “valor total” do nosso exemplo. Observe a marcação a seguir que
esclarece o uso do elemento o u tp u t.

► HTML
<p>Preço u n i tá r io do produto: R$320,00</p>
<form name="formulario" method="get" action="">
< pxla b el>Q uan tidad e: <input t yp e = " te x t" na m e = " q d e "x /la b e lx /p >
<p>Valor t o t a l : R$<output name="vtotal"x/outputx/p>
</form>

►JavaScript
fu nctio n c a lc u la V a l o r T o t a lQ {
var qdeltens = d o c u m e n t .f o r m s [ 'f o r m u l a r i o '] [ 'q d e '] .v a l u e ;
var v a lo r T o t a l = (qdeltens * 320), t o F i x e d ( 2 ) j
d o c u m e n t.fo rm s fT o rm u la rio d fv to ta iq .v a lu e = valorTotal;

}
window.onload = f u n c t i o n Q {
document.forms[' fo r m u l á r i o 1] [ ' q d e ' ] .onblur = ca lc u la V a lo rT o ta l;

O e l e m e n t o o u tp u t admite os seguintes atributos: atributos globais, f o r , form e name.

O atributo f o r destina-se a associar o elemento o u tp u t aos controles do formulário

ao qual ele está referenciado. O valor desse atributo deve ser uma lista de valores igual
aos valores do atributo id de cada controle do formulário, como mostrado a seguir.
<form name=''formulario" method="get" action="">
<pxlabel>Quantidade: cinput type="text" name="qde" id="quantidade"x/labelx/p>
<p>Valor total: R$<output name="vtotal" for="quantidade"x/outputx/p>
</form>

O atributo form destina-se a associar de forma única o elemento o u tp u t ao formu­

lário ao qual ele pertence. O valor desse atributo deve ser igual ao valor do atributo
id do formulário, como mostrado a seguir.
80 HTML 5

«forni name="formuIario" inethod="get" action="" id="foriti-um ">

< p x o u t p u t fo rm = "f o rm -u m " name="vt otal"> </o utp utx/p >

«/fornis

O atributo name destina-se a declarar um nome identificador para o elemento o u t p u t .

IA

Esse elemento destina-se a marcar o andamento (ou progresso) de uma tarefa. A

medida do andamento pode ser feita de duas formas distintas.

Forma indeterminada: quando a medição informa o progresso da tarefa, mas

não há uma forma clara de quantificar o quanto falta para a sua conclusão, por
exemplo, em tarefas que dependem de uma resposta do servidor.

Forma determinada: quando a medição é feita com um valor numérico com­

preendido entre 0 (zero) e um valor máximo, sendo assim possível determinar a
porcentagem realizada e faltante para a conclusão da tarefa.

O elemento progress admite os seguintes atributos: atributos globais, v a l u e , max

e fo r m .

O atributo value destina-se a definir o quanto de tarefa já foi realizada.

O atributo max destina-se a definir o quanto é necessário para realizar a tarefa.

O atributo fo rm destina-se a associar de forma única o elemento progress ao

formulário ao qual ele pertence, quando for o caso. O valor desse atributo deve ser
igual ao valor do atributo id do formulário.

Observe a marcação a seguir que esclarece o uso do elemento progress.

<section>
<h2sAndamento da tarefa</h2>
<p>Progresso: « p r o g r e s s id="p" max="100"xspan>0</span>%</progressx/p>
« s c ri p t s
var barraAndamento = doc unient.getElementByldCp1) ;
fu nctio n up date Pro gre ss(va lo rA tual ) {
barraAndamento.value = v a lo r A t u a l ;
barraAndamento.getElementsByTagName('s p a n ' ) [ 0 ] . t e x t C o n t e n t = v a l o r A t u a l ;

}
« / s c r ip ts
«/sections
Capítulo 2 Q Novidades na HTÍWLS 81

2.4.21 ruby
Esse elemento destina-se a marcar pequenas anotações sobre textos, contendo in-
mrmações sobre a maneira correta de pronúncia do texto. Trata-se de uma forma
tipográfica usada em escrita oriental sem similares na escrita ocidental e que aqui
consta apenas a título de informação. Não faremos maiores considerações sobre esse
r.emento e seus elementos relacionados rp e rt. Para maiores informações sobre esses
c-ementos, consulte os itens 4.6.19, 4.6.20 e 4.6.21 das especificações para a HTML5.

Esse elemento destina-se a marcar, genericamente, uma seção na página. Entende-se

como seção um grupamento de conteúdos tratando de um mesmo tema e tipica­
mente contendo um cabeçalho. Admite apenas os atributos globais.

São exemplos de seções: capítulos de um livro, abas de uma caixa de diálogo,

meões numeradas de uma tese de doutorado ou ainda as seções introdução, infor­
mações de contato e novidades de uma homepage.

Não se deve considerar o elemento s e c t i o n como um Container genérico. Quando

orecisarmos de um elemento Container genérico a ser usado para fins de estilização
cu para ser manipulado por script, devemos empregar o elemento div.

O exemplo a seguir esclarece o uso desse elemento. Nele mostramos‘um artigo

sobre a região geográfica sul do Brasil onde usamos três vezes o elemento sec tion .

<artic le >
<hgroup>
<hl>Região sul do Bra sil </hl>
<h2>A região com o maior índice de a lf a b e tiza ç ã o do Brasil<h2>
</hgroup>
<p>A região sul do Brasil compreende os estados do Rio Grande do Su l, Santa Catarina e Paraná.</p>
< s e c t io n >
<hl>Rio Grande do Sul</hl>
<p>0 maior e mais populoso estado da região sul possui clima temperado.. .</p>
</section>

<section>
<hl>Santa Catarina</hl>
<p>Santa Catarina possui as mais lindas praias do l i t o r a l b r a s i l e i r o . . . </p>
</section>
82 HTML 5

<section>
<hl>Paraná</hl>
<p>No Paraná encontramos a mata de arauc ária uma das mais importantes florestas
sub tropic ais do mundo...</p>
</section>
< /a rtícle >

Notar no exemplo mostrado que cada sec tion tem seu elemento h l. Usar mais
de um cabeçalho do nível 1 ou de qualquer outro dos seis níveis possíveis em uma
mesma página é perfeitamente válido em HTML5.

2.4.23 source
Esse elemento permite que se definam múltiplas alternativas para arquivos de mí­
dia. Devem ser usados como elementos-filho dos elementos a u d i o e v i d e o apontando
para diferentes arquivos alternativos para uma das duas mídias. Esse elemento será
estudado com detalhes no capítulo 3.

2.4.24 time
Esse elemento destina-se a marcar tanto um horário na faixa 0-24h quanto uma
data do calendário gregoriano. Opcionalmente pode marcar, também, a diferença
do horário local para o horário GM T (time-zone offset). A finalidade desse elemento
é fornecer uma codificação para data-hora de modo que máquinas possam ler o
código e processar, por exemplo, agendando eventos em um calendário ou lembrando
datas de aniversário.

O elemento tim e admite os seguintes atributos: atributos globais, d a t e ti m e e p ubdate .

O atributo d a t e t i m e , quando for especificado, destina-se a definir o horário e/

ou data que está sendo marcado. Se não for especificado esse atributo, o horário
e/ou data deverá ser inserido como conteúdo do elemento. O valor desse atributo
deve ser uma string representativa do grupo data-hora em formato válido para a
linguagem HTML.

O atributo pubdate é booleano e quando for especificado informa que o horário

e/ou data marcados se referem ao instante em que o conteúdo foi publicado. Uma
página poderá conter somente um elemento tim e com o atributo p ub d a te que se re­
fere ao instante de publicação da página. Contudo, dentro de uma mesma página,
elementos a rtic le diferentes podem conter diferentes elementos tim e com datas de
publicação diferentes.
Capítulo 2 ■ Novidades na HTML5 83

Os exemplos a seguir esclarecem o uso desse elemento.

Exemplo!: com uso do atributo pubdate

<artic le >
<hl>Tarefas</hl>
<footer>Publicado em: <time pubdate>19-12-2010</time>.</footer>
<p>Trocar a lâmpada da s a l a . </p>
< /a rticle >

Exemplo2: com uso dos atributos p ub da te e d atetim e. Nesse exemplo navegadores

que não suportam HTM L5 renderizam “Hoje” e os que suportam renderizam a
data em formato local.
< artic le>
<hl>Tarefas</hl>
<footer>Publicado em: <time pubdate datetime="20l0-l2-19''>Hoje</time>.</footer>
<p>Trocar a lâmpada da s a l a . </p>
< /a rticle >

ExemploB: com uso dos atributos pub da te e d ate tim e . Nesse exemplo navegadores
que não suportam HTM L5 nada renderizam e os que suportam renderizam a data
em formato local.
<art ic le >
<hl>Tarefas</hl>
<footer>Publicado em: <time pubdate date tim e="2010 -1 2-19 T09:15Z"></tim e>.</f ooter>
<p>Trocar a lâmpada da s a l a . </p>
< /a rticle >

Esse elemento será estudado com detalhes no capítulo 3.

2.4.26 v id e o
Esse elemento será estudado com detalhes no capítulo 3.
 Áudio e vídeo
I
\

Neste capítulo, serão apresentados os elementos audio e video. Estudaremos como

inserir mídia em um documento HTM L5 mostrando as opções para os tipos de
arquivos-padrão, para inserção de mídia. Analisaremos como fazer a conversão de
arquivos de vídeo com uso de ferramentas gratuitas disponíveis na Internet. Serão
mostradas as funcionalidades da API de mídia, descrevendo-se e exemplificando os
atributos, métodos e eventos da API. Serão mostrados vários exemplos, disponíveis
no site do livro, que esclarecem a sintaxe e uso dos elementos de mídia da HTML5.

3 .1 audio

Esse elemento destina-se a incorporar um som ou um stream de áudio.

Observe o exemplo a seguir que demonstra o uso desse elemento.

< a u d io src = "som .m p 3">
< /a u d io >

Somente isso, simples e direto, sem necessidade de plugins, Flash, QuickTime,

Windows Media Player, Real Audio e toda a parafernália a ser considerada quando
se pretende incorporar som em uma página web.

Basta declarar o caminho para o arquivo de som no atributo src do elemento. O

som é reproduzido com as funcionalidades nativas do navegador.

Navegadores que não dão suporte ao elemento audio renderizam normalmente o

conteúdo desse elemento. Assim, para servir o som para esses navegadores, definimos
a incorporação do som de maneira como fazemos em (X)HTML, por exemplo: com
uso de Flash. Observe o exemplo a seguir.

84
Capítulo 3 ■ Áudio e vídeo 85

<audio src="som.mp3">
< ! - - Código (X)HTML para inserção de som.mp3 com Flash -- >
</audio>

Nesse exemplo, navegadores que suportam HTM L5 ignoram o código para

inserção do som com Flash e os que não suportam executam o código Flash.

Ainda não há um consenso sobre qual codec adotar para ser implementado na-
uvamente. A tendência atual é deixar por conta do fabricante a implementação de
MP3 ou Ogg Vorbis. Isso nos obriga a servir marcação para ambos os formatos se
pretendemos criar uma implementação crossbrowser.

Felizmente o elemento audio admite como elemento-filho o elemento source cuja

ruralidade é substituir o atributo src e permitir formatos alternativos para o som a
ser servido.

O elemento source destina-se a permitir que se definam arquivos diferentes para

incorporar as mídias audio e video em uma página.

O elemento source admite os seguintes atributos: atributos globais, src,type, e media.

O atributo src aponta para o endereço do arquivo de mídia a incorporar na

pagina. E um atributo obrigatório cujo valor é um U RL não vazio.

O atributo type destina-se a informar ao navegador o tipo de mídia a ser incorpo­

rado de modo que ele possa decidir o que fazer antes de baixar o arquivo. O valor
nesse atributo deve ser um M I M E ty p e válido.

O atributo type admite ainda o parâmetro codecs que determinados M I M E ty p e defi­

nem e deve ser informado para que o navegador saiba como o arquivo foi codificado.

O atributo media destina-se a informar ao navegador o tipo de mídia. Os valores

possíveis para esse atributo são aqueles listados nas especificações para Media
Queries ( http://dev.w3.org /csswg/css3-mediaqueries/) e o valor-padrão é all.

Observe o exemplo a seguir que esclarece o uso do elemento source e seus atributos.
<audio>
csource src="som.ogg" type="audio/ogg; c o d ecs = 'vo rbis '" media="screen">
csource src=''som.mp3" type="audio/mpeg; codecs='mp3"' media="screen">
< ! - - Código (X)HTML para inserção de som.mp3 com Flash -->
</audio>

Nesse exemplo escrevemos um código crossbrowser para servir som com HTML5.
86 HTML 5

Alternativamente podemos inserir marcação (X)HTM L no elemento audio com a

finalidade de servir navegadores que não suportam qualquer marcação para inserção
de som, como mostrado a seguir.
<audio>
<source src=''som.ogg" type="audio/ogg''>
<source src=''som.mp3" type="audio/mpeg">
< ! - - Código (X)HTML para inserção de som.mp3 com Flash -->
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href=''som.mp3">download de som.mp3</ax/p>
</audio>

Mas, cuidado. Marcação (X)H TM L inserida no elemento audio como mostrado

anteriormente não cumpre finalidade de oferecer alternativa textual para o som,
pois ela é renderizada somente em navegadores que não suportam o elemento audio.
Assim, por exemplo, um usuário com necessidade auditiva usando um navegador-
padrão não tem acesso à marcação (X)HTML.

Os atributos desse elemento são: atributos globais, src, preload, autoplay, loop,
Controls.

O atributo src destina-se a indicar o caminho para o arquivo de som a incorporar

na página.

O atributo preload destina-se a indicar como o autor espera que seja o pré-carre-
gamento do som na página, tendo em vista otimizar a experiência do usuário. Esse
atributo admite os valores none, metadata, auto. O valor none instrui o navegador a não
fazer o pré-carregamento do som e talvez seja uma boa decisão usar esse valor em
uma página contendo vários diferentes sons incorporados. O atributo metadata ins­
trui o navegador a fazer o pré-carregamento somente dos metadados do som, como
dimensões, duração, controles etc. O valor auto define que o som será pré-carregado.

Os atributos autoplay e loop destinam-se respectivamente a iniciar o som auto­

maticamente, tão logo a página seja carregada e a repetir o som indefinidamente.
Observe o exemplo a seguir.
<audio autoplay loop>
csource src="som.ogg" type="audio/ogg">
<source src="som.mp3" type="audio/mpeg">
< ! - - Código (X)HTML para inserção de som.mp3 com Flash -- >
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href="som,mp3">download de som.mp3</ax/p>
</audio>
Capítulo 3 ■ Áudio e vídeo 87

A sintaxe XHTML5 por ser compatível com XML requer que seja declarado o valor
dos atributos. Assim, para atributos booleanos, como a u to p la y , lo op e C o n t r o ls ,
devemos declarar o valor do atributo igual seu nome, ou seja, autoplay=''autoplay",
loop="loop" e c o n t r o l s = " c o n t r o l s \

Não confundir atributo booleano com valor booleano. Um atributo booleano é aquele
que pode estar ou não presente na tag de abertura de determinado elemento e valor
booleano para atributo são os valores t ru e e f a l s e . Assim, é sintaticamente incorreto
declarar, por exemplo, c o n tro ls = " tru e " .

A presença do atributo Controls faz com que o navegador renderize uma barra de
controle nativa contendo botões do tipo play e pause bem como controle de volume.
O uso desse atributo é conforme mostrado a seguir.

►HTML
<audio controls>
<source src="som.ogg" type=,laudio/ogg,, >
csource src="som.mp3" type="audio/mpeg''>
<source src="som.wav" type="audio/wave">
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href="som.mp3">download de som.mp3</ax/p>
</audio>

■ I [c3-audio-ex1.html]

Na figura 3.1 mostramos a renderização nativa dos controles de som nos nave­
gadores Opera, Firefox e Safari.

Opera

firefox

l-kmsam m
Safari
► --------------- ------

Figura 3.1 - Controles de som.

É possível personalizar os controles nativos de som da HTM L5 com uso de

JavaScript. A API de som prevê os métodos play() e pauseQ e o atributo volume que
permitem a personalização. Observe o exemplo mostrado a seguir.
88 HTML 5

t> JavaScript

1. < scrip t ty p e = " te x t/ ja v a s c rip t" >

2. fu nctio n id (id ) {
3. re turn document.getElementByld(id)

4. }
5. fu nctio n i n i t () {
6. var container = i d ( ' f u n d o - c o n t r o l e s ' ) ;
7. var c t r = i d ( ' s o m ' ) ;
8. var play = i d ( ' p l a y ' ) ;
9. var pause = docum ent.getElem en tB yId('pau se');
10 . var vmais = doc um en t.g etElem entB yId('vm ais');
11. var vmenos = document.getElementById('vmenos');
12. i f (IM o d e r n izr.a u d io ) {
13 . c o n t a i n e r . s t y l e .d i s p l a y = 'n o n e ';
14. } else {
15. p l a y . a d d E v e n t Lis t e n e r( ‘ c l i c k 1, f u n c t i o n Q {
16 . ctr .p l a y ( ) ;
17. c tr.vo lu m e = 1 ;
18 . }, fa ls e );
19. p a u s e .a d d E v e n t L i s t e n e r ( 'c l i c k ', f u n c t i o n Q {
20. c tr.p a u s e Q ;
21 }, fa ls e );
22. vm a is.ad d Eve n tListen er('click', fu n c tio n Q {
23. c t r .p la y Q ;
24. c t r . v o l u m e += 0 . 1 ;
25. }, false);
26. vmenos.addEventListene r( ' c l i c k ' , f u n c t i o n Q {
27. ctr.playQ;
28. c t r . v o l u m e -= 0 . 1 ;
29. } , fa ls e );
30. }
31. }
32. window.onload = i n i t ;
33. </script>

Código comentado:

Linha(s) Descrição ____________ __________

Linha 2 a 4 Cria uma função denominada id() que simplifica a sintaxe para
document. getEle m entB yID() .

Linhas 5 a 31 Cria uma função denominada initQ que contém o script a ser
executado depois que a página é carregada. Na linha 32 chama-
se essa função no evento onload.
Capítulo 3 b Áudio e vídeo 89

Linha(s) Descrição (cont.)

Linhas 6 a 11 Cria variáveis para armazenar os elementos do DOM que serão

manipulados pelo script.
Linhas 12 a 30 Usa o objeto Modernizr para criar uma condicional (notar que a
biblioteca Modernizr foi incorporada à página na seção head do do­
cumento).
Linha 13 Se o navegador não oferece suporte para o elemento audio os contro­
les personalizados não serão mostrados na página, pois definimos
display: none; para seu Container.
Linha 14 Caso o navegador ofereça suporte para o elemento audio os contro­
les personalizados serão mostrados na página e segue o script de
personalização.
Linha 15 Usa o método a d d Eve n tLis te n e r() para atrelar o evento c l ic k no ele­
mento do DOM que representa o botão play
Linha 16 Usa o método play() da API de audio para iniciar a reprodução do
som.
Linha 17 Usa o atributo volume da API de audio para aumentar o volume do
som ao máximo. Essa linha faz com que o som volte ao seu volume
máximo caso o usuário acione o botão play após ter baixado o
volume e poderá ou não existir dependendo de cada projeto.
Linha 20 Usa o método pause() da API de audio para iniciar pausar a reprodução
do som.
Linha 24 Cada clique no botão para aumentar o volume incrementa o volume
do som de 0.1. A escala de volume vai de 0 a 1.
Linha 28 Cada clique no botão para diminuir o volume decrementa o volume
do som de 0.1. A escala de volume vai de 0 a 1.

►HTML
<audio id="som">
<source src="som.ogg" type="audio/ogg">
tsource src='isom.mp3" type="audio/mpeg">
<source src="som.wav" type=''audio/wave">
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href="som.mp3">download de som.mp3</ax/p>
</audio>
<div id ="fundo-cont roles">
<input type="button" src="play.png" value=''Play" id="play">
<input type="button " src="pause,png" value=''Pause" id="pause">
<input type="button " src="vmais.png" value="Volume(+)" id="vmais">
<input type="button " src=''vmenos.png" value="Vo lume(-)" id=''vmenos">
</div>

[t3-audio-ex2.html]
90 HTML 5

No exemplo mostrado anteriormente personalizamos os controles com uso de

botões nativos criados com in put do tipo b u tto n . É possível personalizar com in put

do tipo image, criando botões de qualquer forma, cor, tamanho ou efeito. O exemplo
mostrado a seguir é idêntico ao anterior, no qual alteramos a marcação HTM L e
acrescentamos regras de estilo.

►JavaScript

Idêntico ao do exemplo anterior.

^css
<style>
#fundo-controles {
w id th : 163pxj
h e ig h t :4Bpx;
d is p la y : t a b l e - c e l l ;
ve rtica l-a lig n:m id dle;
t e x t - a l i g n : centerj
background:u r l ( f undo-c o n t r o l e s .png) no-repeat;

}
</style>

►HTML
<audio id="som">
csource src="som.ogg" type="audio/ogg">
csource src="soin.mp3" type="audio/mpeg">
<source src="som.wav" type="audio/wave">
<p>Seu navegador não suporta o elemento audio da HTML5.
<br>Faça <a href="som.mp3">download de som.mp3</ax/p>
</audio>
<div id ="fundo-cont roles">
<input typ e ="image" src="play.png" a lt = " P l a y " id="play">
<input typ e ="image” src="pause.png" alt="Pause" id="pause">
<input typ e ="image” src="vmais.png'' alt=''Volume(+}" id="vmais''>
cinput type="image" src="vmenos.png" alt= ''Volu m e(-) '' id="vmenos">
</div>

T S ; [c3-audio-ex3.html]

Nos dois últimos exemplos mostrados, se JavaScript estiver desabilitado, o usuário não
terá os controles de som-padrão. Por isso, é preferível que se use o atributo contro ls
na marcação H TM L e se retire esse atributo com JavaScript declarando document.
getElementsByTagName(' a u d i o ' ) [ 8 ] . r e m o v e A t t r i b u t e ( ' c o n t r o l s ' ) ;
Capítulo 3 ■ Áudio e vídeo 91

3.2 video
Esse elemento destina-se a incorporar um vídeo ou filme.

Observe o exemplo a seguir que demonstra o uso desse elemento.

<video src="video.ogv">
</video>

[c3-video-ex1.html]

Esse exemplo está disponível no site do livro e pode ser visualizado em nave­
gadores que suportam o formato .ogv para vídeos. Ao visualizar o exemplo, como
não foram definidos os controles para o vídeo, em plataforma Windows, clique com
:■ botão direito do mouse sobre a imagem do vídeo e no menu de contexto que
aparece escolha “Exibir vídeo”.

Inserir vídeo, na prática, como mostrado no exemplo, não é uma boa opção, pois
esperar que o usuário abra um menu de contexto para iniciar o vídeo está fora de
cogitação. O exemplo simplesmente demonstra a forma mais simples de inserção.
E necessário o uso de alguns atributos no elemento video antes de publicá-lo para
consumo do usuário.

Contudo, é somente isso que precisamos marcar para incorporar um vídeo à

página. Simples e direto sem necessidade de plugins, Flash, QuickTime, Windows
Media Player e toda a parafernália a ser considerada quando se pretende incorporar
vídeo em uma página web.

Basta declarar o caminho para o arquivo de vídeo no atributo src do elemento.

O vídeo é reproduzido com as funcionalidades nativas do navegador.

Navegadores que não dão suporte ao elemento video renderizam normalmente

o conteúdo desse elemento. Assim, para servir o vídeo para esses navegadores,
definimos a incorporação do vídeo de maneira como fazemos em (X)HTM L, por
exemplo: com uso de Flash. Observe o exemplo a seguir.
<video src="video.ogv">
< ! - - Código (X)HTML para inserção do video com Flash -->
</video>

Nesse exemplo, navegadores que suportam H TM L5 ignoram o código para

inserção do vídeo com Flash e os que não suportam executam o código Flash.
92 HTML 5

Infelizmente existem outros fatores que independem da vontade do grupo de

trabalho para a HTM L5 em relação à implementação das funcionalidades para
vídeo. Os interesses dos fabricantes de softwares não permitiram que houvesse um
consenso sobre qual formato de vídeo adotar para ser implementado nativamente.
Para melhor entender as consequências de um não consenso, principalmente quanto
à maneira verbosa de como criar a marcação para incorporar vídeo, mostraremos
a seguir a terminologia e fixaremos alguns conceitos básicos sobre vídeos na web.

Existem dois tipos de arquivos de vídeo: o arquivo para manipulação local por
softwares de edição usados na fase de projeto e o arquivo para publicação, que é
o resultado do tratamento do arquivo finalizado na fase do projeto. O primeiro é
um arquivo em alta resolução e ocupando muitos Kb de memória ao passo que o
segundo é um arquivo otimizado para publicação.

A otimização de um arquivo para publicação, a princípio, deve-se basear em três

critérios:

0 tamanho do arquivo;

m resolução/qualidade;

as compatibilidade com os dispositivos de apresentação.

A otimização de um arquivo-vídeo compreende duas ações: codificar e comprimir.

Vamos começar examinando como é feita a compressão do arquivo.

Sabemos que arquivos têm suas extensões ( .d o c , .h t m l , . x i s , .php etc.) e também

que é possível identificar o tipo de arquivo pela sua extensão, pois .d o c é um arqui­
vo Word, .x is é Excel e assim por diante. Com arquivos de vídeo não é diferente e
suas extensões, como .avi, .m ov, .m p4, .wmv, .flv etc., informam-nos não somente que
se trata de arquivos de vídeo, mas também como foi feita a compressão do arquivo.

Uma extensão indicativa de um arquivo de vídeo é análoga às extensões .zip,

.r a r , . t a r , . GZIP e tantas outras extensões de arquivos comprimidos com as quais
estamos bastante familiarizados. Um arquivo .zip pode conter vários arquivos de
diferentes tipos. Por exemplo: se “ziparmos” os arquivos de um site, ele provavelmente
conterá arquivos do tipo .h t m l , . j p g , .p n g , .p h p , .inc, .xm l, .ico, .c s s e muitos outros.
Escolhendo o nome “site” para o arquivo “zipado” o nosso produto final será s ite .

zip, que nada mais é do que um Container para diversos arquivos.

Um vídeo é constituído por uma série de informações necessárias para apre­

sentá-lo em determinada mídia. Informações, como trilhas de áudio, stream de
 : ■ Áudio e vídeo 93

- metadados, título, subtítulos, parâmetros de sincronização etc. estão para a

/ cssão do vídeo assim como os diferentes tipos de arquivo estão para uma
: cessão “zipada”.

o arquivo m a trix.m p 4 é um Container de compressão para as informações

:■vídeo denominado matrix e a compressão usada foi mp4.

. ; containers de compressão relevantes para a HTM L5 são:

i Ogg para a extensão .ogv.

■ MPEG4 para as extensões ,mp4 e .m4v.

■ WebM para a extensão .webm.

i Flash Video para a extensão .flv.

. las isso não é tudo. Além da compressão, os arquivos de vídeo são também
. meados. E, para aumentar ainda mais a confusão causada pela falta de padroni-
: ;ão, existem diferentes formas de codificação, que, por sua vez, contribuem para
" cs confusão, uma vez que codificar igual em diferentes containers de compressão
c :.i resultados diversos.

As diferentes formas de codificação de vídeo são conhecidas por codecs, abrevia-

'. rr para as palavras codificação/decodificação.

A existência de diferentes containers e codecs para vídeos é resultado das diferentes

unlementações dos fabricantes de softwares em seus produtos para visualização
. - vídeos.

A HTML5, em um primeiro momento, tentou unificar o formato para vídeos

mando por um software livre; contudo, a Nokia e a Apple não concordaram e
tão houve consenso.

Os codecs relevantes para a E1TML5 são:

■ H.264 para MPEG

■ M PEG4 para mp4

m Theora para ogv

b VP8 para WebM

94 HTML 5

Para maiores detalhes sobre compressão e codificação de vídeos, consulte os

seguintes links:

a h t t p : //www.animemusicvideos. org/guides/avtech31/

a h t t p : / / p t . w ik ip e d ia . o r g / w ik i/H .264

■ h t t p : / / p t . w i k i p e d i a . o r g / w ik i/H . Theora

b h t t p : / / p t . w i k i p e d i a . org/wiki/VP8

n h t t p : / / e n .w ik i p e d ia . org/wiki/Comparison_of_container_formats

A tendência atual é deixar por conta do fabricante a implementação do tipo

de compressão e codecs. Isso nos obriga a servir marcação para vários formatos se
pretendemos criar uma implementação crossbrowser.

Felizmente o elemento video admite como elemento-filho o elemento source cuja

finalidade é substituir o atributo src e permitir formatos alternativos para o vídeo
a ser servido.

O elemento source destina-se a permitir que se definam arquivos diferentes para

incorporar as mídias audio e video em uma página.

O elemento source admite os seguintes atributos: atributos globais, src, type, e media.

O atributo src aponta para o endereço do arquivo de mídia a incorporar na

página. É um atributo obrigatório cujo valor é um U RL não vazio.

O atributo type destina-se a informar ao navegador o tipo de mídia a ser incorpo­

rado de modo que ele possa decidir o que fazer antes de baixar o arquivo. O valor
desse atributo deve ser um MIME type válido.

O atributo type admite ainda o parâmetro codecs que determinados MIME type defi­
nem e deve ser informado para que o navegador saiba como o arquivo foi codificado.

O atributo media destina-se a informar ao navegador o tipo de mídia. Os valores

possíveis para esse atributo são aqueles listados nas especificações para Media
Queries (http://dev.w3.org/csswg/css3-mediaqueries/) e 0 valor-padrão é all.

Observe o exemplo a seguir que esclarece o uso d o elemento source e seus atributos.
<video>
csource src="video.ogv" type="video/ogg; codecs='theora, v o r b i s ' " media="screen">
<source src="video.mp4" type="video/mp4; codecs="mp4v,20.8, tnp4a.40.2"' media="screen">
<source src="video.webm" type=''video/webm">
< ! - - Código (X)HTML para inserção de video.mp4 com Flash -->
</video>
lr oítulo 3 * Audio e vídeo 95

Xotar que o parâmetro codecs do atributo type especifica a codificação tanto do

roeo quanto do áudio.

Xesse exemplo escrevemos um código crossbrowser para servir vídeo com HTML5.

Alternativamente podemos inserir marcação (X) HTM L no elemento vídeo com a

o validade de servir navegadores que não suportam qualquer marcação para inserção
ve som, como mostrado a seguir.
< vid e o >
<source src= "video.ogv" type="video/ogg">
<source src=" v i d e o . mp4" type=" video/mp4">
<source src="video.webm" type="video/webm">
< ! - - Código (X)HTML para inserção de video com Flash -->
<p>Seu navegador não suporta o elemento video da HTMLB.
<br>Faça <a href="video.mp4">download do vide o < /a x /p >
</video>

Mas, cuidado. Marcação (X)HTM L inserida no elemento video como mostrado

vnteriormente não cumpre finalidade de oferecer alternativa textual para o vídeo,
oois ela é renderizada somente em navegadores que não suportam o elemento video.
Assim, por exemplo, um usuário com necessidade visual usando um navegador-
padrão não tem acesso à marcação (X)HTML.

Os atributos desse elemento são: atributos globais, s rc , p re lo a d , a u to p la y , loop,

C o n tr o ls , p ô s t e r , a u dio, w id th e h e ig h t.

O atributo src destina-se a indicar o caminho para o arquivo de vídeo a incor­

porar na página.

O atributo preload destina-se a indicar como o autor espera que seja o pré-carre-
gamento do vídeo na página, tendo em vista otimizar a experiência do usuário. Esse
atributo admite os valores no n e , m e t a d a t a , a uto . O valor none instrui o navegador a não
fazer o pré-carregamento do vídeo e talvez seja uma boa decisão usar esse valor em
uma página contendo diferentes vídeos incorporados. O atributo m e ta da ta instrui
o navegador a fazer o pré-carregamento somente dos metadados do vídeo, como
dimensões, duração, controles etc. O valor a u to define que o vídeo será pré-carregado.

Os atributos a uto p lay e lo o p destinam-se respectivamente a iniciar o vídeo auto­

maticamente, tão logo a página seja carregada e a repetir o vídeo indefinidamente.
Observe o exemplo a seguir.
<video autoplay loop>
<source src ="video.ogv" type="video/ogg">
96 HTML 5

<source src="video.mp4" type="video/mp4">

<source src="video.webm" type="video/webm">
< ! - - Código (X)HTML para inserção de video com Flash -->
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href="video.mp4">download do vide o < /a x /p >
</video>

-O. [c3-video-ex2.html]

A sintaxe XH TM L5 por ser compatível com X M L requer que seja declarado o valor
dos atributos. Assim, para atributos booleanos, com o autoplay, loop e Controls,
devemos declarar o valor do atributo igual seu nome, ou seja, autoplay=''autoplay",
loop="loop" e c o n t r o l s = " c o n t r o l s \

Não contundir atributo booleano com valor booleano. Um atributo booleano é aquele
que pode estar ou não presente na tag de abertura de determinado elemento e valor
booleano são os valores t rue e f a l s e . Assim, é sintaticamente incorreto declarar, por
exemplo, c o n tro ls = " tru e " .

A presença do atributo Controls faz com que o navegador renderize uma barra de
controle nativa contendo botões do tipo play e pause bem como controle de volume.
O uso desse atributo é conforme mostrado a seguir.

► H TM L

<video controls>
csource src="video.ogv" type="video/ogg">
csource src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
< ! - - Código (X)HTML para inserção de video com Flash -->
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça, <a href="video.mp4">download do v id e o < /a x /p >
</video>

Oi.
■#il [c3-video-ex3.htm!]

Na figura 3.2 mostramos a renderização nativa dos controles de som nos nave­
gadores Chrome, Firefox, Opera e Safari.

O atributo pôster destina-se a definir uma imagem a ser renderizada inicialmente

e enquanto as informações sobre o vídeo não estiverem totalmente carregadas ou o
usuário não acionar o início do vídeo. Essa imagem funciona como uma “capa” de um
livro e normalmente contém o título do vídeo e transmite visualmente informações
sobre o vídeo. Quando esse atributo não é definido, a renderização inicial apresenta
o primeiro quadro do vídeo. O valor desse atributo deve ser o URL de uma imagem.
 QÍtulo 3 " Áudio e vídeo 97

C hrom e

Firefox

O pera

Safari
<1 !►\ ■<<

Figura 3.2 - Controles de vídeo.

O uso desse atributo é conforme mostrado a seguir.

► HTM L

<video poster="capa.jpg" controls>

<source src=” video.o gv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
< ! - - Código (X)HTML para inserção de video com Flash -->
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href="video.mp4">download do vide o < /a x /p >
</video>

d'- [c3-video-ex4.html]

O atributo audio admite o valor muted e, quando presente, faz com que o som do
■ideo (se o vídeo for sonoro) seja por padrão colocado no estado mudo. Há estudos
para a introdução de outros valores para esse atributo nas especificações para a
HTML5. Valores para definir, por exemplo, os padrões para o volume e trilha sonora
aliciais. O uso desse atributo é conforme mostrado a seguir.

► HTM L

<video p o s te r= "c a p a .jp g " Controls muted>

<source src="video.ogv" type=''video/ogg">
<source src="video.mp4" type="video/mp4">
<source src=''video.webm" type="video/webm">
< ! - - Código (X)HTML para inserção de video com Flash -->
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href="video.mp4">download do vide o < /a x /p >
</video>

[c3-video-ex5.html]
98 HTML5

Nos exemplos mostrados omitimos o parâmetro codecs do atributo type. Essa

não é uma boa prática, pois ao especificarmos vários formatos de vídeo com uso do
elemento source o navegador percorre os formatos na ordem em que eles aparecem
no código e ao encontrar o primeiro formato que suporte inicia o carregamento
do arquivo. Com o objetivo de evitar que o navegador tenha de verificar o suporte
examinando o formato do vídeo, o que leva mais tempo, devemos sempre usar o
atributo type e seu parâmetro codecs, pois para o navegador verificar o suporte ao
MIME type é uma operação muito mais rápida do que verificar o suporte ao arquivo.

Os atributos w id t h e he ig ht definem, respectivamente, a largura e altura (dimen­

sões) da área de apresentação do vídeo. Se esses atributos não estiverem presentes,
as dimensões serão iguais àquelas para as quais o vídeo foi codificado, ou seja, as
dimensões-padrão do vídeo.

Quando um vídeo é criado, definem-se suas dimensões e com a definição das

dimensões fica implícito o aspect ratio que é a razão entre a largura e altura. Caso não
sejam definidas as dimensões do vídeo, o navegador usa as dimensões intrínsecas
do vídeo e finalmente se estas não estiverem disponíveis a largura adotada é 300px.

Se definirmos apenas uma das dimensões, a outra será tal que o aspect ratio seja
preservado. Se definirmos as duas dimensões sem respeitar o aspect ratio a área de
apresentação será a definida; ctíntudo, o vídeo não sofrerá deformação, pois suas
dimensões serão tais que o aspect ratio seja preservado e teremos a área definida maior
do que a área do vídeo. O exemplo a seguir disponível no site do livro é interativo,
permitindo que você altere os atributos width e height e observe a renderização das
áreas de apresentação.

> HTML
cvideo Controls width="escolha" height="escolha">
<source src="video.ogv" type="video/ogg">
<source src="video,mp4" type="video/iiip4">
<source src="video.webm" type="video/webm">
< ! - - Código (X)HTML para inserção de video com Flash -- >
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href="video.mp4">download do vide o < /a x /p >
</video>

Os*
[c3-video-ex6.html]

Para ver o script da interatividade, consulte o código-fonte do exemplo.

t i t u l o 3 « Áudio e vídeo 99

3.2.1 track
usse elemento destina-se a definir trilhas externas para os elementos video e audio.
I : m eles o desenvolvedor pode personalizar trilhas que são gravadas e m arquivos
ernos e inseri-las no vídeo. Os atributos específicos desse elemento definem
i características da trilha e são: kind, src, charset, srclang e labei. O elemento track
cemite ainda os atributos globais.

O atributo kind destina-se a definir o tipo de trilha a ser inserida e os valores

: :ssíveis são: subtitles, captions, descriptions, chapters e metadata que se destinam
uspectivamente a inserir subtítulos, legendas, descrições, capítulos e metadados.

0 atributo src aponta para um arquivo do tipo texto puro contendo basicamente
: s textos a serem inseridos e o tempo (momento) de inserção.

No estágio atual das especificações ainda não há um consenso sobre o formato

:,e arquivo a adotar entre os mais de cinquenta disponíveis para essa tarefa. Con­
tudo, a especificação para a HTM L5 prevê o formato WebSRT com a extensão .srt
exemplo, srt).

Observe no exemplo a seguir um arquivo nesse formato.

1 // numeração, sequencial
00:00:00,000 --> 00:00:05,000 // in te rv a lo de inserção h;m:s:ms
0 l i v r o HTML5 do Maujor apresenta: // te x t o a i n s e r i r
2
00:00:05,0 10 -- > 00:00:12,0 00
0 elemento track para inserção de legendas nas mídias audio e video.
3
0 0 :0 0 :12 ,0 10 --> 00:0 0 :1 4,80 0
Exemplo de arquivo WebSRT.
4
00:0 0 :2 6 ,1 00 --> 00:00:28,206
0 elemento track é f a n t á s t ic o para a a c es s ibilid a de .

Um arquivo WebSRT tem o formato e sintaxe conforme mostrado no exemplo e

e constituído de grupamentos de três linhas. A primeira linha contém uma nume­
ração sequencial; a segunda, o intervalo de inserção com o instante de início e fim
separados pelo sinal --> e, na terceira linha, o texto a inserir.

Arquivos WebSRT devem ser codificados por padrão em UTF-8. O atributo

charset foi criado por razões históricas e, quando presente, destina-se a definir uma
codificação diferente.
100 HTML 5

O atributo srclang destina-se a definir o idioma em que foram escritos os textos

do arquivo WebSRT . O valor desse atributo e uma string com o código do idioma,
como pt-br, en, de etc. Esse atributo é de uso obrigatório quando o valor do atributo
kind for subtitles.

O atributo labei destina-se a definir um rótulo para a trilha a ser inserida.

O exemplo a seguir esclarece o uso desse elemento.

<video autoplay Controls)
<source src="video.ogv" type="video/oggn>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
< ! - - Código (X)HTML para inserção de video com Flash -->
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href="video.mp4">download do vide o < /a x /p >
<track kind="subtitles" label="Inglês" srclang="en" src="legendas_en.srt"x/track>
<track kind="subtitles" label="Português" srclang="pt-br" src="legendas_pt-br.srt">
</track>
</video>

Nesse exemplo criamos subtítulos (legendas) para o vídeo em inglês e português.

A escolha do idioma pelo usuário se faz com uso de script, não mostrado no exemplo.

Atualmente nenhum navegador suporta esse elemento; contudo, você pode ter
uma ideia de como se pretende que essa facilidade funcione visitando a página http://
dev.mennerich.name/showroom/html5_video/. Nela você verá um exemplo que usa um player
de vídeo denominado LeanBack Player, desenvolvido em JavaScript e se destina a
inserir legendas em vídeos.

Outra página que demonstra a inserção de legendas está em http://p eople .opera.com /
bruce l/ dem o/video/m ultilingual- syn erg y.htm l; nessa há opção de escolha dos idiomas inglês
e japonês para as legendas.

Para maiores detalhes sobre arquivos WebSRT visite http://w w w .delp hik i.com /websrt/.

A especificação para a HTM L5 prevê ainda o formato WebVTT para arquivos

externos de trilhas.
: í : íulo 3 ■ Áudio e vídeo 101

: .2.2 Codificação de vídeos

■ :~-'.uito provável que o equipamento que você usa para criar seus vídeos gere ar-
- w o s em formatos para edição, o que significa arquivos de qualidade superior e
capando muitos MB de memória, ou ainda, arquivos que necessitam de tratamento
: :ompressão para transformá-los em formatos destinados à publicação.

Assim, é improvável que você extraia da sua filmadora arquivos nas extensões
,mp4 e .webm prontos para publicar na sua página HTML5. Existem softwares
; mecializados em edição que fazem a conversão dos arquivos; contudo, você não
: ;ecisa instalar um desses sofisticados softwares somente para converter arquivos
vídeo, pois existem várias ferramentas de conversão gratuitas para download.
..lustraremos a seguir as ferramentas Firefogg para codificar vídeos em formato
. cg e WebM e Handbrake para formatos MPEG4. Ambas as ferramentas são li-
.enciadas sobre a bandeira do software livre, o que significa que você pode baixar
- usar gratuitamente.

As ferramentas serão mostradas nos itens 3.2.2.1 e 3.2.2.2, nos quais fizemos uso de
várias imagens para explicar passo a passo como formatar (comprimir) arquivos de
vídeo. A finalidade é simplesmente apresentar as ferramentas para aqueles que não
estão familiarizados com edição e gravação de vídeos. Assim, mostramos somente o
uso básico das ferramentas sem entrar em detalhes avançados. Se você optar pelo uso
dessas ferramentas, explore-as mais a fundo fazendo testes práticos e inspecionando
todas as opções que elas oferecem. Contudo, com o conhecimento aqui adquirido,
você será capaz de formatar seus vídeos de modo que eles possam ser inseridos em
páginas HTM L5 com uso do elemento video. Se você é um expert em edição de vídeo,
sinta-se à vontade para pular os itens 3.2.2.1 e 3.2.2.2.

3.2.2.1 Firefogg

firefogg é uma extensão para o navegador Firefox nas suas versões 3.5 e mais re­
centes. E uma ferramenta de código aberto e licença General Public License (GPL),
destinada a codificar vídeos nos containers Ogg e WebM com os codecs Theora
vídeo) Vorbis (áudio) e VP8 (vídeo-áudio), respectivamente, formatos suportados
nativamente pelos navegadores Firefox e Chrome.

Visite o site do Firefogg em http://w ww.firefo gg.o rg e você encontrará um link para
instalação da extensão no Firefox (Figura 33).

Clique o link para instalar e o Firefox apresentará uma mensagem solicitando

que você permita a instalação da extensão. Clique o botão Permitir (Figura 3.4).
102 HTML 5

- ■'llfiv ztiLi íliri;/ nii F ss--L .:- lülsnilT1 rVaJu.

A r q u iv o E d it a r E x ib ir H ist ó ric o F a v o r ito s F e rra m e n ta s A ju d a
l
* : http://'A"Aiw.t'iretogg,org/
Firefogg - video encoding and upload... i

fl
H

F iref o g y
v id e o e n c o d in g and u p lo a d in g fo r F ire fo x

S it e s u s in g F ir e fo q q - U s e F ir e f o g q o n v o u r S it e - M a k e w e b v id e o

|LIHK PARA Hi&TALA R"

Figura 3.3 - Site do Fireffog.

:» !-< 1 - -> ílr ' ■—>I ■_> Jlj/Ç :>J"I l (i !• j. 1 n í.a ío . " / - 4 b 1 r ijtfl- j
z . . u - ,s \

A r q u iv o E d it a r E x ib ir H is t ó r ic o F a v o r ito s F e rra m e n ta s A ju d a

j\ , j http://www.FireFogg.org/ ~ 'r \!

■Firefogg - video encoding and upload...

O Firefox impediu este site (www.FireFogg.org) de oFerecer a instalação de
P e rm itir
\-
; extensões e temas no seu computador.

r\
U

F s r $ ff o g g
v id e o e n c o d in g and u p lo a d in g f o r F ir e fo x

S it e s u s in g F ir e fo q q - U s e F ir e f o g q o n v o u r S it e - M a k e w e b v id e o

Figura 3.4 - Permitir instalação.

Capítulo 3 ■ Áudio e vídeo 103

Clicando o botão, abre-se uma caixa de diálogo-padrão para instalação de extensões

r :emas no Firefox. Clique o botão Instalar agora para iniciar a instalação (Figura 3.5).

n Som ente instale extensões e tem as de au to re s que têm

l a su a confiança.

Complementos mal-intencionados podem danificar o seu computador ou

comprometer a sua privacidade.

Você solicitou a instalação deste item:

i q Firefogg-1.2.S2.npi { AutornSb veriB csdo)

LnJ http://www,firefogg.org/win32/Firefogg-1.2. i 2. xpi

Figura 3.5 - Iniciar instalação.

Terfninada a instalação, o Firefox solicitará que você reinicie o navegador para

que se complete o processo de instalação (Figura 3.6).

' ' m -; -V - ^ ) - -C ^ U U liC J l

.A..
----------mí

Adicionar Extensões Temas Plugins Instalações

Reinicie o Firefox para efetivar as modificações

Fechar

Figura 3.6- Reiniciar o Firefox.

104 HTML 5

O Firefox é reiniciado e apresenta uma tela informando que o Firefogg está

instalado (Figura 3.7).

Feche a tela inicial e abra o menu Fe rra m en ta s na barra superior do Firefox acio­
nando o submenu M a k e W eb V ide o (Figura 3.8).

Figura 3.8 - Abrir o Firefogg.

Ispítulo 3 ■ Áudio e vídeo 105

Abre-se a tela inicial do Firefogg apresentando ao usuário a opção de escolha do

doma que mais lhe agrada (Figura 3.9).

Figura 3.9 - Escolha do idioma no Firefogg.

Nessa mesma tela existe um botão que ao ser clicado permite que você escolha
no seu disco local um arquivo de vídeo a ser comprimido. Clique o botão, faça sua
escolha e será apresentada a tela seguinte, conforme mostrado na figura 3.10. Essa
tela permite que você configure os parâmetros de compressão e escolha o formato
do arquivo comprimido. Notar que, no campo indicado na figura com o número 1,
aparece o arquivo que você escolheu para compressão.

O botão destacado na figura com o número 2 quando clicado inicia o processo

de compressão. Em um primeiro momento, experimente simplesmente escolher o
arquivo e clicar o botão de compressão, para ter um contato inicial com o funcio­
namento da ferramenta.

Vamos analisar a seguir os seis itens do menu de configurações para compressão

de arquivos. O menu é do tipo acordeão e o primeiro item é mostrado na figura 3.11.
Esse item do menu permite escolher entre os containers Theora e WebM. Para The-
ora há três opções de compressão; para WebM, duas opções. Escolha a compressão
que mais se adequa ao seu projeto. Se você não tem certeza, faça experiências com
as diferentes compressões.
106 HTML 5

f m.iat o g a i __ A '-; /- ____,_j

l Arquivo Editar Exibir Histórico Favoritos Ferramentas Aiuda

'■ "■ S ! ,,r ,jp • [Jj hl:tp://firePogg,org/make/?usetang=pt# p.7 ; fi/i; ■ ;

; F ire fo g g - M a k e w e b v id e o "■

H e in T r a n s l a t e ff.

■ wilco.mov

-.’ .'-Segundo de início:

■'^Segundo de fini:

Figura 3.11 - Menu de configurações do Firefogg -- item 1.

O segundo item do menu permite que você defina o instante de início e fim da
compressão do vídeo expressos em segundos. Por exemplo: para um vídeo com 30
segundos de duração, escolha 0 (zero) e 30 respectivamente para compressão do vídeo
todo, ou 15 e 30 se você pretende que a compressão (e consequentemente o resultado
final) mostre o vídeo a partir da metade. A figura 3.12 mostra esse item do menu.
Capítulo 3 ■ Áudio e vídeo 107

Figura 3.12 - Menu de configurações do Firefogg - item 2.

O terceiro item do menu permite definir os parâmetros de qualidade e resolu­

ção e escolher o Container de compressão, conforme mostrado na figura 3.13. Nesse
menu você poderá escolher somente os codecs de vídeo e áudio e deixar os demais
campos com seüs valores default. í

Arquivo Editar Exibir Histórico Favoritos Ferramentas Ajuda

\ L v q. Li http://firefogg.org/make/?useiang=pt#

: ' i Flrefcgg - H sk e web video

:■ í^íísüí;?!í'Ü*C'!>hiiíS'rdí;ít-
■■ O - O j á l s f o j.,.. ji! : ( ' ■ ; r f o c m . v . ç Ç ç :í;j ■

Q u a lid a d e de vídeo:

g ijQ u a lid a d e de á udio:

:.L "Ondee;" de vídeo: íth e o ra

. "C o d e c" de áudio:

a do vídeo:

>

Figura 3.13 - Menu de configurações do Firefogg ~ item 3.

108 HTML 5

O quarto item do menu permite definir os metadados para o vídeo. Os metadado;

a definir devem ser escritos em campos de texto e são: título, nome do criador dc
vídeo, data e local de criação, nome da organização e direitos autorais.

O quinto item do menu permite configurações avançadas para o vídeo e pode

ser deixado com suas configurações default. Adicionaímente existe um pequenc
ícone azul com a letra i que, ao se colocar o mouse sobre ele, fornece informações
sobre cada parâmetro a configurar.

O sexto item do menu permite que você escolha não incluir na compressão o
áudio do vídeo. Para isso marque a caixa checkbox do menu.

Uma vez definidos os parâmetros de configuração, é hora de iniciar a compressão

do vídeo. Para tanto pressione o botão Codificar para ficheiro mostrado em destaque na
figura 3.10. Abre-se uma janela de diálogo solicitando que você escolha um local no
seu disco local para armazenar o arquivo no formato escolhido. Faça a escolha e dê
continuidade à compressão pressionando o botão correspondente da caixa de diálo­
go aberta. Com isso o processo de compressão é iniciado e uma barra de progresso
informa o andamento da tarefa ao mesmo tempo que uma visão prévia do vídeo é
apresentada em um thumbnail abaixo da barra, conforme mostrado na figura 3.14.

________ - ■■ w s e a a
1 Arquivo Editar Exibir Histórico Favoritos Ferramentas Ajuda

I V úA/rj ■ T jlí ;.J http://Hrefogg.org/make/?uselang=pt# 3 ? -^ 5 “ U ' v

ti Firefogg - M a k e web video

I :■j • ! ' •, ,: , ’ j*

5 5 % - T ra n sc o d ific a d o T e m p o re sta n te : u : 1 0

"" fz Ç itíW íiiírt íí « i i í t i v i 1-:

Figura 3.14 —Compressão em andamento no Firefogg.

Capítulo 3 ■ Áudio e vídeo 109

Terminada a compressão, você poderá rodar e visualizar o vídeo no próprio

thumbnail, iniciar nova compressão, ou verificar o resultado final armazenado no
seu disco local.

11.12 HandBrake

HandBrake é uma ferramenta para compressão de vídeos disponível para download

em http://handbrake.fr/downloads.php. É uma ferramenta de código aberto e licença
General Public License (GPL), destinada a codificar vídeos no Container M PEG4
codecs H.264 para vídeo e AAC para áudio, formato suportado nativamente pelo
navegador Safari, por Flash da Adobe, iPhone e Google Android. A Microsoft já
anunciou que o navegador Internet Explorer 9 virá com suporte para esse formato.

Visite a área de download do site da HandBrake, conforme mostrado na figura

3.15, no endereço h ttp ://h a n d b ra k e .fr/d o w n lo a d s .p h p , faça o download e instale a ferra­
menta em seu computador.

Abra a ferramenta recém-instalada no seu computador. Ateia inicial é conforme

a figura 3.16. Nessa tela abra o menu Source e clique a opção Video File para selecionar
o arquivo de vídeo a formatar. Notar que a opção MP4 para o Container já vem
selecionada por padrão.
110 HTML 5

Clicando a opção Vídeo File abre-se a janela de diálogo para escolha do arquivo.
Escolha o arquivo no seu disco rígido e prossiga.

.'■‘V % iíVcSâ»*- V' -lí' . -'ASí-

n f l M i . "
J
• file T o o ls P re se ts H e lp

A d d to Q u e u e B | Show Q ueue P re v ie w A c tiv ity W in d o w

D V D / V I D E O _ T S F o ld e r
, 11 C h ap te rs: th ro u gh

[ N o D V D D r iv e R e a d y ]

File:

Output Settings (Preset: Norma!)

C o n t a in e r: i M P 4 File I L a r g e hie f e e P I W e b optim ized F j iP o d 5 G su p p o r t

P ictu re V id e o F i l t e r s ; V id e o A u d io 5 S u b tit le s C h a p te rs A d v a n c e d *1

Figura 3.16 - HandBrake - tela inicial (parte).

Escolhido o arquivo, a ferramenta após alguns segundos apresentará uma janela

de alerta, conforme mostrado na figura 3.17. O alerta convida o usuário a definir
uma pasta-padrão no seu disco rígido para salvar os arquivos formatados. Clique
OK e ignore o alerta se você prefere não designar uma pasta-padrão para salvar os
arquivos.

Caso você prefira a pasta-padrão, configure-a no menu da ferramenta em Tools >

Options > aba General > Default Path.

i tijiiJEi'i _ __ . ' : ::V ' _ _ ‘l

v’ou currently have "Automatically name output files" enabled for the destination File box., but you do not have a default directory set.

vou should set a "Default Path" in HandBrakes preferences. (See Tools'menu -o 'Options’ -> 'General' Tab -> Default Path')

I OK j

Figura 3.17 - HandBrake - alerta para definir diretório-padrao.

O próximo passo é configurar as opções de compressão do arquivo. Observe na

figura 3.18 as configurações básicas da aba Picture descritas a seguir de acordo com
a numeração destacada na figura.

1. No menu à direita da interface, escolha compressão para iPhone & iPod

Touch, que é a opção que nos dará maior flexibilidade de escolha.
Capítulo 3 ■ Áudio e vídeo 111

2. Clique o botão B row se e escolha no seu disco rígido um destino e o nome do

arquivo formatado. A extensão-padrão é .m4v que é usada para iPhone e iPod
e similar à extensão .mp4.

3. Marque o checkbox para a opção W e b o p tim iz e d .

4. A escolha default do Container é MP4 File.

5 . Marque o checkbox Keep Aspect Ratio para garantir que a compressão não distor­
cerá seu vídeo e escolha uma largura ou altura para o vídeo. Escolhendo uma
delas a outra será automaticamente escolhida para manter o “aspect ratio”.

’Q 3 l
í Tools Presets He!»

| Source - ; r !>_• Start Add to queue fífâg Show Queue Preview Activity Window

Source: wlco Fresets

Title: h (00:01:07) ' Angle: v i Chapters: through , Duration: 00:01:07
Destination: Universal

File: C:'.Documents and SetfogslAdmfeistrador'.DesWop'.FILMEV/idiO.rivb/

Output Settings (Preseb^uetom)

Container: IMP4 File ( *4Rle f y !’L
J* _j Large
. ffe size _ Web optimized iPod SG su-pport

i Pietire video Filters Video

^ rs\
Audio : Subtitles ChaplWssiWicjitari
Normal
High Profile
Size Cropping - legacy

Source: 640:<36'd Aspect P-atio: 1.74 Classic

' Ú Automatic
AppleTV Legacy
Width: 400 • Height;
iPhone legacy
lipect Patro( 5
Lj Keep A: }
iPod legacy

irr.orptii': Kone

Figura 3.18 - HandBrake - configurações aba Picture.

Passe para a aba Video e configure como mostrado na figura 3.19. Notar que existem
três opções para a configuração da qualidade do vídeo. Na primeira opção, Targ e t

Size ( M B ), você define um tamanho máximo para seu arquivo formatado. A não ser
que você saiba exatamente o que está fazendo, é melhor não optar por essa forma
de definição da qualidade.

A segunda opção, Avg B itrate (kbps), permite que você defina a qualidade do vídeo
escolhendo uma taxa média de kilobytes por segundo para a compressão. Aqui
também, a não ser que você saiba exatamente o que está fazendo, é melhor não
optar por essa forma de definição da qualidade.
112 HTML 5

A terce::.-, opção permite que se defina a qualidade em porcentagem. O valor

detault é 60,78% e você pode adotar esse valor.

Picture ■ Video Filters ! Video ■ Audio ■' subtitles L h a p te rs ; A d va n ce d '

Video Quality

Video Codec: J H .2 6 4 ( x 2 d 4) v ; :■ Target Size (MB):

) A v g Bitrate (kbps):
Frarnerate (FPS): Sa m e a s source

.A C o n sta n t Quality: 1.78% RF:20

Turbo firs t P a -

Figura 3.19 - HandBrake - configurações aba Video.

As demais abas de configuração podem ser deixadas como estão. Finalmente

clique o botão Start no menu da ferramenta, conforme mostrado na figura 3.20, e o
processo de compressão iniciará.

File Tools P re se ts Help

f-T/At So u rce - ; ■ i> : Start j J j j ^ . A d d to Q u e u e !! j g : S h o w Q u e u e ; Preview Activity W indow

S o u rce : wilco

Title: :1 (O O s O lio ffN ^ Angle: v ; C hapters; .1 through .1 — : Duration: 0 0 :0 1 :0 7

D e s tin a tio n :

File; ^C;\Doi:uments and S8ttings\Adniinistrador\Desktopi1F IL M E ,il,v,ldeo,nT4v

Output Settings (Preset: Custom)

Figura 3.20 - HandBrake - iniciar compressão.

Durante a compressão, será apresentada uma janela pop-up, como mostrada

na figura 3.21, informando o andamento da compressão. Terminada a compressão,
a janela desaparece e o arquivo formatado estará na pasta designada no início do
processo de compressão.

j-ÍitgíÉ|Aí:‘ ' -í . o - - ’n x
Encoding: task í of í, 9 3 .2 6 jí < 76.07 f p s , a ug 6 5 . 9 5 fp s, £T8 00h00n»03s>

Figura 3.21 - HandBrake - comprimindo.

Capítulo 3 a Áudio e vídeo 113

3.2.2.3 Outras ferramentas

--iém das duas ferramentas mostradas anteriormente, existem centenas de outras

Internet e a escolha de uma delas cabe somente ao desenvolvedor. Apresentamos
: seguir, a título de informação, uma lista de algumas delas.

■ M edia-Converter-http://media-convert.com/conversor/ (uso online sem necessidade

de download)

e Super —http://www.erightsoft.com/suPER.html (plataforma Windows)

b Format Factory - http://www.formatoz.com/ (plataforma Windows)

■ Media Coder —http://mediacoder.sourceforge.net/ (todas as plataformas)

■ FFmpeg - http://ffmpeg.org/ (todas as plataformas)

m Switch - http://www.nch.com.au/switch/ (Windows e Macintosh)

33 APS para áudio e vídeo

Os atributos, métodos e eventos previstos na API para as mídias de audio e video
da HTM L5 são os mesmos. No item 3.1 mostramos dois Scripts de personalização
dos controles de audio que fizeram uso dos métodos play() e pauseQ e do atributo
volume previstos na API das mídias. Esses métodos e atributos e os demais métodos
e atributos da API são comuns aos elementos audio e vídeo e constantes da API para
elementos de mídia da HTML5. A única diferença é que o elemento video possui os
atributos pôster, width e height não previstos para o elemento audio.

Assim, é possível personalizar os controles de video tal como fizemos com os

controles de audio. O exemplo a seguir usa o mesmo script do exemplo [c3-audio-
ex3.html] no qual mostramos a personalização dos controles para áudio. Naquele
exemplo fizemos menção à necessidade de se incluir o atributo Controls na marcação
e retirá-lo com script para garantir sua presença caso JavaScript esteja desabilitado
no navegador. Nesse exemplo mostramos o código para essa técnica, incluindo os
controles e retirando-os.

Observe o exemplo para personalização dos controles de video com uso de

JavaScript.
114 HTML 5

D> JavaScript

1. < scrip t ty p e = " te x t/ja v a s c rip t" >

2. fu nctio n i d ( i d ) {
3. return document. g etEle m en tB yld(id);

4- }
5. fu nctio n i n i t () {
6. var container = i d ( ' fu nd o -c o n tro le s ' ) ;
7. var c t r = i d ( ' v i d e o ' ) ;
8. var play = i d ( ' p l a y ' ) ;
9. var pause = document,getElementById(' pause') ;
10 . ctr.removeAttribute( 1controls'); // r e t i r a os controles nativos
11. var vmais = document.getElementByld('vmais’ ) ;
12. var vmenos = document.getEleinentByld('vmenos');
12. i f (IM o d e r n izr.vid e o ) {
13 . c o n t a i n e r .s t y l e .d i s p l a y = 'n o n e ';
14 . } else {
... // código id êntic o ao do arquivo c3-audio-ex3.html
33. </script>

15* HTML
<video poster="capa.jp g" co ntrols id="video">
csource src= "video.ogv" type="video/ogg">
csource src="video.inp4" type="video/mp4">
csource src="video.mp4" type="video/inp4">
< ! - - Código (X)HTML para inserção de video com Flash -- >
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href="video.mp4">download do vide o < /a x /p >
</video>
<div id="fundo-controles">
<input type="button" src="playv.png" value="Play" id="play">
<input type="button " src="pausev.png" value="Pause" id="pause">
<input type="button " src="vmais.png" value="Volume(+)" id="vmais">
<input type="button " src="vmenos.png" va lue="Volume(-)" id="vmenos">
</div>

[c3-video-ex7.html]

Não é comum controles de vídeo apresentarem ao mesmo tempo dois botões

para play e pause. O que se encontra geralmente é uma troca dos botões de acordo
com o estado do vídeo. Se o vídeo está parado, o usuário vê um botão play; se está
rodando, um botão pause. Pode-se conseguir esse efeito com script, como veremos
adiante.
Capítulo 3 a Audio e vídeo 115

3.3.1 Atributos

Vamos examinar a seguir os atributos constantes da API para as mídias de áudio

e vídeo. Os exemplos mostrados nesse item foram criados para a mídia video, mas,
na sua maioria, são aplicáveis à mídia audio.

error

Esse atributo retorna um objeto erro para a mídia e possui a propriedade code que
retorna um número código para o erro com o significado mostrado a seguir:

n m e d i a _ e r r _a b o r t e d (1) - O usuário abortou a exibição do vídeo.

H m e d i a _e r r _n e t w o r k (2) - Um erro de conexão causou a interrupção ou não exi­

bição do vídeo.

a MEDIA_ERR_DECODE (3) - Um erro de codificação impediu a exibição do vídeo.

a MEDIA_ERR_SRC_NOT_SUPPORTED (4) —O endereço do vídeo definido no atributo src

não aponta para um arquivo válido.

O exemplo a seguir é interativo e foi desenvolvido definindo-se propositalmente

um endereço inexistente para o vídeo causando um erro que poderá ser visuali­
zado ao se clicar um botão. Atualmente somente o navegador Firefox suporta essa
propriedade.

B> JavaScript
fu nctio n i d ( i d ) {
re turn document.getElementByld(id)

}
function init() {
var video = id('video');
var valor = id('valor');
var btn = id('btn');
var erro = video.error;
var tipoErro = erro.code;
btn.onclick = functionQ {
var texto = 'Objeto erro retornado: ' + erro + '<br>Código do erro: ' + tipoErro;
valor.innerHTML = (texto);
}
}
window.onload = init;
116 HTML 5

►HTML
<video poster="capa.jpg" Controls id="video">
<sounce s rc = " x p t o / v id e o .o g v " type="video/ogg">
<source s rc ="xpto/vid eo.m p4" type="video/mp4''>
<source src="xpto/video.webm" type="video/webm">
< ! - - Código (X)HTML para inserção de video com Flash -- >
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href=''video.mp4">download do v id e o < /a x /p >
</video>

■W [c3-video-ex8.html]

currentSrc

Esse atributo retorna o valor do atributo src da mídia, ou seja, o endereço do arquivo
de mídia e sua sintaxe, como mostrado a seguir.
var video = document.getElementById('video')
alert (video. currentSrc); // alerta o endereço do arquivo de vídeo

f"'Í\
■10 [c3-video-ex9.html]

networkState

Esse atributo monitora o estado em que encontra o vídeo em relação à atividade da

rede. Retorna um número código para o estado com o significado mostrado a seguir.

a NETWORK_EMPTY (0) - O elemento de mídia não foi inicializado. Todos os atributos

estão no seu estado inicial.

a NET1a1 0 R K _ ID L (1 ) - O algoritmo de seleção do endereço do arquivo de mídia fòi

ativado e selecionou o endereço, porém não foi iniciada nenhuma atividade
de rede.

a NETWORK LO A D IN G (2) - O agente de usuário está em processo de download.

a NETW0RK_N0_RES0URCE (3) - O algoritmo de seleção do endereço do arquivo de

mídia foi ativado, mas o arquivo ainda não foi encontrado.

O exemplo a seguir demonstra a sintaxe para esse atributo.

var video = document.g etEle m e n tB yId ('vid e o ')
switch (video.networkState) {
case 0:
// código;
break;
Capítulo 3 ■ Áudio e vídeo 117

case 1 :
// código;
break;
case 2:
// código;
break;
case 3:
// código;
break;

preload

Esse atributo fornece uma dica de quanto do arquivo de vídeo deve ser pré-carregado.
A sintaxe de uso é como mostrado a seguir.
var video = document.getElementById(' v i d e o ' )
a l e r t (v i d e o . p r e l o a d ) ;

buffered

Esse atributo retorna um objeto representando um período de tempo correspondente à

quantidade de mídia já inserida no buffer, ou seja, armazenada na memória temporária.

readyState

Esse atributo monitora o estado em que encontra o vídeo, em determinado tempo

de execução, em relação à renderização. Retorna um número código para ó estado
com o significado mostrado a seguir.

■ HAVE_NOTHING(0) - Não se dispõe de nenhuma informação sobre o arquivo de

mídia.

■ HAVE_METADATA(1) - Já se conhece a duração da mídia e, no caso de vídeos, suas

dimensões, contudo, informações sobre determinado tempo de execução ainda
não estão disponíveis.

m HAVE_CURRENT_DATA (2) - Informações sobre o tempo atual de execução já estão

disponíveis, mas não se conhece nada sobre o tempo de execução futuro.

■ HAVE_FUTURA_DATA(3) - Há informações sobre o tempo de execução posterior ao

atual, mas sem se conhecer as informações completas.

■ HAVE_ENOUGH_DATA (4) - Todas as informações são conhecidas.

118 HTML 5

paused

Esse atributo é booleano e retorna true caso a mídia tenha sido parada e fa ls e caso
contrário. No estado inicial de carregamento da página, o valor desse atributo é
true. A sintaxe de uso é como mostrado a seguir,
var video = document,g e t E le in e n tB y Id ('vid e o ') ;
i f ( v id e o .paused) {
/ / código para quando o v íd e o f o r parado

ended

Esse atributo é booleano e retorna tru e caso a mídia tenha chegado ao seu final. A
sintaxe de uso é como mostrado a seguir,
var video = d oc um ent.g etEle m entB yld('video');
i f ( v id e o .ended) {
/ / código para quando o víd e o chegar ao final

Esse atributo retorna um objeto contendo a quantidade de mídia executada.

playbackRate

Esse atributo retorna a taxa de velocidade da mídia sendo executada. A velocidade

normal é expressa para valor desse atributo igual a 1. Pode ser usado para definir
uma velocidade diferente da normal. Assim, podemos controlar a velocidade dé
apresentação da mídia definindo valores diferentes de 1 para esse atributo. Valores
maiores de 1 aceleram a apresentação (Fast Forward), valores negativos atrasam a
apresentação (Rewind) e valores entre 0 e 1 apresentam a mídia em câmera lenta
(Slow Motion). Atualmente somente a engine WebKit (Chrome e Safari) suporta esse
atributo.

defaultPlaybackRate

Esse atributo retorna a taxa de velocidade da mídia sendo executada em condições

normais, quando o usuário não acionou adiantar ou atrasar a mídia.
Capítulo 3® Audios vídeo 119

seeking

Um dos controles de mídia é aquele que possibilita ao usuário adiantar ou atrasar

a execução para determinada posição de execução. O atributo s e e k in g é booleano e
retorna t r u e se a mídia está em processo de busca de uma nova posição de execução.

seekafele

Retorna um objeto contendo informações sobre o processo de busca de uma nova

posição de execução.

tracks

Esse atributo possui a propriedade le ngth ( t r a c k .l e n g t h ) que retorna o número de

trilhas de texto de uma mídia. Também retorna um objeto tipo array contendo
informações sobre determinada trilha (tra c k jn ]).

contrais

Esse atributo é booleano e retorna true se o atributo C o n tro ls foi definido para o
elemento mídia. A sintaxe de uso é como mostrado a seguir.
var video = document. getElementByld( 1v i d e o ' ) ;
if (video.C o n t r o l s ) {
video,removeAttributef'Controls 1) ; // remove os controles de mídia para inserir
// controles personalizados
}

í i. Ao definirmos controles personalizados, devemos definir o atributo controls no

\ 1 elemento de mídia e retirá-lo com uso de script, como mostrado no código. Pois,
se JavaScript estiver desabilitado, o usuário não será privado dos controles nativos.

autoplay

Esse atributo é booleano e retorna true se o atributo autoplay foi definido para o
elemento mídia.

posier

Esse atributo retorna o endereço definido no atributo poster para o vídeo. A sintaxe
de uso é como mostrado a seguir.
var video = document.getElementByld( ' v i d e o ' ) ;
v id e o .p o s te r = 1 / / remove a imagem inserida como capa do vídeo
120 HTML 5

loop

Esse atributo é booleano e retorna true se o atributo loop foi definido para o ele­
mento mídia.

width

Esse atributo retorna a largura do elemento de mídia definida no atributo width

para o elemento.

height

Esse atributo retorna a altura do elemento de mídia definida no atributo height

para o elemento.

videoWidth

Esse atributo retorna a largura da mídia vídeo quer tenha sido definida ou não no
atributo width.

videoHeight

Esse atributo retorna a altura da mídia vídeo quer tenha sido definida ou não no
atributo height.

voiume

Esse atributo retorna o nível de volume de áudio, se existir som na mídia, em uma
escala que varia de 0 (silêncio) a 1 (máximo).

muted

Esse atributo é booleano e retorna true se o canal de áudio, se existir som na mídia,
estiver em silêncio.

currentTime

Esse atributo retorna a posição de execução da mídia expressa em segundos.

startTime

Esse atributo retorna a posição em segundos na qual se inicia determinada legenda

(ou track) inserida na mídia.
Capítulo 3 ■ Áudio e vídeo 121

endTime

Esse atributo retorna a posição em segundos na qual termina determinada legenda

ou track) inserida na mídia.

duration

Esse atributo retorna o tempo de duração da mídia em segundos.

3.3.1.1 Exemplo interativo

Desenvolvemos um exemplo interativo disponível no site do livro onde poderá

ser constatado o funcionamento da maioria dos atributos da API de mídia para a
HTML5. Ao visualizar e interagir com o exemplo, esteja ciente de que nem todos os
navegadores implementaram as funcionalidades mostradas, além de haver diferenças
de implementação de um navegador para outro.

O ideal é que você visualize e interaja em diferentes navegadores ou, pelo menos,
no Firefox e Opera.

Os atributos da API não são definitivos. Uns poderão ser abandonados; outros,
i acrescidos, pois as especificações para a HTM L5 estão em fase de rascunho. Os
atributos aqui mostrados são atualmente previstos na especificação, mas não significa
que podemos usá-los indiscriminadamente em fase de produção.

O exemplo desenvolvido é conforme mostrado a seguir.

► JavaScript
fu nctio n i n i t ( ) {
var video = document.g e t E le m e n tB y l d ! 'v i d e o ') ;
var btn = document.getElementsByTagName('b u t t o n ' ) ;
b t n [ 0 ] .o n c lic k = fu n c t io n ! ) { v id e o .p o s te r =
b t n [ l ] . o n c l i c k = fu n c t io n ! ) { v id e o .p o s te r = ' c a p a . j p g ' ; }
b t n [ 2 ] . o n c l i c k = fu n c t io n ! ) { a l e r t ( ' L a r g u r a do víde o; ' + v i d e o . w i d t h + ' p x ') ; }
b t n [ 3 ] . o n c l i c k = fu n c t io n ! ) { vid e o.w id th = v id e o . w i d t h * l . 2 ; }
b t n [ 4 ] ,o n c l i c k = fu n c t io n ! ) { vid e o .w id th = ' 4 0 0 ' ; }
b t n [ 5 ] . o ncli ck = f u n c t i o n ! ) { a l e r t ( ' N í v e l de volume do áudio ( 0 - 1 ) : '+ vid e o .vo lu m e );}
b t n [ 6 ] . o n c l i c k = fu n c t io n ! ) {
i f ( v i d e o . paused) {
a l e r t ( '0 vídeo está em P a u s a ');
} else i f ( v i d e o . ended) {
a le r t('T e rm in o u a execução do v í d e o ' ) ;
122 HTML 5

} else {
a l e r t ( ' 0 vídeo está ro da nd o');

}
}
b t n [ 7 ] . o n c l i c k = f u n c t io n ( ) {
var a t r = 'Os a trib u to s do elemento vídeo são: \ n ' ;
i f (vid e o .c u rre n tS rc ) a t r += ' s r c \ n ' ;
i f ( v id e o .c o n t r o ls ) a t r += ' c o n t r o l s ' ^ ' ;
i f (vid e o .a u to p la y) a t r += ' auto p la y\n' ;
i f ( v id e o .lo o p ) a t r += 'l o o p \ n ' ;
i f ( v id e o .p o s te r) a t r += ' p o s t e r i n ' ;
i f ( v i d e o . i d ) a t r += ' i d \ n ' ;
i f (vid e o .w id th ) a tr += ' w id th \n' ;
i f (v id e o .h e ig h t ) a t r += 1h e ig ht\n' ;
a le rt(a tr);

}
btn [8 ] .o n c lic k = f u n c t i o n Q {
a l e r t ( ' A duração do video é de: '+ vid eo .d uratio n+ ' segundos1) ;
}
b tn [ 9 ] .o n c lic k = fu n c t io n ) ) {
a l e r t ) '0 tempo de execução no c l ic k f o i de: ' +vid eo . cu rre nt!im e+' segundos');

}
}
window.onload = i n i t ;

> HTML
<button typ e="b utto n">R etir ar capa</button>
cbutton type="button">Recolocar capa</button>
<button type="button">Largura do v i de o? < /b utto nx br>
cbutton type="button">Aumentar dimensõesc/button>
cbutton type=''button">Dimensões d e f a u l t< / b u t t o n x b r >
cbutton type="button''>Volurne?c/button> Rode o vídeo a lt e r e o volume e click<br>
cbutton type="button” >Estado do video?</button> C lick com vídeo rodando, em pause e final execução<br>
cbutton type="button">A tribu tos?c/butto n>
cbutton type="button">Duração?c/button>cbr> /
cbutton type="button">Tempo execução?c/button> C lic k com vídeo rodando

[c3-video-ex10.html]
Capítulo 3 aÁudio e vídeo 123

3.3.2 Métodos

Vamos examinar os métodos constantes da API para as mídias de áudio e vídeo.

Os exemplos mostrados nesse item foram criados para a mídia video, mas, na sua
maioria, são aplicáveis à mídia audio.

load()

Esse método causa o carregamento da mídia.

playO

Esse método causa a reprodução do vídeo a partir da sua posição inicial.

pause()

Esse método causa a interrupção da reprodução do vídeo.

canPlayType(f/po)

Esse método verifica se o agente de usuário é capaz de reproduzir o vídeo cujo tipo
é conforme especificado no parâmetro tipo. No parâmetro tipo deve-se especificar
o M IME type e os codecs do vídeo. O método retorna uma string vazia ou a string
“maybe” ou a string “probably”, conforme o navegador não ofereça suporte, ofereça
suporte com uso de plugin, ou não há certeza de suporte respectivamente.

O exemplo a seguir, extraído das especificações para a HTML5, demonstra o

uso desse método.
« e c t i o n id="video">
< p x a href=''playing-cats.nfv">Do wnload víde o < /a x /p >
</section>
<script>
var videoSection = document.g e t E le m e n tB y I d ( 'v i d e o ') ;
var videoElement = doc um ent.createElement('video’ ) ;
var support = videoElement.ca nPlayTypeCvideo/x-new-fictio na l-formatjcodecs^kitte nSjbun nies'");
i f (support != "probably" && "New F i c t i o n a l Video P lu g -in " in n a vig a to r.p lu g in s ) {
// provavelmente o navegador suporta o t i p o com uso de um plugin
// se o plugin t i v e r sido in stala do use-o
videoElement = document.createElement("embed");
} else i f (support == {
// o navegador não suporta o t ip o de vídeo
// não in s i r a o elemento video no DOM
videoElement = n u l l ;

}
124 HTML 5

i f (videoElement) { // r e t i r a o parágrafo download do DOM e insere o vídeo

while (vid e oS ec tion. hasChildNodes( ) )
vide oS ection. re m oveCh il d(videoSection .fir stCh ild );
videoElement. s e t A t t r i b u t e ( " s r c ", " p l a y in g -c a t s . n f v " ) ;
videoSection. appendChild ( videoElement) ;

}
</script>

Nesse exemplo a situação inicial é para o download do vídeo denominado

playing-cats.nfv, um formato não previsto nas especificações da HTML5. Um script
JavaScript vai tentar inserir a marcação H TM L para a apresentação do vídeo com
uso do elemento video da HTML5, uma vez que a apresentação do vídeo é possível
com uso de um plugin.

O script começa verificando se o agente de usuário é capaz de reproduzir o vídeo

do tipo v i d e o / x - n e w - f i c t i o n a l - f o r m a t ; c o d e c s = " k i t t e n s , b u n n i e s " . Para essa verificação usa
uma condicional if para o método c a n PlayTyp e (tip o ). Dependendo da resposta do
navegador ao método (string vazia ou a string “maybe” ou a string “probably”), o
script retira o parágrafo de donwload inicial, cria a marcação HTM L5 para vídeo
e insere no lugar do parágrafo, servindo o vídeo ou então nada cria e deixa tudo
como está na situação inicial.

addTrack(í/po, legenda, idioma)

No item 3.2.1 estudamos a criação de trilhas diretamente na marcação com uso do

elemento track. Esse método destina-se igualmente a criar trilhas para o vídeo com uso
de script. Se você não se lembra daquele elemento, faça uma nova leitura do item 3.2.1.

O uso desse método, assim como do elemento track, ainda não é suportado pelos
navegadores atuais e o formato de sua implementação ainda é objeto de discussão.

Vamos examinar os eventos constantes da API para as mídias de áudio e vídeo.

Os exemplos mostrados nesse item foram criados para a mídia video, mas, na sua
maioria, são aplicáveis à mídia audio.

loadstart

Evento ocorre quando o agente de usuário iniciou o processo de busca dos meta-
dados da mídia no endereço especificado no atributo src.
Capítulo 3 ■ Áudio e vídeo 125

progress

Evento ocorre quando o agente de usuário se encontra em processo de obtenção e

download dos dados da mídia.

suspend

Evento ocorre quando o agente de usuário suspendeu intencionalmente a obtenção

dos dados da mídia sem que o processo de download tenha chegado ao fim.

abort

Evento ocorre quando o agente de usuário parou a obtenção dos dados da mídia
sem que o processo de download tenha chegado ao fim e por motivo que não foi
causado por um erro.

error

Evento ocorre quando há um erro que interrompe a obtenção dos dados da mídia,

emptied

Evento ocorre quando o elemento de mídia, não vazio, foi esvaziado durante o
processo de obtenção e download dos dados da mídia (seja pela ocorrência de um
erro fatal, seja por ter sido evocado o método load() durante o processo)

stalled

Evento ocorre quando o agente de usuário está tentando a obtenção dos dados da
mídia, mas os dados não estão vindo.

play

Evento ocorre quando o agente de usuário inicia a reprodução da mídia,

pause

Evento ocorre quando o agente de usuário coloca a reprodução da mídia em pausa,

loadedmetadadta

Evento ocorre quando o agente de usuário acaba de determinar a duração, legendas

e dimensões da mídia.
126 HTML 5

Soadeddaía

Evento ocorre quando o agente de usuário fica em condições de renderizar os dados

da mídia, em determinada posição de reprodução, pela primeira vez.

waifing

Evento ocorre quando o agente de usuário para a execução da mídia porque o

próximo quadro ainda não está disponível, mas estará em breve.

playing

Evento ocorre quando o agente de usuário inicia a reprodução do vídeo,

canplay

Evento ocorre quando o agente de usuário estima que se a reprodução começar

agora não estará em condições de renderizar a mídia até seu final sem ter de parar
para carregar o buffer.

canplayfhrough

Evento ocorre quando o agente de usuário estima que se a reprodução começar

agora estará em condições de renderizar a mídia até seu final sem ter de parar para
carregar o buffer.

seeking

Evento ocorre quando o atributo seeking assume o valor true (está havendo busca
por uma nova posição de reprodução).

seeked

Evento ocorre quando o atributo seeking assume o valor false (terminou a busca
por uma nova posição de reprodução).

timeupdate

Evento ocorre quando há uma mudança na posição de reprodução da mídia decor­

rente de um fator previsto na reprodução ou quando ocorre uma descontinuidade
na reprodução.
Capítulo 3 a Áudio e vídeo 127

ended

Evento ocorre quando a reprodução da mídia chega ao seu final,

ratechange

Evento ocorre quando há uma mudança na taxa de reprodução da mídia decorrente

de mudança no valor dos atributos defaultPlaybackRate ou playbackRate.

durationchange

Evento ocorre quando há uma mudança na duração da mídia decorrente de mu­

dança no valor do atributo duration.

volumechange

Evento ocorre quando há uma mudança no nível de volume da mídia decorrente

de mudança no valor dos atributos volume ou muted.

3 3 3 .1 Sintaxe para eventos

A sintaxe geral pa-ra atrelar uma função a ser executada na ocorrência de um evento
usa o método do DOM 2 addEventListener(evento, função, booleano).

Esse método permite atrelar um evento a um nó do DOM. O parâmetro evento

define o tipo do evento; o parâmetro função define a função a ser executada, ou
seja, o manipulador do evento. O parâmetro booleano admite os valores true e false.
Esse parâmetro define em que fase da propagação do evento deverá ser executada a
função. Na maioria dos casos, esse parâmetro deve ser definido como false.

Convém ressaltar que o navegador Internet Explorer versões 8 e anteriores

não dão suporte a esse método, adotando um método proprietário denominado
a t t a c h E v e n t ( ) . Felizmente o navegador Internet Explorer 9 promete suporte ao método
e às funcionalidades da HTML5.

O exemplo a seguir, disponível no site do livro, é interativo e esclarece a sintaxe

para eventos e exemplifica o funcionamento de alguns dos eventos mostrados.

►JavaScript
fu nctio n i n i t Q {
var video = documerrt.getElementById(' v i d e o ' ) ;
var btn = document.getElementsByTagName('button');
var v a lo r = document.getEleinentById(' v a l o r ' ) ;
128 HTML 5

var evento = fu nctio n ( e v t ) {

v a l o r . innerHTML = ('D ispara do o evento: ' + e v t . t y p e ) j

}
v i d e o . a d d E v e n t L i s t e n e r f p l a y ' , evento, f a l s e ) ;
v id e o .a d d E v e n t Lis te n e r( 'p ro g r e s s 'j evento, f a l s e ) ;
v i d e o .a d d E v e n t L i s te n e r ( 'p a u s e ', evento, f a l s e ) ;
v id e o .a d d E v e n t L i s te n e r ( 1ended' , evento, f a l s e ) ;
vide o.a d dEventListe ner( 'volum echange', evento, f a l s e ) ;

}
window.onload = i n i t ;

► HTML
<video poster=”capa.jpg" Controls id="video" width="400">
csource src="video.ogv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
<source src="video.w ebm" type="video/webm">
< ! - - Código (X)HTHL para inserção de video com Flash -- >
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href="video.mp4">download do vide o < /a x /p >
</video>
<p id = "v a lo r" c la s s = "d e s t" x / p >

^ > [c3-video-ex11.html]

3.33.2 Controles personalizados

Para ilustrar o uso dos atributos, métodos e eventos da API de mídia da HTML5,
desenvolveremos e comentaremos passo a passo um script para personalizar os
controles de um vídeo. Os diferentes arquivos constantes em cada um dos passos
mostrados estão disponíveis para visualização no site do livro.

Nos passos iniciais, já com o controle play e pause devidamente personalizados

e em funcionamento, decidimos manter o controle-padrão do navegador, apesar
de desnecessário, com fins puramente didáticos. Em um estágio mais avançado,
retiraremos o controle-padrão do navegador.

A marcação H TM L para o vídeo é a mesma mostrada para os exemplos anteriores

e transcrita a seguir.

► HTML
<video poster="capa.jpg" Controls id="video'' width="400">
csource src="video.ogv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
Capítulo 3 o Áudio e vídeo 129

<source src="video.w ebm" type="video/webm">

<!-- Código (X)HTML para inserção de video com Flash -->
<p>Seu navegador não suporta o elemento video da HTML5.
<br>Faça <a href="video.mp4">download do video</ax/p>
</video>

Prim eiro passo

Vamos inserir na marcação HTM L um botão contendo o símbolo-padrão para

acionar a reprodução de vídeo (um triângulo apontando para a direita), como
mostrado a seguir.

►HTML
cvideo poster="capa.jpg" Controls id="video" width="400">

</video>
<pxbutton type="button" id="btn">&#x25B6;</buttonx/p>

A entidade X M L &#x25B6; representa um triângulo idêntico ao gráfico típico

representativo de um botão do tipo play Para a representação do botão de pause
adotaremos a entidade X M L &#x2588; duas vezes (uma ao lado da outra), pois ela
representa uma barra vertical e o gráfico típico representativo de um botão tipo
pause é constituído por duas barras verticais.

Inserido o botão com o símbolo para play, vamos desenvolver um script para
iniciar a reprodução do vídeo quando nele ocorrer um click do usuário. Observe
a seguir.

►JavaScript
function init() {
var video = document.getElementById('video');
var btn = document.getElementById('btn');
var play = function { video.playQ;}
btn.addEventListener('click', play, false);

}
window.onload = init;

[c3-video-ex12-P1.htm!]

Clicando o botão começa a reprodução do vídeo, mas não há ainda um botão

para pausa.
130 HTML 5

Segundo passo

Poderíamos inserir outro botão na marcação H T M L , contendo o símbolo-padrão

para pausa, e a ele atrelar uma função para acionar pausa tal como fizemos com play

Contudo, há uma solução mais elegante que consiste em usar um só botão para
desempenhar as funções de play e pause. A lógica da programação para conseguir
esse efeito quando o botão é clicado é a seguinte:

□ Se o vídeo estiver em pausa, comece a reprodução e troque o símbolo do

botão para pausa.

b Se o vídeo estiver em reprodução, pare e troque o símbolo do botão para

reprodução.

Escrever essa lógica é como mostrado a seguir.

> JavaScript
function initQ {
var btn = document.getElementById('btn');
var video = document.getElementById('video');
var playPause = function() { .
if (video.paused || video.ended) {
video.playQ;
this.innerHTML = ’&#x2588; &#x2588;';
} else {
video.pause()
this.innerHTML = '&#x25B6';

}
}
btn.addEventListener(’click'j playPause, false);

}
window.onload = init;

• .c [c3-video-ex12-P2.html]

Clicando o botão começa a reprodução do vídeo e o símbolo do botão muda

para o gráfico típico de pausa. Clicando novamente, a reprodução do vídeo cessa
e o símbolo do botão muda para o gráfico típico de reprodução. Notar o uso dc
atributo paused e dos métodos p la y Q e pauseQ da A P I de mídia da H TM L5 .

Você observou o que acontece com o botão quando o vídeo chega ao final?
Capítulo 3 ■ Áudio e vídeo 131

Terceiro passo

Você deve ter observado que, quando a reprodução do vídeo chega ao final, ela
cessa e o vídeo entra em estado de pausa, mas o botão não muda para o símbolo
de reprodução como era de se esperar.

Vamos usar o evento ended da API de mídia da HTM L5 para detectar o instante
de chegada da reprodução do vídeo ao seu final e, quando esse evento ocorrer, fa­
remos a mudança do símbolo do botão. O seguinte acréscimo deverá ser feito no
script anterior.

►JavaScript
function init() {
var btn = document.getElementByld('btn')j
// igual ao anterior
btn.addEventListener('click', playPause, false);
video.addEventlistenerCended', functionQ {
btn.innerHTML = '&#x25B6';
}j false);
}
window.onload = init;

[c3-video-ex12-P3.html]

Terminada a personalização dos botões play e pause? Ainda não. Você saberia
dizer o que falta sob o ponto de vista da funcionalidade dos botões?

Q u arto passo

A maioria dos navegadores oferece ao usuário um menu de contexto quando se

clica com o botão direito do mouse sobre a área de apresentação do vídeo, como
mostrado na figura 3.22, para o sistema operacional Windows e navegador Firefox.

O menu de contexto oferece ao usuário várias opções para controle do vídeo;

entre elas, as opções para reproduzir e parar a apresentação do vídeo, isto é, acionar
play e pause no menu de contexto.

Sugiro que você abra o arquivo c3-video-exl2-P3.html e faça as seguintes experi­

ências:

■ Inicie o vídeo clicando o botão play e depois abra o menu de contexto e pare
a reprodução clicando a opção P a u sa .

■ Recarregue a página, abra o menu de contexto e inicie o vídeo clicando a

opção Exib ir v íd e o .
132 HTML 5

Em ambos os casos, observe o botão personalizado e compare com o botão do

controle-padrão do navegador. Qual a conclusão?

Ilf1 m 1' i >Uf""$iúíUj Íío-íím _ 1

Arquivo Editar Exibir histonco Favoritos Ferramentas Ajuda

^ jíj ;j file:,i',í/D:/5ites,i'livroHTML5,ii:odigos/cap_03/c3-video-exl2-P4.htriil

Capitulo 3

I Vídeo - SxempSe i 2. Passo 4

JavaScript W e b D evelope r ►

Figura 3.22 - Menu de contexto para vídeo.

Quando o controle do vídeo é feito pelo menu de contexto, não está havendo
a troca do símbolo do botão, ou seja, acionar pausa pelo menu de contexto não
coloca o botão no estado play e vice-versa. Isso fica claro quando se compara o
botão personalizado com o botão do controle-padrão do navegador. Por que não
está ocorrendo o comportamento correto para o botão personalizado?

Porque a troca do símbolo no botão se faz mediante click no próprio botão.

Então, como resolver?

Resolvemos transferindo a responsabilidade de disparo das funções que acio­

nam play() e p a u s e Q de um evento clique no botão para um evento ocorrendo no
próprio vídeo, mas precisamente para os eventos play e pause. Dessa forma, a troca
de símbolos se fará em função da mudança do estado de reprodução do vídeo,
independentemente do local de onde tenha partido o comando, seja o botão, seja
o menu de contexto.

O exemplo a seguir mostra os acréscimos feitos no exemplo anterior para atender

à troca de símbolos quando o usuário usa o menu de contexto.
Capítulo 3 ■ Áudio e vídeo 133

► JavaScript
function init() {
var btn = document.getElementById('btn1);
// igual ao anterior
video.addEventListener(1ended1j functionQ {
btn.innerHTML = ’&#x25B6’;
}; false);
video.addEventListener('pause', function() {
btn.innerHTML = '&#x25B6';
h false);
video.addEventListener('play', function() {
btn.innerHTML = '&#x2588; &#x2588; ';
}> false);
}
window.onload = init;

" fe [c3-video-ex12-P4.html]

Quinto passo

Se optamos por personalizar os controles do vídeo com JavaScript, não necessitamos

dos controles-padrão do navegador. Podemos nos livrar dos controles-padrão de
duas formas: retirar o atributo controls do elemento vídeo removendo-o diretamente
na marcação H TM L ou removendo-o com uso de script.

A remoção com uso de script é a solução mais indicada, pois, na falta de suporte
à JavaScript no navegador, o usuário não ficará privado dos controles.

Ainda, na falta de JavaScript, irá aparecer um botão personalizado sem qualquer

funcionalidade, pois ele foi inserido diretamente na marcação HTML. Nesse caso, é
também conveniente retirar o botão personalizado da marcação e inserir com uso
de script. O exemplo a seguir demonstra esse quinto passo. As linhas de código em
destaque mostram as modificações introduzidas no script anterior.

► JavaScript
function initQ {

var btn = document.createElement('button');

btn.innerHTML=( ' &#x25B6 ') ;
var secao = document ,getElementsByTagi\!ame('section1)[0];
secao.insertBefore(btnj video);
var video = document.getElementByld('video');
video.removeAttribute('controls');
134 HTML 5

var playPause = function() {

if (video.paused || video.ended) {
video.play();
this.innerHTML = '&#x2588; &#x2588;';
} else {
video. pauseQ
this.innerHTML = '&#x25B6';
}
}
btn.addEventListenerCclick1, playPause, false);
video.addEventListener('ended1, function() {
btn.innerHTML = 1&#x25B6';
}, false);
video.addEventListener('pause', function() {
btn.innerHTML = '&#x25B6';
}, false);
video.addEventListener('play', function() {
btn.innerHTML = ’8#x2588; &#x2588;';
}, false);
}
window.onload = init;

# 3 [<3-video-ex12-P5.html]

Nesse quinto passo encerramos a personalização do botão play/pause.

Sexto passo

Vamos examinar nesse passo o script para personalização do controle de volume.

Usaremos o atributo volume da API para elementos de mídia da HTML5. Lembramos
que esse atributo é do tipo leitura e escrita e admite valores que vão de 0 a 1, sendo
o valor 0 para silêncio e 1 para volume máximo do som.

Usaremos também o elemento input do tipo range que em HTM L5 se destina a

marcar um slider, ou seja, um controle corrediço. Definiremos uma faixa de 0 a 1
para esse elemento e, quando o usuário deslizar o controle, o seu valor será pas­
sado por script para o atributo volume. A sintaxe para marcação desse elemento é
mostrada a seguir.
<input type="range" min="0" max="l" value="l" step="0.1" id="slider">

Navegadores que não suportam o tipo range para o elemento input renderizam um
campo do tipo text. Atualmente os navegadores Chrome, Safari e Opera suportam
esse elemento.
Capítulo 3 ■ Áudio e vídeo 135

Esse elemento cria um slider horizontal, e sua renderização-padrão nos navega­

dores Chrome e Opera é mostrada na figura 3.23. É possível obter uma renderização
vertical definindo-se regra de estilo, como mostrado a seguir.
#slider {width:15px; height:50px;}

Na figura 3.23 mostra-se também o resultado da estilização para tornar o controle

vertical que atualmente é suportada no navegador Opera, mas falha no Chrome
e Safari.

y U i Livro HTML5 do Maujor \ ç _________________ _______, - .T r , t I ^ ~| ^ ,♦

CS Wi '. J »'jHTW LS/COdKhiv v w - U Loca! localhost/Dl/Sites/Ilvro

Slider horizontal

Li io HTML5 do M a u » \ J h _____ ___ _______ . n ^TMLS do M a u »

file:///D /Sites/ll toHTT ILBitodlç». _ /V Q u, 1 localhostjDi/Sites/livro

c 7

Slider vertical

Figura 3.23 - Slider no Chrome e Opera.

O exemplo a seguir demonstra esse sexto passo. As linhas de código em destaque

mostram os acréscimos introduzidos no script anterior.

► JavaScript
function init() {
var video = document.getElementByldCvideo');
var slider = document.getElementByldCslider ")5
var vol = document. getElementByld('vor);
slider.addEventListener('change', functionQ {
video.volume = this.value;
vol.innerHTML = (this.value);
}, false);
// a partir daqui igual ao anterior
— secao.insertDefore(btn, video);
secao.insertBefore(btn, slider);
var video = document.getElementByld('video');

}
window.onload = init;
136
HTML 5

► HTM L

<video poster="capa.jpg" id="video" width="400">

</video>
<input type="range" min="0" max="l" value="l" step="0.1" id=''slider" />
<span id="vol">l</span>

[c3-video-ex12-P6.html]

Sétim o passo

Nesse passo vamos inserir controles personalizados para adiantar (Fast Forward),
atrasar (Rewind) e reproduzir o vídeo em câmera lenta.

Usaremos também elementos button e entidades XM L para representar os res­

pectivos símbolos nos botões, tal como fizemos com o botão play O atributo que
controla a velocidade de movimentação do vídeo é o atributo playbackRate. Para esse
atributo o valor 1 representa a velocidade normal de reprodução, valores positivos
maiores que 1 aumentam a velocidade, valores negativos causam retrocesso do vídeo
e valores entre 0 e 1 causam a reprodução em câmera lenta (Slow Motion)

O exemplo a seguir demonstra esse sétimo passo. As linhas de código em des­

taque mostram os acréscimos introduzidos no script anterior.

►JavaScript
function init() {

var btnFF = document.createElement('button');

btnFF.innerHTML = ’&#x25BA;&#x25BA;';
secao.insertBefore(btnFF, slider)]

var btnRW = document.createElement('button');

btnRW.innerHTML = '&#x25C4;&#x25C4;';
secao.insertBefore(btnRW, slider);

var btnSM = document.createElement('button');

btnSM.innerHTML = ’S#x25BA;&#x2590j';
secao. insertBefore(btnSI% slider);
Capítulo 3 ■ Audio e vídeo 137

btnFF,addEventListener('click', functionQ {
video.playQ;
video.playbackRate = 3;
}> false);
btnRW.addEventLlstenerCclick', function() {
video.play();
video.playbackRate = -20;
}, false);

btnSM.addEventListener('click', function() {
video.play();
video.playbackRate = 0.3;
}, false);
}
window.onload = init;

M .' [c3-video-ex12-P7.html]

Oitavo passo

O último controle do vídeo a personalizar é a barra de progresso que indica o an­

damento da reprodução.

Usaremos o elemento progress para criar a barra de progresso. Esse é um elemen­

to novo da HTML5 e se destina a fornecer um indicador dinâmico da quantidade
realizada de determinada tarefa. Em nosso caso, indicará a quantidade de vídeo
reproduzida durante o curso da reprodução.

A medição da quantidade de tarefa a realizar será feita com uso do atributo

duration da API para elementos de mídia. Esse atributo retoma o tempo de duração
da mídia, em segundos, necessário para a reprodução. Para medir a quantidade de
tarefa realizada em determinado momento, usaremos atributo curentTime da API para
elementos de mídia. Esse atributo retorna o número de segundos decorridos desde
o início da reprodução da mídia até o momento atual.

O exemplo a seguir demonstra esse oitavo passo. As linhas de código em destaque

mostram os acréscimos introduzidos no script anterior.
138 HTML 5

JavaScript
function init() {

van progress = document.getElementsByTagName('progress')[0];

var pp = document.getElementById('pp')j
function atualizar() {
progress.setAttribute( 'max', video.duration);
var cT = video.currentTime;
progress.value = cT;
var porcentagem = cT/video.duration * 100;
if (parse!nt(porcentagem%2) == 0) {
pp.textContent = parselnt(porcentagem);
if (porcentagem == 100) {clearlnterval(atualizar)}
}
}
setlnterval(atualizar, 300);
}
window.onload = init;

► HTML

<br>
«progress max=""x/progress>
«span id="pp">0«/span>%

Atualmente só o navegador Chrome suporta o elemento progress e seus atribu­

tos. O Opera suporta pardalmente e o Firefox não suporta. Sobre o script convém
ressaltar os seguintes pontos:

□ A função a t u a liz a r destina-se a atualizar o andamento da reprodução da mí­

dia colhendo o valor, em segundos, do instante atual de reprodução e, com
cálculos simples, transforma esse valor em porcentagem do total de tempo
necessário para a reprodução da mídia.

a O valor calculado para a porcentagem é inserido em um elemento span e, ao

mesmo tempo, passado como valor do atributo v a lu e do elemento p ro g re s s .
Isso fornece ao usuário uma indicação da porcentagem da mídia executada
não só no elemento span como na barra de progresso.
Capítulo B a Áudio e vídeo 139

■ A função atualizar é executada a cada 300m s com uso do método setlnterval

da JavaScript.

s Notar o uso do atributo textContent para atualizar o conteúdo do elemento

span. Esse atributo é do tipo escrita/leitura e funciona de forma idêntica à
propriedade innerHTML para escrita. É um atributo constante do DOM 3 e
suportado pelos navegadores atuais, exceto o Internet Explorer versões 8 e
anteriores.

Nono passo

Esse fica para você exercitar suas habilidades com JavaScript.

Você deve ter notado que os botões de controle foram inseridos no DOM com uso
de script; contudo, o slider de controle do som e a barra de progresso da reprodução
do vídeo constam da marcação EITML da página. Nesse nono passo, proponho que
você retire esses controles da marcação e insira-os no DOM com uso de script tal
como fizemos com os botões.

Qual a vantagem dessa técnica? Como o funcionamento dos controles depende

da JavaScript, se ela estiver desabilitada no navegador, os controles personalizados
não serão renderizados e o usuário usará os controles nativos sem ver botões, barra
de progresso e slider que não têm qualquer função.
Neste capítulo, será apresentado o elemento canvas e suas funcionalidades. Mostra­
remos a interface do elemento relacionando, definindo e explicando o funciona­
mento de cada um dos seus métodos e atributos. Apresentaremos exemplos práti­
cos disponíveis para consulta online ou download para estudo local nos quais as
funcionalidades de criação serão demonstradas a título de exemplificação prática
do estudo teórico relatado.

4.1 Canvas
O elemento canvas destina-se a delimitar uma área para criação dinâmica de ima­
gens, como gráficos estáticos, jogos e gráficos dinâmicos e imagens em geral criadas
com linguagem de programação dinâmica. Todo o trabalho de criação e animação
é feito com JavaScript.

E necessário que o desenvolvedor faça uma análise criteriosa para uso desse
elemento. Não devemos usá-lo se houver um elemento mais apropriado. Por exem­
plo: para marcar o cabeçalho ou o topo de um site, ainda que ele tenha sido pro­
jetado com uso maciço de imagens, talvez seja mais apropriado o uso do elemento
hl devidamente estilizado e não o uso de canvas. Como regra geral, não devemos
simplesmente decidir usar canvas e descartar outros elementos sempre que temos
uma imagem na página.

O acesso ao conteúdo gráfico contido em canvas, em navegadores que não supor­

tam esse elemento, deve ser garantido com uso de conteúdo alternativo com a mesma
função ou propósito do conteúdo gráfico. Tal conteúdo deve constar da marcação

140
Capítulo 4 ■ Canvas 141

da página e ser inserido tendo canvas como seu Container. Tal como ocorre com o
elemento audio estudado anteriormente, o conteúdo inserido em canvas é ignorado
por navegadores que suportam esse elemento e renderizado pelos que não suportam.

As questões de acessibilidade ao conteúdo gráfico transmitido por canvas ainda

estão sem solução nas especificações da HTML5. O navegador Internet Explorer 9
deu um passo à frente e implementou a funcionalidade que permite às tecnologias
assistivas e à navegação por teclado acessar o conteúdo alternativo de canvas mesmo
que o navegador suporte esse elemento. Até o momento é o único navegador com
essa funcionalidade.

O grupo de trabalho da HTML5, desde julho de 2007, estuda alternativas na

API de canvas que permitam prover nativamente a acessibilidade a esse elemento;
contudo, até o presente (meados do ano 2011) nada está definido.

A marcação para definir a área de criação dinâmica de imagens é muito simples,

como mostrada a seguir.

► CSS
canvas {
border: lpx solid #000;
background: #ffc;
}

►HTML
<canvas>
<p> Conteúdo alternativo para navegadores que não suportam canvas.</p>
</canvas>

M l [c4-canvas-ex1.html]

No exemplo mostrado, disponível no site do livro, definimos, com uso de regra

de estilo, uma borda e uma cor de fundo para o elemento canvas com a finalidade
de facilitar a visualização. Convém notar que, por padrão, as dimensões de canvas
quando não forem definidas serão iguais a 300 x 150px.

Contudo, você não estará limitado a essas dimensões, pois, além dos atributos
globais, o elemento canvas suporta os atributos width e height destinados a definir
respectivamente a largura e a altura da área de criação das imagens dinâmicas. No
exemplo a seguir, usamos esses atributos para definir uma área com dimensões
personalizadas.
142 HTML 5

► css
canvas {
border: lpx solid #000;
background: #ffc;

► HTML

ccanvas width="600" height="300">

<p> Conteúdo alternativo para navegadores que não suportam canvas.</p>
</canvas>

O 1.-,
w J [c4-canvas-ex2.htm!]

A unidade de medida das dimensões definidas com uso dos atributos é o pixel,
porém é admitido definir-se as dimensões de canvas com CSS; nesse caso, podemos
usar qualquer medida CSS válida, tais como em, porcentagem etc. O exemplo a seguir
ilustra o caso de definição das dimensões com CSS.

►CSS
canvas {
width:100%;
height:200px;
border: lpx solid #000;
background: #ffc;
}

► HTML
<canvas>
<p>Conteúdo alternativo para navegadores que não suportam canvas.</p>
</canvas>

T u [c4-canvas-ex3.html]

Uma vez definida a área de criação, o próximo passo é a criação da imagem

propriamente dita. Todo o trabalho de criação é feito com JavaScript.

A especificação para a HTM L5 prevê dois contextos de criação: o contexto bi­

dimensional e o contexto tridimensional.

O contexto bidimensional destina-se à criação de imagens em duas dimensões,

x e y, segundo um sistema de eixos cartesianos, cuja origem é no canto superior
esquerdo da área de criação (canvas), com as coordenadas x crescendo da esquerda
para a direita e y de cima para baixo, conforme esquema mostrado na figura 4.1.
Capítulo 4 b Canvas 143

Figura 4.1 - Coordenadas do contexto 2D de canvas.

O contexto tridimensional destina-se à criação de imagens em três dimensões

com acréscimo do eixo z no sentido da profundidade. Esse contexto ainda não
consta das especificações; portanto, está fora do escopo deste livro. Estudaremos
com detalhes o contexto bidimensional.

Para começar a desenhar, precisamos criar uma referência JavaScript para o

elemento canvas no D OM e definir o contexto de desenho. Observe o exemplo
comentado a seguir.

► HTML
ccanvas id="quadro" width="400" height="200">
<p>Conteúdo alternativo para navegadores que não suportam canvas.</p>
</canvas>

►JavaScript

1. var canvas = document.getElementById('quadro');

2. var ctx = canvas.getContext('2d');

Código comentado:

Linha(s) Descrição

Linha 1 Cria uma referência (var canvas) para o elemento canvas que servirá de
área para a criação gráfica.
Linha 2 Usa o método getContext ( ) previsto na API de canvas para criar a referência
(var ctx) ao contexto de criação gráfica. Essa referência é a chave para
acessar os métodos e atributos JavaScript da API.

A API de canvas prevê métodos e atributos próprios que visam a facilitar a criação
gráfica. Além deles, é claro, qualquer objeto e seus métodos e propriedades próprios
da linguagem JavaScript podem ser utilizados na criação.
144 HTML 5

Mostraremos a seguir alguns exemplos usando métodos e atributos da API de

canvas. Para uma visão geral de todos os métodos e atributos, consulte http://www.
whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.htnil.

Para os exemplos a seguir, a marcação utilizada e a tomada JavaScript das refe­

rências para a criação são as mostradas no exemplo anterior e transcritas a seguir.

Inserimos o script diretamente na página dos exemplos, constantes do site do livro,

com a finalidade de facilitar a visualização quando o leitor abrir o código-fonte da
página. Em produção devemos linkar a página para o script. Além disso, ao mostrar
os Scripts no livro, omitimos a declaração window.onload = functionf) {//script} que
consta das páginas dos exemplos.

> HTML
ccanvas id="quadro" width»"400" height=''200">
<p>Conteúdo alternativo para navegadores que não suportam canvas.</p>
</canvas>

>■ JavaScript

1. var canvas = document.getElementById('quadro');

2. var ctx = canvas.getContext('2d‘);

4 X 1 API de canvas

4 .1.1 .1 strokeRect(x,y,/,/])

Esse método destina-se a desenhar o contorno de um retângulo. Os parâmetros x e

y definem as coordenadas do canto superior esquerdo do retângulo e os parâmetros
1 e h definem, respectivamente, a largura e a altura, em pixel, do retângulo.

4 .1.1.2 strokeStyle

Esse atributo destina-se a definir a cor das linhas do elemento gráfico criado. Os
valores possíveis são as cores válidas em CSS, tais como HSL, HSLA, RGB, RGBA
(hex e porcentagem) e keywords. Não sendo definida a cor com uso desse atributo,
o padrão é a cor preta # 000000.
Capítulo 4 a Canvas 145

4.1.1.3 lineWidth

Esse atributo destina-se a definir a espessura das linhas, em pixel, do elemento

gráfico criado. Os valores possíveis são os números inteiros. Não sendo definida a
espessura com uso desse atributo, o padrão é zero e a linha não será visualizada.

4.1.1.4fillRect(x,y,l,/i)

Esse método destina-se a desenhar um retângulo em cor sólida. Os parâmetros x e

y definem as coordenadas do canto superior esquerdo do retângulo e os parâmetros
l e h definem, respectivamente, a largura e a altura, em pixel, do retângulo.

4.1.1.5 filIStyle

Esse atributo destina-se a definir a cor de preenchimento do elemento gráfico criado.

Os valores possíveis são as cores válidas em CSS, tais como HSL, HSLA, RGB, RGBA
ihex e porcentagem) e keywords.

Exemplo:

No exemplo a seguir desenhamos três retângulos usando os métodos e atributos

descritos.

►JavaScript

1 <script>
2 var canvas = document.getElementByld('quadro');
3 var ctx = canvas.getContext('2d');
4 ctx.strokeStyle = '#f00';
5 ctx.lineWidth = 2;
6 ctx.strokeRect(30,30j 80,40);
7 ctx.strokeStyle = '#00f;
8 ctx.lineWidth = 4;
9 ctx.strokeRect(130,100, 140,90);
10 . ctx.strokeStyle = '#000';
11. ctx.lineWidth = 2;
12 . ctx.filIStyle = 'rgba(0,255,0,0.4)';
13. ctx.fillRect(150,60, 200,70);
14. ctx.strokeRect(148,58, 204,74);
15. </script>

■ ÏH [c4-canvas-ex4.html]
146 HTML 5

Código comentado:
Linha(s) Descrição

Linha 4 Define a cor vermelha para as linhas do elemento gráfico a criar.

Linha 5 Define a espessura de 2px para as linhas do elemento gráfico a criar.
Linha 6 Cria um retângulo nas coordenadas x=30px e y=30px com 80px
de largura e 40px de altura.
Linhas 4 a 6 Notar que o uso do método stroke. Rect () para a criação do retângulo
foi definido na linha 6, depois de termos definido o estilo para a
cor e espessura da linha. Essa condição é mandatória, define-se o
gráfico depois da definição dos seus estilos.
Linhas 7 a 8 Cria um retângulo em outra posição de canvas nas mesmas condições
anteriores.
Linhas 10 a 14 Cria um retângulo nas condições anteriores e preenche-o com um
retângulo de cor sólida.
Linha 12 Usa o atributo filistyle para definir uma cor e transparência para
preenchimento de um retângulo.
Linha 13 Usa o método fillRect() para criar um retângulo sólido.

Notar que o elemento gráfico definido nas linhas 10 a 14 é formado pela criação
de dois retângulos. Um com uso do método strokeRectQ que criou o contorno e
outro com uso do método fillRect() que criou o retângulo sólido dentro do con­
torno. Observe que as coordenadas e dimensões dos dois retângulos diferem para
compensar a espessura da borda.

4.l.1.6clearRect(x,y,/,fi)

Esse método destina-se a apagar uma área retangular de canvas. No exemplo a seguir.
desenhamos um retângulo e a seguir apagamos um retângulo menor nele contidc.
Exemplo:

►JavaScript
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;
ctx.fillStyle = '#060';
ctx.fillRect(20,30, 300,150);
ctx.strokeRect(18,28, 304,154);
ctx.clearRect(50,60,180,100);
</script>

•ígQ [c4-canvas-ex5.html]
Capítulo 4 ■ Canvas 147

4 .1 .1 7 shadow

Os atributos para sombreamento (shadow) dos elementos gráficos de canvas são:

shadowColor que define a cor da sombra com uso de um valor CSS válido para cor;
shadowOffsetX e shadowOffsetY que definem com uso de um número finito a espessura
e deslocamento da sombra (em pixel) e shadowBlur que define com uso de um nú­
mero maior ou igual a zero o desfoque (efeito blur) da cor da sombra. Os valores
que definem shadowOffset podem ser positivos ou negativos determinando o sentido
da sombra.

O exemplo a seguir é interativo e encontra-se disponível no site do livro. Nele

você escolhe a cor da sombra e seus atributos e ao pressionar um botão visualiza
a aplicação da sombra. No script mostrado a seguir não consta a programação
JavaScript para fazer funcionar a interatividade do exemplo. Se você tiver interessado
naquela programação, consulte o código-fonte da página.

Exemplo:

►JavaScript
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d');
ctx.fillStyle = ’#©f 0';
ctx.shadowColor = cód_hexa_cor; // você escolhe a cor
ctx.shadowOffsetX = valor; // você escolhe o valor
ctx.shadowOffsetY = valor; // você escolhe o valor
ctx.shadowBlur = valor; // você escolhe o valor
ctx.fillRect(40,20, 290,150);
</script>

[c4-canvas-ex6.html]

Estudaremos a seguir os atributos para a construção de caminhos (path) e sub-

caminhos (subpaths) em canvas. Um caminho é constituído de zero ou mais subca-
minhos. Cada subcaminho é constituído por um ou mais pontos conectados por
uma linha reta ou curva. Os subcaminhos podem ser fechados ou abertos. Diz-se
que um subcaminho é fechado quando o ponto inicial está conectado ao ponto
final por uma linha reta.
148 HTML 5

4 .1.1.8 beginPath()

Esse método destina-se a resetar o path corrente e nativo do contexto canvas criando
condições para se iniciar a construção de um novo path. Todo path ou subpath a
ser construído deverá começar com esse método.

4.1.1.9moveTo(x,y)

Esse método destina-se a posicionar a pena de desenho nas coordenadas x e y

4 .1.1.10 lineTo(x,y)

Esse método destina-se a desenhar uma linha reta desde a posição na qual se en­
contra a pena até as coordenadas x e y

4 .1.1 .11 stroke()

Esse método destina-se a aplicar os estilos definidos pelos atributos de criação no

caminho construído.

O exemplo a seguir cria uma linha poligonal com três segmentos de reta nas
cores vermelha, azul e verde.

►JavaScript
<script>
var ctx = canvas.getContext('2d');
ctx.beginPathQ;
ctx.strokeStyle = '#f00';
ctx.lineWidth = 2;
ctx.moveTo(20,20);
ctx.lineTo(80,120);
ctx.strokeQ;

ctx.beginPathQ;
ctx.strokeStyle = '#009';
ctx.moveTo(80,120);
ctx.lineTo(150,30);
ctx.stroke();

ctx.beginPathQ;
ctx.strokeStyle = '#090';
Capítulo 4® Canvas 149

ctx.moveTo(150,30);
ctx.lineTo(350,180);
ctx.strokeQ;
<script>

[c4-canvas-ex7.html]

4 .1.1.12 arcTo(x7,yí, x2, y2, r)

Esse método destina-se a desenhar um arco com origem nas coordenadas x l e y l e

término nas coordenadas x2 e y2 e com raio r.

O exemplo a seguir cria uma linha poligonal com três segmentos de arco nas
cores vermelha, azul e verde.

►JavaScript
<script>
var canvas = document.getElementByld('quadro');
var ctx = canvas.getContextQ2d');

ctx.beginPathQ;
ctx.moveTo(20,50);
ctx.strokeStyle = '#f00';
ctx.arcTo(100, 50, 100, 130, 80);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(100,130);
ctx.strokeStyle = '#009';
ctx.arcTo(200, 130, 200, 30, 100);
ctx.strokeQ;

ctx.beginPathQ;
ctx.moveTo(200,30);
ctx.strokeStyle = '#090';
ctx.arcTo(200, 190, 380, 190, 180);
ctx.strokeQ;
</script>

Dr,
♦ J [c4-canvas-ex8.html]
150 HTML 5

4 .1.1.13 arc(x, y, r, angulolnicial, anguloFinal, sentido)

Esse método destina-se a desenhar um arco com centro nas coordenadas x e y com
raio r e ângulo inicial e final definidos em radianos (com sinal positivo ou negativo).
O sentido do ângulo pode ser anti-horário (sentido trigonométrico positivo) ou
horário (sentido trigonométrico negativo) e deve ser definido pelos booleanos true
e false respectivamente. Lembramos que ângulos medidos em radianos na sintaxe
JavaScript são medidos com o uso objeto Math da linguagem. Por exemplo: Math.
PI/2=90', Math.PI=180", 3/2*Math.PI=270°, Math.PI*2=360° e assim por diante.

O exemplo a seguir cria alguns arcos com uso desse método.

►JavaScript
<script>
var canvas = document.getElementByldCquadro');
var ctx = canvas.getContext('2d');

ctx.lineWidth = 4; // espessura da linha para todos os arcos

ctx.beginPathQ;
ctx.strokeStyle = '#f00';
ctx.arc(80, 100, 40, 0, Math.PI*2, true);
ctx.strokeQ;

ctx.beginPath();
ctx.strokeStyle = '#090';
ctx.arc(200, 100, 40, 0, Math.PI, true);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = '#00f;
ctx.arc(200, 100, 40, 0, Math.PI, false);
ctx.strokeQ;

ctx.beginPath();
ctx.strokeStyle = 1#f90’;
ctx.arc(320, 100, 40, 0, 3/4*Math,PI, true);
ctx.strokeQ;
</script>

Qs>
[c4-canvas-ex9.html]
Capítulo 4 ■ Canvas 151

4 .1.1 .14 filK)

Esse método destina-se a preencher com uma cor sólida um caminho. Para de­
monstrar esse método vamos fazer o preenchimento dos arcos do exemplo anterior
com uma cor amarela. Destacamos as alterações feitas no script anterior. Exemplo:

►JavaScript
<script>
var canvas = document.getElementByld('quadro');
var ctx = canvas.getContext('2d');

ctx.lineWidth = 4; // espessura da linha para todos os arcos

ctx.beginPath();
ctx.strokeStyle = ’#f00’;
ctx.fillStyle = '#0ff1;
ctx.arc(80, 100, 40, 0, Math.PI*2, true);
ctx.fillQ;
ctx.strokeQ;

ctx.beginPath();
ctx.s“trokeStyle = '#090';
c t x . f i l l S t y l e = '#996';
ctx.arc(200, 100, 40, 0, Math.PI, true);
c tx .fillO ;
ctx.strokeQ;

ctx.beginPathQ;
ctx.strokeStyle = '#00f;
ctx.fillStyle = '#c6c';
ctx,arc(200, 100, 40, 0, Math.PI, false);
ctx.fillO;
ctx.strokeQ;

ctx.beginPathQ;
ctx.strokeStyle = '#f90';
ctx.fillStyle = '#0c0';
ctx.arc(320, 100, 40, 0, 3/4*Math.PI, true);
ctx.fillQ;
ctx.strokeQ;
</script>

[c4-canvas-ex10.html]
152 HTML 5

Quando definimos uma espessura para a linha de contorno e um preenchimento

para o caminho criado, a ordem de declaração dos métodos strokeQ (para a linha) e
fill() (para o preenchimento) é importante. Declarar strokeQ depois de fill(), como
fizemos no exemplo anterior, posiciona a linha sobre o preenchimento e, ao contrário,
posiciona o preenchimento sobre a metade da espessura da linha. Faça uma cópia
do exemplo anterior e inverta a ordem de declaração para visualizar a diferença.

4 .1.1.15 rect(x,y,/Q)

Esse método destina-se a desenhar um retângulo. Os parâmetros x e y definem as

coordenadas do canto superior esquerdo do retângulo e os parâmetros 1e h definem,
respectivamente, a largura e a altura, em pixel do retângulo.

Exemplo:

►JavaScript
<script>
var canvas = document.getElementByld('quadro');
var ctx = canvas,getContext('2d');

ctx.lineWidth = 4;

ctx.beginPathQ;
ctx.strokeStyle = '#f00';
ctx.fillStyle = '#0ff';
ctx.rect(50, 60; 200; 120);
ctx.fillO;
ctx.strokeQ;
</script>

[c4-canvas-ex11.html]

4 .1 .1 .1 6 closePathO

Esse método destina-se a fazer o fechamento de um caminho. Por exemplo: cri.,

uma linha poligonal ou um arco aberto e declarar closePathQ faz com que os pontes
inicial e final da criação sejam unidos por uma linha reta. Observe o exemplo s
seguir no qual fizemos o fechamento de uma linha poligonal de três segmentos de
reta e de um arco de circunferência.
Capítulo 4 B Canvas 153

Exemplo:

►JavaScript
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d');
ctx.lineWidth = 2;

ctx.beginPathQ;
ctx.moveTo(20,20);
ctx.strokeStyle = '#f001j
ctx.lineTo(80,190);
ctx.lineTo(180,160);
ctx.lineTo(220,20);
ctx.closePathQj
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle = '#090';
ctx.arc(300, 100, 80, 0, -3/2*Math.PI, true);
ctx.closePathO;
ctx.stroke();
</script>

■$} [c4-canvas-ex12.html]

4 .1 .1 .1 7 globalAlpha

Esse atributo destina-se a definir uma transparência e ser aplicada em todos os

elementos de canvas. O valor para esse atributo varia de 0 a 1, sendo 0 transparência
total (invisibilidade) e 1 opacidade total (nada transparente).

4 .1.1.18 lineJoin

Esse atributo destina-se a definir a forma como as linhas se unem. Os valores pos­
síveis são: miter, bevel e round.

4.1.1.19 lineCap

Esse atributo destina-se a definir a forma de acabamento das extremidades das

linhas. Os valores possíveis são: butt, round e square.
154 HTML 5

O exemplo a seguir encontra-se no site do livro e é interativo para você visualizar

os efeitos desses três atributos

►JavaScript
<script>
var canvas = document.getElementByldf'quadro');
var ctx = canvas.getContext('2d’);

ctx.lineloin = escolha;
ctx.lineCap = escolha;
ctx.globalAlpha = escolha;

ctx.lineWidth = 50;
ctx.beginPathQ;
ctx.moveTo(100,40);
ctx.strokeStyle = '#f00‘;
ctx.lineTo(100jl30);
ctx.lineTo(350jl30);
ctx.stroke();
</script>

"'í [c4-canvas-ex13.html]

As especificações para a HTM L5 preveem dois tipos de gradiente, linear e radial.

Para criar gradientes são previstos três métodos, como mostrado a seguir.

4 .1.1.2 0 createLinearGradient(x,y,xí,y7)

Esse método destina-se a criar um gradiente linear. As coordenadas x,y e x l,y l

definem os pontos nos quais começa e termina respectivamente o gradiente.

4 .1 .1 .2 1 createRadialGradientfx, y ,r ,x 1 ,y 1 ,r l )

Esse método destina-se a criar um gradiente radial. As coordenadas x,y e x l,y l

definem os centros dos círculos nos quais começam e terminam respectivamente o
gradiente e os parâmetros r e r l seus raios.

4 .1 .1.2 2 addCoIorStopfoffsef, cor)

Esse método destina-se a definir como as cores do gradiente serão distribuídas. O

valor do parâmetro offset varia de 0 a 1. Zero define a cor de início e l a cor do final
Capítulo 4 »Canvas 155

do gradiente. Em um gradiente de duas cores, esse método será aplicado duas vezes,
uma com offset 0 e cor inicial e outra com ofíset 1 e cor final. Podemos criar um
gradiente de várias cores definindo várias vezes esse método com offset crescente,
por exemplo: 0.1,0.2, 03,0.4,0.8,1 (seis cores).

No exemplo a seguir, que se encontra no site do livro, você poderá visualizar os

efeitos da aplicação do método para gradientes lineares.

►JavaScript
<script>
var canvas = document.getElementByld('quadro');
var ctx = canvas.getContext('2d');
// cria um gradiente de vermelho para azul
gradient = ctx. createLinearGradient(10,10,250,100);
gradient.addColorStop(0, '#f00');
gradient.addColorStop(l, '#00f');
// cria um gradiente de verde para amarelo e azul claro
gradientl = ctx.createLinearGradient(330,20,330,160);
gradientl.addColor$top(0, '#090');
gradientl.addColorStop(0.5, 1#ff9 1);
gradientl.addColorStop(1, '#9cf');
// cria um gradiente de laranja para amarelo claro
gradient2 = ctx.createLinearGradient(60,120,180,120);
gradient2.addColorStop(0, '#f90');
gradient2.addColorStop(l, '#ffc1);
// aplica os gradientes em dois retângulos e um círculo
ctx.fillStyle = gradient;
ctx.fillRect(10,10,250,100);

ctx.fillStyle = gradientl;
ctx.fillRect(280,20,100,160);

ctx.fillStyle = gradient2;
ctx.arc(120,120,60,0,2*Math.PI, true);
ctx.fillQ;
</script>

•#’.] [c4-canvas-ex14.html]

No exemplo a seguir, que se encontra no site do livro, você poderá visualizar os

efeitos da aplicação do método para gradientes radiais.
156 HTML 5

Exemplo:

►JavaScript
<script>
var canvas = document.getElementByld('quadro ') ;
var ctx = canvas.getContext('2d');

gradient = ctx.createRadialGradient(130,60,10,130,60,168);
gradient.addColorStop(0, 1#f00');
gradient.addColorStop(l, '#00f');

gradientl = ctx.createRadialGradient(330,50,5,330,50,130);
gradientl.addColorStop(0, '#090');
gradientl.addColorStop(0.5, '#fd8');
gradientl.addColorStop(l, '#9cf');

gradient2 = ctx.createRadialGradient(100,100,5,100,100,60);
gradient2.addColorStop(0, '#f90');
gradient2.addColorStop(l, '#f5f5f5');

ctx.fillStyle = gradient;
ctx. fillRect(10,10,250,100);

ctx.fillStyle = gradientl;
ctx.fillRect(280,20,100,160) ;

ctx.fillStyle = gradient2;
ctx.arc(120,120,60,0,2*Math.PI, true);
ctx.fillO;
</script>

[c4-canvas-ex15.html]

4 .1 .1 .2 3 createPattern(/m açjem , rep etiçã o )

Esse método destina-se a inserir uma imagem como preenchimento de um con­

torno. O parâmetro imagem define a imagem a ser usada como preenchimento e
o parâmetro repetição define como a forma gráfica se repetirá. A imagem poderá
ser um elemento im g, um elemento canvas ou um elemento v id e o e os valores para o
parâmetro são: re p e a t, r e p e a t-x , r e p e a t-y e n o -re p e a t.
Capítulo 4 ■ Canvas 157

No exemplo a seguir, que se encontra no site do livro, você poderá visualizar os

efeitos da aplicação desse método. No retângulo da esquerda usamos o valor no-
repeat para o parâmetro repetição e no da direita repeat. Os valores repeat-x e repeat-y
causam o mesmo efeito dos seus equivalentes nas CSS.

►JavaScript
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext(’2d');
var imagem = new ImageQ;
imagem, src = 'flor. png';

imagem.onload = function!) { // importante executar o desenho depois de a imagem ter sido carregada
var pattern = ctx.createPattern(imagem, 'no-repeat');
var patternl = ctx.createPattern(imagem, 'repeat');
ctx.lineWidth = 4;
ctx.strokeStyle = '#f00';

ctx.fillstyle = pattern;
ctx. fillRect(2,2,190,196);
ctx.strokeRect(2,2,190,196);

ctx.fillstyle = patternl;
ctx.fillRect(200,2,198,196);
ctx.strokeRect(200,2,198,196);
}
</script>

[c4-canvas-ex16.html]

4 .1.1.2 4 globalCompositeOperation

Esse atributo destina-se a definir como uma imagem será desenhada em relação
ao estado atual do desenho em canvas, ou, ainda, como será a composição das duas
imagens.

Para melhor entendimento do funcionamento dessa propriedade, vamos criar

um exemplo mostrando duas imagens: um retângulo e um círculo. Considere que
o retângulo já existe em canvas, assim ele representa o que denominamos de estado
atual de desenho em canvas. A especificação denomina essa imagem de destination.
A imagem do círculo é denominada pela especificação de source.
158 HTML 5

A composição das imagens destination e source pode ser feita de onze maneiras
diferentes. Por padrão, a imagem source é colocada sobre a imagem destination, ou
seja, o empilhamento das imagens em canvas se dá com a imagem declarada por
último no código sobre as imagens anteriores. Em resumo, esse atributo interfere não
só na ordem de empilhamento, mas também na integração entre as duas imagens.

Os valores possíveis para esse atributo são: source-atop, source-in, source-over

(default), source-out, destination-atop, destination-in, destination-over, destination-out,
ligthter, copy e xor.

A especificação prevê ainda o valor vendorName-operationName para a aplicação de

composições proprietárias.

No exemplo a seguir, que se encontra no site do livro, você poderá visualizar os

efeitos da aplicação desse atributo em uma página interativa na qual você escolhe
um valor e visualiza o seu efeito de composição. Não constam do script os coman­
dos para a interatividade.

►JavaScript
<script>
var canvas = document.getElementByld('quadro');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#900';
ctx.fillRect(60,60,220,130);

ctx.globalCompositeOperation = escolha;

ctx.fillStyle = '#090';
ctx.beginPath();
ctx.arc(300,100,80,0,2*Math.PI,true);
ctx.fillQ;
</script>

- [c4-canvas-ex17.html]

Transformações visam a movimentar canvas. Os métodos para transformações

permitem deslocar canvas horizontal e verticalmente, rotacionar canvas, aplicar
escala (reduzir ou aumentar) a unidade de medida de canvas e modificar a matriz
de coordenadas de canvas. Antes de estudarmos esses métodos, vamos apresentar
os métodos s a v e Q e restoreQ que normalmente são usados em conjunto com os
métodos de transformação e estilização.
Capítulo 4 ■ Canvas 159

Quando se aplicam métodos de transformação em canvas, alteramos as referências.

Em criações mais complexas, tanto as transformações quanto as definições de esti­
los podem exigir que tenhamos de reverter as configurações iniciais para criarmos
novos desenhos. Isso significa necessidade de se escrever mais código.

Os métodos saveQ e restoreQ visam a eliminar a necessidade de códigos para

a reversão, pois armazenam e restabelecem estados anteriores de canvas. A melhor
maneira de entender o funcionamento desses métodos é com a análise de um
exemplo prático.

Antes, porém, vamos examinar o esquema gráfico mostrado na figura 4.2 que es­
clarece o mecanismo de aplicação de estilos e transformações com uso desses métodos.

^ estilos (transformações)
desenho 1
s@ve()

estilos (transformações)
desenho 2

estilos (transfòrmações)
desenho 3
saveQ
. estilos (transformações)
desenho 4
saveQ

1 \ restore
r€ ()_
%
I esenhoô
\
% restoreQ
'4 desenho 6

\ restoreQ
"!'"^>desenhb 7
Figura 4.2 - Mecanismo saveQ restoreQ.

Podemos usar quantos métodos saveQ quisermos em nosso script para armazenar
estilos, mas, é lógico, devemos posicioná-los no código após declarações de estilos
(ou transformações) a serem armazenados.
160 HTML 5

Os estilos (ou transformações) vão sendo armazenados como se estivessem sendc

“empilhados” com os mais recentes no código na parte superior da pilha. Formada
a pilha de estilos, podemos chamá-los e aplicá-los a novos desenhos com uso do
método restore)), que deverá ser evocado antes do script de desenho.

Cada restore)) no código vai desempilhando os estilos a aplicar na ordem inversa

à que eles foram empilhados.

No diagrama da figura 4 . 2 são armazenados em uma pilha os estilos dos desenhos

1, 3 e 4. A aplicação de estilo no desenho 5 faz-se pelo método restore)) que busca
o último estilo armazenado. Assim, ao desenho 5 é aplicado o estilo do desenho 4.
O próximo restore)) é para o desenho 6, que busca o estilo do desenho 3 (seguinte
na pilha), e assim por diante.

No exemplo existente no site do livro armazenamos e restabelecemos declarações

de estilo. O exemplo contém dois canvas com scripts de desenho idênticos, exceto
pelo fato de que no primeiro canvas não usamos os métodos save)) e restore)) e no
segundo canvas usamos.

Em ambos desenhamos cinco retângulos preenchidos com cor sólida. O pri­

meiro com a cor vermelha, o segundo verde, o terceiro azul e os dois últimos sem
estilização de cor.

No primeiro canvas os dois últimos retângulos assumem a última declaração de

estilo para a cor que é a do terceiro retângulo, ou seja, cor azul. Assim, as cores dos
retângulos são vermelha, verde, azul, azul e azul.

No segundo canvas usamos duas vezes o método save)) para armazenar os estilos
do primeiro (vermelha) e segundo (verde) retângulos.

► JavaScript
<script>
var canvas = document.getElementByld('quadro');
van ctx = canvas.getContext)'2d'); // canvas
ctx.fillStyle = 'red';
ctx.fillRect (40,20,40,140);
ctx.fillStyle = 'green';
ctx.fillRect(110,20,40,140);
ctx.fillStyle = 'blue';
ctx.fiilRect(180,20,40,140);
ctx.fillRect(250,20,40,140);
ctx.fillRect(320,20,40,140);
Capítulo 4 0 Canvas 161

v a r c a n v a s l = docum ent.g etEle m en tB yld('q uad ro r);

var c t x l = c a n v a s l .g e t C o n t e x t ( '2 d ') ; // canvas 1

c tx l.fillS ty le = 'r e d ';

c t x l . fi ll R e c t (40j 20j 4 0 ,1 4 0 ) ;
c tx l.s a v e Q ;

c t x l . f i l l S t y l e = 'g ree n1;

c t x l . f i l l R e c t ( 1 1 0 J 20J 4 0 ,1 4 0 ) ;
c tx l.s a v e Q ;

c tx l.fillS ty le = 'b lu e ';

c t x l . f i l l R e c t ( 1 8 0 , 2 0 , 4 0 ,1 4 0 ) ;

c tx l.r e s to r e ();
c t x l . f i l l R e c t ( 2 5 0 ,2 0 ,4 0 ,1 4 0 );

c tx l.r e s to r e ();
c t x l . f i l l R e c t ( 3 2 0 ,2 0 ,4 0 ,1 4 0 ) ;
</s cripts

«5 [c4-canvas-ex18.html]

4.1.1.25 scale(x,y)

Esse método destina-se a escalar as dimensões x e/ou y de todos os gráficos inseridos

em c a n va s . A área de desenho (ou seja, a largura e a altura de ca nva s ) não é afetada
ou escalável. Aplicar esse método aumenta ou diminui não somente as dimensões,
mas também as coordenadas proporcionalmente aos valores dos parâmetros x e y
passados ao método. O valor do parâmetro é o fator de multiplicação.

Há aumento quando os parâmetros são números positivos inteiros maiores do

que zero. Assim, definir x=2 resulta em duplicação das dimensões horizontais, x=5
quintuplicação e assim por diante.

Para diminuir, os parâmetros devem ser definidos com números maiores que
zero e menores que um. Assim, x = 03 resulta em redução de 70% nas dimensões
horizontais, x=0.5 em redução pela metade e assim por diante.

O exemplo a seguir encontra-se disponível no site do livro. É interativo e você

poderá testar e verificar o funcionamento desse método escolhendo alguns valores
para os fatores de multiplicação. Nele um quadro de 90 x 90px é escalável nas suas
162 HTML 5

dimensões horizontal e vertical. Notar como o fator de multiplicação se aplica às

coordenadas de origem do quadrado. Para ressaltar os deslocamentos, criando uma
referência para as dimensões iniciais, foi desenhado um quadrado cinza fixo com
aquelas dimensões.

►JavaScript
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ddd';
ctx.fillRect(10,5,90,90); // quadrado referência

ctx.scale(escolha,escolha);
c tx .fillS ty le = 'r g b a ( 0 ,1 0 0 ,0 ,0 .5 ) ';
ctx.fillRect(10,5,90,90);
</script>

dp7.) [c4-canvas-ex19.html]

4 .1.1.2 6 transSatefx, y)

Esse método destina-se a deslocar de um valor x e/ou y em pixel as coordenadas de

origem de c a nva s , o que equivale ao deslocamento de todos os gráficos nele inseridos.
A área de desenho (ou seja, a largura e a altura de ca nvas) não é afetada e não sofrerá
movimentação. Aplicar esse método faz com que haja um movimento de translação.

O valor do parâmetro x define uma translação na direção horizontal. Valores

positivos causam deslocamento para a direita e negativos para a esquerda.

O valor do parâmetro y define uma translação na direção vertical. Valores posi­

tivos causam translação para baixo e negativos para cima.

O exemplo a seguir encontra-se disponível no site do livro. É interativo e você

poderá testar e verificar o funcionamento desse método escolhendo alguns valores
para a translação. Nele um quadrado de 20 x 20px é deslocado nas suas dimensões
horizontal e/ou vertical. Para ressaltar os deslocamentos, criamos uma referência da
posição inicial desenhando um quadrado cinza fixo naquela posição.

►JavaScript
<script>
var canvas = document.getElementByld(’quadro1);
var ctx = canvas.getContext('2d');
Capítulo 4 b Canvas 163

c t x . f i l l S t y l e = '# ddd';
c t x .f i l l R e c t ( 1 9 0 , 9 0 ,2 0 ,2 0 ) ; // quadrado re ferência

ctx.translate(escolha,escolha);
c tx .f illS ty le = 'r g b a ( 0 ,1 0 0 ,0 ,0 .5 ) ';
c t x .f i l l R e c t ( 1 9 0 ,9 0 , 2 0 , 2 0 ) ;
</script>

[c4-canvas-ex20.html]

4 .1 .1 .2 7 rotate(ánguto)

Esse método destina-se a transformar o desenho, alterando sua posição como se

tivéssemos rotacionado canvas. A rotação é definida pelo parâmetro ângulo, em ra-
dianos, e segue o sentido trigonométrico, ou seja, ângulo positivo causa rotação no
sentido anti-horário e negativo no sentido horário. O centro de rotação é o ponto
de origem de canvas. A figura 4.3 esclarece o efeito de uma rotação positiva igual a
Math.PI/6 (30 graus).

o.o.
ângulo de rotação
j +m
J

/
K /

Figura 4.3 - Mecanismo para rotateQ.

O exemplo a seguir encontra-se disponível no site do livro. É interativo e você

poderá testar e verificar o funcionamento desse método escolhendo alguns valores
para a rotação. Nele um retângulo de 260 x 60px está posicionado inicialmente no
centro de canvas e, mediante a escolha de um ângulo de rotação, você poderá visua­
lizar o efeito do método. Para ressaltar a rotação, criamos uma referência à posição
inicial desenhando um retângulo cinza fixo naquela posição.
 HTML S

►JavaScript
<script>
var canvas = document.g etEle m e n tB yId ('q u ad ro ');
var c tx = c a n v a s .g e tC o n te x t( '2 d ') ;
c t x . f i l l S t y l e = ’ #ddd';
c t x .f il lR e c t ( 7 0 j7 0 j2 6 0 j6 0 ) ; // retângulo re ferência
var angulo = escolha;
c t x .r o t a t e (a n g u lo ) ;
c t x . f i l l S t y l e = ' rgba(0j 100j 0j 0 . 5 ) ' ;
c t x . f i l l R e c t ( 7 0 ,7 0 ,2 6 0 ,6 0 ) ;
</script>

■Cs» [c4-canvas-ex21.html]

O método d r a w Im a g e O destina-se a inserir imagens em ca nva s . A imagem a ser inserida

pode ser o conteúdo de um elemento im g, canvas ou video. Para inserir a imagem,
é necessário que ela tenha sido completamente carregada. Esse método pode ser
evocado de três maneiras diferentes, como mostrado a seguir.

4 .1.1.2 8 drawlmage(/magem, dx, dy)

Insere a imagem definida no parâmetro imagem com seu canto superior esquerdo
nas coordenadas definidas nos parâmetros dx e dy O exemplo a seguir esclarece o
uso desse método.

►JavaScript
<script>
var canvas = document. getEle m entB yId(' quadno' ) ;
var ctx = canvas. g e t C o n t e x t ( ' 2d ' ) ;
var ellmagem = document. cre ateEle m ent(' im g ') j
ellmagem.src = 'fl o r .p n g ';
c t x .d r a w l m a g e ( e l l m a g e m , 2 0 , 5 0 ) ; // insere a imagem ellmagem nas coordenadas 20, 5ß
</script>

■■te [c4-canvas-ex22.html]

4 .1.1.2 9 drawImageO'magem, dx, dy, dl, dh)

Insere a imagem definida no parâmetro imagem com seu canto superior esquerdo
nas coordenadas definidas nos parâmetros dx e dy redimensionando a imagem para
as dimensões em pixel dl de largura por dh de altura. O exemplo a seguir esclarece
o uso desse método.
Capítulo 4 ■ Canvas 165

► JavaScript
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d');
var ellmagem = document.createElement('img');
ellmagem.src = 'flor. png';
ctx .drawlmage(ellmagem, 20, 50, 100, 140); // insere a imagem ellmagem com 100xl40px
// nas coordenadas 20, 50
</script>

■ 9 J [c4-canvas-ex23.html]

4 .1.13 0 drawlmage(/magem, sx, sy, sl, sh, dx, áy, dl, dh)

Recorta a imagem definida no parâmetro imagem a partir das coordenadas sx, sy

com dimensões sl, sh e insere com seu canto superior esquerdo nas coordenadas
definidas nos parâmetros dx e dy redimensionando a imagem para as dimensões
em pixel dl de largura por dh de altura. O diagrama mostrado na figura 4.4 escla­
rece o recorte da imagem. Para o recorte mostrado no diagrama, foram definidos
os seguintes parâmetros: drawlmage(ellmagem,10,5,25,30,100,100,50,60);

Figura 4.4 - Recorte de imagem.

166 HTML 5

As dimensões originais da imagem são: 50 x 70px. O recorte foi feito a partir do

ponto localizado em 10, 5 na imagem e definiu-se uma largura de 25 pixel e uma
altura de 30px. A imagem assim recortada tem as dimensões de 25 x 30px e será
inserida nas coordenadas 100,100 de canvas. As dimensões da imagem recortada
para inserção foram definidas em 50 x 60px (o dobro de 25 x 30px originais). Dessa
forma, a imagem será redimensionada para o dobro do seu tamanho.

O exemplo a seguir esclarece o uso desse método para a imagem mostrada na

figura 4.4.

►JavaScript
<script>
var canvas = document.getElementByldf1quadro');
var ctx = canvas.getContextf'2d')j
var ellmagem = document.createElement('img');
ellmagem.src = 'flor.png1;
// recorta a imagem ellmagem e insere com o dobro do tamanho nas coordenadas 100,100
ctx.drawlmage(ellmagem, 10, 5, 25, 30, 100, 100, 50, 60);
</script>

[c4-canvas-ex24.html]

4.1.131 font

Esse atributo define as características da fonte a ser usada nos textos a serem inse­
ridos em canvas. A sintaxe para a definição das características é a mesma usada nas
CSS e mostrada a seguir a título de recordação.
font: [font-style || font-variant || font-weight]? font-size[/line-heigth]? font-family |
caption | icon | menu | message-box | small-caption | status-bar | inherit

Exemplo: ctx.font = 'italic small-caps bold 40px Georgia, sans-serif’

É natural que, em um primeiro momento, cheguemos à conclusão de que é

possível estilizar os textos de canvas com CSS declarando, por exemplo, a seguinte
regra CSS.
canvas {
text-align: justify;
text-transform: lowercase;
color: red;

}
Capítulo 4 ■ Canvas 167

Isso não vai funcionar. As características de apresentação dos textos e fontes

inseridas em canvas são determinadas pelos métodos e atributos da API e não por
CSS. A única estilização em canvas que interfere com a fonte inserida é o tamanho
de fonte declarada para canvas, pois é nesse tamanho que será tomada a base para
o cálculo da fonte declarada com tamanho relativo. Por exemplo:
canvas {
font-size: 10px; // base para fontes relativas

}
ctx.font = ctx.font = '250% Arial, serif; // a fonte em canvas será com tamanho igual a
// 250% de 10px = 25px

4.1.1.32 fi!IText(fexfo, x, y, L cMax])

Esse método destina-se a definir o preenchimento do texto a inserir. Admite três

parâmetros obrigatórios e um parâmetro facultativo. O parâmetro texto é uma
string e define o texto a ser inserido, os parâmetros x e y definem as coordenadas de
inserção do texto. O parâmetro facultativo cM ax define o comprimento máximo do
texto e, quando definido para um valor numérico menor do comprimento-padrão
do texto, faz com que ele sofra um efeito de compressão na horizontal, diminuindo
o espaçamento e a largura das letras.

4.1.1.33 strokeText(fexfo, x, y, l cMax])

Esse método destina-se a definir o contorno do texto a inserir. Admite três parâ­
metros obrigatórios e um parâmetro facultativo. O parâmetro texto é uma string e
define o texto a ser inserido, os parâmetros x e y definem as coordenadas de inserção
do texto. O parâmetro facultativo cM ax define o comprimento máximo do texto
e, quando definido para um valor numérico menor do comprimento-padrão do
texto, faz com que ele sofra um efeito de compressão na horizontal, diminuindo o
espaçamento e a largura das letras.

O exemplo a seguir esclarece o uso desses métodos. Foram criados e posiciona­

dos dois textos: o primeiro com uma cor sólida verde e um contorno na cor azul e
o segundo somente o contorno na cor vermelha. Notar que para o segundo texto
diminuímos a largura com uso do parâmetro facultativo cMax.

► JavaScript
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d');
168 HTML 5

ctx.font = 'italic small-caps bold 40px Georgia, sans-serif';

ctx.fillStyle = '#0f0';
ctx.strokeStyle = '#009';
ctx.fillTextCLivro htmlS', 20, 50);
ctx.strokeText('Livro htmlS', 20, 50);

ctx.font = '100px Arial, serif;

ctx.lineWidth = 2;
ctx.strokeStyle = '#c30';
ctx.strokeText('Livro htmlS do Maujor', 60, 160, 200);
</script>

[c4-canvas-ex25.html]

4 .1.1.3 4 textAlign

Esse atributo destina-se a definir o alinhamento do texto a inserir em relação ao

ponto de inserção. Admite os valores start, end, left, right e center.

O exemplo a seguir é interativo e encontra-se no site do livro. Nele você poderá

visualizar o efeito desse atributo escolhendo um dos valores possíveis para ele.

►JavaScript
<script>
var canvas = document.getElementByld('quadro');
van ctx = canvas.getContext(12d');
// Texto referência em cinza
ctx.font = '50px serif;
ctx.fillStyle = '#ccc';
ctx.fillText( 'Maujor', 200, 100);
// Ponto referência em azul
ctx.fillStyle = ’#006';
ctx.arc(200, 100, 3, 0, 2*Math.PI, true);
ctx.fillQ;
// Texto a alinhar em vermelho
ctx.font = '50px serif;
ctx.fillStyle = 'rgba(200, 0, 0, 0.6)';
ctx.textAlign = escolha;
ctx.fillTextf'Maujor', 200, 100);
</script>

[c4-canvas-ex26.html]
Capítulo 4 h Canvas 169

4.1.1.35 lextBaseline

Esse atributo destina-se a definir o alinhamento do texto a inserir em relação às

linhas-base do texto. Admite os valores top, hanging, alphabetic, middle, ideographic e
bottom. O valor-padrão é alphabetic.

O exemplo a seguir é interativo e encontra-se no site do livro. Nele você poderá

visualizar o efeito desse atributo escolhendo um dos valores possíveis para ele.

> JavaScript
<script>
var canvas = document.getElementById('quadro');
var ctx = canvas.getContext('2d’);
// Texto referência em cinza
ctx.font = '50px serif';
ctx.fillStyle = '#ccc';
ctx.fillTextCMaujor', 200, 100);
// linha de referência em azul
ctx.moveTo(0,101);
c t x .l i n e T o ( 4 0 0 ,1 0 1 ) ;
c t x .s t r o k e S t y l e = ' # 0 0 f ;
c tx .s tr o k e Q ;
// Texto a alinhar em vermelho
ctx.font = '50px serif;
ctx.fillStyle = 'rgba(200, 0, 0, 0.6)';
ctx.textBaseline = escolha;
ctx.fillTextCMaujor', 200, 100);
</script>

4 Ô [c4-canvas-ex27.html]

A figura 4.5 retirada das especificações para a HTM L5 mostra as linhas de base
para alinhamento de texto.

Encerramos este capítulo transcrevendo um exemplo de animação em canvas

constante das especificações para HTML5. Fizemos pequenas adaptações no script
original para compatibilizar com nosso layout dos exemplos. Visualize o arquivo
disponível no site do livro e consulte o código-fonte para maiores detalhes.

♦ 3 [c4-canvas-ex28.html]
170 HTML 5

top of boundina box

MMMMMÈ nanglng
- — f-
i. , middle
-h f alphabets ideographic
bottom of square

aottom of bounding Box

Figura 4.5 - Linhas de base para textos.

O elemento canvas permite criações e animações cujo limite é a capacidade do

desenvolvedor em programar JavaScript. Existem centenas de criações disponíveis
para consulta na Internet. Faça uma busca pela palavra-chave “canvas examples” e
você encontrará exemplos surpreendentes e fantásticos.
 Atributos HTML

Neste capítulo estudaremos os atributos para os elementos HTM L relacionando

e comentando cada um deles, em particular, os novos atributos introduzidos pela
HTML5. Definiremos cada atributo, sua finalidade e, sempre que necessário, apre­
sentaremos um exemplo prático de uso. A relação de atributos para os elementos da
H TM L foi ampliada e revisada na HTML5. Novos atributos foram criados, vários
atributos existentes foram redefinidos e muitos elementos tiveram a lista de atributos
suportados ampliada. A HTM L 4.01 prevê 118 atributos e a HTM L5 expandiu a lista.

Atributos globais são aqueles comuns a todos os elementos da HTM L, ou seja,

podem ser definidos para qualquer elemento da linguagem. Os atributos comuns
da H TM L5 foram mostrados no capítulo 2 e são também relacionados a seguir.

5.1.1 accesskey

Esse atributo destina-se a definir uma tecla de atalho para ativar ou dar o foco ao
elemento quando o usuário navega com auxílio do teclado.

O valor desse atributo é sensível ao tamanho de caixa (case sensitive) e constituído

por uma lista de caracteres Unicode de teclado (tecla do teclado) separados por espaço.
Nas versões anteriores da HTM L esse atributo é definido para uso com apenas sete
elementos e seu valor deve ser um caractere. Na HTML5 tornou-se um atributo global
e admite uma lista de valores. Os exemplos a seguir esclarecem seu uso.

171
172 HTML:'

Atualmente a implementação de como acionar (combinação de teclas) uiv.

accesskey varia de acordo com o navegador. A especificação para a HTML5 preconize
que a combinação de teclas para acionar o atributo accesskey deve ser Ctrl + Alt+ tecla e
que o caractere do valor do atributo é case sensitive. O exemplo mostrado a seguir
funciona no Firefox e Chrome com a combinação Shift +Alt + tecla.

Todavia, convém ressaltar que nenhum navegador implementa esse atribute

para todos os elementos da HTM L e o Exemplo 1 só funciona porque o elemento
a (âncora) é um dos sete elementos que suportam o atributo segundo as versões
anteriores da HTML. O exemplo 2 não funciona em nenhum navegador.

Exemplo 1:

Nesse exemplo o valor do atributo accesskey é um caractere. Nele o acesso via

teclado aos links de uma lista de navegação é feito com uso de uma letra maiúscula.
Por exemplo: para acessar o site do Maujor, pressione a tecla representativa da letra
“M ” estando as teclas Shift + Alt previamente pressionadas.

►HTML
<nav>
<P>
<a href="http://maujor.com" accesskey="M">Site do Maujor</a> |
<a href=''http://w3.org" accesskey="W">Site W3C</a> |
<a h r e f http://google.com.br" accesskey="G">Google</a>
</p>
</nav>

- t ó [c5-accesskey-ex1.html]

Exemplo 2:

Já dissemos que a especificação para a HTM L5 prevê que o valor do atributo

accesskey pode ser uma lista de caracteres separados por espaço. Esse exemplo ilustra
o uso de uma lista de dois caracteres separados por espaço.

Para dispositivos de usuário que utilizam teclados completos, a tecla de atalho é

definida pelo primeiro caractere, sendo o segundo caractere destinado a dispositivos
de usuário com teclados reduzidos, tais como aqueles de certos dispositivos móveis
que só possuem teclado numérico.

No exemplo a seguir teclados com a tecla da letra “S” usam essa como accesskey
e teclados numéricos usam a tecla para o número 2.
Capítulo 5 ■ Atributos HTML 173

►HTML
<form action="/busca" method="get">
<label>Buscar: <input type="search" name="q'' accesskey="s 2"></label>
<input type="submit">
</form>

■íí) [c5-accesskey-ex2.html]

5.1.2 dass
Esse atributo destina-se a definir uma classe para o elemento com a finalidade de
servir de referência para estilização e Scripts.

O valor desse atributo é constituído por uma lista de strings separadas por
espaço, não havendo qualquer restrição de caracteres para a formação das strings.
Nas versões anteriores da HTM L, esse atributo é definido para todos os elemen­
tos, exceto os elementos base, basefont, head, htrnl, meta, param, script, style e title. Na
H TM L5 tornou-se um atributo global podendo ser usado para todos os elementos.
Por exemplo:
< s c rip t ty p e = " t e x t / ja v a s c r ip t" class="script-um"> // in v á l id o em HTML4 e XHTML1
< s crip t typ e = " t e x t / ja v a s c rip t'' class="script-u m"> // v á lid o em HTML5

5.1.Bcontenteditable
Esse atributo foi inventado pela M icrosoft e implementado em seus navegadores
desde a versão 5 e que agora foi reconhecido e adotado pela HTML5. Admite os
valores true, false e inherit que definem se o conteúdo do elemento é editável ou
não ou se sua condição de edição é herdada. A edição se faz no próprio agente de
usuário que renderiza o conteúdo.

O exemplo a seguir exemplifica o uso desse atributo e seus respectivos valores.

Nele você poderá testar a edição dos conteúdos.
o r t i c l e contenteditable="true">
<h2>Texto de um cabeçalho n í v e l 2 editável</h2>
<p>Parágrafo editável</p>
<p contenteditable=''false">P arágr afo <b>não</b> editável</p>
< /a rticle >

f ’K.
[c5-contenteditable.html]
174 HTML 5

5.1.4 contexmenu

Esse atributo destina-se a associar o elemento ao qual foi aplicado com um menu
de contexto criado com uso do elemento menu.

A associação se faz atribuindo um id ao elemento menu com valor igual ao valor

definido para esse atributo.

Esse é um atributo não existente nas versões anteriores da E1TML, tendo sido
criado pela especificação da HTML5.

O exemplo a seguir, extraído das especificações para a E1TML5, esclarece o uso

desse atributo associando um elemento input ao menu de contexto para preenchi­
mento de campos de um formulário.
<form name="npc">
<label>Nome do personagem: cinput name=char type=text contextmenu=personagem re q u i re d x / l a b e b
<menu type=context id=personagem>
<command la b el="So rtea r um nome"
onclíck="document.forms.npc.elements.char.value = getRandomName()">
ccommand label="Características do personagem"
onclick="prefillField s(docuiíient,forms.npc.e le in ents.char.v alue)">
</menu>
</form>

O exemplo mostra um formulário em uma interface de um jogo para escolha

de um personagem controlado pela máquina (non-player character). O menu de
contexto oferece a possibilidade de escolha aleatória e de exibição das características
do personagem escolhido.

.1.5 dir

Esse atributo destina-se a definir o sentido de escrita dos textos. Os valores possíveis
para esse atributo são: ltr, r t l e auto.

O valor lt r é o valor-padrão para a escrita ocidental na qual o texto flui no sentido

da esquerda para a direita (left to rigth).

O valor r t l é o valor-padrão para a escrita oriental na qual o texto flui no sentido

da direita para a esquerda (rigth to left).

O valor a u to define o sentido de escrita com base nos padrões do dispositivo que
renderiza os conteúdos.
Capítulo 5 « Atributos HTML 175

Nas versões anteriores da HTM L esse atributo é definido para todos os elementos
exceto os elementos a p p l e t , b a s e , b a s e f o n t , b r , fr a m e , f r a m e s e t , i f r a m e , param e script. Na
HTM L5 tornou-se um atributo global podendo ser usado para todos os elementos.

0 exemplo a seguir é interativo e demonstra o efeito desse atributo quando

definido para o elemento body de uma página.

►JavaScript
window.onload = fu n c t io n ( ) {
var botão = document.getElementsByTagName('b u t t o n ' ) ;
var pg = document.getElementsByTagName('b o d y ' ) ;

b o t a o [ 0 ].o n c li c k = fu n c t io n ! ) {
pg[0]. setA ttrib u te(' d i r ' , 'l t r ');

}
b o ta o [l].o n c lic k = fu nctio n!) {
pg[0]. s e tA ttrib u te ('d ir' , ' r t l ');

1
b o t a o [ 2 ].o n c l ic k = fu n c t io n ! ) {
p g [ 0 ] . s e t A t t r i b u t e ( ' d i r ' , ' a u to ' ) ;

1
1
►HTML
<body>

<h3>Demonstração</h3>
<p>Essa página in te gra o conjunto de páginas exemplo do l i v r o HTML5 do Maujor.</p>
<p>Foi criada para demonstrar o a t r i b u t o g lo bal dir<p>
<p>Clique os botões a seguir para definir os a trib u to s
l t r , r t l e e auto para o elemento body dessa página</p>
cbutton type="b utto n">ltr c/b utto n>
<button typ e ="butto n">rtl</button>
cbutton typ e =''b utto n">auto< /buttonx/sectio n>

-W [c5-dir.html]

5.1.6 draggable
Esse atributo destina-se a definir se o elemento será ou não arrastável na página. Os
valores possíveis para esse atributo são: tru e , fa ls e e a u t o . O atributo apenas define o
176 h tm l;

elemento arrastável. Para tornar o arraste efetivo há necessidade de uso de método;

e atributos JavaScript previstos na API Drag&Drop.

O valor true faz com que seja possível arrastar pela página o elemento para c
qual o atributo foi definido.

O valor false não permite o arraste do elemento.

O valor auto coloca o elemento no estado de arraste-padrão definido pelo agente

de usuário.

Esse é um atributo não existente nas versões anteriores da HTM L, tendo sido
criado pela especificação da HTML5.

Esse atributo destina-se a definir o elemento que receberá (área de recebimento,'

um elemento arrastável na página. Os valores possíveis para esse atributo são: copy.

move e link.

O valor copy faz com que seja criada uma cópia do elemento arrastável na área
de recebimento.

O valor move move o elemento arrastável para a área de recebimento.

O valor link faz com que seja criado um link para o elemento arrastável na área
de recebimento.

Esse é um atributo não existente nas versões anteriores da HTML, tendo sido
criado pela especificação da HTML5.

5,1.8 hidden

Esse atributo destina-se a indicar que o elemento não é relevante na página e os

agentes de usuário não devem renderizá-lo. Trata-se de um atributo booleano, ou
seja, é ou não definido para um elemento.

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores t r u e ou f a l s e e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

Esse é um atributo não existente nas versões anteriores da HTML, tendo sido
criado pela especificação da HTML5.
Capítulo 5 0 Atributos HTML 177

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
<hl>Star Trek Game</hl>
<section id="login ">
<h2>Login</h2>
<form>

< ! - - form ulári o para lo g in -- >

</form>
<script>
fu nctio n lo g i n ( ) {
/ / chave mostra/esconde
document. getElementByld( ' l o g i n ' ) . hidden = t r u e ;
document. g etEle m en tB y!d (' game' ) . hidden = f a l s e ;

}
</script>
</section>
csection id = ,,game'' hidden»
< ! - - In te rfa ce do, jogo -->
</section

Nesse exemplo, para uma interface de jogo, inicialmente é apresentado ao usu­

ário um formulário de login. Preenchidos os dados no formulário, o script valida
e estando tudo OK esconde o formulário de login e apresenta a interface do jogo
ao usuário.

5.1.9 id
Esse atributo destina-se a criar um identificador único para o elemento na página.
O valor desse atributo deve conter pelo menos um caractere e não poderá conter
caracteres vazios.

Um valor para esse atributo deve ser único na página, ou seja, a dois ou mais
elementos de uma página não é permitido atribuir um mesmo valor de id.

Esse é um atributo que já existia nas versões anteriores da HTM L e a diferença

é na regra de atribuição do seu valor. Nas versões anteriores da HTM L, valores de
id devem começar com uma letra maiúscula ou minúscula seguida de qualquer
número de letras, números, sublinhado, hífen, dois pontos e pontos. Na HTML5
qualquer caractere é permitido menos espaço em branco.
178 HTML S

5.1.10 itemid, itemprop, itemref, itemscope, itemtype

Esses atributos são descritos nas especificações para Microdados e serão estudado;
com detalhes no capítulo 11 deste livro.

Esses atributos não existem nas versões anteriores da HTM L, tendo sido criados
pela especificação da HTML5.

5.1.11 lang
Esse atributo destina-se a identificar o idioma primário do texto inserido no elemen­
to para o qual foi definido. O valor desse atributo deve ser uma abreviatura-padrãc
identificadora de idiomas.

Nas versões anteriores da HTM L esse atributo é definido para todos os elementos
exceto os elementos applet, base, basefont, br, frame, frameset, iframe, param e script. Na
HTM L5 tornou-se um atributo global podendo ser usado para todos os elementos.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

►HTML
<p>A palavra <span lang ="en">star< /span> em inglês significa e s tre la .</p>

5.1.12 spellcheck
Esse atributo destina-se a marcar conteúdos inseridos pelo usuário que devam te:
sua grafia e sintaxe verificada por um corretor ortográfico.

Vários editores de texto, por exemplo, o Word do ambiente Windows, possuem

uma funcionalidade conhecida como corretor ortográfico que destaca uma pala­
vra ou texto digitado sempre que encontra um possível erro de sintaxe ou grafia,
com a finalidade de chamar a atenção do autor para o erro. Esse atributo cria a
funcionalidade de correção ortográfica para o conteúdo do elemento ao qual e
inserido. O software utilizado para fazer a correção (por exemplo, um dicionáric
ou gramática) e a maneira como se integra ao agente de usuário não são descritos
nas especificações, ficando por conta do fabricante.

Esse atributo admite os valores true, false e default que definem se o conteúdc
do elemento deve ser submetido ao corretor ortográfico ou não ou se sua condiçâc
de correção é aquela definida pelo navegador.
Capítulo 5 ■ Atributos HTML 179

Esse é um atributo não existente nas versões anteriores da HTM L, tendo sido
criado pela especificação da H T M L 5 .

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

. HTML
<div contenteditable="true">
<p s p e ll c h e c k = " tru e " > C o n te ú d o e d itá v e l a ser verificado pelo co rre to r ortográfico</p>
</div>

5.1.13 style

Esse atributo destina-se a definir regras CSS para o elemento ao qual foi aplicado.

Nas versões anteriores da H T M L esse atributo é definido para todos os elemen­

tos exceto os elementos base, basefont, head, html, meta, param, script, style e title . Na
H TM L5 tornou-se um atributo global podendo ser usado para todos os elementos.

Quando se usa esse atributo, segundo a especificação para HTML5, alterar a

apresentação de maneira que a retirada do atributo altere o significado geral do
conteúdo é uma prática não conforme. Por exemplo: é desaconselhável usar o atri­
buto style para esconder e revelar conteúdos. Para isso use o atributo hidden.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

►HTML
<p style="color:red; backgnound:black;">Conteúdo e s t i l i z a d o com o a tr i b u to style</p>

5 „ 1 .1 4 ta b m d e x

Esse atributo destina-se a definir se um elemento pode receber o foco. O valor desse
atributo é um número inteiro positivo ou negativo e cria uma ordem de tabulação
para o elemento ao qual foi aplicado. Ordem de tabulação é a sequência na qual o
foco é dado quando o usuário navega com auxílio do teclado acionando continu­
amente a tecla Tab.

Nas versões anteriores da H T M L esse atributo é definido somente para os

elementos a, area, button, input, object, select, e textarea. Na H T M L 5 tornou-se um
atributo global podendo ser usado para todos os elementos. Por padrão os seguintes
elementos podem receber o foco independentemente de o atributo ter sido para eles
definido: a, link, button, input, select, textarea e command.
180 HTML 5

Se o valor do atributo for um número negativo, o elemento poderá receber o foco.

mas ficará fora da ordem de tabulação.

Se o valor do atributo for zero, o elemento poderá receber o foco e sua posição
na ordem de tabulação é determinada por padrão pela plataforma.

Se o valor do atributo for um número positivo, o elemento poderá receber o foco

e a ordem de tabulação se dará dos números mais baixos para os mais altos. Convém
notar que a numeração não precisa ser uma sequência corrida do tipo 1,2,3,4..., pode
ser 23,67,82,91... ainda que pareça estranho não se adotar uma sequência corrida.

5.1.15 title
Esse atributo destina-se a fornecer uma informação adicional sobre o conteúdo
do elemento para o qual é definido. O valor desse atributo é um texto contendo a
informação.

Nas versões anteriores da HTM L esse atributo é definido para todos os elemen­
tos exceto para os elementos base, basefpnt, head, html, meta, param, script, e title. Na
HTM L5 tornou-se um atributo global podendo ser usado para todos os elementos.

Se esse atributo for omitido para um elemento, fica implícito que para ele é
relevante o atributo title de seu ancestral mais próximo, caso tenha sido definido
para aquele ancestral.

Os exemplos a seguir esclarecem a sintaxe e uso desse atributo.

►HTML
<a h re f= "http://maujor.com t i t l e = " S i t e sobre CSS" >Site do Maujor</a>
<img src="imagem.png" t i t l e = " C r é d i t o : Maujor" a lt= " " >
<p tit le = " R e g iõ e s geográficas do B ra s il"> Te x to d e s c r it iv o da regiões geográficas do Brasil</p>

5.2 Novos atributos

A HTM L5 criou vários atributos não existentes na HTML4. Alguns desses atributos
são globais e foram mostrados no item anterior. Outros são atributos específicos de
um ou mais elementos e serão mostrados a seguir.
Capítulo 5 ■ Atributos HTML 181

5.2.1 async
Esse atributo destina-se a indicar como um script deve ser executado. Quando pre­
sente, faz com que o script seja executado de modo assíncrono tão logo ele tenha
sido carregado e esteja disponível.

O único elemento que admite o uso desse atributo é o elemento script.

Trata-se de um atributo booleano, ou seja, é ou não definido para um elemento.

Esse atributo não deve ser definido para o elemento script que não contenha o
atributo src, ou seja, ele só tem efeito para scripts externos chamados na página
pelo atributo src.

N ão confundir atributo booleano com valor booleano para o atributo. Neste

atribuem-se os valores t r u e ou f a l s e e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

5.2.2 autocomplete
Alguns agentes de usuário oferecem uma funcionalidade que consiste em preen­
cher ou sugerir opções de preenchimento de um campo com base no que nele foi
digitado anteríormente pelo usuário.

Esse atributo destina-se a controlar esse comportamento habilitando ou não o

ato de autopreenchimento.

Os elementos que admitem o uso desse atributo são: form e input.

Esse atributo admite os valores on e off que definem se o campo deve ser auto-
preenchido ou não.

5.2.3 autofocus
Esse atributo destina-se a definir em qual elemento deve ser dado o foco tão logo
a página seja carregada.

Os elementos que admitem o uso desse atributo são: button, input, keygen, select

e textarea.

Trata-se de um atributo booleano, ou seja, é ou não definido para um elemento

e apenas um elemento da página poderá conter esse atributo.
182 HTML 5

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores true ou f a l s e e naqueles a presença ou ausência do atributo
'' sem declaração de valor é suficiente.

O exemplo a seguir esclarece a sintaxe e uso desse atributo. Nele o foco é dado
ao campo para a coleta do nome. Atualmente somente os navegadores Opera e
Chrome suportam esse atributo.

►HTML
<fonn method="get" action="">
< p x la b e l> N o m e :< b rx in p u t typ e = "tex t" a u t o f o c u s x / l a b e l x / p >
< p x l a b e l > E m a i l :< b r x i n p u t t y p e = " t e x t " x / l a b e l x / p >
< p x l a b e l > C i d a d e :< b r x i n p u t t y p e = " t e x t " x / l a b e l x / p >

</form>

[c5-autofocus.html]

5 . 2 „ 4 a u t o p I a y e Controls

Esses são atributos para os elementos video e audio e foram estudados com detalhes
em 3.3.1.

Esse atributo destina-se a definir um texto a ser anexado ao pacote a ser enviado
ao servidor contendo a chave gerada pelo elemento keygen. Atualmente a forma de
implementação do elemento keygen não está definida.

O único elemento que admite o uso desse atributo é o elemento keygen.

5 2 .6 default
Esse atributo destina-se a habilitar um texto default para o elemento track sempre
que não for definido um texto personalizado para o elemento.

O único elemento que admite o uso desse atributo é o elemento track.

Capítulo 5 ■ Atributos HTML 183

5.2.7 dirname
Esse atributo destina-se a definir um dado adicional a ser anexado aos dados en­
viados por um formulário. O dado adicional informa a direção de escrita (ltr ou
rtl) do texto que está sendo enviado.

Os elementos que admitem o uso desse atributo são: input e textarea.

Esse atributo será estudado com detalhes em 6.2.5.

5.2.8 form
Esse atributo destina-se a associar um controle de formulário a um elemento
formulário. Nas versões anteriores da EITM Lum controle de formulário está asso­
ciado (ou pertence) ao formulário no qual está inserido. Esse atributo permite que
se associem a um formulário controles inseridos fora dele e até mesmo controles
dentro de outro formulário.

O valor desse atributo é o mesmo valor do atributo id do formulário ao qual

está associado.

Os elementos que admitem o uso desse atributo são: button, fieldset, input, keygen,
lab ei, meter, object, output, progress, s e l e c t e te x ta re a .

Esse atributo será estudado com detalhes em 6.2.6.

5 .2 .9 fo rm a c tio n

Esse atributo tem o mesmo efeito do atributo action para o elemento form, ou seja,
destina-se a definir um URL para o qual o formulário será enviado para processamento.

Os elementos que admitem o uso desse atributo são: button e input. Assim, a
definição do URL para processamento é definida pelo valor desse atributo inserido
em um desses dois elementos.

Esse atributo será estudado com detalhes em 6.2.7.

5 .2 .1 O fo rm e n c fy p e

Esse atributo tem o mesmo efeito do atributo enctype para o elemento form, ou seja,
destina-se a definir o tipo de conteúdo que está sendo enviado pelo formulário.
184 HTML 5

Os elementos que admitem o uso desse atributo são: button e input. Assim, a
definição da codificação é definida pelo valor desse atributo inserido em um desses
dois elementos.

Esse atributo será estudado com detalhes em 6.2.8.

5 .2 .11 form m eíhod

Esse atributo tem o mesmo efeito do atributo method para o elemento form, ou seja.
destina-se a definir o método usado para enviar os dados do formulário.

Os elementos que admitem o uso desse atributo são: button e input. Assim, a
definição do método é definida pelo valor desse atributo inserido em um desses
dois elementos.

Esse atributo será estudado com detalhes em 6.2.9.

5 .2 .12 form novaüdaíe

Esse atributo tem o mesmo efeito do atributo novalidate para o elemento forra, ou seja.
destina-se a desabilitar a validação dos dados do formulário. (O atributo novalidata
é novo na HTML5. Ver 5.2.23).

Os elementos que admitem o uso desse atributo são: button e input. Assim, a de­
finição da necessidade ou não de se validar os dados é definida pela inserção desse
atributo em um desses dois elementos.

Esse atributo será estudado com detalhes em 6.2.10.

5.2.13 formtarget
Esse atributo define o destino do documento que será aberto após o envio dc
formulário.

Os elementos que admitem o uso desse atributo são: button e input. Assim, c
destino do documento é definido pela inserção desse atributo em um desses dois
elementos.

Os valores possíveis para esse atributo são: _b lank ,_to p,_self e _parent ou qualquer
nome no contexto da janela atual.

Esse atributo será estudado com detalhes em 6.2.11.

Capítulo 5 a Atributos HTML 185

5.2.14 icon
Esse atributo é para uso exclusivo com o elemento command e destina-se a definir um
URL apontando para a imagem de um ícone representativo do comando.

O exemplo a seguir, redrado e adaptado das especificações para a HTML5, es­

clarece a sintaxe e uso desse atributo.

► HTML
<menu type="toolb ar">
<command typ e="ra dio" radiogroup="alinhamento" checked="checked"
la b e l= " A lin h a r à esquerda" icon=',icons/alL.png" o n c li c k = " a li n h a r ( ’ esquerda')">
<command typ e="ra dio" radiogroup=" alinhamento "
la b e l = " C e n t r a liz a r " icon="icons/alC.png" o n c li c k = " a li n h a r ( ' ce n tro ' ) " >
ccommand type="ra dio" radiogroup=" alinhamento"
label=" A lin h a r à d i r e i t a " icon="icons/alR.png" o n c lic k = "a lin h a r('d ire ita ')">
<hr>
<command type="command" disabled
la b el="Pub li ca r" icon="icons/pub.png" o n cli ck = "p ub li sh ()">
</menu>

5.2.15 keytype
Esse atributo é para uso exclusivo com o elemento keygen e destina-se a definir o
tipo de algoritmo para codificar a chave gerada pelo elemento.

5.2.16 kind
Esse atributo é para uso exclusivo com o elemento track e destina-se a definir o tipo
de trilha a ser acrescentado na mídia pelo elemento. Os valores possíveis para esse
atributo são: subtitles, captions, d e s crip tio n s , chapters, metadata para trilhas de subtí­
tulos, legendas, descrições, capítulos e metadados, respectivamente.

O exemplo a seguir, retirado e adaptado das especificações para a EITML5, es­

clarece a sintaxe e uso desse atributo.

► HTML
<video src="brave.webm">
<track kind=subtitles s r c = b r a v e .e n .v tt srclang=en la b e l = " In g lê s ">
<track kind=captions s r c = b r a v e .e n .v tt srclang=en la bel="ln glê s para deficientes aud itivo s">
<track kind=subtitles s r c = b r a v e . f r . v t t src lang=fr label="Francês">
<track kind=subtitles s r c = b r a v e .d e .v t t srclang=de label="Alemão">
</video>
186 H TM L:

5.2.17 list
Esse atributo é para uso exclusivo com o elemento in put e destina-se a definir um :
lista de opções para preenchimento de um campo de texto. O seu valor deve se:
igual ao valor do id de um elemento d a ta lis t.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
<label>Informe sua cidade p r e f e r i d a x b r />
<input list= "cid a de s">
< / l a b e l x b r />
d a t a l i s t id="cidades">
ou <label>escolha uma<br />
<select>
coption value="Bruxelas">Bruxelasc/option>
<option value="Lisboa">Lisboac/option>
coption value="Londres">londresc/option>
coption value="Moscou">Moscouc/option>
coption value=', Oslo’, >Tokyoc/option>’
coption valu e="Pa ris">Pa risc/ option>
coption value="Roma">Romac/option>
coption value="Tokyo">Tokyoc/option>
c/select>
c/label>
c / d a ta lis t>

[c5-list.html]

Dos navegadores atuais somente o Opera e o Firefox 4 suportam esse atribute.

Nesses navegadores, quando o usuário entra no campo de texto, a lista de cidades é
apresentada para escolha e, caso nenhuma delas seja a preferida, é possível digita:
outra opção e o campo select não é renderizado. Em navegadores que não suportam
o atributo, o campo select é rederizado normalmente.

Esse atributo é para uso exclusivo com os elementos audio e video e foi estudado
com detalhes no capítulo 3.
Capítulo 5 ■ Atributos HTML 187

5.2.19 low
Esse atributo é para uso exclusivo com o elemento m ete r e destina-se a definir um
valor dentro da faixa à qual a medida pertence e abaixo do que se considera um
valor baixo. Ver 2.4.17.

5.2.20 manifest
Esse atributo é para uso exclusivo com o elemento html que será estudado com
detalhes no capítulo 10.

Esse atributo é para uso exclusivo com os elementos m ete r, progre ss e i n p u t e destina-se
a definir um valor máximo. O uso desse atributo para os elementos m ete r e p ro g re s s
foi estudado em 2.4.17 e 24.20 respectivamente.

Para o elemento m ete r ele destina-se a definir o valor máximo da escala à qual a
medida marcada pertence e, se for omitido, será considerado igual a 1; para o ele­
mento p rog re s s ele destina-se a definir o quanto é necessário para realizar uma tarefa.

Usar esse atributo com o elemento input define um valor numérico máximo per­
mitido como entrada no campo. Usado em conjunto com o atributo min estabelece
uma faixa de entrada de dados no campo.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
<input name="quantidade" required type="number" min="10" max="20" value=''15">

-ifó [c5-max-min.html]

Nesse exemplo, quando a página é carregada, o campo está preenchido com o

valor 15; ao usuário é permitido entrar valores compreendidos entre 10 e 20 inclu­
sive. Esse exemplo está disponível no site do livro para visualização no navegador
Opera ou posteriores.
188 HTML 5

5.2.22 min
Esse atributo é para uso exclusivo com os elementos m e te r e input e destina-se :
definir um valor mínimo. O uso desse atributo para o elemento m e te r define o vale:
mínimo da escala à qual a medida marcada pertence e, se for omitido, será consi­
derado igual a 0. Ver 2.4.17.

Usar esse atributo com o elemento input define um valor numérico mínimo per­
mitido como entrada no campo. Usado em conjunto com o atributo max estabelece
uma faixa de entrada de dados no campo. Ver 5.2.21.

5.2.23 novalidate
Esse atributo é para uso exclusivo com o elemento fo rm e tem o mesmo efeito de
elemento fo rm n o va lid a te que foi estudado em 5.2.12.

Esse atributo é para uso exclusivo com o elemento d e ta ils e destina-se a definir se
o conteúdo do elemento deve ou não ser apresentado ao usuário. Trata-se de um
atributo booleano, ou seja, é ou não definido para um elemento. A ausência desse
atributo no elemento indica que seu conteúdo não deve ser apresentado ao usuáric.

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores true ou fa ls e e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

5.2.25 optim um

Esse atributo é para uso exclusivo com o elemento meter e destina-se a definir um valor
considerado ótimo dentro da escala à qual a medida marcada pertence. Ver 2.4.17.

5.2.26 pattern
Esse atributo é para uso exclusivo com o elemento input e destina-se a definir uma
expressão regular (um padrão) com a qual o valor entrado em um campo de for­
mulário deve ser comparado.
Capítulo 5 ■ Atributos HTML 189

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
<input t yp e = " te x t" p a t t e r n = " [ 0 - 9 ] { 5 } - [ 0 - 9 ] { 3 } " name="cep"
t it le ="U m CEP é co n s titu id o de 5 números um tra ço e mais 3 números." />

Nesse exemplo, caso o usuário entre com um valor que não seja um número de
CEP válido, o valor é recusado e é apresentada uma mensagem informando ao usu­
ário que o valor digitado não está de acordo com o formato exigido pelo controle.

5.2.27 ping
Esse atributo é para uso exclusivo com os elementos a e area e destina-se a definir
URLs relacionadas interessados em serem notificadas caso o usuário siga o link. O
valor desse atributo é um URL ou uma lista de URLs separados por espaço.

5.2.28 placeholder
Esse atributo é para uso exclusivo com os elementos input e textarea e destina-se a
definir uma dica (palavra ou frase curta) de preenchimento do campo.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

►HTML
<legend>Conta de e-mail</legend>
<pxlabel>Nome:<br / x i n p u t typ e =''tex t" name="name" placeholder="Maurício Samy Silva">
< / la b e l x / p >
< p x l a b e l > E - m a i l :< b r / x i n p u t type="email" name="email" placeholder="[email protected]">
< / la b e l x / p >
< pxla bel>Senh a:<br / x i n p u t type="password" na me="password "x/la belx/p >
</fieldset>

C [c5-placeholder.html]

Nesse exemplo, quando a página é carregada, os campos nome e e-mail estão

preenchidos com os valores definidos pelo atributo p la c e h o lde r. Quando o usuário
dá o foco ao campo, os valores desaparecem para dar lugar ao valor a ser entrado.
Esse exemplo está disponível no site do livro para visualização no navegador Ope­
ra 11 ou posteriores.
190 HTML 5

5.2.29 pôster
Esse atributo é para uso exclusivo com o elemento video e foi estudado com detalhes
em 3.3.1.

5 .2 3 0 preload

Esse atributo é para uso exclusivo com os elementos video e audio e foi estudado
com detalhes em 3.3.1.

5.2.31 pubdate
Esse atributo é para uso exclusivo com o elemento time e destina-se a definir a data
de publicação. Trata-se de um atributo booleano, ou seja, é ou não definido par;,
um elemento.

,.Or, Não confundir atributo booleano com valor booleano para o atributo. Neste
'i í atribuem-se os valores tru e ou f a l s e e naqueles a presença ou ausência do atributo
í; , sem declaração de valor é suficiente.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
< artic le>
<hl>Pequenas tare fa s</hl>
<footer>Publicado em <time pubdate>05/02/20ll</time>.</footer>
<p>Trocar a lâmpada da sala da sala.</p>
< /a rticle >

Esse atributo define a data de publicação do primeiro elemento article ancestr;'

do elemento time no qual o atributo foi inserido. Não havendo um elemento article
ancestral, a data refere-se à publicação do documento como um todo.

5 .2 3 2 radiogroup
Esse atributo é para uso exclusivo com o elemento command e destina-se a agrur ;
comandos do tipo radio. Só deve ser usado se o comando é do tipo radio.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

Capítulo 5 ■ Atributos HTML 191

► HTML
<menu type="toolb ar">
<command type="ra dio" radiogroup="alinhamento" checked="checked"
label=''Esquerda" ic on="ic ons/a lL .png" o n c li c k = " s e t A lig n ( 'e s q ') " >
ccommand type="ra dio" radiogroup="alinhamento"
label="Centro" icon="icons/alC.png" o n c l i c k = '' s e t A l i g n ( ' c e n t r o ' )">
ccommand type="ra dio" radiogroup="alinhamento"
l a b e l = " D i r e i ta " icon= "icons/alR.png " o n c l i c k = " s e t A l i g n ( ' d i r ' ) " >
</menu>

5.2.33 required
Esse atributo é para uso exclusivo com os elementos input, select e textarea e destina-
se a marcar um controle de formulário como sendo de preenchimento obrigatório.
Veremos, com detalhes, o uso desse atributo em formulários no capítulo 6.

Trata-se de um atributo booleano, ou seja, é ou não definido para um elemento.

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores t ru e ou fa l s e e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML

<P>
<la bel fo r= "e m a il"> E-m a il:< / lab e l>
<input id="email" type=email required name=email>
</p>

5.2.34 reversed
Esse atributo é para uso exclusivo com o elemento ol e destina-se a definir uma con­
tagem descendente para o marcador da lista ordenada, isto é, a numeração começa
do número mais alto para o mais baixo (...4,3,2,1) em lugar da numeração-padrão
crescente (1,2,3,4 ...).

Trata-se de um atributo booleano, ou seja, é ou não definido para um elemento.

192 HTML

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores t rue ou fa ls e e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
<ol reversecb
<li>Maçã</li>
<li> Pena</li>
< li>Uva</li>
< li> La ra n ja < /li>
</ol>

A marcação mostrada deverá causar a renderização conforme segue.

4. Maçã
3. Pera
2. Uva
1. Laranja

5 .2.35 sandbox
Esse atributo é para uso exclusivo com o elemento iframe e destina-se a deffo:
permissões para inserção de conteúdos no elemento.

Quando definido, sem declaração explícita de um valor, permite inserções s

mente dos conteúdos provenientes de uma mesma origem. Formulários, scripts
plugins são desabilitados e links para recursos fora do contexto do navegador s;
também desabilitados.

Para habilitar as funcionalidades bloqueadas, os valores possíveis para e>;

atributo são: allow-same-origin, allow-top-navigation, allow-forms, and allow-scripts cs
habilitam respectivamente diferentes origens, links, formulários e scripts.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

►HTML
d fra m e sandbox=allow-same-origin allow-forms allow-scripts
src=" http : //maujor. com/xpto. htm l"></iframe>
Capítulo 5 B Atributos HTML 193

5.2.36 scoped
Esse atributo é para uso exclusivo com o elemento style e destina-se a definir o
escopo para aplicação de estilos. Quando definido, faz com que as regras de estilo
contidas no elemento style sejam aplicadas somente no elemento-pai do elemento
style e nos seus elementos-filho.

Trata-se de um atributo booleano, ou seja, é ou não definido para um elemento.

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores t rue ou f a l s e e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML

<p>Parágrafo na cor definida na fo lh a de e s t i l o s do documento</p>

<a hre f= " http://m aujo r.com">Site do Maujor</a>
<div>
< s ty le scoped>
p {c o lo r:re d ;}
</style>
<p>Parágrafo na cor vermelha</p>
</div>
. . . mais marcação . . .

Nesse exemplo todo texto inserido no div será na cor vermelha e os inseridos no
restante do documento serão na cor definida pelas CSS para o documento. Notar
que em sintaxe HTM L5 é válido inserir o elemento style dentro do elemento body.

5 .2 3 7 seamless

Esse atributo é para uso exclusivo com o elemento iframe e destina-se a fazer com
que o iframe seja inserido no mesmo contexto do documento que o contém.

Isso significa que links existentes no iframe abrem no mesmo contexto de abertura
dos links do documento (a não ser que o atributo ta rg e t= " _ s e lf ” esteja presente),
regras de estilo para o documento sejam aplicadas ao conteúdo do iframe e que todos
os comportamentos do documento se apliquem ao conteúdo do iframe.

T ra ta -s e d e u m a tr ib u to b o o le a n o , o u seja, é o u n ã o d e fin id o p a ra u m e le m e n to .
194 H TM L;

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores true ou false e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

►HTML
d fra m e seamless src="http://m aujo r.com/xpto.h tm l"> </ifra ine>

5.2.38 sizes
Esse atributo é para uso exclusivo com o elemento link e destina-se a definir as
dimensões do ícone eventuaímente definido para o link.

Os valores possíveis para esse atributo são: a palavra-chave any ou o par largur;.
x altura do ícone em pixels.

O exemplo a seguir, retirado da especificação para HTM L do W HATW G, escla­

rece a sintaxe e uso desse atributo.

►HTML
< lin k nel-ico n hre f= favicon.png s i z e s = ' T 6 x l 6 " type="image/png">
< lin k re l-i c o n href=windows.ico s i z e s = " 3 2 x 3 2 4 8 x4 8 " type="iinage/vnd. m ic ro s o ft . ic o n " >
c l in k r e l- i c o n href=mac.icns s i z e s = " 1 2 8 x l 2 8 5 1 2 x 5 1 2 8 19 2 x 8 19 2 3 2 7 6 8 x 3 2 7 6 8 ")
< lin k re l=icon href- ipho ne.png s i z e s = " 5 7 x 5 7 " type="image/png">
< lin k re l-i c o n href=gnome.svg s i z e s = " a n y " type="i«age/svg+xml">

5.2.39 srcdoc
Esse atributo é para uso exclusivo com o elemento ifra m e e destina-se a definir :
marcação H T M L a ser inserida no ifra m e .

O valor para esse atributo é uma marcação HTML.

O exemplo a seguir, retirado da especificação para H TM Ldo W HATW G, escla­

rece a sintaxe e uso desse atributo.

►HTML
<artic le >
c h D T i t u l o do post</hl>
<p>Conteúdo do post</p>
<footer>
Capítulo 5 ■ Atributos HTML 195

<p>Escrito por: <a href="/autores/maujor">Maujor</a>. <time pubdate>2009-08-21T23:32Z</timex/p>

</footer>
< a rtic le >
<footer>Em <time pubdate>2009-08-21T23:35Z</tiine>, <a href="/usuarios/m">Marcos</a>comentou:
</footer>
á fr a m e seamless sandbox srcdoc=''<p>Gostei do post, mas ..."> < /ifra m e >
< / a rtic le >
<artic le >
<footer>Em <time pubdate>2009-08-21T23:44Z</time>, <a hre f=''/usuarios/p’'>Paulo</a>comentou:
</footer>
<iframe seamless sandbox srcdoc="<p>Veja exemplo
<a href=&quot;/gallery?mode=cover&ampjamp;page=l&quotj>na minha galeria</a>.”>
</iframe>
< /a rticle >
< /a rticle >

Esse exemplo resume uma marcação para um post publicado em blog com dois
comentários. Na marcação os comentários foram inseridos no documento com uso
do elemento iframe no qual o atributo s rc foi usado em conjunto com os atributos
seamless e sandbox (estudados anteriormente), fornecendo um layer extra de proteção
contra injeção de scripts maliciosos pelo formulário de comentário.

Trata-se de um atributo para o elemento tra c k , estudado com detalhes em 3.2.1.

5.2.41 step
Esse atributo é para uso exclusivo com o elemento input e será estudado com de­
talhes no capítulo 6 .

Esse atributo é para uso exclusivo com o elemento textarea e destina-se a definir
como será o fluxo de texto quando submetido para processamento. Será enviado
em uma linha ou conterá quebras de linhas.

Os valores possíveis para esse atributo são: s o ft e hard sendo s o ft o valor-padrão,

usado quando o atributo não é especificado.

Quando for usado o valor hard devemos especificar o atributo co ls para a textarea.
Nesse caso, quebras de linhas inseridas pelo usuário serão consideradas no envio
do texto ao servidor.
 CAPÍTULO 6

Formulários

Neste capítulo, mostraremos as funcionalidades da HTML5 para formulários. A grande

novidade nessa área é a implementação de atributos capazes de disparar mecanis­
mos de validação nativos do navegador. Estudaremos com detalhes tais atributos e
forneceremos exemplos práticos que ilustram as funcionalidades de validação. Além
da validação, novos atributos tais como p laceh older e a u to fo c u s e a possibilidade de
se inserir campos de formulário em qualquer lugar da página fora do elemento fo rm

alteram e agilizam a maneira como se desenvolvem formulários na HTML5.

6.1 Introdução
Um formulário HTM L é uma seção do documento contendo texto normal, marcação,
elementos especiais chamados de controles (Inputs, checkboxes, rad io-b u tton s, te x ta re a
etc.) e seus respetivos rótulos (labei).

Geralmente os usuários “preenchem” um formulário modificando seus controles

(digitando textos, selecionando itens de menu etc.), antes de enviar o formulário a
um agente para processamento.

Formulário é talvez a funcionalidade de integração com o usuário mais usada

na web e também uma das mais antigas. Sua função é recolher dados entrados pelo
usuário e enviá-los ao servidor para processamento.

O processamento dos dados no servidor faz-se por scripts desenvolvidos em

linguagens de programação no lado servidor e consiste desde o disparo de um sim­
ples e-mail contendo os dados captados no formulário até sofisticados mecanismos
de consultas e integração com banco de dados em transações envolvendo dados
sigilosos e encriptados como pagamentos on-line e movimentações financeiras.

1%
;=?ítulo 6 » Formulários 197

Um usuário ao preencher um formulário poderá digitar em seus controles não

. penas textos simples, mas também marcação H T M L e até mesmo scripts inteiros,
.-.ssim, um campo de formulário é uma porta de entrada de scripts maliciosos
-.pazes de alterar a programação de processamento do formulário no servidor e
:.esencadear ações danosas ao proprietário do site e seus usuários.

Por essa razão, ao se desenvolver um formulário e seu script de processamento,

cevemos considerar com alta prioridade a criação de mecanismos que impeçam a
entrada de scripts maliciosos. A maneira consagrada para atingir esse objetivo é o
cue conhecemos como validação do formulário.

Validar um formulário é a ação de verificação dos dados digitados pelo usuário

nos controles do formulário. Por exemplo: se em um controle destinado à coleta do
CPF esperamos que o usuário digite onze dígitos numéricos no formato xxxxxxxxx-
■:x devemos criar um script capaz de ler o que foi digitado no campo, verificar se
existem somente onze números de 0 a 9 e um traço (-) e conferir se os números
satisfazem ao algoritmo de formação de um número de CPF. Assim, garantimos
primeiro que o usuário entrou um CPF real e segundo que não houve digitação de
códigos ou outros dados inválidos.

Até a chegada da HTM L5 a validação dos dados de um formulário era feita

com uso de JavaScript e como medida de segurança replicada com script rodando
no lado do servidor para o caso de JavaScript ter sido desabilitada no navegador.

Uma quantidade impressionante de sites mais antigos e outro tanto não tão
antigos validam seus formulários com uso somente de JavaScript. Isso é uma te­
meridade, pois desabilitar JavaScript e anular os efeitos da validação é uma tarefa
trivial, realizada com dois cliques somente, em qualquer navegador.

A H TM L5 introduziu um conceito de validação de formulários totalmente ino­

vador, simples e eficiente, reduzindo a necessidade de desenvolvimento de scripts
duplicados para a tarefa. A criação de novos atributos para os controles de formulá­
rios, destinados a definir o tipo de dado a ser entrado, disparam mecanismos nativos
de validação e mensagens de erro. Por exemplo: o atributo email quando presente
em um elemento de controle do formulário não permite que ele seja enviado ao
servidor para processamento se no controle constar uma string que não se pareça
com um endereço de e-mail.

6.2 Atributos
As funcionalidades da HTM L5 para formulários foram introduzidas na linguagem
com uso de atributos a serem usados nos controles do formulário. Os novos atributos
198 HTML

não são destinados somente à validação, mas proporcionam facilidades outras ac ;

formulários que, antes da chegada da HTM L, eram conseguidas somente com u s:
de Scripts. Nesta seção estudaremos com detalhes esses atributos.

6.2.1 placeholder
Esse atributo é para uso exclusivo com os elementos input e te x ta re a e destina-se
definir uma dica (palavra ou frase curta) de preenchimento do campo. Esse atribu:
foi estudado com detalhes e exemplo online em 5.2.28.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

►HTML
< p x la b e l > E - m a il :< b r / x i n p u t type="email" name="email" placeholder="[email protected],'>
< / la b e l x / p >

6.2.2 autofocus

Esse atributo destina-se a definir em qual elemento deve ser dado o foco tão log :
a página seja carregada.

Os elementos que admitem o uso desse atributo são: button, input, keygen, s e le ct
te x ta re a . Esse atributo foi estudado com detalhes e exemplo online em 5.2.3.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

I- HTML

< p x la b e l > N o m e :< b r x in p u t t yp e = " te x t" a u t o f o c u s x / l a b e l x / p >

6.23 required

Esse atributo é para uso exclusivo com os elementos input, s e le c t e te x ta re a e destina-

se a marcar um controle de formulário como sendo de preenchimento obrigatóri'

Trata-se de um atributo booleano, ou seja, é ou não definido para um demente

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores true ou fa ls e e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

O e x e m p lo a se g u ir esclarece a s in ta x e e u s o desse a trib u to .

Capítulo 6 ■ Formulários 199

► HTML
<form method="get" action="">
< p x l a b e l for="nome">Nome: < / l a b e l x i n p u t id="noine" typ e =te xt r e q u i r e d name=nome>
<input type=submit va lue ="O K "x/ p>
</form>

9 ú [c6-required.html]

Nesse exemplo, disponível no site do livro e funcionando nos navegadores

Opera e Firefox 4, uma mensagem de alerta será apresentada ao usuário se houver
uma tentativa de envio do formulário com o controle destinado à coleta do nome
em branco. Convém esclarecer que o uso desse atributo verifica simplesmente se o
controle foi ou não deixado vazio. Qualquer caractere digitado é aceito.

Na figura 6.1 mostramos a mensagem de alerta nos navegadores citados. Notar

que o formato e a estilização da mensagem ficam a cargo do fabricante do navegador.

C a p ítu lo 8

Atributo required
Nome:: ( ” : | OK 1

: j g y f E s t e é u m cam po obrigatório

Lit
. ■ _ ÿj l-ï-v - i P V xt
N
Capítulo I

J
i QK

<■ favor, preencha este campo

Figura 6.1 - Atributo required.

6„2o4autocom plete
Alguns navegadores atuais implementam de forma variada uma funcionalidade
que consiste em sugerir uma lista de opções para preenchimento de um controle
200 HTML 5

de formulário, quando a ele se dá o foco, com base no que nele foi digitado ante­
riormente pelo usuário. Esse atributo destina-se a padronizar o comportamento
de autopreenchimento.

Os elementos que admitem o uso desse atributo são: fo rm e in p u t e os valores

possíveis são: on e o ff que definem, respectivamente, se o navegador deve ou nãc
apresentar uma lista de sugestões para autopreenchimento.

Quando não for especificado esse atributo para determinado controle do formu­
lário, fica subentendido que ele assume o comportamento de autopreenchimento
especificado para o elemento form ao qual pertence o controle.

Não sendo especificado o atributo para o elemento form, sua condição-padrãc

de autopreenchimento é on.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

►HTML
<form method="get" action="">
< p x la b e l for=''nome''>Nome: < /la b e lx in p u t id="nome" type=text required autocomplete=off name=nome>
<input type=submit value="0K“ x / p >
</form>

Qhi [c6-autocomplete.html]

Esse exemplo é idêntico ao anterior exceto pelo fato de termos incluído o atribute
a u to c o m p l e t e no controle para entrada do nome do usuário. O navegador Firefox j á
oferece essa funcionalidade nativamente há algum tempo. Assim você pode cons­
tatar o funcionamento do atributo a u to c o m p le t e naquele navegador comparando c
comportamento do controle para a entrada do nome nos dois exemplos anteriores.
No exemplo do item anterior, é apresentada uma lista de sugestões de nomes par;,
completar o controle; no exemplo desse item, como declaramos a u t o c o m p l e t e = o f f
lista não será apresentada.

6.2.5 dirname
Esse atributo destina-se a definir um dado adicional a ser anexado aos dados en­
viados por um formulário. O dado adicional informa a direção de escrita (ltr ov.
rtl) do texto que está sendo enviado.

Os elementos que admitem o uso desse atributo são: in put e textare a.

O e x e m p lo a se g u ir esclarece a s in ta x e e u s o desse a tr ib u to .
Capítulo 6 ■ Formulários 201

► HTML
<form method="get" action='"’ >
<pxlabel>Nome: <input t yp e = " te x t" nam e="nome"x/labelx/p>
< p x la b e l > E m a il : <input t yp e = " te x t" n a m e = " e m a ü " x / la b e lx / p >
<pxlabel>Mensagem: <textarea name="msg" dirname=''msg.din” ></textarea></label></p>
< p x i n p u t type="submit" name="enviar" va lu e = " e n v ia r" x /p >
</form>

Supondo que o usuário digitou o nome “Maujor” o e-mail “[email protected]”

e a mensagem “Bom dia”, a string de dados enviada para processamento quando o
formulário for enviado é:
name=Maujor&email=maujor%40maujor. com&msg=Bom+dia&msg.dir=ltr&enviar=enviar

6.2.6 form

Esse atributo destina-se a associar um controle de formulário a um elemento for­

mulário. Nas versões anteriores da HTM L, um controle de formulário está asso­
ciado (ou pertence) ao formulário no qual está inserido. Esse atributo permite que
se associem a um formulário controles inseridos fora dele e até mesmo controles
dentro de outro formulário.

O valor desse atributo é o mesmo valor do atributo id do formulário ao qual

está associado.

Os elementos que admitem o uso desse atributo são: button, fieldset, input, keygen,

labei, meter, object, output, progress, select e textarea.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTM L

<form method="get" action='"' id=”xpto">

< p x la b e l > E m a il : <input typ e = " te x t" nain e = "e m ail"x /la b elx /p >
<pxlabel>Mensagem: <textarea name="msg,,x / t e x t a r e a x / l a b e l x / p >
x p x i n p u t type="submit" name="enviar" v a lu e ="e nviar” x / p >
</form>
<pxlabel>Nome: <input typ e = " te x t" name="nome" f o r m = " x p t o " x / l a b e l x / p >

Nesse exemplo o campo para preenchimento do nome está fora do formulário,

mas seu conteúdo será enviado normalmente ao servidor para processamento
quando o formulário for enviado. O valor desse exemplo é questionável; contudo,
a finalidade é apenas mostrar o mecanismo de funcionamento do atributo fo rm .
202 htp/.l :

6.2.7 formaction
Esse atributo tem o mesmo efeito do atributo a ction para o elemento form , ou se :
destina-se a definir um URL para o qual o formulário será enviado para processamen:

Os elementos que admitem o uso desse atributo são: b u tto n e i n p u t . Assim, o U R L

para processamento é definido pelo valor desse atributo inserido em um dess-u
dois elementos.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
<forin method="get">
<pxla bel>Nome: <input ty p e = " t e x t " na me="nom e"x/la belx/p >
< p x la b e l > E m a i l : <input ty p e = " t e x t " n a m e = " e m a il" x /la b e lx /p >
<pxlabel>Mensagem: <textarea n a m e = " m s g " x / t e x t a r e a x / l a b e lx / p >
< p x i n p u t type="submit" name="enviar" value="envi ar” f o r m a c t i o n = " p r o c e s s a - f o r m . p h p " x :
</form>

6.2.8 formenctype
Esse atributo tem o mesmo efeito do atributo enctype para o elemento fo rm , ou se'
destina-se a definir o tipo de conteúdo que está sendo enviado pelo formulário

Os elementos que admitem o uso desse atributo são: b u tto n e in p u t. Assim, a :

dificação é definida pelo valor desse atributo inserido em um desses dois elemea

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
<form method="post" action="processa-form.php">
< p x la b e l > A r q u iv o : <input typ e=,lfile" n a m e = " a r q " x / la b e lx / p >

< p x in p u t type="submit" naine="enviar" value="enviar" fo r m e n c t y p e = ''m u l t i p a r t / f o r m - d a ía 'L .

</form>

6.2.9 formmethod
Esse atributo tem o mesmo efeito do atributo method para o elemento fo rm , ou s--
destina-se a definir o método usado para enviar os dados do formulário.
Capítulo 6 « Formulários 203

Os elementos que admitem o uso desse atributo são: button e in p u t. Assim, o

método é definido pelo valor desse atributo inserido em um desses dois elementos.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML
<form action="processa-form.php">
<pxlabel>Nome: <input t yp e = " te x t" nam e="nome"x/labelx/p>
< p x la b e l > E m a il : d n p u t t yp e = " te x t" name="email"></labelx/p>
<pxlabel>Mensagem: <textarea n a m e = " m s g " x / t e x t a r e a x / l a b e lx / p >
< p x i n p u t type="submit" name="enviar" value="enviar" f o r m m e t h o d = " g e t " x / p >
</form>

6.2.1 O form novalidate

Esse atributo tem o mesmo efeito do atributo n o v a l i d a t e para o elemento f o r m , ou seja,
destina-se a desabilitar a validação dos dados do formulário. (O atributo n o va lid ate

é novo na HTML5. Ver 6.2.15).

Os elementos que admitem o uso desse atributo são: b u tto n e in p u t. Assim, a

necessidade ou não de se validar os dados é definida pela inserção desse atributo
em um desses dois elementos.

Trata-se de um atributo booleano, ou seja, é ou não definido para um elemento.

Não confundir atributo booleano com valor booleano para o atributo. Neste
atribuem-se os valores t r u e ou f a l s e e naqueles a presença ou ausência do atributo
sem declaração de valor é suficiente.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

<form method="post" action=''processa-form.php">

<pxlabel>Nome: d n p u t t y p e = " t e x t ” nam e="nome"x/labelx/p>
< p x la b e l > E m a il : d n p u t t yp e = " te x t" n a m e = " e m a iT x / la b e lx / p >
<pxlabel>Mensagem: d e x t a r e a n a m e = " m s g " x / t e x t a r e a x / l a b e lx / p >
< p x i n p u t type="submit" natne="enviar" v a lu e = " e n v i a r" x / p >
< p x i n p u t type="subrait" name=''gravar" value="Salvar'' f o r t n n o v a l i d a t e x / p >
</form>

Esse atributo define o destino do documento que será aberto após o envio do
formulário.
204 HTML 5

Os elementos que admitem o uso desse atributo são: button e input. Assim, o destine
do documento é definido pela inserção desse atributo em um desses dois elementos.

Os valores possíveis para esse atributo são: _blank, _top, _ s e lf e _parent ou qualquer
nome no contexto da janela atual.

6.2.12 list
Esse atributo é para uso exclusivo com o elemento input e destina-se a definir uma list;
de opções para preenchimento de um campo de texto. O seu valor deve ser igual ac
valor do id de um elemento datalist. Esse atributo foi estudado com detalhes em 5.2.1”.

6.2.13 max
Esse atributo é para uso exclusivo com os elementos meter, progress e input e destina-se
a definir um valor máximo. O uso desse atributo para os elementos meter e progress
foi estudado em 2.4.17 e 2.4.20 respectivamente.

Para o elemento meter ele destina-se a definir o valor máximo da escala à qual a
medida marcada pertence; se for omitido, será considerado igual a 1 ; para o elementc
progress ele destina-se a definir o quanto é necessário para realizar uma tarefa.Usa:
esse atributo com o elemento input define um valor numérico máximo permitide
como entrada no campo. Usado em conjunto com o atributo min estabelece ume
faixa de entrada de dados no campo.

O exemplo a seguir esclarece a sintaxe e uso desse atributo.

► HTML

<input name="quantidade" required type="number" min="10" max="20" value=''15">

Nesse exemplo, quando a página é carregada, o campo está preenchido com :

valor 15; ao usuário é permitido entrar valores compreendidos entre 10 e 20 inci . -
sive. Esse exemplo está disponível no site do livro para visualização no navegade.
Opera ou posteriores.

6.2.14 min
Esse atributo é para uso exclusivo com os elementos meter e input e destina-se
definir um valor mínimo. O uso desse atributo para o elemento meter define o va.
Capítulo 6 a Formulários 205

mínimo da escala à qual a medida marcada pertence; se for omitido, será conside­
rado igual a 0. Ver 2.4.17.

Usar esse atributo com o elemento input define um valor numérico mínimo per­
mitido como entrada no campo. Usado em conjunto com o atributo max estabelece
uma faixa de entrada de dados no campo. Ver 6.2.13.

6.2.15 novalidate
Esse atributo é para uso exclusivo com o elemento form e tem o mesmo efeito do
elemento formnovalidate que foi estudado em 6 .2 .1 0 .

6.3 A tribu to typ e para elem ento input

A H T M L 5 criou uma série de novos valores para o atributo type do elemento input.
Basicamente, os novos valores definem o tipo de dado esperado pelo controle. Esse
atributo e seu valor destinam-se a informar ao agente de usuário o tipo de dado espe­
rado e fazer com que seja disparado o mecanismo de validação nativo do navegador.

Os valores do atributo type previstos nas Recomendações para a H TM L4 são 10,

a saber: t e x t , password, checkbox, radio, submit, r e s e t, file, hidden, image, button.

A H TM L5 manteve os 10 valores citados e acrescentou mais treze, conforme

estudados a seguir.

6.3.1 search
Destina-se a definir u m controle input do tipo busca. O efeito desse atributo é alterar
a estilização e comportamento do controle diferenciando-o dos demais controles
input. O modo como o controle é estilizado e seu comportamento fica por conta
do fabricante do navegador.

Por exemplo: o navegador Chrome 9.0, que oferece suporte para esse atributo,
apresenta uma letra “x” à direita da área de digitação do controle que se destina
a fazer desaparecer o texto colocado como placeholder com uso do atributo value
quando o usuário dá o foco ao controle. Não sendo definido o placeholder, a letra
“x ” aparece tão logo o usuário comece a digitar no controle.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor para o
atributo type de controles input usando dois campos: um com e outro sem placeholder.
206 HTML 5

► HTML
<h3>Com placeholder</h3>
<input name="q” type="search" value="palavra-chave">
<h3>Sem placeholder</h3>
<input name="q" type="search">

< R í [c6-search.html]

6.3.2 tel
Destina-se a definir um controle input para a coleta de um número de telefone. Uma
vez que números de telefone variam em formato, dependendo da região ou país, esse
valor de atributo não força a entrada de uma sintaxe particular, ele apenas identifica
a destinação do controle.

A validação de um controle para número de telefone deve ser feita com uso d:
atributo pattern ou do novo método setCustomValidity() disponível como mécanisme
JavaScript nativo do navegador.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor par:
o atributo type de controles input e a respectiva validação com uso do atributo patterr

<form>
< p x la b e l > T e l e f o n e : <input required name="tel" p a t t e r n = " \ ( [ 0 - 9 ] { 2 } \ ) [ \ s ] [ 0 - 9 ] { 4 } - [ 0 - 9 ] { 4 } " > < /
l a b e l ) (xx) xxxx-xxxx</p>
< p x i n p u t type=submit v a lu e = E n v ia rx / p >
</form>

íf^ .w a tta ra h t m ll

Esse exemplo está disponível no site do livro e deverá ser visualizado no navegador
Opera que suporta o atributo. O atributo pattern recebe como valor uma expressa
regular construída com sintaxe JavaScript e o que for digitado no controle dever:
satisfazer à expressão. No exemplo a expressão casa com números começando coro
(xx) seguido de um espaço em branco e duas vezes quatro números separados per
um traço. Deve-se informar ao usuário o formato esperado para a entrada do númer:
de telefone no controle, que, no caso do exemplo, foi (xx) xxxx-xxxx.

Outra opção para validar o dado inserido em um controle pelo usuário é cor
uso do novo método JavaScript setCustomValidityQ conforme mostrado a seguir.
Capítulo 6 ■ Formulários 207

> JavaScript
<script>
var padrao = / A\ ( [ 0 - 9 ] { 2 } \ ) [ \ s ] [ 0 - 9 ] { 4 } - [ 0 - 9 ] { 4 } $ / ;
fu nctio n v a li d a r ( i n p u t ) {
i f ( ! p a d p a o . t e s t ( i n p u t . v a lu e ) ) {
// Mensagem de erro
i n p u t . setCustomVa lidity (
'O número ( ' + in p u t .v a lu e + ' ) não está no formato re querido. Por fa vo r c o r r i j a . ' ) ;
} else {
// limpa mensagem de erro
i n p u t . s e tC u s to m V a lid ity (" ) ;

}
document. getElementByld( ' msg-erro' ) . innerHTML = i n p u t . validationMessage;
}
</script>

► HTML
<form>
<pxlabel>
Telefone: <input required name="tel" onblur="validar(this)">
</label> (xx) xxxx-xxxx</p>
<div id="msg-erro" style="color:red;"></div>
<input type="submit'' value="OI<">
</form>

•íiy [c6-setCustomValidity.html]

Esse exemplo está disponível no site e deverá ser visualizado nos navegadores
Opera ou Chrome.

6.3.3 uri
Destina-se a definir um controle input para receber um URL absoluto.

Entre outras aplicações, podemos usar essa funcionalidade para fornecer uma
indicação visual ao usuário sobre a validade do URL digitado no controle.

O exemplo a seguir, disponível no site do livro, demonstra esse uso. Nele usa­
mos as pseudoclasses para o elemento input previstas nas CSS3 : valid e : invalid que
identificam se um controle recebeu ou não um dado válido para seu tipo.

►css
<style>
.c s s v a l:valid {
208 HT.V.:-

background:#0f0;

}
. c s s v a l: in v a l id {
background:#f00;
c o l o r :# f f f

}
</style>

►HTML
<form>
< p x la b e l > U R L : <input t y p e = u r l name="url" c l a s s = " c s s v a l " x / l a b e l x / p >
</form>

C A [c6-url.html]

As regras CSS aplicam uma cor de fundo ao elemento input identificado p ei­
dasse cssval. A cor será verde (#0f0) se o dado digitado no controle for válido
vermelha (# f 0 0 ) caso contrário.

O comportamento de mudança de cor fica por conta de cada navegador e. a

época que este livro foi escrito, tal comportamento variava. Todos os navegadores
apresentam o controle no seu estado inicial na cor verde. Ao se digitar o primei;
caractere, seja ele qual for, a cor muda para vermelho e só volta para verde se o usu­
ário completou a sequência digitada igual a http: nos navegadores Opera e Firefc::
e a sequência http:// no navegador Chrome.

Esse comportamento pode confundir o usuário e seria melhor que o campe

permanecesse verde se a string digitada inicialmente fosse http://. Vamos aguarda;
para ver como será a implementação definitiva do comportamento.

Destina-se a definir um controle input para receber um endereço de e-mail.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor para
o atributo type de controles input e a respectiva validação por mecanismos nativo;
cio navegador.

►HTML
<form>
< p x l a b e l > E - m a i l : <input t y p e = e m a i l required n a m e= em a ilx/la be lx /p >
< p x i n p u t type=submit v a lu e = E n v ia r x / p >
</form>

"Sfi [c6-email.html]
Capítulo 6 ■ Formulários 209

O mecanismo de validação do navegador identifica a presença de uma string com

formato de um endereço de e-mail para validar. Isso significa que um endereço de
e-mail inexistente, desde que de acordo com aquele formato, valida normalmente.
Por exemplo: a(5>a.a passa na validação.

63.5 datefime
Destina-se a definir um controle input para receber uma string representando uma
data e hora UTC. A representação do grupo data/hora fica a cargo do agente de
usuário em um formato conveniente considerando o local e o usuário. Para isso o
agente de usuário normalmente apresentará um widget do tipo date picker quan­
do for dada entrada no controle da data e um campo com slider do tipo seta para
entrada da hora.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor

para o atributo type de controles input. Nele você poderá observar a renderização do
widget date picker em navegadores que suportam esse valor de atributo, tal como
o Opera, por exemplo.

► HTML

<form>
< px la b e l> D a ta / h o ra : <input type=datetime name=', datahorai,x la b e l> < /p >
< p x i n p u t type=submit va lu e = E n v ia rx /p >
</form>

¥ ) [c6-datetime.html]

6.3.6 date
Destina-se a definir um controle input para receber uma string representando uma
data. A representação da data fica a cargo do agente de usuário em um formato con­
veniente considerando o local e o usuário. Para isso o agente de usuário normalmente
apresentará um widget do tipo date picker quando for dada entrada no controle.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor

para o atributo type de controles input. Nele você poderá observar a renderização do
widget date picker em navegadores que suportam esse valor de atributo, tal como
o Opera, por exemplo.
210 HTML 5

► HTML
<form>
< px la b e l> D a ta / h o ra : <input type=date n a m e = " d a t a " x la b e lx /p >
< p x i n p u t type=submit v a lu e = E n v ia rx / p >
</form>

•# J [c6-date.html]

6.3.7 time
Destina-se a definir um controle input para receber uma string representando uma
hora. Normalmente o agente de usuário apresentará um slider do tipo seta para
entrada da hora.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor para
o atributo type de controles input. Nele você poderá observar a renderização do
slider do tipo seta em navegadores que suportam esse valor de atributo, tal como
o Opera, por exemplo.

►HTML
<form>
< p x la b e l> H o ra : <input type=time n a m e = " h o ra " x la b e lx /p >
< p x i n p u t type=submit v a lu e = E n v ia rx / p >
</form>

[c6-time.html]

Destina-se a definir um controle input para receber uma string representando um

mês do ano. A representação do mês fica a cargo do agente de usuário em um for­
mato conveniente considerando o local e o usuário; para tanto, o agente de usuário
normalmente apresentará um widget do tipo date picker quando for dada entrada
no controle.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor

para o atributo type de controles input. Nele você poderá observar a renderização do
widget date picker em navegadores que suportam esse valor de atributo, tal como
o Opera, por exemplo.
Capítulo 6 ■ Formulários 211

► HTML
<form>
<pxla b el>M ês: <input type=month name="mes"><labelx/p>
< p x i n p u t type=submit v a lu e = E n v ia r x / p >
</form>

« 5 [c6-month.html]

6.3.9 week
Destina-se a definir um controle input para receber uma string representando uma
semana do ano. A representação da semana fica a cargo do agente de usuário em
um formato conveniente considerando o local e o usuário; para tanto, o agente de
usuário normalmente apresentará um widget do tipo date picker quando for dada
entrada no controle.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor

para o atributo type de controles input. Nele você poderá observar a renderização do
widget date picker em navegadores que suportam esse valor de atributo, tal como
o Opera, por exemplo.

► HTML
<form>
<pxlabel>Semana: <input type=week name=''semana,,x l a b e l x / p >
< p x i n p u t type=submit v a lu e = E n v ia rx / p >
</form>

C j [c6-week.html]

6.3.10 datetime-local
Destina-se a definir um controle input para receber uma string representando uma data
e hora local. A representação do grupo data/hora fica a cargo do agente de usuário
em um formato conveniente considerando o local e o usuário. Para isso o agente de
usuário normalmente apresentará um widget do tipo date picker quando for dada
entrada no controle da data e um campo com slider do tipo seta para entrada da hora.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor

para o atributo type de controles input. Nele você poderá observar a renderização do
widget date picker em navegadores que suportam esse valor de atributo, tal como
o Opera, por exemplo.
212 HTML 5

► HTM L

<form>
<pxla b el>D ata/ho ra Lo ca l: <input type=date tim e-lo cal na m e= "d a ta h o ra lo c a l" xla b e lx /p >
< p x i n p u t type=submit v a lu e = E n v ia rx / p >
</form>

^ [c6-datetime-local.html]

6.3.11 number
Destina-se a definir um controle in pu t para receber um número. Normalmente o
agente de usuário apresentará um slider do tipo seta para entrada do número.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor

para o atributo t y p e de controles in p u t. Nele você poderá observar a renderização do
slider do tipo seta em navegadores que suportam esse valor de atributo, tal como
o Opera, por exemplo.

► HTM L

<form>
<pxlabel>Número: <input type=number na me="num ero"xlabelx/p>
< p x i n p u t type=submit v a lu e = E n v ia rx / p >
</form>

■Sj [c6-number.html]

6.3.12 range
Destina-se a definir um controle input para receber um número contido dentro
de um intervalo. Normalmente o agente de usuário apresentará um slider do tipo
controle deslizante para a entrada do número.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor

para o atributo type de controles in p u t. Nele você poderá observar a renderização
do slider do tipo controle deslizante em navegadores que suportam esse valor de
atributo, tal como o Opera, por exemplo.

► HTM L

<form>
<pxlabel>Número: <input type=range min="5'' max="20" value="12" step="l" name=numerox/labelx/p>
< p x i n p u t type=submit va lu e = E n v ia rx /p >
</form>

- l í j [c6-range.html]
Capítulo 6 ■ Formulários 213

No exemplo mostrado foi renderizado um slider na horizontal, pois esse é o

modo de renderização-padrão. Contudo, podemos forçar a renderização na vertical
com uso de regras de estilo. Se definirmos um valor para a largura do input menor
que o valor da sua altura, alteramos o modo de renderização, como mostrado no
exemplo a seguir.

► CSS

<style>
input {
wid th: 40px;
heig ht: 120px;

}
</style>

. HTM L
<form>
<pxlabel>Número: <input type=range min=T" max=T00" value="20" step="2" name=numerox/labelx/p>
< p x i n p u t type=submit v a lu e = E n v ia rx / p >
</form>

' • ’j [c6-range-vertical.html]

6.3.13 color
Destina-se a definir um controle input para receber o código sRGB de uma cor.
Normalmente o agente de usuário apresentará um widget do tipo color-pick para
a entrada da cor.

O exemplo a seguir, disponível no site do livro, demonstra o uso desse valor

para o atributo type de controles input. Nele você poderá observar a renderização do
color-pick em navegadores que suportam esse valor de atributo, tal como o Opera,
por exemplo.

►HTML
<form>
< p x la b e l > C o r : d n p u t t y p e = c o l o r x / l a b e l x / p >
< p x i n p u t type=submit v a lu e = E n v ia r x / p >
</form>

[c6-color.html]
 Geolocalização

Neste capítulo, mostraremos as funcionalidades da API Geolocation. É comum afir­

mar que geolocalização é uma funcionalidade da HTML5, mas tal afirmativa nãc
está correta. A API para Geolocation foi implementada pelo W 3C que publicou c
seu primeiro Rascunho de Trabalho em 22 de dezembro de 2008; desde então, vem
desenvolvendo sua especificação que atualmente se encontra em fase de Candidata a
Recomendação e é uma especificação sem qualquer relação e independente da HTML5.

Geolocalização é uma funcionalidade que, apesar de ter sido lançada no ano de

2008, ganhou destaque e começou a ser difundida na mesma época em que a
HTM L5 ganhou seu espaço e começou a ser estudada e aplicada pela comunidade
de desenvolvimento web. Talvez essa coincidência tenha sido a responsável por ter-se
criado a falsa ideia de que geolocalização faz parte da HTML5.

A ideia marcou tanto que sempre que surge um tema relacionado à HTML5
como um todo, o assunto Geolocation vem à discussão. Assim, antecipando a um
anseio do leitor, suponho que ele espere encontrar esse assunto neste livro e por
essa razão o presente capítulo é dedicado à API Geolocation.

A especificação que trata da geolocalização define uma API destinada a oferecer

acesso via script às informações relacionadas à localização geográfica do dispositive
de usuário que hospeda a funcionalidade.

214
Capítulo 7 ■ Geolocalização 215

A captação dos parâmetros de localização geográfica se faz com uso de GPS,

sinais de redes tal como endereços de IP, redes sem fio, identificação por sinais de
rádio (RFID), Bluetooth, identificadores GSM/CDMA ou ainda com uso de dados
fornecidos diretamente pelo usuário.

Segundo as especificações para a API Geolocation, nenhuma garantia é fornecida

de que os dados retornados pelas funcionalidades da API forneçam a localização
exata do dispositivo do usuário.

A API foi projetada para prover três estados de localização do dispositivo de usu­
ário, a saber: a posição estática atual, a localização dinâmica obtida por atualização
repetida e contínua da posição atual e a possibilidade de recuperar uma posição
anteriormente armazenada no dispositivo do usuário (posição em cache).

7.2 Segurança e privacidade

Obter a localização do dispositivo do usuário na maioria dos casos implica obter a
localização do próprio usuário, comprometendo assim sua privacidade.

Uma implementação da API Geolocation em conformidade com as especifica­

ções do W 3C deve obrigatoriamente fornecer ao usuário um mecanismo capaz de
protegê-lo contra a invasão de sua privacidade. Tal mecanismo deverá assegurar ao
usuário a opção de escolha por compartilhar ou não os dados relativos à sua loca­
lização geográfica. Assim, agentes de usuário não devem enviar, para qualquer que
seja o Web Site, informações de posição sem o expresso consentimento do usuário.

O mecanismo de proteção da privacidade do usuário deve prever uma interface

que informe claramente ao usuário a tentativa de obtenção da sua posição geográfica,
fornecendo ainda o URI do documento web que está tentando obter a permissão
e as opções, ao usuário, de aceitar ou rejeitar o compartilhamento da sua posição
geográfica.

Na figura 7.1 a seguir podemos observar a interface de proteção de privacidade

do usuário no navegador Firefox 4.

A especificação do W 3C para a API Geolocation prevê ainda que a implementação

deverá prover um mecanismo para revogar, a qualquer momento, uma permissão
de compartilhamento de posição que tenha sido dada anteriormente. No navegador
Firefox 4, para revogar uma permissão, acione o menu Ferramentas > Propriedades da página
> Permissões e marque a opção Perguntar no item Compartilhar localização.
216 HTML 5

•;Ataiam; í ■ -la i x
MrQüivG Editar Exicr Histórico =®vontos ^errementa

http://maujor,com :ese;? saber sua locarzaçao

Saiba me’s... ; CGmpBrfíbêr loceAazâo ▼

Sempre cwnpsrt!hí,r ..j
Uunca eompardrar

a Açora não

Figura 7.1 - Interface de proteção de privacidade.

73 Interface Geolocation
A API Geolocation está implementada em um agente de usuário que contenha o
objeto JavaScript navigator se existir o objeto geolocation filho de navigator. Assim,
para testar a existência da funcionalidade Geolocation em um dispositivo, devemos
testar a existência do objeto geolocation como mostrado no código a seguir.

►JavaScript
i f ( n a v i g a t o r . geolocation) {
a l e r t ( " Este navegador suporta a fu ncionalidade Ge o lo ca tio n ");
/ * Faça alguma coisa com Geolocation */
} else {
a l e r t ( " E s t e navegador não suporta a funciona lidade G e oloca tio n");

[c7-teste-geolocation.html]

O arquivo de teste para o objeto geolocation encontra-se disponível no site do livro.

Se você estiver usando a biblioteca Modernize poderá, opcionalmente, testar a

existência da funcionalidade Geolocation com uso do objeto Modernizr como mos­
trado a seguir.
Capítulo 7 ■ Geolocalização 217

►JavaScript
<script>
i f ( M o d e r n i z r . geolocatio n) {
a l e r t ( ' ' E s t e navegador suporta a funciona lidade G e o l o c a tio n " );
I* Faça alguma coisa com Geolocation * /
} else {
a l e r t ( " E s t e navegador não suporta a funciona lidade Geoloca tion11) ;

}
</script>

7 .4 M étodos do objeto geolocation

O objeto g eolocation contém três métodos para a determinação e manipulação da
posição geográfica do agente de usuário, conforme listados a seguir.

s g e tC u rre n tP o s itio n j)

■ w atc h P osition ()

■ clearW atch()

Cada um desses métodos admite parâmetros obrigatórios e opcionais, conforme

veremos detalhadamente a seguir.

7.4.1 getCurrentPosÍtÍOn(ca//bac/csucesso, callbackerro, {opções posição})

Esse método admite um, dois ou três parâmetros. Os dois primeiros parâmetros
são funções callback a serem chamadas nos casos de sucesso ou falha na obtenção
da posição do dispositivo de usuário e o terceiro parâmetro é um objeto contendo
pares nome/valor de propriedades da posição.

callback sucesso
A função callback para sucesso recebe como parâmetro um objeto contendo, entre
outras estudadas adiante, duas propriedades das coordenadas geográficas do dis­
positivo de usuário que são a latitude e a longitude. A sintaxe para obtenção dessas
propriedades é mostrada a seguir.
functio n sucesso ( p o s itio n ) {
var la t i t u d e = p o s i t i o n . coords.l a t i t u d e ;
var longitude = p o s it io n .c o o r d s ,lo n g i t u d e ;

No código mostrado o parâmetro objeto da função callback para sucesso foi

denominado p o sitio n .
218 HTML 5

O exemplo a seguir, disponível no site do livro, mostra o script para obtenção

da posição do dispositivo de usuário e, em caso de sucesso, retoma uma mensagem
informando as coordenadas geográficas do dispositivo.

►JavaScript
<script>
fu nctio n o bte rPos ica oQ {
i f (na vig a to r.g e o lo c a tio n ) {
n a v ig a t o r. g eo lo catio n. g etC urre ntPositio n(sucesso);
} else {
a l e r t ( " E s t e navegador não suporta a funciona lidade Ge oloca tio n'');

}
}
fu nctio n sucesso(position) {
var la t i t u d e = p o s it i o n . c o o r d s . l a t i t u d e ;
var longitude = p o s it io n .c o o rd s .lo n g it u d e ;

var mensagem = "As suas coordenadas são: <br>";

mensagem += " L a t i t u d e : " + la t i t u d e + "<br>";
mensagem += "Longitu de: " + longitude;
document.getElementById('msg').innerHTML = mensagem;

}
</script>

► HTML
ç p x i n p u t type=button value="Clique para obter posição" o n c lic k = "o b te rP o s ic a o ( ) " x / p >
<p id="msg" c la s s = "d e s t" x /p >

'"fii [c7-sucesso.html]

Além da latitude e da longitude, o objeto positio n fornece ainda as seguintes

informações sobre as coordenadas de posicionamento do agente de usuário:

■ p o s i t i o n . c o o r d s .altitude - Fornece a altitude do agente de usuário em metros.

Se não for possível determinar a altitude, o valor retornado deverá ser n u ll.

n p o s itio n .c o o rd s .a c c u ra c y - Fornece a precisão, em metros, das coordenadas

geográficas latitude e longitude calculadas pela API.

a p o s itio n ,c o o rd s .a ltitu d e A c c u ra c y - Fornece a precisão, em metros, da coorde­

nada geográfica altitude calculada pela API. Se não for possível determinar a
precisão da altitude, o valor retornado deverá ser n u ll.
Capitulo 7 ■ Geolocalização 219

a p o s i t i o n , c o o r d s . h e ad ing - Fornece a direção de deslocamento do dispositivo de

usuário. O valor dessa propriedade é um ângulo compreendido entre 0 e 360
graus indicando, no sentido horário, a direção de deslocamento em relação ao
norte verdadeiro. Se não for possível determinar a direção de deslocamento, o
valor retornado deverá ser n u l l . Se o dispositivo de usuário estiver em situação
estacionária (não em deslocamento), o valor retornado deverá ser NaN.

h p o s itio n .c o o rd s .s p e e d - Fornece a velocidade de deslocamento do agente de

usuário em metros por segundo. Se não for possível determinar a velocidade,
o valor retornado deverá ser null.

■ p o s itio n ,tim e s ta m p - Essa é uma propriedade do objeto p o sitio n que retorna

um valor numérico em milissegundos representando um DOMTimeStamp
do momento em que a posição do agente de usuário foi determinada.

O exemplo a seguir, disponível no site do livro, mostra o script para obtenção de

uma mensagem informando os valores retornados para as propriedades descritas.

Dessas propriedades os navegadores deverão implementar a latitude, longitude e

precisão das coordenadas. As demais propriedades ficam a cargo de cada implemen­
tação. Assim, no exemplo mostrado a seguir, os valores retornados para as demais
propriedades não citadas anteriormente diferem de navegador para navegador.

►JavaScript
<script>
fu nctio n pro p rie d ad e sPositionQ {
i f ( n a v ig a t o r .geolocatio n) {
n a v ig a t o r, g eo lo catio n, g etCurrentPo sitio n(suce sso);
} else {
a l e r t ( " E s t e navegador não suporta a funciona lidade Ge oloca tio n'');

}
}
fu nctio n sucesso(position) {
var la t i t u d e = p o s i t i o n . c o o r d s . l a t i t u d e ;
var longitude = p o s it io n .c o o r d s .lo n g it u d e ;
var a lt i t u d e = p o s i t i o n . c o o r d s . a l t i t u d e ;
var precisão = p o s it io n.co o rds .a ccura cy ;
var p rec is ao Alt it ud e = p o s it io n .c o o rd s .a ltitu d e A c c u ra c y ;
var direcao = p o s it io n.co o rds .he a ding;
var velocidade = pos it io n.co o rds .s p ee d ;
var tempo = position.tim estam p;
var mensagem = "As propriedades de Po s itio n são: <br>";
mensagem += " L a t i t u d e : " + l a t i t u d e + "<br>";
220 H T M L;

mensagem += "Lo ngitu de: " + lo ng itude + "<br>";

mensagem += "Precisão das coordenadas: " + precisão + " metros<br>";
mensagem += "<br>";
mensagem += " A l t i t u d e : " + a lt i t u d e + "<br>";
mensagem += "Precisão da a l t i t u d e : " + p rec is ao Alt it ud e + " metros<br>";
mensagem += "<br>";
mensagem += "Direção: " + direcao + " graus<br>";
mensagem += "Velocidade: " + velocidade + "<br>";
mensagem += "Tempo: " + tempo + " milissegundos";
document.getElementById('msg') .innerHTML = mensagem;
}
</script>

► HTML

c p x i n p u t type=button value="Clique para obter propriedades" oncli ck="pro priedadesPo sition()> </
P>
<p id="msg" c la s s = "d e s t" x /p >

Qs,
■ w [c7- propriedades-position.htm!]

callback erro

A função callback para erro admite um parâmetro destinado a coletar duas proprie­
dades que são um código de erro e uma mensagem de erro. A sintaxe para obtenção
dessas propriedades é mostrada a seguir.
fu nctio n erro ( e r r ) {
var codigo = e rr.cod e ;
var mensagem = err.message;

No código mostrado o parâmetro da função callback para erro foi denominado err.

Os códigos de erros e seus respectivos valores numéricos são listados a seguir.

m PERMISSION_DENIED (1) - Ocorre quando o usuário nega acesso à sua posição.

■ POSITIONJJNAVAILABLE (2) - Ocorre quando a rede está fora do ar ou não for

possível estabelecer conexão com os satélites.

n T IM EO UT (3) - Ocorre quando a rede está ativa, mas o tempo de obtenção da

posição torna-se muito longo.

A propriedade message retorna uma informação, em jargão técnico, sobre o erre

ocorrido e é usada para fins de debug. Não deve ser apresentada ao usuário, devendo-
se construir uma mensagem amigável para esse fim, como mostrado a seguir.
Capítulo 7 b Geolocalização 221

►JavaScript
fu nctio n e r r o ( e r r ) {
switch ( e r r ) {
case 1 :
a l e r t ( " A permissão para obter a sua posição f o i negada");
break;
case 2 :
a l e r t ("Não f o i possível estabelecer uma conexão para obter a sua p o s iç ã o ." ) ;
break;
case 3 :
a l e r t ("Tempo esgotado");
break;
d e f a u l t:
a le r t( " N ã o f o i possível obter sua p osiç ão");

}
}

O exemplo a seguir, disponível no site do livro, mostra o script para obtenção

da posição do dispositivo de usuário e, em caso de erro, retorna uma mensagem
informando o código do erro e uma mensagem ao usuário.

►JavaScript
fu nctio n in s p e c io n a rE rro Q {
i f ( n a v i g a t o r .geo locatio n) {
n a v i g a t o r . g eo lo c a tio n .g e tC u rre n tP o s itio n (s u c e s s o ,e rr o );
} else {
a l e r t ( " E s t e navegador não suporta a funciona lidade Ge o lo ca tio n ");

}
}
functio n e r r o ( e r r ) {
switch ( e r r . code) {
case 1 :
var mensagemErro = "A permissão para obter a sua posição f o i negada.";
break;
case 2 :
var mensagemErro = "Não f o i possível estabelecer uma conexão para obter a sua posição.";
break;
case 3 :
var mensagemErro = "Tempo esgota do.";
break;
d e f a u l t:
var mensagemErro = "Não f o i possível obter sua p o s iç ã o .";

}
222 HTML 5

var codigoErro = e rr.c o d e ;

var mensagem = "Ocoreu um erro na determinação da posição: <br>";
mensagem += "Código do e r r o : " + codigoErro + "<br>";
mensagem += "Mensagem: " + mensagemErro;
document.getElementById('msg').innerHTML = mensagem;
}
fu nctio n sucesso(position) {
document.getElementById('msg').innerHTML = "Provoque um e r r o , negando
}

►HTML
c p x i n p u t type=button va lue="Clique para inspecionar erro" o n c li c k = " i n s p e c i o n a r E r r o ( ) " x / p >
<p id="msg" c la s s = "d e s t" x /p >

[c7-erro.html]

Ao consultar o arquivo, você deverá forçar um erro para visualizar o script err.
ação. No navegador Firefox, acione o menu Ferramentas > Propriedades da página > Permissões
desmarque a opção Perguntar e marque a opção Bloquear no item Compartilhar localização
Com essa ação, você causará o erro PERMISSION_DENIED sempre que o script tentar obter
sua posição. Clique o botão “Clique para inspecionar erro” no arquivo exemplo -
uma mensagem de erro será apresentada. Não esqueça de desfazer o bloqueio n :
menu Ferramentas depois de concluir a visualização do exemplo.

(opções posição}

O terceiro parâmetro é um objeto JavaScript contendo informações a serem usada;

na obtenção da posição do agente de usuário. Esse parâmetro é opcional e as infor­
mações passadas são as seguintes:

9 e n a b le H ig h A c c u r a c y - informa ao dispositivo de usuário que ele deverá tenta:

obter a posição com a maior precisão possível. Em dispositivos móveis, a loca­
lização será feita com uso de GPS. Os valores possíveis para essa inform açã.
são true e f a l s e e o valor-padrão é f a l s e .

■ timeout - define um tempo máximo, em milissegundos, para obtenção

posição. O valor-padrão é infinito.

m maximumAge - se o dispositivo de usuário guardou em cache uma posição pre ­

viamente determinada, essa informação fornece um tempo, em milissegund: ;
abaixo do qual a posição em cache no dispositivo poderá ser aproveitada.
valor-padrão é zero, ou seja, não usar posição em cache.
Capítulo 7 ■ Geolocalização 223

Observe a seguir a sintaxe de uso desse parâmetro.

n a v ig a t o r .g e o lo c a tio n .g e tC u rre n tP o s itio n ( s u c e s s o ,e rro , {
enableHighAccuracy: t r u e ,
timeout: 3000,
maximumAge: 300000

});

Segundo esse exemplo, a obtenção da posição deverá ser feita com a maior pre­
cisão possível (depende do dispositivo de usuário), em, no máximo, 3s e se houver
em cache uma posição que tenha sido obtida nos últimos 5 minutos, ela deverá
ser usada.

7.4.2 watchPosÍtÍon(co//6oc/í sucesso, callback erro, {opções posição })

Esse método admite um, dois ou três parâmetros. Os dois primeiros parâmetros
são funções callback a serem chamadas nos casos de sucesso ou falha na obtenção
da posição do dispositivo de usuário e o terceiro parâmetro é um objeto contendo
pares nome/valor de propriedades da posição.

A única diferença desse método para o método g e tC u rre n tP o s itio n Q é que ele
obtém a posição do dispositivo de usuário continuamente. Conclui-se de imediato
que é indicado para situações nas quais há um deslocamento ou movimentação
do dispositivo.

Esse método é usado em conjunto com o método c learW atch (id) e seu funciona­
mento é semelhante ao funcionamento dos métodos s e tln te rv a lQ e c le a rln te rva lQ .

O exemplo a seguir esclarece a sintaxe de uso desses métodos.

v a r p o s i t i o n l d = n a v ig ato r.ge oloc atio n.w a tchPo s it io n(s uce s s o,erro, {enableHighAccuracy: t ru e } } ;
functio n sucessoQ {
// corpo da função sucesso

}
func tio n e r r o Q {
// corpo da função erro

}
functio n pararPosicionamentoQ {
// ...
b o t ã o .onclick = f u n c t i o n Q {
clearW atch(positionld);

}
}
224 HTML 5

7.5 Google Maps API

7.5.1 introdução

Conforme acabamos de estudar, os três métodos e as propriedades da API Geoloca-

tion retornam informações sobre a localização do agente de usuário. Somente issc
e nada mais. Ao contrário do que muitos acreditam, a API não constrói mapas de
localização e nem fornece qualquer funcionalidade de tratamento das informações
retornadas.

Assim, se você deseja mostrar em um mapa a localização obtida com as infor­

mações fornecidas pela API Geolocation, terá de se valer de um serviço de mapa.-
de terceiros e passar para a API do serviço escolhido as informações obtidas e esta
se encarregará de renderizar devidamente o mapa.

O serviço do Google denominado Google Maps oferece várias APIs para usa
público e gratuito, com inúmeros métodos e propriedades devidamente documen­
tados em seu site. Para ilustrar alguns empregos da API Geolocation, mostraremos
exemplos de integração e requisição de mapas do Google explicando de forma su­
cinta algumas das funcionalidades disponíveis em duas das suas APIs, bem coma
a sintaxe para requisitar mapas.

7.5.2 API do Google Static Maps

Essa API nos permite requisitar mapas estáticos. Esses mapas, gerados com as
informações passadas para a API do Google, são imagens estáticas; por isso, nãc
fornecem qualquer tipo de interação do mapa com o usuário. Elas simplesmente
mostram a localização do dispositivo de usuário usando coordenadas de latitude
e longitude retornadas pela API Geolocation.

AAPI do Google Static Maps retorna um URL parametrizado contendo o endere­

ço da imagem do mapa gerado. A imagem é gerada nas extensões .gif,.jpg e .png e ;
desenvolvedor tem a opção de escolher uma dessas extensões ao inserir a imagem r.
página. De posse desse endereço, com uso de script, é fácil inserir o U RL como vale:
do atributo src de um elemento img e obter a renderização do mapa personalizad:
de acordo com a latitude e longitude e os parâmetros do URL. Observe a seguir r
sintaxe para uma marcação HTM L capaz de inserir um mapa estático do Google.
<img src="http://m a p s.g oo g le . com/maps/api/staticmap?center=-22.975091^-4B.188762&zoom=16
&size=600x600&sensor=true“ a l t = " " />
Capítulo 7 ■ Geolocalização 225

Digite o código mostrado, para ilustrar a sintaxe, na barra de endereço do seu

navegador e você verá um mapa contendo um trecho da praia de Copacabana, com
seu centro nas coordenadas cartográficas, latitude: 22.975091 e longitude: -43.188762.

7.5.2.1 Parâmetros do URL

O URL que contém o mapa estático gerado pelo Google segue uma sintaxe-padrão,
conforme mostrado anteriormente, e admite uma série de parâmetros que definem
como o mapa deve ser apresentado. Veremos a seguir a descrição e o significado
desses parâmetros.

Todos os URL das imagens de mapas estáticos têm a seguinte sintaxe:

http://maps.google. com/maps/api/staticinap?parâmetros

Os parâmetros são pares nome/valor separados por & e são descritos a seguir,

center

Parâmetro obrigatório caso não haja marcadores (estudados adiante). Seu valor é
o par latitude, longitude do dispositivo do usuário e destina-se a definir a região
terrestre onde se encontra o dispositivo de usuário.

zoom

Parâmetro obrigatório caso não haja marcadores (estudados adiante). Seu valor é um
número inteiro e destina-se a definir o nível de ampliação do mapa. O valor 0 (zero)
define a apresentação do mapa de todo o mundo e o valor 21 ou maior possibilita
a visualização de construções individuais.

size

Parâmetro obrigatório. Seu valor é uma string no formato largura x altura destinada
a definir as dimensões do mapa em pixels.

format

Parâmetro facultativo. Destina-se a definir o formato do arquivo de imagem. Os

valores possíveis para esse parâmetro são: png ou png8, png32, gif, jpg e jpg-baseline.
O valor-padrão é png. O valor png-baseline define uma imagem jpg não progressiva
(indicada para impressão).
Parâmetro facultativo. Destina-se a definir o tipo de mapa a ser renderizado. C :■
valores possíveis para esse parâmetro são:

□ roaclmap - esse é o valor-padrão. Apresenta um mapa de rodovias no forma:

apresentado quando se solicita um mapa no site do Google Maps.

b satellite - apresenta um mapa-imagem captado por satélite.

□ terrain - apresenta um mapa mostrando o relevo da terra com terreno e ve­

getação.

□ hybrid - apresenta um mapa que é uma combinação de imagem captada p>::

satélite e mapa de rodovias.

Parâmetro facultativo. Destina-se a definir se o mapa será ou não servido a dispe -

sitivos móveis. Os valores possíveis para esse parâmetro são true e false e o valor-
padrão é false. A documentação do Google Maps recomenda que, para dispositivo :
móveis dotados de navegadores com recursos robustos, como iPhone e Androic.
não convém definir mobile=true.

Parâmetro facultativo. Destina-se a definir o idioma a ser usado para exibição dc;
marcadores do mapa.

Parâmetro facultativo. Destina-se a definir marcadores a serem usados em locai:

específicos do mapa. Marcadores são aqueles balõezinhos coloridos que existem
nos mapas do Google Maps.

A sintaxe geral para definição de valores para esse parâmetro é mostrada a segui:.

markers=estilos| local - estilos define os estilos para o marcador e local define

localização do marcador no mapa. Uma barra vertical deve separar estilos de local.
Se for usado um marcador com estilização idêntica em diversos locais do mapa. a
sintaxe é: markers=estilos|locall|local2|local3|...

A sintaxe para definir estilos é mostrada a seguir.

Capítulo 7 ■ Geolocalização 227

s i z e : v a l o r ]c o lo r : v a l o r | l a b e i : valo r

b size - define o tamanho do marcador e os valores possíveis são: tiny, mid e

small que definem os tamanhos mínimo, médio e pequeno. O valor-padrão é
normal.

■ color - define a cor do marcador e os valores da cor devem ser especificados

no formato 24 bits (por exemplo, OxffOOOO) ou com uso de uma das seguintes
palavras-chave: black, brown, green, purple, yellow, blue, gray, orange, red, white.

m labei — define um rótulo a ser inserido no marcador. O valor para esse parâ­
metro é um caractere alfanumérico {A-Z, 0 -9 } em caixa-alta. Não é possível
inserir rótulo em marcadores de tamanhos tiny e small. Rótulos são mostra­
dos somente em marcadores do tamanho-padrão e mid. O valor-padrão é um
pequeno círculo na cor preta.

Você não está restrito ao uso dos marcadores-padrão do Google Maps (balõe­
zinhos coloridos) e pode usar marcadores personalizados. Para isso construa seu
marcador nos formatos png, jpg ou gif (o recomendado é png), com tamanho máximo
de 64 x 64 pixel, hospede a imagem em um servidor e use a sintaxe a seguir.

markers=icon: http://caminho para marcador|local

Você pode usar até cinco marcadores personalizados diferentes em cada solici­
tação. Notar que a inserção de marcadores personalizados é ilimitada desde que
respeitado o uso dos cinco.

Marcadores personalizados são renderizados, por padrão, com sombra. Para

retirar a sombra use o parâmetro shadow=false.

path

Parâmetro facultativo. Destina-se a definir um caminho no mapa.

Esse parâmetro não se aplica para o nosso caso e não entraremos em maiores
detalhes sobre ele.

visible

Parâmetro facultativo. Destina-se a definir áreas do mapa que permanecem invisíveis.

Esse parâmetro não se aplica para o nosso caso e não entraremos em maiores
detalhes sobre ele.
228 HTML:

sensor

Parâmetro obrigatório. Destina-se a informar se o aplicativo que está solicitando :

mapa está usando um sensor (por exemplo: GPS) para obter a localização do usuá­
rio. Isso é importante para dispositivos móveis. Os valores possíveis são true e false

O exemplo a seguir, disponível no site do livro, demonstra a requisição de um

mapa estático centrado na posição em que se encontra o dispositivo de usuário.

►css
<style>
#mapa {
width:420px;
height:420px;
display:none;
}
</style>

►JavaScript
<script>
function mostrarMapaQ {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(sucesso,erro);
} else {
alert("Este navegador não suporta a funcionalidade Geolocation");
}
}
function erro(err) {
switch (err.code) {
case 1 :
var mensagemErro = "A permissão para obter a sua posição foi negada.";
break;
case 2 :
var mensagemErro = "Não foi possível estabelecer uma conexão para obter a sua posição,".:
break;
case 3 :
var mensagemErro = "Tempo esgotado.";
break;
default:
var mensagemErro = "Não foi possível obter sua posição.'1;
}
var codigoErro = err.code;
var mensagem = "Ocoreu um erro na determinação da posição: <br>";
mensagem += "Código do erro: " + codigoErro + "<br>";
Capítulo 7 ■ Geolocalização 229

mensagem += "Mensagem: " + mensagemErro;

document.getElementById('msg').innerHTML = mensagem;
}
function sucesso(position) {
var mapa = document.getElementById("mapa");
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var uri = "http://maps.google.com/maps/api/staticmap?center=";
uri += latitude longitude;
uri += "&zoom=15&size=400x400";
uri += "&markers=color:red|"+latitude +","+longitude;
uri += "&sensor=true"
mapa.src = uri;
mapa.style.display = "block";
}
</script>

►HTML
<section>
cpxinput type=button value="Clique para mostrar sua posição no mapa" onclick="mostrarMapa()"x/p>
<p id="msg" class="dest"x/p>
</section>
<section>
<img id="mapa" />
</section>

♦ 1 [c7-mapa-estatico-google.html]

7.5.3 API V3 do Google Maps

Essa API nos permite requisitar mapas dinâmicos. Esses mapas, gerados com as infor­
mações passadas para a API do Google, são, ao contrário dos mapas da API estática,
mapas dinâmicos carregados assincronamente em tempo real e permitem integração
com o usuário com todas as funcionalidades do Google Maps, inclusive street-view

Explicamos a seguir as principais diretrizes para inserção de um mapa dinâmico,

em uma página web, usando Geolocation.

Para receber um mapa dinâmico da API do Google Maps, uma página web pre­
cisa carregar a respectiva API. O carregamento é feito com uso do elemento script
na seção head do documento apontando para um URL no site do Google, como
mostrado a seguir.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true ou false">
</script>
230

No URL deverá obrigatoriamente ser passado o parâmetro sensor com o va'

true ou false. Esse parâmetro informa se a busca pela posição do usuário se faz c.:
ou sem o uso de um sensor (por exemplo: GPS em dispositivos móveis)

Na marcação HTM L da página deverá constar um Container para o mapa. 7.

Container em geral é um elemento div com um id definido. O id servirá de refere z-
cia para que o script consiga identificar o Container para o mapa. As dimensões r
mapa serão iguais à largura e à altura do Container, portanto é indispensável c r .
as dimensões do Container sejam definidas explicitamente com uso de CSS.

Notar que o Container do mapa poderá ser criado diretamente na marcação (

página ou com uso de JavaScript. Cabe ao desenvolvedor decidir sobre a adoção :
um ou outro método de criação do Container.

Tendo comentado a infraestrutura de marcação para inserção do mapa dinâmr:

vejamos a seguir os métodos e propriedades da API do Google.

Devemos inicialmente criar um objeto literal contendo as opções para renc-;-

rização do mapa. A sintaxe e valores possíveis para as propriedades do objeto sã
mostrados no exemplo seguir.
var opcoes = {
zoom: 8,
center: latLong,
mapTypeld: google.maps.MapTypeld.ROADMAP
};

es zoom- define o nível de ampliação do mapa.

■ center - define o centro do mapa nas coordenadas retornadas por Geolocaticz.

as mapTypeld - define o tipo inicial do mapa e os valores possíveis são: ROADMAT.

SATELLITE, TERRAIN, HYBRID. Ver 7.5.2.1 subtítulo maptype.

O valor latLong para a propriedade center é uma variável obtida com a sintax;
mostrada a seguir.
var latLong = new google.maps.LatLng(latitude, longitude)

Sendo latitude e longitude os valores retornados pela Geolocalização.

A API do Google nos fornece um objeto denominado google.maps.Map. A class;

JavaScript que representa o mapa é Map. A definição de um mapa é feita com us
dessa classe. Criamos uma instância dessa classe e, em consequência, um m arr
conforme a sintaxe mostrada a seguir,
google.maps.Map(opcoes)
Capítulo 7 □ Geolocalização 231

Para inserir o mapa em um nó do DOM a sintaxe é:

google.maps.Map(nó, opcoes)

Estes são os passos básicos para inserção de um mapa. API do Google Maps prevê
uma grande quantidade de métodos e propriedades que possibilitam personalizar
seus mapas. Não é do escopo deste livro detalhar aquela API. Se você estiver interes­
sado em aprofundar o assunto, consulte a documentação online no site do Google.

Observe a seguir um exemplo de inserção de mapa em uma página web, dis­

ponível no site do livro. Notar que no exemplo usamos, além dos passos básicos
explicados, a inserção de um balão de diálogo com uma mensagem, apontando
para as coordenadas do dispositivo de usuário retornadas por Geolation. O balão
foi inserido com uso de uma instância de objeto new google. maps.InfoWindowQ da API
do Google (não abordado anteriormente).
<script>
var infowindow = new google.maps.InfoWindowQ;
function mostrarMapaQ {
if (navigatop.geolocation) {
navigator.geolocation.getCurrentPosition(sucesso,erro);
} else {
alert("Este navegador não suporta a funcionalidade Geolocation");

}
}
function erro(err) {
switch (err.code) {
case 1 :
var mensagemErro = "A permissão para obter a sua posição foi negada.";
break;
case 2 :
var mensagemErro = "Não foi possível estabelecer uma conexão para obter a sua posição.";
break;
case 3 :
var mensagemErro = "Tempo esgotado.";
break;
default:
var mensagemErro = "Não foi possível obter sua posição.";

}
var codigoErro = err.code;
var mensagem = "Ocoreu um erro na determinação da posição: <br>";
mensagem += "Código do erro: " + codigoErro + "<br>";
mensagem += "Mensagem: " + mensagemErro;
document.getElementById('msg1) .innerHTML = mensagem;

}
232 HTML 5

function sucesso(position) {
var mapa= document.get£lementById("mapa");
mapa.style.display = "block";
var opcoes = {
zoom: 15,
mapTypeld: google.maps.MapTypeld.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapa"), opcoes);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var local = new google.maps.LatLng(latitude,longitude);
contentstring = "<br>Legal! Achei voce usando a funcionalidade<br> Geolocation do W3C e o Google Maps.”;
map.setCenter(local);
infowindow.setContent(contentstring);
infowindow.setPosition(local);
infowindow.open(map);
}
</script>

# 1 1 [c7-mapa-dinamico-google.html]
 Armazenamento de
/ dados

Neste capítulo, mostraremos as funcionalidades para armazenamento de dados

no lado do cliente. São previstas duas funcionalidades para esse fim: as APIs Web
Storage e Web SQL Database. Os estudos e diretrizes para implementação dessas
funcionalidades foram iniciados pelo W HATW G, o Grupo de Trabalho para a
HTML5. Trata-se de tecnologias da HTM L5 que posteriormente foram desvin­
culadas do W H ATW G e repassadas ao W 3C para desenvolvimento, tornando-se
especificações independentes. Atualmente encontram-se na fase de Rascunho de
Trabalho, sendo, portanto, tecnologias não estáveis e sujeitas a modificações. Web
Storage é suportada pelos navegadores modernos, inclusive o Internet Explorer 8,
e Web SQL Database não é suportada por navegadores Mozilla que implementam
em seu lugar uma tecnologia similar denominada IndexedDB.

8 .1 Web Storage

Web Storage é uma API destinada ao armazenamento de dados, persistentes, em

clientes web, por exemplo: um navegador.

Na verdade, essa funcionalidade foi criada com a finalidade de corrigir a forma

conceituai e precária do funcionamento de cookies de seção.

O conceito de cookie foi criado em 1994 por Lou Montulli da Netscape, que,
naquela época, desenvolvia uma aplicação e-commerce para um cliente. Em resumo,
trata-se de um mecanismo capaz de armazenar pequenas peças de dados gravadas
em um arquivo de texto no computador do usuário. Um cookie é criado e apagado

233
234 HTML;

em uma página web com uso de linguagem de programação no lado do servidc:

ou com JavaScript (no lado do cliente). Criado um cookie, uma requisição ao ser­
vidor por uma página web pode enviar a solicitação do dado armazenado, havenc:
a necessidade de comunicação entre o cliente web e o servidor para verificação c ;
existência e uso do cookie.

Cookies, apesar de serem largamente empregados nos dias atuais, apresentar.:

limitações que vão desde a reduzida capacidade de armazenagem até severas falhar
de segurança. A API Web Storage foi introduzida na HTM L5 com a finalidade ce
corrigir as limitações dos cookies.

As principais limitações com o uso de cookies são:

□ Capacidade de armazenamento de apenas algo em torno de 4Kb para cada

cookie.

□ Armazenamento limitado a, em média, 20 cookies por domínio ou servidc:

e 300 cookies por navegador. Esses valores podem sofrer variações de acorde
com o navegador.

□ Inclusão de cookies em cada requisão HTTP implicando tráfego de dade

desnecessário e consequente aumento de consumo de banda.

□ Restrição ao uso de cookies para armazenamento de dados sensíveis, já que

estarão expostos livremente nas transações entre cliente e servidor.

□ Vulnerabilidade a ataques maliciosos.

A busca por soluções alternativas para o uso de cookies não começou com a
HTML5, A Microsoft introduziu no Internet Explorer 5.5, lançado em julho de 2000,
uma tecnologia denominada DHTM L Behaviors que, em resumo, permite criar
componentes contendo funcionalidades específicas ou comportamentos (behaviors)
reusáveis em uma página web.

Um desses comportamentos criado pela Microsoft denomina-se userData Behavior

que é uma alternativa proprietária a cookies. Essa alternativa, além de armazenar
dados persistentes no lado do cliente, aumentou a capacidade de armazenamento
para 64Kb por cookie e 640 Kb por domínio, além de ter criado mecanismos de
bloqueio a ataques cross-domínio.

Em 2002 a Adobe criou e implementou no Flash 6 uma funcionalidade denomi­

nada LSO - Local Shared Object que é uma alternativa a cookies, também conhecida
como Flash cookies, que permite armazenar até 100Kb de dados persistentes.
Capítulo 8 B Armazenamento de dados 235

Em 2006 foi a vez da D O jO Toolkit implementar a funcionalidade denominada

AMASS - AJAX Massive Storage System, inicialmente desenvolvida para o Flash, uma
forma de armazenar dados no lado do cliente com capacidade de armazenamento de
100Kb aumentada indefinidamente a partir daí com a devida permissão do usuário.

Em 2007 o Google lançou o plugin para navegadores denominado Gears, que,

entre outras funcionalidades, implementou uma API com funcionalidades para in­
corporar, no lado do cliente, um banco de dados SQL com base em SQLite capaz de
armazenar, por domínio e com consentimento do usuário, uma quantidade infinita
de dados, em tabelas SQL para banco de dados.

Cada uma das implementações de alternativas para cookies citadas depende de

tecnologias proprietárias ou de plugins de terceiros para funcionar. Para resolver
esse problema, a HTM L5 resolveu prover uma API-padrão para implementação
nativa nos navegadores sem dependência de softwares de terceiros. Daí surgiram
as duas APIs que estudaremos neste capítulo.

A especificação do W 3C para Web Storage descreve dois mecanismos similares

ao mecanismo EITTP para cookies de sessão destinados a armazenar dados es­
truturados no cliente web. Esses mecanismos foram denominados sessionStorage e
localStorage e serão mostrados a seguir.

Em bora não definida explicitamente nas especificações, a capacidade de ar­

mazenamento local deve ser considerada de até 5Mb, pois é essa a quantidade de
memória normalmente alocada pelos navegadores atuais. O navegador Safari, ao
atingir esse limite de armazenagem, pergunta ao usuário se ele deseja ampliar o
limite. Mas convenhamos que 5M b é um valor muito alto se comparado aos 100Kb
destinados aos cookies.

É um mecanismo que foi projetado com a finalidade de armazenar dados para tran­
sação em um documento HTML, isto é, para cada novo documento HTM L, é criada
uma área de armazenamento de dados independente. Assim, é possível coexistirem
múltiplas transações em diferentes janelas ou abas do navegador ao mesmo tempo,
cada uma com seus conjuntos de dados independentes. Os dados pertencentes a um
documento são excluídos quando o usuário fecha a janela ou a aba do navegador e
não são transmitidos e nem se comunicam com outras janelas ou abas.
236 HTML 5

Esse comportamento resolve uma das limitações impostas pelos cookies: o fato
de existirem em diferentes janelas ou abas ao mesmo tempo e somente serem exclu­
ídos por ocasião do fechamento do navegador, desde que não tenha sido prevista
uma vida útil para eles.

Para observar essa diferença de comportamento na existência de cookies e dados

armazenados com uso de sessionStorage disponibilizamos no site do livro um exemplo
prático, conforme mostrado a seguir. Não se preocupe se a sintaxe para armazenar
dados no objeto sessionStorage, usada no exemplo, parecer confusa e estranha para
você. Adiante estudaremos com detalhes os métodos e propriedades desse objeto.

►JavaScript
<script src="cokieutil.js"x/script> <!-- Objeto CookieUtil -->
<script>
function salvarCookie(name) {
var valor = document.forms['cookieform'].cookievalue.value;
var itemStorage = sessionStorage.setltem('datastorage', valor);
var valorltemStorage = sessionStorage.getltem('datastorage');
if (!valor)
alert('Entre um valor para o cookie e dado.');
else {
CookieUtil.set(name,valor);
var mensagem = 'Um cookie denominado "meuCookie" com o valor ’+valor+'\n';
mensagem += 'e um dado com o nome "datastorage" com o valor 'rvalorltemStorage +'\n';
mensagem += 'foram criados'
alert(mensagem);
}
}
function lerCookie(name) {
var valorltemStorage = sessionStorage.getltem('datastorage');
var mensagem = 'Um cookie denominado "meuCookie" com o valor '+CookieUtil.get(name)+'\n'j
mensagem += 'e um dado com o nome "datastorage" com o valor '+valorItemStorage +'\n';
mensagem += 'foram lidos'
alert(mensagem);
}
function apagarCookie(name) {
CookieUtil.unset(name);
sessionStorage.removeItem('datastorage');
alert('Cookie com o nome "meuCookie" e dado com o nome "datastorage" foram apagados');
}
</script>
Capítulo 8 ■ Armazenamento de dados 237

►HTML
<section>
<form name="cookieform'' action="#"xp>
<label>Escolha um valor para o cookie de nome "meuCookie".
<br>0 mesmo valor será usado para o dado de nome "dataStorage":</labelxbr>
<input name="cookievalue" />
</p>
</form>
<p x a href="#" onclick="salvarCookie('meuCookie')">Armazenar cookie e dado</ax/p>
<p x a href="#" onclick="lerCookie('meuCookie')">Ler cookie e dado</ax/p>
< p x a href="#" onclick="apagarCookie('meuCookie')">Apagar cookie e dado</ax/p>
</section>

v- [c8-cookies-sessionstorage.html]

8.1.2 localStorage
É um mecanismo que foi projetado com a finalidade de armazenar dados que persis­
tem em diferentes janelas ou abas do navegador. Assim, é possível que uma transação
compartilhe em diferentes janelas ou abas do navegador o mesmo conjunto de dados.
Os dados são excluídos quando o usuário fecha o navegador e são transmitidos e se
comunicam com outras janelas ou abas enquanto o navegador estiver aberto.

Esse mecanismo implementa um comportamento semelhante ao dos cookies

que existem em diferentes janelas ou abas ao mesmo tempo e somente são excluídos
por ocasião do fechamento do navegador.

O exemplo a seguir, disponível no site do livro, demonstra o funcionamento desse

mecanismo de armazenamento de dados. Não se preocupe se a sintaxe para armaze­
nar dados no objeto localStorage, usada no exemplo, parecer confusa e estranha para
você. Adiante estudaremos com detalhes os métodos e propriedades desse objeto.

►JavaScript
<script>
function salvarDado(name) {
var valor = document.forms['dadoform'].dadovalue.value;
var itemStorage = localStorage.setItem('dataStorage', valor);
var valorltemStorage = localStorage.getltem('dataStorage');
if (!valor)
alertCEntre um valor para o dado a armazenar.');
else {
mensagem = 'Um dado com o nome "dataStorage" com o valor '+valor!temStorage +'\n';
238 HTML

mensagem += 'foi armazenado’;

alert(mensagem);
}
}
function lerDado(name) {
var valorltemStorage = localStorage.getltem('dataStorage');
mensagem = 'Um dado com o nome "datastorage" com o valor '+valorItemStorage +'\n';
mensagem += 'foi lido';
alert(mensagem);
}
function apagarDado(name) {
localStorage.removeItem('datastorage’);
alert('Dado com o nome "datastorage" foi apagado');
}

> HTML
<section>
<form name="dadoform" actíon="#">
<pxlabel>Escolha um valor para o dado "meuDado":</label>
<brxinput name="dadovalue" /></p>
</form>
< p x a href="#" onClicl<="salvarDado('meuDado')">Armazenar dado</ax/p>
< p x a href="#" onClick="lerDado('meuDado')">Ler dado</ax/p>
< p x a href="#" onClick="apagarDado('meuDado')">Apagar dado</ax/p>
</section>

<,>j [c8-localstorage.htm!]

Para entender a diferença de comportamento entre sessionStorage e localStorage

a especificação do W 3C nos fornece dois fragmentos de script que adaptamos e
transcrevemos a seguir. Notar que a finalidade dos exemplos mostrados é apenas
ilustrar e fazer entender o funcionamento de cada um dos mecanismos. Para tornar
o script funcional, será necessário completá-lo.

!> JavaScript
<script>
<label>
dnput type="checkbox" onchange="sessionStorage.seguroViagem = checked")
Quero fazer o seguro viagem
</label>

Esse exemplo mostra um controle, do tipo checkbox, de um formulário para a

compra de passagem contido em uma página web. Se o usuário desejar comprar
Capítulo 8 a Armazenamento de dados 239

com a passagem o seguro-viagem, deverá marcar o checkbox. Usou-se o evento onchange

para atrelar ao checkbox o armazenamento de um dado denominado seguroViagem com
o valor checked.

Se o usuário abrir outras janelas na mesma transação para a compra da passagem,

nas quais no documento renderizado tenha sido inserido uma verificação do tipo:
if (session.seguroViagem) {...}

não correrá o risco de inadvertidamente contratar o seguro-viagem duas ou

mais vezes, pois cada uma das janelas ou abas quando for aberta criará seu próprio
objeto sessionStorage vazio.

O outro fragmento de script constante da especificação do W 3C demonstra o

uso de localStorage para criar um contador do número de vezes que um usuário
carregou uma das páginas de um site.

t> JavaScript
<p>Você visualizou esta páginacspan id="count"x/span> vezes.</p>
<script>
if (llocalStorage.pageLoadCount)
localStorage.pageLoadCount = 0;
localStorage.pageLoadCount += 1;
document.getElementByldf'count').textContent = localStorage.pageLoadCount;
</script>

Esse exemplo inicialm ente verifica a existência de um dado com o nome

pageLoadCount armazenado no objeto localStorage do navegador do usuário. Se não
houver, o dado atribui a ele o valor zero e soma uma unidade. A seguir, insere esse
valor para ser renderizado no contador. A partir daí, lê o dado armazenado e incre­
menta uma unidade.

Os objetos sessionStorage e localStorage admitem os métodos setltem(), getltem(),

remov eltemQ, clear() e key() destinados a gravar um par nome/valor para um dado,
recuperar o valor de um dado, remover o valor de um dado, remover todos os dados
gravados anteriormente e recuperar o nome de um dado respectivamente. Contêm,
também, a propriedade length. Vamos estudar a seguir cada um desses métodos e
propriedade.

set!íem('nome' 'valor'}

Esse método destina-se a criar um par nome/valor e armazená-lo na área de arma­

zenamento do navegador. A sintaxe para esse método é mostrada a seguir.
240 HTML 5

sessionStorage.setltem('site', 'http://maujor.com');

e
localStorage.setltem('site', 'http://maujor.com');

Esse método admite uma sintaxe alternativa que é mostrada a seguir.

sessionStorage.site = 'http://maujor.com';

e
localStorage.site = 'http://maujor.com';

getltem('nome')

Esse método destina-se a recuperar o valor de um dado designado nome. A sintaxe

para esse método é mostrada a seguir.
sessionStorage.getltem('site'); // retorna http://maujor.com

e
localStorage.getltem('site'); // retorna http://maujor.com

Esse método admite uma sintaxe alternativa que é mostrada a seguir.

sessionStorage.site; // retorna http://maujor.com

e
localStorage. site; // retorna http://maujor.com

removeltem('nome')

Esse método destina-se a apagar da área de armazenamento o par nome/valor de

um dado designado nome. A sintaxe para esse método é mostrada a seguir.
sessionStorage.removeltem('site'); // remove o par site/http://maujor.com

ou
localStorage.removeltem('site'); // remove o par site/http://maujor.com

dear!)

Esse método não requer parâmetros e se destina a apagar todo o conteúdo da área
de armazenamento, isto é, esvazia o objeto sessionStorage ou localStorage. A sintaxe
para esse método é mostrada a seguir.
sessionStorage.clearQ; // esvazia o objeto sessionStorage

ou
localStorage.clear(); // esvazia o objeto localStorage
Capítulo 8 ■ Armazenamento de dados 241

key(n)

Esse método destina-se a inspecionar o nome do dado armazenado na posição n.

A sintaxe para esse método é mostrada a seguir.
sessionStorage.key(3); // retorna o nome do quarto dado armazenado

ou
localStorage.key(0); // retorna o nome do primeiro dado armazenado

Podemos usar uma sintaxe alternativa para os métodos que admitem o parâmetro
nome, usando o retorno desse método como parâmetro. Observe a seguir a sintaxe
alternativa para o método get().
sessionStorage.getItem(sessionStorage.key(2)); // retorna o valor do terceiro dado armazenado

íength

Essa propriedade destina-se a inspecionar a quantidade de dados (pares nome/va-

lor) armazenados nos objetos sessionStorage e localStorage. Esses objetos podem ser
tratados como um array associativo. A sintaxe para esse método é mostrada a seguir.
sessionStorage.Íength; // retorna um número maior ou igual a zero

ou
localStorage.Íength; // retorna um número maior ou igual a zero

8.1.3 Armazenagem com JSON

Por padrão, o tipo de dado armazenado localmente é string. Esse comportamento,
se não for considerado, pode trazer resultados inesperados, por exemplo, quando
armazenamos números e com eles realizamos operações matemáticas. O exemplo
a seguir, disponível no site do livro, esclarece esse comportamento.

► JavaScript

<script>
window.onload = functionQ {
var campos = document.getElementsByTagName('input');
var limpar = document.getElementByld('limpar');
limpar.onclick = functionQ {
campos[0].value = 'clique';
camposjl].value = 'clique';
}
}
sessionStorage.um = 4;
242 HTML 5

sessionStorage.dois = 3;
</script>

►HTML
<section>
<p>Armazenamento sem tratamento (como string) - Operação de concatenação.<br>
4 + 3 = <input onclick="this.value = sessionStorage.getItem('um')
+ sessionStorage.getItem('dois');" value="clique"x/p>
<p>Armazenamento com <code>parselnt()</code> (como número) - Operação de adição.<br>
4 + 3 = <input onclick="this.value = parseInt(sessionStorage.getItem('um'))
+ parseInt(sessionStorage.getItem('dois'));’' value="clique"x/p>
cbutton type="button" id="limpar''>Limpar</button>
</section>

õSi [c8-nurneros.html]

Nesse exemplo armazenamos dois números com uso do objeto sessionStorage.

Os dois números são armazenados como dados do tipo string. Assim, se usarm c;
o operador + para os dois dados, estaremos concatenando duas strings. Para reali­
zarmos a operação matemática soma, devemos transformar as strings em número;
com uso do método parse lntQ.

Assim, o armazenamento de dados localmente transforma o tipo de objeto par;

string. Esse comportamento acaba trazendo inconvenientes que é o fato da necessi­
dade de transformação do tipo de objeto após ter sido recuperado da armazenagem
local. Vimos isso na prática no exemplo anterior, no qual ocorreu a armazenagem ac
objeto Number como String e a consequente necessidade do uso do método parselnt,
antes de realizar a operação adição. Uma maneira mais imediata de resolver o pro­
blema criado com a armazenagem em forma de string é usar a tecnologia JSON.

JSO N permite que se use texto para representar objetos JavaScript e, em con­
sequência, é possível armazenar localmente objetos e recuperá-los pôsteriormerr:;
com uso dos métodos ISON.stringifyQ e DSON. parseQ. A sintaxe para armazenar
recuperar objetos com JSO N é mostrada a seguir.
sessionStorage.setltem('ObjetoJson', 3 S 0 N .síringify(ObjetoJson)); // armazena
JSON.parse(sessionStorage.getItern(1ObjetoJson’)); // recupera

O exemplo a seguir é idêntico ao exemplo anterior, mas agora estamos u san c..
JSO N para recuperar o objeto Number armazenado como string.
Capítulo 8 ■ Armazenamento de dados 243

►JavaScript
<script>
window.onload = functionQ {
var campos = document.getElementsByTagName('input');
van limpar = document.getElementßyld('limpar');

sessionStorage.setItem('a', 4);
sessionStorage.setltem('b', 3);
a = sessionStorage.getltem('a');
b = sessionStorage.getltem('b');
campos[0].onclick = function() {
this.value = a+b;
}

var numeros = {
a: 4,
b: 3
}
sessionStorage.setItem('numeros', JSON.stringify(numeros));
JSQN.parse(sessionStorage.getltem('numeros' ));
campos[l].onclick = functionQ {
this.value = numeros.a + numeros.b;
}

limpar.onclick = functionQ {
campos[0].value = 'clique';
campos f1].value = 'clique';
}
}
</script>

> HTML
<section>
<p>Armazenar com sessionStorage simples (operação de concatenação):<br>
4 + 3 = <input value="clique"x/p>
<p>Armazenar com sessionStorage e 3S0N (operação de adição):<br>
4 + 3 = <input value=''clique"x/p>
cbutton type="button" id="limpar">Limpar</button>
</section>

[c8-numeros-jsoii.html]
244 H TM L:

8.1.4 Evento storage

O evento storage ocorre sempre que h á uma alteração na área de armazenamento
de dados definida pelo método localStorage.

As propriedades do evento storage são.

m key - é uma string com o nome do dado que foi modificado, adicionado ou
removido.

■ oldValue —o valor de um dado que tenha sido modificado ou null se o dadc

foi adicionado pela primeira vez.

■ newValue - o valor adicionado para um dado ou null se o valor foi removido.

m storageArea - retorna o objeto localStorage.

■ uri - O endereço da página na qual se encontra o método que provocou e

evento.

Não é possível cancelar o evento storage. Uma vez iniciada uma função callback
para o evento, não há como interrompê-la. O evento não se propaga pelo efeito bolha.

Convém ressaltar, com ênfase, que, ao contrário da maioria dos eventos JavaS­
cript, o evento storage não é disparado na mesma janela ou aba do navegador onde
se encontra o disparador do evento, e sim em outras janelas ou abas abertas que
pertençam ao mesmo domínio. Esse comportamento pode parecer muito estranho,
mas é assim que foi implementado, embora a especificação não deixe claro que
assim deve ser.

Então, quando alteramos a área de armazenamento localStorage com uso dos

métodos se t l t e m Q , removeItem() ou clear() disparamos um evento tipo storage em
todas as outras janelas ou abas abertas no mesmo domínio.

Quando chamamos o método setltem() a propriedade key retorna uma string

com o nome do dado que acaba de ser armazenado. A propriedade newValue retorna
o valor do dado que acaba de ser armazenado. A propriedade oldValue retorna o
valor antigo do nome que foi armazenado, se houver um valor para o nome, caso
contrário retorna null.

Quando chamamos o método removeItem() a propriedade key retorna uma string

com o nome do dado que acaba de ser removido. A propriedade oldValue retorna o
valor do dado que acaba de ser removido. A propriedade newValue retorna nu ll.
Capítulo 8 ■ Armazenamento de dados 245

Quando chamamos o método c l e a r Q as propriedades key, oldValue e newValue

retornam null.

O método get It em() não dispara o evento, pois esse método não altera a área de
armazenamento.

O exemplo a seguir, disponível no site do livro, demonstra o funcionamento do

evento storage para cada um dos métodos citados, inspecionando as propriedades
do evento.

►JavaScript
<script>
function msgEvento(e) {
if (!e) {e = window.event;}
var limpar = document.getElementByldplimpar');
var containerMensagem = document.getElementById('mensagem');

var mensagem = 'Disparado o evento: '+ e.type +'<br>';

mensagem += 'Nome do dado modificado: '+ e.key +'<br>';
mensagem += 'Valor antigo o dado: '+ e.oldValue +'<br>';
mensagem += 'Valor atual do dado modificado: '+ e.newValue +'<br>';
mensagem += 'Área de armazenamento: '+ e.storageArea +'<br>';
mensagem += 'URL das modificações: '+ e.url;
containerMensagem.innerHTML = mensagem;
limpar.onclick = function() {
containerMensagem. innerHTML = " ;
}
}
function salvarDado(name) {
var valor = document.forms['dadoform'].dadovalue.value;
if (Ivalor)
alertCEntre um valor para o dado a armazenar.');
else {
localStorage.setltem(name, valor);
}
}
function apagarDado(name) {
localStorage.removeltem(name);
}
function clearDadosQ {
localStorage.clear();
}
246
HTML 5

if (window.addEventListener) {
window.addEventListener('storage', msgEvento, false);
} else {
window.attachEvent('onstorage', msgEvento);
}

► HTML
<form name="dadoform" action="#">
<pxlabel>Escolha um valor para o dado "meuDado" :</labelxbr> <input name="dadovalue"x/p>
</forms
< p x a href="#" onClick="salvarOado('meuDado,),,>Arniazenar - setltem()</ax/p>
< p x a href="#" onClick="apagarDado('meuDado')">Apagan dado - removeItem()</ax/p>
< p x a href="#" onClick="clearDados()">Apagar todos os dados - clear()</ax/p>
<p id="mensagem"x/p>
<button type="button" id="limpar">Limpar</button>

■til [c8-evento-storage.html]

Banco de dados é outra forma de armazenamento de dados no lado do cliente

prevista originariamente nas especificações da HTM L5 e posteriormente entregue
à responsabilidade do W 3C.

A primeira especificação para essa modalidade de armazenamento denominou-

se Web SQL Storage, que foi implementada nos principais navegadores modernos,
exceto no Firefox, pois a fundação Mozilla entendeu que a tecnologia não era segura
e inconsistente o suficiente para torná-la imprópria a ser empregada em uma especi­
ficação. Sugeriu então ao W 3C a adoção de banco de dados com base em IndexedDE.

O W 3C reconheceu a argumentação da Mozilla e, em meados de 2010, abando­

nou a Web SQL Storage e adotou a especificação denominada Indexed Database
API, que atualmente se encontra em fase inicial de desenvolvimento e suportada
de forma proprietária pelo Firefox4.

A criação de uma tecnologia usando banco de dados para armazenagem nc

lado do cliente visou a fornecer ao desenvolvedor um mecanismo com capacidace
de armazenamento maior que os 5M b previstos para sessionStorage e localStorage.

Não iremos aprofundar o assunto, pois a especificação, como dito, ainda se en­
contra em fase inicial e instável, contudo mostraremos os principais fundamentei
do armazenamento com uso da API IndexedDB. Os conceitos e códigos que ilustram
Capítulo 8 s Armazenamento de dados 247

as transações com o banco de dados, mostrados a seguir, baseiam-se e foram adap­

tados do documento denominado IndexedDB primer hospedado no MDN Doc
Center da fundação Mozilla.

n AAPI prevê requisições tanto síncronas quanto assíncronas. As síncronas são

previstas para uso em conjunto com a tecnologia Web Works e as assíncronas
para aplicações Web em geral.

a O modelo do banco de dados é o transational significando basicamente que o

sistema de gerenciamento do banco é capaz de tratar as transações de forma
atômica e independente, além de preservar a consistência do banco mesmo
em caso de erros ou falhas.

□ O armazenamento de dados baseia-se no princípio chave/valor. Os valores

podem ser tanto simples quanto complexos objetos e a chave é uma proprie­
dade do objeto.

□ É prevista a possibilidade de requisições durante todo o processo de transa­

ção com o banco de dados. Por exemplo: estão disponíveis as propriedades
readyState, onsuccess, onerror, result, errorCode e os métodos addEventListene rQ e
removeEventlistener().

ca Eventos do DOM podem ser usados para notificações do andamento das

transações. Por exemplo: estão disponíveis os eventos success e error.

□ A criação de bancos de dados e o consequente armazenamento de dados

foram projetados na API para estarem disponíveis offline.

Os principais passos para uma transação completa com um banco de dados

IndexedDB são mostrados a seguir.

o Iniciar uma transação.

□ Fazer a requisição para realizar uma operação com o banco, por exemplo,
adicionar ou requisitar um dado armazenado.

□ Aguardar a finalização e resultado da requisição monitorando o apropriado

evento do DOM.

□ Manipular o resultado da requisição.

A sintaxe para iniciar uma transação é mostrada a seguir.

var request = window.IndexedDB.open('Catalogo', 'Catalogo de email e telefone');
248 HTML 5

O objeto indexedDb admite um método denominado open() que, por sua vez, ac-
mite dois parâmetros. Os parâmetros são: o nome do banco de dados e uma breve
descrição do banco. Esse método destina-se tanto a criar um banco novo quanto ;
abrir um banco existente. Em nosso exemplo, o banco criado foi atribuído àvariáve.
request que passa a representar o banco.

Convém ressaltar que bancos de dados locais são criados e atrelados a domínios.
Assim, poderemos ter dois bancos de dados com o mesmo nome e completamente
independentes desde que criados para diferentes domínios, ainda que páginas dos
dois domínios estejam abertas em diferentes janelas ou abas do mesmo navegador.

Uma vez que as especificações para indexedDB ainda estão em fase inicial, a fun­
dação Mozilla implementou as funcionalidades para esse banco de dados usandc
o prefixo moz que adotaremos nos exemplos a seguir com a finalidade de ilustrar c
funcionamento da API. Assim, nosso código para a criação de um banco de dados
será escrito com a sintaxe mostrada a seguir.

Os exemplos disponíveis no site do livro deverão ser visualizados no navegador

Firefox4+.

window.indexedDB = window.mozIndexedDB;
var request = window.indexedDB.open('Catalogo', 'Catalogo de email e telefone');

Uma vez aberto ou criado o banco de dados, o próximo passo será verificar se a
requisição foi bem-sucedida ou falhou, como mostrado a seguir.

►JavaScript
<script>
window.onload = function!) {
window.indexedDB = window.mozIndexedDB;
var mensagem = document.getElementById('mensagem');
var limpar = document.getElementByld('limpar');
var request = window. indexedDB. open ('Catalogo', 'Catalogo endereços de email e telefone');
request.onsuccess = function(event) {
mensagem.innerHTMl = 'Banco de dados "Catalogo" criado/aberto com sucesso.';
limpar.style.display = 'block';
}
request.onerror = function(event) {
mensagem.innerHTML = 'Falha ao criar/abrir banco de dados.';
limpar.style.display = 'block';
}
Capítulo 8 ■ Armazenamento de dados 249

limpar.onclick = functionQ {
mensagem.innerHTML = " ;
limpar.style.display = 'none';
}
}
</script>

►HTML
<section>
<p id=,,mensagem”x /p>
<button type="button'' id="limpar" style="display:none;'’>Remover mensagem</button>
</section>

[c8-indexedDB-exl .html]

Nesse exemplo, disponível no site do livro, você poderá visualizar a criação/

abertura de um banco de dados local, bem como a chamada de funções callback
para sucesso e falha. Notar que o navegador apresenta uma mensagem solicitando
a permissão do usuário para criar o banco de dados.

Para melhor entender o funcionamento do script, sugiro a seguinte sequência

de ações no arquivo exemplo.

Carregue o arquivo e na mensagem do Firefox solicitando permissão para arma­

zenar dados abra o menu Permitir e escolha Nunca para este site, como mostrado
na figura 8.1 a seguir.

B B g g ^ m ^ c g g ^ :z c : : .....- •siSlis!
Arquivo Ecitc- Ex.o r hstènco Fsvoriiös Serrsmentas Alyds

1*3-

E s t e s :te O iw o h m v s.ió c c lh o s t: e s t á s o t e s n d a o
s r m a w r « m e n t o cie a a t t e n o s e u c o m p u t a d o ' p a r s
liso offi.ne.

Index^owD-^opei g ; - :f B iffi-a p a r a e g g s ite J j

JavaScript

Figura 8.1 —Permissão para armazenar dados no Firefox.

250 HTML £

Carregue o arquivo e na mensagem do Firefox solicitando permissão para armaze­

nar dados abra o menu Permitir e escolha Nunca para este site, como mostrado na figura 8 .2 ,

Com essa ação, você provocará um erro na criação do banco de dados e a funçâ:
callback para o evento onerror será executada mostrando uma mensagem de erro ac
usuário, conforme consta no código mostrado.

Clique o botão “Remover mensagem” e a seguir recarregue a página (Círl+F5).

mensagem de erro reaparece e você não mais conseguirá criar o banco de dados,
recarregando a página ou mesmo em outra janela do navegador, pois o Firefox
bloqueou qualquer tentativa de armazenamento de dados vindo do domínio que
contém o arquivo. Para desbloquear o armazenamento, abra o menu do navegador
Ferramentas > Propriedades da página > Permissões. Na janela que se abre, marque a caixa Perguntai
em Preservar armazenamento offline, conforme mostrado na figura 8.2.

-ira x i:

2e-r - --
pêCc liV'Oll
Carregar tmagetss
Usar o pB" ? :

A b rir ja n e la s oopup
W Usar o padrão C rurrar■ C fifuqpea;"
f c o o k te s
W' Usar o padrão r ■ ■■■
: U”Unquenr
Instalar e x te n s õ e s o o t e m a s
W. Usar o padrão ("■ & 5.raraex.'
Compa rttlhar localização
C 'v '.fir í?

c
W Perguntar

Preservar armazenamento offline

Perguntar Esta pagina esta. usar* Ç e g Storage j í* Permitir f * Bloquear

Figura 8.2 - Ajuste de permissões para armazenar dados no Firefox.

Recarregue a página e repita as operações descritas anteriormente, agora per­

mitindo a armazenagem. Nesse caso, a função callback para o evento onsuccess ser a
executada mostrando uma mensagem de sucesso na criação do banco de dados
conforme consta no código mostrado.
Capítulo 8 a Armazenamento de dados 251

Convém notar que, se você estiver navegando no modo “Navegação privada”, não
será permitida a armazenagem de dados localmente em nenhuma hipótese, mesmo
que você habilite a permissão no submenu Permissões, como mostrado na figura 8.2.
Para iniciar a navegação privada no Firefox, tecle Ctrl+Shift+P.

Não iremos prosseguir com esse assunto, pois as especificações do W 3C para

implementação da funcionalidade IndexedDB API ainda estão no início. O propó­
sito do exemplo mostrado foi tão somente mostrar que a implementação de banco
de dados local é uma realidade em andamento a ser implementada no futuro que
tal como outras funcionalidades da HTM L5 facilitará e muito o desenvolvimento
de aplicações web ágeis e seguras. Se você estiver interessado em aprofundar seus
conhecimentos em relação à implementação proprietária da Mozilla, que certa­
mente influenciará a especificação final do W 3C , consulte https://developer.mozilla.
org/en/IndexedDB/IndexedDB_primer.

8 2 Verificando suporte
Nos exemplos mostrados neste capítulo não usamos a verificação de suporte nos
navegadores para as funcionalidades descritas. Como vimos em capítulos anteriores,
o uso da biblioteca Modernizr fornece uma maneira simples de se processar essa veri­
ficação. A seguir, mostramos a sintaxe para a verificação com uso da biblioteca citada.
if (ÍModennizr.sessionstorage) {
// código alternativo para sessionstorage
}
if (iModernizr.localstorage) {
// código alternativo para localStorage
}
if (IModernizr.indexeddb) {
// código alternativo para indexedDB
}
 ■ M m -.' s

APIs para comunicação

Neste capítulo, mostraremos as funcionalidades das APIs para comunicação pre­

vistas nas especificações do W 3C. Denominamos APIs para comunicação aquelas
previstas nas seguintes especificações: HTM L5 Web Messaging, API Web Sockets
e API Web Workers.

9.1 Web Messaging

Web Messaging é uma API da HTM L5 destinada a definir funcionalidades que
possibilitam a comunicação entre aplicações web hospedadas em diferentes origens.
Com uso das técnicas existentes, esse tipo de comunicação não é possível por razões
de segurança e privacidade. Trata-se da chamada “política da mesma origem”.

Basicamente, a política da mesma origem baseia-se em um conceito de segurança

que não permite que programação em linguagem client-side proveniente de uma
origem (por exemplo: origem B) interfira na programação, estrutura, apresentação
ou qualquer outra característica do documento no qual estão hospedados e que
pertencem a uma outra origem (por exemplo: origem A). Em resumo, a um script
proveniente de uma origem não é permitido acessar o DOM de um documento com
origem diferente daquela do script.

Se a sua página web hospeda um widget de terceiro, por exemplo, um bloco de

conteúdo do Adsense, ao script que insere o bloco é vedado acesso a qualquer parte
da página, exceto, é claro, a própria inserção do widget.

Um docum ento pode ser proveniente de três tipos distintos de origem:

PROTOCOL, HOST e PORT.

252
Capítulo 9 ■ APIs para comunicação 253

A tabela a seguir, extraída do MDN Doc Center da fundação Mozilla e devida­

mente adaptada, esclarece a política da mesma origem. Suponha que a origem seja
o U R L http://maujor.com/tutorial/widget-css.php

URL M esm a origem ? R a zã o

http://maujor.com/dicas/centrar.php Sim -
http://maujor.com/ Sim -
https://maujor.com/area-restrita.php Não protocolo diferente
http://maujor.com:Sl/w3c/css2.php Não porta diferente
http://fw.maujor.com/bezier.php Não host diferente

A A PI, ao mesmo tempo que oferece a possibilidade de transpor as restrições

impostas pela política da mesma origem, também fornece mecanismos destinados a
bloquear acessos maliciosos provenientes de diferentes origens, ou seja, os “ataques
cross-site”.

window.postMessage(mensagem, destino, Lporfos])

O método window.postMessage() destina-se a criar uma mensagem a ser enviada para

um objeto window em uma origem diferente daquela que envia mensagem. Por padrão,
o tipo de mensagem enviada é uma string. Contudo, podemos enviar um objeto
com uso dos métodos DSON. st r i n g i f y O e U S O N . p a r s e Q tal como mostramos em 8.13
para o armazenamento local.

Esse método admite três parâmetros: dois obrigatórios e um opcional. O parâme­

tro mensagem é uma string contendo a mensagem a ser passada, o parâmetro destino
define o endereço para o qual a mensagem está sendo enviada e o parâmetro portas,
que é opcional, define um array de portas válidas para o destino da mensagem.

O parâmetro destino pode ser um U RL absoluto definindo um único endereço

de destino da mensagem, um caractere curinga (*) definindo qualquer destino ou
um caractere barra (/) que restringe o destino da mensagem à sua origem, isto é,
adota a política da mesma origem.

Para recebimento da mensagem, a API prevê o evento message a ser disparado no

documento destino da mensagem. Esse evento, quando disparado, chama uma fun­
ção callback (manipuladora do evento), conforme sintaxe geral mostrada a seguir.
<script>
if (window.addEventListener) {
window.addEventlistener('message', receberMensagem, false);
} else {
window.attachEvent("onmessage", receberMensagem);
254 HTML 5

};
function receberMensagem(e) {
// faz alguma coisa com a mensagem recebida
}
</script>

message

Conforme mostrado, o documento destino monitora o evento message que, ao ser

disparado, chama a função receberMensagem(e) destinada a processar a mensagem
recebida.

Essa função recebe um parâmetro que retorna um objeto-evento com as seguintes

propriedades:

■ e .d a t a - retorna o texto da mensagem.

n e.origin - retorna a origem da mensagem.

a e.lastEventld - retorna a string identificadora do último evento.

B e .source - retorna WindowProxy do destino da mensagem.

b e.ports - retorna o array das portas enviadas com a mensagem.

O exemplo a seguir, disponível no site do livro, demonstra o funcionamento da

API.

Suponha que um documento A, hospedado em http://livrohtml5.coin.br, contém

um iframe que, por sua vez, contém um documento B, hospedado em http://maujor.
com. O envio de uma mensagem de A para B se faz com um script usando o método
w indo w.postMess ageQ inserido em A, definindo a mensagem e o destino. Para que c
documento B receba a mensagem de A, deverá conter um script que registre um
manipulador do evento denominado message definido na API.

Os Scripts e marcações nos dois documentos são mostrados a seguir.

No documento A:

►JavaScript
<script>
window.onload = function() {
var objetolframe = document.getElementsByTagName('iframe')[0];
var btnEnviar = docutnent.getElementsByTagName('button')[0]j
Capítulo 9 a APIs para comunicação 255

btnEnviar.onclick = functionQ {
var textoMensagem = document.getElementsByTagName('input')[0].value;
if (textoMensagem == " ) {
alert('Digite a mensagem a ser enviada');
} else {
objetoIframe.contentWindow.postMessage(textoMensagem, 'http://maujor.com');
}
}
}
</scripts

► HTML
<section>
<pxlabel>Mensagem: dnput type=textx/label>
cbutton type=button>Enviar mensagem</buttonx/p>
ciframe src="http ://maujor.com/messaging.html"></ifrarae>
</section>

No documento B:

► JavaScript
<script>
if (window.addEventListener) {
window.addEventListener('message'j receberMensagem, false);
} else {
window.attachEvent("onmessage", receberMensagem);
};
function receberMensagem(e) {
var mensagem;
var containerMensagem = document.getElementByld('recebe-mensagem');
if (e.origin == 'http://livrohtml5.com.br') {
mensagem = 'Recebida a seguinte mensagem: <br>';
mensagem += 'Texto: 1 + e.data + '<br>1;
mensagem += 'Origem: ' + e.origin;
containerMensagem.innerHTML = mensagem;
} else {
containerMensagem.innerHTML = 'Tentativa de envio de mensagem de uma origem não autorizada';
}
}

► HTML
<p id="recebe-mensagem "x/p>

[c9-messaging.html]
256 HTiV. :

O envio de uma mensagem com uso de Web Messaging, como mostrado o

exemplo, faz-se com a transformação da mensagem em string, por padrão. Se v.;:.
pretende enviar dados a serem manipulados individualmente quando chegarem :
destino, esse comportamento de transformação em string inviabilizará seu proje:
pois enviando os dados encadeados em uma única string, não conseguirá separá-..:
e nem mesmo distingui-los no destino.

Felizmente a tecnologia JSO N oferece a funcionalidade de transformar um obie:

em string com uso do método JSON.stringify e posteriormente recuperar o obie:
com uso do método DSON.parseQ. Usando esses dois métodos, viabilizamos o enm
de dados de qualquer natureza com uso de Web Messaging.

O exemplo a seguir, disponível no site do livro, permite que você visualize

envio de dados com uso de JSON.

No documento que envia a mensagem:

►JavaScript
<script>
window.onload = functionQ {
var objetolfratne,btnEnviar,nomeUsuario,horaMensagem,textoMensagem,dadosEnviar,stringEnvia-
objetolframe = document.getElementsByT agName(1iframe1)[0]J
btnEnviar = document.getElementsByIagName(1button')[0];
btnEnviar.onclick = functionQ {
now = new DateQ;
hour = now.getHours();
minute = now.getMinutes();
second = now.getSecondsQ;

horaMensagem = hour +':'+minute+':'+second+'h';

nomeUsuario = document.getElementsByTagName('input')[0].value;
textoMensagem = document.getElementsByTagName{'textarea’)[0].value;
if (textoMensagem == 11 |j nomeUsuario == " ) {
alert('0s campos nome e mensagem devem ser preenchidos');
} else {
dadosEnviar = {
nome: nomeUsuario,
texto: textoMensagem,
hora: horaMensagem

}
stringEnviar = 3 S 0 N . stringify(dadosEnviar);
Capítulo 9 ■ APIs para comunicação 257

objetolf rame. contentWindow. postMessage(stringEnviar, 'http ://livrohtmlS.com.br');

}
}
}
</script>

► HTM L

<section>
<pxlabel>Seu nomexbrxinput type=textx/labelx/p>
<pxlabel>Mensagem:<brxtextareax/textareax/labelx/p>
cpxbutton type=button>Enviar mensagem</buttonx/p>
<iframe src="json.htmrix/iframe>
</section>

No documento que recebe a mensagem (inserido em um iframe):

► JavaScript

<script>
if (window.addEventListener) {
window.addEventListener('message', receberMensagem, false);
} else {
window.attachEvent("onmessage", receberMensagem);
};
function receberMensagem(e) {
var containertlensagem, msgRecebida, nomeRecebido, textoRecebido, para, span, conteudoSpan, conteudoPara;
containerMensagem = document.getElementByld('recebe-mensagem');
if (e.origin == 'http://livrohtml5.com.br') {
osgRecebida = DSON.parse(e.data);
nomeRecebido = msgRecebida.nome;
textoRecebido = msgRecebida. texto;
horaRecebida = msgRecebida. bora;
para = document.createElement('p');
span = document.createElement('span');

conteudoSpan = document.createTextNode(nomeRecebido);
conteudoPara = document.createTextNode(' ('+horaRecebida+') '+ textoRecebido);

span.appendChild(conteudoSpan);

para.appendChild(span);
para.appendChild(conteudoPara );
containerMensagem.appendChild(para);
} else {
 containerMensagem.innerHTML = 'Tentativa de envio de mensagem de uma origem não autorizada
}
}
</script>

í> HTML
<section>
<div id="recebe-mensagem"x/div>
</section>

[c9-json.html]

Notar que enviamos três dados: nome, mensagem e hora. A hora poderia te:
sido aferida no documento de destino; contudo, optamos pela tomada da hora na
origem apenas para ilustrar o envio de mais um dado.

Web Socket é uma API originariamente incluída na especificação para a H T M L:

com o nome de TCP Connection e posteriormente desvinculada da HTM L5 e en­
tregue para desenvolvimento pelo W 3C. Destina-se a definir um protocolo e suas
funcionalidades que possibilitem a comunicação de um cliente web com um servido:
remoto. A API criou os protocolos Transmission Control Protocol (TCP) para socke:
denominados ws: e wss: destinados a estabelecer comunicação com o servidor corn
uso de conexão normal e segura, a exemplo dos protocolos http: e https:.

Em linguagem de computadores socket é um ponto abstrato localizado nas

terminações de um caminho de comunicação bidirecional estabelecido por um
protocolo de transmissão.

Uma vez criada a conexão, ela permanece aberta possibilitando comunicaçãc

permanente entre o cliente e o servidor. A conexão somente será fechada por deter­
minação explícita do desenvolvedor. Para criar um socket de comunicação, a sintaxe
geral é mostrada a seguir.
var wsConn = new WebSocket('ws://jogo.exemplo.com:12010/atualizacoes');

Uma conexão com socket é full-duplex, ou seja, permite comunicação simultânea

nas duas direções: cliente servidor e servidor cliente. Em uma conexão convencionai,
também conhecida como half-duplex, com uso do protocolo http, por exemplo, cada
solicitação do cliente ao servidor e respectiva resposta é independente e implica o
envio e tráfego de cabeçalhos H TTP. Para uma aplicação que necessite consultar o
servidor repetidamente para verificar atualizações em tempo real, o tráfego envolvido
Capítulo 9 ■ APIs para comunicação 259

na comunicação pode requerer um alto consumo de banda com respectivo aumento

da taxa de transferência. É o caso, por exemplo, de transmissões de eventos ao vivo,
de jogos multiplayers e de salas de bate-papo. A API Web Socket reduz significati­
vamente esse consumo de banda e consequente taxa de transferência.

Outra vantagem da API é a redução drástica da latência na comunicação. Latência

em comunicação bidirecional é o tempo de espera pela resposta.

O gráfico mostrado na figura 9.1 ilustra os esquemas de comunicação conven­

cional (half-duplex ) e com Socket (full-duplex ).

SERVIDOR. convencional, M f-dup lex

NAVEGADOR
D
'DOR web socket, full-duplex
•M n
X
1
ò O
8,
■f. V.
i 8
te iZ C£ te

N AV EG AD O R

terriiao

Figura 9.1 - C om unicação half-duplex x full-duplex.

Estudos e testes conduzidos pela Corporação Kaazing, que está envolvida

com o desenvolvimento da tecnologia de comunicação com socket, dão conta que:
“HTM L5 Web Sockets reduz o tráfego de cabeçalhos H TTP em 500:1. Dependendo
do tamanho dos cabeçalhos H TTP a redução pode chegar a 1000:1. A redução da
latência é de 3 :1 ”.

Em resumo: Web Sockets pode tornar uma aplicação mais rápida, mais eficiente
e mais escalável.

O exemplo a seguir, adaptado do exemplo fornecido pela especificação do

W 3C para Web Socket, ilustra a sintaxe e dá uma ideia do funcionamento de uma
requisição com uso dessa tecnologia. O código mostra o envio, para o servidor, de
atualizações de um jogo em andamento no navegador do usuário.
260 HTf/L

var wsConn = new WebSocket('ws://jogo.exemplo.com:12010/atualizacoes');

wsConn.onopen = function () {
setInterval(function() {
if (wsConn.bufferedAmount == 0)
wsConn.send(getUpdateData());
}» 50);
};

O exemplo inicia com a abertura de uma linha de comunicação com um arque

de atualizações de um jogo. Aberta a comunicação, uma função callback é chama;
a cada 50ms. A função verifica a quantidade de informação sobre a atualização
mazenada em buffer e, como resultado da verificação, envia os dados de atualizar ;
coletados pela função getUpdateDataf).

Convém notar que a tecnologia se encontra ainda em fase de desenvolvimem

e seu pleno uso nos dias atuais requer bibliotecas para configurar o suporte
servidor. A biblioteca mais popular é a socket.io que fornece funcionalidades de ;;
plementação da tecnologia tanto no lado do cliente quanto no servidor, para br
e Node.js. Não é do escopo deste livro detalhar tais implementações.

Mostraremos a seguir a título de informação as funcionalidades disponíveis;

API para Web Sockets.

9.2.1 Propriedades e métodos

W ebSocket(i/r/ Iprotocolos])

Trata-se de um construtor que admite um ou dois argumentos. O primeiro mu

mento, uri, define o URL com o qual será estabelecida a comunicação. O segw ..
argumento, protocolos, é facultativo e quando presente define um nome ou \
array de nomes de subprotocolos válidos para estabelecimento da com unica:;

se n d(do do )

Esse método destina-se a enviar dados para o servidor. Os dados a enviar sã:,
padrão, em formato de string e tal como ocorre com Web Messaging o us ;
métodos U S O N . stringifyO e 3S0N.parse() viabiliza o envio de objetos.

A sintaxe para uso desse método é mostrada a seguir.

objetoDados = {
nome; 'Maujorg
mensagem; 'Bom dia!1
};
Capítulo 9 ■ APIs para comunicação 261

stringDados = 3S0N.stringify(objetoDados');
send(stringDados);

Para que os dados sejam enviados, é necessário que o atributo readyState tenha
assumido o valor OPEN e ainda não tenha entrado no valor CLOSING. Além disso, é
necessário que o buffer não esteja cheio.

readyState

Trata-se de uma propriedade destinada a monitorar o estado da comunicação po­

dendo assumir os seguintes valores:

■ CONNECTING (0) - a conexão não foi estabelecida.

b OPEN(1) - a conexão foi estabelecida e a comunicação é possível.

b CLOSING (2) - a conexão está em processo de fechamento.

b CLOSED (3) - a conexão foi fechada e não poderá ser aberta.

b u ffe r e d A m o u t

Esse atributo retorna o número de bytes contido no texto UTF-8 a ser enviado como
dado. Evocar o método send() com o buffer cheio fecha a conexão aberta, por isso é
essencial que se verifique a situação do buffer antes de enviar um dado.

A sintaxe para uso desse atributo é mostrada a seguir.

objetoDados = {
nome: 'Maujor',
mensagem: 'Bom dia!'
};
stringDados = ]SON.stringify(objetoDados’);
if (wsConn .bufferedAmount == 0) {
send(stringDados);
};

9.2.2 Eventos

onopen

Esse atributo, que define o evento open, está disponível para todos os objetos imple­
mentados pela interface W ebSocket. O evento é disparado quando a comunicação
é estabelecida.
262 HTi\

A sintaxe para uso desse atributo é mostrada a seguir.

var wsConn = new WebSocket('ws://exemplo.coir.l2345/ex);
wsConn.onopen = function (e) {
objetoDados = {
nome: 'Maujor'j
mensagem: 'Bom dia!'
};
stringDados = 3S0N.stringify(objetoDados);
if (wsConn.bufferedAmount == 0) {
send(stringDados);
};

onmessage

Esse atributo, que define o evento message, está disponível para todos os os .
implementados pela interface W ebSocket. O evento é disparado quando os c s ;
enviados chegam ao destino.

A sintaxe para uso desse atributo é mostrada a seguir.

var wsConn = new WebSocket('ws://exemplo.com:12345/ex);
wsConn.onmessage = function (e) {
objetoDados = {
nome: 'Maujor',
mensagem: 'Bom dia!'
};
stringDados = DSON.stringify(objetoDados)t
if (wsConn.bufferedAmount == 0) {
send(stringDados);
};

wsConn.onmessage = function (e) {

dadosRecebidos = 3S0N,parse(e.data);
alert('Nome: '+ dadosRecebidos.nome + 'Mensagem: '+ dadosRecebidos.mensagem);

ondose

Esse atributo, que define o evento c lo s e , está disponível para todos os o b jec
plementados pela interface W ebSocket. O evento é disparado quando a cc .
encerrada.

A sintaxe para uso desse atributo é mostrada a seguir.

 263
Capítulo 9 a APIs para comunicação

var wsConn = new WebSocket('ws://exemplo.com:12345/ex);

wsConn.onmessage = function (e) {
objetoDados = {
nome: 'Maujor',
mensagem: ’Bom dia!’
};
stringDados = 3SON.stringify(objetoDados);
if (wsConn.buff eredAmount == 0) {
send(stringDados);
};

wsConn.onmessage = function (e) {

dadosRecebidos = ]SON.parse(e.data);
alert(1Nome: ’+ dadosRecebidos.nome + 'Mensagem: '+■ dadosRecebidos.mensagem);

function (e) {
w s C o n n .o n c l o s e =

alert(’A conexão foi encerrada’);

};

o n e rro r

Esse atributo, que define o evento error, está disponível para todos os objetos im­
plementados pela interface W ebSocket. O evento é disparado quando ocorre um erro.

A sintaxe para uso desse atributo é mostrada a seguir,

var wsConn = new WebSocket('ws://exemplo.com:12345/ex);
wsConn.onerror = function(error) {
alert(’0ps! ocorreu o erro: ’+ erro);
};

93 Web Workers
Web Workers é uma API não incluída na especificação para a HTML5 e desenvolvida
pelo W 3C. Trata-se de mais uma tecnologia que começou a ser implementada pelos
navegadores com as funcionalidades da HTM L5 e ficou a ela vinculada embora
dela não fazendo parte.

Uma das características da linguagem JavaScript é a sua incapacidade de executar

dois ou mais scripts simultaneamente. Trata-se de uma linguagem que no jargão
técnico é chamada de single-thread que, em tradução livre, significa “uma só linha”,
significando que sua execução segue por um caminho reto que comporta um e
somente um script. Não há lugar para mais de um script em execução.
264 ht':. ;

Uma consequência imediata dessa característica da linguagem e uma expene:

cia pela qual provavelmente você já tenha passado é que nenhuma interação c . .
uma página web é possível enquanto um script longo está sendo executado, pois
página simplesmente “congela”.

Scripts que demandam muito tempo para execução são detectados pelos m e:. -
nismos internos dos navegadores e, depois de passado determinado tempo, acab:
por fazer com que uma caixa de diálogo seja apresentada ao usuário informand: .
demora e perguntando se ele quer que interrompa ou continue a execução do s e n ::

A figura 9.2 mostra a caixa de diálogo, para interrupção de script longo, r.

navegador Firefox4.

23|
tim sd p lse sr.f soes ests-' em execução ou p?n?do de respor.Ces
- j Voçé pode r: :e7 orpe-lo açor* 0 7 pare véní-:-?'' se e!e terror* a exea ção,

Scrst:
httpi/; Bvrc*!' ' 5. :o-r.
P tpC‘p£:‘5-.7:!:?7 ce -‘ovo

ComrL fff J [ inteuQmpgf sq:~pt j

Figura 9.2 - C aixa de diálogo para script longo.

Algumas técnicas têm sido usadas para contornar essa restrição, como uso des
métodos s etln tervalQ, s e t T i m e o u t Q e do objeto XMLHttpRequest, contudo são soluções
que nem sempre simulam a execução de múltiplos Scripts simultaneamente.

Web Workers é uma tecnologia que se destina a minimizar os problemas criados

pela característica single-thread da linguagem JavaScript, criando funcionalidades
capazes de permitir a execução de mais de um script simultaneamente em um:,
aplicação. Em outras palavras, é possível criar múltiplos threads em uma aplicação
e a linguagem assume características que a coloca lado a lado com as modernas
linguagens multi-thread.

Observe na figura 93 a seguir um diagrama mostrando a diferença entre execução

de tarefas com JavaScript tradicional e com Web Workers.

Notar que com Web Workers é possível realizar as tarefas B e D ao mesmo tempo
que são realizadas as tarefas A e C. O cálculo de A e B começa ao mesmo tempo e.
ao terminar, a tarefa C que depende de A e B é iniciada com a tarefa D. Terminadas
estas, o cálculo final é processado.
Capítulo 9 ■ APIs para comunicação 265

'\
( COM \
[ Web I
VWorkers /
N*.

T a r e fe i A j Tarefa B

Tarefa B

it 1
Tarefa c
MB j Tarefa C I J Tarefa O J

Tarait OJ

I' Final Final

1. C-t-D . C*D

Figura 9.3 - D iagram a com parativo JavaScript x Web Workers.

Por outro lado, com JavaScript tradicional, todas as tarefas são realizadas em
um processo semelhante a um passo a passo com cada uma das tarefas iniciando
somente quando a anterior for concluída.

Porém, Web Workers tem acesso apenas aos seguintes conjuntos de funcionali­
dades da JavaScript.

■ Objeto navigator.

■ Objeto location (somente leitura).

■ Objeto XMLHttpRequest.

■ Objetos JavaScript - Object, Array, Date, Math, String etc.

■ M é t o d o s e tln te rva l().

■ M é t o d o c le a rln te rva lQ .

a M é t o d o setTim eou tQ .

a Método clearTimeoutQ.

a Interface aplication Cache.

a Importação de Scripts com uso do método importScriptsQ.

a Criação de sub threads.

266 HTML:

Web Workers não tem acesso ao D O M nem aos objetos window, document e parem.
Por exemplo, não é possível o uso dos métodos alert () e getElementById() quando w
usa Web Workers.

Segundo o W3C, a finalidade da especificação para Web Workers é definir uma API
que possibilite aos autores de aplicações web criar mecanismos (chamados workers
capazes de executar scripts em background e em paralelo com a página web principal.

Aexecução de workers em uma aplicação web não interfere com os scripts da GUI
(Graphical User Interface ou interface gráfica do usuário); portanto, não impede a
interação do usuário e muito menos “congela” uma página web.

Para demonstrar esse comportamento, criamos um exemplo, disponível no site

do livro. Nele um script destinado a calcular a soma dos números naturais de 0 ate
100.000.000 é disparado após o usuário clicar em um botão. O script demora alguns
segundos para ser executado e durante esse tempo é solicitado ao usuário iniciar
uma ação qualquer de interação com a página web, por exemplo: selecionar textos
ou mesmo selecionar o endereço na barra de endereços do navegador. O usuário
constatará que a página permanece congelada enquanto o script é executado e as
interações não são possíveis.

A seguir, ao usuário é solicitada a mesma ação inicial, clicando em botão para

acionar o script com uso de Web Workers. Dessa vez será constatado que a página
não congela e a interação com a página é possível. A seguir, o exemplo, mas, em ura
primeiro momento, não se preocupe em entender as funcionalidades da API usada;
no exemplo. Na sequência, elas serão explicadas.

E> Javascript na página

<script>
//<![CDATÂ[
function init() {
if (IModernizr.webworkers) {alertC Lamenta, seu navegador não suporta Web Workers’);}
var i,r,btnSemWorker,btnComWorker,campoResuitado,btnLimpar;
btnSemWorker = document.getElementsByTagName('button')[0];
btnComWorker = document.getElementsByTagName('button')[l];
campoResuitado = document.getElementsByTagName('input')[0];
btnLimpar = document.getElementsByTagName('button')[2];
campoResuitado.style.color = 'red';
// sem worker
function calcula() {
campoResuitado.value = 'Calculando...';
setTimeout(function() {
Capítulo 9 a APIs para comunicação 267

r = 0
for (i=0; i<=le+8; i++) {r += i;}
campoResultado.value = r;
1, 100)

if (window.addEventListener) {
btnSemWorker.addEventListener('click', calcula, false);
btnLimpan.addEventListener('click1, function() {
campoResultado. value =
}, false);
} else {
btnSemWorker.attachEvent(’onclick1, calcula);
btnLimpar.attachEvent('onclick', function)) {
campoResultado.value = ";
});
}
// com worker
function calcWorker)) {
campoResultado.value = ’Calculando...’;
var worker = new Worker('calcula.js’);
worker.onmessage = function (evt) {
campoResultado.value = evt.data;
}J
};
if (window.addEventListener) {
btnComWorker.addEventListener)'click', calcWorker, false);
} else {
btnComWorker.attachEvent)'onclick', calcWorker);
};
}
window.onload = init;
// ]]>
</script>

[> Javascript no arquivo do Worker

var r=0;
for (i=0; i<=le+8; i++) {r += i;}
postMessage(r);

►HTML
<section>
<h3>Cálculo da soma dos números naturais de 0 a 100.000.000</h3>
<p>Iniciar cálculo: cbutton type=button>Sem Worker</button> cbutton type=button>Com Worker
</buttonx/p>
268 HT:V.

<pxlabel>Resultado:<brxinput type=textx/labelx/p>
<button type=button>Limpar</button>
</section>

Q sí
•W.I [c9-webworkers-ex1.html]

Em uma primeira análise, somos levados a acreditar que podemos criar worker;
indiscriminadamente para executar várias tarefas JavaScript pesadas. Contudo,
criar workers, o desenvolvedor deve considerar que nem sempre é apropriado uir.
elevado número de workers na página. A especificação do W 3C ilustra esse cuida­
do citando que não é apropriada a criação de um worker para cada pixel de uma
imagem com tamanho de quatro megapixel. Afirma ainda que, em geral, workers
a princípio devem ter uma vida longa, além de um desempenho e alocação de me­
mória que justifiquem seu uso.

Em linhas gerais, exemplos da conveniência de uso de workers incluem: proces­

samento de objetos JSO N extensos, manipulação de banco de dados hospedados no
lado do cliente, processamento de tarefas relativas a imagens, áudio e vídeo, cálculos
matemáticos dependentes de longas interações.

Vejamos a seguir a sintaxe geral para a criação e uso de workers, mostrando

alguns exemplos e estudando métodos e propriedades dessa APL

new Worker( ' a r q u i v o .j s ' )

Essa é a sintaxe para criar um worker. Usa o operador new para criar um objeto que
na API foi chamado de Worker. O parâmetro único aponta para um arquivo JavaS­
cript contendo o script para a realização da tarefa. Esse objeto armazena todas as
funcionalidades da API. A sintaxe JavaScript permite que você escolha livremente o
nome de uma variável para armazenar um objeto recém-criado. Observe os códigos
a seguir.
var worker = new Workerj'tarefa-um.js');
var xpto = new Workerf1blablabla.js')j

Na primeira linha criamos um worker para executar a tarefa codificada no arqui­

vo tarefa-um. js e na segunda outro worker denominado xpto para executar a tarefa
codificada no arquivo blablabla. js.

Notar que as tarefas a serem executadas em cada um dos workers de uma página
devem ser definidas em arquivos externos.
Capítulo 9 ■ APIs para comunicação 269

posíMessage('mensogem')

Esse método destina-se a estabelecer comunicação entre o script da página principal

e o script no arquivo que contém a tarefa para o worker, ou, dito de maneira sim­
plificada, a comunicação entre a página e o worker e vice-versa. O parâmetro único
desse método, mensagem, pode ser uma string ou um objeto JSO N a ser passado
da página para o worker e vice-versa.

message

Esse evento destina-se a monitorar a chegada de uma mensagem tanto no Worker

quanto na página. A sintaxe geral de uso desse evento é mostrada a seguir.

► JavaScript para receber mensagem no Worker

oninessage = function(e) {
var mensagemRecebida = e.data; // armazena a mensagem recebida

ou se você preferir a codificação W 3C

self.addEventl_istener('message1, function(e) (
var mensagemRecebida = e.data; // armazena a mensagem recebida

}, false)

Nessa sintaxe usamos a palavra-chave s e lf que se refere ao Worker. Alternati­

vamente podemos usar a palavra-chave this que também se refere a Worker, como
mostrado a seguir.
this.addEventListener('message', function(e) {
var mensagemRecebida = e.data; // armazena a mensagem recebida

}, false)

O exemplo a seguir, disponível no site do livro, demonstra o uso do método

postMessagef) e do evento message para a troca de mensagens entre a página e o Worker.
Nele o usuário digita uma breve mensagem, em uma caixa de texto, para ser enviada
a um Worker. Este recebe a mensagem, processa e retorna a mensagem processada
para a página. O processamento do texto da mensagem recebida pelo Worker con­
siste simplesmente em compor uma mensagem de retorno para a página na qual
consta a mensagem recebida.
270 HTML 5

O exemplo não apresenta valor prático algum e tem por finalidade, apenas, de­
monstrar a mecânica e sintaxe para a troca de mensagens entre a página e o Worker.

►Javascript na página
<script>
function initQ {
if (IModernizr.webworkers) {alert('Lamento, seu navegador não suporta Web Workers’);}
var campoMensagem,btnLimpar,btnlniciarWorker,campoResultado;
carnpoMensagem = document. getElementsByíagName(1input') [0];
btnLimpar = document.getElementsByT agName('button')[0];
btnlniciarWorker = document.getElementsByTagName('button')[!];
campoResultado = document.getElementById(1msg');
function comunicarWorkerO {
if (carnpoMensagem. value == " ) {
alertCDigite sua mensagem para o Worker');
return;
}
campoResultado.style.display = 'block';
var textoMensagem = carnpoMensagem.value;
var worker = new Work e r ( 'exemplo2.js');
worker,postMessage ( t e x to M e n s a g e m ) ; // envia mensagem para o Worker
worker.onmessage = f u n c t i o n (e) { // recebe mensagem do Worker
campoResultado.innerHTML = e .dataj

};
if (window.addEventListener) {
btnlniciarWorker.addEventListener('click', comunicarWorker, false);
btnLimpar.addEventListener('click', function() (
carnpoMensagem. value = ";
campoResultado.style.display = 'none';
}, false);
} else {
btnLimpar,attachEvent('onclick', functionQ {
carnpoMensagem. value = ";
campoResultado.style.display = 'none';
});
btnlniciarWorker.attachEvent('onclick', comunicarWorker);
};
}
window.onload = init;
</script>
Capítulo 9 a APIs para comunicação 271

t> Javascript no arquivo do Worker

onmessage = function(e) {
var inensagemRecebida = e.data; // recebe mensagem da página
var m ensageiuRetornada = '0 Worker acusa o recebimento da seguinte mensagem:
cbrxspan class="dest">'+ inensagemRecebida +'</span>’;
postMessage(mensagemRetornada); 11 envia mensagem para a página
}

> HTML
<section>
<h3>Comunicação da página com o Worker e vice-versa</h3>
<pxlabel>Entre uma mensagemxbrxinput type=textx/label>
cbutton type=button>Limpar</buttonx/p>
cpxbutton type=button>Iniciar Worker</button>
<p id=”msg“x /p>
</section>

<>J [c9-webworkers-ex2.html]

error

Esse evento destina-se a monitorar a existência de erros no Worker. As propriedades

desse evento são: lineno, message e filename que retomam respectivamente a linha onde
ocorreu o erro, a mensagem de erro e o arquivo onde se encontra o erro.

O exemplo a seguir é uma extensão do exemplo anterior no qual foi adicionado

o monitoramento de erros no arquivo do worker. Nesse arquivo foi cometido um
erro proposital marcado em destaque no código a seguir.

> Javascript na página

<script>
function init() {
if (IModernizr.webworkers) {alert('Lamento, seu navegador não suporta Web Workers’);}
var campoMensagem, btnLimparjbtnlniciarWorke^campoResultado;
campoMensagem = document.getElementsByTagName(’input’)[0];
btnLimpar = document.getElementsByTagName(’button’)[©];
btnlniciarWorker = document.getElementsByIagName(’button’)[!];
campoResultado = document .getElernentById(1msg ’);
function comunicarWorkerQ {
if (campoMensagem.value == " ) {
alert(’Digite sua mensagem para o Worker');
return;
}
272 HTML 5

campoResultado.style.display = 'block';
var textoliensagem = campoMensagem.value;
var worker = new Worker(’exemplo3.js ')j
worker. onerror = function (e) {
linhaErro = e.lineno;
msgErro = e.message;
arquivoErro = e.filename;
erro = 'Ops! Ocorreu o seguinte erro:<br>';
erro += 'Linha: '+ linhaErro + '<br>';
erro += 'Erro: '+ msgErro + '<br>';
erro += 'Arquivo: '+ arquivoErro;
campoResultado.innerHTML = erro;
};
worker,postMessage(textoMensagem); // envia mensagem para o Worker
worker.onsnessage = function (e) { // recebe mensagem do Worker
campoResultado.innerHTML = e.data;
};
};
if (window.addEventListener) {
btnIniciarWorker.addEventListener('click', comunicarWorker, false);
btnLimpar.addEventListener('click', functionQ {
campoMensagem. value = ";
campoResultado. style, display = 'none';
false);
} else {
btnLimpar.attachEventConclick', function() {
campoMensagem. value = ";
campoResultado.style.display = 'none';
});
btnlniciarWorker.attachEvent('onclick'^ comunicarWorker);
};
}
window.onload = init;
</script>

►Javascript no arquivo do Worker

onmessage = function(e) {
var mensagemRecebida = e.data; // recebe mensagem da página
var mensagemRetornada = '0 Worker acusa o recebimento da seguinte mensagem:
<brxspan class=i,dest">'+ mensagemRecebida +'</span>';
postMessage(MensagemRetornada); // Aqui há um erro - mensagemRetornada e não MensagemRetornada
Capítulo 9■ APIs para comunicação 273

► HTML
<section>
<h3>Comunicação da página com o Worker e vice-versa <br>
<small>Mostra o uso do evento error. 0 script do worker contém erro</smallx/h3>
<pxlabel>Entre uma mensagem: cbrxinput type=textx/label>
cbutton type=button>Limpar</buttonx/p>
cpxbutton type=button>Iniciar Worker</button>
<p id="msg"x/p>
</section>

® [c9-webworkers-ex3.html]

Opcionalmente podemos monitorar erros dentro do próprio arquivo do worker

e não na página como fizemos no exemplo mostrado anteriormente. Observe o
código a seguir que demonstra essa opção.
onerror = function (e) {
linhaErro = e.lineno;
msgErro = e.message;
arquivoErro = e.filename;
erro = 'Ops! Ocorreu o seguinte erro:<br>1;
erro += 'Linha: '+ linhaErro + '<br>';
erro += 'Erro: '+ msgErro + '<br>';
erro += 'Arquivo: '+ arquivoErro;
postMessage(erro); // enviamos a mensagem de erro para a página. Lá o script fará sua
// apresentação ao usuário.

importScriptsía/tpVo 1L arquivo2, arquivo3,...,arquivon])

Esse método destina-se a importar arquivos JavaScript para dentro de um worker.

Admite um arquivo como parâmetro obrigatório, seguido de um número ilimitado
de arquivos, isto é, podemos importar para o worker tantos arquivos externos quanto
forem convenientes. E válida a importação de qualquer tipo de arquivo JavaScript,
inclusive bibliotecas inteiras, por exemplo, a biblioteca jQ uery

Observe a seguir a sintaxe para uso desse método.

var worker = new Worker('tarefa-um.js'); // criamos um worker usando o arquivo tarefa-um.js

Suponha que para realizar seus cálculos o worker faça uso da biblioteca jQ uery
e de um script que o desenvolvedor resolveu separar em dois blocos independentes
para a facilidade de manutenção. O arquivo ta.refa-um.js é escrito conforme mostrado
a seguir.
274 HTML 5

importScriptC ../Scripts/jqueny-1.6. js1);

importScriptC. ./scripts/wll.js');
importScriptC ../scripts/wl2. js');

Alternativamente poderíamos escrever,

importScriptC../scripts/jquery-1.6. j s g ./scripts/wll.js'j ',./scripts/wl2.js');

tem inaíeO

Esse método destina-se a encerrar um worker. E usado no script da página.

Observe a seguir a sintaxe para uso desse método.

var meuWorker = new Worker('tarefa-um.js'); // criamos um worker usando o arquivo tarefa-um.js

meuklorker.terminateQ; // encerramos o worker

dose()

Esse método é semelhante ao método terminateQ e destina-se a encerrar um worker.

A diferença é que deverá ser usado no script do worker.

Observe a seguir a sintaxe para uso desse método.

self .close()j // A palavre chave self (ou, opcionalmente this) refere-se ao próprio o worker
 Offline

Neste capítulo, mostraremos as funcionalidades previstas nas especificações da

HTML5 denominada Offline Web Application que, como o nome sugere, destinam-
se a criar aplicações web para funcionamento offline.

A especificação para a criação de aplicações web offline, em sua parte introdutória,

diz o seguinte:

Com a finalidade de possibilitar aos usuários a continuar interagindo com uma

aplicação ou documento, mesmo que sua conexão com a Internet tenha caído
ou esteja indisponível, os autores devem criar um manifesto que relaciona os
arquivos necessários para o funcionamento offline da aplicação. O navegador
do usuário ao tomar conhecimento da existência de um manifesto criará uma
cópia dos arquivos listados para uso offline.

A especificação prevê o relacionamento de três tipos de arquivos a serem usados

na criação de uma aplicação offline e constantes do m anifesto. São eles:

ss arquivos necessários para uso offline;

b arquivos não necessários para uso offline;

b arquivos alternativos para uso offline.

O navegador ou dispositivo do usuário criará uma cópia em cache dos arquivos

necessários para uso offline e deles fará uso quando o usuário abrir a aplicação e
estiver offline ou quando estando online a conexão cair.

275
276 HTML 5

A relação dos arquivos não necessários para uso offline é opcional e destina-se
a garantir que as requisições do navegador para os arquivos nela listados ocorram
somente quando o usuário estiver online. Por exemplo: em uma aplicação que con­
tenha uma funcionalidade para atendimento online (chat), os arquivos necessários
ao funcionamento do chat não devem ser armazenados localmente, pois é óbvio
que a funcionalidade não funcionará offline.

Arquivos alternativos são arquivos armazenados em cache para serem usados

como alternativa aos arquivos não disponíveis offline. Por exemplo: se o usuário
tenta usar o chat offline, é chamado um arquivo alternativo contendo uma mensagem
informando que ele precisa estar conectado à Internet para usar o chat.

10 .2 M anifesto

Manifesto é um arquivo de texto puro codificado em U TF-8 que informa ao na­

vegador quais são os arquivos necessários e não necessários para uso offline. Um
manifesto contém um título e três seções nas quais são listados os três tipos de
arquivos estudados no item anterior. Observe a seguir a sintaxe para um arquivo
manifesto típico.
CACHE MANIFEST
# 03/04/2011-vl

CACHE:
# lista dos arquivos para uso offline
index.html
/estilos/main.css
/scripts/jquery.js

NETWORK:
# lista dos arquivos não necessários para uso offline
/login.php
http://facebook/api/comments

FALLBACK:
# lista dos arquivos alternativos para uso offline
/login.php /offline/login.html
http://facebook/api/comments /offline/facebook-comentarios.html
*. html /offline/offline.html
# Exemplo de arquivo manifesto
# para uso em aplicações offline
Capítulo 10 b Offline

As diretrizes que regem a criação e funcionamento de um arquivo m ar.::cí:

são as seguintes:

m o título CACHE M ANIFEST deve ser, obrigatoriamente, a primeira linha do

arquivo;

■ as três seções CACHE, N ETW O RK E FALLBACK são facultativas, podem ser

escritas em qualquer ordem e podem constar mais de uma vez no manifesto;

m a seção CACHE pode ser omitida e os arquivos nela listados podem vir logo
abaixo do título. Tudo se passa como se CACHE M ANIFEST assumisse as
funções de título e seção CACHE cumulativamente;

a linhas em branco são ignoradas;

b linhas de comentário devem iniciar com o sinal “jogo da velha” (#);

■ a quantidade máxima de dados em cache por site não deve ultrapassar 5M B;

b se o carregamento do arquivo manifesto ou de qualquer um dos arquivos

nele contido falhar, todo o processo de armazenamento falha. Caso existam
dados anteriormente armazenados em cache, esses dados serão usados para
navegação offline.

A seção N ETW O RK admite duas sintaxes. A primeira sintaxe lista explicitamente

os arquivos não necessários para uso offline, como mostrado no exemplo anterior. A
segunda sintaxe usa o caractere curinga (*) para informar que todos os arquivos não
listados na seção CACHE não devem ser armazenados para uso offline, conforme
mostrado a seguir.
NETWORK:
*

Na seção FALLBACK onde são listados os arquivos alternativos, cada linha da

listagem contém dois arquivos separados por um espaço em branco. O primeiro é
o arquivo online e o segundo o arquivo alternativo a ser armazenado.

No nosso exemplo a primeira linha daquela seção instrui o navegador em modo

offline a usar o arquivo login.html armazenado em cache se o usuário tentar acesso
ao arquivo login. php para se logar offline.

Na terceira linha qualquer acesso offline a um arquivo .html que não esteja
armazenado para uso offline acessará o arquivo offline.html armazenado em cache.
Possivelmente esse arquivo conterá uma mensagem ao usuário informando que o
acesso à página que ele acaba de requisitar somente é possível quando online.
278 HTML 5

É evidente, contudo, não é demais ressaltar que todo o processo de armazenamento

de arquivos em cache é iniciado a partir de um primeiro acesso online à página que
v, ■ contém o arquivo manifesto.

Um arquivo manifesto pode ser gravado com qualquer extensão, porém é de boa
prática não escolher uma extensão reservada a outros tipos de arquivo (por exemplo:
. h t m l , .d o e , . j p g , . x i s ) ou, melhor ainda, adote a extensão .m a n ife s t que, embora não
obrigatória, já está consagrada pelo uso.

Um arquivo manifesto deve ser servido com o M IM E type t e x t / c a c h e -m a n ife s t ,

assim é necessário que o seu servidor esteja configurado de modo a reconhecer a
extensão do arquivo manifesto como pertencente a um documento criado para esse
M IM E type. Supondo que adotamos a extensão .m a n ife s t em um servidor Apache,
o arquivo de configuração do Apache ou o arquivo .htaccess deverá ter uma linha,
como mostrado a seguir.
AddType text/cache-manifest .manifest

Já sabemos como criar e qual a finalidade de um arquivo manifesto, vamos

estudar a seguir como fazer funcionar o arquivo.

A primeira providência é informar à página web que existe um arquivo manifesto

para fazê-la usável offline. Para isso foi criado pela H T M L5 o atributo m anifest para
o elemento html e a declaração se faz conforme mostrado a seguir.
<html manifest= "/offline/exemplo.manifest" lang="pt-br">

O valor do atributo é um U RL relativo ou absoluto no qual se encontra hospe­

dado o arquivo manifesto.

É necessário que o atributo m anifest esteja presente no elemento html da página

para que ela seja incluída no cache para uso offline, exceto se a página estiver re­
lacionada explicitamente na seção CACHE do manifesto. Apesar de essa exceção
ser uma recomendação da especificação, é de boa prática usar o atributo m anifest
mesmo naquelas páginas.

10.2.1 Atualização do manifesto

Suponha que a sua aplicação foi armazenada para uso offline conforme instruções
contidas no arquivo manifesto. Passado algum você modificou, atualizando, um ou
mais arquivos que tenham sido armazenados no cache do navegador do usuário.
Se o usuário carregar sua aplicação online, os arquivos desatualizados não serão
Capítulo 10 nOffline 279

automaticamente substituídos no cache do navegador e o usuário continuará com

uma versão desatualizada quando voltar para a navegação ofíline.

Esse comportamento é importante, pois, uma vez armazenados em cache os

arquivos para uso offline, eles não serão atualizados se não ocorrer uma das se­
guintes hipóteses:

□ o usuário apaga os dados armazenados em cache para a aplicação;

□ o desenvolvedor atualiza o arquivo manifesto;

□ o desenvolvedor usa o objeto applicationCache para verificar o status do cache

e atualizá-lo.

A primeira hipótese deve ser imediatamente descartada, pois admitir que os

usuários farão limpeza do cache do navegador toda vez que carregarem uma aplica­
ção para uso offline é inadmissível. Então vamos estudar as duas outras hipóteses.

Atualizar o arquivo manifesto é uma opção que tem sido adotada na maioria das
vezes. Qualquer alteração feita no arquivo é suficiente para provocar uma atualização
dos dados armazenados quando o usuário retorna à aplicação online. Até mesmo a
mudança de um comentário no arquivo provoca a atualização. E é exatamente esse
tipo de mudança que vem sendo empregado.

Uma opção muito conveniente é criar uma linha de comentário informando a

data da última modificação do arquivo ou sua versão ou ainda ambas. Toda vez
que atualizarmos arquivos da aplicação alteramos a data ou versão lançada no
arquivo manifesto. O exemplo mostrado anteriormente contém a linha de comen­
tário destinada a ser modificada sempre que houver uma atualização na aplicação.
Transcrevemos a seguir parte daquele exemplo.
CACHE MANIFEST
# 03/04/2011-vl

A última opção é fazer a atualização do cache com uso de script. O script que
faz a atualização automática será mostrado em 1033.

Application cache, uma API prevista nas especificações para HTML5, que define
métodos, propriedades e eventos destinados a monitorar e manipular o estado dos
280 HTML 5

dados armazenados para uma aplicação offline. A interface dessa API fornece um
objeto denominado applicationCache contendo todas as funcionalidades da API.

A sintaxe para armazenar o objeto em uma variável e suas respectivas funciona­

lidades é mostrada a seguir.
var appCache = window.applicationCache;
appCache.status
appCache.update()
appCache. swapCacheQ

Assim, o objeto applicationCache tem uma propriedade e dois métodos estudados

a seguir.

10 .3 .1 Propriedades e métodos

status

Trata-se de uma propriedade destinada a monitorar o estado dos dados em cache

podendo assumir os seguintes valores:

■ UNCACHED (0) - nada existe armazenado em cache.

9 IDLE (1) - estão sendo usados os últimos dados armazenados em cache.

n CHECKING (2) - verificando existência de atualizações para armazenar no cache.

n DOWNLOADlíMG (3) - fazendo download de atualizações de dados.

■ UPDATEREADY (4) - foi feito o download de atualizações e estas estão aguardando

que o usuário recarregue a página ou que o método swapCacheQ seja chamado
para atualizar o cache.

■ 0BS0LETE (5) - O cache foi marcado como obsoleto. Acontece quando o arquivo
manifesto não é encontrado.

Observe a seguir um exemplo da sintaxe de uso dessa propriedade.

var appCache = window.applicationCache;
if (appCache.status == appCache.UPDATEREADY) {
// código para atualizar o cache

}
Capítulo 10 »Offline 281

update()

Esse método informa ao navegador que existe um arquivo atualizado. Convém

deixar claro que ao se evocar o método o download será feito; contudo, são neces­
sárias outras ações para que o cache seja atualizado, como veremos a seguir. O uso
desse método pode ser dispensado, pois a existência de arquivos atualizados e seus
downloads são feitos sempre que a página é carregada.

swapCacheO

Esse método informa ao navegador que, uma vez feito o download de um manifesto
atualizado, os dados deverão substituir o cache atual pelo atualizado. O uso desse
método deve seguir-se ao uso do evento updateready. Convém notar que apesar de o
cache ter sido atualizado seu efeito sobre a página aberta somente será sentido se
o usuário recarregar a página ou fechar o navegador e voltar à página.

Um script completo que faz a atualização e a coloca em uso será mostrado adiante,
pois nele usaremos um manipulador de eventos e precisamos estudar primeiro os
eventos da API.

10 3.2 Eventos

Esse atributo, que define o evento checking, é disparado quando se constata a exis­
tência de atualizações de cache ou a tentativa de download do manifesto pela pri­
meira vez que a página é carregada no navegador. Esse é sempre o primeiro evento
da sequência de eventos.

A sintaxe para uso desse atributo é mostrada a seguir.

var appCache = window.applicationCache;
appCache.addEventListener('checking', funcao, false);

o n u p d a te

Esse atributo, que define o evento update, é disparado quando se constata a não
existência de atualizações.

A sintaxe para uso desse atributo é mostrada a seguir.

var appCache = window.applicationCache;
appCache.addEventListenerfupdate', funcao, false);
282 H TM L;

Esse atributo, que define o evento downloading, é disparado quando se constata a

existência de atualizações e o navegador está buscando por elas ou no início dc
download do manifesto pela primeira vez.

A sintaxe para uso desse atributo é mostrada a seguir.

var appCache = window.applicationCache;
appCache.addEventListener('downloading', funcao, false);

progress

Esse atributo, que define o evento progress, é disparado quando se inicia o downloac
de cada um dos arquivos de atualizações.

A sintaxe para uso desse atributo é mostrada a seguir.

var appCache = window.applicationCache;
appCache.addEventListener('progress', funcao, false);

cached

Esse atributo, que define o evento cached, é disparado quando atualizações foram
baixadas e se encontram em condições de ir para o cache.

A sintaxe para uso desse atributo é mostrada a seguir.

var appCache = window.applicationCache;
appCache.addEventListener('cached', funcao, false);

Esse atributo, que define o evento updateready, é disparado quando atualizações

foram baixadas, encontram-se em condições de ir para o cache e pode-se chamar
o método swapCache() para fazer a troca do cache atual pelo cache recém-atualizado.

A sintaxe para uso desse atributo é mostrada a seguir.

var appCache = window.applicationCache;
appCache.addEventListener('updateready', funcao, false);
Capítulo 10 a Offline 283

o b s o ie te

Esse atributo, que define o evento obsoiete, é disparado quando a requisição para
o arquivo manifesto resulta em um erro 404 - arquivo não encontrado ou 403 - ,
arquivo em endereço de acesso proibido.

A sintaxe para uso desse atributo é mostrada a seguir.

var appCache = window.applicationCache;
appCache.addEventListener('obsolete', funcao, false);

e rro r

Esse atributo, que define o evento error, é disparado quando a requisição para o
arquivo manifesto resulta em um dos seguintes erros:

b erro 404 ou 410 - arquivo removido permanentemente;

■ a página que solicitou o manifesto não carregou adequadamente;

b ocorreu um erro fatal na busca por arquivos atualizados;

a o manifestou sofreu alteração enquanto estava sendo atualizado no navegador.

A sintaxe para uso desse atributo é mostrada a seguir.

var appCache = window.applicationCache;
appCache.addEventListener('onerror', funcao, false);

Ocorrendo um erro qualquer, o processo de requisição falha e a aplicação usa a

antiga versão em cache se houver uma.

1 0 3 3 Atualizando o cache

Vimos que uma das três maneiras de se atualizar o cache é com uso de script.
Veremos a seguir um script que, valendo-se dos métodos, propriedades e eventos
estudados nos itens anteriores, faz a atualização automática do cache. Na verdade,
a atualização imediata depende da autorização do usuário.
var appCache = window.applicationCache;
window.addEventListener('load', function(e) {
appCache.addEventListener(1updateneady1, function(e) {
if (appCache.status == appCache.UPDATEREADY) {
appCache.swapCacheQ;
284 HTML 5

if (confirm('Existem atualizações para este site. Deseja carregar as atualizações?') {

window.location.reload();
}
} else {
alert('Você optou por usar arquivos desatualizados neste site.');
}
}. false);
}, false)

10=4 Verificando suporte

Nos scripts desenvolvidos para uso dessa API, é importante a verificação de supor­
te nos navegadores para as funcionalidades descritas. Como vimos em capítulos
anteriores, o uso da biblioteca M odernizr fornece uma maneira simples de se pro­
cessar essa verificação. A seguir, mostramos a sintaxe para a verificação com uso
da biblioteca citada.
if (!Modernizr.applicationcache) {alert('Lamento seu navegador não suporta navegação offline');

ou ainda
if (!window.applicationCache) {alert(’Lamento seu navegador não suporta navegação offline’);

10=5 Exemplo prático

Para demonstrar o uso das funcionalidades oferecidas pela API Application cache,
desenvolvemos um exemplo simples que, embora não tenha valor prático algum,
presta-se para demonstrar a sintaxe e uso da API.

O exemplo é constituído de três arquivos, a saber:

a index.html - uma página com o layout e estilização típicos das páginas-exemplo

do livro.

a offline.css - uma folha de estilos definindo fundo e cor de fontes para o ele­
mento body.

■ exemplo.manifest - um arquivo manifesto.

O arquivo manifesto contém instruções para armazenagem da marcação HTML

da página index.htm l e do arquivo offlinexss. Assim, quando o usuário visualizar a
página offline, ela será apresentada com todo o seu conteúdo H TM L sem estilização
em fundo e fontes na cor definida no arquivo offlinexss.
Capítulo 1 0 » Offline 285

O exemplo está disponível no site do livro e os códigos são mostrados a seguir.

► index.html

<! DOCTYPE html>

<html manifest="exemplo.manifest" lang="pt-br">
<head>
<meta charset="utf-8">
<title>Livro HTML5 do Maujor</title>
<link href=".,/estilos/main.css" rel="stylesheet" type="text/css">
<!-- code highlighter -->

<!-- fim code highlighter -->

<script>
if (!Modernizeapplicationcache) {alert('Lamento, seu navegador não suporta navegação offline');}
var appCache = window.applicationCache;
window.addEventListener('load', function(e) {
appCache.addEventListener('updateready', function(e) {
if (appCache.status == appCache.UPDATEREADY) {
appCache.swapCache();
if (confirm('Existem atualizações para este site. Deseja carregar as atualizações?')) {
window.location.reload();
1
} else {
alert('Você optou por usar arquivos desatualizados neste site.');
}
}, false);
}, false)
</script>
</head>
<body>
<div id="tudo">
<header>
<hl>Capítulo 10</hl>
<h2>Application cache</h2>
</header>
<section>

</section>
<footer>

</footer>
</div>
</body>
</html>
286
HTML

► offline.css

body {
background-color:black;
coloriwhite;
}

► e xe m p lo .m a n ife s t

CACHE MANIFEST
#05/04/2011:vl

CACHE:
index.html
offline.css

NETWORK:
. ,/estilos/main.css

FALLBACK:
.,/estilos/main.css offline.css;

■9:1 [c10-index.html]
 Acessibilidade
\

Neste capítulo, mostraremos as funcionalidades previstas nas especificações da

HTM L5 desenvolvidas pelo W 3C e destinadas a incrementar a acessibilidade aos
conteúdos web. Veremos a WAI-ARIA, sigla para Web Assessibility Initiative - Acces-
sible Rich Internet Applications, que, em tradução adaptada, significa: Generalidades
para a acessibilidade ao conteúdo web - Aplicações de internet rica e acessíveis.
Estudaremos também o uso de Microdados, um mecanismo para incorporar dados
na marcação HTM L, que se destinam a ser acessados por máquinas.

1 1 .1 WAI-ARIA

WAI é um Grupo de Trabalho do W 3C e tem por objetivo o desenvolvimento de

estratégias, diretrizes e fontes de consulta destinadas a prover meios para a criação
de uma web acessível para pessoas com necessidades especiais.

ARIA é a sigla para Aplicações de Internet Rica que em definição informal são
interfaces gráficas que oferecem possibilidade de interação com o usuário com base
em funcionalidades instaladas ao lado do cliente.

O primeiro Rascunho de Trabalho para a especificação ARIA foi lançado pelo

W 3C em 4 de fevereiro de 2008 e atingiu o estágio de Candidata à Recomendação
em 18 de janeiro de 2011. Na especificação está dito o seguinte, em tradução adaptada:

A acessibilidade ao conteúdo web rico, tais como widgets, estruturas em geral

e comportamentos dependem da inclusão de informações semânticas a serem
interpretadas por tecnologias assistivas, tais como leitores de tela, para que estas
possam transmitir ao usuário com necessidades especiais seu real significado.

287
288 H TM L:

Esta especificação fornece diretrizes sobre a definição da função, estado e

propriedade dos elementos de marcação com a finalidade de incrementar a
acessibilidade e interoperabilidade de conteúdos e aplicações web.

Aplicações web complexas podem tornar-se inacessíveis se as tecnologias assis-

tivas não forem capazes de determinar a semântica das estruturas que a compõem
ou se o usuário não puder navegar por toda a aplicação de uma forma consistente.

A WAI-ARIA divide a semântica para fins de acessibilidade em:

a role para definir a finalidade do elemento na interface;

a state propriedade dinâmica que define as características de um objeto sujeite

à mutação em resposta a uma ação do usuário ou a um processamento au­
tomático;

■ propertie tem o mesmo significado de state. A diferença é que propertie define

ocorrência de mudança de estado de forma não tão frequente como ocorre
com state. Contudo, há exceções e na prática é comum referir-se genericamente
a state e propertie como atributos.

11.1.1 Role
Para definir a finalidade de um elemento estrutural adicionando-lhe semântica para
uso por uma tecnologia assistiva, usamos o atributo role. A sintaxe para definição
desse atributo é mostrada a seguir.
<div id="principal" role="main">

</div>

Um desenvolvedor, humano, que entenda a língua portuguesa ao ler a marcação

mostrada concluirá que o div#principal é um container para o conteúdo principal
da aplicação. Não se trata de um menu ou de um rodapé. Lembre-se de que as boas
práticas de escrita de marcação recomendam o uso de nomes para ID’s e classes
que sejam semânticos, isto é, que indiquem a finalidade estrutural do elemento ao
qual estão inseridas.

Por outro lado, um leitor de tela ao ler a marcação mostrada encontrará a palavra
principal como valor do ID e nada concluirá, pois o idioma que uma tecnologia
assistiva entende não é uma linguagem humana, e sim uma linguagem de máquina
previamente definida em uma taxionomia própria para a linguagem de marcação.
Capítulo 11 q Acessibilidade 289

Faz parte daquela taxionomia o atributo role e seu valor main que são interpre­
tados por uma máquina como sendo uma região da aplicação na qual se encontra
o conteúdo principal da aplicação. Não se trata de uma região contendo um menu
ou um rodapé.

O valor prático, para tecnologias assistivas, de uma marcação como a mostrada

é imediato. Suponha o cenário no qual o desenvolvedor prevê na marcação um
link do tipo “Pular navegação” para evitar que um leitor de tela tenha de passar
por todo o processo de leitura dos itens de um vasto menu antes de chegar ao con­
teúdo principal. Com o uso das funcionalidades da ARIA, esses tipos de links, tão
comuns em documentos atuais, não mais serão necessários, pois a existência de
uma informação semântica indicando onde se encontra o conteúdo principal será
suficiente para que o leitor de tela encontre aquele conteúdo.

Corno foi dito, existe uma gramática destinada à máquina definindo a finalidade
e função de cada uma das funcionalidades da ARIA. Vamos a seguir fornecer uma
visão geral dessa gramática. A especificação categoriza roles em quatro áreas:

□ Abstract roles

® Widget roles

□ Document Structure roles

□ Landmark roles

1 1 .1 .1 .1 Abstract roles

Os roles abstratos constituem a base para a construção dos demais roles da WAI-
AR1A. São usados exclusivamente para definir a semântica relacionada à natureza
dos elementos ou seções da. aplicação, ou seja, destinam-se à construção da ontologia
dos roles. Assim, não devem ser usados pelos autores para definir a semântica de
conteúdos.

A título de informação, os roles abstratos e suas finalidades são descritos a seguir.

□ command - uma estrutura destinada a executar uma ação, mas que não recebe
nenhum tipo de dado.

□ composite - uma estrutura contendo elementos de navegação ou elementos-

filho que a compõem.

□ input - uma estrutura genérica destinada a receber dados fornecidos pelo

usuário.
290 HTML S

a landm ark - uma região da página na qual se supõe necessidade de rápido acesso.
Por exemplo, uma estrutura de navegação ou de busca.

□ range - um controle destinado a receber um dado fornecido pelo usuário e

que deve estar compreendido entre determinados valores.

a —um role-base do qual todas suas estruturas descendentes herdam

r o le ty p e
a semântica.

a - uma unidade de estrutura de conteúdos renderizável em uma apli­

s e c tio n
cação ou documento.

a sectionhead - uma estrutura que serve de rótulo ou sumário para uma seção.

a - uma estrutura que permite ao usuário escolher um valor constante

s e le c t

de uma lista de opções.

ss s tr u c tu re - um elemento estrutural do documento.

a w id g e t - um componente interativo de uma interface gráfica.

a window - o navegador ou uma janela da aplicação.

11.1.1.2 Widget roles

Os roles para Widgets devem ser usados, pelos autores, para definir a semântica dc
componentes de um Widget da interface do usuário.

Os valores possíveis para essa categoria de roles são mostrados a seguir.

d alert - uma mensagem contendo uma informação importante ao usuário.

a a le r td ia lo g - uma janela de diálogo contendo uma mensagem de alerta na

qual o foco inicial é dado a um elemento específico da janela.

a button - um controle no qual o usuário realiza um clique ou pressiona para

desencadear uma ação.

□ checkbox —um controle do tipo checkbox com três estados possíveis: true, f a l s e
e raixed.

□ dialog - uma janela contendo uma aplicação que interrompe o processament :

da aplicação principal e destina-se a solicitar uma informação ou uma resposta
ao usuário.
Capítulo 11 s Acessibilidade 291

a gridcell - uma célula de um grid ou de uma árvore de grid.

e link - uma referência interativa a um destino externo ou interno na própria

aplicação que, quando ativado, faz com que o agente de usuário navegue para
o destino.

h log - uma região na qual se armazenam informações essenciais que vão sendo
sobrescritas por informações que se atualizam.

£3 marquee —uma região na qual se armazenam informações não essenciais que

são atualizadas com muita frequência.

m menuitem - uma das opções de um grupo de escolhas contidas em um menu

ou barra de menu.

a menuitemcheckbox - um item de menu do tipo checkbox com três estados possíveis:

t r u e , fa ls e e m ixed.

a m enuitem radio - um item de menu do tipo ra d io b u tto n no qual é possível apenas

uma escolha.

a o p tio n - uma das opções de um elemento de seleção.

a p rog ressbar - um elemento destinado a mostrar o progresso de uma tarefa de

longa duração.

B ra d io - um controle do tipo ra d io b u tto n de um grupo no qual é possível apenas

uma opção de escolha.

b scrollbar - um objeto gráfico destinado a controlar o rolamento de um con­

teúdo em determinada área de apresentação.

a slider - um controle para a seleção de determinado valor contido em uma

faixa de valores.

D spinbutton - um controle para a seleção de determinado valor contido em uma

faixa de valores com incrementação discreta, ou seja, valores em crescimento
contínuo.

□ status - conteúdo para uma mensagem ao usuário cuja importância não ju s­

tifica o uso de uma janela de alerta. Normalmente, mas não necessariamente,
uma barra de status.

Fazem parte ainda dessa categoria os roles destinados a marcar containers de ge­
renciamento dos Widgets. Os valores possíveis para esses roles são mostrados a seguir.
292 HTML 5

a combobox - uma caixa de seleção, em geral similar a uma caixa de texto na qual
o usuário escolhe uma opção ou digita um item de sua escolha.

■ g rid - um controle interativo contendo células de dados tabulares com linhas

e colunas semelhante a uma tabela.

m listbox - uma estrutura que permite a escolha de um ou mais itens de uma

lista de opções.

■ menu - uma estrutura que oferece opções de escolha ao usuário.

a menubar - uma barra de menu normalmente posicionada na horizontal.

a ra d io g ro u p - um grupo de botões do tipo radio.

h tablist —uma lista de abas.

n tree - um tipo de lista contendo subníveis aninhados que retraem e expandem.

a treegrid - um grid no qual as linhas retraem e expandem.

1 1 .1 .1 3 Document Structure roles

Os roles para Document Structure devem ser usados, pelos autores, para definir
a semântica de componentes estruturais destinados a organizar os conteúdos r.;.
página. Normalmente não são usados em estruturas interativas.

Os valores possíveis para essa categoria de roles são mostrados a seguir.

a a rtic le - uma estrutura da página cujo conteúdo é independente do docu­

mento, página ou site.

d columnheader - uma célula contendo o cabeçalho da coluna.

a d e fin itio n - uma estrutura contendo a definição de um termo ou conceito.

a d ir e c to r y - uma lista de referência aos componentes de um grupo tal coru

uma tabela índice.

a document - uma região contendo informações relacionadas que fazem paru

do conteúdo do documento. Contrário à região de uma aplicação (ver rcu
a p p lic a tio n em Landmark Role).

□ group - um conjunto de objetos da interface que para as tecnologias assisti u

não devem ser incluídos em um índice ou uma tabela sumário da página
Capítulo 11 a Acessibilidade 293

• heading - o cabeçalho de uma seção da página.

■ img - um Container para uma coleção de objetos que formam uma imagem.

b lis t - um grupo de itens de uma lista não interativa.

■ listitem - um item de uma lista.

b math - um conteúdo representando uma expressão matemática.

e note - uma seção cujo conteúdo é uma anotação sobre o conteúdo principal.

■ presentation - um elemento cuja função semântica nativa não está mapeada

pela API de acessibilidade.

■ region - uma seção da página importante o bastante para ser incluída no

índice.

m row- uma linha de células em um grid.

a rowheader - uma célula contendo o cabeçalho da linha.

h separator - um divisor que separa seções de conteúdos ou grupos de itens de

menu.

a toolbar - uma coleção de botões apresentada em forma visual compacta.

1 1 .1 .1 .4 Landmark roles

Os Landmark roles devem ser usados, pelos autores, para definir a semântica de
componentes estruturais aos quais se supõe que o usuário deseje um rápido acesso,
como estruturas de navegação, de busca, formulários etc.

Os valores possíveis para essa categoria de roles são mostrados a seguir.

■ a p p lic a tio n - região contendo uma aplicação. Contrário à região de um docu­

mento (ver role document em Document Structure Role).

a banner - região contendo informação sobre o conteúdo do site como um todo.

a complementary - região destinada a complementar o conteúdo principal com

a mesma hierarquia deste no DOM , possuindo significado próprio mesmo
quando dissociada do conteúdo principal.

n c o n te n tin fo - região contendo informações sobre o documento-pai.

294 htm l;

□ forni —um Container para controles de formulário.

□ iiiain - um Container para o conteúdo principal da página.

ia navigation - um Container para os elementos de navegação na página.

□ search - um Container para os elementos que criam uma funcionalidade de

busca na página.

11 .1 .2 Atributos

Atributo é a denominação genérica para o componente da marcação que define o

estado e as propriedades de um elemento da aplicação. Cada um dos roles apre­
sentados na seção anterior admite um conjunto de estados e propriedades que são
a ele aplicáveis. A sintaxe geral para um atributo é a r i a - * na qual o caractere * é um
curinga. O exemplo a seguir esclarece o uso e a sintaxe de atributos.
<li role="menuitemcheckbox" aria-checked="true">O rdenar por data de modificação</li>

Nesse exemplo usou-se o atributo a ria -c h e c ke d que define o estado do item de

um menu como sendo o item marcado (checked) no menu. O valor do atributo foi
definido como t r u e .

As listas de atributos e propriedades de cada role, bem como suas características

gerais e valores possíveis constam do item 5. The Roles Model da especificação para
a WAI-ARIA. Trata-se de uma lista vasta que optamos por não transcrever neste
livro. Recomendamos consultar a especificação no endereço http://www.w3.org/TR/wai-
aria/roles para extrair as informações sobre atributos.

Para uma ideia geral da apresentação desses atributos, transcrevemos a título

de informação a tabela 11.1 contendo informações sobre os atributos para o role
navigation, conforme consta das especificações.

As superclasses e subclasses constam da taxionomia de roles cujo diagrama pode

ser visto em http://www.w3.org/TR/wai-aria/rdf_model.svg.

Os atributos são listados na tabela e aqueles que se referem a estado estão devida­
mente identificados, os demais são propriedades. Os valores de estado normalmente
são true e false e os valores das propriedades são definidos pelo autor.
 295
Capítulo 11 a Acessibilidade

T a b e la 11.1 - A trib u to s d o r o le n a v ig a tio n

Características Valor
Superclasse do role: landmark
Conceitos relacionados: elemento nav
aria-atomic

aria-busy (estado)
aria-controls
aria-describedby
aria-disabled (estado)

aria-dropeffect
aria-expanded (estado)

aria-flowto

Propriedades e estados herdados aria-grabbed (estado)

aria-haspopup
aria-hidden (estado)
aria-invalid (estado)

aria-label
aria-labelledby

aria-live
aria-owns
aria-relevant
Nome de: autor

Observe a seguir um exemplo mostrando a sintaxe e uso de role e atributos.

<ul role=''menubar">
< l i role="menuitem" aria-haspopup="true" a ria -la b e lle d b y= "a rq u ivo ">
<span id="arquivo''>Arquivo</span>
<ul role="menu">
< li role="menuitem">Novo</li>
< li role="inenuitem ">Abrir...</li>

</ul>
< /li>

</ul>
296 HTML 5

11 .1.2 .1 Atributos globais

Os seguintes atributos são globais, isto é, podem ser usados para todos os elemento;
independentemente do seu role.

a aria-atomic - indica se a tecnologia assistiva deve apresentar somente a região

onde houve uma mudança ou toda a região onde ela ocorreu. Os valore;
possíveis para esse atributo são true e false, sendo false o valor-padrão. Paro
esse efeito as notificações de mudança são definidas pela propriedade aria-
relevant com seus valores additions, removais, text ou all.

a aria-busy (estado) - indica o estado de um elemento e sua árvore, informando

se ele está sendo atualizado ou não. Os valores possíveis para esse atribute
são true e false, sendo false o valor-padrão.

a aria-controls - identifica um elemento ou elementos cujo conteúdo ou pre­

sença na página é controlado pelo elemento. O valor desse atributo é o ID
do elemento controlado.

h aria-describedby - identifica um elemento ou elementos que descrevem uru

objeto. O valor desse atributo é o ID do elemento descrito.

a aria-disabled(estado) - identifica um elemento desabilitado, ou seja, nãc

operacional. Os valores possíveis para esse atributo são true e false, sendo
false o valor-padrão.

s aria-dropeffect - indica quais funções podem ser executadas quando um

elemento arrastável é solto na área a ele destinada. Os valores possíveis paro
esse atributo são: copy, move, link, execute, popup e none é o valor-padrão.

e aria-flowto - identifica um elemento fora da ordem natural de leitura ou fluxo

do documento permitindo que tecnologias assistivas escolham um fluxo de
leitura alternativo.

s aria-grabbed (estado) - indica o estado de arraste de um elemento. Os valore;

possíveis para esse atributo são true, false e undefined sendo undefined o valor-
padrão. O valor true indica que o elemento foi seguro e está em condições d e
ser arrastado, o valor false indica que o elemento é arrastável, mas não foi
seguro para arraste e o valor undifined indica que o elemento não é arrastável.

□ aria-haspopup - indica que o elemento tem um menu de contexto popup ou

subníveis de menu.
Capítulo11 b Acessibilidade 297

d aria-hidden (estado) - indica que o elemento e seus descendentes não estão

visíveis para nenhum usuário conforme definido pelo autor. Os valores pos­
síveis para esse atributo são true e false, sendo false o valor-padrão.

n aria-invalid (estado) - indica que o valor fornecido não está de acordo com o
formato esperado pela aplicação. Os valores possíveis para esse atributo são
grammar, spelling, true e false, sendo false o valor-padrão. O valor grammar indica
um erro gramatical, spelling em erro de grafia, true um erro de validação e
false a não existência de erros.

a aria-labei - indica um rótulo para o elemento. O valor desse atributo é uma

string.

□ aria-labelledby - identifica o elemento que serve de rótulo para o elemento

corrente. O valor desse atributo é o ID do elemento que está sendo rotulado.

□ aria-live- indica que um elemento será atualizado e define o tipo de atualiza­

ção. Os valores possíveis para esse atributo são polite e assertive. O valor polite
instrui as tecnologias assistivas a informar o usuário sobre uma atualização
tão logo ela tenha sido completada. A atualização se faz no background sem
interferir com o fluxo normal da interação. O valor assertive é usado quando
a ocorrência de uma atualização altera o andamento natural de uma tarefa
e o usuário precisa ser notificado tão logo a atualização inicie.

0 aria-owns - identifica um elemento ou elementos com a finalidade de definir o re­

lacionamento visual, funcional ou de contexto entre elementos-pai e elementos-
filho quando o DOM não puder ser usado para estabelecer o relacionamento.
O valor desse atributo é o ID do elemento que está sendo identificado.

a aria-relevant - indica quais são as notificações de mudanças ocorridas em

uma região marcada com aria-live serão enviadas para as tecnologias assis­
tivas. Os valores possíveis para essa propriedade são: additions, removais, text
ou all conforme o envio seja para atualizações devidas, adição de conteúdos,
remoção, inclusão de textos sem alterar o DOM ou todas as alterações.

11 JM icrodados
A especificação do W 3C para Microdados encontra-se na fase de Rascunho de
Trabalho, porém as funcionalidades dessa tecnologia, em sua maioria, são bem su­
portadas pelos navegadores e clientes para os quais foram criadas. Na especificação
está dito o seguinte, em tradução adaptada:
298 HTML S

Esta especificação define o mecanismo Microdados para a HTML. Este

mecanismo permite que se incorporem dados na marcação HTML de uma
maneira fácil e que se destinam a serem lidos por máquinas. Microdados é
compatível com vários outros formatos de dados inclusive RDF e JSON.

Assim, Microdados destina-se a adicionar semântica aos conteúdos web para

serem lidos por máquinas, como mecanismos de busca, web crawlers, navegadores
etc., com a finalidade de enriquecer a experiência do usuário. Microdados fornece
às máquinas informações que as permite melhor entender e interpretar os conte­
údos web. Por exemplo: facilitando a scripts fornecer serviços personalizados por
página ou possibilitando que conteúdos gerados por diferentes autores possam ser
processados de uma maneira consistente.

1 1 .2.1 S in ta »

O termo item é usado para designar uma estrutura de dados a serem definidos com
uso dos mecanismos de Microdados.

Um vocabulário para Microdados é um documento que define a semântica de

itens. Ao desenvolvedor é facultado criar um vocabulário próprio para contemplar
suas aplicações ou usar um dos vocabulários existentes disponíveis na web.

Um exemplo mostrando vários vocabulários, suportados pelo Google, está

disponível em http://data-vocabulary.org. Lá encontramos vocabulários para adicionar
semântica a conteúdos que dizem respeito a eventos, organizações, pessoas, produ­
tos, revisões etc.

Os autores são encorajados a, sempre que possível, usar um vocabulário já

existente.

Observe na tabela 11.2 o vocabulário para pessoas disponível em http://www.data-

voca bulary.o rg/Pe rson/ e devidamente traduzido.

Tabela 11.2 - Exemplo de vocabulário para pessoas

Propriedade Descrição
name (fn) Nome da pessoa
nickname Apelido da pessoa
photo Link para uma imagem da pessoa
title Título da pessoa (por exemplo: Gerente Financeiro)
role Função da pessoa (por exemplo: Contador)
uri Link para uma página, tal como a home page pessoal
Capítulo 11 □ Acessibilidade 299

Propriedade Descrição
affiliation (org) Nome da organização a qual a pessoa é associada (por exemplo: empregado)
friend Nome de outra pessoa de seu relacionamento social como amigo
contact Nome de outra pessoa de seu relacionamento social como contato
acquaintance Nome de outra pessoa de seu relacionamento social como conhecido
0 local da pessoa. As subpropriedades são: street-address, locality, region, postal-code
address (adr)
e country-name

Os nomes das propriedades entre parênteses são conforme a grafia definida para
Microformatos.

Observe a seguir uma marcação HTM L destinada a descrever uma pessoa.

<div>
Meu nome é M aurício Samy S i lv a , mas sou conhecido como "M aujor". Meu s ite é:
<a h re f= "h t t p : //m aujor. comAwww. m aujor. com</a>.
Eu moro no Rio de Ja n e iro , RJ e sou um engenheiro c i v i l da PLANGEN.
Meus amigos são:
<a h re f= "http ://jo a o ,co m "> Jo ão < /a >,
<a h re f= "http://m aria.com ">M aria</a>
</div>

A seguir, a mesma marcação mostrada anteriormente com a inclusão dos meca­

nismos de Microdados.
<div iíeinscope itemtype="http://data-vocabulary.org/Person">
Meu nome é <§pan ite m pro p ="na m e"> M au rício Samy S ilv a < / s p a n > , mas sou conhecido como
<span itemprop="nickname">"Maujor"</span>,
Meu s ite é: <a h re f= "h t t p : //maujor.com" itemprop="url">www.maujor.com</a>.
Eu moro no
<span itemprop="address" itemscope iteatype="http://data-vocabulary.org/Address”>
<span itemprop="locality">Rio de Janeiro</span>, <span itemprop=,,regioíi">RJ</span>
</span>
e sou um <span ítemprop="title">engenheiro c iv il< / s p a n > da
<span itemprop="affiliation">PLANGEN</span>
Meus amigos são:
<a href="http://joao.com" rel="friend">João</a>,
<a href="http://maria.com" rel="friend">Maria</a>
</div>

A marcação mostrada resume a sintaxe geral para inclusão dos atributos de

Microformato na marcação HTM L, conforme segue.
300 HTML 5

■ O atributo itemscope (sem declaração de valor) define um Container para um

item. A esse atributo segue-se o atributo itemtype cujo valor é um URL apon­
tando para o vocabulário a ser adotado para a marcação dos dados no item.

u O atributo itempropo define a propriedade do dado marcado, conforme consta

no vocabulário definido em itemtype.

i É válido aninhar itemscope e, em consequência, it e m ty p e , como foi feito no

exemplo mostrado anteriormente. Notar que aninhamos o vocabulário para
Address dentro do vocabulário para Person.

11.2 .1.1 Atributos globais

São previstos os seguintes atributos globais para um item .

m itemscope —é um atributo booleano, isto é, não admite valor (não confundir

com atributo de valor booleano). Quando presente, declara o estado como
verdadeiro; quando ausente (ou não definido), como falso. Destina-se a marcar
um Container no qual seus conteúdos são marcados com as funcionalidades
de Microdados.

si itemtype - o valor desse atributo é um U RL apontando para um arquivo con­

tendo o vocabulário adotado para a marcação dos Microformatos.

b itemid - define um identificador global para o item.

b itemprop - define a propriedade de um item de acordo com os valores especi­

ficados no vocabulário adotado.

b it e m r e f - define um ID de um elemento no qual se encontram informações

adicionais sobre o item.

Observe no exemplo a seguir um exemplo de uso da sintaxe dos atributos globais.

<div itemscope itemid="amanda" ite m re f= ” a b" item type="h t t p : //exemplo. co m /b an da/x/d iv>
<p id="a">Nome: <span itemprop="name">Amanda</spanx/p>
<div id="b" itemprop="band" itemscope ite m re f= " c " x / d iv >
<div id="c">
<p>Banda: <span itemprop="name">]azz Band</spanx/p>
<p>Componentes: <span ite m pro p ="size l,>12</span> músicos</p>
</div>
Capítulo 11 ■ Acessibilidade 301

11.3 Microdados DOM APl

A API para Microdados prevê um método e nove propriedades, conforme descritas
a seguir.

documení.getltems([f/po])

Esse método retorna uma lista dos nós do DOM (elementos) do documento que
criam um item. Da lista não constam os nós que criam itens aninhados em outro
item. O método admite um parâmetro facultativo de uma lista de tipos de item se­
parados por vírgula. Os valores da lista de parâmetros são os URL designados no
atributo itemtype.

e/emenfo.properties

Para os elementos que possuem o atributo itemscope essa propriedade retorna um

objeto contendo uma coleção das propriedades do elemento.

e/eme/ifo.iíemValue[=ra/or]

Essa propriedade retorna o valor do atributo itempropo. Pode ser ainda usada para
definir por script o valor do atributo itempropo.

e/emenfo.iíemScope

Essa propriedade retorna um valor booleano conforme tenha ou não sido declarado
o atributo itemscope para o elemento.

e/emenfo.itemType

Essa propriedade retorna uma string com o valor do atributo itemtype.

e/emenfo.itemld

Essa propriedade retorna uma string com o valor do atributo itemid.

e/emenfo.itemRef

Essa propriedade retorna uma string com o valor do atributo itemref.

e/emenfo.slemPrap

Essa propriedade retorna uma string com o valor do atributo itempropo.

302 HTML 5

e/ememo.propeities

Essa propriedade retorna uma string com o valor do atributo itemtype.

Os exemplos a seguir esclarecem a sintaxe de uso das propriedades mostradas.

i f (elem ent. item Prop. c o n ta in s (' c o r1))
count += 1 ;

No exemplo mostrado, o script verifica se determinado elemento possui o atributo

ite m p ro p com o valor c o r. Caso positivo, incrementa um contador.
f o r (va r index = 0; index < e le m e n t.ite m R e f.le n g th ; index += 1)
process(docuruent. getElem entByld(elem ent. ite m R e f[in d e x ]) ) ;

No exemplo mostrado, o script percorre todos os elementos que contêm o atri­

buto itemref e define um processamento para cada um deles.

1 1 3 J Suporte nos navegadores

Atualmente nenhum navegador oferece suporte para as funcionalidades dessa AP1. A

biblioteca Modernizr não prevê a verificação de suporte para essa API. Uma função
simples para fazer a verificação do suporte é mostrada a seguir.
fu n c tio n suportaM icrodadosQ {
return ! ! document. getltem s;

};
i f (suportaM icrodadosQ) {
// s c rip t para navegadores que suportam
} else {
// mensagem ou s c rip t para navegadores que não suportam

}
 Elementos da HTML

Esta tabela foi extraída do site do W 3C e relaciona os elementos da HTML5. For­

nece ainda uma breve descrição do elemento, além de relacionar os atributos a eles
aplicáveis.
Elem ento Descrição Atributos
a Hyperlink globais; h re f; ta rg e t; r e i; media; hreflang; type
abbr Abreviação globais
Informações de contato para uma página ou
address globais
seção
Área em um mapa de imagem com ou sem globais; a l t ; coords; shape; h re f; ta rg e t; r e i;
area
hyperlink media; hreflang; type
Conteúdo passível de sindicalização
a r tic le (distribuição independente) ou conteúdo globais
reusável
Conteúdo tangencíalmente relacionado a outro
aside globais
conteúdo
audio Player de áudio globais; src; preload; autoplay; loop; co n trols
b Marca palavras-chave globais
base U R L base para hyperlinks globais; h re f; ta rg e t
bdi Marca de direção de texto globais

bdo Formata direção de texto globais

blockquote Citação longa globais; c ite

globais; o n a fte rp rin t; o n b e fo re p rin t;
onbeforeunload; onblur; o nerror; onfocus;
onhashchange; onload; onmessage; onoffline;
body Corpo do documento
ononline;onpagehide;onpageshow ;onpopstate;
onredo; o n resize; o n s c ro ll;o n s to ra g e ; onundo;
onunload
br Quebra de linha globais
globais; autofocus; disabled; form; form action;
button Controle tipo botão formenctype;formmethod; form novalidate;
fo rm targ e t; name; typ e ; value

303
 HTML 5

Elemento Descrição Atributos

canvas I Área de bitmap para Scripts : globais; w idth; height

caption j Legenda de tabela I globais

c ite I Título de um trabalho I globais

code I Código máquina j globais

col IColuna de tabela ! globais; span

colgroup ""^Grupamento de colunas de uma tabela ! globais; span

I globais; typ e ; la b e l; icon; d isabled; checked;
command j Comando de menu
! radiogroup
TContainer para opções de um controle tipo
d a t a lis t globais
| combo box
dd I Conteúdo para correspondente elemento(s) dt I globais

dei I Conteúdo removido do documento I globais; c ite ; datetime

d e ta ils ! Controle para apresentar detalhes globais; open

dfn ! Instância de definição globais

-+
d iv __ ^Container genérico I globais
dl I Container para listas de definição , globais

dt | Legenda conteúdos em elemento(s) dd globais

ern \Forte ênfase globais

embed ! Plugin globais; src; typ e ; w idth; he ig ht; any*

field s e t __ j Grapamento de controles de formulário globais; disabled; Form; name

figcaption j Legenda de figuras globais

figure Figura com legenda opcional : globais

footer Rodapé para uma página ou seção j globais

I globais; accept-ch arset; a ctio n ; autocomplete;
form Formulário
I enctype; method; name;n o va lid a te ; ta rg e t
h l, h2, h3,
Cabeçalho de uma seção j globais
h4, h5, h6
head ___^ Container para metadados do documento j globais

header
j Conteúdo introdutório ou de auxílio de I globais
__j_navegação para uma página ou seção
------------------- [.
hgroup j Grupamento de cabeçalhos I globais

hr Quebra temática de linha globais

html Elemento raiz I globais; m anifest

i Alteração de entonação | globais

[ globais; src; srcdoc; name; sandbox; seamless;
ifram e Contexto de navegador aninhado
J w idth; height

_ i m|______ . 11
Imagem _^globais; a l t ; src; usemap; ismap; w idth; height
globais; accept; a l t ; autocomplete; autofocus;
checked; dirname; d isabled; form; form action;
formenctype; formmethod; form novalidate;
in put Controle de formulário
I fo rm targ e t; height; l i s t ; max; maxlength; min;
|m u ltip le ; nam e;pattern; placeholder; readonly;
__^required; s ize ; src; step; typ e ; value; w idth
Apêndice A □ Elementos da HTML5 305

Elem ento Descrição Atributos

ins Acréscimo no documento globais; cite; datetime
kbd j Entrada de usuário globais
Controle de formulário gerador de chave globais; autofocus; challenge; disabled; form; j
keygen 1
criptográfica keytype; name
label Legenda para controle de formulário globais; form; for
legend Legenda para fieldset globais
li Item de uma lista |globais; value*
link Metadado link globais; href; rel; media; hreflang; type; sizes
map Mapa de imagem globais; name j
mark Destaque globais j
menu Menu de comandos globais; type; label j
meta Metadado texto globais; name; http-equiv; content; charset '
meter Medidor globais; value; min; max; low; high; optimum; form
nav Seção contendo links de navegação globais !
,
noscript Conteúdo alternativo para script globais
Imagem, contexto de navegador aninhado ou globais; data; type; name; usenap; form; width; j
object
plugin height
'..............
°1 Lista ordenada globais; reversed; start
■optgroup Grupamento de opções em um controle lístbox globais; disabled; label
option Opção em um controle lístbox ou combo box globais; disabled; label; selected; value
output Container para um valor calculado globais; for; form; name

P Parágrafo globais j
param Parâmetro para o elemento object globais; name; value
pre Bloco de texto pré-formatado globais
progress Barra de progresso globais; value; max; form

q Citação curta globais; cite

rp Parênteses para anotação ruby em texto globais !
rt |Anotação ruby em texto giobais
ruby 1 Anotação ruby globais
|s 1Texto incorreto globais
!samp jSaída genérica de computador globais
script Script incorporado no documento globais; src; async; defer; type; charset
Documento ou seção genérica de uma
section globais
'aplicação.
globais; autofocus; disabled; form; multiple;
select jControle do tipo listbox name; required; size
small Comentário à parte j globais
source ;Mídia source para vídeo ou áudio !globais; src; type; media
span Container genérico globais
strong 1 Importância globais
306 HTML 5

Elem ento Descrição Atributos

Informa sobre estilização incorporada no
style globais; media; type; scoped
documento
sub Subescrito globais
summary Legenda para o elemento details globais
sup Superescrito globais
table Tabela globais; summary
tbody Grupo de linhas em uma tabela globais
td Célula de tabela globais; colspan; rowspan; headers
globais; autofocus; cols; disabled; form;
textarea Campo de texto multilinhas maxlength; name; placeholder; readonly;
required; rows; wrap
tfoot Grupo de linhas de rodapé de uma tabela globais
th Célula de cabeçalho de uma tabela globais; colspan; rowspan; headers; scope
thead Grupo de células de cabeçalho de uma tabela globais
time Data e/ou data-hora globais; datetime; pubdate
title Título do documento globais
tr Linha de tabela globais
track Trilha de texto globais; default; kind; label; src; srclang
ul Container para lista globais
var Variável globais
globais; src; poster; preload; autoplay; loop;
video Player de vídeo
controls; width; height
wbr Quebra de linha globais
 . 'f.J lt ■■■

Atributos da HTML5

Esta tabela foi extraída do site do W 3C e relaciona os atributos da HTML5. Fornece

ainda uma relação dos elementos a que se aplicam, além de uma breve descrição
do atributo.
Âtrlbuto Elem ento(s) Descrição
accept input Dica para o tipo de arquivo esperado por um controle tipo upload
Codificação de caracteres usados nos dados enviados por um
accept-charset form
formulário
accesskey elementos HTML Atalho de teclado para dar o foco a um elemento
action form URL para envio e processamento dos dados de um formulário
alt area; img; input Teste alternativo para descrição de imagens quando não disponíves
async script Execução assíncrona de script
autocomplete form; input Controla o autocompletamento em controles de formulário
button;input;keygen;
autofocus Dá o foco automaticamente quando a página carrega
select;textarea
autoplay audio;video Controla o inicio da execução de mídia quando a página é carregada
challenge keygen String a ser anexada ao pacote gerado para uma chave pública
charset meta Declaração de codificação de caracteres
charset script Declaração de codificação de caracteres de um script
checked command; input Marcar um comando ou controle
cite blockquote; del; ins; q Link para a fonte da citação ou informações adicionais sobre a citação
class elementos HTML Classe à qual o elemento pertence
cols textarea Número máximo de caracteres por linha
colspan td; th Número de colunas em uma célula
content meta Valor do elemento
contenteditable elementos HTML Define conteúdo editável de um elemento
contextmenu elementos HTML Menu de contexto
controls audio;video Controle de mídia nativo do agente de usuário
coords area Coordenadas de uma forma de um mapa de imagens
data object Endereço do recurso

307
 308 HTML 5

Atributo Elem ento(s) Descrição

datetime del; ins Data e opcionalmente hora de uma modificação
datetime time Valor do elemento
default track Usa track default se não houver um disponível
defer script Adia a execução do script
dir elementos HTML Direção do texto de um elemento
Define a direção do texto de um controle de formulário para ser
dirname input; textarea
enviada quando o formulário é submetido ao processamento
button; command; fieldset;
disabled input; keygen; optgroup; Define um controle de formulário desabilitado
option; select; textarea
draggable elementos HTML Define a condição de arraste de um elemento
dropzone elementos HTML Tipo de itens aceitos para drag-and-drop
Tipo de codificação de dados a ser usada no envio de um formulário
enctype form
para processamento
for label Associa um rótulo a um controle de formulário
for output Especifica o controle usado para o cálculo do valor de saída.
button; fieldset;input;
keygen; label; meter;
form Associa um controle a um formulário
object; output; progress;
select;textarea
formaction button;input URL para envio do formulário para processamento
Tipo de codificação de dados a ser usada no envio de um formulário
formenctype button; input
para processamento
formmethod button; input Método HTTP usado no envio do formulário para processamento
formnovalidate button;input Bypassa a validação do formulário
formtarget button; input Contexto do navegador para envio do formulário
headers td; th Células de cabeçalho para uma célula
canvas; embed; iframe;
height Dimensão vertical - altura
img;input; object; video
hidden elementos HTML Define a relevância do elemento
high meter Valor alto em uma faixa de valores
href a; area Endereço de um hiperlink
href link Endereço de um hiperlink
href base URL base do documento
hreflang a; area; link Idioma do destino do link
http-equiv meta Diretiva pragma
icon command ícone para um comando
id elementos HTML 1D de um elemento
ismap img É um mapa de imagem no lado do servidor
keytype keygen Tipo de chave criptográfica a gerar
kind track Tipo da trilha
------
command; menu; optgroup;
label Rótulo
option; track
lang elementos HTML Idioma do conteúdo do elemento
list input Lista de autocompletamento
1 loop audio; video Define mídia executada continuamente
 Apêndice B ■ Atributos da HTML5 309

Atributo Elem ento(s) Descrição

low meter Valor baixo em uma faixa de valores
manifest html Manifesto para cache local
max input Valor máximo
max meter; progress Limite superior de uma faixa de valores
maxlength input; textarea Maior comprimento de um valor
a; area; link; source;
media Define a mídia aplicável
style
method form Método HTTP para envio de formulário
min input Valor mínimo
min meter Limite inferiorde uma faixa de valores
multiple input;select Define aceitação de múltiplos valores
button;fieldset;input;
name keygen;output; select; Nome de controles de formulário a usar em form.elements API
textarea
name form Nome de formulário a usar em document.forms API
name iframe;object Nome de contextos de navegador aninhados
name map Nome de um mapa de imagem referenciado com o atributo usemap
name meta Nome de matadado
name param Nome de parâmetro
novalidate form Bypassa a validação de um controle de formulário
open details Define a visibilidade do elemento details
optimum meter Valor ótimo em um widget de medição
|pattern input Expressão regular a casar com um valor de um controle de formulário
iplaceholder input; textarea Rótulo a ser inserido em um controle de formulário
1
|poster video Frame inicial mostrado no início de um vídeo
!preload audio;video Indicação da quantidade de buffer necessária para uma mídia
pubdate time Data da publicação de um artigo ou de uma página
radiogroup command Nome do grupo de comandos relacionado a um grupo de botões radio
Define que o valor é somente para leitura e não pode ser editado pelo
readonly input; textarea
usuário
Relacionamento existente entre o documento que contém o link e o
rel a; area; link
alvo do link
required input;select; textarea Define um controle de formulário de preenchimento obrigatório
reversed ol Numeração dos itens de listas em ordem inversa
rows textarea Número de linhas visíveis
rowspan td; th Número de linhas contidas em uma célula
sandbox iframe Regras de segurança para conteúdos aninhados
spellcheck elementos HTML Define correção gramatical para o conteúdo de um elemento
scope th Define a quais células uma célula cabeçalho se refere
scoped style Define o escopo de aplicação de estilos
seamless iframe Define aplicação de estilo em conteúdo aninhado no documento
selected option Define seieção padrão para uma opção
ishape area 0 tipo de forma de um mapa de imagem
!size input; select Tamanho do controle de formulário
310

Atributo Elem ento(s) Descrição

sizes link Tamanho dos ícones (para rel="icon")
span col;colgroup Número de colunas no elemento
audio; embed; iframe; img;
src input; script; source; Endereço do alvo
track; video
srcdoc iframe Documento a ser renderizado em um iframe
srclang track Idioma da trilha da mídia
start ol Valor ordinal do primeiro item da lista
step input Intervalo granular da medida de um controle
style elementos HTML Instruções de apresentação e formatação
summary table Texto explicativo da estrutura de uma tabela complexa
tabindex elementos HTML Ordem sequencial de foco no elemento
target a; area Contexto de navegador para destino de hiperlink
Contexto de navegador padrão para destino de hiperlinks e envio de
target base
formulário
target form Contexto de navegador padrão para destino de envio de formulário
title elementos HTML Informação complementar sobre o elemento
title abbr; dfn Texto completo de uma abreviatura
title command Dica descritiva de um comando
title link Título de um link
title link; style Nome de uma folha de estilo alternativa
type a; area; link Dica para o tipo do alvo referenciado
type button Controle tipo botão
type button;input Tipo do controle de formulário
type command Tipo de comendo
embed; object; script;
type Tipo do recurso incorporado
source; style
type menu Tipo de menu
usemap img; object Nome do mapa de imagem a usar
value button; option Valor a ser usado no envio do formulário
value input Valor do controle de formulário
value li Valor ordinal de um item de lista
value meter;progress Valor corrente do controle
value panam Valor do parâmetro
canvas; embed; iframe;
width Dimensão horizontal - largura
img; input; object; video
wrap textarea Modo de quebra de linhas para o valor do controle
 Atributos para eventos
da HTML5

Esta tabela foi extraída do site do W3C e relaciona os atributos para eventos da
HTML5. Fornece ainda uma relação dos elementos a que se aplicam, além de uma
breve descrição do atributo.
Atributo Elemento(s) Descrição
onabort elementos HTML Manipulador do evento abort
onafterprint body Manipulador do evento afterprint para o objeto Window
onbeforeprint body Manipulador do evento beforeprint para o objeto Window
onbeforeunload body Manipulador do evento beforeunload para o objeto Window
onblur body Manipulador do evento blur para o objeto Window
onblur elementos HTML Manipulador do evento blur
oncanplay elementos HTML Manipulador de evento canplay
oncanplaythrough elementos HTML Manipulador de evento canplaythrough
onchange elementos HTML Manipulador de evento change
onclick elementos HTML Manipulador de evento click
oncontextmenu elementos HTML Manipulador de evento coníextmenu
oncuechange elementos HTML Manipulador de evento cuechange
ondblclick elementos HTML Manipulador de evento dblclick
ondrag elementos HTML Manipulador de evento drag
ondragend elementos HTML Manipulador de evento dragend
ondragenter elementos HTML Manipulador de evento dragenter
ondragleave elementos HTML Manipulador de evento dragleave
ondragover elementos HTML Manipulador de evento dragover
ondragstart elementos HTML Manipulador de evento dragstart
ondrop elementos HTML Manipulador de evento drop
ondurationchange elementos HTML Manipulador de evento durationchange
onemptied elementos HTML Manipulador de evento emptied
onended elementos HTML Manipulador de evento ended

311
312 HTML 5

Atributo Elem ento(s) Descrição

M a n ip u la d o r d o e v e n to e rro r p a ra o o b je to W in d o w e M a n ip u la d o r
o n e rro r body
p a ra n o tific a ç õ e s d e e rro s e m s c rip t
o n e rro r e le m e n to s H T M L M a n ip u la d o r d e e v e n to e rro r
o n fo c u s body M a n ip u la d o r d o e v e n to fo c u s p a ra o o b je to W in d o w
o n fo c u s e le m e n to s H T M L M a n ip u la d o r d e e v e n to fo c u s
onhashchange body M a n ip u la d o r d o e v e n to h a s h c h a n g e p a ra o o b je to W in d o w
o n in p u t e le m e n to s H T M L M a n ip u la d o r d e e v e n to in p u t
o n in v a l id e le m e n to s H T M L M a n ip u la d o r d e e v e n to in v a lid
o n keydow n e le m e n to s H T M L M a n ip u la d o r d e e v e n to k e y d o w n
o n k e y p re s s e le m e n to s H T M L M a n ip u la d o r d e e v e n to k e y p re s s
onkeyup e le m e n to s H T M L M a n ip u la d o r d e e v e n to k e y u p
o n lo a d body M a n ip u la d o r d o e v e n to lo a d p a ra o o b je to W in d o w
o n lo a d e le m e n to s H T M L M a n ip u la d o r de e v e n to load
o n lo a d e d d a ta e le m e n to s H T M L M a n ip u la d o r d e e v e n to lo a d e d d a ta
o n lo a d e d m e ta d a ta e le m e n to s H T M L M a n ip u la d o r d e e v e n to io a d e d m e ta d a ta
o n lo a d s t a r t e le m e n to s H T M L M a n ip u la d o r d e e v e n to lo a d s ta rt
onm essage body M a n ip u la d o r d o e v e n to m e s s a g e p a ra o o b je to W in d o w
onm ousedow n e le m e n to s H T M L M a n ip u la d o r d e e v e n to m o u s e d o w n
onm ousediove e le m e n to s H T M L M a n ip u la d o r d e e v e n to m o u s e m o v e
o n m o u se o u t e le m e n to s H T M L M a n ip u la d o r d e e v e n to m o u s e o u t
o n m o u se o v e r e le m e n to s H T M L M a n ip u la d o r d e e v e n to m o u s e o v e r
onm ouseup e le m e n to s H T M L M a n ip u la d o r de e v e n to m o u s e u p
o n m o u se w h e e l e le m e n to s H T M L M a n ip u la d o r d e e v e n to m o u s e w h e e l
o n o ff lin e body M a n ip u la d o r d o e v e n to o fflin e p a ra o o b je to W in d o w
o n o n lin e body M a n ip u la d o r do e v e n to o n lin e p a ra o o b je to W in d o w
io n p a g e h id e body M a n ip u la d o r do e v e n to p a g e h id e p a ra o o b je to W in d o w
■o n pageshow body M a n ip u la d o r d o e v e n to p a g e s h o w p a ra o o b je to W in d o w
1
io n p a u s e e le m e n to s H T M L M a n ip u la d o r d e e v e n to p a u se
o n p la y e le m e n to s H T M L M a n ip u la d o r d e e v e n to p la y
o n p la y in g e le m e n to s H T M L M a n ip u la d o r d e e v e n to p la y ín g
o n p o p s ta te body M a n ip u la d o r d o e v e n to p o p s ta te p a ra o o b je to W in d o w
o n p ro g r e s s e le m e n to s H T M L M a n ip u la d o r d e e v e n to p ro g re s s
o n ra te c h a n g e e le m e n to s H T M L M a n ip u la d o r d e e v e n to ra te c h a n g e
o n re a d y s ta te c h a n g e e le m e n to s H T M L M a n ip u la d o r d e e v e n to re a d y s ta te c h a n g e
o n re d o body M a n ip u la d o r d o e v e n to re d o p a ra o o b je to W in d o w
o n re s e t e le m e n to s H T M L M a n ip u la d o r d e e v e n to re s e t
o n r e s iz e body M a n ip u la d o r d o e v e n to re s iz e p a ra o o b je to W in d o w
o n s c r o ll body M a n ip u la d o r d o e v e n to sc ro ll p a ra o o b je to W in d o w
o n s c r o ll e le m e n to s H T M L M a n ip u la d o r d e e v e n to s c ro ll
onseeked e le m e n to s H T M L M a n ip u la d o r d e e v e n to se e k e d
o n s e e k in g e le m e n to s H T M L M a n ip u la d o r d e e v e n to s e e k in g
o n s e le c t e le m e n to s H T M L M a n ip u la d o r d e e v e n to s e le c t
■onshow e le m e n to s H T M L M a n ip u la d o r d e e v e n to s h o w
I o n s t a ll e d e le m e n to s H T M L M a n ip u la d o r de e v e n to sta lle d
j o n s to r a g e body M a n ip u la d o r do e v e n to s to ra g e p a ra o o b je to W in d o w
o n s u b m it e le m e n to s H T M L M a n ip u la d o r d e e v e n to s u b m it
Apêndice C ■ Atributos para eventos da HTML5 313

Atributo Elemento(s) Descrição

onsuspend e le m e n to s H T M L M a n ip u la d o r d e e v e n to su s p e n d
o n tim e u p d a te e le m e n to s H T M L M a n ip u la d o r d e e v e n to tim e u p d a te
o nundo body M a n ip u la d o r d o e v e n to u n d o p a ra o o b je to W in d o w
o n u n lo a d body M a n ip u la d o r d o e v e n to u n lo a d p a ra o o b je to W in d o w
o n v o lu m e c h a n g e e le m e n to s H T M L M a n ip u la d o r d e e v e n to v o lu m e c h a n g e
o n w a it in g e le m e n to s H T M L M a n ip u la d o r d e e v e n to w a itin g
 Referências

KEITH, Jeremy. DOM Scripting: Web Design with JavaScript and the Document Object
Model. New York: Friends of ED, 2005.

KEITH, Jeremy HTML5 for Web Designers. New York: Jeffrey Zeldman, 2010.

KOCH, Peter-Paul. Ppk on JavaScript. Berkeley: NewRiders, 2007.

LAWSON, Bruce; SHARP, Remy Introducing HTML5. Berkeley: NewRiders - Voices

That Matter, 2011.

Mozilla Developer Network. Disponível em: <h ttp s :/ / d e v e lo p e r .m o zilla .o rg / e n -u s / >.

PILGRIM, Mark. HTML5: Up and Running. 1 ed. Sebastopol: O’Reilly, 2010.

W 3C. Disponível em: < http://w w w .w 3.o rg > .

W H A T W G . Disponível em: < http://www.whatwg.org/> .

314
indice remissive) 315

k markers 226
Alerta 16 mobile 226
API de canvas path 227
addColorStopO 154 sensor 228
arc() 150 size 225
arcTo() 149 visible 227
beginPathO 148 zoom 225
clearRectO 146 aria-* 294
closePathO 152 ARIA 287
createLinearGradient() 154 Abstract roles 289
createPattern() 156 composite 289
createRadialGradientO 154 input 289
drawImageO 164,165 landmark 290
fill() 151 propertie 288
fillRectO 145 range 290
fillStyle 145 role 288
fillTextO 167 roletype 290
font 166 section 290
globalAlpha 153 sectionhead 290
globalCompositeOperation 157 select 290
lineCap 153 state 288
linejoin 153 structure 290
lineToO 148 widget 290
lineWidth 145 window 290
moveToO 148 Arquivos para download 18
rect() 152 Atributos globais 56
rotateO 163 accesskey 56
scale() 161 class 57
shadow 147 contenteditable 57
shadowBlur 147 contextmenu 58
shadowColor 147 dir 59
shadowOfïset 147 draggable 59
shadowOfïsetX 147 hidden 60
shadowOffsetY 147 id 60
strokeO 148 item 61
strokeRect() 144 lang 61
strokeStyle 144 spellcheck 61
strokeTextO 167 style 62
textAlign 168 tabinde 62
textBaseline 169 title 62
translate () 162 Atributos globais da HTML5 171
API do Google Static Maps 224 accesskey 171
center 225 class 173
format 225 contenteditable 173
language 226 contexmenu 174
maptype 226 dir 174
draggable 175
316 HTML 5

dropzone 176 poster 119

hidden 176 preload 117
id 177 readyState 117
itemid 178 seekable 119
itemprop 178 seeking 119
itemref 178 startTime 120
itemscope 178 tracks 119
itemtype 178 videoHeight 120
lang 178 videoWidth 120
spellcheck 178 volume 120
style 179 width 120
tabindex 179 Atributos para formulários
title 180 autocomplete 199-
Atributos globais para roles 296 autofocus 198
aria-atomic 296 dirname 200
aria-busy 296 form 201
aria-controls 296 formaction 202
aria-describedby 296 formenctype 202
aria-disabled 296 formmethod 202
aria-dropeffect 296 formnovalidate 203
ana-flowto 296 formtarget 203
aria-grabbed 296 list 204
aria-haspopup 296 min 204
aria-hidden 297 novalidate 205
aria-invalid 297 placeholder 198
aria-label 297 required 198
aria-labelledby 297 Audio 84
aria-live 297 autoplay 86
aria-owns 297 codec 85
aria-relevant 297 controls 87
Atributos para API de mídia 115 loop 86
autoplay 119 media 85
buffered 117 pause() 87
controls 119 playO 87
currentSrc 116 preload 86
currentTime 120 source 85
defaultPlaybackRate 118 src 84
duration 121 type 85
ended 118 volume 87
endTime 121
error 115 c
loop 120 Canvas 140
muted 120 contexto bidimensional 142
networkState 116 contexto tridimensional 143
paused 118 height 141
playbackRate 118 width 141
played 118 CERN 22, 23
índice remissivo 317

C h ris Lilley 25 stalled 125

C o n v en ções tip ográficas 16 su sp en d 125
C o u g a r 25, 2 6 tim eu p d ate 126
v o lu m ech an ge 127
D w aitin g 126
D an C o n n o lly 23
Dave R ag gett 2 2 F
D estaq u es em geral 18 fram es 25
D o c u m e n t S tru ctu re roles 2 9 2
article 2 9 2 H
c o lu m n h ead er 2 9 2 h eigh t
definition 2 9 2 A trib u to s para A PI de m íd ia 120
d irecto ry 2 9 2 h iperlinks 21
docum ent 292 h ip e rte x to 2 0
grou p 2 9 2 H T M L + 22
h eadin g 2 9 3 H T M L 2.0 23
tm g 2 9 3 H T M L E R B 25
fist 2 9 3
listitem 2 9 3 I
m ath 2 9 3 IE T F 24
n ote 2 9 3
J
p resen tation 2 9 3
region 2 9 3 Jim C lark 24

row 2 9 3
L
ro w h ead er 2 9 3
L an d m ark roles 2 9 3
sep arato r 293
ap p lication 2 9 3
to o lb ar 293
b an n er 2 9 3
E co m p le m e n ta ry 2 9 3

E ven tos p ara A PI de m íd ia 124 con ten tin fo 2 9 3

a b o rt 125 form 2 9 4

can p lay 126 m ain 2 9 4

can p lay th ro u g h 126 n avigation 2 9 4

search 2 9 4
d u ratio n ch an g e 127
em ptied 125 L y n x 23

en ded 127
M
erro r 125
M an ifest
lo ad ed d ata 126
A pp lication cach e 2 7 9
lo ad ed m etad ad ta 125
A tu alização do m an ifesto 2 7 8
lo a d s ta rt 124
cach ed 2 8 2
p ause 125
C A C H E M A N IF E S T 2 7 7
play 125
d o w n load in g 2 8 2
playing 126
e rro r 2 8 3
p rogress 125
FA L L B A C K 2 7 7
ratech an g e 127
m an ifest 2 7 8
seeked 126
NETW O RK 277
seekin g 126
 HTML 5

noupdate 281 controls 182

obsolete 283 default 182
oncheking 281 dirname 183
progress 282 form 183
status 280 formaction 183
swapCacheO 281 formenctype 183
update() 281 formmethod 184
updateready 282 formnovalidate 184
Manifesto 276 formtarget 184
Marcação 17 icon 185
Marc Andreessen 24 keytype 185
Métodos para API de mídia 123 kind 185
addTrackO 124 list 186
canPlayTypeO 123 loop 186
load() 123 low 187
pause() 123 manifest 187
playO 123 max 187, 204
Métodos para Geolocation 217 mm 188
getCurrentPositionO 217 novalidate 188
watchPositionO 223 open 188
Microdados 287, 297 optimum 188
document.getltemsO 301 pattern 188
element.itemld 301 ping 189
element.itemPropo 301 placeholder 189
element. itemRef 301 poster 190
element.itemScope 301 preload 190
element. itemType 301 pubdate 190
element. itemValue[=value] 301 radiogroup 190
element.properties 301, 302 required 191
item 298 reversed 191
itemid 300 sandbox 192
itempropo 300 scoped 193
itemref 300 seamless 193
itemscope 300 sizes 194
itemtype 300 srcdoc 194
vocabulário para 298 srclang 195
Mosaic 23 step 195
wrap 195
N Novos elementos 62
NCSA 23 article 62
Netscape 24 aside 63
Novos atributos da HTML5 180 audio 64
async 181 canvas 64
autocomplete 181 command 64
autofocus 181 datalist 67
autoplay 182 details 68
challenge 182 figcaption 70
índice remissivo 319

figure 70 em ail 2 0 8
footer 71 m o n th 210
h ead er 73 n u m b er 212
h gro u p 74 ran ge 212 ’
keygen 75 search 2 0 5
m ark 75 tel 2 0 6
m en u 65 tim e 210
m eter 76 url 2 0 7
nav 7 7 w eek 211
o u tp u t 7 8
p rogress 8 0 V
ru b y 81 V ideo 91
section 81 asp ect ratio 9 8
so u rce 8 2 au d io 9 7
s u m m a ry 6 9 au to 95
tim e 82 au top lay 95
track 83 co d ecs 9 4
vid eo 83 con trols 9 6
H .2 6 4 93
s h eigh t 9 8
SG M L 22 loop 95
Site d o livro 19 m ed ia 9 4
style 62 m e ta d a ta 95
m p 4 93
I m u ted 9 7
T erm in o log ia 16 ogv 93
T im B ern ers-L ee 21 p o ster 9 6
title 62 p reload 9 5
T rack 9 9 sou rce 9 4
cap tio n s 9 9 src 95
ch ap ters 9 9 typ e 9 4
ch arset 9 9 W eb M 93
d escrip tion s 9 9 w id th 9 8
Firefogg 101
H an d B rak e 109 w
k ind 9 9 W 3 C 24
label 100 W A I-A R IA 2 8 7
m e ta d a ta 9 9 W eb M essaging 252
srclan g 100 m essage 2 5 4
subtitles 9 9 p olítica d a m esm a origem 252
W eb SR T 9 9 w in dow .p ostM essage 253
W e b V T T 100 W eb S o ck et 2 6 0
typ e 2 0 5 b u ffered A m ou t 261
co lo r 213 E ven tos 261
d ate 2 0 9 on clo se 2 6 2
d atetim e 2 0 9 o n e rro r 2 6 3
d atetim e-lo cal 211 o n m essage 2 6 2
320 HTML 5

on op en 261 m en u item rad io 291

read yS tate 261 op tion 291
send () 2 6 0 p rog ressb ar 291
W eb S torage 233 ra d io 291
A JA X M assive Storage System 235 rad io g ro u p 2 9 2
A rm azen ag em c o m JS O N 241 scrollb ar 291
B an co de d ad o s 2 4 6 slider 291
clear() 2 4 0 sp in b u tto n 291
cook ies 2 3 4 statu s 291
L ven to storage 2 4 4 tab list 2 9 2
ey() 241 tree 2 9 2
G ears 235 treegrid 2 9 2
g etltem i) 2 4 0 W W W -ta lk 2 2
length 241
localS to rag e 237
LSO - L o cal Shared O b ject 2 3 4
rem oveltem O 2 4 0
session Storage 235
setltem f) 239
u serD ata B eh avior 2 3 4
W eb W orkers 2 6 3
clo set) 274
e rro r 271
im p o rtS crip ts 273
m essage 2 6 9
m u lti-th read 2 6 4
new W ork er() 2 6 8
p ostM essageO 2 6 9
single-th read 2 6 4
te rm in a te !) 274
W H A TW G 26
W id g et roles 2 9 0
alertd ialog 2 9 0
b u tto n 2 9 0
ch eck b o x 2 9 0
com b ob ox 292
d ialog 2 9 0
g rid 2 9 2
grid cell 291
link 291
listb ox 2 9 2
log 291
m arq u ee 291
m en u 2 9 2
m en u b ar 2 9 2
m enu item 291
m en u item ch eck b o x 291