html5 and the open web platform - web technologies (1019888bnr)
TRANSCRIPT
2 December 2005
Web TechnologiesHTML5 and the Open Web Platform
Prof. Beat Signer
Department of Computer Science
Vrije Universiteit Brussel
http://www.beatsigner.com
Beat Signer - Department of Computer Science - [email protected] 2October 14, 2016
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/
Beat Signer - Department of Computer Science - [email protected] 3October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 4October 14, 2016
HTML Example
<!DOCTYPE htmlPUBLIC "-//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 yearonwards.<img src="course.jpg" width="120" height="100" alt="Course">
</p>...</body></html>
Beat Signer - Department of Computer Science - [email protected] 5October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 6October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 7October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 8October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 9October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 10October 14, 2016
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>
Beat Signer - Department of Computer Science - [email protected] 11October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 12October 14, 2016
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] 13October 14, 2016
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
...
Beat Signer - Department of Computer Science - [email protected] 14October 14, 2016
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
Dragand
Drop
Web
WorkersMicro
data
Web SQL
Web
StorageHTML +
RDFa
XmlHTTP
Request
File API
Media
CapureIndexed
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
Beat Signer - Department of Computer Science - [email protected] 15October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 16October 14, 2016
Browser Performance
Beat Signer - Department of Computer Science - [email protected] 17October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 18October 14, 2016
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)
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 19October 14, 2016
HTML Forms
Beat Signer - Department of Computer Science - [email protected] 20October 14, 2016
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>
Beat Signer - Department of Computer Science - [email protected] 21October 14, 2016
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>
Beat Signer - Department of Computer Science - [email protected] 22October 14, 2016
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 patternattribute (regular expression)
no longer necesarry to use JavaScript for client-side validation
Beat Signer - Department of Computer Science - [email protected] 23October 14, 2016
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:[email protected]">Email John</a> <!– link to email --><a href="#introduction">Introduction</a> <!– link to parts of the samepage (identified via an id attribute with the corresponding name) -->
</body></html>
Beat Signer - Department of Computer Science - [email protected] 24October 14, 2016
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>
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 25October 14, 2016
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
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 26October 14, 2016
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>W
3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 27October 14, 2016
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>
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 28October 14, 2016
HTML5 Canvas and JavaScript Demo
http://www.youtube.com/watch?v=cnexWE5Rbx4
Beat Signer - Department of Computer Science - [email protected] 29October 14, 2016
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 R
ecom
mendation
<!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>
Beat Signer - Department of Computer Science - [email protected] 30October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 31October 14, 2016
ZygoteBody (WebGL) (Video)
Beat Signer - Department of Computer Science - [email protected] 32October 14, 2016
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)
W3C W
ork
ing G
roup N
ote
<!DOCTYPE html><html lang="en" manifest="myApp.appcache">...</html>
CACHE MANIFESTCACHE:index.htmldefault.jsNETWORK:dynamic.jsFALLBACK:time.js fallback-time.js
#version 3
Beat Signer - Department of Computer Science - [email protected] 33October 14, 2016
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
W3C R
ecom
mendation
<script>if (localStorage.counter) {localStorage.counter = Number(localStorage.counter) + 1;}else {localStorage.counter = 1;}document.write("Total of " + localStorage.counter + " visits");</script>
Beat Signer - Department of Computer Science - [email protected] 34October 14, 2016
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
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 35October 14, 2016
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
W3C W
ork
ing D
raft
<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}
Beat Signer - Department of Computer Science - [email protected] 36October 14, 2016
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
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 37October 14, 2016
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 linkvar data=event.dataTransfer.getData("text/plain");event.target.appendChild(document.getElementById(data));}
function allowDrop(event) {event.preventDefault();}</script></head>
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 38October 14, 2016
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>
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 39October 14, 2016
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
W3C W
ork
ing D
raft
<script>var worker = new Worker("myScript.js");worker.onmessage = function(event) { alert("The worker received this: " + event.data);// web worker sends a message backpostMessage("I got your call and will work on it");...};
Beat Signer - Department of Computer Science - [email protected] 40October 14, 2016
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 workerworker.addEventListener("message", handle, false);
function handle(e) {// process message from the web worker}
worker.postMessage("Hello worker!");</script>W
3C W
ork
ing D
raft
Beat Signer - Department of Computer Science - [email protected] 41October 14, 2016
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)
W3C C
andid
ate
Recom
mendation
Beat Signer - Department of Computer Science - [email protected] 42October 14, 2016
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>
W3C C
andid
ate
Recom
mendation
Beat Signer - Department of Computer Science - [email protected] 43October 14, 2016
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
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 44October 14, 2016
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);
W3C R
ecom
mendation
Beat Signer - Department of Computer Science - [email protected] 45October 14, 2016
Geolocation Example: Google Maps
Beat Signer - Department of Computer Science - [email protected] 46October 14, 2016
Fullscreen API
Can be used to show elements in fullscreen mode requestFullscreen() and exitFullScreen()
W3C W
ork
ing G
roup N
ote
<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 implementationsvideo.requestFullscreen();} else if (video.msRequestFullscreen) { video.msRequestFullscreen();} else if (video.mozRequestFullScreen) {video.mozRequestFullScreen();} else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen();}
Beat Signer - Department of Computer Science - [email protected] 47October 14, 2016
Screen Orientation API
Provides access to the orientation of the screen portrait-primary, portrait-secondary,landscape-primary or landscape-secondary
W3C W
ork
ing D
raft
// add a listener to react to changes of screen orientationscreen.orientation.addEventListener("change", function () {console.log("The orientation of the screen is: " + screen.orientation);
});
// lock the screen in portrait or landscape orientationscreen.orientation.lock("landscape");
// unlock the screenscreen.orientation.unlock();
screen.orientation.lock('portrait')
Beat Signer - Department of Computer Science - [email protected] 48October 14, 2016
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
W3C R
ecom
mendation
var video = document.getElementById("video1"); // assume we have a videodocument.addEventListener("visibilitychange", handle, false);
function handle() {if (document.hidden) {video.pause();} else {video.play();}}
Beat Signer - Department of Computer Science - [email protected] 49October 14, 2016
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
W3C P
roposed R
ecom
mendation
<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}
Beat Signer - Department of Computer Science - [email protected] 50October 14, 2016
Pointer Lock API ...
W3C C
andid
ate
Recom
mendation
function move(e) {var x = e.movementX; // movement of x in pixelsvar 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 keydocument.exitPointerLock();
Beat Signer - Department of Computer Science - [email protected] 51October 14, 2016
Battery Status API
Provides Information about the battery status of the
hosting device e.g. to reduce battery drain when the battery is low
W3C C
andid
ate
Recom
mendation
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() {...}
Beat Signer - Department of Computer Science - [email protected] 52October 14, 2016
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
W3C R
ecom
mendation
// single vibration for 300msnavigator.vibrate(300);
// pattern with pauses of 50msnavigator.vibrate([300, 50, 300, 50, 1000]);
// ongoing vibrations can be cancelled at any time by calling the vibrate method with a value of zeronavigator.vibrate(0);
Beat Signer - Department of Computer Science - [email protected] 53October 14, 2016
Web Notifications API
Display notifications to alert users outside the
context of a web page show standard desktop notifications (e.g. lower right corner)
W3C R
ecom
mendation
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);
Beat Signer - Department of Computer Science - [email protected] 54October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 55October 14, 2016
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.
Beat Signer - Department of Computer Science - [email protected] 56October 14, 2016
Other HTML5 Features …
Note that some other HTML5 features are
introduced later in the course Microdata
…
Beat Signer - Department of Computer Science - [email protected] 57October 14, 2016
Exercise 3
HTML5 and the Open Web Platform
Beat Signer - Department of Computer Science - [email protected] 58October 14, 2016
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/
Beat Signer - Department of Computer Science - [email protected] 59October 14, 2016
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/
Beat Signer - Department of Computer Science - [email protected] 60October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 61October 14, 2016
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
Beat Signer - Department of Computer Science - [email protected] 62October 14, 2016
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/
Beat Signer - Department of Computer Science - [email protected] 63October 14, 2016
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/
Beat Signer - Department of Computer Science - [email protected] 64October 14, 2016
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/
Beat Signer - Department of Computer Science - [email protected] 65October 14, 2016
References ...
Web Notifications API, W3C Proposed
Recommendation http://www.w3.org/TR/notifications/
2 December 2005
Next LectureWeb Application Frameworks