html5 workshop

27

Upload: sergio-laranjeira

Post on 25-Dec-2014

1.498 views

Category:

Education


1 download

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

Page 1: Html5 workshop
Page 2: Html5 workshop

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

Page 3: Html5 workshop

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>

Page 4: Html5 workshop

Final ResultFinal Result

Page 5: Html5 workshop

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>

Page 6: Html5 workshop

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

Page 7: Html5 workshop

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/

Page 8: Html5 workshop

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/

Page 9: Html5 workshop

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/

Page 10: Html5 workshop

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>

Page 11: Html5 workshop

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>

Page 12: Html5 workshop

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

Page 13: Html5 workshop

What we See NOW?What we See NOW?

Page 14: Html5 workshop

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

Page 15: Html5 workshop

And we seeAnd we see…

Page 16: Html5 workshop

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

Page 17: Html5 workshop

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

Page 18: Html5 workshop

What we have now?What we have now?

Page 19: Html5 workshop

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

Page 20: Html5 workshop

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>

Page 21: Html5 workshop

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

Page 22: Html5 workshop

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>

Page 23: Html5 workshop

And it’s almostAnd it s almost

Page 24: Html5 workshop

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 &copy; 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/

Page 25: Html5 workshop

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

Page 26: Html5 workshop

It’s DONE!!!!It s DONE!!!!

Page 27: Html5 workshop

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)