• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
857
On Slideshare
0
From Embeds
0
Number of Embeds
22

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. A more Flash like web?
  • 2. Murat Can ALPAYlinkedin.com/in/mcalpaymcatr.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 ○ Finalhttp://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  • 8. W3C (HTML5 Chronology) ● XHTML 2.0 ○ No Backward Compability! ○ Strictly XMLhttp://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  • 9. WHAT WG ● 2004 W3C Workshop ● Backward Compatible ● Detailed Spec. ○ Non Strict HTML Parserhttp://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> incidencehttp://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  • 11. Jobs vs Adobe ● November 2011 ○ Adobe: No Flash for Mobil and TVhttp://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 JShttp://media.tojicode.com/q3bsp/ JS
  • 17. Cut The Ropehttp://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)"Dont deploy your app. to Jetty, Deploy Jetty to your app."
  • 42. 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); }}
  • 43. 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); }}
  • 44. 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()); }}
  • 45. 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)) { ... }}
  • 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 MANIFESTCACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.jshttp://www.html5rocks.com
  • 63. Manifest (NETWORK)# online:NETWORK:login.php/myapihttp://api.twitter.comhttp://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 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
  • 65. Demo
  • 66. Thanks● Mert Çalışkan● Çağatay Çivici● Barış Bal
  • 67. Murat Can ALPAYlinkedin.com/in/mcalpaymcatr.blogspot.com