Cours web 2.0 M2 Miage Casablanca et Rabat, 2010-2011

Pages récentes

Introduction

Ce cours intitulé "web 2.0", ce qui commence un peu à dater, va essayer d'aborder les aspects du web "récent", c'est-à-dire des deux ou trois dernières années. En 2005 l'appellation "web 2.0" a été introduite par Tim O'Reilly et est devenue célèbre. Aujourd'hui nous sommes dans le "web des objets", "le web social", "le web de données", "le web 3.0", un seul terme ne suffit plus. Ce cours abordera à la fois les aspects techniques qui sont à la base de cette évolution, mais aussi certains aspects plus sociologiques, commerciaux, philosophiques.

Cours et TP

Séance 1 : Intro au web 2, réseaux sociaux, marketing du web 2

Cette séance a pour but de vous donner un background historique sur le web et le web 2.0

Séance 2 : les bases de la technologie Ajax, Javascript

Supports de cours :

Support de cours : BasesAjaxBuffa.ppt

TP sur les bases d'ajax/javascript

Récupérez cette archive : 4257_ajaxbasics2.zip
Dezippez l'archive et ouvrez le fichier index.html
Faites les exercices 0.1 et 0.2 (installer firebug le debugger javascript dans firefox, mettre firefox comme browser par défaut dans netbeans), vous trouverez ici les dernières versions de firebug compatibles avec les dernières versions de firefox : http://getfirebug.com/releases/firebug/)
puis faites les exercices 1, 3, 4, et 5
ne faites pas les autres exercices !

Séance 3 : Etude de frameworks Ajax/Javascript (illustration avec Dojo)

Dans cette séance nous allons étudier quelques frameworks javascript, indépendants du langage de programmation utilisé pour coder la partie serveur des applications. Ces frameworks seront utilisables ainsi avec des applications web écrites en java, php, C#/.net, Python, Ruby etc...

Ces frameworks ont plusieurs choses en commun : ils facilitent les appels Ajax, ils proposent une API de mnipulation du DOM simplifiée et sont accompagnés d'un ensemble de widgets graphiques évolués, facilitant l'écriture de GUI riches. Néanmoins, ils possèdent des caractéristiques qui leurs sont propres, et peuvent cohabiter au sein d'une même application. On rencontre souvent une application basée sur le toolkit Dojo, mais utilisant de ci, de là, une animation réalisée à l'aide d'un morceau de scriptaculous ou encore ici un petit widget en provenance de la yahoo ui.

JQuery est un framework "minimaliste" qui ne pèse que 77 Ko dans un unique fichier (26 Ko dans sa version compressée). C'est le plus populaire de tous de par sa simplicité. Il facilite la manipulation du dom, des css, les appels ajax, la gestion des effets d'animation, mais contrairement aux autres toolkits présentés dans le début de la liste il ne propose pas de librairie de widgets (quoique des projets externes en proposent, comme http://ui.jquery.com/). Il est très populaire du fait de sa simplicité et de ses performances. Son apprentissage est très rapide. Les démos et tutoriaux sont accessible depuis le site principal. Avec Dojo ce doit être un des frameworks les plus populaires.
- Page de ressources JQuery que j'ai préparée pour les M1 Miage (cours, tutos, etc).
Dojo, un toolkit très complet, est le second plus populaire. Créé initialement par la société Jot.com aujourd'hui rachetée par Google. Il a servi entre autre à crééer la plateforme JotSpot (devenu Google Sites), le wiki de la communauté US des utilisateurs de Ebay, etc. Gros support pour ce toolkit (developpeurs initiaux chez Google + communauté très active avec contributions de Sun, IBM, Adobe, etc. Voir la page wikipedia US : http://en.wikipedia.org/wiki/Dojo_Toolkit). Il propose contrairement à jQuery un ensemble complet de widgets graphiques cohérents, dont des composants MVC très puissants.
- http://dojocampus.org/ : site web contenant des tutoriaux, la documentation, des exemples, etc.
- http://dojocampus.org/explorer/ : les démos interactives avec source à copier/coller dans ses propres programmes.
Scriptaculous un toolkit très orienté animation. Testez donc les démonstrations (liens depuis les bulles de la page principale), en particulier drag'n'drop et autocompleter. Utilisez la touche F12 pour voir à l'aide de firebug les échanges HTTP.
ExtJs, similaire à Dojo, ce toolkit très puissant est doté d'une très large gamme de widgets. Il est open source et a rencontrérencontre un succès grandissant, avant que la licence ne change. Il est toujours open source ma sa licence devient payante pour des utilisations commerçiales.
- Démos interactives de ExtJs
Rico : encore un framework, moins connu que les autres, plus léger. Essayez entre autre la démo "javascript updater" (regardez le XML renvoyé en utilisant le widget accordéon)
http://www.dhtmlgoodies.com : un ensemble de scripts DHTML suffisament riches pour faire un desktop dans une page web ! C'est un des framewokrs les plus riches pour créer un windows manager en javascript ! Cliquez sur "MenuScript" ou "Windows Script" puis sur les liens de démo.
Spry, un framework propriété d'Adobe. Permet de faire des applications web multimédia (photos, etc.) très belles et très frime.
- Le site de démo de Spry. Testez en particulier les "Effects démo" Shake, etc...
Yahoo User Interface Library, plus connue sous le nom de YUI : énorme bibliothèque de goodies (widgets, gestionnaire de CSS portable et efficace, ajax utilities, etc.). Testez par exemple les exemples de "l'animation utility" (une fois sur la page, cliquez sur le lien "exemples" pour avoir des démos interactives). Contrairement aux autres frameworks, on peut utiliser simplement un tout petit morceau de la Yahoo UI sans embarquer l'ensemble du framework. Par exemple, le widget "syntax highlighter" permet d'inclure dans des pages web du code source avec couleurs, numéros de lignes, etc... comme ceci :

var myAnim = new YAHOO.util.Anim('test', {
  	width: { to: 400 } 
	}, 1, YAHOO.util.Easing.easeOut);

Quelques sites Ajax/Web 2.0 qui montrent ce que l'on peut attendre des futures applications web

Zimbra : cliquez sur le bouton "skip registration, go to demo", entrez les caractères tordus comme demandé, puis admirez un outlook du futur. Pour voir l'intérêt, cliquez sur la gauche sur le premier lien Yahoo. Entrez un code postal au hasard, 06410 par exemple, et regardez une "application web" qui montre que le web est une grosse machine virtuelle !
Zoho : le plus gros concurrent asiatique des Google Apps ! Une suite complète de logiciels de bureautique, CRM, gestion de projet, etc... Vous pouvez tester avec les logins/password que vous donnera le professeur en TP.
Etc...

Travail à faire : étude du toolkit Dojo

Etant donné que nous ne pouvons pas tout étudier, nous focaliserons le cours et le TP sur un des toolkits les plus utilisé (sachant que JQuery a été étudié l'an dernier) : Dojo. Nous ré-utiliserons ce Toolkit lors du TP sur les web services RESTful.

Support de cours : Dojo MBuffa CarolMcDonald2010.ppt
- Une présentation slideshare sur les modèles Dojo : http://www.slideshare.net/klipstein/dojodata-stores-and-widgets
- http://dojocampus.org/ : site web contenant des tutoriaux, la documentation, des exemples, etc.
- http://dojocampus.org/explorer/ : les démos interactives avec source à copier/coller dans ses propres programmes.
Sujet du TP ici : TP Dojo 1.3.2

Séance 4 : Etude de la librairie GWT de Google

Tout se passe ici : TP5 (long) : étude de la librairie GWT

Pour les curieux qui veulent faire des trucs en plus

Voir le cours complet (qui dure 2x plus de séances) du M2 Miage de Nice, il aborde en particulier les points suivants :
- Web services REST,
- Utilisation d'APIs du web 2.0 (youtube, google, facebook, flickr, etc),
- Utilisation d'un serveur web embarqué dans une application,
- Introduction au web sémantique.
On trouve la page de ce cours ici : Cours web 2.0 année 2010-2011

Projets à rendre année 2010-2011

Projet à rendre Miage de Casablanca

A RENDRE POUR LA SEMAINE DU 3 Janvier 2011.
- Pas 2012 ou 2013,
- Janvier est juste après Décembre,
- La semaine dure 7 jours,
- Le projet d'un groupe n'est pas une copie de celui d'un autre groupe (je dis ça parceque je n'ai apparemment pas été clair)
- mêmes modalités de rendu que pour le projet précédent.
- Prévoir une démo qui fonctionne cette fois-ci !

Sujet 1 : utiliser Dojo pour améliorer votre site de la Banque

Ce sujet comporte quelques parties obligatoires et des parties facultatives. Elles sont séparées en deux groupes :

Obligatoire :

Gérer les connexions en Ajax, à l'aide de XhRPost de Dojo (voir cours et TP),
Utiliser un tableau de type Grid pour l'affichage des comptes et des clients, utiliser un ItemFileReadStore
Egayer un peu le site avec des Widgets sympas (piochez dans les démos des sites, dans les démos du TP), par exemple un AccordionContainer pour les menus sur la gauche...

Facultatif :

Vous faire plaisir en utilisant des Tab Panels, des layouts sympas, bref, tout ce qui vous amuse...

Sujet 2 : Utiliser GWT pour réaliser une application

Ce sujet consiste à faire vos premiers pas tout seuls avec GWT. Vous pourrez partir du TP pour en faire une vraie petite application avec session et entity beans. Soit vous refaites un projet de comptes bancaires simplifié (pas besoin d'avoir TOUTES les fonctionnalités), soit vous faites un annuaire avec lesmêmes fonctionnalités que celui fait en Dojo en TP, soit un truc personnel mais que vous me soumettez avant.

Modalités : les mêmes que pour le projet Banque, je le corrigerai lors de ma venue à Casa après le 3 janvier, à une date qui sera précisée. Mais faites comme si c'était pour la semaine du 3 Janvier.

Projet à rendre MIAGE de Rabat

Sujet

Un seul projet pour la Miage de Rabat qui n'a pas eu le cours sur Java EE6 avant. Ce projet consiste à développer une application web permettant de gérer en Ajax/Dojo un ensemble d'annuaires. Voici les fonctionnalités demandées:

Vous n'êtes pas obligé de faire toute l'application dans une seule page, mais pensez à "oublier" la manière classique de concevoir la partie Vue des applis web classiques type jsp/asp/php. Maitenant on a plus besoin de reafficher une page pour modifier le contenu qui est sous les yeux de l'utilisateur. Par exemple, la validation d'un login/password ne doit pas afficher une nouvelle page ! Juste afficher un message "password incorrect" !
La page n'affiche rien par défaut, si ce n'est un formulaire d'identification par login et password. La validation se fera en Ajax, avec des Dojo.XhrPost. Si les logins/passwords sont corrects, alors on fait disparaitre le formulaire et à la place apparait un bouton deconnexion. Le reste de la page devient vide. Si on est identifié alors la page affiche un annuaire de contacts.
En dessous du formulaire d'identification figure un lien permettant d'ouvrir un compte. Seul un login, un password et un email sont demandés. Vous utiliserez un widget de dialogue pour afficher le formulaire d'ouverture du compte.
Lorsque l'annuaire est affiché, il s'agit d'un widget de type Grid, modifiable. Par rapport au TP on demande un peu plus d'informations, notamment un lien qui permet (en dojo) d'afficher la photo du contact si elle existe. On supposera que lorsqu'on ajoute un contact, soit on peut uploader une photo (si vous avez le temps d'implémenter cette fonctionnalité, cherchez comment faire sur le web), soit vous tricherez en prenant des photos au hasard que vous aurez préalablement installées sur le serveur. Vous utiliserez pour afficher la photo en grand un widget dojo qui frime un max.
En dessous de l'annuaire, ou dans un onglet différent figure la "galeries" des photos des contacts. Là aussi, utilisez un joli widget dojo.
Vous êtes libres de gérer la partie serveur comme vous voulez (base de données, fichier json comme dans le tp, ce n'est pas le propos de cet projet).
Egayer un peu le site avec des Widgets sympas (piochez dans les démos des sites, dans les démos du TP), par exemple un AccordionContainer pour les menus sur la gauche... faites vous plaisir !
Vous avez le droit de rajouter ce que vous voulez dans ce projet, mais les fonctionnalités minimales doivent êtres gérées.

Modalités de rendu

A RENDRE POUR LA SEMAINE DU 3 Janvier 2011. Vous me préparez une démonstration pour le lundi matin. Pas de délais supplémentaires, je n'accepte pas qu'on me présente le projet "un peu plus tard" car cela perturbe le cours qui doit avoir lieu (au lieu d'écouter vous finissez le projet, j'ai vu ça à Casablanca !)
- Pas 2012 ou 2013,
- Janvier est juste après Décembre,
- La semaine dure 7 jours,
- Le projet d'un groupe n'est pas une copie de celui d'un autre groupe (je dis ça parce que je n'ai apparemment pas été clair)
- Un responsable dans la classe préparera une archive contenant des répertoires portant le nom des binomes. Chaque repertoire contiendra le projet + tout ce qui est nécessaire (readme.txt par ex), et deux captures d'écrans. Je récupèrerai cette archive lors de la mission de Janvier.
- Prévoir une démo qui fonctionne !
- Bonne chance !