Cours Web 2.0 / HTML5 / JS 2014-2015

Introduction

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 :

• JS_Mar14- Writing JavaScript efficiently.pdf (issu du cours JavaScript du W3C) 

Partie 1 : découverte des APIs de HTML5

Supports de cours :

• Intro à HTML5 
• HTML5 Canvas (avancé) les exos sont dans les transparents.
• Exemple de 3 canvas placés les uns sur les autres, et on dessine ou on efface les canvas séparément les uns des autres : http://jsbin.com/pehov/2/edit
• Exemple de video webcam + canvas en overlay par dessus, transparent : http://jsbin.com/ipeyal/255/edit

Travail à rendre pour le mardi 30/9 pendant le prochain cours (compte comme note de Contrôle Continu)

• Un bonhomme ou une tête animée, interactive, qui réagit à la souris ou au clavier, qui se déplace, etc... Vous devrez utiliser les bonnes pratiques vues en cours concernant les canvas (sauvegarde du contexte, transformations géométriques etc). Contraintes : utiliser au moins une texture vidéo, un dégradé, des patterns/textures. Faire preuve d'originalité paye ici. Copier des trucs sans réfléchir sur le net dégrade la note, s'en inspirer intelligemment et indiquer où vous avez piqué des trucs est une bonne pratique qui peut rapporter des points :-) Bonus : mettre des contrôlleurs HTML (sliders, boutons, etc.) pour paramétrer des choses (couleur, taille, vitesse, etc...), lire le chapitre du cours sur les formulaires HTML5.
  • Exemple de video dessinée dans un cercle dans un canvas : http://jsbin.com/daquy/2/edit
• Vous étudierez le ou les exemples de visualisation de données figurant dans les transparents. Vous pourrez les étudier dans un onglet séparé en cliquant sur le menu "save". Le travail à fournir consiste à implémenter deux nouveaux types de visualisation -à la Excel / charts / etc.... A vous de voir. Mêmes commentaires que précédemment.
• Vous devrez rendre ces projets sur jsbin.com, jsfiddle.net ou l'IDE en ligne que vous voulez. Vous devrez également me rendre un zip avec les fichiers html/css/js correspondants (en gros, la même application mais avec des fichiers séparés, pas des balises <style> et <script>...). Le zip portra comme nom : VOTRE_NOM_TD1_HTML5.zip, il contiendra un fichier README.txt avec les explications, ressources web utilisées etc.
• Travail à faire de manière individuelle (mais vous avez le droit de vous faire aider si vous êtes perdus).

Tout ajout digne d'intérêt sera pris en compte... (au lieu d'un bonhomme animé vous faites un petit jeu, au lieu d'un chart simple vous faires un chart animé, etc.) Une seule règle : amusez-vous, faites vous plaisir, le canvas c'est assez amusant et c'est un bon prétexte pour pratiquer JavaScript.

Partie 2 : geolocalisation, Web Sockets et applications multi-supports

Support de cours:

• Cours HTML5 de Michel Buffa sur les APIs JS de HTML5
• Exemples d'utilisation de Google Map dans les exemples HTML5 que je vous ai préparés,

Cette semaine nous allons jouer avec d'autres APIs de HTML5 et d'autres standards importants du W3C comme WebRTC. Nous allons réaliser une application mélangeant géo-localisation, cartographie et WebSockets pour ajouter un aspect multi-participant au projet.

Le scénario de l'application que nous développerons est le suivant: Germaine est à la maison et son mari et ses enfants (majeurs) font le Marathon du Médoc, une course spéciale où chaque étape se passe chez un producteur de vin et où il faut goûter les meilleures bouteilles ! Les coureurs sont équipés de smartphone, et peuvent chatter, partager des photos prises par la web cam, envoyer des emoticones et des messages prédéfinis, parfois assortis d'effets sonores, tels que:

• Je suis mort,
• J'en peux plus,
• Je vomis,
• Je vais gagner,
• Je suis un gros nul,
• etc.... je compte sur votre créativité !

Et l'application devra aussi fonctionner hors connexion (enregistrer les positions et message à l'aide d'un des mécanismes de persistence de HTML5) puis lorsqu'une connexion est de nouveau disponible, envoyer les infos en attente.

Nous allons réaliser cette application en "fil rouge" au sein de plusieurs séances de TPs.

Travail à faire

1. Etudier les exemples utilisant la géolocalisation du cours, chercher sur internet comment utiliser Google Maps ou Open Street Map, notamment pour visualiser une carte interactive centrée sur une position et ajouter/enlever des points d'intérêts (les petites gouttes oranges cliquables). On voudra visualiser plusieurs personnes sur la carte...
2. Ecrire une page web affichant en temps réel sa position Lat/Long + la carte mise à jour. Vous irez vous promener avec votre téléphone ouvert sur cette page, la position doit changer. Vous utiliserer la fonction d'API watchPosition au lieu de getCurrentPosition.
3. Tutorial montrant comment écrire une application de chat simple, puis une autre gérant les "salles de chat". Utilise le serveur NodeJS et le module très populaire socket.io pour ce serveur (mais qui a été porté en Java, C#, objective C, etc...) : http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/M1_informatique_-_M1_MBDS_-_Option_Web_2.0_2012-2013/TP_2_Web_Sockets_Master_Info_2013-2014 
4. Vous intégrerez 1, 2 et 3 pour réaliser l'application décrite. Votre enseignant affinera cette partie au fil des TPs.

Exemple de tracking temps réel de la position:

// get an id of the current tracking, the showPosition callback is like the one we saw in earlier examples.
var watchPosId = navigator.geolocation.watchPosition(showPositionCallback);
...
// stop the tracking
navigator.geolocation.clearWatch(watchPosId);

Screenshotsd'une version simplifiée de l'application de Marathon:

Ici on voir l'interface mobile et l'interface desktop. On vient de cliquer sur le bouton "je vomis", et on voit clairement sur la carte un petit bonhomme jaune qui vomit en vert... Notez que cette application utilisait Open Street Map qui est un concurrent "ouvert" de Google Maps. Pour la zone de Sophia Antipolis, OSM donne plus de détails que GMaps...

Heberger une application NodeJS

Tout est là: https://github.com/joyent/node/wiki/node-hosting, à vous de choisir le bon hébergeur. En général c'est gratuit soit pour une durée déterminée, soit si votre application n'est pas très grosse (c'est souvent le cas).

Partie 3 : formulaires, persistence, drag'n'drop

Support de cours: 

• Formulaires HTML5 
  • Bon tutorial : http://webdesign.tutsplus.com/tutori...webdesign-4738
• Persistence HTML5 

Exercices

• Générer un tableau HTML de personnes (nom, prenom, date de naissance, email, nombre d'enfants) à partir d'un tableau JSON sauvegardé dans le localStorage,
• Ecrire dans la même page ou dans une autre page un formulaire de saisie qui va utiliser des champs input de HTML5 pour le mail, un slider pour le nombre d'enfants, un champs type=date pour la date, etc, qui permettra d'ajouter une personne dans la base de données située dans le localStorage puis de réafficher le tableau avec les nouveaux éléments,
• Ajouter la possibilité de faire du drag'n'drop dans le tableau pour supprimer une ligne du  tableau (cela supprimera aussi  la données dans le localStorage)
  • Les icônes dont vous pouvez vous servir : trash.png (poubelle) et document.png (colonne de gauche du tableau),

Partie 4 : prise en main d'AngularJS

• Premiers pas avec Angular 

Partie 5 : présentations par les étudiants

Modalités 

• Date : le 10 Novembre
• 20 minutes par groupe, préparer des slides (ah, dans quel format ? Ce serait bien que vous regardiez les différentes possibilités pour faire des slides en HTML: google presentation, reveal.js, etc.)
• Préparer une page web quelque part avec lien vers les transparents + des resources web et éventuellement un ou deux exos / tutorials à faire.

Sujets

• Bootstrap: Brice Fernandez et Julien Blacas
  • Les transparents : Lien google presentation
  • Sources : http://getbootstrap.com/
  • Live coding : http://www.bootply.com/<wbr/>resko06/HhfEEdZJC0
    
    
• GIT : Philippe Segatori
  • Lien vers un document google doc qui contient les commandes et les scénarios que l'on a fait en direct en classe.
     
• Angular et les web services REST : Zied et Larbi
  • Sur ce lien vous trouverez les sources de la présentation "AngularJS et Les web services REST" ainsi que le code source de l'application de démo : https://github.com/ziedzaiem/<wbr/>angular-rest
     
    Pour exécuter l'application, il faut installer Node.js et exécuter "npm install" dans le dossier principal puis "bower install". Après l'installation des dépendances, on lance "node index.js", l'application est alors accessible sur ce lien http://localhost:8888/ , la présentation est sur ce lien: http://localhost:8888/pres/.
     
• Sublime Text et les packages indispensables : Grinny et Alexandra Muge
  • http://slides.com/grinnyhermant/les-...sublime-text#/
     
• Présentation de plugins / directives custom pour Angular JS, en particulier des datatables, pour faire de l'upload de fichier, etc. par exemple angular UI Bootstrap : Mohamed Gaiech et Bastien Maria
  • https://sites.google.com/site/angularjsdirective/
     
• Présentation de librairies de visualisation de données, notamment D3JS : Chayma m'sakni et Nouira Wijdane
  • présentation HTML, le tutoriel et les ressources web dans cette archive : D3js.zip 
    
    
• Présentation de librairies de charts type highcharts, powercharts, etc... : Lotus et Yoann
  • http://jschartslib.neocities.org/
     
• Présentation du web de données avec Freebase et DBPedia: Thibaut Comte et Jeremy Rajao
  • Ici l'archive de leur présentation, ouvrir juste le fichier index.html : dataweb-master.zip 
  • Ici leur projet github, contient des exemples : https://github.com/tcomte/dataweb
     
• Applications web hybrides avec Phonegap / Cordova : Damien et Bruno
  • http://www.presentation-<wbr/>cordova.tk
     
• Etat du web mobile (APIs, mais aussi webphones) ...  : Justin Mulenet et Rudy 
  • https://sites.google.com/site/situationduwebmobile/
     
• NodeJS + MongoDB : Benjamin et Mehdi
  • lien vers la présentation https://docs.google.com/presentation/d/1shddIPTtVI_g48xp6lTaP7R2ZCpcvyGm910oCRoBm4M/edit?usp=sharing. Dans les sources, après le tutoriel, il y a les liens vers le tutoriel que nous avons utilisé ainsi que le lien du code utilisé.
     
• Comment ça marche les standards du web ? C'est quoi un standard ? Qui les fait ? Comment ? Svetlana et Johann
  • Lien vers la présentation sur google docs 
     
• Présentation de WebRTC avec quelques examples par Nouriel Azria
  • Archive de la présentation : Presentation_webRTC.zip (2.5Mo), zip contenant la présentation (dans le dossier "WebRTC_prez" et lancer le fichier "index.html") ainsi que les 2 exemples vues en live (dans le dossier "Autres"). Tout est expliqué dans le fichier "README.txt" présent à la racine du fichier zip.

Spécial cours Casablanca

Supports de cours :

• Transparents : rappel des principales technologies du web 
• Intro à HTML5 
• Cours JavaScript de Michel Buffa (transparents faits en HTML5). Archive ici : Cours JavaScript.zip. Ce cours couvre "JavaScript" classique Ecma 5, pas les nouvelles APIs apparues avec HTML5 (voir le cours HTML5).
• HTML5 Canvas (avancé)
• Formulaires HTML5, persistence et drag',' drop : voir chapitres 4 et chapitre 6 du cours d'intro à HTML5.

Petit exemple non graphique qui montre comment créer des objets statiques ou avec une fonction Constructeur :

• http://jsbin.com/nelicu/3/edit

Exemple CSS3 + visual feedback formulaires valides/invalides

• http://jsbin.com/?html,js,output
•  

Exos faits en direct sur le canvas :

• EMSI Centre : monstre avec balles qui rebondissent, fait en classe : http://jsbin.com/cilovo/11/edit?js,output
• EMSI Maarif : idem mais on a pas fait le même : http://jsbin.com/dididu/9/edit?html,js,output
• Monstre fait par un de mes étudiants avec des textures animées (video dessinée en temps réel, clipping) : http://www.pablopixel.com/HTML5/assignment2/

Page d'exercices sur les formulaires, la persistence et le drag'n'drop (log/pass = votre école/votre école en minuscules) 

Spécial cours Rabat

Ressources intéressantes