sign in sign up
<<
Home , HTML5 video, Scalable Vector Graphics, WebGL, Web storage, Web worker

Web Technologies VU (706.704)

Vedran Sabol

ISDS, TU Graz

Nov 09, 2020

Vedran Sabol (ISDS, TU Graz) Web Technologies Nov 09, 2020 1 / 68 Outline

1 Introduction

2 Drawing in the Browser (SVG, 3D)

3 Audio and Video

4 Javascript

5 JavaScript Changes

Vedran Sabol (ISDS, TU Graz) Web Technologies Nov 09, 2020 2 / 68 HTML5 - Part II Web Technologies (706.704)

Vedran Sabol

ISDS, TU Graz

Nov 09, 2020

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 3 / 68 Drawing in the Browser (SVG, 3D) SVG

Scalable Vector (SVG) Web standard for (as opposed to canvas - raster-based) Declarative style (as opposed to canvas rendering - procedural) Developed by W3C (http://www.w3.org/Graphics/SVG/) XML application (SVG DTD) http://www.w3.org/TR/SVG11/svgdtd.html SVG is supported by all current browsers Editors and svg-edit (Web App)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 4 / 68 Drawing in the Browser (SVG, 3D) SVG Features

Basic shapes: rectangles, circles, ellipses, path, etc. Painting: filling, stroking, etc. Text Example - simple shapes Grouping of basic shapes Transformation: translation, rotation, scale, skew Example - grouping and transforms

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 5 / 68 Drawing in the Browser (SVG, 3D) SVG Features

Colors: true color, , gradients, etc. Clipping, masking Filter effects Interactivity: user events Scripting, i.e. JavaScript, supports DOM : attributes, transforms, colors, motion (along paths) Raster images may be embedded (JPEG, GIF, ...)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 6 / 68 Drawing in the Browser (SVG, 3D) SVG Examples and Tutorials

Geoinformation systems: Yosemiti Further resources W3C SVG Reference MDN SVG Element Reference SVG Basics Tutorial SVG Tutorial

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 7 / 68 Drawing in the Browser (SVG, 3D) 3D in browser

Many less successful approaches in the past: VRML, Java3D Separate projects by , and others : Google, Mozilla, Apple, etc (120 members) WebGL: based on OpenGL ES 2.0 (OGL subset) Javascript interface to OpenGL Since OpenGL drivers are installed everywhere → browser native 3D without plugins WebGL uses for the graphics context

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 8 / 68 Drawing in the Browser (SVG, 3D) WebGL: examples

WebGL examples 22 Experimental WebGL Demo Examples Three.js : adds a layer incl. utilities Three.js examples Quake 2

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 9 / 68 Drawing in the Browser (SVG, 3D) WebGL

Good browser support by all browsers in the latest version (incl. mobile) 3D applications possible using WebGL and other HTML5 technologies support (except compute ) WebGL 2 (since 2017) based on OGL ES 3.0 Support only by Chrome, and Opera Further reading Learning WebGL WebGL Tutorial WebGL Fundamentals

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 10 / 68 Audio and Video Video and Audio

New elements for video and audio It works only if the format is compatible and if the codecs are integrated in the browser Format wars H.264 (MPEG-4 AVC) most commonly used video format covered by patents (MPEG LA) supported by (almost) all browser-platform combinations

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 11 / 68 Audio and Video Video and audio

Initially recommended format ( - video, - audio) Free and open protocols (Xiph.Org foundation) not supported by IE and Apple WebM avoids MPEG LA patents originaly VP8 - video, Vorbis - audio recently updated to VP9 - video, - audio Royalty-free, open video and audio for HTML5 Support by Google, Opera, Mozilla Partial support by Edge and

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 12 / 68 Audio and Video Video

Specify multiple sources in different formats, browser picks format Not advisable: browser detection - complicated, error prone (versions, platforms)

... ...

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 13 / 68 Audio and Video Video: further info and examples

As with any other element you can use Javascript to manipulate the element (script your own controls) You can use CSS to style videos, etc. Attributes: autoplay, controls, loop, muted, poster YouTube - browser support YouTube example

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 14 / 68 Audio and Video Audio

... ...

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 15 / 68 Audio and Video Audio: further info and examples

Similarly to video you can manipulate the audio element with Javascript and CSS JPlayer, JPlayer Audio Cross-platform, open source player library for HTML5 with Flash fallback, if video and audio tags not supported

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 16 / 68 Javascript APIs HTML5 and Javascript

HTML5 is not only markup but combination of markup, presentation (CSS3) and behavior (Javascript) New Javascript APIs Evolved in the last 10 years of the Web development Possibility to write Web Apps

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 17 / 68 Javascript APIs APIs

Geolocation: retrieve geographical location (subject to user approval) AppCache: specify which files to cache (available when offline) FileSystem API: access to a sandboxed file system Storage APIs: go far beyond what is possible with cookies , Web SQL, Indexed DB

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 18 / 68 Javascript APIs APIs

Web Workers: background running scripts WebSocket: bi-directional Drag & Drop History: API for manipulating browser history

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 19 / 68 Javascript APIs Geolocation

Collects all available location information WLAN, GSM, (mobile) Internet provider Retrieves the geographical coordinates latitude, longitude, accuracy (optionally: altitude, speed, heading) Forward that info to a Geo data provider, e.g. Applications, e.g. find local information

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 20 / 68 Javascript APIs Geolocation

Privacy concerns However, browsers typically ask for permissions Better protection of privacy then e.g. Example

if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(myPos) { ... } }

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 21 / 68 Javascript APIs AppCache

Standard browser cache unreliable AppCache: makes Web applications accessible offline Possibility to specify which files should (or should not) be cached Advantages Faster browsing as cached resources are served locally Reduced server and network load Offline browsing of the full site

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 22 / 68 Javascript APIs AppCache

To enable the cache for your application you need to specify manifest attribute in every HTML page you want to cache

...

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 23 / 68 Javascript APIs AppCache

In the manifest file you specify which files to cache

CACHE MANIFEST index.html stylesheet. images/logo.png scripts/main.js

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 24 / 68 Javascript APIs AppCache

CACHE MANIFEST CACHE: /. index.html stylesheet.css images/logo.png scripts/main.js NETWORK: login. /myapi http://api.twitter.com FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 25 / 68 Javascript APIs AppCache

Cached content will be shown until until one of the following happens Cache is cleared (user) Manifest file is changed on the server (comment change will do) Programatically via API check update is ready, swap cache, reload page Further Reading

var appCache = window.applicationCache; appCache.update(); ... if (appCache.status == window.applicationCache.UPDATEREADY) { appCache.swapCache(); window.location.reload(); }

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 26 / 68 Javascript APIs FileSystem API

Files and directories: creating, navigating, writing, reading, renaming, moving, deleting etc. Complex, powerful API As of today full support in Chrome and recently Opera Access to a sandboxed section of the user’s local file system Web apps cannot see each other files or the native file system

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 27 / 68 Javascript APIs FileSystem API

Access to a sandboxed file system: LocalFileSystem API LocalFileSystem asynchronous API (and LocalFileSystemSync synchronous API for WebWorkers) Implemented by Window (and WorkerGlobalScope) Create (TEMPORARY or PERSISTENT) storage of requested size

window.requestFileSystem(type, size, onInit, onError)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 28 / 68 Javascript APIs FileSystem API

Navigating directory structure DirectoryReader: read the entries in a directory FileEntry, DirectoryEntry: represents a file/directory, properties, manipulation (remove, copy, move...) Support by Chrome and Opera (W3C stopped standardization) Further reading: Exploring the FileSystem APIs

window.requestFileSystem(type, 1024, onInit(fs) { var dirReader = fs.root.createReader(); dirReader.readEntries(function(results) { ...

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 29 / 68 Javascript APIs File API

Reading and manipulating files FileList: sequence of selected Files File: represents a file and its properties retrieved from FileList, DataTransfer object (DnD), or FileEntry Blob: access to raw binary data FileReader: asynchronous reading of File/Blob For reading local files (e.g. uploding, creating thumbnails...) Creating and writing: FileWriter (FileEntry.createWriter()) For use with FileSystem API

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 30 / 68 Javascript APIs FileReader

FileReader allows you to read local files via JavaScript Support by all current browsers Single files, multiple files, Blobs (slices of binary files) All reading operations can be executed asynchronously read-Methods: readAsArrayBuffer/AsBinaryString/AsText/AsDataURL Callbacks: onabort, onerror, onloadstart, onload, onloadend, onprogress Further reading: Reading Files in JavaScript

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 31 / 68 Javascript APIs FileList/File

FileList returns File objects obtained by user selecting files using the input element (i.e. file upload) or from a drag and drop operation’s DataTransfer object With Javascript you can add additional client-side logic

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 32 / 68 Javascript APIs FileList/File

filtering files of type image.*

var files = evt.target.files; // FileList object for (var i = 0, f; f = files[i]; i++) { if (!f.type.match(’image.*’)) { continue; } ... }

Further reading: File API (W3C Specification)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 33 / 68 Javascript APIs Web Storage

Web Storage: simple key-value local data storage window.localStorage: persistent storage (no expiration date) Session-related data: sessionStorage object cleared on the tab close/browser shutdown Example

// store localStorage.setItem("myKey", "myValue"); // store console.log(localStorage.getItem("myKey")); // retrieve localStorage.removeItem("myKey"); // delete

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 34 / 68 Javascript APIs Web Storage

Replaces cookies Advantages better API, faster, more capacity more secure (no data transfer to server) excelent browser support (from IE8) Disadvantages no transactions, no indexing and searching not suitable for large data

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 35 / 68 Javascript APIs Web SQL

Web SQL: fully fledged relational database (incl. transactions) Future uncertain: W3C stopped specification development Partially supported: Chrome, Opera (previously Safari too) No support planned by IE, Edge and FireFox

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB db.transaction(function(tx) { tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback); });

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 36 / 68 Javascript APIs Indexed DB

Indexed DB is somewhere between Web SQL and Web Storage Key-value store for records (simple values and hierarchical objects) Indexing for faster searching Synchronous and asynchronous APIs Transaction support Support for larger data sets Lately very good browser support IE and Edge without full feature set

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 37 / 68 Javascript APIs Indexed DB

Create Object Stores Persist Javascript Objects in the store Multiple Indexes for querying (w/o SQL) Extensive and complex API (W3C Reference)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 38 / 68 Javascript APIs Web Workers

Javascript is a single threaded environment Prevented applications of being ported to the client side Porting to client side might improve performance and scalability Web workers bring threading to Javascript Spawn background threads in your Web applications UI remains responsive while processing runs in background Support by all browsers

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 39 / 68 Javascript APIs Web Workers Applications

(Large) data processing and number crunching Code syntax highlighting, spell checker Real-time text formatting Image filtering in Analyzing video or audio data Updating many rows of a local web database Background data fetching or polling of web services Prefetching and/or caching data for later use Processing large arrays or humongous JSON responses

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 40 / 68 Javascript APIs Web Workers

Spawn a worker:

var worker = new Worker(’doWork.js’); worker.postMessage(); // start

Stopping a worker:

worker.terminate(); // kill worker from main page

self.stop(); // from inside the worker

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 41 / 68 Javascript APIs Web Workers

Data communication between main thread and workers via messages Messages are copied by serialization (not shared): strings or JSON objects Background threads cannot modify the DOM Instead workers post messages to let their creator (main page) do this

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 42 / 68 Javascript APIs Web Workers

Worker script: task.js

self.addEventListener(’message’, function(e) { self.postMessage("Working..."); do something... self.postMessage(e.data); }, false);

Main script:

var worker = new Worker(’task.js’); worker.addEventListener(’message’, function(e) { console.log(’Worker replied: ’, e.data); }, false); worker.postMessage(’Hello’);

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 43 / 68 Javascript APIs Web Workers

Example 1: background processing Example 2: multiple workers Tutorial: WebWorkers Basics

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 44 / 68 Javascript APIs WebSocket

Request/response cycle of HTTP: client-initiated Long Polling: simulation of server-initiated connection : asynchronous HTTP requests Javascript callbacks when server ”initiates” connection Still the request needs to come from the client Polling strategy for data updates Client have to reconnect periodically High latency problems (HTTP overhead) Low latency apps impossible (multiplayer FPS)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 45 / 68 Javascript APIs WebSocket

WebSocket: bi-directional client-server communications Independent protocol over a TCP connection (”ws://...”) Secure connection (”wss://...”) HTTP compatible handshake process If successful: TCP connection remains open Message passing possible in both directions

var wsconnection = new WebSocket( ’wss://echo..org’); ... wsconnection.close()

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 46 / 68 Javascript APIs WebSocket

wsconnection.onopen = function () { connection.send(’Ping’); };

wsconnection.onerror = function (error) { console.log(’WebSocket Error ’ + error); };

wsconnection.onmessage = function (e) { console.log(’Server: ’ + e.data); };

wsconnection.onclose = function (e) { console.log(’Connection closed’); };

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 47 / 68 Javascript APIs WebSocket

Supported by all current browsers Cross origin communication possible Server side implementations available in Java, Python, .NET, Ruby etc. New usage pattern with many connections - problems for some servers

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 48 / 68 Javascript APIs WebSocket

Compatibility problems with organisation proxies Upgrade from HTTP to Web Socket protocoll during handshake to pass proxies Still, dropped connections by proxies and load balancers possible Fallback to AJAX may be necessary (supported by some libraries)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 49 / 68 Javascript APIs WebSocket Applications

Multiplayer online games Chat applications Live sports ticker Realtime updating social streams Example Further Reading

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 50 / 68 Javascript APIs Drag & Drop

Native browser drag & drop We need to define elements draggable (attribute)

A
DataTransfer object used to specify the data and type Handle events: ondragstart, ondragover, ondrop

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 51 / 68 Javascript APIs Drag & Drop

ondragstart: invoked when the drag is initiated DataTransfer.setData(mimeType, data) ondragover: specifies where the dragged data can be dropped to allow a drop prevent element default behaviour (DnD disabled): event.preventDefault() ondrop: invoked when the data is dropped append data into the target element Example

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 52 / 68 Javascript APIs History

History API for manipulating the browser history stack Extends windows.history.go()/back()/forward() History stack stores all that a user visited Clicks on that execute Javascript and update the page: history stack does not reflect this situation history.pushState and popstate manipulate the stack and recover a previous state Example

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 53 / 68 JavaScript Changes Ecma

JavaScript language is standardized by ECMA European Computer Manufacturers Association A lot of controversy about Javascript Adobe left the consortium and developed ActionScript The main reason: static types ECMA Script 5 (2011) and subsequent without static typing Previous version, ECMA Script 3 since, 1999 Current version ECMA Script 10 (2019)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 54 / 68 JavaScript Changes JavaScript Major Changes

JavaScript Strict mode JSON changes Arrays manipulation Further reading: New in ECMAScript 5

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 55 / 68 JavaScript Changes JavaScript v5 Major Changes

”use strict” directive at the beginning of the script to enable Strict mode: better error handling, disables poorly thought of features

Cannot use a variable without declaring it Cannot delete a variable, function or argument Cannot define a property more than once Cannot write a read-only property Cannot duplicate parameter names ... turn language design issues into outright errors not backwards compatible with ECMA Script 3

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 56 / 68 JavaScript Changes JSON Parsing

Previously JSON parsing with eval() function Executes any JS code within the script Slow and problems with security JSON.parse() converts a serialised JSON string to a JS object

var jsonstring="{’name’:’Maurer’}"; var obj = JSON.parse(jsonstring);

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 57 / 68 JavaScript Changes JSON Filtering and Transforming

JSON.parse(text[, reviver]) reviver: transformes the value before returning it If reviver() returns: a valid value, then member value will be replaced null or undefined, then the member is deleted

var cool=[’name’]; var jsonstring="{’name’:’Maurer’, ’address’:’Inffeldfasse’}"; var obj = JSON.parse(jsonstring, reviver); var reviver=function(key, value){ if(cool.indexOf(key) >= 0) return value; }

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 58 / 68 JavaScript Changes JSON Serialization

var jsonstring=JSON.stringify(obj[, replacer [, space]);

Writing out a JSON string replacer can be one of the two: function(key, value): transforming values array: values indicate names of the properties that will be included space: pretty printing (indenting)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 59 / 68 JavaScript Changes Array manipulation

New functions for searching and manipulation of arrays (previously tedious) indexOf() and lastIndexOf() for searching forEach() for iteration and performing an action every() and some() check elements on satisfying a condition Transformations: filter() returns a filtered array map() returns a modified array reduce() returns an accumulated result

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 60 / 68 JavaScript Changes Array manipulation

data = [0,1,2,1,3,2]; data.indexOf(2) // 2 data.lastIndexOf(1) // 3 data.indexOf(4) // -1

var sum = 0; data.forEach(function(value) { sum += value; }); // 9

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 61 / 68 JavaScript Changes Array manipulation

data = [10,25,50,90,5]; data.every(function(x) { return x < 100; }) // true data.every(function(x) { return x % 2 === 0; }) // false

data.filter(function(x) { return x < 50 }); // [10,25,5] data.map(function(x) { return 2*x; }); // [20,50,100,180,10];

data.reduce(function(x,y) { return (x>y)?x:y; }, 0) // 90

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 62 / 68 JavaScript Changes JavaScript v6 Major Changes

Support for classes, incl. constructors and inheritance Define modules and manage dependencies (import, export) Block scoping using let keyword Constants and more... Further reading: New in ECMAScript 6

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 63 / 68 JavaScript Changes HTML5 Demos and Resources

Learning W3C - HTML5 Introduction http://www.html5rocks.com/ MDN - HTML5 Guide http://html5doctor.com/ Browser compatibility http://caniuse.com/ ECMAScript 5 compatibility table Demos http://www.hongkiat.com/blog/48-excellent-html5-demos/ http://www.designer-daily.com/5-awesome-html5-demos-6715

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 64 / 68 JavaScript Changes CSS3

Changes in selectors but also in various properties Webfonts, text-wrapping, native support for columns Text strokes, opacity, different color models (HSV) Rounded corners, gradients, shadows, background, borders Transitions, transformations,

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 65 / 68 JavaScript Changes CSS3

Many changes are browser specific E.g. --transform, -moz-transform -ms-transform Prefixes should be droped as specification matures (CR status)

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 66 / 68 JavaScript Changes MathML

Language for inclusion of mathematical expressions in Web pages W3C MathML Previously only as images No interaction Interaction, presentation with Javascript and CSS

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 67 / 68 JavaScript Changes MathML

Language for inclusion of mathematical expressions in Web pages W3C MathML Previously only as images No interaction Interaction, presentation with Javascript and CSS Firefox native support Test suite Interaction example

Vedran Sabol (ISDS, TU Graz) HTML5 - Part II Nov 09, 2020 68 / 68