HTML5
•
2 j'aime•1,053 vues
This document provides an overview of HTML5 and what's new in the latest version. It discusses new semantic elements like <header>, <nav>, and <article> that improve document outlining. It also covers new multimedia features like native audio and video playback without Flash, as well as 2D/3D graphics using <canvas>. Other additions include new form controls, multiple file uploading, and geolocation. While HTML5 brings many new features, it is an ongoing evolution of HTML rather than a completely new language.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à HTML5
Similaire à HTML5 (20)
Dernier
Dernier (20)
HTML5
- 1. HTML5 Why aren’t you using it? Brad Touesnard http://bradt.ca @bradt
- 2. You are using it “HTML5 isn’t a completely new language created from scratch. It’s an evolutionary rather than revolutionary change in the ongoing story of markup. If you are currently creating websites with any version of HTML, you’re already using HTML5.” - Jeremy Keith, HTML5 for Web Designers
- 3. What’s new in HTML5? New Structural Semantic Elements Multiple File Uploading Native Audio & Video Document Editing New Form Controls Cross-Document Messaging 2D & 3D Graphics Browser History Management Microdata Web Storage Drag-and-Drop Web Workers
- 4. New Structural Semantic Elements
- 6. <div id=”header”> <div id=”content”> <div id=”sidebar”>
- 7. <header> <section> <aside>
- 8. <nav> <nav> <article> <section> <section> <aside> <nav> <article> <section> <section> <section> <article> <nav> <aside>
- 9. <header>
- 10. <h1> <p> <p>
- 13. Document Outline New York Times China Cracks Down on Illegal Rare Earth Mines The Snowstorm Transit Update Stir Crazy Snow Removal
- 14. HTML5 Document Outliner http://gsnedders.html5.org/outliner/
- 15. Other semantic elements <hgroup> <footer> <time> <mark> <figure> / <figcaption>
- 16. Using These New Elements Today
- 17. Ye Olde Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 18. Ye New Doctype <!DOCTYPE html>
- 19. Go Block article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; }
- 20. Getting Internet Explorer to behave <head> ... <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com /svn/trunk/html5.js"></script> <![endif]--> ... </head>
- 21. Why today? Om nom nom!
- 22. Native Video
- 23. The Land Before Flash
- 24. Criticisms of Flash Browser slowness & crashing Poor video performance (better in 10.1 with hardware acceleration) No standardized video API No semantics
- 25. Ideally Simple <video src="sneezing-panda.webm" width="320" height="240"></video>
- 26. Browser Support Today http://diveintohtml5.org/video.html#what-works
- 27. Browser Support Soon http://diveintohtml5.org/video.html#what-works
- 28. Unfortunately Complicated <video width="320" height="240" preload controls> <source src="panda.mp4" /> <source src="panda.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="panda.ogv" type='video/ogg; codecs="theora, vorbis"' /> <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "panda.mp4", "autoPlay":false, "autoBuffering":true}}' /> <p>Download video as <a href="panda.mp4">MP4</a>, <a href="panda.webm">WebM</a>, or <a href="panda.ogv">Ogg</a>.</p> </object> </video>
- 29. Articles “Dive into HTML5: Video on the Web” - Mark Pilgrim http://diveintohtml5.org/video.html “Flash Player: CPU Hog or Hot Tamale? It Depends.” http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or- hot-tamale-it-depends-.html
- 30. Native Audio
- 31. The Short & Sweet <audio src="bigwebshow.ogg" controls preload="auto" autobuffer></audio>
- 32. Browser Support http://html5doctor.com/native-audio-in-the-browser/
- 33. The Long & Ugly <audio controls preload="auto" autobuffer> <source src="bigwebshow.mp3" /> <source src="bigwebshow.ogg" /> <object width="300" height="20" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "bigwebshow.mp3", "autoPlay":false, "autoBuffering":true}}' /> <p>Download podcast as <a href="bigwebshow.mp3">MP3</a>, or <a href="bigwebshow.ogg">Ogg</a>.</p> </object> </audio>
- 34. Articles “The State of HTML5 Audio” - Scott Schiller http://24ways.org/2010/the-state-of-html5-audio “HTML5 Audio Unplugged” - Richard Shepherd http://thinkvitamin.com/code/html5-audio-unplugged/ “Native Audio in the Browser” - Mark Boas http://html5doctor.com/native-audio-in-the-browser/
- 35. 2D & 3D Graphics
- 36. Technologies <canvas id="game" width="500" height="500"> </canvas> canvas.getContext(‘2d’) WebGL (managed by Khronos Group) canvas.getContext(‘experimental-webgl’)
- 44. Links Google Pacman Biolab Disaster http://google.com/pacman/ http://playbiolab.com/ Wolfenstein 3D Quake II WebGL port http://www.nihilogic.dk/labs/wolf/ http://code.google.com/p/quake2-gwt-port/ Arcade Fire “The Wilderness True 8-bit Color Cycling with Downtown” HTML5 http://www.thewildernessdowntown.com/ http://www.effectgames.com/demos/ canvascycle/?sound=0
- 46. Placeholder Text <input type="text" placeholder="Enter search text here">
- 50. Number <input type="number" min="0" max="10" step="2" value="6">
- 51. Range <input type="range" min="0" max="10" step="2" value="6">
- 52. Date & Time <input type="date"> <input type="month"> <input type="week"> <input type="time"> <input type="datetime"> Opera 9 <input type="datetime-local">
- 55. Upload Multiple Files <input type="file" name="photos[]" multiple>
- 56. Form Validation Email address Web address Required <input type="text" required>
- 57. Articles “multiple file input in Firefox 3.6” - Paul Rouget http://hacks.mozilla.org/2009/12/multiple-file-input-in-firefox-3-6/ “Dive into HTML5: A Form of Madness” - Mark Pilgrim http://diveintohtml5.org/forms.html
- 58. What HTML5 is not
- 59. What HTML5 is not... CSS Web Storage SVG Turducken WOFF Web Workers Geolocation God
- 63. “It’s as if the government suddenly announced that from today, all vegetables will be called potatoes, just because some vegetables are potatoes.” - Bobbie Johnson, GigaOM
- 68. “I wish I could put ‘HTML5’ in a sentence and it would mean version 5 of HTML. That would make sense.” - Me
- 69. Buzzword-o-matic Ajax Web 2.0 HTML5
- 70. Buzzword-o-matic Web5
- 71. Web5 Geolocation
- 72. Browser Support
- 73. Getting Location if (!!navigator.geolocation) { var geo = navigator.geolocation; geo.getCurrentPosition(displayMap); }
- 75. Using Location function displayMap(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // embed a map }
- 77. Articles “You Are Here (and so is everybody else)” - Mark Pilgrim http://diveintohtml5.org/geolocation.html Geolocation demo http://html5demos.com/geo
- 78. Online Resources Modernizr - Faruk Ates, Paul Irish HTML5 Doctor - Bruce Lawson, http://www.modernizr.com/ Remy Sharpe, etc http://html5doctor.com/ HTML5 Boilerplate - Paul Irish http://html5boilerplate.com/ Quirks Mode http://www.quirksmode.org/ W3Schools HTML5 Reference http://www.w3schools.com/html5/ html5_reference.asp
- 79. Books HTML5 for Web Designers Jeremy Keith Introducing HTML5 Bruce Lawson and Remy Sharp HTML5: Up and Running Mark Pilrim
- 80. Thank You Brad Touesnard http://bradt.ca