Laboratório Web CURSO DE LICENCIATURA EM AUDIOVISUAL E MULTIMÉDIA / 2013-2014 / 4º SEMESTRE
DOCENTE: RICARDO PEREIRA RODRIGUES / [email protected]
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 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
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>
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>
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>
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>
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
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>
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.
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>
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/
Top Related