M1 informatique - M1 MBDS - Option Web 2.0 2012-2013

Introduction

Bonjour, dans ce cours, nous allons découvrir HTML5 et développer quelques applications amusantes (dont un jeu temps réel muti-participant en réseau qui sera le fil rouge à partir de la seconde séance). HTML5 vous le verrez c'est HTML + CSS + JavaScript, beaucoup de JavaScript, étant donné que HTML5 vient avec un nombre important de nouvelles APIs et qu'il y a dans les tuyaux encore plus d'APIs à venir (pour les jeux, la musique, les mobiles, etc.)

Supports de cours généraux

Séance 1 : survol des possibilités de HTML5, TP à rendre sur les nouveaux éléments de structure et les microdata

Supports généraux vus en cours pour le survol de HTML5

• Transparents: http://slides.html5rocks.com/ et aussi ceux du tutorial que M.Buffa a présenté à la conférence WWW 2012.

• Exemples interactifs: http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/HTML5_discovery_tutorial 

Support de cours concernant les nouveaux tags de structure et les microdata

• Les articles suivants disponibles sur le web:
  • http://dev.opera.com/articles/view/n...ents-in-html5/
  • http://catcubed.com/2009/10/15/the-s...ural-elements/
  • A propos de la balise <time> : http://www.brucelawson.co.uk/2012/best-of-time/
  • A propos de <summary> et <details> : http://www.alsacreations.com/article...s-summary.html
  • A propos des nouveaux attributs data-*: 
    • The W3C specification about data attributes,
    • John Resig's blog post about HTML5 data attributes.
    • HTML5 doctor's article about HTML5 data attributes.
    • Bruce Lawson's demos of video subtitles stored in data- attributes.
  • A propos de l'attribut "download" dans les <a href...>: http://www.htmlfivecan.com/#42
  • A propos de l'attribut "translate": http://rishida.net/blog/?p=831
  • A propos des améliorations dans l'API du DOM: http://www.webdirections.org/blog/ht...e-for-the-dom/
  • A propos des Microdatas HTML5: 
    • http://journal.code4lib.org/articles/6400
    • A propos de l'API JavaScript pour manipuler les Microdata: http://dev.opera.com/articles/view/m...odata-dom-api/ et aussi une implémentation sous la forme d'un plugin jQuery: http://gitorious.org/microdatajs/
    • Annuaire des vocabulaires de référence: http://www.schema.org/
    • Google page abour Rich Snippets and structured data: http://support.google.com/webmasters...n&answer=99170
• Extensions pour navigateurs, scriplet et code JavaScript pour générer automatiquement une table des matières: 
  • Geoffrey Sneddon's on-line HTML5 outliner,
  • Extension pour Chrome: Google HTML5 outliner,ou pour Opera: HTML5 Outliner Opera Extension ou une firefox extension
  • Bookmarklet disponible sur la page Google HTML5 outliner ,
     
• Les exemples suivants: 
  • Exemple de blog bien structuré utilisant les nouveaux tags de structure, mais ne s'affichant pas correctement si on applique un algorithme de génération automatique de table des matières. Ici la version corrigée qui rajoute un <header> dans la partie <nav>.
  • Exemples avec <summary> et <details>: Un exemple simple, un autre qui un <summary> dans un <details>, 
  • Un exemple de <mark>
  • Exemples utilisant les data-* attributes: exemple 1, exemple2 et cet exemple de plugin jquery permettant de définir des éléments de GUI multi-modaux, qui marchent sur Desktop et tablette/smartphone. Faites un "view source".
  • Exemple de dowload "serverless" (demande Chrome 25+).
  • Exemple de différence de performances entre jQuery (dernière version) et l'utilisation native de l'API du DOM 
  • Exemples d'utilisation des Microdatas (attention, les namespaces des vocabulaires sont obsolètes, remplacer par http://www.schema.org/...) et aussi cet exemple avec la description de Michel Buffa.
    

Séance 2 : HTML5 Canvas

Cette semaine nous étudieront un des flash killers de HTML5 : l'élément <canvas>, qui vient avec une API JavaScript très complète pour dessiner, animer, interagir avec l'élément <video> que nous verrons la semaine prochaine, etc.

Supports de cours

• Support de cours utilisé en cours : 
  • HTML5.pdf, chercher le chapitre sur le <canvas>
  • Voir les exemples interactifs : http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/HTML5_discovery_tutorial#Canvas 
     
• Ressources externes : on trouve de nombreux exemples mais la référence numéro 1 est http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/, cliquer dans le menu en haut sur le lien "Home" pour voir de nombreuses démonstrations.

TP 2 : étude et amélioration d'un petit moteur de jeu

Pour ce TP on va partir d'un mini moteur de jeu, pas forcément très bien écrit (voir commentaires dans le code), qui propose au joueur (symbolisé par un petit carré noir déplaçable à l'aide des flèches du clavier) d'atteindre le plus rapidement possible une cible ronde. On a gagné lorsque la cible est atteinte. Au centre il y a un obstacle (un gros rectangle noir animé, on a mis du random sur sa position), et des collisions sont détectées lorsqu'on touche cet obstacle (les obstacles et le joueur deviennent rouges et la vitesse de déplacement est modifiée). On peut aussi, à des fins de debug, déplacer le joueur à la souris (utile pour tester les collisions), mais dans le véritable jeu, cette option sera désactivée.

Exemple en ligne sur http://jsbin.com/acohiv/145 pour voir le source, cliquer en haut à droite sur le lien "edit in jsbin.com":

L'animation est réalisée "à la sauce HTML5", c'est à dire à l'aide de la fonction JavaScript requestAnimationFrame() et non pas à l'aide de la fonction JavaScript setInterval(). Voir le cours pour comprendre les avantages de la première méthode sur la seconde. Vous remarquerez le code assez bizarre au début, pour assurer la compatibilité avec les différentes implémentations expérimentales ainsi qu'un fallback (solution de secours si requestAnimationFrame() n'est pas supporté):

// generic way to set animation up
      window.requestAnimFrame = (function(callback){
          return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(callback){
              window.setTimeout(callback, 1000 / 60);
          };
      })();

Voici la même version de ce programme sans ce code, avec une utilisation supposant que votre navigateur dispose d'une implémentation non expérimentale (cas de Chrome récent par exemple), regardez les appels très simples de mainLoop() et la manière dont cette fonction demande une nouvelle exécution avec requestAnimationFrame() : http://jsbin.com/acohiv/166/edit 

Et voici une seconde version dans laquelle on a rajouté un tableau d'obstacles et viré les valeurs codées en dur : http://jsbin.com/acohiv/142 

Nous vous proposons un petit scénario:

• Au départ on suppose que le jeu de joue à deux (par la suite on pourra proposer un jeu avec un nombre variable de joueurs n). La partie commence au niveau 1. (tiens, il faudra donc penser à créer une structure pour gérer des niveaux !)
• On pourra afficher un compte à rebour (3-2-1 partez !) et un chronomètre ensuite (google est votre ami)
• La partie démarre, le jeu dessine les obstacles et la cible, et les deux joueurs sont placés aléatoirement dans la partie gauche de l'écran. Ils doivent à l'aide des touches du clavier, atteindre le plus rapidement possible la cible. On peut aussi imaginer avoir plusieurs cibles, des cibles qui se déplacent, etc.
• Le niveau se termine lorsque les deux joueurs ont atteint unea cible. Le premier marque (n -1) points, le dernier 0 points, n est le nombre de joueur (à deux, le premier marque 1 point, le dernier zéro).
• On passe alors au niveau suivant.
• La partie se termine lorsque les niveaux sont finis et on affiche le score.

Travail à faire:

1. étudier le code, vous l'approprier, le mettre dans votre environnement de développement, etc. Ne vous gênez pas pour re-écrire ce qui ne vous semble pas très propre...
2. En parallèle, regarder les exemples interactifs proposés dans le cours, ceux des sites donnés en ressources externes...
3. Regarder ce qui manque entre l'exemple et le scénario proposé : niveaux, score, collisions mieux gérées, compte à rebour, chrono, meilleure gestion du temps entre les images (quoique requestAnimationframe() est normalement calé sur du 60 images/seconde si votre machine le permet, mesurer le temps écoulé entre deux images peut être intéressant dans le cas où la machine cible ne tient pas la cadence).
4. N'oubliez pas que par la suite nous allons rendre ce jeu multi-participants en réseau, ajouter des effets sonores, de la musique, peut-être des interactions avec des vidéos, etc.

Vous avez bien sur le droit de changer les graphismes, utiliser des images, des sprites, etc. changer le scénario aussi si vous avez de meilleures idées !

A RENDRE POUR LA SEMAINE PROCHAINE : ce que vous aurez fait dans le sens du scénario pour rendre la démo proposée amusante et jouable. 

Séance 3: courssur le multi media et sur les Web Sockets

Support de cours:

• Site officiel de NodeJS, le serveur qui monte, qui monte...
• Site web officiel de socket.io, lire en particulier la section "how to use", et aller voir sur le wiki si vous avez besoin de fonctionnalités avancées.
• Site officiel du module "express" pour nodeJS, permet de faire un véritable serveur web avec NodeJS, de créer des web services, de faire du MVC, etc. Vous n'aurez certainement pas besoin de tout cela, mais au cas où (liens, docs, démos en hat à droite de la page).

Tp 3: jouons avec les Web Sockets, chat simple et multi-rooms, ajout du chat dans le jeu et partage des positions entre joueurs

• TP 3 M1 IFI-RIF, 2012-2013