Cours HTML5/NodeJS/Angular etc. Master 2 NTDP 2015-2016

De $1

Version de 08:13, 17 Oct 2018

cette version.

Revenir à liste des archives.

Voir la version actuelle

Introduction

Dans 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é:

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 :

Partie 1 : découverte des APIs de HTML5

Supports de cours :

Autres ressources :

JavaScript :

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

Partie 2: écriture d'un moteur de jeu en HTML5/JavaScript

Séance 2

A rendre pour la semaine prochaine (seul ou en binome):

  • Un petit jeu basé obligatoirement sur le framework vu en cours,
  • Il est impératif d'avoir un joueur contrôlé au clavier ou à la souris (ou les deux)
  • De l'animation (normal) avec requestAnimationFrame
  • Des collisions, un petit scénario
  • Un score, des sons avec HowlerJS
  • Des états (au minimum: menu principal, jeu, game over), regarder par exemple comment cet exemple gère les états.
  • Facultatif: plusieurs niveaux, des images...

Vous rendrez le jeu lors de la prochaine séance (je passerai vous voir, vous me donnerez un zip + un README, lien jsbin.com aussi accepté, pratique pour des démos).

Seéance 3: initiation NodeJS / WebSockets

NTDP Casablanca: programmes réalisés en classe et mini projet

Fait en classe, en live coding:

Jeu du lapin avec les boules de Noël:

  • Lien (marche sur desktop, tablettes, téléphones, responsif, jouable à la souris ou aux doigts): mainline.i3s.unice.fr/mooc/SkywardBound
  • Sources: skywardbound 2016-01-14 0040.zip 

Librairie pour charger des sons et les jouer dans un jeu: HowlerJS 

Explosions avec moteur de particules (prendre le fichier particules.js dans les sources du lapin et regarder dans le jeu et dans ce jsbin comment c'est utilisé):

Mini projet à rendre

Vous devez faire un jeu en continuant ce que vous avez fait pendant la semaine de cours.

IL EST IMPERATIF QUE CE SOIT LA SUITE DU TP ! Que le code respecte les bonnes pratiques vues en cours et aussi dans les MOOCs HTML5. 

Si vous piquez des trucs sur le Web, et que vous citez les sources, ça va. Si vous piquez à un autre groupe, si vous le dites, ça va (mais faut pas exagérer...), etc... Copiez, mais intelligemment et honnêtement ! Si vous ne respectez pas ces règles -> zéro sans hésiter.

Le jeu sera fait en binôme:

Vous livrerez une archive .zip ou .rar :

  • Le nom de l'archive sera NTDP_CASA_2015_2016_Nom1_Nom2.zip
     
  • Dans l'archive:
    • Les sources du jeu si le jeu est en plusieurs fichiers, avec images, sons etc...
      • Si le jeu est en plusieurs fichiers, hébergez-le quelque part et donnez le lien pour le tester directement en ligne !
    • Un fichier Readme.txt expliquant comment jouer, de quoi il s'agit etc.
    • Vos noms et emails doivent aussi être dans ce readme.
    • Si votre jeu est aussi sur jsbin.com, donner le lien vers la démo, c'est super pour moi pour le montrer aux élèves, pour le corriger, etc.
    • Le jeu doit avoir une mécanique simple de jeu, des niveaux, un score, un écran d'accueil, un écran game over, etc...
       
  • Facultatif: 
    • Gestion des meilleurs scores, voir comment les sauvegarder dans le MOOC partie 1, semaine 6 sur la persistence avec LocalStorage,
    • Musique et sons sont fortement appréciés par le jury Buffa (Michel Buffa, sa femme et ses enfants)
    • L'aspec artistique est également noté, attention ;-)
    • Si le jeu me captive, est amusant, et m'occupe pendant plus de cinq minutes, c'est un bonus assuré sur la note finale. Si je me prends à vouloir faire des scores et si j'y joue encore le lendemain, vous devenez immédiatement le dieu de l'EMSI.

Modalités de rendu:

  • Sara s'occupera de déposer une grosse archive contenant tous les projets sur un répertoire dropbox qu'elle partagera avec moi.
     
  • Date limite de rendu: le dimanche 6 Mars à minuit !