Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à An Introduction To HTML5
Similaire à An Introduction To HTML5 (20)
Plus de Robert Nyman
Plus de Robert Nyman (20)
Dernier
Dernier (20)
An Introduction To HTML5
- 1. An Introduction to HTML5
- 13. Web Hypertext Application Technology Working Group - WHATWG
- 14. Web Hypertext Application Technology Working Group - WHATWG
- 16. What is HTML5?
- 22. <!DOCTYPE html>
- 23. HTML or XHTML syntax?
- 25. <DIV>A monkey</DIV> <p id=john>John’s P</p> <input type=text> <input type="text"> <input type="text" />
- 26. <DIV>A monkey</DIV> <p id=john>John’s P</p> <input type=text> <input type="text"> <input type="text" />
- 28. As XHTML <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"> MUST be application/xhtml+xml or application/xml <noscript>Not in XHTML</noscript>
- 30. <audio> <aside> <nav> <section> <hgroup> <article> <figure> <time> <header> <video> <figcaption> <footer>
- 31. <input type="color"> <input type="range"> <input type="number"> <input type="email"> <input type="time"> <input type="search"> <input type="month"> <input type="tel"> <input type="date"> <input type="datetime"> <input type="week"> <input type="datetime-local"> <input type="url">
- 32. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 example</title> </head> <body> <div id="container"> <header role="banner"> <h1>HTML5 example</h1> <p>A page with valid simple HTML5 markup complemented with WAI-ARIA landmark roles for accessibility.</p> </header> <nav role="navigation"> <ul> <li><a href="http://getfirefox.com">Download Firefox</a></li> <li><a href="http://robertnyman.com/">Robert's talk</a></li> </ul> </nav> <article id="main" role="main"> <section id="main-content"> <header> <hgroup> <h2>A title</h2> <h3>Subtitle to the above title</h3> </hgroup> </header> <article> <p>Some content, created <time datetime="2010-01-31">January 31st 2010</time>.</p> </article> <article> <p>Some more content - I guess you get the drift by now.</p> </article> </section> <aside role="complementary"> This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action. </aside> </article> <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer> </div> </body> </html>
- 33. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 example</title> </head>
- 34. <header role="banner"> <h1>HTML5 example</h1> <p> A page with valid simple HTML5 markup complemented with WAI-ARIA landmark roles for accessibility. </p> </header>
- 35. <nav role="navigation"> <ul> <li> <a href="http://getfirefox.com"> Download Firefox </a> </li> <li> <a href="http://robertnyman.com/"> Robert's talk </a> </li> </ul> </nav>
- 36. <article id="main" role="main"> <section id="main-content"> <header> <hgroup> <h2>A title</h2> <h3>Subtitle to the above title</h3> </hgroup> </header> <article> <p> Some content, created <time datetime="2010-01-31">January 31st 2010</time>. </p> </article> <article> <p>Some more content - I guess you get the drift by now.</p> </article> </section> <aside role="complementary"> This is just a demo page to see HTML5 markup and WAI-ARIA landmark roles in action. </aside> </article>
- 37. <footer id="page-footer" role="contentinfo"> Created by <a href="http://robertnyman.com/">Robert Nyman</a> </footer>
- 39. <aside aria-live="polite" aria-relevant="additions" aria-atomic="true"> Some sidebar content </aside>
- 40. WAI-ARIA Authoring Practices 1.0 Live Regions - http://www.w3.org/WAI/PF/aria-practices/ #LiveRegions
- 41. Video
- 43. <video src="swedish-flag.ogv" controls width="320" height="240"> </video>
- 44. <video controls> <source src="swedish-flag.mp4"> <source src="swedish-flag.ogv"> <p> Sorry, your web browser doesn't support the video element. </p> </video>
- 46. <video controls> <source src="http://robertnyman.com/video/swedish-flag.mp4"> <source src="http://robertnyman.com/video/swedish-flag.ogv"> <object width="425" height="340" type="application/x-shockwave-flash" data="http://pics.robertnyman.com/ria/ShizVidz-2010012201.swf"> <param name="movie" value="http://pics.robertnyman.com/ria/ ShizVidz-2010012201.swf"> <param name="allowFullScreen" value="true"> <param name="flashVars" value="s=ZT0xJmk9MzE5NjcyNDUwJms9UUVOdUomYT01MjU0ODc5X21uWFdIJnU9cm9iZXJ0b nltYW4="> </object> <p>Sorry, your web browser doesn't support, well, anything...</p> </video>
- 51. “The WebM project is dedicated to developing a high-quality, open video format for the web that is freely available to everyone”
- 55. Canvas
- 56. <canvas id="my-canvas" width="200" height="200"> I am canvas </canvas>
- 57. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d");
- 58. var canvas = document.getElementById("my-canvas"), context = canvas.getContext("2d"); context.fillStyle = "#f00"; context.fillRect(0, 0, 100, 100); context.strokeStyle = "#00f"; context.strokeRect(25, 25, 50, 50);
- 60. var canvas5 = document.getElementById("my-canvas-5"), context5 = canvas5.getContext("2d"), img = document.createElement("img"); img.addEventListener("load", function () { context5.drawImage(img, 0, 0, 600, 200); // Get canvas content as a base64 image var base64Img = canvas5.toDataURL("image/png"); }, false); img.setAttribute("src", "view.jpg");
- 62. HTML5 Canvas for Internet Explorer - explorercanvas
- 66. History API
- 67. var url = "http://robertnyman.com", title = "My blog", state = { address : url }; window.history.pushState(state.address, title, url);
- 69. Web Sockets
- 73. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // Send data ws.send("Some data"); // Close the connection ws.close();
- 74. var ws = new WebSocket("ws://robertnyman.com/wsmagic"); // When connection is opened ws.onopen = function () { console.log("Connection opened!") }; // When you receive a message ws.onmessage = function (evt) { console.log(evt.data); }; // When you close the connection ws.onclose = function () { console.log("Connection closed"); }; // When an error occurred ws.onerror = function () { console.log("An error occurred") };
- 76. Offline web applications Drag & drop File API Cross-document messaging Web workers Editing - contenteditble Web storage
- 88. Sjoerd Visscher - HTML5 Shiv
- 89. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5 IE fix</title> <script>document.createElement("article");</script> </head> <body> <article>Article content</article> </body> </html>
- 90. Remy Sharp - HTML5.js
- 96. Robert Nyman robertnyman.com/speaking/ robertnyman.com/html5/ Twitter: @robertnyman Pictures: Ninja Turtle: http://www.originalprop.com/blog/2008/03/20/teenage-mutant-ninja-turtles-costume- Designed to exclude: http://www.ij.org/index.php?option=com_content&task=view&id=2603&Itemid=249 restoration/ Canvas: http://morethananelectrician.wordpress.com/2009/08/22/old-paint-but-a-new-canvas/ Bruce Willis: http://www.starsjournal.com/3192/bruce-willis-is-being-sued-for-4-million-dollars.html Excited: http://www.flickr.com/photos/48600103384@N01/3679671408 Swedish flag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20flaggan.html History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Griffin-Family-History.htm Euro Coin: http://accidentaldong.blogspot.com/2009/10/euro-uh-oh.html Sockets: http://www.gigaweb.com/products/view/31681/plug-socket-adult-costume.html Smurfette in car: http://www.schleich-s.com/cms_schleich/cms_bilder/detail/40265.jpg AJAX: http://www.aqlanza.com/technologies01.html Baby smurf one: http://images.esellerpro.com/13/I/106/33/baby%20A.jpg Comet: http://www.blogiversity.org/blogs/cstanton/archive/2009/12/16/revealing-hidden-comet-strikes.aspx Baby smurf two: http://www.arbgames.com.au/images/T/Smurf%20Baby%20With%20Teddy.jpg Flash: http://www.zerofractal.com/assets/error-flash.jpg History (Robots): http://world.honda.com/ASIMO/history/image/top/title.jpg You look nice today: http://laughingsquid.com/you-look-nice-today-a-twitter-induced-podcast/ 2001: http://www.rense.com/general7/alchemkubrick.htm Yes, we can!: http://www.educationuk.org/pls/hot_bc/obj_pls_image?p_img_id=18470 W3C keys: http://www.w3.org/2008/Talks/1120-Budapest-WAIAGE/Overview.html Pros and cons: http://www.mimifroufrou.com/scentedsalamander/2009/03/ifra_seminar_the_pros_cons_of.html Mozilla logo: http://www.w3.org/2008/security-ws/papers/mozilla.html Awesome!: http://randazza.wordpress.com/2009/02/17/competing-views-on-the-auto-admit-story-define- Apple logo: http://www.mobilewhack.com/iphone-helps-apples-profits-soar-to-new-heights/ awesome-2/ Google logo: http://userlogos.org/node/1120 Google wave logo: http://mediesverige.se/?p=470 Free!: http://trendwatching.com/trends/freelove.htm Google start page: http://www.google.com/press/images.html#productimages Small dog/big dog: http://jaybot7.com/blog/wp-content/uploads/2009/09/bigcompany.jpg Strict teacher: http://teacherpictures.com/ HTML5 man: http://poomblox.net/2009/12/06/experience-html5-without-having-to-wait-13-years/ Hands in the sky (affirmation): http://www.academyofawakening.com.au/affirmation_cd.htm iPad spoof: http://failblog.org/2010/01/27/name-fail-photoshop-win/ Failure: http://www.hennessy.id.au/quentingeorge/archives/000378.html Accessibility fail: http://failblog.org/2008/11/13/accessibility-fail/ IE 9: http://www.redmondpie.com/internet-explorer-9-to-be-announced-at-pdc-9140118/ Open API: http://www.socialsignal.com/news/2007/07/31/open-api Someone is wrong on the Internet: http://xkcd.com/386/ Backwards compatibility: http://www.aeropause.com/wordpress/archives/images/2009/03/ Firefox: http://www.flickr.com/photos/tedion/3966234643/ backwardscompatibility.jpg Google Chrome: http://www.flickr.com/photos/tedion/3966233919/ Progressive enhancement: http://www.flickr.com/photos/cole007/4187641210/ Safari: http://www.rapidshareindex.com/Apple-Safari-v4-0-3-Portable_284132.html Choice: http://www.naset.org/uploads/pics/choice.gif Opera: http://www.geek.com/wp-content/uploads/2009/11/Opera_512x512.png Mixed martial arts: http://thegreatgeekmanual.com/blog/t-shirt-of-the-week-mixed-martial-arts-and-crafts Internet Explorer trash: https://www.adaptavist.com/download/attachments/28999748/ie6trash.png Ok icon: http://www.axialis.com/objects/ip_icon_02.shtml Darth Vader: http://threekidcircus.com/threekidcircus/archives/2009/09/darth_jenny.html Flowers: http://successisnotanoption.tumblr.com/post/596574399/no-known-provenance-for-the-image- This way/that way: http://www.fresheventure.com/77/internet-vs-offline-business-ownership/ stole-it-off Don't worry, be happy: http://amiestreet.com/music/the-hit-co/don-t-worry-be-happy/ Shiny: http://punditkitchen.files.wordpress.com/2008/09/political-pictures-sarah-palin-john-mccain-look-shiny- Squirrels: http://pictures.todaysbigthing.com/2010/03/08 object.jpg Accessibility success: http://www.access-it-events.org/success.of.access-it.2009.php Video: http://www.praxmatrix.com/video.php
Notes de l'éditeur
- Moving away from W3C
- Moving away from W3C
- Moving away from W3C
- New semantics
- Accessibility
- New semantics
- New semantics
- New semantics
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- HTML or XHTML?
- New semantics
- New semantics
- New semantics
- New semantics
- New semantics
- New semantics
- New semantics
- New semantics
- New semantics
- New semantics
- New semantics
- New semantics