• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 

Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux

on

  • 1,279 views

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 ...

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.

Statistics

Views

Total Views
1,279
Views on SlideShare
1,164
Embed Views
115

Actions

Likes
2
Downloads
10
Comments
0

2 Embeds 115

http://outofcomfortzone.net 112
http://feeds.feedburner.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux Presentation Transcript

    • Frédéric Harper @ Microsoft Canada @fharper | outofcomfortzone.net Mobiz - 2012-11-15
    • + +HTML5 HTML5 CSS3 JavaScript
    • Performance Sémantiques Styles Multimédia Effets 3D Hors ligne & Connectivité Accès appareils stockage
    • Premier brouillon Brouillon de Candidat pour la public travail recommandation Recommandation Recommandation proposée
    • <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 • Focus management• Transformations • Drawing images• Compositing • Text• Colors and styles • Pixel Manipulation• Line caps/joins • Interfaces• Shadows – CanvasGradient• Rects – TextMetrics• Path API – 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, et3. Media queries.
    • <link href="mobile.css" rel="stylesheet" media="screenand (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="screenand (min-width:1025px)“ type="text/css" />
    • X X X X X Utiliser seulementX X X les fonctionnalités X X disponibles nativement dans X X X tous les X X navigateurs visés
    • X X X X X Utiliser lesX X X X X fonctionnalités X X disponibles nativement OU X X X disponibles avec X X des polyfill JavaScript
    • (n) poly • fill: Un scriptJavaScript implémentant desfonctionnalités HTML5 nondisponibles nativement dans unnavigateur
    • X X X X X Utiliser lesX X X X X fonctionnalitésX X X X X disponiblesX X nativement ET créer X X X des expériences X X alternatives pour les autres navigateurs
    • Détecte la disponibilité de l’implémentationnative des fonctionnalités d’HTML5 & CSS3.
    • if (Modernizr.canvas) { //On dessine avec Canvas!}else { //Pas de support natif :(}
    • IntroductionContre Jour: http://www.contrejour.ieIlly 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éoSupport des formats: http://en.wikipedia.org/wiki/HTML5_videoPlus que le WebPhoneGap: http://www.phonegap.comHTML5/CSS3/JavaScript for Windows 8: http://j.mp/ZzXznE
    • CanvasCanvas Pad: http://j.mp/Soh0K1Speed Reading: http://j.mp/TZM6LRCanvas & vidéo, blow it up: http://j.mp/XFoA9CAI to Canvas: http://visitmix.com/labs/ai2canvasWeb Open Font FormatIE Test Drive Fonts: http://j.mp/TJ0wy2Font Squirrel: http://www.fontsquirrel.com/Convert otf to woff: http://orionevent.comxa.com/otf2woff.htmlGéolocalisationFoursquare playground: http://fsplayground.cloudapp.net/
    • Responsive Web DesignArticle Ethan Marcotte: http://j.mp/QHkDiWScreenfly: http://quirktools.com/screenfly/Multi-Device Layout Patterns: http://www.lukew.com/ff/entry.asp?1514Livre Responsive Web Design: http://j.mp/TJ1N84Exemples Media Queries: http://mediaqueri.es/Mobile FirstArticle de Luke Woblewski : http://www.lukew.com/ff/entry.asp?933Livre Mobile First: http://www.abookapart.com/products/mobile-firstPrésentation de Luke Woblewsky : http://vimeo.com/38187066Livre Tapworthy: http://shop.oreilly.com/product/0636920001133.do
    • Stratégies d’adoptionWhen can I use: http://caniuse.com/Modernizr: http://www.modernizr.com/DiversInternet Explorer 10 & Windows 8: http://bit.ly/PtZ3OLInternet Explorer 10 Preview pour Windows 7: http://bit.ly/SaL0eYMake Awesome Web: http://makeawesomeweb.com/Dive into HTML5: http://diveintohtml5.info/HTML5 learning: http://msdn.microsoft.com/en-ca/ie/aa740476IE Test drive: http://ie.microsoft.com/testdrive/
    • FrameworksjQuery: 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/OutilsWebMatrix: http://www.microsoft.com/web/webmatrix/jsFiddle: http://jsfiddle.netVisual 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!
    • Frédéric Harper fredh@microsoft.com @fharper http://webnotwar.cahttp://outofcomfortzone.net