More Related Content Similar to An Introduction To HTML5 (20) More from Robert Nyman (20) 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>
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>
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ā
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");
67. var url = "http://robertnyman.com",
title = "My blog",
state = {
address : url
};
window.history.pushState(state.address, title, url);
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
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>
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.ļ¬ickr.com/photos/48600103384@N01/3679671408
Swedish ļ¬ag: http://www.olssonfoto.se/JAlbum/SGP%202008%20Ullevi/slides/Svenska%20ļ¬aggan.html History: http://animatedtv.about.com/od/fgmultimedia/ig/-Family-Guy--Pictures/Grifļ¬n-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-ļ¬ash.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-deļ¬ne-
Apple logo: http://www.mobilewhack.com/iphone-helps-apples-proļ¬ts-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 (afļ¬rmation): http://www.academyofawakening.com.au/afļ¬rmation_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.ļ¬ickr.com/photos/tedion/3966234643/
backwardscompatibility.jpg Google Chrome: http://www.ļ¬ickr.com/photos/tedion/3966233919/
Progressive enhancement: http://www.ļ¬ickr.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-ofļ¬ine-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.ļ¬les.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
