Frédéric Harper @ Microsoft Canada
@fharper | outofcomfortzone.net
Mobiz - 2012-11-15
HTML5
+ +HTML5 CSS3 JavaScript
Effets 3D
Performance Sémantiques
Hors ligne & stockage
Styles
Connectivité
Multimédia
Accès appareils
Premier brouillonpublic
Brouillon de travail
Candidat pour la recommandation
Recommandationproposée
Recommandation
<video src="video.mp4" id=“tagVideo">
<source src="video.webm" />
<a href="http://lienvideo.com/">
Désolé, pas de support video HTML5
</a>
<!– Flash/Silverlight video here -->
</video>
• 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…
• State• Transformations• Compositing• Colors and styles• Line caps/joins• Shadows• Rects• Path API
• Focus management• Drawing images• Text• Pixel Manipulation• Interfaces– CanvasGradient– TextMetrics– ImageData– CanvasPixelArray
<style type="text/css">
@font-face {
font-family: MyFont;
src: url('Font.woff');
}
</style>
<div style="font: 24pt MyFont, sans-serif;">
Le texte à afficher.
</div>
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;
}
• Penser aux besoins de l’utilisateur au lieu des
nôtres.
• Adapter aux différentes capacités des appareils au
lieu de leurs configurations.
• Aide nos sites à être possiblement prêts pour le
futur.
1. Une mise en page flexible, basée sur une grille,
2. Des images et des médias flexibles, et
3. Media queries.
<link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)“ type="text/css" />
<link href="netbook.css" rel="stylesheet“ media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" />
<link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)“ type="text/css" />
X X X X X
X X X
X X
X X X
X X
Utiliser seulementles fonctionnalitésdisponiblesnativement danstous les navigateurs visés
Utiliser les fonctionnalitésdisponiblesnativement OU disponibles avec des polyfillJavaScript
X X X X X
X X X
X X
X X X
X X
X X
(n) poly • fill: Un script JavaScript implémentant des fonctionnalités HTML5 non disponibles nativement dans un navigateur
Utiliser les fonctionnalitésdisponiblesnativement ET créerdes expériencesalternatives pour les autres navigateurs
X X X X X
X X X
X X
X X X
X X
X X X
X X
X X
Détecte la disponibilité de l’implémentation
native des fonctionnalités d’HTML5 & CSS3.
if (Modernizr.canvas) {
//On dessine avec Canvas!
}
else {
//Pas de support natif :(
}
Introduction
Contre Jour: http://www.contrejour.ie
Illy Issimo: http://us.illyissimo.com/
Windows Azure: (doit avoir un compte)
SVG girl: http://jsdo.it/event/svggirl/
W3C HTML Working Group: http://www.w3.org/html/wg/La spécification HTML5: http://dev.w3.org/html5/spec/
Vidéo
Support des formats: http://en.wikipedia.org/wiki/HTML5_video
Plus que le Web
PhoneGap: http://www.phonegap.com
HTML5/CSS3/JavaScript for Windows 8: http://j.mp/ZzXznE
Canvas
Canvas Pad: http://j.mp/Soh0K1
Speed Reading: http://j.mp/TZM6LR
Canvas & vidéo, blow it up: http://j.mp/XFoA9C
AI to Canvas: http://visitmix.com/labs/ai2canvas
Web Open Font Format
IE Test Drive Fonts: http://j.mp/TJ0wy2
Font Squirrel: http://www.fontsquirrel.com/
Convert otf to woff: http://orionevent.comxa.com/otf2woff.html
Géolocalisation
Foursquare playground: http://fsplayground.cloudapp.net/
Responsive Web Design
Article Ethan Marcotte: http://j.mp/QHkDiW
Screenfly: http://quirktools.com/screenfly/
Multi-Device Layout Patterns: http://www.lukew.com/ff/entry.asp?1514
Livre Responsive Web Design: http://j.mp/TJ1N84
Exemples Media Queries: http://mediaqueri.es/
Mobile First
Article de Luke Woblewski : http://www.lukew.com/ff/entry.asp?933
Livre Mobile First: http://www.abookapart.com/products/mobile-first
Présentation de Luke Woblewsky : http://vimeo.com/38187066
Livre Tapworthy: http://shop.oreilly.com/product/0636920001133.do
Stratégies d’adoption
When can I use: http://caniuse.com/
Modernizr: http://www.modernizr.com/
Divers
Internet Explorer 10 & Windows 8: http://bit.ly/PtZ3OL
Internet Explorer 10 Preview pour Windows 7: http://bit.ly/SaL0eY
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/
Frameworks
jQuery: http://jquery.com/
Less Framework: http://lessframework.com/
Knockout: http://knockoutjs.com/
Kendo UI: http://www.kendoui.com/
Backbone.js: http://backbonejs.org/
HTML5 boilerplate: http://html5boilerplate.com/
Bootstrap: http://twitter.github.com/bootstrap/
Outils
WebMatrix: http://www.microsoft.com/web/webmatrix/
jsFiddle: http://jsfiddle.net
Visual Studio 2012 Express for Web: http://j.mp/W7BLuZ
http://html5mtl.ca
• Une révolution à plusieurs niveaux!
• Une opportunité pour vos sites Web et applications
Web mobile (et non mobile!)
• Un standard non final
• Un standard qu’on peut toutefois utiliser dès
maintenant!