Slides da aula 5 de HTML5 da Especializa. O curso inteiro está disponível gratuitamente no endereço: http://ead.especializa.com.br/curso/html5-basico

2. HTML5 ESSENCIAL
Fundamentos de todo serviço na Web

3. EMENTA
• Fundamentos de Web
• Documentos HTML
• Conteúdo
• Multimídia
• Semântica
• Desempenho
3

4. O QUE VEREMOS AGORA
• Fundamentos da Web
• Documentos HTML
• Conteúdo
• Multimídia
• Imagens e objetos
• Áudio e Vídeo
• Canvas
• Imagens vetoriais
• Semântica
4

5. IMAGENS E OBJETOS
• O HTML5 trouxe também a tag <figure> para
expressar “ilustrações”
• É mais uma tag semântica, sem nenhuma expressão estética
• Apenas representa que em seu conteúdo, estamos querendo
carregar uma imagem, um gráfico, uma foto, um exemplo
de código ou qualquer coisa que consideremos ilustração
de algum assunto que esteja sendo abordado na página.
• A tag <figcaption> pode vir no conteúdo de
<figure>
• Útil para se definir um rótulo para a ilustração demarcada em
<figure>.
5

6. IMAGENS E OBJETOS
• A tag <img/> é útil para carregar uma imagem
• Ex.: <img src="imagens/logomarca.png" />
• O atributo src é onde inserimos a URL de localização da
imagem.
• Dicas
• Todo atributo src (source), carrega algum conteúdo externo
na página HTML atual
• A URL disposta no src pode ser analítica (incluindo desde o
protocolo. Ex: http://www.especializa.com.br/imagem.jpg)
• Pode também ser relativa ao local de onde a própria página
HTML foi requisitada
• O primeiro exemplo em negrito considerou que no mesmo local onde
está a página que o escreveu, há um subdiretório imagens com o
arquivo logomarca.png dentro
• É o browser quem transforma esse caminho relativo em tag analítica
6

7. IMAGENS E OBJETOS
• Acessibilidade em imagens
• Imagens são alvos de críticas por dificultar a acessibilidade
• Não é recomendado o uso de imagens em substituição de conteúdo
texto por dificultar a vida de buscadores e leitores de tela
• Felizmente, existem atributos úteis para carregamento de
informações acerca da imagem carregada
• alt - Carrega um texto alternativo que aparece quando a
imagem não é carregada e lido por leitores de tela
• longdesc - Útil apenas para leitores de tela ou buscadores, é
o local onde se recomenda trazer mais detalhes sobre a
imagem
• Ex.:
<img src="imagens/foto.png" alt="Foto da fachada da Especializa"
longdesc="Foto imponente apresentando uma pequena fração das
luxuosas instalações da Especializa Treinamentos. O céu está claro
conforme o contrato estabelecido com São Pedro para este
momento"/>
7

8. OBJETOS ESPECIAIS
• O HTML5 trouxe uma série de novas tags que
além de recuperar semântica fazem o browser
renderizar objetos visuais mais elaborados
• <progress> - Tag que exibe um gráfico de progresso de
alguma tarefa.
• Antigamente só possível através de imagens ou CSS.
• Ex: <progress id="p" value="90" max="100">90</progress>
• Dessa forma o HTML mantém a semântica da informação e o browser
exibe um controle de mais alto nível
• <meter> - Campo semelhante ao progress.
• A documentação oficial indica que o meter deva ser usado para
alguma medida e não para andamento
• O Chrome exibe o <progress> como uma imagem em movimento, o
<meter> é desenhado estático
8

9. OBJETOS PLUGINS
• Plugins são extensões de browsers para
finalidades específicas
• Os principais exemplos de plugins são o Flash Player e os
players de vídeos como Real Player, Quick Time ou Windows
Media Player
• As tags utilizadas para carregar objetos externos são
<object> e <embed>
• Ambas podem conter tags <param> em seu interior para
permitir a passagem de parâmetros para o objeto interno
• O primeiro plugin criado e usado até hoje foi o
Applet Java
• O HTML 4.01 depreciou a tag <applet> e sugeriu o uso de
<object> no lugar a fim de padronizar
9

10. HTML5 AUDIO E VIDEO
• Até o HTML5 não havia controle padrão para adicionar audio e
vídeo a uma página
• Essa atividade era feita por plugins, como o Flash.
• Hoje existem as tags <audio> e <video> com propriedades
semelhantes
• Todos os atributos de <audio> estão presentes em <video>,
mas esta última possui dados a mais
• Ambas as tags suportam o atributo src para carregar o
conteúdo como se faz como imagens (tags <img>)
• Tags <source>, no interior delas, servem para carregar a
primeira mídia que o browser suportar da lista. Ex.:
• <audio autoplay controls loop>
<source src="midia.mp3"/>
<source src="midia.aac"/>
<source src="midia.wav"/>
</audio>
10

11. ARQUIVOS MULTIMIDIA
• Bitmaps e formatos de imagens
• Toda imagem pode ser expressa como um mapa de bits
(.bmp) ou como algum algoritmo que a deixe menor
• Esses algoritmos podem trazer perdas de qualidade
• Arquivos .jpg possuem níveis de compressão que vão gradativamente
perdendo a qualidade à medida que se aumente a compressão
• Trilhas de audio e video
• Vídeos são sequências de imagens que trocam rápido o
suficiente pro olho humano enxergar um movimento fluido
• Em geral algo em 20 e 30 frames por segundo (FPS)
• Gravações de áudio e de vídeo podem ser compactadas
usando algoritmos chamados codecs
• Ex.: Audio - Ogg Vorbis, MP3, AC3 (Dolby), WAV, WMA, etc
• Ex: Video - x263, x264, Divx, xVid, Ogg Theora
11

12. ARQUIVOS MULTIMIDIA
• Arquivos de vídeo podem conter mais de uma trilha de vídeo,
de áudio e até de legenda.
• Esses arquivos são chamados de formatos ou de containers e
os mais populares são avi, mp4, wmv, rmvb, mkv e mais
recentemente o que foi criado na tentativa de padronizar as
coisas no HTML5, WebM.
• Além de mais compactos, mais leves, alguns containers também são
mais limitados do que outros, podendo suportar ou não legenda ou
escolha de mais de uma faixa de audio (para dublagens, por exemplo)
• Existe ainda uma tabela de compatibilidade entre containers e codecs.
Nem todo container é capaz de abarcar trilhas de audio ou de vídeo
compactada por certos codecs
• Devido a essa guerra, os browsers apresentam também suportes
diferentes para codecs e containers, daí a necessidade de se ter mais
de uma tag <source> por elemento <audio> ou <video>
• O plugin do Flash dos browsers popularizou o formato .flv mas
seu uso aos poucos está sendo desencorajado em favor do
padrão de vídeo do HTML5
12

13. ARQUIVOS MULTIMIDIA
• Padrões de compactação de audio e vídeo
• H.261. Criado em 1991, foi o primeiro grande padrão de
compactação de vídeo digital
• MPEG-1 Parte 2. Baseado no H.261, foi criado no intuito de
possibilitar vídeos com qualidade VHS caberem em CDs
• MPEG-2 Parte 2 ou H.262. Formato inicialmente padrão dos DVDs e
das TVs digitais, que o estão trocando pelo MPEG-4
• H.263. Padrão utilizado por vídeos Flash que se preocupam mais com
a compactação do que com a qualidade final
• MPEG-4. Projeto guarda-chuva criado para estabelecer subpadrões
de acordo com ambiente onde quer transmitir o vídeo
• MPEG-4 Parte 2. Padrão utilizado por codecs como o Divx.
• MPEG-4 Parte 10 ou H.264. Padrão preferido da Apple e do Google
para transmissão na Internet. É também reconhecido por
equipamentos domésticos e tem a fama de proporcionar alta
qualidade em pequenos tamanhos finais de arquivos
13

14. ARQUIVOS MULTIMIDIA
• Codecs de audio
• AC3 - Dolby Digital. Suporta até 6 faixas de audio. Bom para
sistemas surround de home theaters.
• Ogg Vorbis. Possui uma ótima relação de compactação x perda de
qualidade. Open source e totalmente livre de patentes.
• MP3 - MPEG-1 Audio Layer 3. Disparadamente o codec mais
popular, sobretudo por ser distribuída e arquivos de próprio nome
como faixa órfã. Pouca gente sabe, mas não é um formato livre de
patentes
• Codecs de vídeo
• DivX. Muito utilizada em containers AVI. Já é reconhecida pela maioria
dos DVD Players caseiros. Possui uma boa taxa de compactação
mesmo com qualidade próxima de DVDs
• XViD. Semelhante a anterior, mas de código aberto e também
bastante popular
• VP8. Codec da On2, empresa comprada pelo Google, que logo tratou
de anunciar a abertura de seu código fonte e sugerir seu uso como
padrão de vídeo na web (WebM)
14

15. ARQUIVOS MULTIMIDIA
• Containers
• AVI (Audio Video Interleave). Um dos formatos mais populares de vídeos
• MP4 (MPEG-4 Parte 14). Container padrão para formatos MPEG-4
• FLV (Flash Video). Container da Adobe para vídeos MPEG-4 em Flash
• MOV. Container do QuickTime da Apple
• OGG, OGM e OGV. Containers de código aberto
• MKV (Matroska). Container de código aberto considerado por muita
gente como o melhor e mais versátil na atualidade
• VOB (DVD Video Object). Container padrão de arquivos de DVDs
• ASF. Container da Microsoft para arquivos .wma, .wmv ou .asf
• WebM (Web Media). Sugerido por Google, Opera e Mozilla para oficializar
um formato para a Web sem variações de codecs
• Utiliza necessariamente o Codec de vídeo VP8 e de audio Ogg Vorbis
em containers MKV salvos, em geral, com a extesão .webm
15

16. TIPOS DE ARQUIVOS
• Confira a lista de compatibilidades
• Entre no site http://fmbip.com e verifique o que o seu browsers
suporta
16

17. TIPOS DE ARQUIVOS
• Confira a lista de compatibilidades
• Entre no site http://fmbip.com e verifique o que o seu browsers
suporta
16

18. AUDIO
• Atributos presentes na tag <audio>:
• controls: Sua presença exibe controles de play/pause,
andamento e volume como o acima.
• src: Define o caminho do arquivo. Melhor utilizar nas tags
internas <source>.
• autoplay: Determina se a mídia será tocada assim que a
página for carregada, sem precisar de ação do usuário
• preload: Manda o browser ir carregando a mídia antes do
usuário clicar em play e se a mídia estar em autoplay.
• loop: Determina o reinício automático quando a mídia concluir
17

19. VIDEO
• A tag <video> funciona de modo semelhante
embora possua alguns atributos a mais:
• width e height - para definir respectivamente largura e altura
em pixels do vídeo
• poster - URL para uma imagem que será a capa do vídeo
18

20. CONTEUDO DAS TAGS
• no interior das tags <audio> e <video> é
possível, definir algo que só será lido por
browsers que não as suportarem
• <video>
<source src="Video.mp4" type="video/mp4"/>
<source src="Video.webm" type="video/webm"/>
Você chama isso de browser? Joga ele no mar!
Ele não entende MP4 nem WebM.
</video>
• Vídeos podem ter seus mime types explicitados
• Perceba no exemplo acima a presença do atributo type em
cada tag <source>.
• Além de <source>, as tags de audio e vídeo
podem conter tags <track> que veremos a
seguir
19

21. MEDIA TRACKS
• Tanto audio quanto vídeo trazem um conceito
poderoso, mas ainda muito novo em
desenvolvimento chamado Media Tracks
• Para adicionar uma media track, defina uma tag <track> no
interior de uma tag de <video>, por exemplo:
• <video>
<source src="exemplo.webm" type="video/webm"/>
<track kind="subtitles" src="legenda.srt"/>
</video>
• O código acima se propõe a carregar um arquivo de legenda
enquanto exibe o vídeo
• Os primeiros browsers a suportar <track> são Chrome 18 e
Internet Explorer 10
• Para habilitar o suporte a tracks no Chrome acesse o endereço chrome://flags e habilite a opção Enable <track> element.
• Sua alteração só terá efeito após reiniciar o browser
20

22. MEDIA TRACKS
• Confira a lista de kinds permitidos em tracks
• subtitles - Traduções do audio. As famosas legendas que
acompanham os vídeos. Mais aplicáveis a sons audíveis mas
ininteligíveis como o fala em outro idioma.
• captions - Transcrições do audio. Mais aplicáveis a fatos de
vídeo que devam ser descritos para quem não tenha
condições de ouvir, mesmo que momentaneamente
• descriptions - Transcrições do vídeo. Úteis para quem não
tenha condições de ver o que passa no vídeo e deseja saber o
que está sendo apresentado
• chapters - Marcações de capítulos. Útil para a navegação a
determinadas partes do vídeo
• metadata - Faixas com a finalidade exclusiva de prover
informações para scripts ouvintes do andamento do vídeo
21

23. MATRIZ DE BROWSERS
• Vantagens de cada browser
• O browser que suporta a maior variedade de formatos é o Safari
• O Firefox e o Opera só suportam WebM, mas o IE não
• O IE suporta .mp4 com codec de vídeo h.264 e vídeo AAC (ou mp3)
• O controle padrão mais evoluído é o do Firefox
• Dá play/pause no vídeo ao clicar na imagem ou teclar espaço
• Avança e retrocede o vídeo com as setas
• O IE também tem alguma funcionalidade implementada através do teclado
• Só quem tem botão fullscreen é o Firefox e o Safari
• O browser mais evoluído no uso de <track> é o Chrome
• Browsers testados
• Chrome 18, Safari 5.1, Opera 11.61, Firefox 11, IE 9
22

24. AUDIO E VIDEO
• Links úteis sobre audio e vídeo no HTML5
• http://dev.opera.com/articles/view/everything-you-need-to-know-
about-html5-video-and-audio/
• http://www.longtailvideo.com/html5/
• http://html5videoguide.net/presentations/WebVTT/#landing-slide
• http://www.html5rocks.com/en/tutorials/track/basics/
• http://www.tutorialspoint.com/html5/html5_audio_video.htm
• http://html5doctor.com/native-audio-in-the-browser/
23

25. CANVAS
• O HTML5 trouxe o conceito de canvas, para
manipulação de bitmaps de imagens
dinamicamente (via Javascript) em documentos
HTML
• A tag <canvas> é o container da imagem a ser trabalhada na
tela
• Até o Internet Explorer (desde o 9) é capaz de entender canvas
• É possível desenhar em 2D e em 3D a partir dos chamados
contextos do canvas
• Ex:
• <canvas id="quadro" width="300" height="300"> Infelizmente seu browser não suporta canvas
</canvas>
• Não dá pra falar em canvas sem falar em Javascript
• Vamos apresentar um exemplo só pra ninguém ficar triste =)
24

26. EXEMPLO DE CANVAS
• Com o exemplo, o usuário
pode criar uma imagem como
essa ao lado ---->
• <script>
$(function() {
$('#quadro').click(function(event) {
var context = this.getContext('2d');
context.strokeStyle = '#ABC';
context.lineWidth = 3;
var x = event.pageX - 10;
var y = event.pageY - 10;
context.moveTo(x+40,y);
context.arc(x,y,40,0,Math.PI*2,true);
context.stroke();
})
})
</script>
25

27. SVG
• Scalable Vector Graphics
• Gráficos vetoriais escaláveis.
• Dialeto XML (assim como o próprio HTML) baseado
nos dialetos PGML, da Adobe e VML da Microsoft
• É bastante antiga mas seu uso nunca foi tão popular
• O que é imagem vetorial
• Imagem bitmap é baseada no cômputo de bytes que informam
as cores em cada unidade na tela. Ou seja, 3 bits (RGB) para
cada pixel na tela
• Imagem vetorial é a interpretação de operações matemáticas
para montagem desses pontos
• Ampliar um bitmap causa perda de informação e deformação da
imagem, já um vetor ampliado é apenas o recálculo sugerido em
escala maior. Não há perda alguma de informação
• Vetores maiores ocupam o mesmo espaço em bytes do que os
menores
26

28. SVG
• Exemplo
<svg width="100%" height="100%">
<circle r="50" cx="100" cy="100" fill="green"/>
</svg>
• Esse é o conteúdo do arquivo .svg, para adicioná-lo
em seu HTML faça o seguinte:
• Usando object:
<object src="imagem.svg" classid="image/svg+xml"
type="image/svg+xml" height="100" width="100" />
• Usando embed:
<embed src="imagem.svg" type="image/svg+xml"
height="100" width="100" />
• Usando img:
<img src="imagem.svg" height="100" width="100" />
27

29. SVG
• O HTML5 suporta adicionar SVG inline
como se faz com canvas
<body>
<h1>Exemplo de SVG Inline</h1>
<svg>
<circle r="50" cx="100" cy="100" fill="green"/>
</svg>
</body>
28

30. SVG
• Exemplos de shapes SVG:
• Efeitos de estilo podem ser definidos através de atributos ou em
propriedades do atributo style (como se faz no CSS)
• Círculo (<circle>)
• <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
• Retângulo (<rect>)
• <rect width="300" height="100" style="fill:red;stroke-width:1;stroke:black"/>
• Retângulo com cantos arredondados e transparência
<rect x="50" y="20" rx="20" ry="20" width="150"
height="150"style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
• Ellipse (<ellipse>)
• <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;stroke:black;stroke-width:
2" />
29

31. SVG
• Exemplos de shapes SVG:
• Linha (<line>)
• <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:
2" />
• Polígono (<polygon>)
• Os pontos são valores x,y separados por espaços
• <polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1" />
• Linha de múltiplos pontos (<polyline>)
• <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
• Textos (<text>)
• <text x="0" y="15" fill="red" transform="rotate(30 20,40)">SVG é Massa!</
text>
30

32. SVG
• Há muito mais a falar sobre SVG que em si é
uma linguagem grande como a própria HTML
• Textos podem seguir caminhos (textpaths) para serem
dispostos de forma sinuosa
• Linhas (strokes) podem ser tracejadas ou pontilhadas
• É recomendável utilizar um editor de imagens
que gera arquivos SVG para não ser necessário
aprender tantas propriedades
• O primeiro a fazer isso foi o Adobe Illustrator
31

33. SVG
• Há muita informação sobre o assunto na
Internet, mas separamos um tutorial bem
didático:
• http://tutorials.jenkov.com/svg/index.html
• Há muito a falar sobre Javascript com SVG,
mas como não é o foco neste curso,
apresentamos apenas uma biblioteca que
facilita o trabalho com SVG:
• Raphael.js - http://raphaeljs.com/
32