html5 aula 5

33

Upload: jose-berardo

Post on 04-Jul-2015

582 views

Category:

Internet


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Html5 Aula 5
Page 2: Html5 Aula 5

HTML5 ESSENCIALFundamentos de todo serviço na Web

Page 3: Html5 Aula 5

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

EMENTA

3

Page 4: Html5 Aula 5

• Fundamentos da Web• Documentos HTML• Conteúdo• Multimídia

• Imagens e objetos• Áudio e Vídeo• Canvas• Imagens vetoriais

• Semântica

O QUE VEREMOS AGORA

4

Page 5: Html5 Aula 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

Page 6: Html5 Aula 5

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

Page 7: Html5 Aula 5

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

Page 8: Html5 Aula 5

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

Page 9: Html5 Aula 5

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

Page 10: Html5 Aula 5

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

Page 11: Html5 Aula 5

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

Page 12: Html5 Aula 5

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

Page 13: Html5 Aula 5

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

Page 14: Html5 Aula 5

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

Page 15: Html5 Aula 5

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

Page 16: Html5 Aula 5

TIPOS DE ARQUIVOS• Confira a lista de compatibilidades

• Entre no site http://fmbip.com e verifique o que o seu browsers suporta

16

Page 17: Html5 Aula 5

TIPOS DE ARQUIVOS• Confira a lista de compatibilidades

• Entre no site http://fmbip.com e verifique o que o seu browsers suporta

16

Page 18: Html5 Aula 5

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

Page 19: Html5 Aula 5

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

Page 20: Html5 Aula 5

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

Page 21: Html5 Aula 5

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

Page 22: Html5 Aula 5

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

Page 23: Html5 Aula 5

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

Page 25: Html5 Aula 5

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

Page 26: Html5 Aula 5

EXEMPLO DE CANVAS• Com o exemplo, o usuário

pode criar uma imagem comoessa 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

Page 27: Html5 Aula 5

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

Page 28: Html5 Aula 5

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

Page 29: Html5 Aula 5

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

Page 30: Html5 Aula 5

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

Page 31: Html5 Aula 5

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

Page 32: Html5 Aula 5

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

Page 33: Html5 Aula 5

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