Html5 Aula 5

1.136 visualizações

Publicada em

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

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.136
No SlideShare
0
A partir de incorporações
0
Número de incorporações
418
Ações
Compartilhamentos
0
Downloads
42
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html5 Aula 5

  1. 1. HTML5 ESSENCIAL Fundamentos de todo serviço na Web
  2. 2. EMENTA • Fundamentos de Web • Documentos HTML • Conteúdo • Multimídia • Semântica • Desempenho 3
  3. 3. 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
  4. 4. 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
  5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. TIPOS DE ARQUIVOS • Confira a lista de compatibilidades • Entre no site http://fmbip.com e verifique o que o seu browsers suporta 16
  16. 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. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. 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

×