• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 and the Open Web Platform
 

HTML5 and the Open Web Platform

on

  • 5,234 views

Introduction HTML5 and the Open Web Platform.

Introduction HTML5 and the Open Web Platform.

Statistics

Views

Total Views
5,234
Views on SlideShare
2,932
Embed Views
2,302

Actions

Likes
4
Downloads
131
Comments
2

8 Embeds 2,302

http://www.beatsigner.com 1129
http://wise.vub.ac.be 707
http://localhost 251
http://beatsigner.com 181
http://www.sigtec.org 31
http://translate.googleusercontent.com 1
http://webcache.googleusercontent.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 and the Open Web Platform HTML5 and the Open Web Platform Presentation Transcript

    • HTML5 and the Open Web PlatformProf. Beat SignerDepartment of Computer ScienceVrije Universiteit Brusselhttp://www.beatsigner.com 2 December 2005
    • 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 WHATWGs Web Applications specificationOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2
    • 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 2022October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3
    • 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/whyOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4
    • 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 disabilitiesOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5
    • 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  ...October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6
    • HTML5 APIs and Related Technologies Sergey Mavrody, December 2011October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7
    • Current HTML5 Browser Support When can I use..., http://caniuse.com/#cats=HTML5October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8
    • 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.orgOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9
    • Browser PerformanceOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10
    • HTML Markup  Some elements have been addedW3C Working Draft  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) October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11
    • Forms ExampleOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12
    • Video  <video> element can be used to play videosW3C Working Draft 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> October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13
    • Video ...  Current limitationsW3C Working Draft  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 October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14
    • Video Support When can I use..., http://caniuse.com/#feat=videoOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15
    • WebM Support When can I use..., http://caniuse.com/#feat=webmOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16
    • MP4 Support When can I use..., http://caniuse.com/#feat=mpeg4October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17
    • Ogg Support When can I use..., http://caniuse.com/#feat=ogvOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18
    • Canvas 2D  <canvas> tag can be used in combination withW3C Working Draft 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 <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> October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19
    • HTML5 Canvas and JavaScript Demo http://www.youtube.com/watch?v=cnexWE5Rbx4October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20
    • Canvas 2D Support When can I use..., http://caniuse.com/#feat=canvasOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21
    • Scalable Vector Graphics (SVG)  Vector graphics alternative to Canvas 2DW3C Candidate Recommendation  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 <!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> October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22
    • SVG Support When can I use..., http://caniuse.com/#cats=SVGOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23
    • 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 FirefoxOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24
    • Video: Google Body Browser (WebGL)October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25
    • WebGL Support When can I use..., http://caniuse.com/#feat=webglOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26
    • Asynchronous Partial Updates Client Service Service 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!October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27
    • Web Sockets  Bidirectional, full-duplex socket connection between theW3C Working Draft 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) <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> October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28
    • Web Sockets Support When can I use..., http://caniuse.com/#search=socketOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29
    • Web Storage  localStorage and sessionStorage JavaScriptW3C Candidate Recommendation 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 <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> October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30
    • Web Storage Support When can I use..., http://caniuse.com/#search=web%20storageOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31
    • Indexed Database  Low-level indexed storage capabilitiesW3C Working Draft  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 October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32
    • Indexed Database Support When can I use..., http://caniuse.com/#search=indexed%20dataOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33
    • Googles 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 gamesOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34
    • Geolocation  Standard interface for accessing geographicalW3C Candidate Recommendation 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 October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35
    • Geolocation ...  JavaScript access to the Geolocation APIW3C Candidate Recommendation  access via the geolocation child object of the navigator object 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});  we can also continuously monitor the clients position navigator.geolocation.watchPosition(showPosition); October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36
    • Geolocation Example: Google MapsOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37
    • Geolocation Support When can I use..., http://caniuse.com/#search=geolocationOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38
    • Drag and Drop  Drag items and drop them anywhere in the browserW3C Working Draft  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 October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39
    • Drag and Drop Support When can I use..., http://caniuse.com/#feat=dragndropOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40
    • Web Workers  When executing JavaScript in an HTML page, the pageW3C Working Draft 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 <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> October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41
    • Web Workers Support When can I use..., http://caniuse.com/#feat=webworkersOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42
    • Microdata  Add machine readable metadata (semantics) to HTML5W3C Working Draft 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 <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> October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43
    • Search Engine Result Pages (SERP)October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44
    • Offline Web Applications  Application cache is used forW3C Working Group Note  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 <!DOCTYPE html> <html lang="en" manifest="/myApp.appcache>...</html> CACHE MANIFEST CACHE: index.html default.js FALLBACK: time.js fallback-time.js #version 3 October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45
    • Offline Web Applications Support When can I use..., http://caniuse.com/#feat=offline-appsOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46
    • 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 2011October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47
    • 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, OReilly Media, August 2010, ISBN-13: 978-0596806026  HTML5 Tutorial  http://www.w3schools.com/html5/October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48
    • 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-interactivityOctober 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49
    • 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/October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50
    • 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/October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 51
    • 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/October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 52
    • References ...  HTML5 Web Messaging, W3C Working Draft  http://www.w3.org/TR/webmessaging/  HTML Microdata, W3C Working Draft  http://www.w3.org/TR/microdata/October 8, 2012 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 53