HTML5 discovery tutorial

Table des matières

1. 1. Introduction
2. 2. New structural elements header, footer, section, article, summary, details, etc.
3. 3. Forms
   1. 3.1. New attributes for input fields : placeholder, pattern, autofocus CSS pseudo classes...
   2. 3.2. Selecting files and directory
   3. 3.3. Date, time, etc.
   4. 3.4. Color
   5. 3.5. Number
   6. 3.6. Range
   7. 3.7. Progress
   8. 3.8. Email
   9. 3.9. Tel
   10. 3.10. Url, search, voice recognition
   11. 3.11. Custom validation API examples
   12. 3.12. The new <output> field
   13. 3.13. The <meter> element
   14. 3.14. The new <datalist> element
   15. 3.15. Declare <input> fields out of the <form></form>
4. 4. WebFonts
5. 5. Drag'n'drop and File API
   1. 5.1. Access file details (name, size, type) :
   2. 5.2. Instant preview of dropped images
6. 6. Canvas
   1. 6.1. Simple examples
   2. 6.2. Shadows
   3. 6.3. Gradients
   4. 6.4. Clipping/using mask to draw only a part of the canvas
   5. 6.5. Track mouse events
   6. 6.6. Stack canvases in layers
   7. 6.7. Draw a canvas into other canvases (use of drawImage with a canvas instead of an image)
   8. 6.8. Images
   9. 6.9. 2D Transformations
   10. 6.10. Save canvas content
   11. 6.11. Animation using requestWindowFrame()
   12. 6.12. Access pixels inside a canvas
   13. 6.13. Canvas drawing modes
7. 7. Video
   1. 7.1. Basic usage
   2. 7.2. Take snapshot of a video
   3. 7.3. Change properties on the fly (size, position, angle etc.)
   4. 7.4. Video special effects : incrustation / blue screening
8. 8. Video capture
   1. 8.1. Display webcam stream in a video element
   2. 8.2. Apply CSS effects on a video element with live webcam
   3. 8.3. Take a snapshot from the live webcam stream
   4. 8.4. Other demos
9. 9. Sound
   1. 9.1. The <audio> element 
   2. 9.2. What sound format does your browser supports ?
   3. 9.3. Audio Data and Web Audio API
   4. 9.4. Generate synthetic sound
   5. 9.5. Real time sound analysis and how to add sound effects in real time (reverb, delay, etc.)
   6. 9.6. Real time mixing 12 tracks at the same time
10. 10. WebSockets
    1. 10.1. Check if your browser supports WebSockets
    2. 10.2. Simple example
    3. 10.3. High level library over WebSockets
    4. 10.4. A real time action game that uses WebSockets, canvas, Box2D.js for physics
11. 11. Geolocation
    1. 11.1. Simple example
    2. 11.2. With Google Maps
    3. 11.3. Track position in real time
12. 12. Mobile devices: using gestures   
13. 13. Device Orientation and Acceleration