0
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-...
HTML5 Chronology  ● 2004        ○ WHATWG (Apple, Mozilla, Opera)  ● 2006        ○ W3C XHTML  ● 2008        ○ First release...
W3C (HTML5 Chronology)  ● XHTML 2.0        ○ No Backward Compability!        ○ Strictly XMLhttp://net.tutsplus.com/article...
WHAT WG  ● 2004 W3C Workshop  ● Backward Compatible  ● Detailed Spec.        ○ Non Strict HTML Parserhttp://net.tutsplus.c...
“The Web is, and should be, driven by technical merit, not consensus. The       W3C pretends otherwise, and wastes a lot o...
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.lo...
JavaScript ? (var)for(var i = 1; i <= 3; i++) {      print();}function print() {      for(i = 1; i <= 3; i++) {           ...
JavaScript ? ( ?, var)for(i = 1; i <= 3; i++) {      print();}function print() {      for(var i = 1; i <= 3; i++) {       ...
JavaScript ? (var, var)for(var i = 1; i <= 3; i++) {      print();}function print() {      for(var i = 1; i <= 3; i++) {  ...
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 (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];   ...
Canvas (Gradient)var grad = ctx.createLinearGradient(0, 0, 800, 600);grad.addColorStop(0, "red");grad.addColorStop(1, "yel...
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.getImageDa...
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, onMouseclic...
Canvas (Animation)window.requestAnimFrame = (function () {    return window.requestAnimationFrame ||            window.web...
Audio● 3D Positional Audio
Audio (Basic)var actx = new window.webkitAudioContext();var request = new XMLHttpRequest();request.open(GET, /blast.wav, t...
Audio (Gain)function playSource(buffer, gainVol, loop) {    var gnode = actx.createGainNode();    var source = actx.create...
Audio (AudioPannerNode)function playPositionalSource(holder, src, dest) {    var gnode = actx.createGainNode();    var sou...
WebSocket●   Simple API●   No HTTP Headers●   Needs ports●   Server support
WebSocket (Callbacks)var connection = new WebSocket(ws://localhost:8080/play, [text]);connection.onopen = function () {......
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 WebSocke...
WebSocket (WebSocket onOpen)import org.eclipse.jetty.websocket.WebSocketpublic class GameSocket implements    WebSocket,  ...
WebSocket (WebSocket onClose)import org.eclipse.jetty.websocket.WebSocketpublic class GameSocket implements    WebSocket, ...
WebSocket (WebSocket onMessage)import org.eclipse.jetty.websocket.WebSocketpublic class GameSocket implements   WebSocket,...
WebSocket (sockets)public class AxeWorld extends TimerTask implements World {...    public final Set<GameSocket> sockets; ...
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, 10...
3D (Three.js)        function animate() {            // note: three.js includes requestAnimationFrame shim            requ...
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.addEventLi...
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.html5rock...
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 ima...
Demo
Thanks● Mert Çalışkan● Çağatay Çivici● Barış Bal
Murat Can ALPAYlinkedin.com/in/mcalpaymcatr.blogspot.com
Upcoming SlideShare
Loading in...5
×

A More Flash Like Web?

1,074

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,074
On Slideshare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "A More Flash Like Web?"

  1. 1. A more Flash like web?
  2. 2. Murat Can ALPAYlinkedin.com/in/mcalpaymcatr.blogspot.com
  3. 3. ● What to present?● HTML5?● Software Dev.?
  4. 4. VS?● A fair comparison?
  5. 5. Content● History● JavaScript● Canvas● Audio● WebSocket● Offline
  6. 6. Why a new HTML? ● games? ● video? ● 3d? ● ...http://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  7. 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. 8. W3C (HTML5 Chronology) ● XHTML 2.0 ○ No Backward Compability! ○ Strictly XMLhttp://net.tutsplus.com/articles/general/a-brief-history-of-html5/
  9. 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. 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. 11. Jobs vs Adobe ● November 2011 ○ Adobe: No Flash for Mobil and TVhttp://en.wikipedia.org/wiki/Adobe_Flash
  12. 12. HTML5 Today● Youtube HTML5 test ○ http://www.youtube.com/html5● Mobile ○ Amazon
  13. 13. HTML5 Browser Support
  14. 14. JavaScript ?● Minecraft● Quake 3● Cut the rope JS
  15. 15. Minecraft in JS JS
  16. 16. Quake in JShttp://media.tojicode.com/q3bsp/ JS
  17. 17. Cut The Ropehttp://www.cuttherope.ie/dev/● Performance ○ 37 - 62 FPS JS
  18. 18. JavaScript ?for(i = 1; i <= 3; i++) { print();}function print() { for(i = 1; i <= 3; i++) { console.log(i); }} JS
  19. 19. JavaScript ? (var)for(var i = 1; i <= 3; i++) { print();}function print() { for(i = 1; i <= 3; i++) { console.log(i); }} JS
  20. 20. JavaScript ? ( ?, var)for(i = 1; i <= 3; i++) { print();}function print() { for(var i = 1; i <= 3; i++) { console.log(i); }} JS
  21. 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. 22. JavaScript ? (Tools)● Chrome ○ Developer Tools● Ant Scripts JS
  23. 23. Canvas● Low level graphics lib.● 2D● 3D ○ WebGL ○ Three.js
  24. 24. Canvas (Context)<canvas id="canvas" width="800px" height="600px"/>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");
  25. 25. Canvas (Rectangle)ctx.fillStyle = "red";ctx.fillRect(50,50,400,300);
  26. 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. 27. Canvas (Gradient)var grad = ctx.createLinearGradient(0, 0, 800, 600);grad.addColorStop(0, "red");grad.addColorStop(1, "yellow");ctx.fillStyle = grad;
  28. 28. Canvas (Path)ctx.beginPath();...ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.lineTo(x3,y3)ctx.closePath();
  29. 29. Canvas (Image)var spaceImg = new Image();spaceImg.src = space.png;ctx.drawImage(spaceImg, 0, 0);
  30. 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. 31. Canvas (Text)ctx.fillStyle = "white";ctx.font = 16 + "pt Arial ";ctx.fillText("fps :" + Math.floor(1000 / diffTime), 10,20);
  32. 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. 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. 34. Audio● 3D Positional Audio
  35. 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. 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. 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. 38. WebSocket● Simple API● No HTTP Headers● Needs ports● Server support
  39. 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. 40. WebSocket (Send)function send(msg) { if(connection.readyState == 1) { connection.send(msg) }}
  41. 41. WebSocket (Jetty)"Dont deploy your app. to Jetty, Deploy Jetty to your app."
  42. 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. 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. 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. 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. 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. 47. 3D● WebGL ○ experimental● Three.js
  48. 48. 3D (Three.js)● https://github.com/mrdoob/three.js● High level● Renderers ○ Canvas ○ WebGL ○ SVG
  49. 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. 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. 51. 3D (Three.js)
  52. 52. Storage● Local● Session● Database
  53. 53. Storage (Local Storage)● Cookies ○ 4KB ○ HTTP Headers● 5 MB key/value
  54. 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. 55. Storage (Session Storage)● for a session● sessionStorage
  56. 56. Storage (Database Storage)● 5 MB and more● Web SQL Database
  57. 57. Storage (IndexDB)● Not yet
  58. 58. Application Cache● Old Way Directives● New Way Manifest
  59. 59. ApplicationCache (Cache Directives)● HTTP
  60. 60. Application Cache (Manifest)● Cache what?● mime-type : text/cache-manifest● CACHE, NETWORK, FALLBACK
  61. 61. Manifest<!DOCTYPE html><html manifest="cache.mf"><head>...
  62. 62. Manifest (CACHE)CACHE MANIFESTCACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.jshttp://www.html5rocks.com
  63. 63. Manifest (NETWORK)# online:NETWORK:login.php/myapihttp://api.twitter.comhttp://www.html5rocks.com
  64. 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. 65. Demo
  66. 66. Thanks● Mert Çalışkan● Çağatay Çivici● Barış Bal
  67. 67. Murat Can ALPAYlinkedin.com/in/mcalpaymcatr.blogspot.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×