1



What is HTML5?
Demos and lots of ‘em
 Does HTML5 kill Flash or Silverlight?

 Javascript
 HTML
 CSS
 Some are browser-specific features, others are not always fully implemented in some browsers.
 Pretty much all of what is shown here does
NOT work in IE6/7/8. Much of it will work in
IE9.




Many demonstrations of “HTML5” are of features not truly in the W3C HTML5 spec.
Technologies often called part of HTML5 that aren't
(from the Mozilla HTML5 Developer center)
:











WebGL
FileReader
XMLHttpRequest querySelector(All)
Geolocation
ECMAScript5
CSS3
XBL2
Web Workers
Web Sockets
Faster JavaScript
Moral: be careful when someone says HTML5 – what exactly are they talking about? For most people it’s just a basket of features – not a spec.

 Started by WHATWYG (Web Hypertext Application
Technology Working Group) in 2004. Most of these folks were from Webkit (Safari, Apple).
 Adopted by W3C as part of a working group in 2007.
 Hoped that a full W3C recommendation will be reached by late 2010.
 Lots of frustration amongst the members of the working group in trying to get the spec. approved.

 New methods to get all elements that match on a class name: var el = document.getElementById('section1'); var els = document.getElementsByTagName('div'); var els = document.getElementsByClassName('section');
 Or find elements based on CSS selectors var els = document.querySelectorAll("ul li:nth-child(odd)"); var els = document.querySelectorAll("table.test > tr > td");



New localStorage property on the window object lets you save data by key/value pair.
// use localStorage for persistent storage
// use sessionStorage for per tab storage textarea.addEventListener('keyup', function () { window.localStorage['value'] = area.value; window.localStorage['timestamp'] = (new
Date()).getTime();
}, false); textarea.value = window.localStorage['value'];
Surprise - Supported in IE8! 

var db = window.openDatabase("Database Name", "Database Version"); db.transaction(function(tx) { tx.executeSql("SELECT * FROM test",
[], successCallback, errorCallback); });
 Only supported in Chrome and Safari.
 Demo link

 Offline caching of resources
 Cache manifest file lists resources that the browser should make available even if it’s offline.
 Fallback sections let you substitute files if the offline app requests a resource that’s not available offline.
 window.applicationCache fires events to tell you when all the resources in a manifest have successfully downloaded or failed. If one resource fails the whole thing is considered bad.



Ability to create background “threads” for long running processes so they don’t block the UI thread.
Workers can’t access the DOM directly.
main.js: var worker = new Worker('extra_work.js'); worker.onmessage = function(event) { alert(event.data); }; extra_work.js: self.onmessage = function(event) { // Do some work. self.postMessage(some_data);
}

 Supports sending messages over a TCP socket.
var socket = new WebSocket(location); socket.onopen = function(event) { socket.postMessage(“Hello, WebSocket”);
} socket.onmessage = function(event) { alert(event.data); } socket.onclose = function(event) { alert(“closed”); }
 Not supported on Firefox

 Webkit specific feature – only in Chrome
 Pops up notification dialogs
 Like the notification dialogs that appear from the Windows system tray.
if (window.webkitNotifications.checkPermission() == 0) {
} else { window.webkitNotifications.requestPermission();
}
// you can pass any url as a parameter window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show();




New “dragStart” event on elements
Data you want to drag is placed into a dataTransfer object
The drag target must listen to these events: dragEnter, dragOver, and drop



DragEnter decides if the user can drop the item on this target
DragOver shows the appropriate UI feedback to illustrate that a drop is possible.
Drop fires when the user actually drops the item on the target.

document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy';
}, false);
 Demo link

 Lets you obtain latitude/longitude based on the user’s location.

User must “OK” the request.
if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position)
{ var lat = position.coords.latitude; var lng = position.coords.longitude; var options = { position: new google.maps.LatLng(lat, lng) } var marker = new google.maps.Marker(options); marker.setMap(map);
});
}







HTML <input type=“file”> can supply a reference to a file object
A DIV can act as a drop target to allow a user to drag/drop files on it. This can be used for uploading multiple files.
The File object lets you read the file contents as a binary string, a data URL, or as text.
Once you have the file contents you can POST them to a server via XmlHttp request.
Demo http://html5demos.com/file-api https://developer.mozilla.org/en/Using_files_from_w eb_applications

 Mostly changes around new HTML elements designed to create more semantic markup.
 Also new attributes on existing elements to create more types of <input> elements.
 Older browsers (IE6/7/8) just ignore elements they don’t understand.

 The doctype for xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 The doctype for HTML5:
<!DOCTYPE html>







 <header>
 <hgroup> : groups a set of h1-h6 elements when the heading has multiple levels
<nav>
<section>
 <article>
 <header>
<aside>
<footer>
<time>
<mark>


Elements don’t have a specific style. They are designed to group content semantically.
You use CSS to apply the style you want.
 Even IE6 can recognize these new elements via a Javascript trick. See http://diveintohtml5.org/semantics.html














<input type="search"> for search boxes
<input type="number"> for spinboxes
<input type="range"> for sliders
<input type="color"> for color pickers
<input type="tel"> for telephone numbers
<input type="url"> for web addresses
<input type="email"> for email addresses
<input type="date"> for calendar date pickers
<input type="month"> for months
<input type="week"> for weeks
<input type="time"> for timestamps
<input type="datetime"> for precise, absolute date+time stamps
<input type="datetime-local"> for local dates and times
Demo: http://www.ilovecolors.com.ar/wp-content/uploads/html5-new-input-types.html










Autocomplete
Readonly
Multiple
Placeholder – ghosted text prompt
Pattern – regex validation
Required (opera only)
Datalist (opera only)
For number types: min, max, step
CSS attributes for visual display when the control contains invalid data. :invalid pseudo-class

 New <audio> and <video> elements
 Safari plays H.264 video
 Chrome plays H.264 and WebM (VP8)


Firefox plays Ogg Theora (VP3) and WebM
(Firefox4)
IE9 – H.264 video and AAC audio
 Attributes to show/hide video controls, loop playback, autoplay, etc.

<audio src="sound.mp3" controls></audio> document.getElementById("audio").muted = false;
<video src="movie.mp4" autoplay controls></video> document.getElementById("video").play();

 Bitmap drawing construct


This is not vector based. If you want to rescale you really need to redraw.
Once an object is drawn you can’t manipulate it. You have to draw it again.


Performance is quite good
Fairly wide browser support – since Safari 3,
Firefox 3, and Chrome 3.
 Third party explorercanvas library for IE.

<canvas id="canvas" width="838" height="220"></canvas>
<script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke();
</script>







Rectangles – filled, stroked (borders)
Arcs – use to draw a circle
Paths – moveTo(), lineTo(), stroke()
Gradients – linear, and radial
Text – fonts, horizontal text alignment, baselines
Images – scaling, drawing a portion of an image.

 Largely experimental, browser specific
 No defined spec from the W3C or WHATWG as of yet.








<svg> element
Part of HTML5 spec
Firefox 4 supports a new SVG inline option.
Unlike <canvas> this is true vector based drawing.
Excellent JS library http://raphaeljs.com/
Supported on most browsers, including the iPhone
Not supported in Android 

 New selectors
 Fonts
 Text Handling
 Columns
 Transitions
 Animations



CSS3
Can select every nth-child – useful for zebra striped displays (like an old green-bar report)
 First-child

 Can dynamically load fonts into the browser!
 Supported in canvas as well (not sure about
SVG)
@font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf);
}

 Different Browsers support different font types: OTF, TTF, SVG, WOFF, EOT.
 Even IE5+ supports @font-face but with a proprietary format – EOT
 Supported in Firefox 3.5+, Chrome 4+, Safari
3+
 iOS supports SVG fonts, Android 2,2 supports OTF/TTF formats
 http://www.html5rocks.com/tutorials/webfonts/quick/

 Three ways to deal with text overflow


 text-overflow: hidden text-overflow: no-wrap text-overflow: elipsis

 Allows you to take a series of paragraphs and flow the content along multiple columns.
 CSS attributes on a DIV:


 column-Count: column-rule: column-gap:

 Text Stroke (outline) size and color
 Ability to set the opacity of the foreground and background colors independently
 HSLA Color spec: Hue, Saturation,
Luminance, Alpha

 -webkit-border-radius, -moz-border-radius, border-radius attribute
 Progressive enhancement - going forward this is how we will add rounded corners to boxes rather than the current nested DIV approach we currently use. IE 6/7/8 users will see square corners.

 Both linear and radial gradients
 Supported in FF 3.6+
 -webkit-linear-gradient, -moz-linear-gradient,
-webkit-radial-gradient, -moz-radial-gradient

 Can now add drop shadows to text and box elements

 text-shadow and box-shadow attributes
-webkit-box-reflect – build your own coverflow display with CSS!
 I believe -moz-box-reflect is in FF4.



Can now control background size to always cover or contain the background in an element
Multiple backgrounds – can layer multiple background images on one another

 A way to proportionally size boxes in relation to another.
 A great way to center content vertically and horizontally.
 Supported in Firefox 3+, Chrome, Safari,
Mobile Safari (iOS), Android. Not in IE9!!
 http://www.html5rocks.com/tutorials/flexbox/quick/
 http://www.ie7nomore.com/fun/flexiblenav/

 Lets you apply an animated transition when changing the value of a CSS property.
 Mostly webkit, but coming in Firefox 4
 Works on iOS but not Android
 GPU accelerated in iOS
 Cool transition demo at http://www.apple.com/html5/showcase/transitions/

 Scale
 Rotate
 Perspective
 Firefox 3.5+
 https://developer.mozilla.org/En/CSS/-moz-transform

 Allows you specify from / to property values in CSS.
 Duration, repetition, etc. all controlled via
CSS.
 Already in webkit, in FF 3.7+










Lots of stuff that HTML5 leaves out for us:
Font metrics
Bitmap manipulation
Audio manipulation
More flexible security model (cross-domain). However new browsers support some of this in XmlHttpRequest
3D support – hardware acceleration
Actionscript language
Desktop client support (AIR)
Totally cross-browser/cross-platform. With HTML5

 HTML5Rocks
 Apple HTML5 Demo
 Dive Into HTML5
 HTML5 Peeks, Pokes, and Pointers
 HTML5Demos
 Can I Use?
HTML5 Compatibility Tables
 Mozilla Developer Center HTML5
 W3C Working Draft
 WHATWG Working Draft