HTML 5 - Overview

  • Published on
    13-May-2015

  • View
    1.465

  • Download
    3

DESCRIPTION

Uma breve descrio sobre o HTML 5 e suas principais caractersticas como: forms, a nova estrutura, adio e vdeo, etc. An overview about HTML 5 and its main features such as: forms, new structure, audio and video, etc.

Transcript

  • 1.HTML 5 OverviewMarcelio Leal - @marcelioleal

2. Marcelio Leal@marcelioleal - For twitters http://marcelioleal.com - For other thingsSoftware Engineer Chief at @onsee PHP Pai dgua User Group cofounder 10 anos de experincia em Webdev 3. PQP, nalmente chegou o HTML 5 ! Eu, depois que vi a primeira vez ascoisas do HTML 5... 4. HTML Hipertext Markup Language FcilSimples IntuitivaExtensvelRpida 5. Whats HTML5 ? A nova verso do HTMLSinnimo 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 contribuies Demos, APIs, Contribuies ligadas ao HTML World Wide Web Consortium (W3C) Draft do HTML5 em 2008 7. Timeline - The Origin 1991 - Tags(HTML) mensionadas1993 - Draft HTML 1995 - HTML 2 1997 - HTML 3.2 (Jan), HTML 4 (Dec) - W3C 1999 - HTML 4.1 - recomendao W3C #gambi ? 2000 - XHTML 1.0 8. Timeline 2000 Dreamweaverfaz a festa2001 - XHTML 1.1 2001/2007 -W3C SleepsDreamweaver#farelo 2004 - WHATWG starts Project Web Web Applications (HTML5 +-)2.02008 - Draft HTML5 by W3C 2009 - W3C anuncia m do grupo do XHTML 9. Mudanas 10. Simplicaes Doctype Type no necessrio 11. Novidades articlefooter asideheader audiomark canvas meter commandnav datagrid output datalist progress datatemplate source event-source time gurevideo 12. #farelo acronym applet basefont dirframe font frameset snoframes strike tt u big center 13. Separation Presentation Content 14. Old structure 15. New structure 16. udio e VdeoAudio element (OGG) : SRC, AUTOBUFFER, CONTROLS, LOOP, AUTOPLAYVideo element (OGV, MP4): SRC, CONTROLS, LOOP, AUTOPLAY 17. Old way 18. New way

Try this page in Safari 4! Or you candownload the videoinstead.

19. Simple is Better 20. Videos Format Ogg Theora / Voribs Firefox 3.5 + / Chrome / Opera MPEG-4 H.264/ACC Safari / Chrome / Opera 21. Controles Nativos 22. Quem mais ? 23. CSS 3 Em desenvolvimento Est sendo desenvolvido em sub-especicaes tranformation, animation, transition Esse caras cam brincando com isso: http://www.zurb.com/playground 24. Form Name: Email: Website: Number: Range: ...http://www.bradshawenterprises.com/tests/formdemo.php 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. Input - New Types search month tel week url time email datetime-local datetime number date range color 27. Form - Types 28. HTML5 Apps 29. Geolocation 30. Canvas Fallback content, in case the browser does not support Canvas. http://dev.opera.com/articles/view/html-5-canvas-the-basics/ 31. Canvas e Maluquices 32. The world is moving to HTML5 Steve Jobs 33. I had no idea there was so much HTML5 already in playTim OReilly 34. The Web has not seen this level of transformation, this level of aceleration, in the past 10 years... were betting big on HTML5Vic Gundotra, Google 35. The Web has not seen this level of transformation, this level of aceleration, in the past 10 years... were betting big on HTML5Vic Gundotra, Google 36. http://ishtml5readyyet.com/ http://caniuse.com/ 37. Referncias 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 - Vdeo/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 Vdeo - http://html5doctor.com/the-video-element/ 38. Imagens http://www.ickr.com/photos/dricker94/4286899940/sizes/m/in/photostream/ http://www.ickr.com/photos/simax/3390895249/sizes/m/in/photostream/ http://www.ickr.com/photos/wwworks/3196112134/sizes/m/in/photostream/ http://c.universalscraps.com/les/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.les.wordpress.com/2007/10/rene_higuita.jpg http://www.ickr.com/photos/svenwerk/541434909/sizes/m/in/photostream/ http://www.ickr.com/photos/12905355@N05/4301184191/ http://www.ickr.com/photos/improbulus/311039122/sizes/m/in/photostream/ http://www.ickr.com/photos/niallkennedy/4166725591/sizes/m/in/photostream/ http://sleepzine.com/wp-content/uploads/2007/03/google-girl-780952.jpg 39. Thank YouMarcelio Leal@marceliolealmarcelioleal.commarcelioleal@gmail.com@onsee @phppaidegua