HTML5 MBDS 2015-2016

Introduction

Outils

Nous n'allons pas utiliser d'outils particuliers pour cette formation, uniquement des outils "standards" tels que Eclipse, Sublime Text 2, Notepad++ ou les outils que vous appréciez pour éditer du code. Néanmoins, de nombreux exemples HTML5/JS/CSS seront proposés sur des envrionnements de développement en ligne tels que http://jsbin.com/, http://jsfiddle.net/, http://dabblet.com/ ou http://codepen.io/, particulièrement adaptés pour faire de petits exemples partageables (vous pouvez modifier les exemples, vous les approprier, mais jamais les casser, car pour chaque modification une version est générée, avec son URL unique).

ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT DES OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale :

• JS_Mar14- Writing JavaScript efficiently.pdf (issu du cours JavaScript du W3C)

Partie 1 : découverte des APIs de HTML5

Supports de cours :

• Transparents:
  
  
  • Intro à HTML5 
     
  • HTML5 Canvas (avancé) les exos sont dans les transparents.
     
• PDFs détaillés:
  
  
  • Persistence, drag'n'drop.pdf : contient XhR2/Ajax et drag'n'drop de fichiers, preview des images, etc. Voir File API/drag'n'drop etc.
     
  • New APIs: geolocation, orientation, etc..pdf : voir la partie geolocalisation notamment
     
• Cours en ligne :
  
  
  • la semaine 5 du MOOC HTML5 est dédiée aux formulaires, la semaine 6 contient la geolocalisation, File API, previews d'images etc. C'est la version plus jolie du PDF ci-dessus, en moins complète (pas XhR2, pas drag'n'drop)

Autres ressources :

JavaScript :

• Mes supports de cours JavaScript 
• http://www.codecademy.com/de/tracks/javascript-combined : parfait pour les débutants,
• Le livre complet que j'ai utilisé pour apprendre JavaScript il y a quelques années : http://www.wuala.com/lpuums/JavaScript/Object-Oriented%20JavaScript%20-%20Stoyan%20Stefanov.pdf?lang=fr
• Mozilla Developper Network a un bon guide aussi : https://developer.mozilla.org/en-US/docs/JavaScript/Guide
• POUR CEUX QUI VEULENT VRAIMENT MAITRISER LES ASPECTS AVANCES, un super cours en vidéo interactif: https://www.udacity.com/course/objec...ascript--ud015

CSS :

• http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Exemples_interactifs_CSS
• Les tutoriaux de codeacademy.com sont très bien et gratuits, parfaits pour les débutants
• Procurez vous le livre de Lea Verou, le meilleur sur CSS3: 'CSS Secrets - Better Solutions to Everyday Web Design Problems'