HTML5 Guia

HTML5

Grupo D:

André Santos
Fernando Matos
Paulo Silva
Vítor Melo

O que é?
HTML (HyperText Markup Language):
responsável por organizar e formatar as páginas que
visitamos na Internet;

HTML5 - Quinta versão da linguagem HTML;

Mudança no papel do HTML na Web:
Semântica;
Acessibilidade;

Novas funcionalidades:
Novas API's;
Controle embutido de conteúdo multimídia;
Aprimoramento do uso off-line;
Melhoria na depuração de erros.

Conceitos Básicos (1/4)

Novos elementos de estrutura:

<header>
<section>
<article>
<footer>
<nav>
<aside>

Doctype:

<!DOCTYPE html>


Novos elementos de conteúdo:

<figure> <figure id="figura01">
<legend>Figura 1. Esquema de uma
<canvas> página em HTML5</legend>
<audio> <img src="html5.png" border="0"
<video> width="200" height="300"
alt="Como fica a estrutura de uma
<dialog>, <dt> e <dd> página escrita com os novos elementos
<time> do HTML5" />
<meter> </figure>

<audio src="musica.mp3" autoplay="autoplay" loop="20000" />

<video src="video.mov" width="400" height="360" />


Elementos retirados:

<basefont>
<big>
<center>
<font>
<s>
<strike>
<tt>
<u>
<frame>
<frameset>
<noframes>

Exemplo de código em HTML5:

<html>
<head>
<title>HTML5</title>
</head>
<body>
<audio id="audioTest" autobuffer controls >
<source src="test.mp3">
<source src="test.mp3" type="audio/mp3" codecs="Xmp3">
<source src="url">
//mensagem especificando que o browser não suporta a tag
</audio>
</body>
</html>

Como está sendo usado
Jogos:
http://dougx.net/plunder/plunder.html
http://seancode.com/webventure/
http://experiments.instrum3nt.com/markmahoney/ball/

Animações:
http://www.20thingsilearned.com/
http://www.effectgames.com/demos/canvascycle/

Aplicações para criação de desenhos:
http://mugtug.com/sketchpad/
http://mrdoob.com/projects/harmony/

E muitas outras aplicações de diversos tipos;

Padrões e Formatos existentes (1/2)

<audio> e <video>
Multimídia sem plugins.

geotagging
Localização em relação ao posicionamento.

WebGL
Padrão de programação 3D para Browsers.

Padrões e Formatos Existentes (2/2)

Ambientes de Desenvolvimento

Adobe Dreamweaver CS5 HTML5 Pack:
Extensão para o Dreamweaver;

HTML5 Rocks, da Google:
Espécie de referência para as API's do HTML5:
http://www.html5rocks.com

Maqetta, da IBM:
Ferramenta de criação visual de interfaces com o
usuário.
http://maqetta.org

Conclusões

Tende a se consolidar cada vez mais como padrão na
criação de conteúdo web;

Substituição gradativa de algumas tecnologias;

Diminuição dos problemas de compatibilidade;

Transformação dos navegadores de meros mostradores de
página para completos ambientes de desenvolvimento;

Ajuda as máquinas de busca a indexar melhor as páginas.

Referências

Técnicas:

http://www.w3schools.com/html5/html5_reference.asp
http://www.w3.org/TR/html5/
http://www.html5rocks.com/

Bibliográficas:

http://www.infowester.com/introhtml5.php
http://pt.wikipedia.org/wiki/HTML5
http://olhardigital.uol.com.br/produtos/central_de_videos/voce-ja-
mexeu-com-html5
http://html5demos.com/
http://www.youtube.com/html5

HTML5 Guia

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML5 Guia

Semelhante a HTML5 Guia (20)

HTML5 Guia