html5 workshop
DESCRIPTION
My first Workshop n HTML5. It was in a conference in college with some of my students. I replied it 6 times already.TRANSCRIPT
Evolution!! Simplify!Evolution!! Simplify!<!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1 0 Strict//EN“<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 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"><meta http-equiv= Content-Type content= text/html; charset=utf-8 ><meta charset="utf-8" />
Evolution!! Simplify!Evolution!! Simplify!<link rel="stylesheet" href="style original css" type="text/css" /><link 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><section> <nav> <article> <aside> <hgroup><header><footer><time><mark>
Final ResultFinal Result
Start – Point One<!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><html> <head>
<meta charset="UTF-8"> <title>Exemplo HTML 5</title>
</head> <body>
<p>Hello HTML5 World</p> </body></body> </html>
Now the real Stuff!!<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example 01</title> </head> <body> <p>This is my first document.</p> </body> </html>
Now the real Stuff!!<!DOCTYPE html>
<html><html> <head>
<meta charset="UTF-8"> <title>Exemplo HTML 5</title><script src=“js/modernizr.min.js"></script>
</head> <body>
<p>Hello HTML5 World</p><p>Hello HTML5 World</p> </body> </html> /
1 2 3 Testing<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example 01</title> </head> <body> <p>This is my first document.</p> </body> </html>
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<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example 01</title> </head> <body> <p>This is my first document.</p> </body> </html>
IE – I don t know HTML5Para 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… mas nada como usar um ficheiro reset all
<link href="css/style.css" rel="stylesheet">/ y y
http://html5boilerplate.com/
Get ready<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example 01</title> </head> <body> <p>This is my first document.</p> </body> </html>
Get ready...Depois de style, modernizr acrescentar a bem conhecida livraria JQUERY, vai ser útil
<!--INCLUDE THE JAVSCRIPT ON BOTTOM - Best and faster-->
<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 RockLet s Rock<!DOCTYPE HTML><html lang="en"><head><head>
<meta charset="UTF-8"><title>HTML5 - Home</title><!--ONLY MODERNIZR IS IN THE HEADER--><script src="js/modernizr-1 7 min js"></script><script src= js/modernizr-1.7.min.js ></script><!--STYLE RESET STYLE--><link href="css/style.css" rel="stylesheet">
</head><body><body>
<!--INCLUDE THE JAVSCRIPT ON BOTTOM - Best and faster--><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 Rock HTML5Let 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><li class= active ><a href= index.html title= Ir para página 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><li><a href="http://www.estg.ipvc.pt" rel="external">ESTG</a></li><li><a href="http://www.archive.org/" rel="external">Arquivo</a></li>
</ul></nav>/h d ! END HEADER #b</header><!-- END HEADER #banner -->
</body>
Let’s Rock CSS2 & CSS3Let s Rock CSS2 & CSS3O ficheiro Style inclui a partir da linha 162 todo o código CSS necessário para a página. O código encontra-se comentadoe com já alguns atributos CSS3.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}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 assima imagem da página em HTML5a imagem da página em HTML5
What we See NOW?What we See NOW?
And we continueAnd we continue…<section id="titles">
<figure>figure<img src="design/HTML5_Logo_512.png" width="150" height="150" alt="HTML5 Logo">
</figure><!-- /#incluir imagem-->
<hgroup><h2>O Futuro da Web?</h2><h3>HTML 5 e CSS 3</h3><h3>HTML 5 e CSS 3</h3>
</hgroup><!-- /#agrupar headings - melhor indexação, menos código, mais rápido -->
D b i h j l i d hã I i lé l f d W b IX J d<p>Descobrir hoje a tecnologia de amanhã. Ir mais além e explorar o futuro da Web. <strong>IX Jornadas CGM</strong> de 15 a 17 de Março 2011, aqui podes ver o futuro a acontecer! </p>
</section><!-- /#section -->
And we seeAnd we see…
And we continueAnd we continue…<section id="content">
<article class="hentry">article class hentry
<aside><figure><figure>
<img src="design/html5News.png" width="300" height="157" alt="HTML5 Notícia"></figure><!-- /#incluir imagem - elemento aside como está no interior do elemtno article o seu
conteúdo deve ser relacionado com o artigo >conteúdo deve ser relacionado com o artigo--></aside>
h d<header><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><!-- /.header do artigo -->
And we continueAnd we continue…<footer>
<time datetime="2011-03-15" pubdate>15 M 201115 Março 2011
</time><!-- /.Incluir a data do artigo publicação-->
<address>addressPor <a class="url fn" href="#">JCGM</a>
</address><!-- /.elemento usado para referenciar quem criou o artigo ou documento -->
/f t ! / f t d ti</footer><!-- /.footer do artigo -->
<div class="entryContent"><p>O HTML5 (Hypertext Markup Language, versão 5) é a quinta revisão importante da linguagem HTML.</p>p O HTML5 (Hypertext Markup Language, versão 5) é a quinta revisão importante da linguagem 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><!-- /.Conteudo do artigo -->
</article></section><!-- /#content -->
What we have now?What we have now?
And NOW the videoAnd NOW the 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 (é openj p ç gg ( pstandard) 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 oggO Firefogg é uma extensão para firefox que permite codificação de vídeos para o formato ogg.
http://www.firefogg.orghttp://www.firefogg.org
And NOW the real videoAnd NOW the real video…<section id="video">
<video id="movie" width="320" height="240" controls="controls"><source src="doit.ogv" type='video/ogg' /> <!--Formato OGG de Vídeo para firefox, g yp / gg / p ,
chrome e Opera--><source src="doit.mp4" type='video/mp4' /> <!--Formato mp4 para safari--><a href="doit.mp4" style="display:block;width:320px;height:240px" id="player"></a>
<!--Flowplayer para browsers que não detectam HTML5--></video></video>
And NOW the real videoAnd NOW the real video…<aside>
<h1>Vídeo em todos os browsers!!!</h1><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 para todos!!</a>p p /
</aside>
</section><!-- /#video -->
And NOW the real videoAnd NOW the real 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// Duas configurações apenas para não iniciar automaticamenteautoPlay: false, autoBuffering: true
}});</script></script>
And it’s almostAnd it s almost
Finally the footerFinally… the footer<footer id="footer">
<figure><img src="design/validHtml5.jpg" width="106" height="14" alt="Código Válido" />
</figure><section id="copyright"><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’sAnd add the favicon sAdicionar ao HEADER
<link rel="shortcut icon" href="design/favicon.ico"><link rel="apple touch icon" href="design/apple touch icon png"><link rel="apple-touch-icon" href="design/apple-touch-icon.png">
It’s DONE!!!!It s DONE!!!!
References!!References!!HTML5 Doctor – Artigos html5 com exemplos – http://www.html5doctor.comHTML5 Demos – Demos de HTML5 e Javascript - http://www.html5demos.comHTML5 Gallery – Galeria de sites com HTML5 – http://html5gallery comHTML5 Gallery – Galeria de sites com HTML5 – http://html5gallery.comW3Schools HTML5 – Aprender HTML5 - http://www.w3schools.com/html5/Dive into HTML 5 – Tudo sobre HTML5 - http://diveintohtml5.org/L HTML5 T d b L óti HTML5 htt // 3 /ht l/l /Logo HTML5 – Tudo sobre o Logótipo HTML5 - http://www.w3.org/html/logo/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 HTML5http://www thewildernessdowntown com/http://www.thewildernessdowntown.com/http://agent8ball.com/http://www.nevermindthebullets.com/http://www.nevermindthebullets.com/http://joydefinesthefuture.com/ (internet Explorer 9)