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 / [email protected]

HTML5

mailto:[email protected]

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

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

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 definir as áreas principais no documento HTML.

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

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

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>

✓ Define 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: !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/

http://www.w3.org/html/wg/drafts/html/master/Overview.html

http://tableless.com.br/html5/