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 Most of these folks were from Webkit (Safari, Apple). Adopted by W3C as part of a working group in Hoped that a full W3C recommendation will be reached by late 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 selectors var 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 linklink

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/Drop document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy'; }, false); Demo linklink

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 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 eb_applications 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 elements. Older browsers (IE6/7/8) just ignore elements they don’t understand.

HTML Doctype The doctype for xhtml: The doctype for HTML5:

HTML – New Semantic Elements : groups a set of h1-h6 elements when the heading has multiple levels

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 -

HTML – New Input Types for search boxes for spinboxes for sliders for color pickers for telephone numbers for web addresses for addresses for calendar date pickers for months for weeks for timestamps for precise, absolute date+time stamps for local dates and times Demo:

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 and 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 document.getElementById("audio").muted = false; 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 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();

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 element Part of HTML5 spec Firefox 4 supports a new SVG inline option. Unlike this is true vector based drawing. Excellent JS library - 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 { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); }

CSS – Font Support Different Browsers support different font types: OTF, TTF, SVG, WOFF, EOT. Even IE5+ 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

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

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 -

CSS Transforms Scale Rotate Perspective Firefox

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 Can I Use? Mozilla Developer Center HTML5 W3C Working Draft WHATWG Working Draft