\documentclass[a4paper]{article}
\usepackage{pstricks,pst-node,pst-tree}
\usepackage{fancybox}
\usepackage[utf8]{inputenc}
\usepackage{fullpage}
\usepackage{listings}
\usepackage[francais]{babel}
\lstset{extendedchars=true,language=Java,basicstyle=\small}
\usepackage{fancyhdr}
\pagestyle{fancy}
\rhead{Travaux pratiques}
\lhead{}
\lfoot{IRC2}
\rfoot{2006---2007}
\headheight 12pt
\renewcommand{\headrulewidth}{0pt}
\renewcommand{\footrulewidth}{0.4pt}
\definecolor{MyGray} {gray}{.93}
\newenvironment{question}[1][2cm]{\noindent\doublebox\bgroup\begin{tabular}{ll}\noindent\vrule depth #1 width 0cm&\begin{minipage}{\textwidth}\noindent\textbf{Question :}}{\end{minipage}\end{tabular}\egroup}
\title{Programmation Web\\Ajax et Web 2.0}
\author{David Odin}
\date{31 mai et $1^{er}$, 8 et 15 juin 2007\\TP sur deux séances}
\begin{document}
\maketitle
\thispagestyle{fancy}
\section{Présentation}
Ce TP propose d'utiliser les technologies `` « Web 2.0 » '' vues en cours afin de réaliser un site le plus possible agréable
à utiliser.
Les premières parties vous permettront de vous familiariser avec les différents concepts, objets
et fonctionnalités des bibliothèques \textit{prototype} et \textit{scriptaculous}.
La dernière partie sera consacrée à la réalisation d'un site web, côté serveur (PHP) et côté client (Javascript), qui
utilisera les facilités offertes par l'API de Flickr.
\section{Prototype}
Vous trouverez à partir de la page \lstinline!http://prototypejs.org/api/! toute la documentation nécessaire pour utiliser
la bibliothèque \texttt{prototype.js}.
Afin de l'utiliser simplement, créez un sous-répertoire \textbf{bin} et placez-y le fichier \textbf{prototype.js} que vous
trouverez à partir de la page \lstinline!http://prototypejs.org/download!
Ensuite dans un fichier \textit{index.html} ou \textit{index.php}, vous pourrez l'utiliser de cette façon :
\begin{lstlisting}[language=HTML]
...
...
\end{lstlisting}
Il ne vous restera plus qu'à écrire le fichier \textit{bin/monTP.js}.
\subsection{Utilisation de \$ et de l'objet Event}
À partir de la documentation de Prototype, réalisez une page possédant au moins deux éléments, peu importe leur type.
Lorsque l'utilisateur cliquera sur le premier élément, le second devra être caché. Et si l'utilisateur clique à nouveau
sur le premier élément, le second devra être réaffiché.
La sélection des éléments se fera par l'intermédiaire des fonctions \textbf{\$()} et \textbf{\$\$()}.
\subsection{Les insertions}
Utilisez l'objet \textit{Insertion} de \textit{prototype} pour ajouter des éléments à votre page après son chargement.
\subsection{Ajax}
Pour cette question, il vous faudra également créer une deuxième page (un script php).
Utilisez la fonction Request de l'ojet Ajax de prototype pour demander l'heure au serveur (par le biais d'un script php).
L'utilisateur devra presser un bouton sur la page principale, et les différentes heures devront s'afficher les unes derrières les autres dans la page principale (sans la recharger\ldots)
Vous pouvez également utiliser Ajax.Updater pour cela.
\section{Scriptaculous}
Vous pouvez télécharger la bibliothèque scriptaculous à partir de \lstinline!http://script.aculo.us/downloads!
Après décompression, placez les différents fichiers \textit{.js} présents dans le répertoire \textit{src} dans votre
répertoire \textit{bin}.
Comme Scriptaculous est une surcouche de prototype, il faut inclure \textit{prototype.js} avant scriptaculous.js, par exemple
de cette manière :
\begin{lstlisting}[language=HTML]
...
\end{lstlisting}
\subsection{Effets}
À partir de la documentation donnée ici : \lstinline!http://wiki.script.aculo.us/scriptaculous/tags/effects!, vous créerez
une page mettant en \oe uvre un maximum d'effets utilisant l'objet \textbf{Effect} de scriptaculous.
\subsection{Glisser-Déplacer}
À l'aide de la documentation présente ici : \lstinline!http://wiki.script.aculo.us/scriptaculous/show/DragAndDrop!, vous
devrez créer une page permettant à l'utilisateur de choisir les éléments qu'il préfère dans une liste donnée (par exemple
une liste de chansons). Le choix se fera par un simple glisser-déplacer depuis la liste de toutes les chansons vers un élément
comportant l'ensemble des morceaux choisis.
\subsection{Complétement automatique}
En partant des exemples donnés sur cette page : \lstinline!http://wiki.script.aculo.us/scriptaculous/show/Ajax.Autocompleter!,
vous devrez réaliser une page demandant à un utilisateur d'entrer un nom de département français.
L'utilisateur sera aidé dans son entrée : dès qu'il commencera à écrire le nom (ou le numéro) d'un département, l'entrée
proposera la liste des départements correspondants.
La liste des départements est facile à trouver sur wikipedia ou quid.fr.
\section{Utilisation de l'API de Flickr}
Pour cette dernière partie, vous devrez réaliser un site un peu plus conséquent, en utilisant bien entendu tout ce qui
vient d'être fait. L'ensemble de l'api flickr utilisable est disponible et documenté ici : \lstinline!http://www.flickr.com/services/api/!
Parmi les fonctions présentées, un certain nombre ne nécessitent même pas d'être membre du site Flickr pour être utilisées :
\begin{itemize}
\item flickr.contacts.getPublicList
\item flickr.favorites.getPublicList
\item flickr.groups.getInfo
\item flickr.groups.search
\item flickr.groups.pools.getContext
\item flickr.groups.pools.getPhotos
\item flickr.interestingness.getList
\item flickr.people.* sauf flickr.people.getUploadStatus
\item beaucoup de flickr.photos
\item et beaucoup d'autres
\end{itemize}
\subsection{Utilisation}
Cependant, il est nécessaire d'obtenir une clef pour utiliser ces fonctions, cela se fait simplement à partir de la page
\lstinline!http://www.flickr.com/services/api/keys/!
Plusieurs fonctions de l'api flickr renvoie des photos sous la forme d'un élément (XML ou autre), pour récupérer l'image
correspondante, vous consulterez la documentation disponible ici :
\lstinline!http://www.flickr.com/services/api/misc.urls.html!
L'api Flick est disponible via SOAP ou REST (je vous conseille vivement REST !)
Les réponses peuvent être dans différents formats, dont le format JSON (http://www.json.org/js.html) qui est particulièrement
adapté à un développement en Javascript.
\subsection{Travail demandé}
À l'aide de toutes ces informations, vous proposerez une interface permettant à un utilisateur de visualiser toutes les photos
correspondant à certains critères de recherche. Vous êtes libre de créer l'interface qui vous semble la plus agréable à
utiliser.
\end{document}