2 December 2005 HTML5 and the Open Web Platform Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://vub.academia.edu/BeatSigner 

Beat Signer - Department of Computer Science - [email protected] 2 March 26, 2012 A Brief History of HTML  HTML 4.0 (1997) and HTML 4.01 (1999)  In 1998 the W3C decided to not further evolve HTML!  XHTML 1 (2000) and XHTML 1.1 (2001)  XML version of HTML  XHTML 2.0 (never finished, discontinued in 2009)  revolutionary changes  breaking backwards compatibility  WHATWG (Web Hypertext Application Technology Working Group) founded in 2004 (led by Ian Hickson)  Web Forms 2.0 and Web Applications 1.0  HTML5  In 2006 the W3C decided to work on HTML again  based on WHATWG's Web Applications specification 

Beat Signer - Department of Computer Science - [email protected] 3 March 26, 2012 A Brief History of HTML ...  HTML5 specification is currently developed simultaneously by the WHATWG and the W3C HTML Working Group  HTML – Living Standard, WHATWG  HTML5 – A Vocabulary and Associated APIs for HTML and XHTML, W3C Working Draft  Roadmap  HTML5 Candidate Recommendation planned for 2012  HTML5 W3C Recommendation predicted for 2022 

Beat Signer - Department of Computer Science - [email protected] 4 March 26, 2012 HTML5 ... HTML5 does not belong to a company or a specific browser. It has been forged by a community of people interested in evolving the web and a consortium of technological leaders that includes Google, Microsoft, Apple, Mozilla, Facebook, IBM, HP, Adobe, and many others. The community and consortium continue to collaborate on universal browser standards to push web capabilities even further. The next generation of web apps can run high- performance graphics, work offline, store a large amount of data on the client, perform calculations fast, and take interactivity and collaboration to the next level. ... Why HTML5 Rocks, http://www.html5rocks.com/why 

Beat Signer - Department of Computer Science - [email protected] 5 March 26, 2012 HTML5 Design Principles  Compatibility  evolve the language for easier authoring of web applications  Utility  solve real problems (pragmatic approach)  separation of content and presentation (CSS)  Interoperability  interoperable browser behaviour  identical error handling across browsers resulting in the same DOM tree for broken HTML  Universal Access  features should preferably work across different platforms (cross-platform), devices and media  design features should be accessible to users with disabilities 

Beat Signer - Department of Computer Science - [email protected] 6 March 26, 2012 HTML5 Design Principles ...  Simple is better  new doctype:  HTML5 APIs  ...  Avoid external plug-ins  plug-ins are often not nicely integrated with HTML documents  plug-ins can be disabled or blocked (e.g. Adobe Flash on iPad)  plug-ins may crash  ... 

Beat Signer - Department of Computer Science - [email protected] 7 March 26, 2012 HTML5 APIs and Related Technologies Sergey Mavrody, 2011 

Beat Signer - Department of Computer Science - [email protected] 8 March 26, 2012 Current HTML5 Browser Support When can I use..., http://caniuse.com/#cats=HTML5 

Beat Signer - Department of Computer Science - [email protected] 9 March 26, 2012 JavaScript/ECMAScript  Growing use of JavaScript frameworks and AJAX  JavaScript engine race  in 2006 Adobe donated their just-in-time (JIT) compilation engine and ECMAScript virtual machine to the Mozilla project  healthy competition among browser vendors - bring JavaScript performance closer to that of native desktop application code Black Duck, 2011 http://www.whatbrowser.org 

Beat Signer - Department of Computer Science - [email protected] 10 March 26, 2012 Browser Performance 

Beat Signer - Department of Computer Science - [email protected] 11 March 26, 2012 HTML Markup  Some elements have been added  structural elements such as , , , or  media elements including , or  a drawing element  Other elements have been removed  , , , , , ...  New form functionality (originally Web Forms 2.0)  form elements such as or  input types such as date, color, range, ...  native functionality for client-side validation (no scripting) W3C Working Draft 

Beat Signer - Department of Computer Science - [email protected] 12 March 26, 2012 Forms Example 

Beat Signer - Department of Computer Science - [email protected] 13 March 26, 2012 Video  element can be used to play videos in HTML pages  element has methods, properties and events  no external plug-in (e.g. Adobe Flash) is required  e.g. an HTML5 YouTube version (working without Flash) is available at http://www.youtube.com/html5  No single video format is supported by all browsers  MP4, WebM and Ogg The video tag is not supported by your browser! W3C Working Draft 

Beat Signer - Department of Computer Science - [email protected] 14 March 26, 2012 Video ...  Current limitations  no adaptive streaming  no copy protection  limited access to web cams and microphones but this is going to change in the near future (via the getusermedia API)  HTML5 Video vs. Adobe Flash ... Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores. We will no longer continue to develop Flash Player in the browser to work with new mobile device configurations (chipset, browser, OS version, etc.) following the upcoming release of Flash Player 11.1 for Android and BlackBerry PlayBook. ... Adobe Systems Incorporated, November 9, 2011 W3C Working Draft 

Beat Signer - Department of Computer Science - [email protected] 15 March 26, 2012 Video Support When can I use..., http://caniuse.com/#feat=video 

Beat Signer - Department of Computer Science - [email protected] 16 March 26, 2012 WebM Support When can I use..., http://caniuse.com/#feat=webm 

Beat Signer - Department of Computer Science - [email protected] 17 March 26, 2012 MP4 Support When can I use..., http://caniuse.com/#feat=mpeg4 

Beat Signer - Department of Computer Science - [email protected] 18 March 26, 2012 Ogg Support When can I use..., http://caniuse.com/#feat=ogv 

Beat Signer - Department of Computer Science - [email protected] 19 March 26, 2012 Canvas 2D  tag can be used in combination with JavaScript to draw on a webpage (raster graphics)  define a canvas with an id and use it from within the JavaScript code  draw lines, shapes (with optional gradient filling) etc. or add text W3C Working Draft The canvas tag is not supported by your browser! var canvas = document.getElementById("drawingArea"); var context = canvas.getContext("2d"); context.fillStyle = "#0000FF"; context.fillRect(50,50,100,50); context.moveTo(0,0); context.lineTo(200,200); 

Beat Signer - Department of Computer Science - [email protected] 20 March 26, 2012 HTML5 Canvas and JavaScript Demo http://www.youtube.com/watch?v=cnexWE5Rbx4 

Beat Signer - Department of Computer Science - [email protected] 21 March 26, 2012 Canvas 2D Support When can I use..., http://caniuse.com/#feat=canvas 

Beat Signer - Department of Computer Science - [email protected] 22 March 26, 2012 Scalable Vector Graphics (SVG)  Vector graphics alternative to Canvas 2D  resolution independent  define graphics in XML format (embeddable in HTML)  good support for animations (declarative description)  full control over each element via the SVG DOM API  On the other hand, Canvas 2D offers better performance W3C Candidate Recommendation ... 

Beat Signer - Department of Computer Science - [email protected] 23 March 26, 2012 SVG Support When can I use..., http://caniuse.com 

Beat Signer - Department of Computer Science - [email protected] 24 March 26, 2012 Web Graphics Library (WebGL)  3D graphics API for JavaScript  getContext("3d") in the future  currently there exist a number of vendor-specific prefixes such as getContext("moz-webgl") for Firefox 

Beat Signer - Department of Computer Science - [email protected] 25 March 26, 2012 Video: Google Body Browser (WebGL) 

Beat Signer - Department of Computer Science - [email protected] 26 March 26, 2012 WebGL Support When can I use..., http://caniuse.com 

Beat Signer - Department of Computer Science - [email protected] 27 March 26, 2012 Asynchronous Partial Updates Client Server  Rather than updating an entire resource (e.g. webpage), we can asynchronously update parts of a resource  e.g. implementation of Rich Internet Applications via AJAX  Problem: Updates cannot be initiated (pushed) by the server if the HTTP protocol is used! Service Service 

Beat Signer - Department of Computer Science - [email protected] 28 March 26, 2012 Web Sockets  Bidirectional, full-duplex socket connection between the server and browser for real-time web applications (low latency) with asynchronous partial updates  currently only strings and no binary data (can use JSON)  similarly an EventSource object can be used if only the server has to push information (server-sent events) W3C Working Draft var socket = new WebSocket("ws://chat-server.com:8080/"); socket.onmessage = function(event) { var message = JSON.parse(event.data)); alert("Message received."); ... }; 

Beat Signer - Department of Computer Science - [email protected] 29 March 26, 2012 Web Sockets Support When can I use..., http://caniuse.com/#search=socket 

Beat Signer - Department of Computer Science - [email protected] 30 March 26, 2012 Web Storage  localStorage and sessionStorage JavaScript objects to store data (key/value) on the client  localStorage has no time limit whereas sessionStorage is deleted when the browser window is closed  replace cookies for large amounts of data - cookies are limited in size (maximal 4 KB) and are sent with each request W3C Candidate Recommendation if (localStorage.counter) { localStorage.counter = Number(localStorage.counter) + 1; } else { localStorage.counter = 1; } document.write("Total of " + localStorage.counter + " visits"); 

Beat Signer - Department of Computer Science - [email protected] 31 March 26, 2012 Web Storage Support http://caniuse.com/#search=web%20storage 

Beat Signer - Department of Computer Science - [email protected] 32 March 26, 2012 Indexed Database  Low-level indexed storage capabilities  libraries to be developed based on top of the indexed core  In contrast to the Web Storage API, an object store may have an arbitrary number of indexes  Likely going to become the future structured storage  replacing the Web SQL API  Introduces the concept of transactions and cursors W3C Working Draft 

Beat Signer - Department of Computer Science - [email protected] 33 March 26, 2012 Indexed Database Support When can I use..., http://caniuse.com/#search=indexed%20data 

Beat Signer - Department of Computer Science - [email protected] 34 March 26, 2012 Google's Multiplayer Port of Quake II  The browser version of Quake II uses  canvas and WebGL  for sound  for in-game videos  Web Sockets for communication with the server (other players)  Local Storage for managing preferences and saved games 

Beat Signer - Department of Computer Science - [email protected] 35 March 26, 2012 Geolocation  Standard interface for accessing geographical location information on the client device  transparent access to different location information sources - GPS, GSM cells, IP address, RFID, Wi-Fi connection etc.  Firefox uses the Google Location Service as default lookup service  send IP address and information about nearby wireless access points to the Google Location Service and an approximate location will be computed W3C Candidate Recommendation 

Beat Signer - Department of Computer Science - [email protected] 36 March 26, 2012 Geolocation ...  JavaScript access to the Geolocation API  access via the geolocation child object of the navigator object  we can also continuously monitor the client's position function showPosition(position) { alert(position.coords.latitude + " " + position.coords.longitude); } function showError() { alert("Your current position cannot be computed!"); } navigator.geolocation.getCurrentPosition(showPosition, showError, {timeout:10000}); navigator.geolocation.watchPosition(showPosition); W3C Candidate Recommendation 

Beat Signer - Department of Computer Science - [email protected] 37 March 26, 2012 Geolocation Example: Google Maps 

Beat Signer - Department of Computer Science - [email protected] 38 March 26, 2012 Geolocation Support When can I use..., http://caniuse.com/#search=geolocation 

Beat Signer - Department of Computer Science - [email protected] 39 March 26, 2012 Drag and Drop  Drag items and drop them anywhere in the browser  define draggable elements via the draggable attribute  define elements that can accept drops  exchange information via the dataTransfer object  Items can also be drag and dropped from the browser to external applications W3C Working Draft 

Beat Signer - Department of Computer Science - [email protected] 40 March 26, 2012 Drag and Drop Support 

Beat Signer - Department of Computer Science - [email protected] 41 March 26, 2012 Web Workers  When executing JavaScript in an HTML page, the page becomes unresponsive until the script is finished  Web Workers can be used to execute JavaScript code in a background process (thread)  to avoid the complexity of multi-threaded programming, Web Workers have independent JavaScript contexts and can only interact with each other via event-driven message passing W3C Working Draft var worker = new Worker("myScript.js"); worker.onmessage = function(event) { alert("The worker sent me this: " + event.data); ... }; worker.postMessage("Hello worker!"); 

Beat Signer - Department of Computer Science - [email protected] 42 March 26, 2012 Web Workers Support When can I use..., http://caniuse.com 

Beat Signer - Department of Computer Science - [email protected] 43 March 26, 2012 Microdata  Add machine readable metadata (semantics) to HTML5 documents in the form of key/value pairs  can be used by crawlers, search engines (SEO) and browsers to provide a richer browsing experience  alternative to Microformats and RDFa W3C Working Draft Hello, my name is Beat Signer and I am a Professor at the Vrije Universiteit Brussel. My address is: Pleinlaan 2, 1050 Brussels, Belgium. 

Beat Signer - Department of Computer Science - [email protected] 44 March 26, 2012 Search Engine Result Pages (SERP) 

Beat Signer - Department of Computer Science - [email protected] 45 March 26, 2012 Offline Web Applications  Application cache is used for  offline browsing where users can use the web application while they are offline  increased performance due to cache hits and reduced server load  Managed via a cache manifest W3C Working Group Note

Beat Signer - Department of Computer Science - [email protected] 46 March 26, 2012 Offline Web Applications Support When can I use..., http://caniuse.com 

Beat Signer - Department of Computer Science - [email protected] 47 March 26, 2012 When Can We Start to Use HTML5?  HTML5 is not yet an official standard – but many HTML5 features are already implemented by browser vendors  line between web apps and native apps gets blurry!  Seamless transition from HTML 4.01 to HTML5  backwards compatibility and fallback solutions  It is time to start using different parts of HTML5! ... In a recent online survey con- ducted by Contemporary Analysis, on behalf of appendTo, a JavaScript and HTML5 consulting company, 84% of developers planned on using HTML5 in projects within the next 6 months. ... When can I use..., http://caniuse.com/#cats=HTML5 Contemporary Analysis, September 2011 

Beat Signer - Department of Computer Science - [email protected] 48 March 26, 2012 References  Peter Lubbers, Brian Albers and Frank Salim, Pro HTML5 Programming (2nd Edition), Apress, November 2011, ISBN-13: 978-1430238645  Bruce Lawson and Remy Sharp, Introducing HTML5 (2nd Edition), New Riders Press, October 2011, ISBN-13: 978-0321784421  Mark Pilgrim, HTML5: Up and Running – Dive into the Future of Web Development, O'Reilly Media, August 2010, ISBN-13: 978-0596806026  HTML5 Tutorial  http://www.w3schools.com/html5/ 

Beat Signer - Department of Computer Science - [email protected] 49 March 26, 2012 References  When can I use …, Compatibility Tables for Support of HTML5, CSS3, SVG and More in Desktop and Mobile Browsers  http://caniuse.com  James Sugrue, HTML5: The Evolution of Web Standards  http://refcardz.dzone.com/refcardz/html5-new- standards-web-interactivity 

Beat Signer - Department of Computer Science - [email protected] 50 March 26, 2012 References  HTML – Living Standard, WHATWG  http://www.whatwg.org/html  HTML5 – A Technical Specification for Web Developers  http://developers.whatwg.org  HTML5 – A Vocabulary and Associated APIs for HTML and XHTML, W3C Working Draft  http://www.w3.org/TR/html5/  HTML Design Principles, W3C Working Draft  http://www.w3.org/TR/html-design-principles/  HTML Canvas 2D Context, W3C Working Draft  http://www.w3.org/TR/2dcontext/ 

Beat Signer - Department of Computer Science - [email protected] 51 March 26, 2012 References ...  Web Storage, W3C Candidate Recommendation  http://www.w3.org/TR/webstorage/  Indexed Database API, W3C Working Draft  http://www.w3.org/TR/IndexedDB/  The WebSocket API, W3C Candidate Recommendation  http://www.w3.org/TR/websockets/  File API, W3C Working Draft  http://www.w3.org/TR/FileAPI/  Offline Web Applications, W3C Working Group Note  http://www.w3.org/TR/offline-webapps/ 

Beat Signer - Department of Computer Science - [email protected] 52 March 26, 2012 References ...  HTML5 Canvas and JavaScript Demo  http://www.youtube.com/watch?v=cnexWE5Rbx4  Scalable Vector Graphics (SVG) 1.1  http://www.w3.org/TR/SVG11/  Web Workers, W3C Working Draft  http://www.w3.org/TR/workers/  Web Audio API, W3C Working Draft  http://www.w3.org/TR/webaudio/  Cascading Style Sheets (CSS) Snapshot 2010, W3C Working Group Note  http://www.w3.org/TR/CSS/ 

Beat Signer - Department of Computer Science - [email protected] 53 March 26, 2012 References ...  HTML5 Web Messaging, W3C Working Draft  http://www.w3.org/TR/webmessaging/  HTML Microdata, W3C Working Draft  http://www.w3.org/TR/microdata/