Tutorial WWW 2012

Table des matières

1. 1. Introduction
2. 2. Recommended tools
3. 3. Download lab exercices
4. 4. Step 1 : a very simple paint !
5. 5. Step 2 : manage mouseUp, mouseMove, mouseDown, define a pencil drawing object
6. 6. Step 3 : add a second, transparent canvas on top of the main canvas, for drawing elastic lines
7. 7. Step 4 : draw the front canvas on the main canvas on mouse release when drawing lines
8. 8. Step 5 : adding a rectangle and a Circle tool
9. 9. Step 6 : playing with stroke and fill styles, lineWidth, HTML5 new input types (color, range)
10. 10. Step 7 : adding a chat in our application, starting point for a multi-participant experience
    1. 10.1. Installing NodeJS
    2. 10.2. Adding node modules for WebSockets
    3. 10.3. Run the simple chat application
    4. 10.4. Study the simple chat application
    5. 10.5. Adding the Chat application to our Paint Program
11. 11.  Step 8 : broadcast paint events
    1. 11.1. Server side : broadcasting paint event to every client except the sender
    2. 11.2. Sending paint events
    3. 11.3. Processing incoming messages
12. 12. Using live webcam capture : the getUserMedia API
    1. 1. 12.1.1. Init the getUserMedia API
       2. 12.1.2. Painting with the live images
       3. 12.1.3. Sending live images as base64 pictures
       4. 12.1.4. Processing images received as base64 data objects