Laboratório Web 2013-2014 - HTML5

Laboratório Web
CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE
DOCENTE: RICARDO PEREIRA RODRIGUES / RPRODRIGUES@ESCS.IPL.PT
HTML5

Tecnologias Web: Introdução ao HTML5
!
• DOCTYPE;

• Elementos Novos;

• Vídeo e Áudio;

• Tag <a>;

• Elementos Semânticos HTML5 (estrutura do documento/
layout);
AGENDA

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 eﬁciê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áﬁcos e
multimédia, sem recorrer a plug-ins proprietários (Adobe
Flash, Silverlight, etc).
Logotipo da nova versão
do HTML.

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>

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.

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>

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 ﬁcheiro á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).

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)

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.

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>

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>.

TECNOLOGIAS WEB
Elementos Semânticos HTML5 (estrutura)
!
Esta nova versão traz uma série de elementos que nos ajudam
a deﬁnir as áreas principais no documento HTML.

TECNOLOGIAS WEB
Elementos Semânticos HTML5
<SECTION>
✓ Deﬁne 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 signiﬁcado semântico (não
diz nada sobre o conteúdo o que contém).

TECNOLOGIAS WEB
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>

TECNOLOGIAS WEB
<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>

TECNOLOGIAS WEB
<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>

TECNOLOGIAS WEB
<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>

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 especiﬁcar 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
especiﬁcar o tipo de conteúdo dessa secção.
EXEMPLO <HEADER>
<header>!
! <h1>Este é o meu documento</h1>!
</header>

TECNOLOGIAS WEB
<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>

TECNOLOGIAS WEB
<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>
✓ Deﬁne a legenda de uma imagem, ilustração, diagrama, etc.

TECNOLOGIAS WEB
<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>

BIBLIOGRAFIA
• Keith, J. (2010) HTML5 For Web Designers. A Book Apart.

!
REFERÊNCIAS ONLINE:
!
Especiﬁcaçõ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/

Laboratório Web 2013-2014 - HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Laboratório Web 2013-2014 - HTML5

Similar to Laboratório Web 2013-2014 - HTML5 (20)

More from Ricardo Pereira Rodrigues

More from Ricardo Pereira Rodrigues (8)

Laboratório Web 2013-2014 - HTML5