Html5 Overview

1,583 views

Published on

An quick Overview of HTML5 changes.

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

No Downloads
Views
Total views
1,583
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html5 Overview

  1. 1. HTML5<br />Overview<br />
  2. 2. Agentes<br />Timeline<br />Simplificações<br />Novidades<br />Tags Mantidas<br />Estrutura<br />Estrutura Antiga<br />Nova Estrutura<br />Tópicos da Apresentação<br />
  3. 3. Tecnologias<br />Class: Semantics<br />Class: Offline & Storage<br />Class: Device Access<br />Class: Connectivity<br />Class: Multimedia<br />Class: 3D, Graphics& Effects<br />Class: Performance & Integration<br />Class: CSS 3<br />Tópicos da Apresentação<br />
  4. 4. Compatibilidade<br />Opiniões<br />Referências<br />Imagens<br />Tópicos da Apresentação<br />
  5. 5. Web HipertextApplication Technology WorkingGroup (WHATWG) - http://www.whatwg.org/<br />Criado em 2004 – Contribuidores individuais: Apple, Mozilla, Google e Opera<br />Aberto para Contribuições<br />Demos, APIS, Contribuições ligadas ao HTML<br />World Wide Web Consortion (W3C) - http://www.w3.org/<br />Draft do HTML5 em 2008<br />Agentes<br />
  6. 6. 1991 – Tags (HTML) mencionadas<br />1993 – Draft HTML<br />1995 – HTML 2<br />1997 – W3C<br />HTML 3.2 (Janeiro)<br />HTML 4 (Dezembro)<br />1999 – HTML 4.1 – recomendação W3C<br />2000 – XHTML 1.0<br />Timeline<br />
  7. 7. 2001 – XHTML 1.1<br />2001/2007 – W3C “Sleeps”<br />2004 – WATWG inicia Project Web Applications (HTML5)<br />2008 – Draft HTML5 pela W3C<br />2009 – W3C anuncia fim do grupo XHTML<br />Timeline<br />
  8. 8. Doctype<br /> <!DOCTYPE html><br /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br /> "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />Type não necessário<br /> <scriptsrc="myscript.js"></script><br /> <linkhref="myapp.js"></link><br />Simplificações<br />
  9. 9. Novidades<br />article<br />aside<br />audio<br />canvas<br />command<br />datagrid<br />datalist<br />datatemplate<br />event-source<br />figure<br />footer<br />header<br />mark<br />meter<br />nav<br />output<br />progress<br />source<br />time<br />video<br />
  10. 10. Tags Mantidas<br />acronym<br />applet<br />basefont<br />dir<br />font<br />s<br />strike<br />u<br />big<br />center<br />frame<br />frameset<br />noframes<br />tt<br />
  11. 11. Estrutura<br />
  12. 12. Estrutura antiga<br />
  13. 13. Estrutura Nova<br />
  14. 14. Givingmeaningtostructure, semantics are front and center with HTML5. A richer set oftags, alongwithRDFa, microdata, andmicroformats, are enabling a more useful, data driven web for bothprogramsandyourusers.<br />Class: Semantics<br />
  15. 15. HTML5 appscan start faster, andworkevenifthereis no internet connection, thankstotheApp Cache, Local Storage, Indexed DB, andthe File APIs.<br />Class: Offline & Storage<br />
  16. 16. Withgeo-locationjustthebeginning, HTML5 will help appstoaccessdevicesoutsideofyour browser andconnectedtoyourcomputer.<br />Class: Device Access<br />
  17. 17. Class: Device Access<br />
  18. 18. More efficientconnectivitymeans more real-time chats, faster games, andbetter communication. Web Sockets and Server-SentEvents are pushing (punintended) data betweenclientand server more efficientlythaneverbefore.<br />Class: Connectivity<br />
  19. 19. Audioandvideo are firstclasscitizens in the HTML5 web, living in harmonywithyourappsand sites. Lights, camera, action!<br />Class: Multimedia<br />
  20. 20. Audioelement (OGG): SRC, AUTOBUFFER, CONTROLS, LOOP, AUTOPLAY<br /> <audiosrc="music.ogg"autoplaycontrols></audio><br />Videoelement (OGV, MP4): SRC, CONTROLS, LOOP, AUTOPLAY<br /><videosrc="video.ogv" loop autoplay /><br />Áudio e Vídeo<br />
  21. 21. <objectclassid="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"><br /> <paramname="allowFullScreen"value="true" /><br /> <paramname="allowscriptaccess"value="always" /><br /> <paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;" /><br /> <paramname="allowfullscreen"value="true" /><br /> <embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;"allowscriptaccess="always"allowfullscreen="true”></embed><br /></object><br />Áudio e Vídeo<br />
  22. 22. <objectclassid="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"><br /> <paramname="allowFullScreen"value="true" /><br /> <paramname="allowscriptaccess"value="always" /><br /> <paramname="src"value="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;" /><br /> <paramname="allowfullscreen"value="true" /><br /> <embedtype="application/x-shockwave-flash"width="425"height="344"src="http://www.youtube.com/v/7r1_ePcl3aM&amp;hl=en&amp;fs=1&amp;"allowscriptaccess="always"allowfullscreen="true”></embed><br /></object><br />Áudio e Vídeo<br />
  23. 23. <videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp4"controlsautobuffer><br /> <p>Trythispage in Safari 4! Oryoucan<ahref="http://www.youtube.com/demo/google_main.mp4">download thevideo</a>instead.</p><br /></video><br />Class: Multimedia<br />
  24. 24. OggTheora/Vorbis<br />Firefox 3.5+<br />Chrome<br />Opera<br />MPEG-4 H.264/ACC<br />Safari<br />Chrome<br />Opera<br />Formatos de Vídeo<br />
  25. 25. Controles Nativos<br />
  26. 26. Player HTML5<br />http://sublimevideo.net/<br />
  27. 27. Between SVG, Canvas, WebGL, and CSS3 3D features, you'resuretoamazeyouruserswithstunningvisualsnativelyrendered in the browser.<br />Class: 3D, Graphics & Effects<br />
  28. 28. Canvas<br /><canvas id="myCanvas"width="300"height="150">Your browser does nothavesupportfor Canvas.</canvas><br /><scripttype="text/javascript"><!--<br />window.addEventListener('load', function () {<br />// Getthecanvaselement.<br />varelem = document.getElementById('myCanvas');<br />if (!elem || !elem.getContext) {<br />return;<br />}<br />// Get the canvas 2d context.<br />var context = elem.getContext('2d');<br />if (!context) {<br />return;<br />}<br />http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br />
  29. 29. Canvas<br />context.fillStyle= '#00f'; // blue<br />context.strokeStyle = '#f00'; // red<br />context.lineWidth = 4;<br />// Draw some rectangles.<br />// Arguments: x, y, width, height<br />context.fillRect (0, 0, 150, 50);<br /> context.strokeRect(0, 60, 150, 50);<br />context.clearRect (30, 25, 90, 60);<br /> context.strokeRect(30, 25, 90, 60);<br />}, false);<br />// --></script><br />http://dev.opera.com/articles/view/html-5-canvas-the-basics/<br />
  30. 30. Canvas<br />Aplicações - Exemplo<br />Newton Polinomial - http://www.benjoffe.com/code/demos/interpolate/<br />BlobSallad - http://www.blobsallad.se/<br />Star-Field flight - http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html<br />3D Walker - http://www.benjoffe.com/code/demos/canvascape/<br />paintWeb- http://code.google.com/p/paintweb/<br />
  31. 31. Makeyour web app, andthe web, fasterwith a varietyoftechniquesandtechnologiessuch as Web WorkersandXMLHttpRequest 2. No usershalleverwaitonyourwatch.<br />Class: Performance & Integration<br />
  32. 32. CSS3 delivers a wide range ofstylizationandeffects, enhancingthe web appwithoutsacrificingyoursemanticstructureor performance. Additionally Web Open FontFormat (WOFF) providestypographicflexibilityandcontrolfarbeyondanythingthe web hasofferedbefore.<br />Class: CSS 3<br />
  33. 33. Em desenvolvimento<br />Está sendo desenvolvido em sub-especificações<br />transformation<br />animation<br />transition<br />Exemplo do que pode ser feito com CSS 3:<br />http://www.zurb.com/playground<br />Class: CSS 3<br />
  34. 34. Class: CSS 3<br />
  35. 35. Class: CSS 3<br />
  36. 36. Class: CSS 3<br />
  37. 37. Form Demo<br /><formaction="formdemo.php"method="post"><br /> <label for="name">Name:</label><br /> <inputtype="text"name="name"requiredplaceholder="Name" /><br /> <label for="email">Email:</label><br /> <inputtype="email"name="email"requiredplaceholder="email@example.com" /><br /><label for="website">Website:</label><br /><inputtype="url"name="website"requiredplaceholder="http://www.example.com" /><br /><label for="number">Number:</label><br /><inputtype="number"name="number" min="0"max="10"step="2"requiredplaceholder="Even num < 10"><br /><label for="range">Range:</label><br /><inputtype="range"name="range" min="0"max="10"step="2" /><br /><label for="message">Message:</label><br /><textareaname="message"required></textarea><br /><inputtype="submit"value="SendMessage" /><br /></form><br />http://www.bradshawenterprises.com/tests/formdemo.php<br />
  38. 38. Form Demo (CSS)<br />input:not(:focus), textarea:not(:focus) {<br />opacity:0.5;<br />}<br />input:required, textarea:required {<br />background:url("/tests/formdemo/asterisk_orange.png") no-repeat 280px 7px;<br />}<br />input:valid, textarea:valid {<br />background:url("/tests/formdemo/tick.png") no-repeat 280px 5px;<br />}<br />input:focus:invalid, textarea:focus:invalid {<br />background:url("/tests/formdemo/cancel.png") no-repeat 280px 7px;<br />}<br />input[type=submit] {<br /> padding:10px;<br />background:none;<br />opacity:1.0;<br />}<br />http://www.bradshawenterprises.com/tests/formdemo.php<br />
  39. 39. Form –Tipos<br />search<br />tel<br />url<br />email<br />datetime<br />date<br />month<br />week<br />time<br />datetime-local<br />number<br />range<br />color<br />
  40. 40. Form –Tipos<br />
  41. 41. Form –Tipos<br />
  42. 42. Tabela de Compatibilidade do HTML5 com os principais browsers:<br />http://caniuse.com/<br />Compatibilidade<br />
  43. 43. “The world ismovingto HTML5”<br />Steve Jobs<br />Opiniões<br />
  44. 44. “Ihad no ideatherewassomuch HTML5 already in play”<br />Tim O’Reilly<br />Opiniões<br />
  45. 45. “The Web hasnotseenthisleveloftransformation, thislevelofaceleration, in thepast 10 years... we’re betting big on HTML5”<br />VicGundotra, Google<br />Opiniões<br />
  46. 46.
  47. 47.
  48. 48. WHATWG - HTML 5 - http://www.whatwg.org/specs/<br />IETF - WebSockethttp://tools.ietf.org/html/draft-hixie- thewebsocketprotocol-76<br />W3C - HTML5 - http://dev.w3.org/html5/spec/Overview.html<br />Blog - Vídeo/HTML5 - http://paulrouget.com/<br />Referências<br />
  49. 49. http://people.mozilla.com/~prouget/demos/ DynamicContentInjection/play.xhtml<br />http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual- Cheat-Sheet.pdf<br />CSS 3 - http://www.zurb.com/playground/<br />http://www.slideshare.net/nathansmith/echo-html5<br />Tag de Vídeo - http://html5doctor.com/the-video-element/<br />Referências<br />
  50. 50. http://www.w3.org/html/logo/downloads/HTML5_Logo.svg<br />http://www.w3.org/html/logo/downloads/HTML5_Tech_Classes_SVG.zip<br />http://dclips.fundraw.com/zobo500dir/elkbuntu_FBI_Dude_3.jpg<br />http://igs.indiana.edu/geology/ancient/ribbontimeline/timeline01.gif<br />http://www.flickr.com/photos/12905355@N05/4301184191/<br />http://www.flickr.com/photos/improbulus/311039122/sizes/m/in/photostream/<br />http://www.flickr.com/photos/niallkennedy/4166725591/sizes/m/in/photostream/<br />Imagens<br />

×