The Open Web Technology Stack

Web History

We've got time machine. Let's back to the past

Facebook

https://web.archive.org/web/20051127012934/http://www.facebook.com/

Google

https://web.archive.org/web/20051001005750/http://www.google.com/

Youtube

https://web.archive.org/web/20051001010728/http://youtube.com/

HTML5 API

Ajax ~~HTML5~~

The term "Ajax" was publicly stated on 18 February 2005 by Jesse James Garrett in an article titled "Ajax: A New Approach to Web Applications", based on techniques used on Google pages.[3]

On 5 April 2006, the World Wide Web Consortium (W3C) released the first draft specification for the XMLHttpRequest object in an attempt to create an official Web standard.[11][12] The latest draft of the XMLHttpRequest object was published on 30 January 2014.

https://en.wikipedia.org/wiki/Ajax_(programming)

Canvas
Timed Media Playback
Offline
Editable content
Drag-and-drop
History
MIME type and protocol handler registration
Microdata
Web Messaging
Web Storage
Geolocation

Web SQL Database
IndexedDB
File
Directories and System
File Writer
Web Audio
ClassList
Web Cryptography
WebRTC

Web APIs

Some are in W3C spec, some are not.

More Advanced: https://developer.mozilla.org/en-US/docs/Web/API

Canvas

Canvas Library

http://phaser.io (Phaser)
e.g https://ramorris3.github.io/minor-miner/
https://www.scirra.com/construct2/ (Construct 2)
e.g https://www.scirra.com/construct2/games
http://www.cocos2d-x.org/ Cocos2d-x
e.g http://www.dachu-x.org/help-beetle-home/

Game Engine

Canvas 2D

More at https://html5gameengine.com/tag/2d

Canvas3D / WebGL

http://threejs.org/ (ThreeJS)
e.g http://pablotheflamingo.com/
http://www.babylonjs.com (BabylonJS)
e.g https://xboxdesignlab.xbox.com/en-US/customize

Canvas Library

https://playcanvas.com/ (PlayCanvas)
e.g https://playcanv.as/p/JtL2iqIH/
BabylonJS
e.g http://www.babylonjs.com/Demos/Distraction/distraction.html

Game Engine

Web Graphic Library

Microdata Schema

http://schema.org/

Websocket Protocol

WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

WebRTC

WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs. The WebRTC components have been optimized to best serve this purpose.

e.g https://webtorrent.io/

HTML5.1/5.2

https://w3c.github.io/html/

<section>
  <h2>Task Progress</h2>
  <p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

  <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
  </script>
</section>

<meter>

<h3>Suggested groups</h3>
<menu type="toolbar">
  <a href="...">Hide suggested groups</a>
</menu>
<ul>
  <li>
  <p><a href="...">comp.infosystems.www.authoring.stylesheets</a> - <a href="...">join</a></p>
  <p>Group description: <strong>Layout/presentation on the WWW.</strong></p>
  <p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p>
  </li>
</ul>

<menu>

<menu id="filemenu" type="context">
    <menuitem onclick="fnew()" label="New...">
    <menuitem onclick="fopen()" label="Open...">
    <menuitem onclick="fsave()" label="Save">
    <menuitem onclick="fsaveas()" label="Save as...">
  </menu>