Your SlideShare is downloading. ×
  • Like
Html5 workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Html5 workshop

  • 1,491 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,491
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. Final Result
  • 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. <!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. <!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. <!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. <!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. 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. 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. 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. What we See NOW?
  • 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. And we see see…
  • 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. 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. What we have now?
  • 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. 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. 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. 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. And it’s almost it s
  • 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. 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. It sIt’s DONE!!!!
  • 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)