M2 MBDS Casablanca : HTML5/JavaScript/NodeJS

Introduction

Ce cours a pour but de vous faire progresser sur les technologies web front end (HTML5, CSS, JavaScript) mais aussi d'introduire des nouveautés importantes concernant la programmation côté serveur (WebSockets, NodeJS).

Première partie : introduction des technologies web, panorama général

• Transparents : rappel des principales technologies du web¹⁶ 

Ressources à garder dans un coin et à regarder si on est curieux :

JavaScript :

• Mes supports de cours JavaScript : http://mainline.essi.fr/JavaScriptSlides/index.html¹⁷ 
• Excellent tutoriel interactif (si vous êtes gros débutant en JavaScript) : http://www.codecademy.com/de/tracks/javascript-combined¹⁸
• Le livre complet que j'ai utilisé pour apprendre JavaScript il y a quelques années : http://www.wuala.com/lpuums/JavaScript/Object-Oriented%20JavaScript%20-%20Stoyan%20Stefanov.pdf?lang=fr¹⁹
• Mozilla Developper Network a un bon guide aussi : https://developer.mozilla.org/en-US/docs/JavaScript/Guide²⁰

CSS :

• http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Exemples_interactifs_CSS
• Les tutoriaux de codeacademy.com sont très bien et gratuits

HTML5 :

• Mon cours complet : http://mainline.essi.fr/HTML5slides/indexFR.html²¹ 

Deuxième partie : rappel des bases de JavaScript

On va procèder cette fois-ci à une séance de live coding via l'outil jsbin.com, puis ce sera à vous de jouer... On mettra ici les exemples développés en cours.

Cours JavaScript : http://mainline.essi.fr/JavaScriptSlides/index.html²²

• Exemple de code objet, tableuau etc. : http://jsbin.com/genaro/1/edit?js,console²³
• Exemple bouton + géolocalisation : http://jsbin.com/purevu/3/edit²⁴

Troisième partie : le canvas HTML5

• Support de cours : http://mainline.essi.fr/HTML5slides/canvasFR.html²⁵
• Exemple de petit monstre fait en live avec les élèves : http://jsbin.com/nelimi/2/edit²⁶, le meme qui bouge avec les touches : http://jsbin.com/nelimi/3/edit²⁷
• Exemple avec videos et clipping : http://jsbin.com/nelimi/5/edit²⁸
• Monstre qui bouge à la souris quand on clique et avec les fleches : http://jsbin.com/nelimi/6/edit²⁹
• Version avec musique et boing: http://jsbin.com/nelimi/7/edit?html,js,output³⁰
• Version qui suit la souris: http://jsbin.com/nelimi/8/edit?js,output³¹

Ici des fonction de détection de collision cercle-cercle, rectangle-rectangle et rectangle-cercle : http://jsbin.com/zevala/2/edit³²

Ici un exemple de jeu qui gère des états (menu principal, jeu, game over) : http://jsbin.com/fopomo/15/edit?js³³

Quatrième partie : formulaires HTML5, persistence par Local/Session Storage, tableaux

• Support de cours : http://mainline.essi.fr/HTML5slides/chapter4.html#1³⁴
• Exercice fil rouge : Exercice fil rouge formation INRIA décembre 2014³⁵ accès restreint, mdp = votre école/votre école
• Générateur de pin code pour Yousseff qui bosse à la caisse d'Epargne et qui a besoin d'un max de sécurité : http://jsbin.com/yiyacu/2/edit³⁶

Ressources : exemples CSS du W3c

• http://www.w3.org/Style/Examples/007/³⁷
• Chercher aussi "buffa css" sur google.
• Plein de ressources css sur le web, chercher "css3 style table", etc.

Cinquième partie : la persistence en HTML5

Support de cours : 

• http://mainline.essi.fr/HTML5slides/chapter6.html³⁸
• Voir aussi l'exercice fil rouge sur les formulaires à partir de l'exercice 6/7

MINI PROJET A RENDRE POUR LE MERCREDI 18/3/2015

Le projet est à rendre rapidement pour vous en débarrasser "à chaud". Je nommeria une personne dans la promotion qui devra me faire parvenir un zip avec tous les projets de la promotion, soit par mail, soit par dropbox, ou autres...

Travail à faire :

• Une page personnelle (vous pouvez partir d'une page que vous avez déjà), utilisant les bonnes pratiques de HTML5 pour sa structuration (article, section, figure, figcaption, nav, header, aside), et pour pouvoir générer une table des matières correcte (vous pourrez tester avec l'extension chrome HTML5 outline, on ne doit pas avoir de"untitled", etc). La bonne pratique recommande de commencer tous les "sectioning elements" (article, section, etc.) par un H1 ou par un <header><H1>..., faites y attention. La page personnelle doit aussi contenir des microdatas vous décrivant : nom, situation, adresse, url de la page perso etc. Pas la peine de mettre trois tonnes de microdatas, inspirez-vous simplement des exemples dans le cours. Vous pouvez utiliser des générateurs pour ensuite insérer les microdatas. Je testerai à l'aide de l'extension chrome "microdata reveal" et aussi dans la page de test de google : https://developers.google.com/struct.../testing-tool/³⁹
   
• Une animation dans le canvas, avec un petit monstre, que l'on doit pouvoir animer et déplacer (à la souris, au clavier, comme vous voulez), on doit avoir aussi une jolie animation des logos du MBDS et de l'EMSI. On veut du son et de la musique aussi. J'attends un peu d'originalité ici, peu m'importe votre approche du moment que ce soit intéressant. Je noterai le résultat, l'originalité, et aussi je regarderai le code pour voir si vous avez utilisé les bonnes pratiques vues en cours (sauvegarde du contexte, transformations géométriques, manière de gérer les interactions, structure du code).
  
   
• POUR HEBERGER VIDEO ET SONS ET IMAGES afin que ça marche dans jsbin.com ou que vous n'ayez pas besoin de me les envoyer (ça peut être gros), voici ce que je vous conseille pour l'hébergement (mais ce n'est pas obligatoire de suivre ces conseils, vous faites comme vous voulez) : imgur.com est un site d'hébergement de photos très pratique, gratuit, sans besoin de compte. Pour les vidéos et audio : dropbox dans votre répertoire public, puis clic droit pour avoir le lien que vous utiliserez dans votre code HTML. On peut aussi utiliser des sons et des musiques directement trouvées sur le web.

La page perso est... personnelle, le projet du monstre peut être fait à deux ou à trois, mais attention, j'ai vos feuilles de présences, je sais qui a travaillé avec qui pendant les cours. Certains élèves n'ont pas le droit de travailler en groupe. Je n'accepte qu'un seul groupe de trois (ceux que j'ai vu travailler à trois). 

Vous rendrez par groupe :

1. Une page perso par membre du groupe,
2. Le projet du monstre
3. Dans l'archive du groupe, QUI DOIT PORTER VOS NOMS on trouvera un fichier Readme.txt qui contiendra les deux URLs jsbin.com de vos travaux. Vous pourrez aussi, mais ce n'est pas obligatoire, me donner les fichiers html, css, js.

Exemple de fichier README.txt

"Bonjour, voici le travail du groupe composé de John Wayne et Bruce Willis. La page perso de John est sur http://jsbin.com/totoprout/2⁴⁰ et celle de bruce sur http://jsbin.com/rhaaaaaaa/4⁴¹, le projet du monstre est sur http://jsbin.com/8⁴². On a aussi joint les fichiers html/js/css dans les trois répertoires que vous trouverez dans l'archive. On s'est tellement amusés avec le monstre qu'on a aussi une version plus évoluée, mais dans jsbin.com ce n'était pas pratique, vous la trouverez dans le répertoire GrosMonstreTresMechant. On a piqué les sons sur freesound.org, et trouvé des vidéos sympas pour les animations sur : http://videoscool.com⁴³.

N'oubliez d'essayer la barre d'espace, et aussi de cliquer avec la souris. Le monstre peut aussi manger le logo MBDS.

Dans sa page perso Bruce tiens à signaler qu'il n'a pas pu générer convenablement la table des matières comme dans les exemples, mais il a essayé, version qui ne marche pas dans le répertoire PageBruceTableDesMatieresQuiMarchePas 

etc....."

Rappel des absences à ce cours jour par jour et sanctions

J'ai pris en photo toutes les feuilles de présence, voici les résultats...

Ressources externes, outils, exemples, etc...

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