HTML 5 Overview
•
0 j'aime•667 vues
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à HTML 5 Overview
Similaire à HTML 5 Overview (20)
Plus de Marcelio Leal
Plus de Marcelio Leal (13)
Dernier
Dernier (20)
HTML 5 Overview
- 1. HTML 5 Overview Marcelio Leal - @marcelioleal
- 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. “PQP, finalmente “chegou” o HTML 5 !” Eu, depois que vi a primeira vez as coisas do HTML 5...
- 4. HTML Hipertext Markup Language Fácil Simples Intuitiva Extensível Rápida
- 5. What’s HTML5 ? A nova versão do HTML Sinônimo de coisa #estaile na Web.
- 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. 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. 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. Mudanças
- 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. Novidades ✓article ✓footer ✓aside ✓header ✓audio ✓mark ✓canvas ✓meter ✓command ✓nav ✓datagrid ✓output ✓datalist ✓progress ✓datatemplate ✓source ✓event-source ✓time ✓figure ✓video
- 12. #farelo ✓acronym ✓applet ✓basefont ✓dir ✓frame ✓font ✓frameset ✓s ✓noframes ✓strike ✓tt ✓u ✓big ✓center
- 13. Separation Presentation Content
- 14. Old structure
- 15. New structure
- 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. 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. 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. Simple is Better
- 20. Videos Format • Ogg Theora / Voribs • Firefox 3.5 + / Chrome / Opera • MPEG-4 H.264/ACC • Safari / Chrome / Opera
- 23. Quem mais ?
- 24. 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
- 28. 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
- 29. 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; }
- 30. Input - New Types • search • month • tel • week • url • time • email • datetime-local • datetime • number • date • range • color
- 31. Form - Types
- 32. HTML5 Apps
- 33. Geolocation
- 34. 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/
- 36. “The world is moving to HTML5” Steve Jobs
- 37. “I had no idea there was so much HTML5 already in play” Tim O’Reilly
- 38. “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
- 39. “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
- 40. http://ishtml5readyyet.com/ http://caniuse.com/
- 41. 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/
- 43. 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
- 44. Thank You Marcelio Leal @marcelioleal marcelioleal.com marcelioleal@gmail.com @onsee @phppaidegua