Use A Cabeça! Programação Em HTML5

este é um novo capítulo 531

Os dez tópicos mais

importantes (que não vimos)

Apêndice:

Vimos muita coisa e você já praticamente terminou este

livro.

Sentiremos sua falta, mas, antes de deixarmos você ir, queremos lhe

oferecer pelo mundo um pouco mais de preparação. Claro que não há como

ensinar tudo o que você precisa saber nesse, relativamente, pequeno capítulo.

Na verdade, nós, originalmente, incluímos tudo o que você precisava saber sobre

HTML5, reduzindo o tamanho da fonte para .00004. Tudo caberia, mas ninguém

conseguiria ler. Então, jogamos a maior parte fora e mantivemos o melhor para

este apêndice dos Dez Mais.

Este realmente é o fim do livro. Exceto pelo índice, é claro (de leitura necessária!).

remanescentes

PFCG_HeadFirstHTML5Prog.indb 531 05/06/2014 16:21:57

modernizr e audio

532

apêndice

N

0

1 Modernizr

Uma coisa que você provavelmente percebeu neste livro

foi que, quando quiser detectar suporte do navegador para

uma API, não há uma maneira uniforme de fazê-lo; de

fato, quase toda API é detectada de uma maneira diferente.

Para geolocalização, por exemplo, procuramos pelo objeto

geolocalização como uma propriedade do objeto navigator;

enquanto que para armazenamento web, vemos se o

localStorage está definido no objeto window; para vídeo,

vemos se podemos criar um elemento vídeo no DOM; e

assim por diante. Será que há uma maneira melhor?

Modernizr é uma biblioteca JavaScript de fonte aberta

que fornece uma interface uniforme para detectar

suporte ao navegador. O Modernizr cuida de todos os

detalhes dos diferentes meios de detecção, mesmo nos casos de

navegadores mais antigos. Você encontrará a página do Modernizr em

http://www.modernizr.com/

O Modernizr ganhou muito suporte de desenvolvedores. Por isso, você verá

ele sendo usado amplamente pela Web. Recomendamos muito.

Aqui temos um exemplo de

detecção para geolocalização,

armazenamento web e vídeo, todos

de uma maneira consistente.

Incluindo Modernizr em sua página

Para usar o Modernizr, você precisa carregar a biblioteca JavaScript

dentro de sua página. Para tanto, primeiro visite o site Modernizr

em http://www.modernizr.com/download/, que permite que

você configure de forma personalizada uma biblioteca que contém

exatamente o código de detecção que precisa (ou pode sempre pegar

tudo enquanto estiver lá). Depois disso, armazene a biblioteca num

arquivo de sua escolha e carregue-o dentro de sua página (visite o

site Modernizr para tutoriais adicionais e documentação para melhor

utilização dele).

Como detectar suporte

Uma vez que tenha instalado o Modernizr, detectar elementos HTML5 e

APIs JavaScript fica muito mais fácil e mais direto:

if (Modernizr.geolocation) {

console.log("You have geo!");

}

if (Modernizr.localstorage) {

console.log("You have web storage!");

}

if (Modernizr.video) {

console.log("You have video!");

}

Nota: o Modernizr vai muito além

do que simples detecção de API

e pode também detectar suporte

para recursos CSS, codecs de

vídeo e muitos outros. Então, dê

uma olhada!

PFCG_HeadFirstHTML5Prog.indb 532 05/06/2014 16:21:58

remanescentes

você está aqui 

533

N

0

2 Áudio

O HTML5 lhe dá uma maneira padrão de reproduzir áudio em suas páginas,

sem um plugin, com o elemento <audio>:

<audio src="song.mp3" id="boombox" controls>

Sorry but audio is not supported in your navegador.

</audio>

Além do elemento <audio>, também há uma API Áudio correspondente

que suporta os métodos que você espera, como play, pause e load. Se

isso lhe parece familiar, deve ser mesmo, pois a API áudio espelha (onde é

apropriado) a API vídeo. Áudio também suporta muitas das propriedades

que você viu na API vídeo, como src, currentTime e volume. Aí vai um

pouco de código de áudio, para você ter um gostinho de usar a API com um

elemento na página:

var audioElement =

document.getElementById("boombox");

audioElement.volume = .5;

audioElement.play();

Assim como para vídeo, cada navegador implementa sua própria aparência

e sensação para os controles do player (o que, tipicamente, consiste em uma

barra progressiva com controles de play, pause e volume).

Apesar da simples funcionalidade, o elemento áudio e a API lhe dão muito

controle. Assim como fizemos com vídeo, você pode criar experiências

web interessantes, escondendo os controles e gerenciando a reprodução

do áudio em seu código. Com o HTML5, você agora pode fazer isso sem a

preocupação de ter de usar (e aprender) um plugin.

Um padrão para codificações de áudio

Infelizmente, como o vídeo, não há padrão

para codificação do áudio. Três formatos

são populares: mp3, wav e Ogg Vorbis. Você

descobrirá que o suporte para esses formatos

varia de acordo com a paisagem do navegador,

com diferentes níveis de suporte para os vários

formatos em cada navegador (na época em

que este livro foi escrito, o Chrome era o único

navegador que suportava os três formatos).

Parece-lhe familiar?

Sim, áudio suporta

funcionalidades

similares às do vídeo

(menos o vídeo, óbvio!).

Pegue uma referência ao

elemento áudio; então,

abaixe seu volume pela

metade e comece a tocar.

PFCG_HeadFirstHTML5Prog.indb 533 05/06/2014 16:21:58