Introdução ao HTML5

Evolution!! Simplify!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 0 Strict//EN“
//W3C//DTD 1.0 Strict//EN
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html lang="en">

<meta http equiv="Content Type" content="text/html; charset=utf 8">
http-equiv= Content-Type content= text/html; charset=utf-8 >
<meta charset="utf-8" />

Evolution!! Simplify!
<link rel="stylesheet" href="style original css" type="text/css" />
rel= stylesheet href= style-original.css type= text/css
<link rel="stylesheet" href="style-original.css" />

<script src="javascript.js" type="text/javascript"></script>
<script src="javascript.js"></script>

New Semantic Elements
<section> <nav> <article> <aside> <hgroup><header><footer><time><mark>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example 01</title> </head> <body> <p>This is my first document.</p> </body> </html>

Start – Point One
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo HTML 5</title>
</head>
<body>
<p>Hello HTML5 World</p>
</body>
</html>


Now the real Stuff!!
<!DOCTYPE html>
<html>
<head>
<title>Exemplo HTML 5</title>
<script src=“js/modernizr.min.js"></script>
</head>
<body>
<p>Hello HTML5 World</p>
</body>
</html>
/


1,2,3
1 2 3 - Testing
…

<script src=“js/modernizr.min.js"></script>

if (Modernizr.canvas) {
alert("Canvas Works");
} else {
alert("Canvas not in here");
}
…

http://www.modernizr.com/
http://www.modernizr.com/docs/


IE – I don t know HTML5
don’t
Para resolver este problema nada como css

section,nav,article,aside,hgroup,header,footer{display:block}

… e claro incluir no ficheiro HTML

<link href="css/mystyle.css" rel="stylesheet">

… mas nada como usar um ficheiro reset all

<link href="css/style.css" rel="stylesheet">
/ y y
http://html5boilerplate.com/

Get ready...
ready
Depois de style, modernizr acrescentar a bem conhecida livraria JQUERY, vai ser útil



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/js/jquery-
1.5.1.min.js"></script>')</script>
)

http://jquery.com/

Let s
Let’s Rock
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>HTML5 - Home</title>

<script src="js/modernizr-1 7 min js"></script>
src= js/modernizr-1.7.min.js ></script>

<link href="css/style.css" rel="stylesheet">
</head>
<body>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>!window.jQuery document.write( <script src= /js/jquery-1.5.1.min.js ></script> )</script>
<script>!window jQuery && document write('<script src="/js/jquery-1 5 1 min js"></script>')</script>

</body>
</html>

Let s
Let’s Rock HTML5
<body>
<header id="banner">
header id banner
<h1>Workshop HTML 5</h1>
<nav><ul>
<li class="active"><a href="index html" title="Ir para página inicial">Home</a></li>
class= active ><a href= index.html title= Ir inicial >Home</a></li>
<li><a href="http://jcgm.estg.ipvc.pt" rel="external">Jornadas Computação
Gráfica</a></li>
<li><a href="http://www estg ipvc pt" rel="external">ESTG</a></li>
href="http://www.estg.ipvc.pt"
<li><a href="http://www.archive.org/" rel="external">Arquivo</a></li>
</ul></nav>
</header>
/h d ! #b

</body>

Let s
Let’s Rock CSS2 & CSS3
O ficheiro Style inclui a partir da linha 162 todo o código CSS necessário para a página. O código encontra-se comentado
e com já alguns atributos CSS3.

#banner nav li:first-child a{border-top-left-radius:5px; -moz-border-radius-topleft:5px; -webkit-border-top-left-
radius:5px; border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px}

Não serão focados os aspectos CSS3 neste workshop, no entanto devem verificar todos o ficheiro podendo editar assim
a imagem da página em HTML5

And we continue
continue…
<section id="titles">
<figure>
figure
<img src="design/HTML5_Logo_512.png" width="150" height="150" alt="HTML5 Logo">
</figure>

<hgroup>
<h2>O Futuro da Web?</h2>
<h3>HTML 5 e CSS 3</h3>
</hgroup>

<p>Descobrir h j a tecnologia de amanhã. IIr mais além e explorar o f
D b i hoje l i d hã i lé l futuro d W b <strong>IX J d
da Web. IX Jornadas
CGM</strong> de 15 a 17 de Março 2011, aqui podes ver o futuro a acontecer! </p>

</section>

And we continue
continue…
<section id="content">
<article class="hentry">
article class hentry

<aside>
<figure>
<img src="design/html5News.png" width="300" height="157" alt="HTML5 Notícia">
</figure>
</aside>

<header>
h d
<h2 class="entryTitle">
<a href="http://jcgm.estg.ipvc.pt/workshops.php?id=4" rel="bookmark" title="HTML5 - um Novo mundo
na Web">HTML5 - um Novo mundo na Web</a></h2>
</header>

And we continue
continue…
<footer>
<time datetime="2011-03-15" pubdate>
15 Março 2011
M
</time>

<address>
address
Por <a class="url fn" href="#">JCGM</a>
</address>

</footer>
/f t ! /.footer do ti

<div class="entryContent">
<p>O HTML5 (Hypertext Markup Language, versão 5) é a quinta revisão importante da linguagem HTML. /p
p O HTML.</p>
<a href="http://jcgm.estg.ipvc.pt/workshops.php?id=4" rel="bookmark" title="HTML5 - um Novo mundo na Web">Ler
Mais</a></h2>
</div>

</article>
</section>

And NOW the video
video…
<video src="movie.ogg" controls="controls“></video>

Sim é só isto e o vídeo já aparece. Devemos ter em atenção ao codec de vídeo. Ogg (é open
j p ç gg ( p
standard) funciona em Opera, Firefox3.5 e Chrome.

Para funcionar me Safari adicionamos vídeo com diferentes codecs. Mp4.

O Firefogg é uma extensão para firefox que permite codificação de vídeos para o formato ogg
ogg.

http://www.firefogg.org

And NOW the real video
video…
<section id="video">

<video id="movie" width="320" height="240" controls="controls">
<source src="doit.ogv" type='video/ogg' /> 
<source src="doit.mp4" type='video/mp4' /> 
<a href="doit.mp4" style="display:block;width:320px;height:240px" id="player"></a>

</video>

video…
<aside>
<h1>Vídeo em todos os browsers!!!</h1>
<a href="http://camendesign.com/code/video_for_everybody" rel="external"
title="HTML5 - Vídeo para todos">Vídeo p todos!!</a>
p para /

</aside>

</section>

video…
O Flowplayer permite incluir vídeo numa página web recorrendo a tecnologia flash

<script src="js/flowplayer-3.2.6.min.js"></script>
<script>
flowplayer("player", "flowplayer-3.2.7.swf",
flowplayer("player" "flowplayer 3 2 7 swf" {
clip: {
// Duas configurações apenas para não iniciar automaticamente
autoPlay: false,
autoBuffering: true
}
});
</script>

Finally…
Finally the footer
<footer id="footer">
<figure>
<img src="design/validHtml5.jpg" width="106" height="14" alt="Código Válido" />
</figure>
<section id="copyright">
Copyright © ESTG-IPVC 2011
</section>
/section
</footer>

Para validar código podem ser usados dois serviços:
http://validator.nu/
http://validator.w3.org/
http://validator w3 org/

And add the favicon’s
favicon s
Adicionar ao HEADER

<link rel="shortcut icon" href="design/favicon.ico">
<link rel="apple touch icon" href="design/apple touch icon png">
rel="apple-touch-icon" href="design/apple-touch-icon.png">

References!!
HTML5 Doctor – Artigos html5 com exemplos – http://www.html5doctor.com
HTML5 Demos – Demos de HTML5 e Javascript - http://www.html5demos.com
HTML5 Gallery – Galeria de sites com HTML5 – http://html5gallery com
http://html5gallery.com
W3Schools HTML5 – Aprender HTML5 - http://www.w3schools.com/html5/
Dive into HTML 5 – Tudo sobre HTML5 - http://diveintohtml5.org/
Logo
L HTML5 – T d sobre o L óti HTML5 - htt //
Tudo b Logótipo http://www.w3.org/html/logo/
3 /ht l/l /
Aúdio HTML5 – Como incluir aúdio numa página - http://thinkvitamin.com/code/html5-audio-unplugged/
Tutoriais HTML5 – tutoriais para iniciar no HTML5 - http://blogfreakz.com/web-design/html5-tutorial/

Grandes Exemplos HTML5
http://www.thewildernessdowntown.com/
http://www thewildernessdowntown com/
http://agent8ball.com/
http://www.nevermindthebullets.com/
http://joydefinesthefuture.com/ (internet Explorer 9)

Introdução ao HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Introdução ao HTML5

Semelhante a Introdução ao HTML5 (20)

Último

Último (20)

Introdução ao HTML5