Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2 December 2005
Web Technologies
HTML5 and the Open Web Platform
Prof. Beat Signer
Department of Computer Science
Vrije Un...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 13, 2017
Hypertext Markup Language (HTML)
 HTML...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 13, 2017
Hypertext Markup Language (HTML) ...
 ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 13, 2017
HTML Example
<!DOCTYPE html
PUBLIC "-//...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 13, 2017
HTML DOM Example
News
html
head body
do...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 13, 2017
History of HTML
 HTML 1.0 (1993)
 HTM...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 13, 2017
History of HTML ...
 HTML 4.0 (1997) a...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 13, 2017
History of HTML ...
 In 2006 the W3C d...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 13, 2017
Problems with HTML
 Mix of content, st...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 13, 2017
XHTML
 XHTML is a reformulation of HT...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 13, 2017
HTML5
... HTML5 does not belong to a c...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 13, 2017
HTML5 Design Principles
 Compatibilit...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 13, 2017
HTML5 Design Principles ...
 Simple i...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 13, 2017
HTML5 and Open Web Platform APIs
W3C R...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 13, 2017
JavaScript/ECMAScript
 Growing use of...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 13, 2017
Browser Performance
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 13, 2017
Web Browsers (1990–2016)
WorldWideWeb
...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 13, 2017
HTML Markup
 Some elements have been ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 13, 2017
HTML Forms
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 13, 2017
HTML Forms ...
<!DOCTYPE html>
<html>
...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 13, 2017
HTML Forms ...
<!DOCTYPE html>
<html>
...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 13, 2017
HTML Forms ...
 Filled in information...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 13, 2017
HTML Links
 Only unidirectional embed...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 13, 2017
Video
 <video> element can be used to...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 13, 2017
Video ...
 Current limitations
 no c...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 13, 2017
Audio
 <audio> element can be used to...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 13, 2017
Canvas 2D
 <canvas> tag can be used i...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 13, 2017
HTML5 Canvas and JavaScript Demo
http:...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 13, 2017
Scalable Vector Graphics (SVG)
 Vecto...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 13, 2017
Web Graphics Library (WebGL)
 3D grap...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 13, 2017
ZygoteBody (WebGL) (Video)
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 13, 2017
Offline Web Applications
 Application...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 13, 2017
Web Storage API
 localStorage and ses...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 13, 2017
Indexed Database API
 Low-level index...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 13, 2017
File API
 Handling of files in web ap...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 13, 2017
Drag and Drop
 Drag items and drop th...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 13, 2017
Drag and Drop ...
<!DOCTYPE html>
<htm...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38October 13, 2017
Drag and Drop ...
<body>
<div id="div1...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39October 13, 2017
Web Workers
 When executing JavaScrip...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40October 13, 2017
Web Workers ...
 Note that Web Worker...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41October 13, 2017
Web Socket API
 Bidirectional, full-d...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42October 13, 2017
Web Socket API ...
<script>
var socket...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43October 13, 2017
Geolocation API
 Standard interface f...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44October 13, 2017
Geolocation API ...
 JavaScript acces...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45October 13, 2017
Geolocation Example: Google Maps
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46October 13, 2017
Fullscreen API
 Can be used to show e...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47October 13, 2017
Screen Orientation API
 Provides acce...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48October 13, 2017
Page Visibility API
 Provides informa...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49October 13, 2017
Pointer Lock API
 Provides access to ...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50October 13, 2017
Pointer Lock API ...
W3CCandidateRecom...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 51October 13, 2017
Battery Status API
 Provides Informat...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 52October 13, 2017
Vibration API
 Provide simple tactile...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 53October 13, 2017
Web Notifications API
 Display notifi...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 54October 13, 2017
Example: Multiplayer Port of Quake II
...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 55October 13, 2017
Other HTML5 Features
 Media Capture a...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 56October 13, 2017
Other HTML5 Features …
 Note that som...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 57October 13, 2017
Exercise 3
 HTML5 and the Open Web Pl...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 58October 13, 2017
References
 HTML – Living Standard, W...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 59October 13, 2017
References ...
 HTML Canvas 2D Contex...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 60October 13, 2017
References ...
 HTML Tutorial
 http:...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 61October 13, 2017
References ...
 Offline Web Applicati...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 62October 13, 2017
References
 Web Storage, W3C Recommen...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 63October 13, 2017
References ...
 Gerard Gallant, HTML5...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 64October 13, 2017
References ...
 Screen Orientation AP...
Beat Signer - Department of Computer Science - bsigner@vub.ac.be 65October 13, 2017
References ...
 Web Notifications API...
2 December 2005
Next Lecture
Web Application Frameworks
Upcoming SlideShare
Loading in …5
×

HTML5 and the Open Web Platform - Web Technologies (1019888BNR)

441 views

Published on

This lecture is part of a Web Technologies course given at the Vrije Universiteit Brussel.

Published in: Education
  • Be the first to comment

HTML5 and the Open Web Platform - Web Technologies (1019888BNR)

  1. 1. 2 December 2005 Web Technologies HTML5 and the Open Web Platform Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://www.beatsigner.com
  2. 2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2October 13, 2017 Hypertext Markup Language (HTML)  HTML is an application of the Standard Generalized Markup Language (SGML)  simple human-readable markup language with a number of markup tags that can be manipulated by any text editor  Various markup tags to define the structure and presentation of a HTML document (webpage)  root element (<html>), header (<head>), body (<body>) and title (<title>)  headings (<h1>, ... <h6>) and paragraphs (<p>)  tables (<table>, <tr> and <td>) and lists (<ol>, <ul> and <li>)  images (<img>)  w3schools provides a detailed list of tags  http://www.w3schools.com/tags/
  3. 3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3October 13, 2017 Hypertext Markup Language (HTML) ...  Tags can be nested and attributes (key/value pairs) can be added to a tag  HTML documents are transformed into a Document Object Model (DOM) by the browser  tree of elements (and attributes) with textual content  HTML DOM defines objects and properties for HTML elements - document node, element nodes, text nodes, attribute nodes and comment nodes  standard to create, read, update and delete HTML elements  Hyperlinks to connect different HTML documents  only unidirectional embedded hyperlinks are supported
  4. 4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4October 13, 2017 HTML Example <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Vrije Universiteit Brussel</title> </head> <body> <h1>News</h1> <p>Internationalisation was this years theme of the academic opening of the <a href="http://www.vub.ac.be">Vrije Universiteit Brussel</a>. </p> <p>The Vrije Universiteit Brussel will organise the new International Business Arbitration post-graduate course from the new academic year onwards.<img src="course.jpg" width="120" height="100" alt="Course"> </p> ... </body> </html>
  5. 5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5October 13, 2017 HTML DOM Example News html head body document title Vrije Univer ... h1 p p … … aInternationa ... Vrije Uni ... href http:// ... document node element node attribute node text node root node
  6. 6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6October 13, 2017 History of HTML  HTML 1.0 (1993)  HTML 2.0 (1995)  at that time the Netscape Navigator offered much more functionality than the HTML standard - "browser war" between Netscape and Internet Explorer  HTML 3.2 (1997)  first version that was developed exclusively by the Word Wide Web Consortium (W3C)  introduced tables  introduced a lot of new elements for the visual appearance of a document (that was not the original idea of HTML!) - e.g. <font> element or color attribute - most elements now deprecated and cascading style sheets should be used
  7. 7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7October 13, 2017 History of HTML ...  HTML 4.0 (1997) and HTML 4.01 (1999)  internationalisation (Unicode)  introduction of Cascading Style Sheets (CSS)  In 1998 the W3C decided to not further evolve HTML!  XHTML 1 (2000) and XHTML 1.1 (2001)  XML version of HTML (draconian error handling)  XHTML 2.0 (never finished, discontinued in 2009)  revolutionary changes  breaking backwards compatibility  Web Hypertext Application Technology Working Group (WHATWG) founded in 2004 (led by Ian Hickson)  Web Forms 2.0 and Web Applications 1.0  HTML5
  8. 8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8October 13, 2017 History of HTML ...  In 2006 the W3C decided to work on HTML again  based on WHATWG's Web Applications specification  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  HTML5 is a W3C Recommendation since October 2014
  9. 9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9October 13, 2017 Problems with HTML  Mix of content, structure and presentation  no separation of concerns  structure of content defines the presentation in the browser  "Forgiving" browsers weaken the standard  an HTML document with errors (e.g. missing tags etc.) will still be rendered without any error messages  HTML documents can be checked against the standard - http://validator.w3.org  most existing websites (>99%) contain errors - exercise: can you find a webpage without any errors?  Lack of support for multiple presentations
  10. 10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10October 13, 2017 XHTML  XHTML is a reformulation of HTML to make it an XML application (instead of SGML)  we accept that HTML is here to stay  improve HTML by using XML (e.g. nesting or closing of tags)  use benefits of XML with minimal effort <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Vrije Universiteit Brussel</title> </head> <body> ... </body> </html>
  11. 11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11October 13, 2017 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
  12. 12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12October 13, 2017 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
  13. 13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13October 13, 2017 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  ...
  14. 14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14October 13, 2017 HTML5 and Open Web Platform APIs W3C Recommendation W3C Candidate Recommendation Working Draft W3C Working Group Note Non-W3C Specification HTML Markup Canvas 2D Web Messaging Audio Video Web Sockets Drag and Drop Web Workers Micro data Web SQL Web Storage HTML+ RDFa XmlHTTP Request File API Media Capure Indexed Database Contacts API Screen Orientation Timing Control Touch Events Geo Location RDFa Web Open Font Navigation Timing Selectors L1 SVGMathML 3.0 CSS3 Battery Status API Fullscreen JavaScript WebGL Deprecated based on https://en.wikipedia.org/wiki/HTML5#/  Simplifies implementation of cross-platform applications  Standard way for accessing specific functionality  No need for plug-in installation
  15. 15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15October 13, 2017 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 www.codeeval.com http://www.whatbrowser.org Most Popular Coding Languages of 2016
  16. 16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16October 13, 2017 Browser Performance
  17. 17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17October 13, 2017 Web Browsers (1990–2016) WorldWideWeb Internet Explorer Trident Engine Mozilla Firefox WebKit Engine Safari Gecko Engine http://en.wikipedia.org/wiki/File:Timeline_of_web_browsers.svg
  18. 18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18October 13, 2017 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, email, tel, range, ...  native functionality for client-side validation (without scripting) W3CRecommendation
  19. 19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19October 13, 2017 HTML Forms
  20. 20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20October 13, 2017 HTML Forms ... <!DOCTYPE html> <html> <head> ... </head> <body> <form action="submit.html" method="post"> Name (required) <input type="text" name="name" required autofocus> Title <input type="text" name="title"> Shoesize <input list="range" min="10" max="30" name="shoesize"> Email (required) <input type="email" name="mail" required> Webpage <input type="url" name="webpage"> Date of Birth <input type="date" name="birthday"> <input type="hidden" name="id" value="S8798349"> <input type="submit" name="Submit"> </form> </body> </html>
  21. 21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21October 13, 2017 HTML Forms ... <!DOCTYPE html> <html> <head> ... </head> <body> <form action="submit.html" method="get"> Course <input list="courses" name="course"> <datalist id="courses"> <option value="Web Information Systems"> <option value="Web Technologies"> <option value="Next Generation User Interfaces"> <option value="Advanced Topics in Information Systems"> <option value="Databases"> </datalist> <input type="submit" name="Submit"> </form> </body> </html>
  22. 22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22October 13, 2017 HTML Forms ...  Filled in information is sent to the server as name/value pairs in an HTTP GET or HTTP POST request  HTML5 forms simplify the client-side validation of input fields  validation based on input type and other optional attributes  valid input for text input fields can be defined via the pattern attribute (regular expression)  no longer necesarry to use JavaScript for client-side validation
  23. 23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23October 13, 2017 HTML Links  Only unidirectional embedded liks are supported  Linking to parts of another document  only possible if we can add id attributes <!DOCTYPE html> <html> <head> ... </head> <body> <a href="http://www.vub.ac.be">VUB</a> <!– simple link --> <a href="http://www.vub.ac.be" target="_blank" >VUB</a> <a href="contact.html">Contact us</a> <!– link to same folder --> <a href="mailto:john@xyz.org">Email John</a> <!– link to email --> <a href="#introduction">Introduction</a> <!– link to parts of the same page (identified via an id attribute with the corresponding name) --> </body> </html>
  24. 24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24October 13, 2017 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. in early 2015 YouTube switched from Flash to HTML5 video as the default  Multiple video formats are supported  MP4, WebM and Ogg <video width="640" height="480" controls="controls" autoplay="autoplay"> <source src="bullhead.mp4" type="video/mp4" /> <source src="bullhead.webm" type="video/webm" /> The video tag is not supported by your browser! </video> W3CRecommendation
  25. 25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25October 13, 2017 Video ...  Current limitations  no copy protection  limited access to web cams and microphones but this is going to change in the near future (via the Media Captue 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 W3CRecommendation
  26. 26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26October 13, 2017 Audio  <audio> element can be used to play audio in HTML pages  element has methods, properties and events <audio controls="controls"> <source src="intro.mp3" type="audio/mpeg" /> <source src="intro.ogg" type="audio/ogg" /> The audio tag is not supported by your browser! </audio> W3CRecommendation
  27. 27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27October 13, 2017 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 in 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=“application/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); context.stroke(); </script> W3CRecommendation
  28. 28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28October 13, 2017 HTML5 Canvas and JavaScript Demo http://www.youtube.com/watch?v=cnexWE5Rbx4
  29. 29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29October 13, 2017 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 W3CRecommendation <!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>
  30. 30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30October 13, 2017 Web Graphics Library (WebGL)  3D graphics API for JavaScript  getContext("3d") might be used in the future  currently getContext("webgl") or getContext("webgl2")  GPU accelerated
  31. 31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31October 13, 2017 ZygoteBody (WebGL) (Video)
  32. 32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32October 13, 2017 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 (on every page) W3CWorkingGroupNote <!DOCTYPE html> <html lang="en" manifest="myApp.appcache">...</html> CACHE MANIFEST CACHE: index.html default.js NETWORK: dynamic.js FALLBACK: time.js fallback-time.js #version 3
  33. 33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33October 13, 2017 Web Storage API  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 - localStorage with same-origin policy and sessionStorage per window  replace cookies for large amounts of data - cookies are limited in size (maximal 4 KB) and are sent with each request W3CRecommendation <script> if (localStorage.counter) { localStorage.counter = Number(localStorage.counter) + 1; } else { localStorage.counter = 1; } document.write("Total of " + localStorage.counter + " visits"); </script>
  34. 34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34October 13, 2017 Indexed Database API  Low-level indexed storage capabilities  object store  changes happen within transactions  same-origin policy (domain, protocol and port)  other 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  No space limit such as in the Web Storage API  Likely going to become the future structured storage  replacing the Web SQL API (which is now deprecated)  Introduces the concept of transactions and cursors W3CRecommendation
  35. 35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35October 13, 2017 File API  Handling of files in web applications  can only read but not write to the local file system  reading of File, FileList and Blob objects  File object with various attributes (name, size, type, lastModifiedDate)  FileReader can be used to read file content W3CWorkingDraft <input id="f1" type="file"> var fileInput = document.getElementById("f1"); var fileList = fileInput.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; // handle individual file }
  36. 36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36October 13, 2017 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 desktop to the browser W3CRecommendation
  37. 37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37October 13, 2017 Drag and Drop ... <!DOCTYPE html> <html> <head> // style sheet information for the div elements <script> function drag(event) { event.dataTransfer.setData("text/plain", event.target.id); } function drop(event) { event.preventDefault(); // avoid default behaviour of opening as link var data=event.dataTransfer.getData("text/plain"); event.target.appendChild(document.getElementById(data)); } function allowDrop(event) { event.preventDefault(); } </script> </head> W3CRecommendation
  38. 38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38October 13, 2017 Drag and Drop ... <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="wise.gif" draggable="true" ondragstart="drag(event)" id="d1"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> </body> </html> W3CRecommendation
  39. 39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39October 13, 2017 Web Workers  When executing JavaScript in an HTML page, the page becomes non-responsive 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 W3CWorkingDraft <script> var worker = new Worker("myScript.js"); worker.onmessage = function(event) { alert("The worker received this: " + event.data); // web worker sends a message back postMessage("I got your call and will work on it"); ... };
  40. 40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40October 13, 2017 Web Workers ...  Note that Web Workers have no access to window.document (page or DOM API)  "clean up" Web Workers via terminate() method // add a listener to receive messages from the web worker worker.addEventListener("message", handle, false); function handle(e) { // process message from the web worker } worker.postMessage("Hello worker!"); </script> W3CWorkingDraft
  41. 41. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41October 13, 2017 Web Socket API  Bidirectional, full-duplex socket connection between the server and browser for real-time web applications (low latency) with asynchronous partial updates  server-initiated updates become possible!  client and server upgrade from the HTTP protocol to the WebSocket protocol (initial HTTP handshake) - via Connection: Upgrade and Upgrade: websocket HTTP header fields - browser as well as server have to support the Web Socket protocol  reduced "overhead" since no HTTP headers  no longer necessary to do any polling or long polling - faster since in the polling approach the server can send nothing while a client request is transmitted  similarly an EventSource object can be used if only the server has to push information (server-sent events) W3CCandidateRecommendation
  42. 42. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42October 13, 2017 Web Socket API ... <script> var socket = new WebSocket("ws://chat-server.com"); socket.onopen = function(e) { alert("Opened connection ..."); }; socket.onmessage = function(e) { var message = JSON.parse(e.data)); alert("Message received."); ... }; socket.onclose = function(e) { alert("Closed connection."); }; socket.onerror = function(e) { alert("WebSocket Error" + e); }; socket.send("Hellow World"); // connection stays open and server can send multiple things ... socket.close(); </script> W3CCandidateRecommendation
  43. 43. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43October 13, 2017 Geolocation API  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 W3CRecommendation
  44. 44. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44October 13, 2017 Geolocation API ...  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); W3CRecommendation
  45. 45. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45October 13, 2017 Geolocation Example: Google Maps
  46. 46. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46October 13, 2017 Fullscreen API  Can be used to show elements in fullscreen mode  requestFullscreen() and exitFullScreen() W3CWorkingGroupNote <video id="video1" width="640" height="480"> <source src="bullhead.mp4" type="video/mp4" /> </video> var video = document.getElementById("video1"); if (video.requestFullscreen) { // different browser implementations video.requestFullscreen(); } else if (video.msRequestFullscreen) { video.msRequestFullscreen(); } else if (video.mozRequestFullScreen) { video.mozRequestFullScreen(); } else if (video.webkitRequestFullscreen) { video.webkitRequestFullscreen(); }
  47. 47. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47October 13, 2017 Screen Orientation API  Provides access to the orientation of the screen  portrait-primary, portrait-secondary, landscape-primary or landscape-secondary W3CWorkingDraft // add a listener to react to changes of screen orientation screen.orientation.addEventListener("change", function () { console.log("The orientation of the screen is: " + screen.orientation); }); // lock the screen in portrait or landscape orientation screen.orientation.lock("landscape"); // unlock the screen screen.orientation.unlock(); screen.orientation.lock('portrait')
  48. 48. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48October 13, 2017 Page Visibility API  Provides information about the current visibility of a page  we can adapt behaviour if a page is not visible (e.g. minimised) - change update frequency (e.g. checking for emails) to save resources - pause video or game - do not charge for ads W3CRecommendation var video = document.getElementById("video1"); // assume we have a video document.addEventListener("visibilitychange", handle, false); function handle() { if (document.hidden) { video.pause(); } else { video.play(); } }
  49. 49. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49October 13, 2017 Pointer Lock API  Provides access to raw (relative) mouse movements  single element gets all the mouse events  mouse cursor is removed from view (exit via Esc key)  input for first person perspective and 3D modelling software W3CProposedRecommendation <canvas id="c1" width="200" height="200"></canvas> var canvas = document.getElementById("c1"); canvas.requestPointerLock(); document.addEventListener("pointerlockchange", change, false); document.addEventListener("mousemove", move, false); function change(e) { // react to change of the lock status }
  50. 50. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50October 13, 2017 Pointer Lock API ... W3CCandidateRecommendation function move(e) { var x = e.movementX; // movement of x in pixels var y = e.movementY; // movement of y in pixels // do something with the x,y movement } // Pointer lock released via exitPointerLock() or by pressing the Esc key document.exitPointerLock();
  51. 51. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 51October 13, 2017 Battery Status API  Provides Information about the battery status of the hosting device  e.g. to reduce battery drain when the battery is low W3CCandidateRecommendation var battery = navigator.battery; console.log("Battery level: " + Math.floor(battery.level * 100) + "%"); console.log("Device is " + (battery.charging ? "charging" : "discharging"); console.log("Battery charged in " + battery.chargingTime + "s"); console.log("Battery empty in " + battery.dischargingTime + "s"); // we can further register to the following events: chargingchange, levelchange, chargingtimechange and dischargingtimechange battery.onlevelchange = function() { ... }
  52. 52. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 52October 13, 2017 Vibration API  Provide simple tactile feedback  simple vibration or pattern of on/off pulses  feedback for mobile phones and other devices  for devices not supporting vibrations, the methods have no effect W3CRecommendation // single vibration for 300ms navigator.vibrate(300); // pattern with pauses of 50ms navigator.vibrate([300, 50, 300, 50, 1000]); // ongoing vibrations can be cancelled at any time by calling the vibrate method with a value of zero navigator.vibrate(0);
  53. 53. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 53October 13, 2017 Web Notifications API  Display notifications to alert users outside the context of a web page  show standard desktop notifications (e.g. lower right corner) W3CRecommendation Notification.requestPermission(); // ask for permission var options = { body: "This is the body of my message", icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhE" }; var notification = new Notification("My Title", options);
  54. 54. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 54October 13, 2017 Example: Multiplayer Port of Quake II  Google's browser port 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
  55. 55. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 55October 13, 2017 Other HTML5 Features  Media Capture and Streams  access local multimedia devices such as microphones or video cameras  Web Messaging  communication between documents (e.g. in different frames, tabs or windows) regardless of their source domain  messages should only be accepted from domains we expect to receive messages from  WebRTC 1.0: Real-time Communication Between Browsers  real-time browser-to-browser applications for voice calling, video chat etc.
  56. 56. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 56October 13, 2017 Other HTML5 Features …  Note that some other HTML5 features are introduced later in the course  Microdata  …
  57. 57. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 57October 13, 2017 Exercise 3  HTML5 and the Open Web Platform
  58. 58. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 58October 13, 2017 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 Recommendation  http://www.w3.org/TR/html5/  HTML Design Principles, W3C Working Draft  http://www.w3.org/TR/html-design-principles/  HTML Tutorial  http://www.w3schools.com/html/
  59. 59. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 59October 13, 2017 References ...  HTML Canvas 2D Context, W3C Working Draft  http://www.w3.org/TR/2dcontext/  Simon Sarris, HTML 5 Canvas: A Web Standard for Dynamic Graphics (refcardz #151)  http://refcardz.dzone.com/refcardz/html5-canvas-web-standard  HTML5 Canvas and JavaScript Demo  http://www.youtube.com/watch?v=cnexWE5Rbx4  Scalable Vector Graphics (SVG) 1.1  http://www.w3.org/TR/SVG11/
  60. 60. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 60October 13, 2017 References ...  HTML Tutorial  http://www.w3schools.com/html/  Andy Harris, Core HTML (refcardz #64)  http://refcardz.dzone.com/refcardz/core-html  James Sugrue, HTML5: The Evolution of Web Standards (refcardz #123)  http://refcardz.dzone.com/refcardz/html5-new-standards-web-interactivity  Mark Pilgrim, HTML5: Up and Running - Dive Into the Future of Web Development, O'Reilly Media, August 2010, ISBN-13: 978-0596806026
  61. 61. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 61October 13, 2017 References ...  Offline Web Applications, W3C Working Group Note  http://www.w3.org/TR/offline-webapps/  Max Firtman, HTML5 Mobile Development, (refcardz #186)  http://refcardz.dzone.com/refcardz/html5-mobile-development  W3C Markup Validation Service  http://validator.w3.org  ZygoteBody  https://www.youtube.com/watch?v=_n2Us7oGmRA
  62. 62. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 62October 13, 2017 References  Web Storage, W3C Recommendation  http://www.w3.org/TR/webstorage/  Indexed Database API, W3C Recommendation  http://www.w3.org/TR/IndexedDB/  Gerard Gallant, HTML5: IndexedDB, (refcardz #195)  http://refcardz.dzone.com/refcardz/html5-indexeddb  File API, W3C Working Draft  http://www.w3.org/TR/FileAPI/  Web Workers, W3C Working Draft  http://www.w3.org/TR/workers/
  63. 63. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 63October 13, 2017 References ...  Gerard Gallant, HTML5 Web Workers: Multithreaded JavaScript for High-Performance Web Apps (refcardz #177)  http://refcardz.dzone.com/refcardz/html5-web-workers  Web Sockets API, W3C Candidate Recommendation  http://www.w3.org/TR/websockets/  Geolocation API, W3C Recommendation  http://www.w3.org/TR/geolocation-API/  Fullscreen API, W3C Working Group Note  https://www.w3.org/TR/fullscreen/
  64. 64. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 64October 13, 2017 References ...  Screen Orientation API, W3C Working Draft  http://www.w3.org/TR/screen-orientation/  Page Visibility API, W3C Recommendation  http://www.w3.org/TR/page-visibility/  Pointer Lock API, W3C Proposed Recommendation  http://www.w3.org/TR/pointerlock/  Battery Status API, W3C Candidate Recommendation  http://www.w3.org/TR/battery-status/  Vibration API, W3C Recommendation  http://www.w3.org/TR/vibration/
  65. 65. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 65October 13, 2017 References ...  Web Notifications API, W3C Proposed Recommendation  http://www.w3.org/TR/notifications/
  66. 66. 2 December 2005 Next Lecture Web Application Frameworks

×