HTML5 and The Open Web Platform

Web Technologies
HTML5 and the Open Web Platform
Prof. Beat Signer
Department of Computer Science

Vrije Universiteit Brussel
beatsigner.com
2 December 2005
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
▪ https://www.w3schools.com/tags/
October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2
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 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 year's theme of the academic opening
of the <a href="https://www.vub.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>

HTML DOM Example
document
html root node
head body
title h1 p p …
Vrije Univer ... News …
document node Internationa ... a href

element node
attribute node Vrije Uni ... https:// ...
text node

History of HTML
▪ HTML 1.0 (1993), prototype already in 1991
▪ 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
▪ at least two browsers fully implementing the standard

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
- https://validator.w3.org
▪ most existing websites (>99%) contain errors
- exercise: can you find a webpage without any errors?

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
MathML SVG Selectors
3.0 L1
W3C Candidate Recommendation Navigation
CSS3 Timing
Working Draft
Web Open
Web HTML +
Font
Storage RDFa
W3C Working Group Note JavaScript
RDFa
Non-W3C Specification
WebGL Web
Messaging
Geo
Canvas Web Location
2D Sockets
Battery
Status
API HTML
Touch
▪ Simplifies implementation Markup Drag
Audio Events
and
Video
Drop
of cross-platform applications Fullscreen
Web Timing
Micro Control
Workers
▪ Standard way for accessing XmlHTTP
data
Request Screen
specific functionality Orientation
File API
▪ No need for plug-in installation Contacts
Media Indexed API
Capure Database
based on https://en.wikipedia.org/wiki/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
Most Popular Programming Languages of 2020
https://www.devsaran.com/blog/10-best-programming-languages-2020-you-should-know

Browser Performance

Web Browsers (1990–2019)
Internet Explorer
Trident Engine
WorldWideWeb
Firefox
Mozilla
Gecko Engine
WebKit Engine
Safari
Chrome
https://en.wikipedia.org/wiki/File:Timeline_of_web_browsers.svg

HTML Markup
▪ Some elements have been added
W3C Recommendation
▪ 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)

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 type="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 pattern
attribute (regular expression)
▪ no longer necessary to use JavaScript for client-side validation

HTML Links
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<a href="https://www.vub.be">VUB</a> <!– simple link -->
<a href="https://www.vub.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>
▪ Only unidirectional embedded links are supported

▪ Linking to parts of another document
▪ only possible if we can add id attributes

Video
▪ <video> element can be used to play videos
W3C Recommendation
in HTML pages
▪ element has methods, properties and events
▪ no external plug-in (e.g. Adobe Flash) required anymore
▪ 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" />
The video tag is not supported by your browser!
</video>

Audio
▪ <audio> element can be used to play audio
W3C Recommendation
in HTML pages
▪ element has methods, properties and events
<audio controls="controls">
<source src="intro.mp3" type="audio/mpeg" />
The audio tag is not supported by your browser!
</audio>

Canvas 2D
▪ <canvas> tag can be used in combination with
W3C Recommendation
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>

HTML5 Canvas and JavaScript Demo

Scalable Vector Graphics (SVG)
▪ Vector graphics alternative to Canvas 2D
W3C Recommendation
▪ resolution independent
▪ define graphics in XML format (embeddable in HTML)
▪ good support for animations (declarative description)
▪ full control over each element via the SVG DOM API
▪ On the other hand, Canvas 2D offers better performance
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="50" cy="50" r="100" fill="blue" />
</svg>
</body>
</html>

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)

Web Storage API
▪ localStorage and sessionStorage JavaScript
W3C Recommendation
objects to store data (key/value) on the client

▪ localStorage has no time limit whereas sessionStorage is
deleted when the browser window is closed
- 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
<script>
if (localStorage.counter) {
localStorage.counter = Number(localStorage.counter) + 1;
}
else {
localStorage.counter = 1;
}
document.write("Total of " + localStorage.counter + " visits");
</script>

Drag and Drop
▪ Drag items and drop them anywhere in the browser
W3C Recommendation
▪ 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

Drag and Drop ...
<!DOCTYPE html>
<html>
W3C Recommendation
<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>

Drag and Drop ...
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
W3C Recommendation
<img src="wise.gif" draggable="true" ondragstart="drag(event)" id="d1">

</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>

Web Workers
▪ When executing JavaScript in an HTML page, the
W3C Working Draft
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>
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");
...
};

Web Workers ...
// add a listener to receive messages from the web worker
worker.addEventListener("message", handle, false);
W3C Working Draft
function handle(e) {
// process message from the web worker
}
worker.postMessage("Hello worker!");
</script>
▪ Note that Web Workers have no access to

window.document (web page or DOM API)
▪ "clean up" Web Workers via terminate() method

WebSocket API
▪ Bidirectional, full-duplex socket connection between
W3C Candidate Recommendation
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)
WebSocket 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>

Geolocation API
▪ Standard interface for accessing geographical
W3C Recommendation
location information on the client device

▪ transparent access to different location information sources
- GPS, GSM cells, IP address, RFID, Wi-Fi connection etc.
▪ Firefox uses the Google Location Service as default

lookup service
▪ send IP address and information about nearby wireless access
points to the Google Location Service and an approximate
location will be computed

Geolocation API ...
▪ JavaScript access to the Geolocation API
W3C Recommendation
▪ access via the geolocation child object of the navigator object

function showPosition(position) {
alert(position.coords.latitude + " " + position.coords.longitude);
}
function showError() {
alert("Your current position cannot be computed!");
}
navigator.geolocation.getCurrentPosition(showPosition, showError,
{timeout:10000});
▪ we can also continuously monitor the client's position

navigator.geolocation.watchPosition(showPosition);

Geolocation Example: Google Maps

Offline Web Applications
▪ Application cache is used for
W3C Working Group Note
▪ offline browsing where users can use the web application while
they are offline
▪ increased performance due to cache hits and reduced server load
▪ Managed via a cache manifest (on every page)
<!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

Fullscreen API
▪ Can be used to show elements in fullscreen mode
W3C Working Group Note
▪ requestFullscreen() and exitFullScreen()

<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) { // IE11
video.msRequestFullscreen();
} else if (video.webkitRequestFullscreen) { // Safari
video.webkitRequestFullscreen();
}

Screen Orientation API
▪ Provides access to the orientation of the screen
W3C Working Draft
▪ portrait-primary, portrait-secondary,
landscape-primary or landscape-secondary
// 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();

Page Visibility API
▪ Provides information about the current visibility
W3C Recommendation
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
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();
}
}

Battery Status API
▪ Provides Information about the battery status of the
hosting device
▪ e.g. to reduce battery drain when the battery is low
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
W3C Recommendation
▪ 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
// 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);

Web Notifications API
▪ Display notifications to alert users outside the
W3C Recommendation
context of a web page

▪ show standard desktop notifications (e.g. lower right corner)
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
▪ https://html.spec.whatwg.org/multipage/
▪ W3C - All Standards and Drafts

▪ https://www.w3.org/TR/
▪ HTML Design Principles, W3C Working Draft

▪ https://www.w3.org/TR/html-design-principles/
▪ HTML Tutorial
▪ https://www.w3schools.com/html/
▪ Mark Pilgrim, HTML5: Up and Running - Dive Into the

Future of Web Development, O'Reilly Media, August
2010, ISBN-13: 978-0596806026

References ...
▪ HTML Canvas 2D Context, W3C Working Draft
▪ https://www.w3.org/TR/2dcontext/
▪ Simon Sarris, HTML 5 Canvas: A Web Standard

for Dynamic Graphics (refcardz #151)
▪ https://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, W3C Recommen-

dation
▪ https://www.w3.org/TR/SVG11/
▪ Andy Harris, Core HTML (refcardz #64)
▪ https://dzone.com/refcardz/core-html
References ...
▪ James Sugrue, HTML5: The Evolution
of Web Standards (refcardz #123)
▪ https://dzone.com/refcardz/html5-new-standards-web-interactivity
▪ Offline Web Applications, W3C Working

Group Note
▪ https://www.w3.org/TR/offline-webapps/
▪ Max Firtman, HTML5 Mobile Development,

(refcardz #186)
▪ https://dzone.com/refcardz/html5-mobile-development
▪ W3C Markup Validation Service

▪ https://validator.w3.org

References ...
▪ ZygoteBody
▪ https://www.youtube.com/watch?v=_n2Us7oGmRA
▪ Web Storage, W3C Recommendation

▪ https://www.w3.org/TR/webstorage/
▪ Web Workers, W3C Working Draft

▪ https://www.w3.org/TR/workers/
▪ Gerard Gallant, HTML5 Web Workers:

Multithreaded JavaScript for High-Performance Web
Apps (refcardz #177)
▪ https://dzone.com/refcardz/html5-web-workers

References ...
▪ Web Sockets API, W3C Candidate
Recommendation
▪ https://www.w3.org/TR/websockets/
▪ Geolocation API, W3C Recommendation

▪ https://www.w3.org/TR/geolocation-API/
▪ Fullscreen API, W3C Working Group Note

▪ https://www.w3.org/TR/fullscreen/
▪ Screen Orientation API, W3C Working Draft

▪ https://www.w3.org/TR/screen-orientation/
▪ Page Visibility API, W3C Recommendation

▪ https://www.w3.org/TR/page-visibility/

References ...
▪ Battery Status API, W3C Candidate
Recommendation
▪ https://www.w3.org/TR/battery-status/
▪ Vibration API, W3C Recommendation

▪ https://www.w3.org/TR/vibration/

Next Lecture
Web Application Frameworks
2 December 2005

HTML5 and The Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML5 and The Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)

Uploaded by

Copyright:

Available Formats

Web Technologies

Prof. Beat Signer

Department of Computer Science

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4

html root node

Vrije Univer ... News …

document node Internationa ... a href

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5

▪ HTML 3.2 (1997)

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10

... HTML5 does not belong to a company or a specific

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14

Most Popular Programming Languages of 2020

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17

▪ structural elements such as <article>, <section>, <header>,

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

▪ Only unidirectional embedded links are supported

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

JavaScript to draw on a webpage (raster graphics)

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30

objects to store data (key/value) on the client

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

▪ define draggable elements via the draggable attribute

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

<img src="wise.gif" draggable="true" ondragstart="drag(event)" id="d1">

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34

page becomes non-responsive until the script is finished

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35

▪ Note that Web Workers have no access to

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36

the server and browser for real-time web applications

socket.onopen = function(e) { alert("Opened connection ..."); };

socket.onclose = function(e) { alert("Closed connection."); };

socket.onerror = function(e) { alert("WebSocket Error" + e); };

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38

location information on the client device

▪ Firefox uses the Google Location Service as default

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39

▪ access via the geolocation child object of the navigator object

▪ we can also continuously monitor the client's position

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40

October 15, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41