Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

This lecture forms part of the course Web Technologies given at the Vrije Universiteit Brussel.

Beat Signer

October 16, 2023
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

  1. 2 December 2005
    Web Technologies
    HTML5 and the Open Web Platform
    Prof. Beat Signer
    Department of Computer Science
    Vrije Universiteit Brussel
    beatsigner.com

    View full-size slide

  2. Beat Signer - Department of Computer Science - [email protected] 2
    October 17, 2023
    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 an HTML document (webpage)
    ▪ root element (), header (), body () and
    title ()
    ▪ headings (, ... ) and paragraphs ()
    ▪ tables (, and ) and lists (, and )
    ▪ images ()
    ▪ w3schools provides a detailed list of tags
    ▪ https://www.w3schools.com/tags/

    View full-size slide

  3. Beat Signer - Department of Computer Science - [email protected] 3
    October 17, 2023
    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

    View full-size slide

  4. Beat Signer - Department of Computer Science - [email protected] 4
    October 17, 2023
    HTML Example
    PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">


    Vrije Universiteit Brussel


    News
    Internationalisation was this year's theme of the academic opening
    of the Vrije Universiteit Brussel.

    The Vrije Universiteit Brussel will organise the new International
    Business Arbitration post-graduate course from the new academic year
    onwards.

    ...


    View full-size slide

  5. Beat Signer - Department of Computer Science - [email protected] 5
    October 17, 2023
    HTML DOM Example
    News
    html
    head body
    document
    title
    Vrije Univer ...
    h1 p p …

    a
    Internationa ...
    Vrije Uni ...
    href
    https:// ...
    document node
    element node
    attribute node
    text node
    root node

    View full-size slide

  6. Beat Signer - Department of Computer Science - [email protected] 6
    October 17, 2023
    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. element or color attribute
    - most elements now deprecated and cascading style sheets should be used

    View full-size slide

  7. Beat Signer - Department of Computer Science - [email protected] 7
    October 17, 2023
    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

    View full-size slide

  8. Beat Signer - Department of Computer Science - [email protected] 8
    October 17, 2023
    History of HTML ...
    ▪ In 2006 the W3C decided to work on HTML again
    ▪ based on WHATWG's Web Applications specification
    ▪ HTML5 specification was developed simultaneously by
    the WHATWG and the W3C until 2019
    ▪ HTML - Living Standard, WHATWG
    ▪ HTML5 - A Vocabulary and Associated APIs for HTML and
    XHTML
    ▪ Since 2019 HTML - Living Standard is the only standard
    ▪ developed by WHATWG and W3C

    View full-size slide

  9. Beat Signer - Department of Computer Science - [email protected] 9
    October 17, 2023
    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?

    View full-size slide

  10. Beat Signer - Department of Computer Science - [email protected] 10
    October 17, 2023
    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
    "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    Vrije Universiteit Brussel


    ...


    View full-size slide

  11. Beat Signer - Department of Computer Science - [email protected] 11
    October 17, 2023
    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

    View full-size slide

  12. Beat Signer - Department of Computer Science - [email protected] 12
    October 17, 2023
    HTML5 Design Principles
    ▪ Compatibility
    ▪ evolve the language (backward compatibility)
    ▪ 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

    View full-size slide

  13. Beat Signer - Department of Computer Science - [email protected] 13
    October 17, 2023
    HTML5 Design Principles ...
    ▪ Simple is better
    ▪ new doctype:
    ▪ 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 might crash
    ▪ ...

    View full-size slide

  14. Beat Signer - Department of Computer Science - [email protected] 14
    October 17, 2023
    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
    Drag
    and
    Drop
    Web
    Workers
    Micro
    data
    Web
    Storage
    HTML+
    RDFa
    XmlHTTP
    Request
    File API
    Media
    Capure
    Indexed
    Database
    Contacts
    API
    Screen
    Orientation
    Timing
    Control
    Touch
    Events
    Geo
    Location
    RDFa
    Web Open
    Font
    Navigation
    Timing
    Selectors
    L1
    SVG
    MathML
    3.0
    CSS3
    Battery
    Status
    API
    Fullscreen
    JavaScript
    WebGL
    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

    View full-size slide

  15. Beat Signer - Department of Computer Science - [email protected] 15
    October 17, 2023
    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
    https://www.devsaran.com/blog/10-best-programming-languages-2020-you-should-know
    Most Popular Programming Languages of 2020

    View full-size slide

  16. Beat Signer - Department of Computer Science - [email protected] 16
    October 17, 2023
    Browser Performance

    View full-size slide

  17. Beat Signer - Department of Computer Science - [email protected] 17
    October 17, 2023
    Web Browsers (1990–2022)
    https://en.wikipedia.org/wiki/File:Timeline_of_web_browsers.svg
    Internet Explorer
    Mozilla
    Gecko Engine
    Trident Engine
    Firefox
    WebKit Engine
    Safari
    Chrome

    View full-size slide

  18. Beat Signer - Department of Computer Science - [email protected] 18
    October 17, 2023
    HTML Markup
    ▪ Some elements have been added
    ▪ structural elements such as , , ,
    or
    ▪ media elements including , or
    ▪ a drawing element
    ▪ Other elements have been removed
    ▪ , , , , , ...
    ▪ New form functionality (originally Web Forms 2.0)
    ▪ form elements such as or
    ▪ input types such as date, color, email, tel, range, ...
    ▪ native functionality for client-side validation (without scripting)
    W3C Recommendation

    View full-size slide

  19. Beat Signer - Department of Computer Science - [email protected] 19
    October 17, 2023
    HTML Forms

    View full-size slide

  20. Beat Signer - Department of Computer Science - [email protected] 20
    October 17, 2023
    HTML Forms ...



    ...



    Name (required)
    Title
    Shoesize
    Email (required)
    Webpage
    Date of Birth





    View full-size slide

  21. Beat Signer - Department of Computer Science - [email protected] 21
    October 17, 2023
    HTML Forms ...



    ...



    Course











    View full-size slide

  22. Beat Signer - Department of Computer Science - [email protected] 22
    October 17, 2023
    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

    View full-size slide

  23. Beat Signer - Department of Computer Science - [email protected] 23
    October 17, 2023
    HTML Links
    ▪ Only unidirectional embedded links are supported
    ▪ Linking to parts of another document
    ▪ only possible if we can add id attributes



    ...


    VUB
    VUB
    Contact us
    Email John
    Introduction page (identified via an id attribute with the corresponding name) -->


    View full-size slide

  24. Beat Signer - Department of Computer Science - [email protected] 24
    October 17, 2023
    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) 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


    The video tag is not supported by your browser!

    W3C Recommendation

    View full-size slide

  25. Beat Signer - Department of Computer Science - [email protected] 25
    October 17, 2023
    Audio
    ▪ element can be used to play audio
    in HTML pages
    ▪ element has methods, properties and events


    The audio tag is not supported by your browser!

    W3C Recommendation

    View full-size slide

  26. Beat Signer - Department of Computer Science - [email protected] 26
    October 17, 2023
    Canvas 2D
    ▪ 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

    The canvas tag is not supported by your browser!

    <br/>var canvas = document.getElementById("drawingArea");<br/>var context = canvas.getContext("2d");<br/>context.fillStyle = "#0000FF";<br/>context.fillRect(50,50,100,50);<br/>context.moveTo(0,0);<br/>context.lineTo(200,200);<br/>context.stroke();<br/>
    W3C Recommendation

    View full-size slide

  27. Beat Signer - Department of Computer Science - [email protected] 27
    October 17, 2023
    HTML5 Canvas and JavaScript Demo

    View full-size slide

  28. Beat Signer - Department of Computer Science - [email protected] 28
    October 17, 2023
    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 Recommendation


    ...






    View full-size slide

  29. Beat Signer - Department of Computer Science - [email protected] 29
    October 17, 2023
    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

    View full-size slide

  30. Beat Signer - Department of Computer Science - [email protected] 30
    October 17, 2023
    ZygoteBody (WebGL) (Video)

    View full-size slide

  31. Beat Signer - Department of Computer Science - [email protected] 31
    October 17, 2023
    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 Recommendation
    <br/>if (localStorage.counter) {<br/>localStorage.counter = Number(localStorage.counter) + 1;<br/>}<br/>else {<br/>localStorage.counter = 1;<br/>}<br/>document.write("Total of " + localStorage.counter + " visits");<br/>

    View full-size slide

  32. Beat Signer - Department of Computer Science - [email protected] 32
    October 17, 2023
    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 dragged and dropped from the
    desktop to the browser
    W3C Recommendation

    View full-size slide

  33. Beat Signer - Department of Computer Science - [email protected] 33
    October 17, 2023
    Drag and Drop ...



    // style sheet information for the div elements
    <br/>function drag(event) {<br/>event.dataTransfer.setData("text/plain", event.target.id);<br/>}<br/>function drop(event) {<br/>event.preventDefault(); // avoid default behaviour of opening as link<br/>var data=event.dataTransfer.getData("text/plain");<br/>event.target.appendChild(document.getElementById(data));<br/>}<br/>function allowDrop(event) {<br/>event.preventDefault();<br/>}<br/>

    W3C Recommendation

    View full-size slide

  34. Beat Signer - Department of Computer Science - [email protected] 34
    October 17, 2023
    Drag and Drop ...






    View full-size slide

  35. Beat Signer - Department of Computer Science - [email protected] 35
    October 17, 2023
    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 Working Draft
    <br/>var worker = new Worker("myScript.js");<br/>worker.onmessage = function(event) {<br/>alert("The worker received this: " + event.data);<br/>// web worker sends a message back<br/>postMessage("I got your call and will work on it");<br/>...<br/>};<br/>

    View full-size slide

  36. Beat Signer - Department of Computer Science - [email protected] 36
    October 17, 2023
    Web Workers ...
    ▪ Note that Web Workers have no access to
    window.document (web page or DOM API)
    ▪ "clean up" Web Workers via terminate() method
    // add a listener to receive messages from the web worker
    worker.addEventListener("message", handle, false);
    function handle(e) {
    // process message from the web worker
    }
    worker.postMessage("Hello worker!");

    W3C Working Draft

    View full-size slide

  37. Beat Signer - Department of Computer Science - [email protected] 37
    October 17, 2023
    WebSocket 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 Candidate Recommendation

    View full-size slide

  38. Beat Signer - Department of Computer Science - [email protected] 38
    October 17, 2023
    WebSocket API ...
    <br/>var socket = new WebSocket("ws://chat-server.com");<br/>socket.onopen = function(e) { alert("Opened connection ..."); };<br/>socket.onmessage = function(e) {<br/>var message = JSON.parse(e.data));<br/>alert("Message received.");<br/>...<br/>};<br/>socket.onclose = function(e) { alert("Closed connection."); };<br/>socket.onerror = function(e) { alert("WebSocket Error" + e); };<br/>socket.send("Hellow World");<br/>// connection stays open and server can send multiple things<br/>...<br/>socket.close();<br/>
    W3C Candidate Recommendation

    View full-size slide

  39. Beat Signer - Department of Computer Science - [email protected] 39
    October 17, 2023
    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 Recommendation

    View full-size slide

  40. Beat Signer - Department of Computer Science - [email protected] 40
    October 17, 2023
    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 Recommendation

    View full-size slide

  41. Beat Signer - Department of Computer Science - [email protected] 41
    October 17, 2023
    Geolocation Example: Google Maps

    View full-size slide

  42. Beat Signer - Department of Computer Science - [email protected] 42
    October 17, 2023
    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 Working Group Note

    ...
    CACHE MANIFEST
    CACHE:
    index.html
    default.js
    NETWORK:
    dynamic.js
    FALLBACK:
    time.js fallback-time.js
    #version 3

    View full-size slide

  43. Beat Signer - Department of Computer Science - [email protected] 43
    October 17, 2023
    Fullscreen API
    ▪ Can be used to show elements in fullscreen mode
    ▪ requestFullscreen() and exitFullScreen()
    W3C Working Group Note



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

    View full-size slide

  44. Beat Signer - Department of Computer Science - [email protected] 44
    October 17, 2023
    Screen Orientation API
    ▪ Provides access to the orientation of the screen
    ▪ portrait-primary, portrait-secondary,
    landscape-primary or landscape-secondary
    W3C Working Draft
    // 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();

    View full-size slide

  45. Beat Signer - Department of Computer Science - [email protected] 45
    October 17, 2023
    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 Recommendation
    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();
    }
    }

    View full-size slide

  46. Beat Signer - Department of Computer Science - [email protected] 46
    October 17, 2023
    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 Candidate Recommendation
    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() {
    ...
    }

    View full-size slide

  47. Beat Signer - Department of Computer Science - [email protected] 47
    October 17, 2023
    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 Recommendation
    // 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);

    View full-size slide

  48. Beat Signer - Department of Computer Science - [email protected] 48
    October 17, 2023
    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 Recommendation
    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);

    View full-size slide

  49. Beat Signer - Department of Computer Science - [email protected] 49
    October 17, 2023
    Example: Multiplayer Port of Quake II
    ▪ Google's browser port of Quake II uses
    ▪ canvas and WebGL
    ▪ for sound
    ▪ for in-game videos
    ▪ Web Sockets for communication with the server (other players)
    ▪ Local Storage for managing preferences and saved games

    View full-size slide

  50. Beat Signer - Department of Computer Science - [email protected] 50
    October 17, 2023
    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.

    View full-size slide

  51. Beat Signer - Department of Computer Science - [email protected] 51
    October 17, 2023
    Other HTML5 Features …
    ▪ Note that some other HTML5 features are
    introduced later in the course
    ▪ Microdata
    ▪ …

    View full-size slide

  52. Beat Signer - Department of Computer Science - [email protected] 52
    October 17, 2023
    Exercise 4
    ▪ HTML5 and the Open Web Platform

    View full-size slide

  53. Beat Signer - Department of Computer Science - [email protected] 53
    October 17, 2023
    References
    ▪ Mark Pilgrim, HTML5: Up and Running –
    Dive Into the Future of Web Development,
    O'Reilly Media, August 2010
    ISBN-13: 978-0596806026
    ▪ HTML - Living Standard
    ▪ https://html.spec.whatwg.org/multipage/
    ▪ HTML Design Principles, W3C Working Draft
    ▪ https://www.w3.org/TR/html-design-principles/
    ▪ HTML Tutorial
    ▪ https://www.w3schools.com/html/

    View full-size slide

  54. Beat Signer - Department of Computer Science - [email protected] 54
    October 17, 2023
    References ...
    ▪ 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) 2,
    W3C Recommendation
    ▪ https://www.w3.org/TR/SVG2/
    ▪ Andy Harris, Core HTML (refcardz #64)
    ▪ https://dzone.com/refcardz/core-html

    View full-size slide

  55. Beat Signer - Department of Computer Science - [email protected] 55
    October 17, 2023
    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

    View full-size slide

  56. Beat Signer - Department of Computer Science - [email protected] 56
    October 17, 2023
    References ...
    ▪ ZygoteBody
    ▪ https://www.youtube.com/watch?v=_n2Us7oGmRA
    ▪ Gerard Gallant, HTML5 Web Workers:
    Multithreaded JavaScript for High-Performance Web
    Apps (refcardz #177)
    ▪ https://dzone.com/refcardz/html5-web-workers
    ▪ Web Sockets API
    ▪ https://websockets.spec.whatwg.org/
    ▪ Geolocation API, W3C Recommendation
    ▪ https://www.w3.org/TR/geolocation/

    View full-size slide

  57. Beat Signer - Department of Computer Science - [email protected] 57
    October 17, 2023
    References ...
    ▪ 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-2/
    ▪ Battery Status API, W3C Working Draft
    Recommendation
    ▪ https://www.w3.org/TR/battery-status/
    ▪ Vibration API, W3C Recommendation
    ▪ https://www.w3.org/TR/vibration/

    View full-size slide

  58. 2 December 2005
    Next Lecture
    CSS3 and Responsive Web Design

    View full-size slide