• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 tutorial: canvas, offfline & sockets
 

HTML5 tutorial: canvas, offfline & sockets

on

  • 6,608 views

Roots conf HTML5 90 minute tutorial.

Roots conf HTML5 90 minute tutorial.

Statistics

Views

Total Views
6,608
Views on SlideShare
6,547
Embed Views
61

Actions

Likes
6
Downloads
142
Comments
0

12 Embeds 61

http://blogtack.blogspot.com 24
http://yourails.com 16
http://wordpresszandbak.ctrlv.eu 4
http://ideasdenegocio.upbbga.edu.co 4
http://paper.li 3
http://localhost:6774 2
http://blogtack.blogspot.mx 2
http://sitepouch.com 2
http://blogtack.blogspot.com.es 1
http://www.onlydoo.com 1
http://www.icrossing.co.uk 1
http://blogtack.blogspot.com.ar 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike 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

    HTML5 tutorial: canvas, offfline & sockets HTML5 tutorial: canvas, offfline & sockets Presentation Transcript

    • HTML5Huh, What is it good for?
    • Remy Sharp@rem I wrote a book on it :)
    • Its more than๏ HTML ๏ Buzzword๏ New HTML5 ๏ Simple elements doctype
    • JavaScript๏Offline๏App cache๏WebStorage๏WebSQL๏IndexedDB๏Multimedia๏Video & Audio
    • ๏X-domain JavaScript messaging๏CORS๏File API๏Drag & Drop๏History API๏Lots, lots more.
    • JavaScript๏Canvas API๏Offline apps๏Web Sockets
    • When can Iuse "HTML5"?
    • Making itwork inthe "other"browser
    • Polyfillswill/might save youA shim that mimics a futureAPI providing a fallback to older browsers http://goo.gl/0Z9eI
    • Oh, and learnJavaScript
    • CanvasHan Solo of HTML5
    • Canvas SVG
    • ๏ Its not one is better than the other, they do different things๏ Select canvas when it makes sense๏ Dont assume interactive means canvas๏ Check out raphaeljs.com
    • <!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Canvas</title></head><body> <canvas></canvas></body></html>
    • 2D APIctx = canvas.getContext(2d)
    • ๏Gradients๏Pixel manipulation๏Paths๏Shadows๏Export to data url๏State saving
    • Gradientsvar rainbox = ctx.createLinearGradient(0, 0, w, h), colours = { 0: red, 0.167: orange, 0.333: yellow, // etc };for (var key in colours) { rainbow.addColorStop(key, colours[key]);}ctx.fillStyle = rainbox;ctx.fillRect(0, 0, w, h);
    • Pixel Pushingvar pixels = ctx.getImageData(0, 0, w, h), len = pixels.data.length;for (var i = 0; i < len; i += 4) { var rgb = rgb( + // ↵ [ pixels.data[i], // red pixels.data[i+1], // green pixels.data[i+2] // blue ].join(,) + );}
    • Pathsvar pinsize = 26, pinedge = pinsize * 0.1, centre = pinsize/2, radius = centre - pinedge, circle = Math.PI * 2;pinctx.beginPath();pinctx.arc(centre, centre, // ↵ radius, 0, circle, true);pinctx.closePath();pinctx.fill();
    • T ip Math.PI == 180°
    • T ipMath.PI * 2 == 360°
    • T ipd * Math.PI / 180 == radian
    • Shadowspinctx.shadowBlur = 2;pinctx.shadowOffsetX = 2;pinctx.shadowOffsetY = 2;pinctx.shadowColor = rgba(0,0,0,.7);
    • Exportpinctx.canvas.toDataURL(image/png)data:image/png;base64,...
    • T ip context.canvas All context contain back- reference to its canvas
    • State Savingpinctx.fillStyle = #fff;pinctx.save();pinctx.fillStyle = #f00;// do somethingpinctx.restore();// now fillStyle is #fff
    • Offline Applications
    • Using a Manifest<!DOCTYPE html><html manifest="my.appcache"><body><!-- my page --></body></html>
    • my.appcacheCACHE MANIFESTapp.htmlcss/style.cssjs/app.js#version 13
    • The Manifest1. Serve as text/manifest, by adding to mime.types:text/cache-manifest appcache
    • Firefox caching<IfModule mod_expires.c> ExpiresActive on ExpiresByType text/cache-manifest↪ “access plus 0 seconds”</IfModule>
    • The Manifest2. First line must be: CACHE MANIFEST
    • The Manifest3. Including page is implicitly included in the cache.
    • The Manifest4. Two futher namespaces: NETWORK & FALLBACK
    • CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
    • CACHE MANIFESTWhat to CACHE: app.jscache app.css index.html NETWORK: http://* https://* FALLBACK: / offline.html
    • CACHE MANIFEST CACHE:App cache app.js app.cssrequires all index.htmlresources are NETWORK: http://*accounted for. https://* FALLBACK: / offline.html
    • CACHE MANIFEST CACHE: app.jsRequests for app.cssfiles not found index.htmlin the cache, NETWORK: http://*are directed https://*to offline.html FALLBACK:(when offline). / offline.html
    • CACHE MANIFESTCACHE:app.jsapp.cssindex.htmlNETWORK:http://*https://*FALLBACK:/ offline.html
    • The Manifest5. Include some versioning to cache bust your manifest # version 16
    • The Process
    • Browser: I have aBrowser: request Server: serve all manifest, cache assets Browser: Server: serve applicationCache Browser: reloadmanifest assets updatedBrowser: serve Browser: only Server: 304 Not locally request manifest file Modified
    • When your app updatesapplicationCache.onUpdateReady = function () { if (confirm("New version ready. Refresh?")) { // reload window.location = window.location; }};
    • T ip Do offline last
    • Web SocketsTwo way real-time comms http://www.flickr.com/photos/44442915@N00/4960579336
    • In a nutshell๏Persistent connection๏Tiny chunks of data exchanged๏Bi-directional & no origin rules
    • Some Uses๏Chat / "hello world"๏Streaming data like stock share prices๏Multi-player game state๏Google Wave remember? :)
    • Native orpolyfilled IE6✓ :(
    • http://github.com/gimite/web-socket-js/
    • new WebSocket(url) http://dev.w3.org/html5/websockets/
    • ws://node.remysharp.com:8000 http://github.com/miksago/node-websocket-server
    • onopenonmessageoncloseonerror
    • var data = JSON.parse(event.data);
    • .send
    • var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
    • var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
    • var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
    • var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
    • var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
    • var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
    • var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);};
    • var url = ws://node.remysharp.com:8000, conn = new WebSocket(url);conn.onopen = function () { conn.send(hello world);};conn.onmessage = function (event) { console.log(event.data);}; Lets play
    • Questions?@remremy@leftlogic.com