1. A more Flash like web?

2. Murat Can ALPAY
linkedin.com/in/mcalpay
mcatr.blogspot.com

3. ● What to present?
● HTML5?
● Software Dev.?

4. VS?
● A fair comparison?

5. Content
● History
● JavaScript
● Canvas
● Audio
● WebSocket
● Offline

6. Why a new HTML?
● games?
● video?
● 3d?
● ...
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

7. HTML5 Chronology
● 2004
○ WHATWG (Apple, Mozilla, Opera)
● 2006
○ W3C XHTML
● 2008
○ First release
○ Firefox 3, and others
● 2010
○ Steve Jobs vs Flash
● 2014
○ Final
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

8. W3C (HTML5 Chronology)
● XHTML 2.0
○ No Backward Compability!
○ Strictly XML
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

9. WHAT WG
● 2004 W3C Workshop
● Backward Compatible
● Detailed Spec.
○ Non Strict HTML Parser
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

10. “The Web is, and should be, driven by technical merit, not consensus. The
W3C pretends otherwise, and wastes a lot of time for it. The WHATWG
does not.” – Ian Hickson
Benevolent Dictator for Life
<time> incidence
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

11. Jobs vs Adobe
● November 2011
○ Adobe: No Flash for Mobil and TV
http://en.wikipedia.org/wiki/Adobe_Flash

12. HTML5 Today
● Youtube HTML5 test
○ http://www.youtube.com/html5
● Mobile
○ Amazon

13. HTML5 Browser Support

14. JavaScript ?
● Minecraft
● Quake 3
● Cut the rope
JS

15. Minecraft in JS
JS

16. Quake in JS
http://media.tojicode.com/q3bsp/
JS

17. Cut The Rope
http://www.cuttherope.ie/dev/
● Performance
○ 37 - 62 FPS
JS

18. JavaScript ?
for(i = 1; i <= 3; i++) {
print();
}
function print() {
for(i = 1; i <= 3; i++) {
console.log(i);
}
}
JS

19. JavaScript ? (var)
for(var i = 1; i <= 3; i++) {
print();
}
function print() {
for(i = 1; i <= 3; i++) {
console.log(i);
}
}
JS

20. JavaScript ? ( ?, var)
for(i = 1; i <= 3; i++) {
print();
}
function print() {
for(var i = 1; i <= 3; i++) {
console.log(i);
}
}
JS

21. JavaScript ? (var, var)
for(var i = 1; i <= 3; i++) {
print();
}
function print() {
for(var i = 1; i <= 3; i++) {
console.log(i);
}
}
JS

22. JavaScript ? (Tools)
● Chrome
○ Developer Tools
● Ant Scripts
JS

23. Canvas
● Low level graphics lib.
● 2D
● 3D
○ WebGL
○ Three.js

24. Canvas (Context)
<canvas id="canvas" width="800px" height="600px"/>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

25. Canvas (Rectangle)
ctx.fillStyle = "red";
ctx.fillRect(50,50,400,300);

26. Canvas (State)
for(var i=0; i<data.length; i++) {
ctx.save();
ctx.translate(40+i*100, 460-dp*4);
var dp = data[i];
ctx.fillRect(0,0,50,dp*4);
ctx.restore();
}

27. Canvas (Gradient)
var grad = ctx.createLinearGradient(0, 0, 800, 600);
grad.addColorStop(0, "red");
grad.addColorStop(1, "yellow");
ctx.fillStyle = grad;

28. Canvas (Path)
ctx.beginPath();
...
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3)
ctx.closePath();

29. Canvas (Image)
var spaceImg = new Image();
spaceImg.src = 'space.png';
ctx.drawImage(spaceImg, 0, 0);

30. Canvas (Edit an Image)
var img = new Image();
img.onload = function() {
ctx.drawImage(img,0,0);
var data =
ctx.getImageData(0,0,
canvas.width,canvas.height);
...
ctx.putImageData(data,0,0);
}
img.src = "space.png";

31. Canvas (Text)
ctx.fillStyle = "white";
ctx.font = 16 + "pt Arial ";
ctx.fillText("fps :" + Math.floor(1000 / diffTime), 10,
20);

32. Canvas (Mouse Events)
canvas.addEventListener('mousemove', onMousemove, false);
canvas.addEventListener('mousedown', onMouseclick, false);
function onMousemove(ev) {
var x, y;
if (ev.layerX || ev.layerX == 0) { // Firefox
x = ev.layerX;
y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX;
y = ev.offsetY;
}
}

33. Canvas (Animation)
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
window.requestAnimFrame(drawIt);

34. Audio
● 3D Positional Audio

35. Audio (Basic)
var actx = new window.webkitAudioContext();
var request = new XMLHttpRequest();
request.open('GET', '/blast.wav', true);
request.responseType = 'arraybuffer';
request.onload = function (ev) {
actx.decodeAudioData(ev.target.response, function (buffer){
var source = actx.createBufferSource();
source.buffer = buffer;
source.connect(actx.destination);
source.noteOn(0);
});
};
request.send();

36. Audio (Gain)
function playSource(buffer, gainVol, loop) {
var gnode = actx.createGainNode();
var source = actx.createBufferSource();
source.loop = loop;
source.buffer = buffer;
source.connect(gnode);
gnode.connect(actx.destination);
gnode.gain.value = gainVol;
source.noteOn(0);
}

37. Audio (AudioPannerNode)
function playPositionalSource(holder, src, dest) {
var gnode = actx.createGainNode();
var source = actx.createBufferSource();
source.buffer = holder.src;
var panner = actx.createPanner();
panner.setPosition(src.x / 800, src.y / 600, 0);
panner.connect(gnode);
gnode.connect(actx.destination);
source.connect(panner);
actx.listener.setPosition(dest.x / 800, dest.y / 600, 0);
gnode.gain.value = holder.gain;
source.noteOn(0);
}

38. WebSocket
● Simple API
● No HTTP Headers
● Needs ports
● Server support

39. WebSocket (Callbacks)
var connection = new WebSocket('ws://localhost:8080/play', ['text']);
connection.onopen = function () {
...
}
connection.onerror = function (error) {
console.log('WebSocket Error ' + error);
}
connection.onmessage = function (e) {
var jo = JSON.parse(e.data);
...
}

40. WebSocket (Send)
function send(msg) {
if(connection.readyState == 1) {
connection.send(msg)
}
}

41. WebSocket (Jetty)
"Don't deploy your app. to Jetty, Deploy Jetty to your app."

42. WebSocket (WebSocketServlet)
import org.eclipse.jetty.websocket.WebSocketServlet
public class WSGameServlet extends WebSocketServlet {
...
@Override
public WebSocket doWebSocketConnect(HttpServletRequest req,
String protocol) {
return new GameSocket(createNewPlayer(req), world);
}
}

43. WebSocket (WebSocket onOpen)
import org.eclipse.jetty.websocket.WebSocket
public class GameSocket implements WebSocket,
WebSocket.OnTextMessage {
...
@Override
public void onOpen(Connection connection) {
this.connection = connection;
world.addSocket(this);
}
}

44. WebSocket (WebSocket onClose)
import org.eclipse.jetty.websocket.WebSocket
public class GameSocket implements WebSocket,
WebSocket.OnTextMessage {
...
@Override
public void onClose(int closeCode, String msg) {
world.removeSocket(this);
world.removePlayer(avatar.getId());
}
}

45. WebSocket (WebSocket onMessage)
import org.eclipse.jetty.websocket.WebSocket
public class GameSocket implements WebSocket,
WebSocket.OnTextMessage {
...
public void onMessage(String msg) {
try {
Map<String, String> attMap = getAttributeMap(msg);
String pathInfo = attMap.get("path");
if ("static".equals(pathInfo)) {
connection.sendMessage("static/" + staticGameMap);
} else if ("text".equals(pathInfo)) {
...
}
}

46. WebSocket (sockets)
public class AxeWorld extends TimerTask implements World {
...
public final Set<GameSocket> sockets;
@Override public void addSocket(GameSocket gameSocket)...
@Override public void removeSocket(GameSocket gameSocket)...
@Override
public void run() {...
for (GameSocket gs : sockets) {
gs.sendMessage(msg);
...

47. 3D
● WebGL
○ experimental
● Three.js

48. 3D (Three.js)
● https://github.com/mrdoob/three.js
● High level
● Renderers
○ Canvas
○ WebGL
○ SVG

49. 3D (Three.js)
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth /
window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
geometry = new THREE.CubeGeometry( 200, 200, 200 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000,
wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
https://github.com/mrdoob/three.js

50. 3D (Three.js)
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
https://github.com/mrdoob/three.js

51. 3D (Three.js)

52. Storage
● Local
● Session
● Database

53. Storage (Local Storage)
● Cookies
○ 4KB
○ HTTP Headers
● 5 MB key/value

54. Storage (Local Storage)
localStorage.commands = JSON.stringify(commands);
if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};

55. Storage (Session Storage)
● for a session
● sessionStorage

56. Storage (Database Storage)
● 5 MB and more
● Web SQL Database

57. Storage (IndexDB)
● Not yet

58. Application Cache
● Old Way Directives
● New Way Manifest

59. ApplicationCache (Cache Directives)
● HTTP

60. Application Cache (Manifest)
● Cache what?
● mime-type : text/cache-manifest
● CACHE, NETWORK, FALLBACK

61. Manifest
<!DOCTYPE html>
<html manifest="cache.mf">
<head>...

62. Manifest (CACHE)
CACHE MANIFEST
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://www.html5rocks.com

63. Manifest (NETWORK)
# online:
NETWORK:
login.php
/myapi
http://api.twitter.com
http://www.html5rocks.com

64. Manifest (FALLBACK)
# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in
images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html
http://www.html5rocks.com

65. Demo

66. Thanks
● Mert Çalışkan
● Çağatay Çivici
● Barış Bal

67. Murat Can ALPAY
linkedin.com/in/mcalpay
mcatr.blogspot.com