SlideShare une entreprise Scribd logo
1  sur  97
Télécharger pour lire hors ligne
Confoo- 2012-02-27/28
Frédéric Harper - Microsoft Canada
   @fharper | outofcomfortzone.net
The Internet Explorer 6 countdown
http://www.ie6countdown.com/

Cut the rope
http://www.cuttherope.ie/

Illy Issimo
http://us.illyissimo.com/
•   Formation du WHATWG en 2004
    Web Hypertext Application Technology Working Group


•   Repris par le W3C en 2007
    World Wide Web Consortium
•   40 organisations membres
    dont Opera, Mozilla, Microsoft, Apple…

•   400+ participants

•   280+ experts invités
+          +
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             recommendation




              Recommendation
                                      Recommendation
                 proposée
Premier brouillon          Brouillon de           Candidat pour la
     public                   travail             recommendation




              Recommendation
                                      Recommendation
                 proposée
W3C HTML Working Group
http://www.w3.org/html/wg/

La spécification HTML5
http://dev.w3.org/html5/spec/

HTML5/CSS3 cheatsheet (vieux d’un an)
http://www.storiesinflight.com/html5/index.html

The Best HTML5 and CSS3 Cheat Sheets of 2011
http://www.evolutionarydesigns.net/blog/2011/12/28/
the-best-html5-and-css3-cheat-sheets-of-2011/
X   X   X   X   X   Utilisez 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   Utilisez 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
                    Utilisez 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
When can I use
http://caniuse.com/

Haz.io
http://haz.io/

Mobile HTML5
http://mobilehtml5.org/

Modernizr
http://www.modernizr.com/
•   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
Une extension pour Adobe Illustrator
permettant de prendre un fichier vectoriel
(.AI) et de le transformer en code HTML
(Canvas)
Canvas Pad
http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.htm
l

Speed Reading
http://ie.microsoft.com/testdrive/Performance/SpeedReading/Defa
ult.html

When can I use Canvas
http://caniuse.com/#feat=canvas

Canvas video, blow it up
http://craftymind.com/factory/html5video/CanvasVideo.html

AI to Canvas
http://visitmix.com/labs/ai2canvas/
•   SVG = “Scalable Vector Graphics”

•   Comme HTML, SVG est construit dans le
    document utilisant des éléments, attributs et
    styles.

•   De ce fait, on peut le modifier avec du
    JavaScript et CSS.
Logo HTML5
http://upload.wikimedia.org/wikipedia/commons/6/6e/H
TML5-logo.svg

SVG girl
http://jsdo.it/event/svggirl/

When can I use SVG
http://caniuse.com/#feat=svg

SVG Cheat Sheet
http://www.cheat-sheets.org/own/svg/index.xhtml
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;
}
Foursquare playground
http://fsplayground.cloudapp.net/

When can I use Geolocation
http://caniuse.com/#feat=geolocation
<audio src="audio.mp3" id=“monAudio" autoplay>
  <!– Flash/Silverlight audio -->
</audio>
autoplay

controls

loop

preload: auto, metadata, none

src: url
Ogg WAV MP3 AAC Speex
                              Vorbis PCM
Trident - Internet Explorer


Gecko - Firefox


Webkit - Safari & Chrome


Presto - Opera
<audio src="audio.mp3" id=“monAudio" autoplay>
  <source src=“audio.wav”>
  <source src=“audio.ogg”>
</audio>
Canvas Love
http://9elements.com/io/projects/html5/canvas/

When can I use Audio
http://caniuse.com/#feat=audio

Plink
http://labs.dinahmoe.com/plink/

When can I use Audio API
http://caniuse.com/#feat=audio-api

HTML5Rocks Web Audio API Introduction
http://caniuse.com/#feat=audio-api
Une librairie JavaScript qui simplifie la
gestion des événements, les animations, les
interactions AJAX…
Less Framework est une grille CSS qui aide
à construire un site avec le principe de
Responsive Web Design (design
adaptatif).
Une librairie JavaScript qui simplifie le
JavaScript dynamique au UI (User
Interface) en appliquant le MVVM (Model
View ViewModel).
Un framework aidant au niveau UI avec
des grilles, chart, combobox… Aussi utile
pour du “data binding”, animations…
Une librairie JavaScript qui simplifie le
“data binding” représentant vos données
comme un Models, qui peut être créé,
validé, détruit...
Un gabarit de base HTML, CSS et
JavaScript.
Plusieurs librairies sont disponibles sur le
Web et bien d’autres voient le jour. À vous
de trouver celui qui répondra à vos
besoins!
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/
•   Détecte la disponibilité de l’implémentation
    native des fonctionnalités d’HTML5 & CSS3.

•   N’est pas un polyfill: aucune émulation de
    fonctionnalités.
if (Modernizr.canvas) {
   //On dessine avec Canvas!
}
else {
   //Pas de support natif :(
}
<style type="text/css" media="screen">
   div.wsno, div.wsyes { display: none }
   .no-websockets div.wsno { display: block }
   .websockets div.wsyes { display: block }
</style>
•   @font-face        •   Geolocation API
•   Canvas            •   localStorage
•   Canvas Text       •   SVG
•   HTML5 Audio       •   Drag and Drop
•   HTML5 Video       •   Web Sockets
•   CSS Animations    •   Web Workers
•   CSS Columns       •   IndexedDB
•   CSS Gradients     •   Input Types
•   CSS Reflections
                      • et bien plus…
(n) poly • fill: Un script
JavaScript implémentant des
fonctionnalités HTML5 non
disponibles nativement dans un
navigateur
Modernizr
http://www.modernizr.com/

HTML5 Cross Browser Polyfills Modernizr collection
https://github.com/Modernizr/Modernizr/wiki/HTML
5-Cross-browser-Polyfills
Disponible gratuitement sous Windows,
Mac OS X et Linux.
Disponible gratuitement sous Windows.
Disponible gratuitement sous Windows,
Mac OS X et Linux.
Disponible gratuitement sous Windows
Outil en ligne pour tester et partager
HTML5 étant assez récent, les outils avec
une complétation automatique ou
WYSIWYG (What You See Is What You
Get) ne sont pas disponibles en grande
quantité encore…
Aptana
http://aptana.com/

WebMatrix
http://www.microsoft.com/web/webmatrix/

NetBeans
http://netbeans.org/

Visual Web Developer Express
http://www.microsoft.com/visualstudio/en-us/products/2010-
editions/visual-web-developer-express

jsFiddle
http://jsfiddle.net
1. Essayez-le
1. Essayez-le

2. Lisez sur le sujet
1. Essayez-le

2. Lisez sur le sujet

3. Faite des projets tests
1. Essayez-le

2. Lisez sur le sujet

3. Faite des projets tests

4. Implémentez-le dans vos projets au bureau
1. Essayez-le

2. Lisez sur le sujet

3. Faite des projets tests

4. Implémentez-le dans vos projets au bureau

5. Ayez du plaisir!
HTML5mtl – Groupe d’utilisateurs HTML5 à Montréal
http://www.meetup.com/HTML5mtl/

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/

A book Apart
http://www.abookapart.com/

A list Apart
http://www.alistapart.com/
Frédéric Harper

Developer Evangelist @ Microsoft
           fredh@microsoft.com
                       @fharper

           http://webnotwar.ca
                 http://oocz.net

Contenu connexe

Tendances

HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
Khaled Djebloun
 

Tendances (13)

Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
 
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
Tirer parti des périphériques mobiles dans une application web : qui a dit qu...
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 
Responsive logic - Kiwiparty
Responsive logic - KiwipartyResponsive logic - Kiwiparty
Responsive logic - Kiwiparty
 
Html5 bonnes-pratiques
Html5 bonnes-pratiquesHtml5 bonnes-pratiques
Html5 bonnes-pratiques
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Drupal & responsive
Drupal & responsiveDrupal & responsive
Drupal & responsive
 
Que l'esprit de la bidouille soit avec vous
Que l'esprit de la bidouille soit avec vousQue l'esprit de la bidouille soit avec vous
Que l'esprit de la bidouille soit avec vous
 
Développement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs WebDéveloppement Web - HTML5, CSS3, APIs Web
Développement Web - HTML5, CSS3, APIs Web
 
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
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
Comparatif des frameworks js mv
Comparatif des frameworks js mvComparatif des frameworks js mv
Comparatif des frameworks js mv
 
WP day Algérie : Concevoir un plugin WordPress
WP day Algérie : Concevoir un plugin WordPressWP day Algérie : Concevoir un plugin WordPress
WP day Algérie : Concevoir un plugin WordPress
 

Similaire à Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
Djamel Zouaoui
 

Similaire à Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop (20)

Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
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!
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
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
 
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 !
 
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 !
 
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
 
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
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
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
 
Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
USI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SIUSI 2009 - Du RIA pour SI
USI 2009 - Du RIA pour SI
 
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
 
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
 

Plus de 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-30
Fré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-28
Frédéric Harper
 

Plus 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
 

Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop