12. Canvas
• Permet aux développeurs de dessiner des graphiques 2D à l’aide de
JavaScript:
– Les méthodes pour dessiner inclus: paths, boxes, circles, text et rasterrized
images.
• Il existe déjà plusieurs
librairies JavaScript qui
permettent le dessin dans
les canvas, tel que EaselJS.
13. Canvas - Code
<canvas id="monCanvas" width="200" height="200">
Votre navigateur ne supporte pas Canvas, désolé.
</canvas>
<script type="text/javascript">
var exemple = document.getElementById("monCanvas");
var context = exemple.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
15. Scalable Vector Graphics (SVG)
• Créer et dessiner du 2D à l’aide de vecteur graphique
utilisant XML
– Image composée de formes au lieu de pixels
– Basé sur SVG 1.1 2nd édition, spécification complète
• Comprends le support pour:
– Accès complet au DOM
– Structure du document,
scripting, styling, paths,
shapes, colors, transforms,
gradients, patterns,
masking, clipping,
markers, linking et
views.
18. Video
• Encodage vidéo de l’industrie MPEG-4/H.264
• Peuvent être composé de n’importe quoi d’autre sur la page:
– HTML, images, graphiques SVG
– Accélération matérielle, décompression avec le GPU
19. Video - Code
<video src="video.mp4" id="videoTag">
<source src="video.webm" />
<a href="http://lienDuVideo.com/">
Votre navigateur ne supporte pas Video, désolé.
</a>
<!– Vidéo Flash/Silverlight ici -->
</video>
21. Audio
• Supporte les standards de l’industrie: MP3 et AAC
• Scriptable via le DOM
• Attribues
– src –> la location du fichier
– autoplay –> si la lecture se fait automatiquement (S.V.P.!)
– controls –> si présent, des contrôles
le seront aussi
– preload –> si présent, le chargement
de l’audio se fera au
chargement de la page
24. Geolocalisation
• Permet aux sites de découvrir votre emplacement
géographique
• La permission de l’utilisateur est requise
25. Geolocalisation - Code
function getLocation() {
if (navigator.getlocation != undefined) {
navigator.getlocation.getCurrentPosition(callBack);
}
}
function callBack(position) {
var accuracy = position.coords[accuracy];
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
27. Web Open Font Format
• Plus de limitation avec les fonts “Web Safe”
• WOFF
– Créer pour le Web et utilisé à l’aide de la déclaration
@font-face
– Un simple “réemballage”
des fonts OpenType et
TrueType
– Proviens du W3C Fonts
Working Group
28. WOFF - Code
<style type="text/css">
@font-face {
font-family: MonFont;
src: url('Font.woff');
}
</style>
<div style="font: 24pt MonFont, sans-serif;">
Va afficher le font
</div>
30. HTML5 & IE9 dans tout ça
• Tous les exemples ont été présentés dans Internet Explorer 9 RC.
• Micosoft est sur le “board” du W3C pour HTML5
• Liste des éléments supportés actuellement :
http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5
• C’est un “work in progress”: on continue
d’ajouter des fonctionnalités
31. Les petits plus de IE9
• Ce ne sont pas des ajouts d’éléments HTML5, mais pour l’expérience
utilisateur avec le navigateur.
• Nouvel engin JS nommé Chakra: support ECMAScript 5 et très
performant.
• F12 Developer Tools
• Le focus sur le site, plutôt que le navigateur
• Les “Pinned Sites”
• Le favicon personnalise le navigateur