Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 14:51, 14 Nov 2014 par MichelBuffa
0

HTML5 discovery tutorial

De $1

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

  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

Introduction

In this part of the tutorial, you will discover interactive examples (you will be able to change the code and see the results interactively) of HTML features. Some APIs or features are not yet available on every web browser, so you may need to try switch from one browser to another in order to run all the examples.

New structural elements header, footer, section, article, summary, details, etc.

Forms

Resources:

Excellent, detailed presentations with lots of examples of HTML5 forms by:

New attributes for input fields : placeholder, pattern, autofocus CSS pseudo classes...

Selecting files and directory

  • Use of the new "multiple" attribute for selecting several files at a time. In addition, uses the HTML5 File API for reading pictures and preview them :   http://jsbin.com/abelak/edit#html,live  
     
  • Use of the new "directory" attribute for selecting a directory. Works only in webkit-based browsers (Chrome, Safari) : http://jsbin.com/iyixaf/3/edit#html,live 
    Note that in the example the attribute is named "webkitdirectory" instead of "directory" as this is still an experimental implementation.

Date, time, etc.

Color

Number

Range

Progress

Email

Tel

Url, search, voice recognition

Custom validation API examples

The new <output> field

The <meter> element

The new <datalist> element

Declare <input> fields out of the <form></form>

WebFonts

Drag'n'drop and File API

Access file details (name, size, type) :

Instant preview of dropped images

  • Simple "drag images and instant preview"example  :  http://jsbin.com/ewarak/2/edit#html,live 
     
  • Same example but this time we added two input fields : one for selecting multiple files (<input type="file" multiple/>) and one for selecting a directory (Webkit only). Notice that both dropped files or selected files can be processed by the same piece of code for instant preview : http://jsbin.com/orurip/11/edit#html,live

Canvas

Good references :

Simple examples

Shadows

Gradients

Clipping/using mask to draw only a part of the canvas

Track mouse events

Stack canvases in layers

  • This example shows how we create two canvases one on top of another. Mouse draws in the canvas at the back, while the mouse position is displayed in the front canvas. Each the mouse moves, the front canvas is cleared before redrawing the mouse position, while the back canvas remains intact. Try it :  http://jsbin.com/ogehin/2/edit#html,live

Draw a canvas into other canvases (use of drawImage with a canvas instead of an image)

Images

2D Transformations

Resource : http://tutorials.jenkov.com/html5-canvas/transformation.html

Save canvas content

Animation using requestWindowFrame()

Access pixels inside a canvas

Resource : http://tutorials.jenkov.com/html5-canvas/pixels.html

Canvas drawing modes

Canvas modes are "global" settings that decide how the things you draw will be merged with the actual canvas content. Default is "added" : you draw a red line, result will be a red line ! Some modes are very useful like "destination-out" that makes transparent eveything you draw : draw a red line, il will erase the canvas with the shape of the line !

Video

Basic usage

Take snapshot of a video

Change properties on the fly (size, position, angle etc.)

Video special effects : incrustation / blue screening

Most of these special effects consist in drawing the current image from the <video> element into a <canvas>, then grab the canvas content, modify it in real time, then draw in another canvas or set the canvas content as the source of an <img>.

Video capture

For these example to run, you need a browser that supports the getUserMedia API. See : Get a web browser that supports the getUserMedia API.

Resources :

Display webcam stream in a video element

Apply CSS effects on a video element with live webcam

  •  Try this example that shows how to use the getUserMedia API, note that CSS effects (clic on video) work only in chrome 19+:  http://jsbin.com/ivefis/34/edit

Take a snapshot from the live webcam stream

Other demos

Sound

The <audio> element 

Audio Data and Web Audio API

Resources :

Generate synthetic sound

Chrome latest of Safari nightly build only !

Real time sound analysis and how to add sound effects in real time (reverb, delay, etc.)

Chrome latest of Safari nightly build only !

  •  Nice demo (with downloadable sources) by master students from the university of Nice, France. This demo takes some time for loading a song (about 1 minute if slow bandwith, take your time...), then displays real time animation based on the analysis of the sound + adds reverb and delay effects. :  http://goo.gl/92REu.

Real time mixing 12 tracks at the same time

  • A very impressive demo. Loads in Ajax 12 sound files, then mixes them using different audioContext nodes (for panning, volume, etc.). Takes a long time to load, if slow bandwidth, try this at home ! http://kevincennis.com/mix/

 

WebSockets

In order to test how WebSockets work, you need a WebSocket server and some code on the server. Some examples run on a very simple online WebSocket server and do not need any installation.

Check if your browser supports WebSockets

Simple example

Use the "view plain menu" in the top left of the small windows that shows hightlighted code below, copy the source in a testWebSocket.html file, open it in your browser. It will send a message to html5rocks.websocket.org/echo  (WebSocket server that echos messages it receives) and display some alerts to check if WebSockets are supported, if the message has been correctly sent or received as an echo.

</pre>
<script type="text/javascript">
    function WebSocketTest() {
        if ("WebSocket" in window) {
            alert("WebSocket is supported by your Browser!");
            // Let us open a web socket
            var ws = new WebSocket("ws://html5rocks.websocket.org/echo");
            ws.onopen = function () {
                // Web Socket is connected, send data using send()
                ws.send("Hello World!");
                alert("Sending: 'Hello World from WWW2012' to ws://html5rocks.websocket.org/echo using WebSockets!");
            };
            ws.onmessage = function (evt) {
                var received_msg = evt.data;
                alert("Message just received from WS echo server:" + " '" + received_msg + "'");
            };
            ws.onclose = function () {
                // websocket is closed.
                alert("Connection is closed...");
            };
        }
        else {
            // The browser doesn't support WebSocket
            alert("WebSocket NOT supported by your Browser!");
        }
    }
</script>


<div id="sse">
    <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>

High level library over WebSockets

A more complete example involving real use cases is proposed in the "advanced tutorial for geeks" :  A multi-participant Paint in HTML5 that proposes to install the NodeJS server + some additional modules that ease the development of multi-participant applications over WebSockets. This tutorial uses the NowJS library that provides ditributed JavaScript objects + session and group management over WebSockets.

Popular libraries for NodeJS, like socket.io, propose fallback mecanisms in case the web browser used by a participant does not support WebSockets (while your code remains unchanged, the lib will switch from WebSockets to Flash WebSockets or Ajax Long Calling...), handle deconnexions, etc.

NowJS is built upon socket.io and proposes remote function/method calls and shared objects between client and server code. Such libraries dramatically reduce the amount of code necessary to write classic use cases for multi-participant sofware.

A real time action game that uses WebSockets, canvas, Box2D.js for physics

  • Developped by master students from University of Nice, France, during the HTML5 course. Use NodeJS + socket.io + NowJS + Bow2D.js. The game uses the Box2D.js lib for physic simulation (same used by Angry Birds) both on client and server side. A NodeJS Server application written in JavaScript is doing all physics computations and clients use the same library locally. When messages take too long to arrive to clients, objects follow predicted trajectories.  Two players can play at the same time, others are spectators. try it there : http://futchball.madjawa.net/  Sources downloadable from game page.
  • Video of this game running :  http://www.youtube.com/<wbr/>watch?v=VsK9ljw6JvE

Geolocation

Most example are variations of : http://www.w3schools.com/html5/html5_geolocation.asp

Simple example

With Google Maps

Track position in real time

Mobile devices: using gestures

Note: try these examples on a mobile device !

Device Orientation and Acceleration

Beware : all following examples must be run on a device with an orientation sensor and/or with an accelerometer. Furthermore, Chrome/Safari and Mozilla supports these API, Opera mobile not yet at the time of this writing. Users of old Chrome versions (old Androids) may be unable to run the examples too.

 

 
Powered by MindTouch Deki Open Source Edition v.8.08