confoo - 2012-02-27 au 2012-02-28 - html5 workshop
DESCRIPTION
TRANSCRIPT
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
@fharper
http://webnotwar.ca
http://oocz.net