A More Flash Like Web?

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

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

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

Why a new HTML?

● games?
● video?
● 3d?
● ...

http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

HTML5 Chronology
● 2004
○ WHATWG (Apple, Mozilla, Opera)
● 2006
○ W3C XHTML
● 2008
○ First release
○ Firefox 3, and others
● 2010
○ Steve Jobs vs Flash
● 2014
○ Final


W3C (HTML5 Chronology)
● XHTML 2.0
○ No Backward Compability!
○ Strictly XML


WHAT WG
● 2004 W3C Workshop
● Backward Compatible
● Detailed Spec.
○ Non Strict HTML Parser


“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


Jobs vs Adobe
● November 2011
○ Adobe: No Flash for Mobil and TV

http://en.wikipedia.org/wiki/Adobe_Flash

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

● Mobile
○ Amazon

JavaScript ?
● Minecraft
● Quake 3
● Cut the rope

JS

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

JS

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

JS

JavaScript ?
for(i = 1; i <= 3; i++) {
print();
}

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

JS

JavaScript ? (var)
for(var i = 1; i <= 3; i++) {
print();
}

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

JS

JavaScript ? ( ?, var)
for(i = 1; i <= 3; i++) {
print();
}

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

JS

JavaScript ? (var, var)
for(var i = 1; i <= 3; i++) {
print();
}

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

JS

JavaScript ? (Tools)
● Chrome
○ Developer Tools

● Ant Scripts

JS

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

Canvas (Context)
<canvas id="canvas" width="800px" height="600px"/>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

Canvas (Rectangle)

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

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

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

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

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

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";

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

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

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

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

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

Audio (AudioPannerNode)
function playPositionalSource(holder, src, dest) {
var gnode = actx.createGainNode();
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);
}

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

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

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

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

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

}

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

}

WebSocket (WebSocket onClose)

...
@Override
public void onClose(int closeCode, String msg) {
world.removeSocket(this);
world.removePlayer(avatar.getId());
}

}

WebSocket (WebSocket onMessage)

...
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)) {
...
}
}

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);
...

3D
● WebGL
○ experimental

● Three.js

3D (Three.js)

● https://github.com/mrdoob/three.js
● High level
● Renderers
○ Canvas
○ WebGL
○ SVG

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

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

Storage
● Local

● Session

● Database

Storage (Local Storage)
● Cookies
○ 4KB
○ HTTP Headers

● 5 MB key/value

Storage (Local Storage)
localStorage.commands = JSON.stringify(commands);

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};

Storage (Session Storage)
● for a session

● sessionStorage

Storage (Database Storage)

● 5 MB and more

● Web SQL Database

Application Cache
● Old Way Directives

● New Way Manifest

ApplicationCache (Cache Directives)
● HTTP

Application Cache (Manifest)
● Cache what?

● mime-type : text/cache-manifest

● CACHE, NETWORK, FALLBACK

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

Manifest (CACHE)
CACHE MANIFEST

CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

http://www.html5rocks.com

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


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


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

A More Flash Like Web?

Related slideshows

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to A More Flash Like Web?

Similar to A More Flash Like Web? (20)

Recently uploaded

Recently uploaded (20)

A More Flash Like Web?