HTML5 and the Open Web Platform

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

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

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

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

March 26, 2012 HTML5 Design Principles ...  Simple is better  new doctype: <!DOCTYPE html>  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  ...

March 26, 2012 HTML5 APIs and Related Technologies Sergey Mavrody, 2011

March 26, 2012 Current HTML5 Browser Support When can I use..., http://caniuse.com/#cats=HTML5

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

March 26, 2012 Browser Performance

March 26, 2012 HTML Markup  Some elements have been added  structural elements such as <article>, <section>, <header>, <footer> or <nav>  media elements including <video>, <audio> or <embed>  a <canvas> drawing element  Other elements have been removed  <big>, <font>, <strike>, <u>, <center>, ...  New form functionality (originally Web Forms 2.0)  form elements such as <datalist> or <output>  input types such as date, color, range, ...  native functionality for client-side validation (no scripting) W3C Working Draft

March 26, 2012 Forms Example

March 26, 2012 Video  <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 <video width="640" height="480" controls="controls"> <source src="bullhead.mp4" type="video/mp4" /> <source src="bullhead.webm" type="video/webm" /> The video tag is not supported by your browser! </video> W3C Working Draft

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

March 26, 2012 Video Support When can I use..., http://caniuse.com/#feat=video

March 26, 2012 WebM Support When can I use..., http://caniuse.com/#feat=webm

March 26, 2012 MP4 Support When can I use..., http://caniuse.com/#feat=mpeg4

March 26, 2012 Ogg Support When can I use..., http://caniuse.com/#feat=ogv

March 26, 2012 Canvas 2D  <canvas> 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 <canvas id="drawingArea" width="200" height="200"> The canvas tag is not supported by your browser! </canvas> <script type="text/javascript"> 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); </script>

March 26, 2012 HTML5 Canvas and JavaScript Demo http://www.youtube.com/watch?v=cnexWE5Rbx4

March 26, 2012 Canvas 2D Support When can I use..., http://caniuse.com/#feat=canvas

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 <!DOCTYPE html> <html lang="en"> <head>...</head> <body> <svg xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="50" cy="50" r="100" fill="blue" /> </svg> </body> </html>

March 26, 2012 SVG Support When can I use..., http://caniuse.com

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

March 26, 2012 Video: Google Body Browser (WebGL)

March 26, 2012 WebGL Support When can I use..., http://caniuse.com

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

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 <script type="text/javascript"> var socket = new WebSocket("ws://chat-server.com:8080/"); socket.onmessage = function(event) { var message = JSON.parse(event.data)); alert("Message received."); ... }; </script>

March 26, 2012 Web Sockets Support When can I use..., http://caniuse.com/#search=socket

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 <script type="text/javascript"> if (localStorage.counter) { localStorage.counter = Number(localStorage.counter) + 1; } else { localStorage.counter = 1; } document.write("Total of " + localStorage.counter + " visits"); </script>

March 26, 2012 Web Storage Support http://caniuse.com/#search=web%20storage

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

March 26, 2012 Indexed Database Support When can I use..., http://caniuse.com/#search=indexed%20data

March 26, 2012 Google's Multiplayer Port of Quake II  The browser version of Quake II uses  canvas and WebGL  <audio> for sound  <video> for in-game videos  Web Sockets for communication with the server (other players)  Local Storage for managing preferences and saved games

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

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

March 26, 2012 Geolocation Example: Google Maps

March 26, 2012 Geolocation Support When can I use..., http://caniuse.com/#search=geolocation

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

March 26, 2012 Drag and Drop Support

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 <script type="text/javascript"> var worker = new Worker("myScript.js"); worker.onmessage = function(event) { alert("The worker sent me this: " + event.data); ... }; worker.postMessage("Hello worker!"); </script>

March 26, 2012 Web Workers Support When can I use..., http://caniuse.com

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 <section itemscope itemtype="http://data-vocabulary.org/Person"> Hello, my name is <span itemprop="name">Beat Signer</span> and I am a <span itemprop="title">Professor</span> at the <span itemprop="affiliation">Vrije Universiteit Brussel. </span> <section itemprop="address" itemscope itemtype="http://data -vocabulary.org/Address">My address is: <span itemprop="street-address">Pleinlaan 2</span>, <span itemprop="postal-code">1050 </span> <span itemprop="locality">Brussels</span>, <span itemprop="country-name">Belgium</span>. </section> </section>

March 26, 2012 Search Engine Result Pages (SERP)

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 <!DOCTYPE html> <html lang="en" manifest="/myApp.appcache>...</html> CACHE MANIFEST CACHE: index.html default.js FALLBACK: time.js fallback-time.js #version 3

March 26, 2012 Offline Web Applications Support When can I use..., http://caniuse.com

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

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/

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

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/

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/

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/

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/

HTML5 and the Open Web Platform

HTML5 and the Open Web Platform

More Decks by Beat Signer

Other Decks in Technology

Featured

Transcript