confoo - 2012-02-27 au 2012-02-28 - html5 workshop

97
Confoo- 2012-02-27/28 Frédéric Harper - Microsoft Canada @fharper | outofcomfortzone.net

Upload: frederic-harper

Post on 07-Nov-2014

1.553 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Confoo- 2012-02-27/28

Frédéric Harper - Microsoft Canada

@fharper | outofcomfortzone.net

Page 5: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 6: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

The Internet Explorer 6 countdown http://www.ie6countdown.com/

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

Illy Issimo http://us.illyissimo.com/

Page 7: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 8: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

• Formation du WHATWG en 2004 Web Hypertext Application Technology Working Group

• Repris par le W3C en 2007 World Wide Web Consortium

Page 9: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

• 40 organisations membres dont Opera, Mozilla, Microsoft, Apple…

• 400+ participants

• 280+ experts invités

Page 10: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

HTML5

+ + HTML5 CSS3 JavaScript

Page 11: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Effets 3D

Performance Sémantiques

Hors ligne & stockage

Styles

Connectivité

Multimédia

Accès appareils

Page 12: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Premier brouillon public

Brouillon de travail

Candidat pour la recommendation

Recommendation proposée

Recommendation

Page 13: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Premier brouillon public

Brouillon de travail

Candidat pour la recommendation

Recommendation proposée

Recommendation

Page 14: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 15: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 16: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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/

Page 17: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 18: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

X X X X X

X X X

X X

X X X

X X

Utilisez seulement les fonctionnalités disponibles nativement dans tous les navigateurs visés

Page 19: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Utilisez les fonctionnalités disponibles nativement OU disponibles avec des polyfill JavaScript

X X X X X

X X X

X X

X X X

X X

X X

Page 20: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

(n) poly • fill: Un script JavaScript implémentant des fonctionnalités HTML5 non disponibles nativement dans un navigateur

Page 21: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Utilisez les fonctionnalités disponibles nativement ET créer des expériences alternatives 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

Page 25: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 26: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

When can I use http://caniuse.com/ Haz.io http://haz.io/ Mobile HTML5 http://mobilehtml5.org/ Modernizr http://www.modernizr.com/

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

• 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…

Page 32: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 33: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

• 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

Page 34: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 35: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Une extension pour Adobe Illustrator permettant de prendre un fichier vectoriel (.AI) et de le transformer en code HTML (Canvas)

Page 36: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Canvas Pad http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html Speed Reading http://ie.microsoft.com/testdrive/Performance/SpeedReading/Default.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/

Page 37: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 38: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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

Page 41: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 42: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 43: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 44: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 45: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Logo HTML5 http://upload.wikimedia.org/wikipedia/commons/6/6e/HTML5-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

Page 46: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 48: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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;

}

Page 49: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 50: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 51: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Foursquare playground http://fsplayground.cloudapp.net/

When can I use Geolocation http://caniuse.com/#feat=geolocation

Page 52: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 54: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

<audio src="audio.mp3" id=“monAudio" autoplay>

<!– Flash/Silverlight audio -->

</audio>

Page 55: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

autoplay

controls

loop

preload: auto, metadata, none

src: url

Page 56: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 57: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Ogg Vorbis

WAV PCM

MP3 AAC Speex

Trident - Internet Explorer

Gecko - Firefox

Webkit - Safari & Chrome

Presto - Opera

Page 58: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

<audio src="audio.mp3" id=“monAudio" autoplay>

<source src=“audio.wav”>

<source src=“audio.ogg”>

</audio>

Page 60: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 61: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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

Page 62: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 63: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Une librairie JavaScript qui simplifie la gestion des événements, les animations, les interactions AJAX…

Page 64: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Less Framework est une grille CSS qui aide à construire un site avec le principe de Responsive Web Design (design adaptatif).

Page 65: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Une librairie JavaScript qui simplifie le JavaScript dynamique au UI (User Interface) en appliquant le MVVM (Model View ViewModel).

Page 66: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Un framework aidant au niveau UI avec des grilles, chart, combobox… Aussi utile pour du “data binding”, animations…

Page 67: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Une librairie JavaScript qui simplifie le “data binding” représentant vos données comme un Models, qui peut être créé, validé, détruit...

Page 68: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Un gabarit de base HTML, CSS et JavaScript.

Page 69: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Plusieurs librairies sont disponibles sur le Web et bien d’autres voient le jour. À vous de trouver celui qui répondra à vos besoins!

Page 70: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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/

Page 71: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 72: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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

Page 73: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 74: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

if (Modernizr.canvas) {

//On dessine avec Canvas!

}

else {

//Pas de support natif :(

}

Page 75: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

<style type="text/css" media="screen">

div.wsno, div.wsyes { display: none }

.no-websockets div.wsno { display: block }

.websockets div.wsyes { display: block }

</style>

Page 76: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

• @font-face • Canvas • Canvas Text • HTML5 Audio • HTML5 Video • CSS Animations • CSS Columns • CSS Gradients • CSS Reflections

• Geolocation API • localStorage • SVG • Drag and Drop • Web Sockets • Web Workers • IndexedDB • Input Types • et bien plus…

Page 77: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

(n) poly • fill: Un script JavaScript implémentant des fonctionnalités HTML5 non disponibles nativement dans un navigateur

Page 78: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 80: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 81: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Modernizr http://www.modernizr.com/

HTML5 Cross Browser Polyfills Modernizr collection https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Page 82: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 83: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Disponible gratuitement sous Windows, Mac OS X et Linux.

Page 84: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Disponible gratuitement sous Windows.

Page 85: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Disponible gratuitement sous Windows, Mac OS X et Linux.

Page 86: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Disponible gratuitement sous Windows

Page 87: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Outil en ligne pour tester et partager

Page 88: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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…

Page 89: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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

Page 90: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Page 91: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

1. Essayez-le

Page 92: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

1. Essayez-le

2. Lisez sur le sujet

Page 93: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

1. Essayez-le

2. Lisez sur le sujet

3. Faite des projets tests

Page 94: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

1. Essayez-le

2. Lisez sur le sujet

3. Faite des projets tests

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

Page 95: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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!

Page 96: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

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/

Page 97: Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop

Frédéric Harper

Developer Evangelist @ Microsoft

[email protected]

@fharper

http://webnotwar.ca

http://oocz.net