Web 2.0/HTML5 Rabat 2012-2013

Table des matières

1. 1. Introduction
2. 2. Supports utilisés en cours
   1. 1. 2.1.1. CSS 2 + quelques bouts de 3
3. 3. Supports externes
4. 4. TP1: installation de l'environnement de développement, premiers exercices
   1. 4.1. Installation des logiciels
   2. 4.2. Etude des exemples vus en cours
   3. 4.3. Ecriture d'un formulaire HTML5
   4. 4.4. Intégration de la géolocalisation
   5. 4.5. Exercices avec la vidéo
   6. 4.6. Exercices avec le dessin dans un canvas
   7. 4.7. Rajouter des styles via CSS pour bien présenter la page de formulaire
5. 5. TP2 : découverte d'un logiciel de dessin
   1. 5.1. Télécharger l'archive à étudier
   2. 5.2. Step 1 : le paint le plus simple !
   3. 5.3. Step 2 : ajout des événements mouseUp, mouseMove, mouseDown, création d'un objet pour le dessin
   4. 5.4. Step 3 : ajout d'un second canvas transparent superposé au canvas principal, pour dessiner des "lignes élastiques"
   5. 5.5. Step 4 : dessiner le contenu du front canvas dans le main canvas quand on relâche la souris en mode ligne
   6. 5.6. Step 5 : ajout d'outils pour dessiner des rectangles et des cercles
   7. 5.7. Step 6 : utilisation des styles de dessin, de nouveaux champs input HTML5 (color, range)
   8. 5.8. Step7 : travail à faire par vous, ajout de nouvelles fonctions !
6. 6. TP3 : découverte des web sockets HTML5
   1. 6.1. Etude d'un programme de chat
      1. 6.1.1. We will use the NodeJS web server
      2. 6.1.2. Installation de NodeJS
   2. 6.2. Test de l'application de chat
   3. 6.3. Etude de l'application de chat
7. 7. TP4 : etudier la partie multi-participants du Paint (steps 7 et 8) 
   1. 7.1. On ajoute la partie "chat" au programme de paint
   2. 7.2.  Step 8 : Broadcaster les ordres de dessin
      1. 7.2.1. Coté serveur : on broadcaste les ordres de dessin, sauf à l'envoyeur
      2. 7.2.2. Envoi des ordres de dessin
      3. 7.2.3. Traitement des ordres de dessin qu'on reçoit du serveur
      4. 7.2.4. Utilisation de la webcam pour dessiner avec l'image courante de la webcam et la transmettre 
         1. 7.2.4.1. Initialiser l'API getUserMedia
      5. 7.2.5. Peindre avec des images en provenance de la vidéo de la webcam
      6. 7.2.6. Envoie des images pour broadcast. On les envoie en format base64 en tant que dataURL
      7. 7.2.7. Traiter les images reçues en base64 pour les dessiner
   3. 7.3.