Vous n'êtes pas connecté. Connexion
|
|
Cours HTML5/NodeJS/Angular etc. Master 2 NTDP 2016-2017De $1Table des matières
IntroductionDans 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é:
Inscrivez-vous à ces deux cours (gratuits), et regardez la table des matières pour vous faire une idée. Par exemple, dans quel cours étudie-t-on la persistence côté client (attention, piège !). OutilsNous 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 https://plnkr.co/, 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 : Partie 1 : découverte des APIs de HTML5Supports de cours :
Autres ressources : JavaScript :
CSS :
Partie 2: écriture d'un moteur de jeu en HTML5/JavaScriptCette partie est prétexte à faire du JavaScript, apprendre à débugger, apprendre à organiser son code, à faire de l'objet, etc. Pour la partie "manipulation du DOM" et autres joyeusetés plus classiques dans un site Web, on verra ça la semaine prochaine. Séance 1
Ici exemple avec les rectangles fait en live pendant le cours : dans la partie JS les différentes manières de faire des objets en JavaScript : http://jsbin.com/qodisu/edit Ici exemple d'un monstre et dans le code il y a les trois manières de créer des objets bien documentées : http://jsbin.com/kafehi/edit Séance 2 : on continue le TP en modifiant le code pour mettre des objets et séparer en fichiersAujourd'hui on va faire les choses suivantes :
Les plus curieux peuvent suivre l'intégralité de la semaine 2 du MOOC HTML5 part 2 sur la programmation de jeux, pour voir comment gérer des écrans (états du jeu : écran de départ, écran game over, etc.), dessiner des images, des sprites animées etc. Ce travail est à rendre pour le lundi 26 Septembre, individuel. A rendre de la manière suivante :
Séance 3 : on va un peu plus loin en JavaScript : héritage (en JS classique, en ES6) et persistence simpleHéritageRessources pour l'héritage :
Exercice à faire : utiliser l'héritage dans votre code pour généraliser la manipulation des objets graphiques. Obligation de tester au moins deux syntaxes (je conseille d'inclure ES6 dans une des deux, c'est l'avenir). PersistenceResources pour la persistence : semaine 5 du Mooc HTML5 part 1, et semaine 3 du MOOC HTML5 part 2 sur IndexedDB Dans un premier temps on étudiera l'api WebStorage qui se compose de LocalStorage et SessionStorage. Vous regardez les vidéos et exemples du MOOC, mais en attendant, on va commencer par ce petit exemple qui montre comment saisir des couples nom/prenom puis les sauvegarder dans le LocalStorage. On verra aussi que ce bout de code récupère les données sauvegardées lorsque la page est rechargée. Exercice à faire : générer un tableau contenant les personnes saisies. Si on reloade la page on veut retrouver le tableau dans l'état où il était.
Deuxième exercice : ajouter la sauvegarde / restauration des high-scores dans votre jeu vidéo. |
Powered by MindTouch Deki Open Source Edition v.8.08 |