html5 overview
DESCRIPTION
An HTML5 overview I gave at Refresh FLL which showed the new features & touched on how to use progressive enhancement and polyfills to leverage HTML5 today.TRANSCRIPT
<HTML5>
• Microsoft Community Mgr.
• Editor of Script Junkie
• Ajaxian.com writer
• Director of Community for jQuery JS Library Project Team
• JavaScript & HTML5 fan boy
Rey Bango
http://scriptjunkie.com
What is HTML5?
Newest version of HTML Provides backwards compatibility
Your HTML/XHTML continue to work Supported by all modern browsers
IE9 Beta Firefox Chrome Opera Safari
HTML5
Specification of HTML published by W3C W3C HTML5 Spec => 900+ pages Work started on HTML5 in late 2003 First Working Draft published January 2008 WHATWG Last Call on October 28, 2009 Expected Candidate Recommendation - 2012 W3C Recommendation - 2022 or later * http://dev.w3.org/html5/spec/
HTML5
The Hype
Flickr: lambj
Flickr: mackro
Flickr: tvangoethem
HTML5 has become an umbrella term for everything including CSS3. It’s not!
It’s an upgrade to the HTML specification
It provides backward compatibility
Enhances some tags and brings new semantic tags
Programmatic components like Canvas & Drag-and-Drop
HTML5’s Umbrella Effect
Flickr: boblet
What can be considered part of HTML5 then? Canvas – API for 2D drawing
Audio & Video – In-browser audio & video; no plugins
New semantic elements such as article, footer, header, nav & section
Sub-projects:
Web Storage
Geolocation
Drag and Drop
How to tell what you can use? http://www.caniuse.com/
So What’s in It?
What is NOT in HTML5 then? CSS Transforms – rotation, scaling, skewing of elements
CSS Transitions – transitions between CSS property changes
Border Radius – rounded corners
Box Shadow- shadow selected elements
@font-face – web fonts
This is CSS3!!
What’s Not?
…or cats, babies and staplers.
What are Developers Raving About?
The Cool Stuff: New semantic elements such as article, footer, header, nav
& section
Canvas – API for 2D drawing
Video – In-browser video; no plugins
Web Storage – offline storage
Forms – form enhancements
Geolocation
HTML5 is Cool
Flickr: boblet
Flickr: lejoe
Reliable Features
doctype
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">
HTML 4.01:
HTML5<!doctype html>
<div id=”nav”><div id=”nav”><div id=”nav”><div id=”nav”>
<div <div id=”sidebar”>id=”sidebar”>
<div <div id=”sidebar”>id=”sidebar”> <div id=”article”><div id=”article”><div id=”article”><div id=”article”>
<div id=”footer”><div id=”footer”><div id=”footer”><div id=”footer”>
<div id=”header”><div id=”header”><div id=”header”><div id=”header”>
HTML Tags
<nav><nav><nav><nav>
<aside><aside><aside><aside> <section><section> <article><article><section><section>
<article><article>
<footer><footer><footer><footer>
<header><header><header><header>
Semantic HTML Tags
<nav><nav><nav><nav>
<aside><aside><nav><nav>
<aside><aside><nav><nav>
<section><section> <article><article><section><section>
<article><article>
<footer><footer><footer><footer>
<header><header><header><header>
Semantic HTML Tags
<address> Written by:<br/> <a href="/people/show/23">Timothy Fisher</a>, <br/> Address: 25296 Hunter Lane, Flat Rock, MI 48134 <br/> Phone: 555-1212</address>
Address applies to the nearest Article or Body tag.
More Semantic HTML Tags
Address
Prior to HTML5 the Address element applied to the document/body as a whole
<div class="car" data-brand="ford" data-model="mustang"> <button class="fire"> </div>
More Semantic HTML Tags
Data Attributes
//Using DOM's getAttribute() propertyvar brand=mydiv.getAttribute("data-brand") //returns "ford"mydiv.setAttribute("data-brand", "mazda") //changes "data-brand" to "mazda"mydiv.removeAttribute("data-brand") //removes "data-brand" attribute entirely
//Using JavaScript's dataset propertyvar brand=mydiv.dataset.brand //returns "ford"mydiv.dataset.brand='mazda' //changes "data-brand" to "mazda"mydiv.dataset.brand=null //removes "data-brand" attribute
Custom data attribs were always possible but prior to HTML5 they would cause validation errors.
<section> <hgroup> <h1>Mobile Phones</h1> <h2>Different Smart Phones</h2> </hgroup> <p>Some of the more popular mobile smart phones</p> <article> <h1>Apple iPhone</h1> <p>A popular smart phone from Apple.</p> </article> <article> <h1>Android-based Phones</h1> <p>A series of smart phones that use the Google Android operating system.</p> </article></section>
More Semantic HTML Tags
Section, hgroup, Article
These elements replace many of your divs
<figure> <img src="ninja_guy.jpg" alt="A Standing Ninja Guy."> <figcaption>Cool Ninja Guy</figcaption></figure>
More Semantic HTML Tags
Figure and Figure Caption
Cool Ninja Guy
The browser can position the caption for you
More Semantic HTML Tags
Menu and Command<menu label="Hero List"> <command type="radio" radiogroup="herolist" label="Spiderman"> <command type="radio" radiogroup="herolist" label="Superman"> <command type="radio" radiogroup="herolist" label="Batman"></menu>
a simple radio button group
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="file_new()">New...</button> <button type="button" onclick="file_open()">Open...</button> <button type="button" onclick="file_save()">Save...</button> <button type="button"onclick="file_saveas()">Save As...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="edit_copy()">Copy...</button> <button type="button" onclick="edit_cut()">Cut...</button> <button type="button" onclick="edit_paste()">Paste...</button> </menu> </li> </menu>
More Semantic HTML Tags
Menu (continued)
<video src=”ironman.mp4” />
Automatically show native controls<video src=”ironman.mp4” controls />
Video
Codec Support
Credit: Encoding.com
<video controls/> <source src=”ironman.mp4” /> <source src=”ironman.webm” />
</video>
Video
ironman.mp4ironman.webm
<audio src=” teenage_dream.mp3”></audio>
<audio controls> <source src=”teenage_dream.mp3”/> <source src=”teenage_dream.ogg”/></audio>
Audio
Provides a download link for non-supporting browsers:<audio src=”teenage_dream.ogg” autoplay controls loop> <a href=” teenage_dream.ogg”>download</a></audio>
<canvas id=”square”> fallback content</canvas>
<script> // create basic filled square canvas = canvas.getElementById(‘square’); context = canvas.getContext(‘2d’); context.fillStyle = “#000000”; context.fillRect(0, 0, 100, 100); </script>
Canvas
A complete drawing and animation API
<script> document.getElementById(‘notepad’).contentEditable = true;</script>
Editable Content
Turn any element into an editable area
Cross-Domain Messaging
// sendervar o = document.getElementsByTagName('iframe')[0];o.contentWindow.postMessage('Hello world', 'http://b.example.org/');
// recipientaddEvent(window, "message", function(e){ document.getElementById("rcvd_message").innerHTML = e.origin + " said: " + e.data;});
sessionStorage.setItem(key, value); sessionStorage.getItem(key);
localStorage.setItem(key, value);localStorage.getItem(key);
Session Storage
Save key/value pairs to a client-side data store implemented by browser
Session store expires when the browser is closed
Some Caution Plz
Output
<progress id="p" max=100><span>0</span>%</progress>
Progress
<output name="result"></output>
Progress
Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>
Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>
Tickets sold:<meter min="0" max="100" value="75"></meter>
Meter
Meter
<div draggable=”true”></div>
// set data to access at targetaddEvent(div, “dragstart”, function(e) { e.dataTransfer.setData(‘foo’, ‘bar’);}, true);
// access data from dragged objectaddEvent(div, ‘dragend’, function(e) { e.dataTransfer.getData(‘foo’);}, true);
Drag and Drop
HTML5 drag and drop should work across frames, and across browser windows.
HTML5 drag and drop also allows users to drag and drop data to and from non-web applications, i.e. out of the browser or into the browser
<input type=”email” />
Input Types
telsearchemailurl
datetimedaterangecolor
Unsupported browsers default to text type
Future browsers will display appropriate UI controls
<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist>
Input Types
Input Type Range + Datalist
<input type=file multiple>
Input Types
File Upload Multiple
Input Types
Datalist
Used to provide Auto Complete feature
<input list="movies" /><datalist id="movies">
<option>The Dark Knight</option><option>Spiderman 3</option><option>X-Men</option>
</datalist>
<input name="custname" required>
<script> form.checkValidity(); </script>
Form Validation
By adding ‘required’ attribute you can take advantage of validity checking without custom JavaScript.
<html manifest=”cache.manifest”>
Offline Applications
Offline Applications using manifest
Run a web application in offline mode, disconnected from Internet
CACHE MANIFESTclock.htmlclock.cssclock.js
provide a cache.manifest file:
Of course your app will still have failures if it tries to pull live data from the Internet
uses MIME type: text/cache-manifest
window.history.back();window.history.forward();
window.history.go(2);
window.history.length;
window.history.pushState(data, title, url);window.history.replaceState(data, title, url);
JavaScript API for moving through browser history
History API
navigator.geolocation.getCurrentPosition(function(position) { // display position});
Geolocation
Build location-aware apps without access to native mobile apis
Local Storage
A set of APIs to manipulate client-side databases using SQL
Web SQL
Apple
Opera
IndexedDB has replaced Web SQL
Web Sockets
• Opens a persistent connection to the server• Can be used for server to browser push• Restricted communication to origin server• Eliminates need to poll for data
var ws = new WebSocket("ws://friendfeed.com/websocket");ws.onopen = function() { ws.send("This is a message from the browser to the server");};ws.onmessage = function(event) { alert("The server sent a message: " + event.data);};
- Provide “threads” for JavaScript execution- Don’t have access to DOM or page. - Have to communicate through postMessage API
Web Workers
W3C says we shouldn’t
use HTML5!!!!
Create a solid cross-browser base to start from & use HTML5 to enhance sites
Fallbacks can be used to degrade gracefully when necessary
<video controls width="500"><source src="video.ogg" /><source src="video.mp4" /><embed src="http://blip.tv/play/gcMV" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
If HTML5 video is not supported, flash video will load
Progressive Enhancement
Support for older browsers
Use polyfills to fallback gracefully or mimic functionality
HTML5Shim
Modernizr
Explorercanvas
Socket.IO
Big List of Polyfills: http://bit.ly/b5HV1x
Polyfills
I’m asking you, the developer, to look at the technology that’s available to you and chose the solution that suits your problem best. If that happens to be an HTML5 technology, or a non-HTML5 API, or even Flash, you’ve chosen the individual specific technology, not a f**king buzzword.
-Remy Sharp, 10/7/10
http://bit.ly/cQUGdM
http://html5.timothyfisher.com
http://diveintohtml.com
http://html5doctor.com/
http://html5demos.com
http://caniuse.com
http://html5rocks.com
Resources
Introducing HTML5
(Bruce Lawson & Remy Sharp)
HTML5: Up and Running
(Mark Pilgrim)
Books
Timothy Fisher
http://html5.timothyfisher.com
Credit
