11. Performance Sémantiques Styles Multimédia
Effets 3D Hors ligne & Connectivité Accès appareils
stockage
12. Premier brouillon Brouillon de Candidat pour la
public travail recommendation
Recommendation
Recommendation
proposée
13. Premier brouillon Brouillon de Candidat pour la
public travail recommendation
Recommendation
Recommendation
proposée
14.
15.
16. W3C HTML Working Group
http://www.w3.org/html/wg/
La spécification HTML5
http://dev.w3.org/html5/spec/
HTML5/CSS3 cheatsheet (vieux d’un an)
http://www.storiesinflight.com/html5/index.html
The Best HTML5 and CSS3 Cheat Sheets of 2011
http://www.evolutionarydesigns.net/blog/2011/12/28/
the-best-html5-and-css3-cheat-sheets-of-2011/
17.
18. X X X X X Utilisez seulement
X X X les fonctionnalités
X X
disponibles
nativement dans
X X X
tous les
X X
navigateurs visés
19. X X X X X Utilisez les
X X X X X fonctionnalités
X X
disponibles
nativement OU
X X X
disponibles avec
X X
des polyfill
JavaScript
20. (n) poly • fill: Un script
JavaScript implémentant des
fonctionnalités HTML5 non
disponibles nativement dans un
navigateur
21. X X X X X
Utilisez les
X X X X X fonctionnalités
X X X X X disponibles
X X nativement ET créer
X X X
des expériences
X X alternatives pour les
autres navigateurs
22.
23.
24.
25.
26. When can I use
http://caniuse.com/
Haz.io
http://haz.io/
Mobile HTML5
http://mobilehtml5.org/
Modernizr
http://www.modernizr.com/
27.
28. • Rapide
• Moins intense sur la mémoire
• Plus de travail pour les développeurs
• Sans JavaScript… vous êtes foutus!
• Bon pour des jeux, des diagrammes,
visualisation de données…
29.
30.
31.
32.
33. • State • Focus management
• Transformations • Drawing images
• Compositing • Text
• Colors and styles • Pixel Manipulation
• Line caps/joins • Interfaces
• Shadows – CanvasGradient
• Rects – TextMetrics
• Path API – ImageData
– CanvasPixelArray
34.
35. Une extension pour Adobe Illustrator
permettant de prendre un fichier vectoriel
(.AI) et de le transformer en code HTML
(Canvas)
38. • SVG = “Scalable Vector Graphics”
• Comme HTML, SVG est construit dans le
document utilisant des éléments, attributs et
styles.
• De ce fait, on peut le modifier avec du
JavaScript et CSS.
48. function getLocation() {
if (navigator.geolocation != undefined) {
navigator.geolocation.getCurrentPosition(callBack);
}
}
function callBack(position) {
var accuracy = position.coords.accuracy;
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
61. Canvas Love
http://9elements.com/io/projects/html5/canvas/
When can I use Audio
http://caniuse.com/#feat=audio
Plink
http://labs.dinahmoe.com/plink/
When can I use Audio API
http://caniuse.com/#feat=audio-api
HTML5Rocks Web Audio API Introduction
http://caniuse.com/#feat=audio-api
62.
63. Une librairie JavaScript qui simplifie la
gestion des événements, les animations, les
interactions AJAX…
64. Less Framework est une grille CSS qui aide
à construire un site avec le principe de
Responsive Web Design (design
adaptatif).
65. Une librairie JavaScript qui simplifie le
JavaScript dynamique au UI (User
Interface) en appliquant le MVVM (Model
View ViewModel).
66. Un framework aidant au niveau UI avec
des grilles, chart, combobox… Aussi utile
pour du “data binding”, animations…
67. Une librairie JavaScript qui simplifie le
“data binding” représentant vos données
comme un Models, qui peut être créé,
validé, détruit...
72. • Détecte la disponibilité de l’implémentation
native des fonctionnalités d’HTML5 & CSS3.
• N’est pas un polyfill: aucune émulation de
fonctionnalités.
88. HTML5 étant assez récent, les outils avec
une complétation automatique ou
WYSIWYG (What You See Is What You
Get) ne sont pas disponibles en grande
quantité encore…
94. 1. Essayez-le
2. Lisez sur le sujet
3. Faite des projets tests
4. Implémentez-le dans vos projets au bureau
95. 1. Essayez-le
2. Lisez sur le sujet
3. Faite des projets tests
4. Implémentez-le dans vos projets au bureau
5. Ayez du plaisir!
96. HTML5mtl – Groupe d’utilisateurs HTML5 à Montréal
http://www.meetup.com/HTML5mtl/
Make Awesome Web
http://makeawesomeweb.com/
Dive into HTML5
http://diveintohtml5.info/
HTML5 learning
http://msdn.microsoft.com/en-ca/ie/aa740476
IE Test drive
http://ie.microsoft.com/testdrive/
A book Apart
http://www.abookapart.com/
A list Apart
http://www.alistapart.com/
