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.
10. Performance Sémantiques Styles Multimédia
Effets 3D Hors ligne & Connectivité Accès appareils
stockage
11. Premier brouillon Brouillon de Candidat pour la
public travail recommandation
Recommandation
Recommandation
proposée
12.
13. <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>
14.
15.
16.
17. • 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…
18.
19.
20.
21.
22. • 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
30. 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;
}
31.
32.
33. • 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.
34. 1. Une mise en page flexible, basée sur une grille,
2. Des images et des médias flexibles, et
3. Media queries.
35. <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" />
36.
37.
38.
39.
40. X X X X X Utiliser seulement
X X X les fonctionnalités
X X
disponibles
nativement dans
X X X
tous les
X X
navigateurs visés
41. X X X X X Utiliser les
X X X X X fonctionnalités
X X
disponibles
nativement OU
X X X
disponibles avec
X X
des polyfill
JavaScript
42. (n) poly • fill: Un script
JavaScript implémentant des
fonctionnalités HTML5 non
disponibles nativement dans un
navigateur
43. X X X X X
Utiliser 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
52. 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
53. 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/
54. 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
55. 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/
59. • 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!