HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DINF-11912)

2 December 2005

Web Information SystemsHTML5 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 10, 2014

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

...


Hypertext Markup Language (HTML) ...

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 anchor tag (<a href="...">)

only 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, W3C Working Draft

Roadmap HTML5 Proposed Recommendation on September 16, 2014

HTML5 W3C Recommendation predicted for the end of 2014 (originally 2022)


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

Sergey Mavrody, January 2013


Current HTML5 Browser Support

When can I use..., http://caniuse.com/#cats=HTML5


JavaScript/ECMAScript

Growing use of JavaScript frameworks and AJAX

JavaScript engine race in 2006 Adobe donated their just-in-time (JIT) compilation engine

and ECMAScript virtual machine to the Mozilla project

healthy competition among browser vendors

- bring JavaScript performance closer to that of native desktop application code

Black Duck, 2011 http://www.whatbrowser.org


Browser Performance


Web Browsers (1990–2013)

WorldWideWeb

Internet Explorer

Trident Engine

Mozilla

Firefox

WebKit Engine

Opera

Presto Engine

Opera Mini

Chrome

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 (no scripting)

W3C P

roposed R

ecom

mendation


Forms Example


Forms Example ...

<!DOCTYPE html><html><body><form action="submit.html">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="submit"></form></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. an HTML5 YouTube version (working without Flash) is

available at http://www.youtube.com/html5

No single video format is supported by all browsers MP4, WebM and Ogg

<video width="640" height="480" controls="controls"><source src="bullhead.mp4" type="video/mp4" /><source src="bullhead.webm" type="video/webm" />The video tag is not supported by your browser!</video>

W3C P

roposed R

ecom

mendation


Video ...

Current limitations no adaptive streaming

no copy protection

limited access to web cams and microphones but this is going to change in the near future (via the 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 P

roposed R

ecom

mendation


Video Support

When can I use..., http://caniuse.com/#feat=video


MP4 Support

MPEG 4 files with H264 video codec and AAC audio codec

When can I use..., http://caniuse.com/#feat=mpeg4


WebM Support

WebM files with VP8 video codec and Vorbis audio codec

When can I use..., http://caniuse.com/#feat=webm


Ogg Support

When can I use..., http://caniuse.com/#feat=ogv

Ogg files with Theora video codec and Vorbis audio codec


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="text/javascript">var canvas = document.getElementById("drawingArea");var context = canvas.getContext("2d");context.fillStyle = "#0000FF";context.fillRect(50,50,100,50);context.moveTo(0,0);context.lineTo(200,200);context.stroke();</script>

W3C P

roposed R

ecom

mendation


HTML5 Canvas and JavaScript Demo

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


Canvas 2D Support

When can I use..., http://caniuse.com/#feat=canvas


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>


SVG Support

When can I use..., http://caniuse.com/#cats=SVG


Web Graphics Library (WebGL)

3D graphics API for JavaScript

getContext("3d") might be used in the future currently getContext("webgl") orgetContext("experimental-webgl")

GPU accelerated


Video: Google Body Browser (WebGL)


WebGL Support

When can I use..., http://caniuse.com/#feat=webgl


Web Storage

localStorage and sessionStorage JavaScript

objects to store data (key/value) on the client localStorage has no time limit whereas sessionStorage is

deleted when the browser window is closed

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


Web Storage Support

When can I use..., http://caniuse.com/#search=web%20storage


Indexed Database API

Low-level indexed storage capabilities 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 cursorsW3C C

andid

ate

Recom

mendation


Indexed Database Support

When can I use..., http://caniuse.com/#search=indexed%20data


Drag and Drop

Drag items and drop them anywhere in the browser define draggable elements via the draggable attribute

define elements that can accept drops

exchange information via the dataTransfer object

Items can also be drag and dropped from the browser to

external applications

W3C P

roposed R

ecom

mendation


Drag and Drop ...

<!DOCTYPE html><html><head><script>function drag(event) {event.dataTransfer.setData("text/plain", event.target.id);

}

function drop(event) {event.preventDefault();var data=event.dataTransfer.getData("text/plain");event.target.appendChild(document.getElementById(data));

}

function allowDrop(event) {event.preventDefault();}

</script></head><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 P

roposed R

ecom

mendation


Drag and Drop Support

When can I use..., http://caniuse.com/#feat=dragndrop


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

<script type="text/javascript">var worker = new Worker("myScript.js");worker.onmessage = function(event) { alert("The worker received this: " + event.data);...};worker.postMessage("Hello worker!");</script>

W3C C

andid

ate

Recom

mendation


Web Workers Support

When can I use..., http://caniuse.com/#feat=webworkers


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


Offline Web Applications Support

When can I use..., http://caniuse.com/#feat=offline-apps


Other HTML5 Features

Note that some other important HTML5 features

are introduced later in the course Web Sockets

WebRTC

Geoloaction

Microdata

…

W3C P

roposed R

ecom

mendation


When Can We Start to Use HTML5?

HTML5 is not yet an official standard – but many HTML5 features are already implemented by browser vendors line between web apps and native apps gets blurry!

Seamless transition from HTML 4.01 to HTML5 backwards compatibility and fallback solutions

It is time to start using different parts of HTML5!

... In a recent online survey con-

ducted by Contemporary Analysis,

on behalf of appendTo, a JavaScript

and HTML5 consulting company,

84% of developers planned on using

HTML5 in projects within the next

6 months. ...

When can I use..., http://caniuse.com/#cats=HTML5 Contemporary Analysis, September 2011


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


Cascading Style Sheets (CSS)

Separation of presentation and content visualisation of HTML elements defined by styles

enables multiple presentations of the same content

media-specific style sheets via the media attribute

<html><head>...<link ref="stylesheet" type="text/css" href="default.css"media="screen, tv" />

<link rel="stylesheet" type="text/css" href="alternative.css"media="print, handheld" />

</head><body>...</body></html>


CSS Syntax

The CSS syntax contains three parts a selector

- HTML element

a property and a value

- surrounded by curly braces

- multiple properties are separated with a semicolon

Example

selector {property1:value1;propertyn:valuen}

h1 {color:red;font-size:10px}p {color:blue}


CSS Inclusion

There are three ways how a style sheet can be inserted inline style

internal style sheet

external style sheet

Inline style defined via the style attribute of the corresponding

HTML element

still mixes content and presentation and should therefore be avoided whenever possible

<h1 style="color:red;font-size:10px">Urgent Tasks</h1>


CSS Inclusion ...

Internal style sheet used when single document has a unique style

defined in the <head> section

<html><head>...<style type="text/css">h1 {color:red;font-size:10px}p {color:blue}...</style> </head><body>...</body></html>


CSS Inclusion ...

External style sheet (in *.css file) changes to the overall appearance of an entire website can be

managed in a single file

- removes a lot of redundancy

- saves a lot of time

- leads to more consistent websites

<html><head>...<link rel="stylesheet" type="text/css" href="default.css" /></head><body>...</body></html>


Multiple Style Sheets

Multiple styles will cascade into a single one properties/values are inherited from more specific style sheets

Overriding priorities(1) default browser style

(2) external style sheet

(3) internal style sheet

(4) inline style (highest priority)

Note that if the link to the external style sheet in the<head> section is placed after the internal style sheet, then the external style sheet will override the internal one


Exercise 3

Java Servlet Technology develop a servlet that processes data which has

been entered in an HTML form


References

HTML – Living Standard, WHATWG http://www.whatwg.org/html

HTML5 – A Technical Specification for Web Developers http://developers.whatwg.org

HTML5 – A Vocabulary and Associated APIs for HTML

and XHTML, W3C Working Draft http://www.w3.org/TR/html5/

HTML Design Principles, W3C Working Draft http://www.w3.org/TR/html-design-principles/

HTML Canvas 2D Context, W3C Working Draft http://www.w3.org/TR/2dcontext/


References ...

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/

Web Storage, W3C Candidate Recommendation http://www.w3.org/TR/webstorage/

Indexed Database API, W3C Working Draft http://www.w3.org/TR/IndexedDB/


References ...

Gerard Gallant, HTML5: IndexedDB,

(refcardz #195) http://refcardz.dzone.com/refcardz/html5-indexeddb

Web Workers, W3C Working Draft http://www.w3.org/TR/workers/

Gerard Gallant, HTML5 Web Workers: Multithreaded

JavaScript for High-Performance Web Apps

(refcardz #177) http://refcardz.dzone.com/refcardz/html5-web-workers

Web Audio API, W3C Working Draft http://www.w3.org/TR/webaudio/


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


References ...

Cascading Style Sheets (CSS) Snapshot 2010,

W3C Working Group Note http://www.w3.org/TR/CSS/

Molly E. Holzschlag, Core CSS (Part I, II & III)

(refcardz #19, #25 and #34) http://refcardz.dzone.com/refcardz/corecss-part1

http://refcardz.dzone.com/refcardz/corecss2

http://refcardz.dzone.com/refcardz/corecss3

CSS Tutorial http://www.w3schools.com/css/

Offline Web Applications, W3C Working Group Note http://www.w3.org/TR/offline-webapps/


References ...

Max Firtman, HTML5 Mobile Development,

(refcardz #186) http://refcardz.dzone.com/refcardz/html5-mobile-development

W3C Markup Validation Service http://validator.w3.org

2 December 2005

Next LectureXML and XML Applications

Education

HTML5 and the Open Web Platform - Lecture 03 - Web Information Systems (WE-DINF-11912)