A More Flash Like Web?
Upcoming SlideShare
Loading in...5
×
 

A More Flash Like Web?

on

  • 1,151 views

 

Statistics

Views

Total Views
1,151
Views on SlideShare
666
Embed Views
485

Actions

Likes
0
Downloads
3
Comments
0

25 Embeds 485

http://mcatr.blogspot.com 324
http://mcatr.blogspot.com.tr 44
http://mcatr.blogspot.ru 19
http://mcatr.blogspot.in 13
http://mcatr.blogspot.co.uk 13
http://mcatr.blogspot.com.es 11
http://mcatr.blogspot.ch 11
http://mcatr.blogspot.de 9
http://mcatr.blogspot.fr 7
http://mcatr.blogspot.ro 4
http://mcatr.blogspot.com.br 4
http://www.linkedin.com 3
http://mcatr.blogspot.co.nz 3
http://mcatr.blogspot.ca 3
http://mcatr.blogspot.co.il 3
http://mcatr.blogspot.cz 2
http://mcatr.blogspot.com.ar 2
http://mcatr.blogspot.jp 2
http://mcatr.blogspot.kr 2
http://mcatr.blogspot.nl 1
http://mcatr.blogspot.tw 1
http://mcatr.blogspot.it 1
http://mcatr.blogspot.fi 1
http://mcatr.blogspot.sg 1
http://mcatr.blogspot.pt 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

A More Flash Like Web? A More Flash Like Web? Presentation Transcript

  • A more Flash like web?
  • Murat Can ALPAYlinkedin.com/in/mcalpaymcatr.blogspot.com
  • ● What to present?● HTML5?● Software Dev.?
  • VS?● A fair comparison?
  • 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 ○ Finalhttp://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  • W3C (HTML5 Chronology) ● XHTML 2.0 ○ No Backward Compability! ○ Strictly XMLhttp://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  • WHAT WG ● 2004 W3C Workshop ● Backward Compatible ● Detailed Spec. ○ Non Strict HTML Parserhttp://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  • “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> incidencehttp://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  • Jobs vs Adobe ● November 2011 ○ Adobe: No Flash for Mobil and TVhttp://en.wikipedia.org/wiki/Adobe_Flash
  • HTML5 Today● Youtube HTML5 test ○ http://www.youtube.com/html5● Mobile ○ Amazon
  • HTML5 Browser Support
  • JavaScript ?● Minecraft● Quake 3● Cut the rope JS
  • Minecraft in JS JS
  • Quake in JShttp://media.tojicode.com/q3bsp/ JS
  • Cut The Ropehttp://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● 3D Positional Audio
  • 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(); var source = actx.createBufferSource(); 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(); 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);}
  • 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)"Dont deploy your app. to Jetty, Deploy Jetty to your app."
  • WebSocket (WebSocketServlet)import org.eclipse.jetty.websocket.WebSocketServletpublic 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.WebSocketpublic class GameSocket implements WebSocket, WebSocket.OnTextMessage {... @Override public void onOpen(Connection connection) { this.connection = connection; world.addSocket(this); }}
  • WebSocket (WebSocket onClose)import org.eclipse.jetty.websocket.WebSocketpublic class GameSocket implements WebSocket, WebSocket.OnTextMessage {... @Override public void onClose(int closeCode, String msg) { world.removeSocket(this); world.removePlayer(avatar.getId()); }}
  • WebSocket (WebSocket onMessage)import org.eclipse.jetty.websocket.WebSocketpublic 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)) { ... }}
  • 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
  • 3D (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
  • Storage (IndexDB)● Not yet
  • 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 MANIFESTCACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.jshttp://www.html5rocks.com
  • Manifest (NETWORK)# online:NETWORK:login.php/myapihttp://api.twitter.comhttp://www.html5rocks.com
  • Manifest (FALLBACK)# static.html will be served if main.py is inaccessible# offline.jpg will be served in place of all images inimages/large/# offline.html will be served in place of all other .html filesFALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.htmlhttp://www.html5rocks.com
  • Demo
  • Thanks● Mert Çalışkan● Çağatay Çivici● Barış Bal
  • Murat Can ALPAYlinkedin.com/in/mcalpaymcatr.blogspot.com