L3 Miage : technos Web et preparation pour le Hackaton sante

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

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:

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