1

HTML5 Overview

Peter Traeg

1/25/2011

Agenda

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

HTML5 Areas of Focus

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.

Just because people call it HTML5 does not make it so 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.

HTML5 History/Status 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.

Javascript – Selection of Elements

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 selectorsvar els = document.querySelectorAll("ul li:nth-child(odd)");

var els = document.querySelectorAll("table.test > tr > td");

Javascript – Local Storage

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!

Javascript – Web SQL Database

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

Javascript – Offline Support 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.

Javascript – Web Workers

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); }

Javascript – Web Sockets

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

Javascript - Notifications

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) { // you can pass any url as a parameter window.webkitNotifications.createNotification(tweet.picture,

tweet.title, tweet.text).show();} else { window.webkitNotifications.requestPermission();}

Javascript – Drag/Drop

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.

Javascript – Drag/Dropdocument.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy';

}, false);

Demo link

Javascript - Geolocation 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); });}

Javascript – File API 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

HTML Features

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.

HTML Doctype

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>

HTML – New Semantic Elements

<header> <hgroup> : groups a set of h1-h6 elements when the

heading has multiple levels <nav> <section>

<article> <header>

<aside> <footer> <time> <mark>

HTML – Semantic Elements

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

HTML – New Input Types <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

HTML – More Input Attributes 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

HTML – Audio / Video

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.

HTML – Audio/Video Tags

<audio src="sound.mp3" controls></audio>document.getElementById("audio").muted = false;

<video src="movie.mp4" autoplay controls></video>document.getElementById("video").play();

HTML – Canvas Element

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.

HTML – Canvas Example<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>

HTML – Canvas Drawing

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.

HTML – Canvas 3D

Largely experimental, browser specific No defined spec from the W3C or WHATWG

as of yet.

HTML – SVG Element <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

CSS

New selectors Fonts Text Handling Columns Transitions Animations

CSS – Selectors

CSS3 Can select every nth-child – useful for zebra

striped displays (like an old green-bar report) First-child

CSS Font Support

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);

}

CSS – Font Support

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/

CSS – Text Overflow

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

CSS – Multi column support

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:

Additional Attributes

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

CSS – Rounded Corners

-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.

CSS Gradients

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

-webkit-radial-gradient, -moz-radial-gradient

CSS Shadows/Reflections

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.

CSS Backgrounds

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

CSS Flexible Box Layout

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/

CSS Transitions

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/

CSS Transforms

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

CSS - Animations

Allows you specify from / to property values in CSS.

Duration, repetition, etc. all controlled via CSS.

Already in webkit, in FF 3.7+

What about Flash? 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

Where to learn more

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