Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 14:35, 14 Avr 2012 par MichelBuffa
0

HTML5 discovery tutorial

De $1

Table des matières
  1. 1. Introduction
  2. 2.  Forms
    1. 2.1. New attributes for input fields : placeholder, pattern, autofocus CSS pseudo classes...
    2. 2.2. Selecting files and directory
    3. 2.3. Date, time, etc.
    4. 2.4. Color
    5. 2.5. Number
    6. 2.6. Range
    7. 2.7. Progress
    8. 2.8. Email
    9. 2.9. Tel
    10. 2.10. Url, search, voice recognition
    11. 2.11. The new <output> field
    12. 2.12. The new <datalist> element
    13. 2.13. Declare <input> fields out of the <form></form>
  3. 3. WebFonts
  4. 4. Drag'n'drop and File API
    1. 4.1. Access file details (name, size, type) :
    2. 4.2. Instant preview of dropped images
  5. 5. Canvas
    1. 5.1. Simple examples
    2. 5.2. Shadows
    3. 5.3. Gradients
    4. 5.4. Clipping/using mask to draw only a part of the canvas
    5. 5.5. Track mouse events
    6. 5.6. Stack canvases in layers
    7. 5.7. Images
    8. 5.8. 2D Transformations
    9. 5.9. Save canvas content
    10. 5.10. Access pixels inside a canvas
    11. 5.11. Canvas modes
  6. 6. Video
    1. 6.1. Basic usage
    2. 6.2. Change properties on the fly (size, position, angle etc.)
    3. 6.3. Video special effects : incrustation / blue screening
  7. 7. Video capture
    1. 7.1. Display webcam stream in a video element
    2. 7.2. Apply CSS effects on a video element with live webcam
    3. 7.3. Take a snapshot from the live webcam stream
    4. 7.4. Other demos
  8. 8. Sound
    1. 8.1. The <audio> element 
    2. 8.2. What sound format does your browser supports ?
    3. 8.3. Generate synthetic sound
    4. 8.4. Real time sound analysis and how to add sound effects in real time (reverb, delay, etc.)
  9. 9. WebSockets
    1. 9.1. Check if your browser supports WebSockets
    2. 9.2. Simple example
    3. 9.3. High level library over WebSockets
    4. 9.4. A real time action game that uses WebSockets, canvas, Box2D.js for physics
  10. 10. Geolocation
    1. 10.1. Simple example
    2. 10.2. With Google Maps
    3. 10.3. Track position in real time
  11. 11. Device Orientation and Acceleration

Version de 21:09, 21 Nov 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Introduction
  2. 2.  Forms
    1. 2.1. New attributes for input fields : placeholder, pattern, autofocus CSS pseudo classes...
    2. 2.2. Selecting files and directory
    3. 2.3. Date, time, etc.
    4. 2.4. Color
    5. 2.5. Number
    6. 2.6. Range
    7. 2.7. Progress
    8. 2.8. Email
    9. 2.9. Tel
    10. 2.10. Url, search, voice recognition
    11. 2.11. The new <output> field
    12. 2.12. The new <datalist> element
    13. 2.13. Declare <input> fields out of the <form></form>
  3. 3. WebFonts
  4. 4. Drag'n'drop and File API
    1. 4.1. Access file details (name, size, type) :
    2. 4.2. Instant preview of dropped images
  5. 5. Canvas
    1. 5.1. Simple examples
    2. 5.2. Shadows
    3. 5.3. Gradients
    4. 5.4. Clipping/using mask to draw only a part of the canvas
    5. 5.5. Track mouse events
    6. 5.6. Stack canvases in layers
    7. 5.7. Images
    8. 5.8. 2D Transformations
    9. 5.9. Save canvas content
    10. 5.10. Access pixels inside a canvas
    11. 5.11. Canvas modes
  6. 6. Video
    1. 6.1. Basic usage
    2. 6.2. Change properties on the fly (size, position, angle etc.)
    3. 6.3. Video special effects : incrustation / blue screening
  7. 7. Video capture
    1. 7.1. Display webcam stream in a video element
    2. 7.2. Apply CSS effects on a video element with live webcam
    3. 7.3. Take a snapshot from the live webcam stream
    4. 7.4. Other demos
  8. 8. Sound
    1. 8.1. The <audio> element 
    2. 8.2. What sound format does your browser supports ?
    3. 8.3. Generate synthetic sound
    4. 8.4. Real time sound analysis and how to add sound effects in real time (reverb, delay, etc.)
  9. 9. WebSockets
    1. 9.1. Check if your browser supports WebSockets
    2. 9.2. Simple example
    3. 9.3. High level library over WebSockets
    4. 9.4. A real time action game that uses WebSockets, canvas, Box2D.js for physics
  10. 10. Geolocation
    1. 10.1. Simple example
    2. 10.2. With Google Maps
    3. 10.3. Track position in real time
  11. 11. 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.

 Forms

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

The new <output> field

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

Images

2D Transformations

Save canvas content

Access pixels inside a canvas

Canvas 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

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

Take a snapshot from the live webcam stream

Other demos

     

Sound

The <audio> element 

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.
  • See also the WebSound API part of this impressive presentation by Google :  http://www.htmlfivewow.com

 

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.

<!DOCTYPE HTML>
<html>
<head>
    <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("Message to send");
                    alert("Message is sent...");
                };
                ws.onmessage = function (evt)
                {
                    var received_msg = evt.data;
                    alert("Message is received..." + 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>
</head>
<body>
<div id="sse">
    <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

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

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