1.
Daha Flash bir web?

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

3.
● Ne sunulacak?
● HTML5 mi?
● Yazılım projeleri mi?

4.
VS?
● Adil mi?

5.
İçerik
● Tarih
● JavaScript
● Canvas
● Audio
● WebSocket
● Offline

6.
Neden yeni bir HTML sürümü?
● oyun geliştirilmesi için mi?
● video için mi?
● 3d için mi?
● ...
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

7.
HTML5 Tarihi
● 2004
○ WHATWG (Apple, Mozilla, Opera)
● 2006
○ W3C XHTML
● 2008
○ İlk versiyon
○ Firefox 3, sonra diğerleri
● 2010
○ Steve Jobs, Flash Andıçı
● 2014
○ Final
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

8.
W3C (HTML5 Tarihi)
● 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> olayı
http://net.tutsplus.com/articles/general/a-brief-history-of-html5/

11.
Jobs vs Adobe
● Kasım 2011
○ Adobe: Mobil ve TV için Flash olmayacak
http://en.wikipedia.org/wiki/Adobe_Flash

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

13.
HTML5 Tarayıcı Desteği

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

15.
Minecraft in JS
● Orjinal MC 17.5 Milyon sattı
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
● Alt seviye çizim kütüphanesi
● 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
● Basit API
● Fazladan Başlık Bilgisi Yok
● Soket / Port Gerek
● Sunucu Desteği

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.
Demo

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

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

50.
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

51.
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

52.
3D (Three.js)

53.
Storage
● Local
● Session
● Database

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

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

56.
Storage (Session Storage)
● Oturum için
● sessionStorage

57.
Storage (Database Storage)
● 5 MB'den fazlası
● Web SQL Database

58.
Storage (IndexDB)
● Not yet

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

60.
ApplicationCache (Cache Directives)
● HTTP

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

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

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

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

65.
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

66.
Demo

67.
Teşekkürler
● Mert Çalışkan
● Çağatay Çivici
● Barış Bal

68.
Murat Can ALPAY
linkedin.com/in/mcalpay
mcatr.blogspot.com
Bir saattir, Riv Riv Riv