HTML 5 - Overview

1,677 views
1,591 views

Published on

Uma breve descrição sobre o HTML 5 e suas principais características como: forms, a nova estrutura, aúdio e vídeo, etc.

An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.

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

  • Be the first to like this

No Downloads
Views
Total views
1,677
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML 5 - Overview

  1. 1. HTML 5 Overview Marcelio Leal - @marcelioleal
  2. 2. Marcelio Leal @marcelioleal - For twitters http://marcelioleal.com - For other things Software Engineer Chief at @onsee PHP Pai d’Égua User Group cofounder 10 anos de experiência em Webdev
  3. 3. “PQP, finalmente “chegou” o HTML 5 !” Eu, depois que vi a primeira vez as coisas do HTML 5...
  4. 4. HTML Hipertext Markup Language Fácil Simples Intuitiva Extensível Rápida
  5. 5. What’s HTML5 ? A nova versão do HTML Sinônimo de coisa #estaile na Web.
  6. 6. Agentes • Web Hipertext Application Technology Working Group (WHATWG) - whatwg.com • Criado em 2004 - Contribuidores individuais, Apple, Monzilla, Google and Opera • Aberto para contribuições • Demos, APIs, Contribuições ligadas ao HTML • World Wide Web Consortium (W3C) • Draft do HTML5 em 2008
  7. 7. Timeline - The Origin 1991 - Tags(HTML) mensionadas 1993 - Draft HTML 1995 - HTML 2 1997 - HTML 3.2 (Jan), HTML 4 (Dec) - W3C 1999 - HTML 4.1 - recomendação W3C #gambi ? 2000 - XHTML 1.0
  8. 8. Timeline 2000 Dreamweaver faz a festa 2001 - XHTML 1.1 2001/2007 -W3C Sleeps Dreamweaver #farelo 2004 - WHATWG starts Project Web Web Applications (HTML5 +-) 2.0 2008 - Draft HTML5 by W3C 2009 - W3C anuncia fim do grupo do XHTML
  9. 9. Mudanças
  10. 10. Simplificações Doctype <!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Type não necessário <script src=”jacarato.js”></script> <link href=”jacapaladium.js”></link>
  11. 11. Novidades ✓article ✓footer ✓aside ✓header ✓audio ✓mark ✓canvas ✓meter ✓command ✓nav ✓datagrid ✓output ✓datalist ✓progress ✓datatemplate ✓source ✓event-source ✓time ✓figure ✓video
  12. 12. #farelo ✓acronym ✓applet ✓basefont ✓dir ✓frame ✓font ✓frameset ✓s ✓noframes ✓strike ✓tt ✓u ✓big ✓center
  13. 13. Separation Presentation Content
  14. 14. Old structure
  15. 15. New structure
  16. 16. Áudio e Vídeo Audio element (OGG) : SRC, AUTOBUFFER, CONTROLS, LOOP, AUTOPLAY <audio src="gugu.ogg" autoplay controls></audio> Video element (OGV, MP4): SRC, CONTROLS, LOOP, AUTOPLAY <video src=”tiririca.ogv” loop autoplay />
  17. 17. Old way <object classid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/ oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/ v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
  18. 18. New way <video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"   controls autobuffer> <p> Try this page in Safari  4! Or you can <a  href="http://www.youtube.com/demo/ google_main.mp4">download the  video</a> instead.</p>   </video>
  19. 19. Simple is Better
  20. 20. Videos Format • Ogg Theora / Voribs • Firefox 3.5 + / Chrome / Opera • MPEG-4 H.264/ACC • Safari / Chrome / Opera
  21. 21. Controles Nativos
  22. 22. Quem mais ?
  23. 23. CSS 3 • Em desenvolvimento • Está sendo desenvolvido em sub-especificações • tranformation, animation, transition • Esse caras ficam brincando com isso: • http://www.zurb.com/playground
  24. 24. Form <form action="formdemo.php" method="post"> <label for="name">Name:</label> <input type="text" name="name" required placeholder="Name" /> <label for="email">Email:</label> <input type="email" name="email" required placeholder="email@example.com" /> <label for="website">Website:</label> <input type="url" name="website" required placeholder="http://www.example.com" /> <label for="number">Number:</label> <input type="number" name="number" min="0" max="10" step="2" required placeholder="Even num < 10"> <label for="range">Range:</label> <input type="range" name="range" min="0" max="10" step="2" /> ... http://www.bradshawenterprises.com/tests/formdemo.php
  25. 25. CSS /* The interesting bit */ input:not(:focus), textarea:not(:focus) { opacity:0.5; } input:required, textarea:required { background:url("/tests/formdemo/ asterisk_orange.png") no-repeat 280px 7px; } input:valid, textarea:valid { background:url("/tests/formdemo/tick.png") no-repeat 280px 5px; } input:focus:invalid, textarea:focus:invalid { background:url("/tests/formdemo/ cancel.png") no-repeat 280px 7px; } input[type=submit] { padding:10px; background:none; opacity:1.0; }
  26. 26. Input - New Types • search • month • tel • week • url • time • email • datetime-local • datetime • number • date • range • color
  27. 27. Form - Types
  28. 28. HTML5 Apps
  29. 29. Geolocation
  30. 30. Canvas <canvas id="myCanvas" width="300" height="150"> Fallback content, in case the browser does not support Canvas. </canvas> <script type="text/javascript"><!-- window.addEventListener('load', function () { // Get the canvas element. var elem = document.getElementById('myCanvas'); if (!elem || !elem.getContext) { return; } // Get the canvas 2d context. var context = elem.getContext('2d'); if (!context) { return; } // Now you are done! Let's draw a blue rectangle. context.fillStyle = '#00f'; context.fillRect(0, 0, 150, 100); }, false); // --></script> http://dev.opera.com/articles/view/html-5-canvas-the-basics/
  31. 31. Canvas e Maluquices
  32. 32. “The world is moving to HTML5” Steve Jobs
  33. 33. “I had no idea there was so much HTML5 already in play” Tim O’Reilly
  34. 34. “The Web has not seen this level of transformation, this level of aceleration, in the past 10 years... we’re betting big on HTML5” Vic Gundotra, Google
  35. 35. “The Web has not seen this level of transformation, this level of aceleration, in the past 10 years... we’re betting big on HTML5” Vic Gundotra, Google
  36. 36. http://ishtml5readyyet.com/ http://caniuse.com/
  37. 37. Referências • WHATWG - HTML 5 - http://www.whatwg.org/specs/ • IETF - WebSocket http://tools.ietf.org/html/draft-hixie- thewebsocketprotocol-76 • W3C - HTML5 - http://dev.w3.org/html5/spec/Overview.html • Blog - Vídeo/HTML5 - http://paulrouget.com/ • http://people.mozilla.com/~prouget/demos/ DynamicContentInjection/play.xhtml • http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual- Cheat-Sheet.pdf • CSS 3 -http://www.zurb.com/playground/ • http://www.slideshare.net/nathansmith/echo-html5 • Tag de Vídeo - http://html5doctor.com/the-video-element/
  38. 38. Imagens • http://www.flickr.com/photos/dricker94/4286899940/sizes/m/in/photostream/ • http://www.flickr.com/photos/simax/3390895249/sizes/m/in/photostream/ • http://www.flickr.com/photos/wwworks/3196112134/sizes/m/in/photostream/ • http://c.universalscraps.com/files/en/cool/cool_003.jpg • http://fc05.deviantart.net/fs39/f/2008/357/8/b/Fractals_Are_Cool_by_Clarence_Garside.jpg • http://3.bp.blogspot.com/_8Zmrc2HRYvU/SatKYx3WOnI/AAAAAAAAATE/bdL8D3UYclc/s400/carneirinho.jpg • http://1.bp.blogspot.com/_WA6vC0pgjAY/Sb9BVmeN_xI/AAAAAAAAADc/rGkB897g_TE/s320/149033.jpg • http://baiano.files.wordpress.com/2007/10/rene_higuita.jpg • http://www.flickr.com/photos/svenwerk/541434909/sizes/m/in/photostream/ • http://www.flickr.com/photos/12905355@N05/4301184191/ • http://www.flickr.com/photos/improbulus/311039122/sizes/m/in/photostream/ • http://www.flickr.com/photos/niallkennedy/4166725591/sizes/m/in/photostream/ • http://sleepzine.com/wp-content/uploads/2007/03/google-girl-780952.jpg
  39. 39. Thank You Marcelio Leal @marcelioleal marcelioleal.com marcelioleal@gmail.com @onsee @phppaidegua

×