L3 Miage : technos Web et preparation pour le Hackaton sante

Introduction

Dans ce cours on va étudier les technologies Web front end (HTML5/CSS3/JS) en vue du Hackaton santé. On se focalisera donc sur les aspects WebApps et multimédia (animation, dessin, audio et video).

Séance 1 : quelques rappels HTML/CSS/JS, présentation d'outils de développement

• Outils de live coding: http://jsbin.com/, http://codepen.io/ ou encore http://liveweave.com/ (super cool pour CSS/SVG) utilisez-les pour vous exercer ou pour trouver des exemples intéressants.
• Editeurs de code: Sublime Text, Visual Studio Code, autres IDEs "lourds" (Eclipse, Netbeans, WebStorm...)

Transparents sur le canvas HTML5:

• Intro à HTML5 
• HTML5 Canvas (avancé) les exos sont dans les transparents.

URLs des exemples codé par le prof en classe:

• Rectangle rouge animé: http://jsbin.com/wetarek/edit?js,output
• Bonhomme animé avec les bras articulés: http://jsbin.com/zizewor/edit?js,output

Cours 2 et TP2  : objets en JS partie 1

Thème: objets simple (pas d'héritage, variable statiques etc.)

• Exemple d'objets faits en cours (personnes) : http://jsbin.com/ximigimuko/edit?js,console,output
   
• Bonhomme animé avec objet singleton/statique: http://jsbin.com/xuxicowicu/1/edit?js,output

A faire pour semaine prochaine:

• Vous inscrire au MOOC JavaScript Intro sur W3Cx (je suis en support dans les forums, je regarde tous les matins)
• Retardataires du MOOC HTML5 coding essentials: finir ce qui était à faire
• Bonhomme en objet
• Si vous y arrivez : plusieurs bonhommes (avec une classe et plusieurs instances)
• Si vous y arrivez : plusieurs types d'objets par ex: un bonhomme, une voiture ou autre... des obstacles.... bref, ce que vous voulez...

Pour ceux qui tracent vite... inscrivez vous au MOOC HTML5 Apps and Games Week 2 sur les jeux HTML5, et fin Week 1 sur WebAudio. FACULTATIF

Cours 3 et TP 3: héritage, tableaux, évènements

• Exemple vu en cours avec cercles et rectangles animés
  
  
• AVANCE: A propos du black box model (fonction constructeur ES5 + API, permet d'avoir des méthodes et attributs publics/privés): https://hacks.mozilla.org/2014/08/bl...in-javascript/
  
  
  • Petit exemple Black Box model et comparaison avec classes ES6 etfonctions constructeur simplesES5: https://codepen.io/w3devcampus/pen/z...L?editors=0011

Cours 4 et TP4 : Open Data, consommer et travailler avec des données de la ville de Nice, multimedia avancé

Pendant le hackaton e-santé il se peut que vous ayez besoin de travailler avec des données ouvertes proposées par la ville de Nice:

• Portail open data de la ville de Nice: http://opendata.nicecotedazur.org/site/
  
  
  • Inscrivez-vous comme développeur sur le site. Vous aurez accès à des liens vers de ressources comme leaflet qui permet d'afficher des données sur des cartes openstreet map etc...
     
  • Exemple jsbin manipulant des données au format geojson avec leaflet (version jsbin d'un des exos du tutorial leaflet) : http://jsbin.com/riqecuk/edit?css,js,output
     
  • Exemple Google map utilisant des données geojson: https://jsbin.com/pahecel/edit?html,css,output c'est une version jsbin d'un des exemples du tuto de la Google Map API (lien obtenu en cherchant sur Google "google map geojson").
    
    Pour faire tourner cet exemple en local, il a fallu copier/coller le code dans des fichiers index.html et js et css, puis tester en local AVEC UN SERVEUR HTTP. File:// ne fonctionnait pas. On a utilisé l'extension "web server for Chrome" pour installer un mini serveur dans le browser directement (on le lance via l'icone des applications).
    
    N'oubliez pas les soucis liés à https / http, une page https ne peut manipuler de données http, cf la console d'erreur.
    
    Il peut aussi y avoir des erreurs liées au "cross domain", tous les serveurs n'acceptent pas forcément des requêtes AJAX provenant du JavaScript d'une page servie par un autre serveur.
     
•  Multimédia avancé:
  
  
  • Lecteur video custom, chapitrage, sous-titres, boutons customs, écouteurs d'événements, récupérer la durée, le temps courant, etc. Voir MOOC "HTML5 Coding essentials and best practices" sur la chaine W3Cx (chercher "W3Cx" sur Google)
     
  • Chapitrage, transcipts clickables, syncroniser une google map ou une page wikipedia (ou autre) pendant que la vidéo est lue : voir la MOOC "HTML5 Apps and Games" qui poursuit dans sa semaine 1 l'étude du multimédia en HTML5.

Séance 5: Mini projet à rendre en binôme 

On va essayer d'être créatifs, vous allez développer une animation ou un mini jeu pour les JNMs 2018. Il pourra utiliser un canvas, ou des videos interactives, ou être un QCM (cf MOOC). Il pourra être une suite de ce que vous avez commencé à faire en TP.

Parties obligatoires:

• Utiliser des classes ES6 et de l'héritage, si vous avez suivi des cours sur ES6 en plus de ce qu'on a vu en cours et en plus du MOOC JS Intro, vous pouvez utiliser l'ensemble des possibilités de ce langage.
   
• Si vous avez fait un moteur de jeu comme dans le MOOC HTML5 Apps and Games, avec une fonction constructeur et le Black Box model, vous pouvez continuer à l'utiliser.
   
• L'animation graphique devra respecter les bonnes pratiques vues en cours (ctx.save() au début, ctx.restore() à la fin, des ctx.translate(...), rotate(...) ou (scale)..., utiliser requestAnimationFrame pour la boucle d'animation principale, pas setInterval (qui peut néanmoins être utilisé pour des animations "autres", moins cruciales que la boucle principale).
   
• Il devra y avoir des éléments de formulaires pour régler certains paramètres ou entrer son nom.
   
• IL DEVRA Y AVOIR DE L'INTERACTIVITE à la souris ou au clavier ou avec une manette de jeu (cf MOOC HTML5 Apps and Games)
   
• Le son et la musique sont un plus.
   
• JE VOUS AIDE PAR MAIL POUR FAIRE DES TRUCS QUE VOUS N'ARRIVEZ PAS A FAIRE. MAIS PAS AU DERNIER MOMENT.
   
• SI DU CODE EST RECUPERE DU NET pour des parties "annexes" ça va, mais vous devrez donner l'URL de la source. Ne récupérez pas un moteur de jeu ou un jeu tout fait. Je serai sévère dans ce cas.

Modalités de rendu :

• Date limite: avant les vacances de Noël. Je n'accepterai pas de retard car je ne veux pas que vous travailliez pendant les vacances.
   
• Modalités de rendu : un zip ou rar ou mailez moi le repository github, par binome. Si zip ou rar, vos noms doivent être dans le nom de l'archive.
   
• Un repository github plutôt qu'un zip, possèdant un historique de développement, est un plus évident pour la note finale. En gros, apprenez à utiliser github dès le début du projet. Vous pouvez aussi mettre en ligne votre jeu sur les github pages. Débrouillez-vous pour comprendre de quoi je parle !