![]() |
![]() |
MBDS Casablanca 2015-2016: HTMl5/JSDe $1IntroductionDans ce cours nous allons vous présenter les grandes parties de HTML5, puis nous ferons des rappels sur JavaScript. Enfin, nous développerons des exemples utilisant les APIs de HTML5 en JavaScript. Michel Buffa est l'auteur de deux MOOCs gratuits (en anglais) sur HTML5, couvrant toute la spécifications, mais aussi avec des sections dédiées à l'écriture de jeux HTML5 et au multimédia avancé:
OutilsNous n'allons pas utiliser d'outils particuliers pour cette formation, uniquement des outils "standards" tels que Eclipse, Sublime Text , 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 environnements 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 : Première partie : introduction des technologies web, panorama général
Ressources à garder dans un coin et à regarder si on est curieux : JavaScript :
CSS :
HTML5 :
Deuxième partie : rappel des bases de JavaScriptOn va procèder cette fois-ci à une séance de live coding via l'outil jsbin.com, puis ce sera à vous de jouer... On mettra ici les exemples développés en cours. Cours JavaScript : http://mainline.i3s.unice.fr/JavaScr...des/index.html Exemple fait en classe: comment inclure du JavaScript dans du HTML, bonnes pratiques (méthode init appelée quand la page est chargée, etc), et exemples d'objets et de tableaux dans fichier2.js (ouvrir index.html et regarder la console): Exemples fait en 2015-2015:
Troisième partie : le canvas HTML5
Dernière version du jeu fait en classe: http://jsbin.com/torete/edit?js,output Projet MBDS à rendre pour la semaine après le projet de Nicolas PastorellySujet du projet: le jeu HTML5 + sauvegarde et affichage des hi-scores avec nodeJS/Express/MongoDB en Ajax. Modalités de rendu:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |