 |
Vous n'êtes pas connecté. Connexion |
 |
Page modifiée à 09:27, 16 Avr 2012 par MichelBuffa
HTML5 discovery tutorialDe $1Table des matières
IntroductionIn 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. FormsResources: 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
Date, time, etc.
Color
Number
Tel
Url, search, voice recognition
The new <output> field
The <meter> element
The new <datalist> element
Declare <input> fields out of the <form></form>
Drag'n'drop and File APIAccess file details (name, size, type) :
Instant preview of dropped images
CanvasGood references :
Simple examples
Clipping/using mask to draw only a part of the canvas
Track mouse events
Stack canvases in layers
Images
2D TransformationsResource : http://tutorials.jenkov.com/html5-canvas/transformation.html
Save canvas content
Animation using requestWindowFrame()
Access pixels inside a canvasResource : http://tutorials.jenkov.com/html5-canvas/pixels.html
Canvas drawing modesCanvas 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 !
VideoBasic usage
Take snapshot of a video
Change properties on the fly (size, position, angle etc.)
Video special effects : incrustation / blue screeningMost 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 captureFor 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
SoundThe <audio> element
Audio Data and Web Audio APIResources :
Generate synthetic soundChrome 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 !
Real time mixing 12 tracks at the same time
WebSocketsIn 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 exampleUse 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 WebSocketsA 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
GeolocationMost example are variations of : http://www.w3schools.com/html5/html5_geolocation.asp With Google Maps
Track position in real time
Device Orientation and AccelerationBeware : 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 |