Download as PDF, PPTX
![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;
}](https://image.slidesharecdn.com/html5overviewpdf2385/85/HTML-5-Overview-29-320.jpg)
![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;
}](https://image.slidesharecdn.com/html5overviewpdf2385/75/HTML-5-Overview-29-2048.jpg)
Uploaded byMarcelio Leal
HTML 5 - Overview
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.
More Related Content
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 HipertextApplication 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 - TheOrigin 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.
- 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.
- 15.
- 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.
- 20. Videos Format • OggTheora / Voribs • Firefox 3.5 + / Chrome / Opera • MPEG-4 H.264/ACC • Safari / Chrome / Opera
- 21.
- 23.
- 24. CSS 3 • Emdesenvolvimento • 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 - NewTypes • search • month • tel • week • url • time • email • datetime-local • datetime • number • date • range • color
- 31.
- 32.
- 33.
- 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/
- 35.
- 36. “The world ismoving to HTML5” Steve Jobs
- 37. “I had noidea there was so much HTML5 already in play” Tim O’Reilly
- 38. “The Web hasnot 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 hasnot 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