Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to An Introduction To HTML5
Similar to An Introduction To HTML5 (20)
More from Robert Nyman
More from Robert Nyman (20)
Recently uploaded
Recently uploaded (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
Editor's Notes
- 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