L3 Miage : technos Web et preparation pour le Hackaton sante

De $1

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).

Obligatoire : vous inscrire aux MOOCS suivants sur la plateforme edX :

Ces cours sont fait par le W3C (organisme qui fait les standards du Web), Michel Buffa est l'auteur de trois d'entre eux. Ils sont 100% gratuits à moins que vous ne vouliez afficher un certificat sur votre profil LinkedIn.

Certains cours ne démarreront que le premier Octobre, ce n'est pas grave.

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

Transparents sur le canvas HTML5:

URLs des exemples codé par le prof en classe:

A FAIRE POUR LA PROCHAINE SEANCE:

  • Vous inscrire aux quatre MOOCs (voir début de page)
     
  • Contrôle continu (noté): suivre les semaines 3 et 4 du MOOC HTML5 coding essentials and best practices et répondre aux quizzes à la fin des semaines 3 et 4, vous serez noté sur les résultats.
    • Vous me donnerez lors de la prochaine séance le mail que vous avez utilisé pour vous inscrire sur edx. Je pourrai voir vos résultats et ça fera une note de contrôle continu.

  • A RENDRE (noté): une animation d'un bonhomme dessiné dans un canvas, en respectant les bonnes pratiques vues dans le MOOC et en cours (sauvegarde/restauration du contexte, translate/rotate/scale au choix, etc.)
    • Vous le rendrez sous la forme d'un URL jsbin ou codepen, vos noms doivent figurer dans votre exemple en ligne.
    • Si vous avez tout piqué sur le Web et si ça ne respecte pas les bonnes pratiques du cours -> zéro.

Cours 2 et TP2  : objets en JS partie 1

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

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

A RENDRE NOTE POUR LA SEMAINE :

  • Votre bonhomme en objet
     

  • Créer plusieurs objets, si possible de plusieurs types (bonhomme, mouton, obstacle, cercle, on s'en fiche, c'est pour tester les sous-classes)
     
  • Utiliser au moins 3 ou 4 elements input de HTML5 (color, range, number par exemple) pour paramétrer votre jeu (vitesse, taille, nombre, couleur etc)

     
  • Voir https://codepen.io/w3devcampus/pen/M...?editors=0011n comme exemple

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 Nicehttp://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 !