Html5 workshop

1,754 views

Published on

My first Workshop n HTML5. It was in a conference in college with some of my students. I replied it 6 times already.

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,754
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 workshop

  1. 1. 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" />
  2. 2. 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>
  3. 3. Final Result
  4. 4. <!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>
  5. 5. <!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> <head> <meta charset="UTF-8"> <title>Exemplo HTML 5</title> <script src=“js/modernizr.min.js"></script> </head> <body> <p>Hello HTML5 World</p> </body> </html> /
  6. 6. <!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 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/
  7. 7. <!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 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/
  8. 8. <!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... 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/
  9. 9. Let s Let’s Rock<!DOCTYPE HTML><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5 - Home</title> <!--ONLY MODERNIZR IS IN THE HEADER--> <script src="js/modernizr-1 7 min js"></script> src= js/modernizr-1.7.min.js ></script> <!--STYLE RESET STYLE--> <link href="css/style.css" rel="stylesheet"></head><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>
  10. 10. 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><!-- END HEADER #banner --> /h d ! #b</body>
  11. 11. Let s Let’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.#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 assima imagem da página em HTML5
  12. 12. What we See NOW?
  13. 13. And we continue 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> </hgroup><!-- /#agrupar headings - melhor indexação, menos código, mais rápido --> <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 JornadasCGM</strong> de 15 a 17 de Março 2011, aqui podes ver o futuro a acontecer! </p></section><!-- /#section -->
  14. 14. And we see see…
  15. 15. 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><!-- /#incluir imagem - elemento aside como está no interior do elemtno article o seuconteúdo deve ser relacionado com o artigo > artigo--> </aside> <header> h d <h2 class="entryTitle"> <a href="http://jcgm.estg.ipvc.pt/workshops.php?id=4" rel="bookmark" title="HTML5 - um Novo mundona Web">HTML5 - um Novo mundo na Web</a></h2> </header><!-- /.header do artigo -->
  16. 16. And we continue continue…<footer> <time datetime="2011-03-15" pubdate> 15 Março 2011 M </time><!-- /.Incluir a data do artigo publicação--> <address> address Por <a class="url fn" href="#">JCGM</a> </address><!-- /.elemento usado para referenciar quem criou o artigo ou documento --> </footer><!-- / f t d artigo --> /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">LerMais</a></h2> </div><!-- /.Conteudo do artigo --> </article></section><!-- /#content -->
  17. 17. What we have now?
  18. 18. 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
  19. 19. 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 /> <!--Formato OGG de Vídeo para firefox,, g yp / gg / pchrome 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>
  20. 20. And NOW the real 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 -->
  21. 21. And NOW the real video 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>
  22. 22. And it’s almost it s
  23. 23. 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 &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/
  24. 24. And add the favicon’s favicon sAdicionar 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">
  25. 25. It sIt’s DONE!!!!
  26. 26. 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 com http://html5gallery.comW3Schools HTML5 – Aprender HTML5 - http://www.w3schools.com/html5/Dive into HTML 5 – Tudo sobre HTML5 - http://diveintohtml5.org/LogoL 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 HTML5http://www.thewildernessdowntown.com/http://www thewildernessdowntown com/http://agent8ball.com/http://www.nevermindthebullets.com/http://joydefinesthefuture.com/ (internet Explorer 9)

×