Description du cours
Les technologies du Web sont soumises à un changement permanent et les stratégies, méthodes et connaissances nécessaires pour produire des systèmes en ligne ne sont plus les mêmes aujourd'hui qu'il y a dix ans. Depuis un certain moment déjà, l'objet xmlhttprequest permet aux pages Web de charger de l'information sans recharger la page. Cela permet de créer des systèmes plus interactifs, réactifs et performants, en réduisant le temps de chargement et donc le temps d'attente pour l'utilisateur. Sous le nom AJAX (Asynchronous JavaScript and XML) cette stratégie de construction connaît un franc succès parce qu'elle rend possible - en coopération avec le DHTML (dynamic HTML) - la création de véritables applications Web.
Dans ce cours, nous allons aborder quelques-uns des éléments les plus courants du langage JavaScript/DHTML (traitement de formulaires, travail avec CSS et calques, etc.) en les liant à la logique AJAX. Conforme à une orientation vers la pratique, nous allons travailler essentiellement avec des exemples concrets et des applications réelles et courantes. Outre le travaille avec AJAX, le cours se concentre sur l'usage des API Web telles que Google Maps API, Flickr API, Yahoo BOSS et d'autres.
Le cours est organisé d'une telle manière que la réussite de chaque séance dépende de la maîtrise de tous les éléments abordés dans les séances précédents. Les étudiants sont responsables de rattraper des cours ratés et de réviser et pratiquer les connaissances présentées de façon indépendante.
Notation
La note finale sera composée de trois éléments :
- Présence et participation au cours (20%)
-
La réalisation de trois devoirs pendant le semestre (30%)
Trois notes par exercice :
3 (résultat plus que demandé)
2 (réussite)
1 (réussite partielle)
Les travaux rendus avec retard ne seront pas acceptés.
-
L'achèvement et la présentation d'un projet (50%)
Le projet finale consistera en la réalisation d'une petite application Web faisant usage de la stratégie de développement AJAX. Le contenu du projet est à trouver par l'étudiant et cette recherche fait partie du projet même.
Le projet fera l'objet d'une présentation en classe d'environ 10min à la fin du semestre.
Tout retard concernant la proposition de projet ou le projet final se traduira directement en une réduction de la note finale.
Programme du cours
S1 (08/10/08) : Introduction à JavaScript / DHTML / AJAX / API Web
Exo 1 : L'exercice constiste à créer une petite interface qui permet de regroupe un certain nombre d'éléments du HTML dynamique qui nous seront utiles par la suite. Il s'agit, premièrement d'une formulaire avec un seul champ (cadre rouge sur l'écran). A chaque lettre tappée, le texte du formulaire est inséré dans un calque (div) en dessous.
Les différents boutons servent à choisir la couleur et la police du texte dans le calque et d'aggrandir ou réduire la taille de la police. J'attends un lien qui pointe sur le resultat en ligne pour le 21.10. 23h59. Bon courage !
S2 (22/10/08) : XHTML dynamique I
S3 (29/10/08) : XHTML dynamique II
S4 (05/11/08) : AJAX / AJAJ I
S5 (12/11/08) : AJAX / AJAJ II
Exo 2 : AJAX suggest ! A l'image de google.fr, l'exo consiste à créer une interface de suggestion sur la base du fichier vu en classe. L'utilisateur peut traverser les résultats (nom, prénom) avec les touches de son clavier (fleche haut, fleche bas) et voir l'ensemble des informations utilisateurs (nom, prénom, email) en poussant "return". N'hesitez pas d'utiliser la BDD des restos si vous avez envie. J'attends un lien (!) qui pointe vers l'exo en ligne avant le prochain cours. Bon courage !
S6 (19/11/08) : Web API I : Google Maps
S7 (26/11/08) : Web API II : Google Maps
S8 (03/12/07) : Web-API III : Flickr
Exo 3 : Plein de restos sur une carte ! Avec la base sql des restos (nouvelle version avec compatiblité MySQL 3.23) l'exercice consiste à afficher tous les restos sur une seule carte. Pour rendre l'application utilisable, il faut utiliser le marker manager. Voilà un exemple qui montre comment on utilise le marker manager. Afin de faciliter la navigation sur la cart, l'utilisateur peut donner une adresse sur laquelle ka carte sera centrée par la suite. Cela correspond à cet exemple là. L'exo est à rendre avant la prochaine séance. Bon travail !