HTML5 Overview

1. HTML5 Overview Peter Traeg 1/25/2011

2. Agenda • What is HTML5? • Demos and lots of ‘em • Does HTML5 kill Flash or Silverlight?

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

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

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

6. 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");

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

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

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

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

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

12. 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(); }

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

14. Javascript – Drag/Drop document.addEventListener('dragstart', function(event) { event.dataTransfer.setData('text', 'Customized text'); event.dataTransfer.effectAllowed = 'copy'; }, false); • Demo link

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

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

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

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

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

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

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

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

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

24. 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();

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

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

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

28. HTML – Canvas 3D • Largely experimental, browser specific • No defined spec from the W3C or WHATWG as of yet.

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

30. CSS • New selectors • Fonts • Text Handling • Columns • Transitions • Animations

31. CSS – Selectors • CSS3 • Can select every nth-child – useful for zebra striped displays (like an old green-bar report) • First-child

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

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

34. CSS – Text Overflow • Three ways to deal with text overflow • text-overflow: hidden • text-overflow: no-wrap • text-overflow: elipsis

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

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

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

38. CSS Gradients • Both linear and radial gradients • Supported in FF 3.6+ • -webkit-linear-gradient, -moz-linear-gradient, -webkit-radial-gradient, -moz-radial-gradient

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

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

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

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

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

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

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

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