Laboratório Web
CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE
DOCENTE: RICARDO PEREIRA RODRI...
Tecnologias Web: Introdução ao HTML5
!
• DOCTYPE;

• Elementos Novos;

• Vídeo e Áudio;

• Tag <a>;

• Elementos Semântico...
TECNOLOGIAS WEB
A evolução: HTML5
!
O que é?
• Última versão HTML (2012 - na fase “Candidate
Recommendation”);

• Pensado ...
TECNOLOGIAS WEB
DOCTYPE HTML5
!
• O Doctype (Document Type Declaration) é a instrução que
informa o browser sobre a versão...
TECNOLOGIAS WEB
A evolução: HTML5
!
Elementos Novos
!
Canvas: para apresentar imagens dinâmicas. Através de API’s
ou JavaS...
TECNOLOGIAS WEB
A evolução: HTML5
!
Áudio
SINTAXE
<audio src=“music.mp3”>!
</audio>
INICIAR O ÁUDIO DE FORMA AUTOMÁTICA
<a...
TECNOLOGIAS WEB
A evolução: HTML5
!
Áudio
CONTROLADORES
<audio src=“music.mp3” controls>!
</audio>
O browser apresenta os ...
TECNOLOGIAS WEB
A evolução: HTML5
!
Áudio - Formatos
!
• Internet Explorer: MP3.

• Chrome: MP3, Wav, Ogg.

• Firefox: MP3...
TECNOLOGIAS WEB
A evolução: HTML5
!
Áudio - Formatos
SINTAXE PARA MÚLTIPLAS <SOURCE>
<audio controls>!
! <source src=“musi...
TECNOLOGIAS WEB
A evolução: HTML5
!
Vídeo
!
• Funciona da mesma forma que a tag <audio>.

• Opções de atributos: autoplay,...
TECNOLOGIAS WEB
HTML5 e a tag <a>
!
• Permite-nos juntar múltiplos elementos dentro de um
elemento <a>.
EXEMPLO:
<a href=“...
TECNOLOGIAS WEB
Elementos Semânticos HTML5 (estrutura)
!
Esta nova versão traz uma série de elementos que nos ajudam
a defi...
TECNOLOGIAS WEB
Elementos Semânticos HTML5
<SECTION>
✓ Define uma secção genérica no documento.

✓ Exemplo: a página de ent...
TECNOLOGIAS WEB
Elementos Semânticos HTML5
EXEMPLO <SECTION>
<section>!
! <header>!
! ! <h1>Destaques</h1>!
! </header>!
!...
TECNOLOGIAS WEB
Elementos Semânticos HTML5
<NAV>
✓ Representa uma secção da página que contém links para outras
partes do ...
TECNOLOGIAS WEB
Elementos Semânticos HTML5
<ARTICLE>
✓ Este elemento deverá ser uma parte independente de um
documento cuj...
TECNOLOGIAS WEB
Elementos Semânticos HTML5
<ASIDE>
✓ Representa um bloco de conteúdo relacionado com o conteúdo
principal ...
TECNOLOGIAS WEB
Elementos Semânticos HTML5 (estrutura)
<HEADER>
✓ Representa um conteúdo introdutório ou até elementos de
...
TECNOLOGIAS WEB
Elementos Semânticos HTML5
<FOOTER>
✓ Neste elemento deverão constar conteúdos relacionados com o
elemento...
TECNOLOGIAS WEB
Elementos Semânticos HTML5
<FIGURE>
✓ Elemento que pode conter uma imagem, ilustração, diagrama,
etc.
EXEM...
TECNOLOGIAS WEB
Elementos Semânticos HTML5
<TIME>
✓ Marca parte do texto que exibe uma hora ou data precisa no
calendário ...
BIBLIOGRAFIA
• Keith, J. (2010) HTML5 For Web Designers. A Book Apart.

!
REFERÊNCIAS ONLINE:
!
Especificações W3C para HTM...
Laboratório Web 2013-2014 - HTML5
Laboratório Web 2013-2014 - HTML5
Upcoming SlideShare
Loading in...5
×

Laboratório Web 2013-2014 - HTML5

453

Published on

Unidade Curricular de Laboratório Web, Curso de Licenciatura em Audiovisual e Multimédia, Escola Superior de Comunicação Social / Instituto Politécnico de Lisboa.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
453
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Laboratório Web 2013-2014 - HTML5

  1. 1. Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT HTML5
  2. 2. Tecnologias Web: Introdução ao HTML5 ! • DOCTYPE; • Elementos Novos; • Vídeo e Áudio; • Tag <a>; • Elementos Semânticos HTML5 (estrutura do documento/ layout); AGENDA
  3. 3. TECNOLOGIAS WEB A evolução: HTML5 ! O que é? • Última versão HTML (2012 - na fase “Candidate Recommendation”); • Pensado para continuar a suportar o conteúdo existente; • Objectivo: distribuição de conteúdos mais ricos (multimédia) e melhorar a eficiência semântica de páginas web; • Novos Elementos e Atributos; • Novas funções, novas tags: <video>, <audio>, <header>, <article>, <nav>, <aside>, <footer>, <canvas>, integração de conteúdos SVG que substitui o uso de tags <object> genéricas. • Torna-se mais fácil incluir e manipular conteúdos gráficos e multimédia, sem recorrer a plug-ins proprietários (Adobe Flash, Silverlight, etc). Logotipo da nova versão do HTML.
  4. 4. TECNOLOGIAS WEB DOCTYPE HTML5 ! • O Doctype (Document Type Declaration) é a instrução que informa o browser sobre a versão do html usada na escrita do documento. • Deverá ser a primeira instrução do documento. DEFINIÇÕES GLOBAIS DE UM DOCUMENTO HTML5 <!DOCTYPE html>! <html>! <head>! <meta charset=“UTF-8”>! <link rel=“stylesheet” href=“geral.css” type=“text/css”>! <title>Hello World!</title>! </head>! ! <body>! </body>! </html>
  5. 5. TECNOLOGIAS WEB A evolução: HTML5 ! Elementos Novos ! Canvas: para apresentar imagens dinâmicas. Através de API’s ou JavaScript podemos trabalhar com strokes, fills, gradiente, shadows, shapes, curvas bézier, etc.). ! Vantagem: actualizar o conteúdo a qualquer momento, desenhar novos conteúdos baseados nas acções/interacções do utilizador. ! Geolocalização: através de “Geottaging”, determinando a localização do utilizador podemos fornecer conteúdos específicos para o local onde este está. ! Caching de aplicações: acedermos a conteúdos offline via cache. API - Aplication Programming Interface (Interface de Programação de Aplicativos). ! - Uma interface entre aplicativo e programação. - Conjunto de rotinas e padrões estabelecidos por um software para a utilização das suas funcionalidades por aplicativos que não pretendem envolver-se em detalhes da implementação do software, mas apenas usar os seus serviços.
  6. 6. TECNOLOGIAS WEB A evolução: HTML5 ! Áudio SINTAXE <audio src=“music.mp3”>! </audio> INICIAR O ÁUDIO DE FORMA AUTOMÁTICA <audio src=“music.mp3” autoplay>! </audio> INICIAR O ÁUDIO DE FORMA AUTOMÁTICA E COM LOOP <audio src=“music.mp3” autoplay loop>! </audio>
  7. 7. TECNOLOGIAS WEB A evolução: HTML5 ! Áudio CONTROLADORES <audio src=“music.mp3” controls>! </audio> O browser apresenta os controladores nativos para fazer as opções básicas de controlo do ficheiro áudio (play, pause, ajustar volume, etc.) ! Podemos criar os nossos próprios controladores, usando JavaScript para interagir com a API áudio (usando um id na tag audio).
  8. 8. TECNOLOGIAS WEB A evolução: HTML5 ! Áudio - Formatos ! • Internet Explorer: MP3. • Chrome: MP3, Wav, Ogg. • Firefox: MP3 (a partir da versão 21), Wav, Ogg. • Safari: MP3 e Wav. • Opera: Wav e Ogg. Ogg (Vorbis codec)
  9. 9. TECNOLOGIAS WEB A evolução: HTML5 ! Áudio - Formatos SINTAXE PARA MÚLTIPLAS <SOURCE> <audio controls>! ! <source src=“music.ogg” type=“audio/ogg”>! ! <source src=“music.mp3” type=“audio/mpeg">! </audio> Ao declararmos os “mime types” ajudamos o browser a compreender com que tipo de dados é que está a trabalhar.
  10. 10. TECNOLOGIAS WEB A evolução: HTML5 ! Vídeo ! • Funciona da mesma forma que a tag <audio>. • Opções de atributos: autoplay, controls, heigh, loop, muted, poster, preload, e width . SINTAXE <video width="640" height="360" controls>! ! <source src="video.ogg" type=“video/ogg">! ! <source src="video.mp4" type="video/mp4">! </video>
  11. 11. TECNOLOGIAS WEB HTML5 e a tag <a> ! • Permite-nos juntar múltiplos elementos dentro de um elemento <a>. EXEMPLO: <a href=“bio.html”>! ! <h2>Biografia</h2>! ! <p>Saiba mais sobre mim e envie-me uma mensagem</p>! </a> NOTA: não podemos juntar dois elementos <a>.
  12. 12. TECNOLOGIAS WEB Elementos Semânticos HTML5 (estrutura) ! Esta nova versão traz uma série de elementos que nos ajudam a definir as áreas principais no documento HTML.
  13. 13. TECNOLOGIAS WEB Elementos Semânticos HTML5 <SECTION> ✓ Define uma secção genérica no documento. ✓ Exemplo: a página de entrada de um website pode estar dividida em várias secções - “introdução”, “destaques”, “novidades”, etc. ✓ Pode ser usado para agrupar conteúdo cuja temática esteja relacionada. ✓ A diferença entre o elemento <div> (contentor genérico de conteúdo) é que a div não atribui um significado semântico (não diz nada sobre o conteúdo o que contém).
  14. 14. TECNOLOGIAS WEB Elementos Semânticos HTML5 EXEMPLO <SECTION> <section>! ! <header>! ! ! <h1>Destaques</h1>! ! </header>! ! <h2>A Web 3.0</h2>! ! <p>A Web Semântica já é uma realidade.</p>! ! <h6>Ricardo P. Rodrigues</h6>! </section>
  15. 15. TECNOLOGIAS WEB Elementos Semânticos HTML5 <NAV> ✓ Representa uma secção da página que contém links para outras partes do website (links principais/importantes para a navegação). ✓ Uma secção de links secundários não deverá usar este elemento. EXEMPLO <NAV> <nav>! ! <a href=“index.html”>Home</a>! ! <a href=“bio.html”>Biografia</a>! ! <a href=“servicos.html”>Serviços</a>! ! <a href=“contactos.html”>Contactos</a>! </nav>
  16. 16. TECNOLOGIAS WEB Elementos Semânticos HTML5 <ARTICLE> ✓ Este elemento deverá ser uma parte independente de um documento cujos conteúdos façam sentido isoladamente. ✓ Representa uma parte da página que pode ser reutilizada num feed, por exemplo . ✓ Exemplo: um post, um artigo, um comentário ou apenas um bloco de texto comum. EXEMPLO <ARTICLE> <article>! ! <header>! ! ! <h1>Título do artigo</h1>! ! </header>! ! <p>Texto do artigo</p>! </article>
  17. 17. TECNOLOGIAS WEB Elementos Semânticos HTML5 <ASIDE> ✓ Representa um bloco de conteúdo relacionado com o conteúdo principal do documento. ✓ Pode ser usado para publicidade, blocos de texto, grupo de elementos <nav>. EXEMPLO <ASIDE> <article>! ! <header>! ! ! <h1>Artigo sobre Cravos Vermelhos</h1>! ! </header>! ! <p>Texto sobre Cravos Vermelhos</p>! ! <aside>! ! ! Existem cerca de 300 espécies de cravos.! ! </aside>! </article>
  18. 18. TECNOLOGIAS WEB Elementos Semânticos HTML5 (estrutura) <HEADER> ✓ Representa um conteúdo introdutório ou até elementos de navegação (Exemplo: um banner). ✓ Pode ser usado para especificar o cabeçalho (contentor) de um documento, secção ou artigo ou para agrupar índices de conteúdos, caixas de pesquisa ou logos. ✓ Pode ser utilizado mais do que uma vez no mesmo documento. ✓ Podemos usar o elemento <header> dentro de uma secção para especificar o tipo de conteúdo dessa secção. EXEMPLO <HEADER> <header>! ! <h1>Este é o meu documento</h1>! </header>
  19. 19. TECNOLOGIAS WEB Elementos Semânticos HTML5 <FOOTER> ✓ Neste elemento deverão constar conteúdos relacionados com o elemento onde ele está inserido. ✓ Pode conter informações sobre o documento geral, mas também pode ser associado a um artigo. ✓ Exemplo: Um elemento <footer> dentro de um elemento <article> pode conter a informação do autor do artigo, copyright, etc. EXEMPLO <article>! ! <footer>! ! Texto Vera Moutinho, copyright Público! ! </footer>! </article>
  20. 20. TECNOLOGIAS WEB Elementos Semânticos HTML5 <FIGURE> ✓ Elemento que pode conter uma imagem, ilustração, diagrama, etc. EXEMPLO <FIGURE> E <FIGCAPTION> <figure>! ! <img src=“image.jpg />! ! <figcaption>Legenda da imagem</figcaption>! </figure> <FIGCAPTION> ✓ Define a legenda de uma imagem, ilustração, diagrama, etc.
  21. 21. TECNOLOGIAS WEB Elementos Semânticos HTML5 <TIME> ✓ Marca parte do texto que exibe uma hora ou data precisa no calendário gregoriano. EXEMPLOS <TIME> <p>A loja abre às <time>9:30</time></p>! ! <p>Tenho uma reunião no dia <time datetime=“2014-02-14”>dos namorados</time></p>
  22. 22. BIBLIOGRAFIA • Keith, J. (2010) HTML5 For Web Designers. A Book Apart. ! REFERÊNCIAS ONLINE: ! Especificações W3C para HTML5: http://www.w3.org/html/wg/drafts/html/master/Overview.html ! Guias de referência da linguagem HTML5: http://tableless.com.br/html5/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×