Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Viewers also liked (20)
Similar to HTML5
Similar to HTML5 (20)
Recently uploaded
Recently uploaded (20)
HTML5
- 1. Mark Embling
- 2. What’s New? New semantic elements New form <input> types Data attributes Audio/video capabilities JS APIs Canvas Geo-location Offline storage Some of these are technically not part of the HTML5 spec (anymore)
- 3. But first… A doctype which it’s actually possible to remember: <DOCTYPE html> Puts all the browsers into standards mode That’s about all it does
- 4. … and … <meta charset="utf-8"> instead of <meta http-equiv="Content-Type" value="text/html;charset=utf-8">
- 5. Semantic Elements <header> <hgroup> <nav> <article> <section> <aside> <figure> <figcaption> <time> <meter> <progress> <mark> <footer> Not a full list
- 6. Semantic Elements <DOCTYPE html><html><head><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></ul></nav> <article> <header><h1>Interesting Post</h1></header> <p>Blablabla. Interesting post here.</p> <footer> <p>Published on <time datetime="2011-03-30" pubdate>30th March ‘11</time></p> </footer> </article> <!-- some more articles --> <footer><p>Copyright Me 2011</p></footer></body></html>
- 7. Semantic Elements <DOCTYPE html><html><head><!-- stuff --></head><body><header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></ul></nav> <article> <header><h1>Interesting Post</h1></header> <p>Blablabla. Interesting post here.</p> <footer> <p>Published on <time datetime="2011-03-30" pubdate>30th March ‘11</time></p> </footer> </article> <!-- some more articles --><footer><p>Copyright Me 2011</p></footer></body></html>
- 8. Semantic Elements <DOCTYPE html><html><head><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header><nav><ul><!-- menu items… --></ul></nav> <article> <header><h1>Interesting Post</h1></header> <p>Blablabla. Interesting post here.</p> <footer> <p>Published on <time datetime="2011-03-30" pubdate>30th March ‘11</time></p> </footer> </article> <!-- some more articles --> <footer><p>Copyright Me 2011</p></footer></body></html> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/things">Things</a></li> <li><a href="/widgets">Widgets</a></li><li><a href="/doodads">Doodads</a></li> <li><a href="/thingumybobs">Thingumybobs</a></li> <li><a href="/contact">Contact Us</a></li> </ul></nav>
- 9. Semantic Elements <DOCTYPE html><html><head><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></ul></nav> <article> <header><h1>Interesting Post</h1></header> <p>Blablabla. Interesting post here.</p> <footer> <p>Published on <time datetime="2011-03-30" pubdate>30th March ‘11</time></p> </footer> </article> <!-- some more articles --> <footer><p>Copyright Me 2011</p></footer></body></html>
- 10. Semantic Elements <DOCTYPE html><html><head><!-- stuff --></head><body> <header><h1>My Really Rubbish Blog Demo</h1></header> <nav><ul><!-- menu items… --></ul></nav> <article> <header><h1>Interesting Post</h1></header> <p>Blablabla. Interesting post here.</p> <footer> <p>Published on <time datetime="2011-03-30" pubdate>30th March ‘11</time></p> </footer> </article> <!-- some more articles --> <footer><p>Copyright Me 2011</p></footer></body></html>
- 11. Semantic Elements: IE ≤ 8 IE ignores them by default Cannot be styled HTML5 Shim http://remysharp.com/2009/01/07/html5-enabling-script/ http://code.google.com/p/html5shim/ <!--[if lt IE 9]><script src="…/html5.js"></script><![endif]-->
- 12. Dropped Elements Deprecated elements in HTML 4.01 & XHTML 1 are gone: <applet> <acronym>(use <abbr> instead) <frame> / <frameset> <font> <center> <u> <blink> & <marquee> <tt> Good riddance! Not a full list
- 13. Form Input Types More specific input types Browsers can present optimised controls/keyboards/UI email color date datetime datetime-local email month number range search tel time url week Browser support right now is patchy If not supported, it’ll default to a standard text input
- 14. Form Validation Attributes for validation of input pattern required min/max Not quite there yet in terms of support Opera is probably best now But no ability to change/style validation errors
- 15. Data Attributes Allows arbitrary pieces of data to be attached to any element The sort of data which doesn’t belong in class or id Data can be used via JS Client-side sorting Binding/templating Build client-side visualisations Anything!
- 16. Data Attributes Any attribute beginning with data- <trdata-person-ref="1003">…</tr> <trdata-sorting-key="bloggsjoe">…</tr> <button data-bind="enable: SaveEnabled">…</button> Ignored by the browser and validators No browser (including old ones) will be upset by this Apply to any element you want
- 17. Multimedia Native audio and video in the browser (no plugins) <audio> OggVorbis, MP3, AAC (M4A), WAV (browser dependant) <video> WebM, Ogg (Theora + Vorbis), MP4 (H.264 + AAC)(browser dependant)
- 18. Multimedia <audio src="music.mp3" controls>Fallback content</audio> or <audio controls> <source src="music.m4a" type="audio/mp4"> <source src="music.mp3" type="audio/mpeg">Fallback content</audio>
- 19. Canvas A raster-based drawing surface right there in the page Manipulate via JavaScript 2D currently (3D coming) Browser support: all modern browsers & IE6-8 with help Excanvascode.google.com/p/explorercanvas/ <canvas id="mycanvas" width="400" height="300">Fallback content</canvas>
- 20. Canvas Data visualisation Graphs code.google.com/p/flot/ Dials/gauges Animation and effects Games Rob Hawkes’ Rawketsrawkets.com
- 21. RawketsCanvas & websockets game by Rob Hawkesrawkets.com
- 22. Canvas Get the context for the canvas. This is what is used for drawing. var canvas = document.getElementById("mycanvas"); var context = canvas.getContext("2d"); or with jQuery… var canvas = $("#mycanvas").get(0); var context = canvas.getContext("2d");
- 23. Canvas Do some drawing// Draw a couple of rectanglescontext.fillRect(x, y, w, h);context.strokeRect(x, y, w, h);// Draw a linecontext.beginPath();context.moveTo(x, y);context.lineTo(x, y);context.closePath();
- 24. Canvas Repeat step 2 Maybe do some more drawing fillRect(x, y, w, h) strokeRect(x, y, w, h) beginPath() closePath() moveTo(x, y) fill() stroke() lineTo(x, y) rect(x, y, w, h) arc(x, y, radius, startAngle, endAngle, anticlockwise) arcTo(x1, y1, x2, y2, radius) Plus a lot more
- 25. Geo-location Find the user’s location via JS Never happens without the user’s permission Asks first Returns an object: coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeAccuracy coords.heading coords.speed timestamp
Editor's Notes
- New elements for more accurately describing your content.New input types such as email, number, date. More on these later.Data attributes – which allow you to attach extra data to elements on your page, which can then be used from within JS.Native audio and video.Various new APIs including canvas, geolocation and offline storage (cookies on steroids).More stuff I haven’t included.Not all of these APIs are actually part of the HTML5 spec – some have been split out into their own – but they all work together as a coherent whole, and browser vendors are working in all areas.
- Just before we get to the good stuff, a couple of things… the doctype is now something that real, actual humans can remember.Presence of this is enough to put browsers into standards mode – that’s about all it does now. Doesn’t describe what the document is beyond stating it’s HTML.No browser worries here – they made sure of that.And…
- Shorthand meta syntax for describing the character encoding. Again, real people can actually remember this.
- Allows much richer description of content.hgroup = group together an h1 and h2 (for example) to be treated as heading and subheading/taglinemark = used for highlighting something.
- An example. A blog. A really rubbish blog.Let’s have a look at each part of this…
- Header and footer of the page – wrapped in the appropriately named element. Now it unambiguously states that this is the header and this is the footer. No meaningless divs.
- Menu is a list,the same as you would expectbut now enclosed in a nav element. Now we, and search engines and whatever, know it is the main navigation. Again, no ambiguity.
- A single blog post. Can be treated as a self-contained entity in itself, so belongs in an article element.Section element is similar, but is more for use when the content is only part of a whole.
- Dates & times can now be marked up as such. This also opens up the possibility for them to be machine-readable (the datetime attribute). The content within the element is what’s rendered. The pubdate attribute indicates that this date/time shows the date of publication of the article – outside of an article it would apply to the page. Can only have one pubdate’d <time> per article/page.
- HTML5 shim adds all the new elements to the DOM in IE.old. Allows them to then be styled. Just include the JS file – conditional comments restrict it to just the IE.old versions.
- These rubbish old elements from previous specs are gone from HTML5. Browsers will no doubt still support them for some time, but that’s no excuse.
- Input types more tailored to the type of information required – e.g. mobile browsers can give a specific keyboard.Browser can present a better UI for the type of information – date, colour picker, range = slider.Opera support is best right now, Chrome and Firefox are getting there, IE = no.If an unsupported type is used, a standard text input is rendered.
- Pattern = regexMin/max = can be used with range, number etc to define upper and lower limits.Browser should show some sort of message or visual cue to indicate problems, and not allow form submission.
- Allows arbitrary pieces of data to be attached to any element.The sort of data which doesn’t belong in class or idData can be used via JS (Client-side sorting, Binding/templating, Build client-side visualisations, Anything!)
- Just add your data attributes to the appropriate elements, and do as you wish with them. Browsers will ignore them, validators won’t be the least bit upset. All browsers will be fine, including old ones.
- Audio and video are now first class citizens in the browser, just like images.Audio and video elements.A variety of codecs – support varies from browser to browser. To be sure of it working everywhere, you’ll need at least two or three versions using different formats.Modern browsers inc IE9. IE.old = no.
- Can use the src attribute (allows use of only the one format), or specify several versions using source elements. The browser will look down the list and pick one it can play. This applies to the audio and the video element.Fallback content for those browsers that don’t know about the audio/video element goes inside. Could have a message or perhaps a flash player?Demo of audio/video in the browser.
- Raster (pixel based), not vector.Draw on the canvas using JS.2D support currently, 3D coming (but not something I’ve played with at all).All modern browsers (inc IE9). Old IE emulate using excanvas, a JS lib which duplicates the canvas API.Canvas element, be sure to give width and height in markup – doing so in CSS will stretch the canvas contents. (can change these in JS of course).
- Some uses for canvas.Visualising data using graphs and dials – graph produced using a library called ‘Flot’ (jQuery plugin). Allows creation of line/scatter/bar charts. Has various other options using plugins. Dials are something I produced for work. Could be done another way but canvas is just cleaner.Can be used for animation by repeatedly drawing and clearing every so often (depending on your chosen frame rate).Rob Hawkes has based his HTML5 asteroids-type game on canvas, as have others.
- The context is the thing used for actually doing the drawing on the canvas surface. This can be got off the canvas.First get the canvas element on the page, then ask it for its 2D context.
- The context has a load of methods for drawing. fillRect = draw a filled rectanglestrokeRect = draw an outline rectangleCan draw more complex paths. Second example starts a new path, moves the start point to wherever we want it, and then draws a line. We then close the path as we’re now done. There could have been more steps.The x and y co-ordinates start at 0,0 in the top left, as you would expect.
- Can do as much drawing as you like. Here are a few methods. There are many more, such as the ability to erase areas of the canvas and change the fill and stroke colours for subsequent drawing. Note that the canvas is a bitmap, and once something is drawn it cannot be changed – you would need to erase or draw over it.
- Browser will always ask (Firefox/Chrome via an infobar, iPhone via a popup).Some of the returned object may not be included (blue ones), might be null. Other 3 are guaranteed.Accuracy = meters.Heading = degrees clockwise from north (true/magnetic north).Speed = compared to previous location/time. Given in meters per second.Modern browsers inc IE9.Timestamp = like a Date().Next side intro: W3C made a logo set for HTML5 (and associated technologies), so obviously I had no choice but to do this…
- A good team:HTML5, CSS3, JavaScript, (Semantics, Multimedia)I’ve only just briefly covered some of the new things we’re now getting, but there’s a lot more I haven’t even managed to put in here or even get a good look at. You can just use the bits you want now, and add more over time as it becomes sensible/relevant. Well worth digging in, using this as a starting-point.
- Dive into HTML5 = book by Mark Pilgrim. Paid physical version called ‘HTML5 Up an Running’ on Amazon etc.Mozilla Developer Network = lots of good stuff including HTML5, canvas and so on.Rawkes = Rob Hawkes’ site – done a lot of work around HTML5 canvas, done several talks on it.Going to put these slides and all links up on my blog in the next couple of days. Will let Matt know and tweet it.
- That’s about all.My blog, me on twitter.