HTML5 pour mon ordinateur et mon mobile

Paris Web 2010 - 16/10/2010
http://www.paris-web.fr/2010/programme/html5-pour-mon-ordinateur-et-mon-mobile.php

Transcript

1. HTML5 pour mon ordinateur et mon mobile Par Mickaël MORIER et François PETITIT OCTO Technology Paris Web, le 16 octobre 2010
2. Coding Dojo : n'ayez pas peur ! 1 PC + 1 vidéoprojecteur 2 accompagnateurs 1 seul développeur à la fois 1 nouveau développeur toutes les 7 minutes
3. MonCV.com, une application HTML5...
4. ...pour ordinateur de bureau...
5. ...pour iPhone...
6. ...pour Android...
7. ...pour iPad...
8. Balises sémantiques Aides à la saisie Contenu éditable Géolocalisation Stockage local Lecture audio/vidéo Cache local Ce que nous utiliserons d'HTML5
9. Notre kit de démarrage Un squelette de page HTML Une feuille de style CSS
10. Qui se lance ? ^^
11. Itération 1 Structurer l'application avec les nouveaux tags sémantiques <aside>, <nav>, <article>, <header>, <footer> http://perso.ovh.net/~petitit/pw10-dojo/
12. Itération 2 Profiter d'aide à la saisie, de validation dans les formulaires Types de champ (email, date, etc.), autofocus, placeholder, pattern
13. Itération 3 Avoir du contenu editable (contenteditable)
14. Itération 4 Stocker en local les paramètres (localStorage)
15. Itération 5 Restituer les paramètres stockés en local et stocker les contenu éditables à la volée
16. Itération 6 Afficher une carte avec notre position (navigator.geolocalisation, Google Maps APIs)
17. Itération 6 (antisèche) http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/tutorial.html
18. Itération 7 Afficher des lecteurs audio et vidéos pour tous les navigateurs (H.264, WebM, Ogg Theora, MP3, Ogg Vorbis)
19. Itération 7 (antisèche)
20. Itération 8 Mettre en cache les fichiers (sauf audio et vidéo) pour consulter notre CV hors ligne Fichier cache.manifest
21. Crédits • Photos libres, www.photo-libre.fr • Squelette http://www.flickr.com/photos/halloweenstock/5004557950/ • Kendra Springer – Hope, http://www.jamendo.com/fr/download/track/469312/?output= • Google Chrome simplicity, http://www.youtube.com/watch?v=P64SfTm1Xqw