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

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

Effets 3D

Performance Sémantiques

Hors ligne & stockage

Styles

Connectivité

Multimédia

Accès appareils

Premier brouillon public

Brouillon de travail

Candidat pour la recommendation

Recommendation proposée

Recommendation

Premier brouillon public

Brouillon de travail

Candidat pour la recommendation

Recommendation proposée

Recommendation

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

X X X

X X

X X X

X X

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

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

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

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

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 • Transformations • Compositing • Colors and styles • Line caps/joins • Shadows • Rects • Path API

• Focus management • Drawing images • Text • Pixel Manipulation • Interfaces – CanvasGradient – TextMetrics – 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.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/

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

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 Vorbis

WAV PCM

MP3 AAC Speex

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

(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/HTML5-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