SlideShare uma empresa Scribd logo
1 de 60
Baixar para ler offline
Frédéric Harper @ Microsoft Canada
    @fharper | outofcomfortzone.net
                Mobiz - 2012-11-15
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
+          +
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
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
<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>
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
•   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…
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
•   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
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
<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>
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
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;
}
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
• 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" />
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
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
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
(n) poly • fill: Un script
JavaScript implémentant des
fonctionnalités HTML5 non
disponibles nativement dans un
navigateur
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
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 :(
}
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
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
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
• 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.ca
http://outofcomfortzone.net

Mais conteúdo relacionado

Mais procurados

Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartLa FeWeb
 
Utiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateformeUtiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateformepprem
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptKhalid Jebbari
 
Pizza party - Présentation de famo.us
Pizza party - Présentation de famo.usPizza party - Présentation de famo.us
Pizza party - Présentation de famo.usOffirmo
 
Deboguer Avec Firephp
Deboguer Avec FirephpDeboguer Avec Firephp
Deboguer Avec FirephpDamien Seguy
 
Déboguer une application web avec FirePHP
Déboguer une application web avec FirePHPDéboguer une application web avec FirePHP
Déboguer une application web avec FirePHPJean-Marc Fontaine
 
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019Boris SCHAPIRA
 
Agile Sans Frontières
Agile Sans FrontièresAgile Sans Frontières
Agile Sans FrontièresCARA_Lyon
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPressAurélien Denis
 
Haxe, le graal du développeur touche-à-tout
Haxe, le graal du développeur touche-à-toutHaxe, le graal du développeur touche-à-tout
Haxe, le graal du développeur touche-à-toutFrançois Barbut
 
Wordcamp paris 2015 dev-pragmatique-bonnes-pratiques
Wordcamp paris 2015  dev-pragmatique-bonnes-pratiquesWordcamp paris 2015  dev-pragmatique-bonnes-pratiques
Wordcamp paris 2015 dev-pragmatique-bonnes-pratiquesSylvie Clément
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPressAurélien Denis
 
64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPress64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPressAurélien Denis
 

Mais procurados (17)

Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
 
Utiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateformeUtiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateforme
 
Node.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascriptNode.js et les nouvelles technologies javascript
Node.js et les nouvelles technologies javascript
 
Pizza party - Présentation de famo.us
Pizza party - Présentation de famo.usPizza party - Présentation de famo.us
Pizza party - Présentation de famo.us
 
Deboguer Avec Firephp
Deboguer Avec FirephpDeboguer Avec Firephp
Deboguer Avec Firephp
 
Déboguer une application web avec FirePHP
Déboguer une application web avec FirePHPDéboguer une application web avec FirePHP
Déboguer une application web avec FirePHP
 
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
"WP Super Cache Rocket Reloaded…" – WordCamp Bordeaux 2019
 
Agile Sans Frontières
Agile Sans FrontièresAgile Sans Frontières
Agile Sans Frontières
 
10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress10 conseils pour booster les performances de votre site sous WordPress
10 conseils pour booster les performances de votre site sous WordPress
 
Haxe, le graal du développeur touche-à-tout
Haxe, le graal du développeur touche-à-toutHaxe, le graal du développeur touche-à-tout
Haxe, le graal du développeur touche-à-tout
 
Wordcamp paris 2015 dev-pragmatique-bonnes-pratiques
Wordcamp paris 2015  dev-pragmatique-bonnes-pratiquesWordcamp paris 2015  dev-pragmatique-bonnes-pratiques
Wordcamp paris 2015 dev-pragmatique-bonnes-pratiques
 
Le meilleur pour votre site WordPress
Le meilleur pour votre site WordPressLe meilleur pour votre site WordPress
Le meilleur pour votre site WordPress
 
64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPress64 conneries que font les référenceurs avec WordPress
64 conneries que font les référenceurs avec WordPress
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 

Destaque

Graphic Drawings Proposal
Graphic Drawings ProposalGraphic Drawings Proposal
Graphic Drawings ProposalBetawebsolution
 
Primeiras fotos a cores
Primeiras fotos a coresPrimeiras fotos a cores
Primeiras fotos a coresguest07d190
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebFrédéric Harper
 
Golgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. okGolgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. okHogar
 
Slideshare de gustavo
Slideshare de gustavoSlideshare de gustavo
Slideshare de gustavoHogar
 
WOFF and emerging technology of web fonts
WOFF and emerging technology of web fontsWOFF and emerging technology of web fonts
WOFF and emerging technology of web fontsVladimir Levantovsky
 
Mindful designs: practical tips for designing for cognitive & learning diffic...
Mindful designs: practical tips for designing for cognitive & learning diffic...Mindful designs: practical tips for designing for cognitive & learning diffic...
Mindful designs: practical tips for designing for cognitive & learning diffic...Stamford
 
Aliaonline
AliaonlineAliaonline
AliaonlineSnook
 
Cool Stuff for Web Typography
Cool Stuff for Web TypographyCool Stuff for Web Typography
Cool Stuff for Web TypographyOliver Linke
 
Monique Koepke / Typografie im Web
Monique Koepke / Typografie im WebMonique Koepke / Typografie im Web
Monique Koepke / Typografie im Webwpmeetupka
 

Destaque (11)

Graphic Drawings Proposal
Graphic Drawings ProposalGraphic Drawings Proposal
Graphic Drawings Proposal
 
Primeiras fotos a cores
Primeiras fotos a coresPrimeiras fotos a cores
Primeiras fotos a cores
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
Golgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. okGolgi: tráfico de proteínas. ok
Golgi: tráfico de proteínas. ok
 
Slideshare de gustavo
Slideshare de gustavoSlideshare de gustavo
Slideshare de gustavo
 
WOFF and emerging technology of web fonts
WOFF and emerging technology of web fontsWOFF and emerging technology of web fonts
WOFF and emerging technology of web fonts
 
Mindful designs: practical tips for designing for cognitive & learning diffic...
Mindful designs: practical tips for designing for cognitive & learning diffic...Mindful designs: practical tips for designing for cognitive & learning diffic...
Mindful designs: practical tips for designing for cognitive & learning diffic...
 
Aliaonline
AliaonlineAliaonline
Aliaonline
 
iOS OpenGL
iOS OpenGLiOS OpenGL
iOS OpenGL
 
Cool Stuff for Web Typography
Cool Stuff for Web TypographyCool Stuff for Web Typography
Cool Stuff for Web Typography
 
Monique Koepke / Typografie im Web
Monique Koepke / Typografie im WebMonique Koepke / Typografie im Web
Monique Koepke / Typografie im Web
 

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

Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !matparisot
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5davrous
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !Rossi Oddet
 
Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011Adrien Leygues
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX Group
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIDjamel Zouaoui
 

Semelhante a Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux (20)

HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !Développez dans le futur, dès maintenant !
Développez dans le futur, dès maintenant !
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
MGD Html5 pres fr
MGD Html5 pres frMGD Html5 pres fr
MGD Html5 pres fr
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
 
Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011Flash vs-html5-adrien-leygues-pw-2011
Flash vs-html5-adrien-leygues-pw-2011
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 

Mais de Frédéric Harper

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)Frédéric Harper
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API OverviewFrédéric Harper
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Frédéric Harper
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04Frédéric Harper
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Frédéric Harper
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...Frédéric Harper
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...Frédéric Harper
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Frédéric Harper
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Frédéric Harper
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Frédéric Harper
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30Frédéric Harper
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Frédéric Harper
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Frédéric Harper
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Frédéric Harper
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Frédéric Harper
 

Mais de Frédéric Harper (20)

2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)2017-11-09 - Fitbit Norcal Developers Meetup (fred)
2017-11-09 - Fitbit Norcal Developers Meetup (fred)
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
2018-06-07 - Singapore Fitbit Developers - Fitbit SDK & Web API Overview
 
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
2018 06-05 - Tokyo Fitbit Developers - Fitbit SDK & Web API Overview
 
Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30Public speaking - FDP tech leads summit - 2018-04-30
Public speaking - FDP tech leads summit - 2018-04-30
 
2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon2018 04-25 - HLTH hackathon
2018 04-25 - HLTH hackathon
 
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
From employee to freelance developer in 10 steps - DevTeach - 2017-07-04
 
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
Infrastructure as a service to its maximum, a cultural change - S2LQ - 2016-0...
 
With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...With great power comes great responsibility - Microsoft Canada Open Source co...
With great power comes great responsibility - Microsoft Canada Open Source co...
 
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
Frédéric harper   i don’t like open source, and you shouldn't like it eithe...Frédéric harper   i don’t like open source, and you shouldn't like it eithe...
Frédéric harper i don’t like open source, and you shouldn't like it eithe...
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
 
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...
 
Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07Is your python application secure? - PyCon Canada - 2015-11-07
Is your python application secure? - PyCon Canada - 2015-11-07
 
Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...Personal branding for developers - West Island developers and entrepreneurs m...
Personal branding for developers - West Island developers and entrepreneurs m...
 
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Responsive Web Design, get the best out of your designs - JavaScript Open Day...
Responsive Web Design, get the best out of your designs - JavaScript Open Day...
 
Differentiating yourself humber college - 2015-03-30
Differentiating yourself   humber college - 2015-03-30Differentiating yourself   humber college - 2015-03-30
Differentiating yourself humber college - 2015-03-30
 
Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28Differentiating yourself - Hack Western - 2015-03-28
Differentiating yourself - Hack Western - 2015-03-28
 
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
Le personal branding, plus important que jamais - PHP Québec - 2015-03-05
 
Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...Building a personal brand in the developer community - Codementor Office Hour...
Building a personal brand in the developer community - Codementor Office Hour...
 
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
Ma Carrière Techno - École secondaire St-Henri - 2014-11-27
 

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

  • 1. Frédéric Harper @ Microsoft Canada @fharper | outofcomfortzone.net Mobiz - 2012-11-15
  • 9. + + HTML5 HTML5 CSS3 JavaScript
  • 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
  • 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>
  • 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…
  • 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
  • 26. <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>
  • 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; }
  • 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" />
  • 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
  • 44. Détecte la disponibilité de l’implémentation native des fonctionnalités d’HTML5 & CSS3.
  • 45. if (Modernizr.canvas) { //On dessine avec Canvas! } else { //Pas de support natif :( }
  • 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/
  • 56. 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
  • 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!
  • 60. Frédéric Harper fredh@microsoft.com @fharper http://webnotwar.ca http://outofcomfortzone.net