HTML5, une révolution à plusieurs niveaux

Cet après-midi j'ai fait un survol rapide de 45 minutes sur HTML5 au Mobiz. J'en ai profité pour introduire quelques éléments que je considère révolutionnaire pour HTML5, des éléments que l'on peut utiliser sans crainte dès aujourd'hui.

Pour ceux qui étaient présent, tel que promis, voici ma présentation:

<iframe style="border: 1px solid #CCC; border-width: 1px; margin-bottom: 5px; max-width: 100%;" src="https://www.slideshare.net/slideshow/embed_code/key/CAhO8YUp5eRX1C" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux from Frédéric Harper

Voici quelques ressources et liens vers des exemples que j'ai utilisé durant ma présentation, question de vous faciliter la vie:

Introduction

• Contre Jour: https://www.contrejour.ie
• Illy Issimo: https://us.illyissimo.com/
• Windows Azure: (doit avoir un compte): https://azure.microsoft.com
• SVG girl: https://jsdo.it/event/svggirl/
• W3C HTML Working Group: https://www.w3.org/html/wg/
• La spécification HTML5: https://dev.w3.org/html5/spec/

Vidéo

• Support des formats: https://en.wikipedia.org/wiki/HTML5_video

Plus que le Web

• PhoneGap: https://www.phonegap.com
• HTML5/CSS3/JavaScript for Windows 8: https://j.mp/ZzXznE

Canvas

• Canvas Pad: https://j.mp/Soh0K1
• Speed Reading: https://j.mp/TZM6LR
• Canvas & vidéo, blow it up: https://j.mp/XFoA9C
• AI to Canvas: https://visitmix.com/labs/ai2canvas

Web Open Font Format

• IE Test Drive Fonts: https://j.mp/TJ0wy2
• Font Squirrel: https://www.fontsquirrel.com/
• Convert otf to woff: https://orionevent.comxa.com/otf2woff.html

Géolocalisation

• Foursquare playground: https://fsplayground.cloudapp.net/

Responsive Web Design

• Article Ethan Marcotte: https://j.mp/QHkDiW
• Screenfly: https://quirktools.com/screenfly/
• Multi-Device Layout Patterns: https://www.lukew.com/ff/entry.asp?1514
• Livre Responsive Web Design: https://j.mp/TJ1N84
• Exemples Media Queries: https://mediaqueri.es/

Mobile First

• Article de Luke Woblewski : https://www.lukew.com/ff/entry.asp?933
• Livre Mobile First: https://www.abookapart.com/products/mobile-first
• Présentation de Luke Woblewsky : https://vimeo.com/38187066
• Livre Tapworthy: https://shop.oreilly.com/product/0636920001133.do

Stratégies d’adoption

• When can I use: https://caniuse.com/
• Modernizr: https://www.modernizr.com/

Divers

• Internet Explorer 10 & Windows 8: https://bit.ly/PtZ3OL
• Internet Explorer 10 Preview pour Windows 7: https://bit.ly/SaL0eY
• Make Awesome Web: https://makeawesomeweb.com/
• Dive into HTML5: (doesn't exist anymore)
• HTML5 learning: https://msdn.microsoft.com/en-ca/ie/aa740476
• IE Test drive: https://ie.microsoft.com/testdrive/

Frameworks

• jQuery: https://jquery.com/
• Less Framework: https://lessframework.com/
• Knockout: https://knockoutjs.com/
• Kendo UI: https://www.kendoui.com/
• Backbone.js: https://backbonejs.org/
• HTML5 boilerplate: https://html5boilerplate.com/
• Bootstrap: https://twitter.github.com/bootstrap/

Outils

• WebMatrix: https://www.microsoft.com/web/webmatrix/
• jsFiddle: https://jsfiddle.net
• Visual Studio 2012 Express for Web: https://j.mp/W7BLuZ

Et bien sûr, HTML5mtl. Donc, essayez le et amusez-vous avec HTML5.