Embed Size (px)
DESCRIPTION
Alors que le Web évolue, les standards doivent suivre la cadence. Cette nouvelle version de HTML vous offre la simplicité et la puissance pour créer une expérience mobile encore meilleure. De plus, avec des philosophies telles que le "Responsive Web Design", nous voyons ce dernier autrement: il n'y a plus de Web spécifique aux différentes plateformes, mais un Web adaptatif. Voyons ensemble quelques-unes des fonctionnalités d'HTML5, le principe du design adaptatif et bien sûr, de quelle manière la version 5 de HTML révolutionne le Web, mais surtout la mobilité d'aujourd'hui et de demain.
Citation preview
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
• 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!
