Cette application nécessite l'activation de Javascript.
Apprenez comment activer Javascript dans votre navigateur.
Vous n'êtes pas connecté.
Connexion
Ma Page
Changements Récents
Outils
Aide
Pages récentes
Cours Web 2.0 Casablanca
Taches en cours
Accueil
Intranet Michel Buff...
...
Applications web, M...
Applications web M1...
Apprentissage de l'i...
Lettres
Client android pour ...
Cours composants di...
Cours composants di...
Cours composants di...
Cours HTML5 CityWa...
Cours HTML5/NodeJS...
Cours HTML5/NodeJS...
Cours Miage d'Evry, ...
Cours Web 2.0 / HTM...
Cours web 2.0 2009
Cours web 2.0 année...
Cours Web 2.0 Casa...
Projet Miage Casabl...
Cours web 2.0 M2 Mi...
Cours web 2.0 MBDS...
Cours Web 2.0 MBDS...
Cours web 2.0 Miage...
Cours web 2.0 Miage...
Design Patterns Jav...
Droits d'accès dans ...
EDx: trucs et astuce...
Exemples interactifs...
Exemples interactifs...
Gestion du projet IS...
HTML5 MBDS 2015-2...
...
HTML5 pour la L3 Pr...
HTML5 Tutorial for ...
HTML5 tutorial for W...
Installation de Node...
JavaEE6 Weblogic e...
JavaEE6 Weblogic e...
Journée ISN du lund...
Journées ISN 6 et 1...
Java EE6 Weblogic E...
L3 Miage : technos ...
M1 informatique - M...
M1 Miage 2014-2015 ...
M1 Miage 2015-2016 ...
M2 MBDS Casablanca...
M2 MBDS Casablanca...
M2 NTDP - Web 2.0
Master 1 IFI 2015-2...
Premiers pas avec A...
Master Miage NTDP ...
Master Miage NTDP ...
MBDS - Madagascar ...
MBDS 2014-2015 Pri...
MBDS 2015-2016: We...
MBDS Casablanca 20...
MBDS Casablanca 20...
MBDS Mini-projet 20...
Miage Evry 2015-201...
MT5, a multitrack pl...
Option web 2.0 Mast...
HTML5 new structuri...
Plarpebu 1.1 : netbe...
Plasticité des IHM W...
Préparation à la cer...
Programmable Web -...
Programmable Web 2...
Programmable Web c...
Projet année Miage ...
Projet Blitzmax EPU ...
Projet Web 2.0/HTML...
Projets et TP rendus...
Server-side JavaScri...
Technologie Web M1...
Technologies Web, M...
TestPagePourSteph
TP 2013 - Nouveaux ...
TP HTML5 / Nouveau...
TP HTML5 2013-2014...
TP Plasticité des IH...
Web 2.0 2010
Web 2.0 MBDS 2012-...
Web 2.0 Rabat proje...
Web 2.0/HTML5 201...
Web Avancé EPU 201...
Web avancé Master ...
Web Sciences 2016-...
Web services REST /...
Weblogic / Java EE6...
Modifier
la page
Nouvelle
page
Imprimer
la page
Plus
Page modifiée à
11:11, 1 Mar 2013
par
MichelBuffaTest
0
Préférences d'impression
Voir la Table des Matières
Montrer les infos de modification
Montrer les notes finales en lien
Cours Web 2.0 Casablanca
De $1
Table des matières
1.
Introduction
2.
Supports
2.1.
Cours HTML5 / JQUERY
2.2.
COURS JAVASCRIPT
2.3.
CSS 2 + quelques bouts de 3
2.4.
Supports externes
3.
Projet à rendre
4.
TP1: installation de l'environnement de développement, premiers exercices
4.1.
Installation des logiciels
4.2.
Etude des exemples vus en cours
4.3.
Ecriture d'un formulaire HTML5
4.4.
Intégration de la géolocalisation
4.5.
Exercices avec la vidéo
4.6.
Exercices avec le dessin dans un canvas
4.7.
Rajouter des styles via CSS pour bien présenter la page de formulaire
5.
TP2 : découverte d'un logiciel de dessin
5.1.
Télécharger l'archive à étudier
5.2.
Step 1 : le paint le plus simple !
5.3.
Step 2 : ajout des événements mouseUp, mouseMove, mouseDown, création d'un objet pour le dessin
5.4.
Step 3 : ajout d'un second canvas transparent superposé au canvas principal, pour dessiner des "lignes élastiques"
5.5.
Step 4 : dessiner le contenu du front canvas dans le main canvas quand on relâche la souris en mode ligne
5.6.
Step 5 : ajout d'outils pour dessiner des rectangles et des cercles
5.7.
Step 6 : utilisation des styles de dessin, de nouveaux champs input HTML5 (color, range)
5.8.
Step7 : travail à faire par vous, ajout de nouvelles fonctions !
6.
TP3 : découverte des web sockets HTML5
6.1.
Etude d'un programme de chat
6.1.1.
We will use the NodeJS web server
6.1.2.
Installation de NodeJS
6.2.
Test de l'application de chat
6.3.
Etude de l'application de chat
7.
TP4 : etudier la partie multi-participants du Paint (steps 7 et 8)
7.1.
On ajoute la partie "chat" au programme de paint
7.2.
Step 8 : Broadcaster les ordres de dessin
7.2.1.
Coté serveur : on broadcaste les ordres de dessin, sauf à l'envoyeur
7.2.2.
Envoi des ordres de dessin
7.2.3.
Traitement des ordres de dessin qu'on reçoit du serveur
7.2.4.
Utilisation de la webcam pour dessiner avec l'image courante de la webcam et la transmettre (step8)
7.2.4.1.
Initialiser l'API getUserMedia
7.2.5.
Peindre avec des images en provenance de la vidéo de la webcam
7.2.6.
Envoie des images pour broadcast. On les envoie en format base64 en tant que dataURL
7.2.7.
Traiter les images reçues en base64 pour les dessiner
« 50 précédents
50 suivants »
Sélectionnez les versions à comparer et cliquez sur 'Comparaison versions'.
Comparer
Date de révision
Modifié par
Résumé des modifications
Voir la version
11:11, 1 Mar 2013
MichelBuffaTest
32 mots ajoutés
Voir la version
10:57, 1 Mar 2013
MichelBuffaTest
1687 mots ajoutés
Voir la version
09:37, 1 Mar 2013
MichelBuffaTest
2 mots ajoutés, 1 mots supprimés
Voir la version
08:50, 1 Mar 2013
MichelBuffaTest
6 mots ajoutés, 2 mots supprimés
Voir la version
07:55, 1 Mar 2013
MichelBuffaTest
19 mots ajoutés
Voir la version
16:16, 28 Fév 2013
MichelBuffaTest
84 mots ajoutés
Voir la version
09:22, 28 Fév 2013
MichelBuffaTest
1182 mots ajoutés
Voir la version
09:10, 28 Fév 2013
MichelBuffaTest
1470 mots ajoutés
Voir la version
09:00, 28 Fév 2013
MichelBuffaTest
61 mots ajoutés
Voir la version
12:32, 27 Fév 2013
MichelBuffaTest
12 mots ajoutés
Voir la version
12:25, 27 Fév 2013
MichelBuffaTest
2 mots ajoutés
Voir la version
11:58, 27 Fév 2013
MichelBuffaTest
1299 mots ajoutés
Voir la version
17:37, 26 Fév 2013
MichelBuffaTest
aucun mot modifié
Voir la version
11:52, 26 Fév 2013
MichelBuffaTest
8 mots ajoutés
Voir la version
11:16, 26 Fév 2013
MichelBuffaTest
38 mots ajoutés
Voir la version
11:12, 26 Fév 2013
MichelBuffaTest
826 mots ajoutés
Voir la version
11:11, 26 Fév 2013
MichelBuffaTest
261 mots ajoutés
Voir la version
10:49, 26 Fév 2013
MichelBuffaTest
940 mots ajoutés
Voir la version
10:46, 26 Fév 2013
MichelBuffaTest
385 mots ajoutés
Voir la version
10:35, 26 Fév 2013
MichelBuffaTest
9 mots ajoutés
Voir la version
10:22, 26 Fév 2013
MichelBuffaTest
1315 mots ajoutés
Voir la version
08:52, 26 Fév 2013
MichelBuffaTest
25 mots ajoutés
Voir la version
08:48, 26 Fév 2013
MichelBuffaTest
41 mots ajoutés
Voir la version
17:21, 25 Fév 2013
MichelBuffaTest
aucun mot modifié
Voir la version
07:14, 25 Fév 2013
MichelBuffaTest
3 mots ajoutés
Voir la version
22:47, 24 Fév 2013
MichelBuffaTest
7 mots supprimés
Voir la version
22:45, 24 Fév 2013
MichelBuffaTest
2 mots supprimés
Voir la version
22:43, 24 Fév 2013
MichelBuffaTest
26 mots ajoutés
Voir la version
20:49, 24 Fév 2013
MichelBuffaTest
aucun mot modifié
Voir la version
20:48, 24 Fév 2013
MichelBuffaTest
10 mots supprimés
Voir la version
20:47, 24 Fév 2013
MichelBuffaTest
aucun mot modifié
Voir la version
20:46, 24 Fév 2013
MichelBuffaTest
aucun mot modifié
Voir la version
20:46, 24 Fév 2013
MichelBuffaTest
4 mots ajoutés, 3 mots supprimés
Voir la version
20:43, 24 Fév 2013
MichelBuffaTest
244 mots ajoutés; nom de la page changé en 'Cours Web 2.0 Casablanca 2013'
Voir la version
19:19, 24 Fév 2013
MichelBuffaTest
aucun mot modifié
Voir la version
19:19, 24 Fév 2013
MichelBuffaTest
aucun mot modifié
Voir la version
19:19, 24 Fév 2013
MichelBuffaTest
aucun mot modifié
Voir la version
19:17, 24 Fév 2013
MichelBuffaTest
813 mots ajoutés, 43 mots supprimés
Voir la version
18:33, 24 Fév 2013
MichelBuffaTest
138 mots ajoutés, 2 mots supprimés
Voir la version
16:50, 20 Fév 2013
MichelBuffaTest
1 mots ajoutés, 1 mots supprimés
Voir la version
14:59, 20 Fév 2013
MichelBuffa
page créée, 5 mots ajoutés
« 50 précédents
50 suivants »
Powered by
MindTouch Deki Open Source Edition
v.8.08
Flux RSS
Utilisateurs
Modèles
Plan du site
Pages populaires
A propos
Surveiller
Attacher fichier ou image
Accès restreint
Déplacer
Supprimer
Mots clés
Envoyer la page
Propriétés de la page
Page de discussion
Table des matières
1.
Introduction
2.
Supports
2.1.
Cours HTML5 / JQUERY
2.2.
COURS JAVASCRIPT
2.3.
CSS 2 + quelques bouts de 3
2.4.
Supports externes
3.
Projet à rendre
4.
TP1: installation de l'environnement de développement, premiers exercices
4.1.
Installation des logiciels
4.2.
Etude des exemples vus en cours
4.3.
Ecriture d'un formulaire HTML5
4.4.
Intégration de la géolocalisation
4.5.
Exercices avec la vidéo
4.6.
Exercices avec le dessin dans un canvas
4.7.
Rajouter des styles via CSS pour bien présenter la page de formulaire
5.
TP2 : découverte d'un logiciel de dessin
5.1.
Télécharger l'archive à étudier
5.2.
Step 1 : le paint le plus simple !
5.3.
Step 2 : ajout des événements mouseUp, mouseMove, mouseDown, création d'un objet pour le dessin
5.4.
Step 3 : ajout d'un second canvas transparent superposé au canvas principal, pour dessiner des "lignes élastiques"
5.5.
Step 4 : dessiner le contenu du front canvas dans le main canvas quand on relâche la souris en mode ligne
5.6.
Step 5 : ajout d'outils pour dessiner des rectangles et des cercles
5.7.
Step 6 : utilisation des styles de dessin, de nouveaux champs input HTML5 (color, range)
5.8.
Step7 : travail à faire par vous, ajout de nouvelles fonctions !
6.
TP3 : découverte des web sockets HTML5
6.1.
Etude d'un programme de chat
6.1.1.
We will use the NodeJS web server
6.1.2.
Installation de NodeJS
6.2.
Test de l'application de chat
6.3.
Etude de l'application de chat
7.
TP4 : etudier la partie multi-participants du Paint (steps 7 et 8)
7.1.
On ajoute la partie "chat" au programme de paint
7.2.
Step 8 : Broadcaster les ordres de dessin
7.2.1.
Coté serveur : on broadcaste les ordres de dessin, sauf à l'envoyeur
7.2.2.
Envoi des ordres de dessin
7.2.3.
Traitement des ordres de dessin qu'on reçoit du serveur
7.2.4.
Utilisation de la webcam pour dessiner avec l'image courante de la webcam et la transmettre (step8)
7.2.4.1.
Initialiser l'API getUserMedia
7.2.5.
Peindre avec des images en provenance de la vidéo de la webcam
7.2.6.
Envoie des images pour broadcast. On les envoie en format base64 en tant que dataURL
7.2.7.
Traiter les images reçues en base64 pour les dessiner
effacer le message
voir détails
Ce message disparaitra dans
secondes
Le temporisateur de message a été arrêté
Affichage Détails: