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

2 December 2005

Web TechnologiesHTML5 and the Open Web Platform

Prof. Beat Signer

Department of Computer Science

Vrije Universiteit Brussel

http://www.beatsigner.com

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/

http://www.w3schools.com/tags/


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


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>


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


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


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


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


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

http://validator.w3.org/


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>


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


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


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

...


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


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


Browser Performance


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


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


HTML Forms


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>


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>


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


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>


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


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


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


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


HTML5 Canvas and JavaScript Demo

http://www.youtube.com/watch?v=cnexWE5Rbx4


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>


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


ZygoteBody (WebGL) (Video)


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


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>


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


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}


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


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


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


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");...};


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


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


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


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


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


Geolocation Example: Google Maps


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();}


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')


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();}}


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}


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();


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() {...}


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);


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);


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


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.


Other HTML5 Features …

Note that some other HTML5 features are

introduced later in the course Microdata

…


Exercise 3

HTML5 and the Open Web Platform


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/

http://www.whatwg.org/html

http://www.whatwg.org/html

http://www.w3.org/TR/html5/

http://www.w3.org/TR/html-design-principles/

http://www.w3schools.com/html/


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/

http://www.w3.org/TR/2dcontext/

http://refcardz.dzone.com/refcardz/html5-canvas-web-standard

http://www.youtube.com/watch?v=cnexWE5Rbx4

http://www.w3.org/TR/SVG11/


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

http://www.w3schools.com/html/

http://refcardz.dzone.com/refcardz/core-html

http://refcardz.dzone.com/refcardz/html5-new-standards-web-interactivity


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

http://www.w3.org/TR/offline-webapps/

http://refcardz.dzone.com/refcardz/html5-mobile-development

http://validator.w3.org/

https://www.youtube.com/watch?v=_n2Us7oGmRA


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/

http://www.w3.org/TR/webstorage/

http://www.w3.org/TR/IndexedDB/

http://refcardz.dzone.com/refcardz/html5-indexeddb

http://www.w3.org/TR/FileAPI/

http://www.w3.org/TR/workers/


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/

http://refcardz.dzone.com/refcardz/html5-web-workers

http://www.w3.org/TR/websockets/

http://www.w3.org/TR/geolocation-API/

https://www.w3.org/TR/fullscreen/


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/

http://www.w3.org/TR/screen-orientation/

http://www.w3.org/TR/page-visibility/

http://www.w3.org/TR/pointerlock/

http://www.w3.org/TR/battery-status/

http://www.w3.org/TR/vibration/


References ...

Web Notifications API, W3C Proposed

Recommendation http://www.w3.org/TR/notifications/

http://www.w3.org/TR/notifications/

2 December 2005

Next LectureWeb Application Frameworks

Education

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