HTML5 Tutorial - RailsConf 2011, Day 1

I started RailsConf with the "Building Web Apps with HTML5: Beyond the Buzzword" by Mike Subelsky (@subelsky).

He prepared twelve html5 exercises that walked the about 250 attendees through various features of html5 over a 2.5 hour session. It's fun to have time to work on these features. The high point was having about 200 computers using Websockets to send data back and forth with his server. He created a small ruby program that used EventMachine::WebSocket and it was holding up quite well all these connections.

Here are the notes I took during this tutorial

You can download his tutorial and all files from https://github.com/subelsky/html5tutorial. Look at the tutorial.html file for instructions.

Here are a few highlights of his talk:

1 - Feature Detection

By using the Modernizr library, we used modernizr-1.7.js, you can detect difference html5 of your browser.

For example:

  • Modernizr.canvas
  • Modernizr.websockets

2 - Basic Canvas Drawing

You can get a 2d context and draw on the canvas via that context. You can use fillRect and other primitives like moveTo and lineTo to draw.

    var canvas = document.getElementById("main");
    var context = canvas.getContext("2d");
    context.fillRect(0,0,20,20);


Here I just created a loop to generate 180 rectangles. Note they are clipped due to the width of the canvas.

3 - Canvas Image Manipulation

    var img = new Image();
    img.src = "http://www.flickr.com/photos/50183640@N05/5616041841/";
    img.onload = function() {
    context.drawImage(img,0,110);
    };



4 - Basic Animation

In this exercise we first load a new image then trap the keystroke and call the up method. Note we use jquery:

    var characters = new Image();
    characters.src = "http://onrails.org/files/20110516_characters.gif";

    characters.onload = function() {
      $(window).keyup(move);
    };

In the move the x+y coordinates are updated accordingly and is cleared and redrawn.

      context.clearRect(0,0,width,height);
      context.drawImage(characters,33,0,32,32,x,y,32,32);   

Use the left and right arrow keys

5 - Fun With Forms

In this exercise we look at few attributes of the input tag like the placeholder and autofocus attributes.

    <input id="username" placeholder="Your name" autofocus>
    <input id="fn" placeholder="First name">

Use the slider below to scale the image:







We listen to the change event of the size input and call the draw() function. Note the last two of the drawImage below is the new width and height which will give us the scaling effect.

    <input id="size" type="range" min="4" max="320" step="8" value="60">
    function draw() {
      context.clearRect(0,0,width,height);
      context.drawImage(characters,33,0,32,32,0,0,sizeAmt,sizeAmt);
    }   

6 - Local Storage

If you are in Google Chrome press option-command-j to bring up the javascript console. The you can enter key-values pair associated with the page. It's like a client side cookie.

    localStorage.setItem('shaz','bot')
    localStorage.getItem('shaz')
    localStorage.length // return 1
    localStorage.clear()

7 - Canvas Cleanup

The canvas itself can be styled like any element. Here we set a black background:

  canvas { 
    background-color: black;
  }

input { display: block; }

8 - Web Sockets

That was the fun part of the presentation, mike created the a small ruby application and had over 200 clients connecting to it.

Here is an extract of the ruby program:
``` ruby class TutorialServer def run EventMachine.run do EventMachine::WebSocket.start(:host => @host, :port => @port) do |socket| socket.onmessage do |msg| @logger.info "received: #{msg}" broadcast(msg) end end EventMachine::addperiodictimer(10) { broadcast(JSON.generate({ :type => "ping" })) } end end

  def broadcast(msg)
    @sockets.keys.each { |socket| socket.send(msg) }
  end
end
TutorialServer.new('0.0.0.0',8011).run
Then when the users moved the character image using the keyboard each keystroke was sent to his server.<br/>

``` javascript
// create the socket    
var ws = new WebSocket("ws://exp.subelsky.com:8011");

// sent to position+name to server
ws.send(JSON.stringify({ name: name, x: x, y: y, type: "move" }));

Ultimately he wanted to drive multiple clients from his server...but we ran out of time to dive into this.

And much more..

Mike covered additionally these topics: Embedded Media, Geolocation, Web Workers, Offline App

Well that was a couple of hours well spent! Go check out his material on github.

Enjoy!

Daniel Wanja

About Daniel Wanja

I can help create your next incredible application. I can mentor your developers, augment your team, build a proof of concept or create the whole application for you. I build Web and Mobile Applications with HTML5, AngularJS, Ruby on Rails and Node.js.

More

Email Sign Up

Fun news, tips and tricks on AngularJS from Nouvelles Solutions. You won’t regret it and we won’t spam you ...