diff --git a/Logo_ENSIIE.png b/Logo_ENSIIE.png new file mode 100755 index 0000000000000000000000000000000000000000..55f7c7ef2d0baddb2a02b964d782dd5b8faaa75b Binary files /dev/null and b/Logo_ENSIIE.png differ diff --git a/rapport.pdf b/rapport.pdf new file mode 100755 index 0000000000000000000000000000000000000000..7035fe6cc113921ad5eb1f070555c1ee3b56e3d4 Binary files /dev/null and b/rapport.pdf differ diff --git a/rapport.tex b/rapport.tex new file mode 100755 index 0000000000000000000000000000000000000000..0c9efb99d13cc49e42971bdf53d5b151d7a0d68b --- /dev/null +++ b/rapport.tex @@ -0,0 +1,228 @@ +\documentclass[a4paper]{article} +% debut du preambule, on met les packages + +\usepackage[latin1]{inputenc} % sous windows +\usepackage[T1]{fontenc} +\usepackage[francais]{babel} +\usepackage{lmodern} +\usepackage{layout} +\usepackage[top=2cm, bottom=2cm, left=2cm, right=2cm]{geometry} +\usepackage{color} +\usepackage{graphicx} +\usepackage{algorithmique} +\usepackage{hhline} + + +\definecolor{sec}{rgb}{0,0.34,0.5} +\definecolor{secp}{rgb}{0,0.47,0.72} +\definecolor{para}{rgb}{0,0.65,0.86} + + + +\begin{document} +\begin{titlepage} + +\newcommand{\HRule}{\rule{\linewidth}{0.5mm}} +\center + +\includegraphics[scale=0.4]{Logo_ENSIIE.png}\\[1.5cm] + + +\textsc{\LARGE E.N.S.I.I.E}\\[0.5cm] + +\textsc{\Large }\\[0.5cm] + +\HRule \\[0.4cm] + +{\huge \bfseries Projet Web 1A \\ + Rapport de projet \\[0.4cm] } + +\HRule \\[1.5cm] + +\begin{flushleft} +\Large \emph{Groupe H:}\\ +Julie \textsc{Choquet}\\ +Julien \textsc{Naty-Daufin}\\ +Anouar \textsc{Mahrous}\\ +Guillaume \textsc{Gamelin}\\[3cm] +\end{flushleft} + +\vfill + +{\large \today}\\ + +\thispagestyle{empty} +\setcounter{page}{0} + +\end{titlepage} + +\newpage + +\renewcommand{\contentsname}{Sommaire} % Dans le corps du document,avant la commande \tableofcontents. +\setcounter{tocdepth}{5} + +\tableofcontents +\thispagestyle{empty} +\setcounter{page}{0} + +\newpage + +\textcolor{sec}{\section{Introduction}} + +La gestion des photos d'�v�nements et soir�es � l'�cole est encore tr�s basique. Une fois connect� sur iiens.net, l'upload +des photos se fait par dossiers, tout comme la consultation. Enfin l'interface n�cessiterait d'�tre mise � jour, +et son ergonomie repens�e, bien que le site soit tout � fait fonctionnel. Le but est de proposer un nouveau +fonctionnement et une nouvelle interface sous la forme d'une application web (qui pourrait plus tard �tre int�gr�e +� iiens.net). Nous avons donc choisi de r�aliser un site web gr�ce auquel chaque �l�ve aura un profil et la +possibilit� d'ajouter ses propres photos pour une soir�e, ses propres commentaires, d'identifier ses camarades +sur les photos qu'il publiera... Toutes les photos ajout�es au site seront tri�es par soir�e et par ann�e, et affich�es +sous la forme d'une Timeline. Nous avons souhait� ajouter un syst�me de concours. Pour chaque soir�e, une +photo sera �lue gr�ce au vote des utilisateurs pour chaque concours propos�. + + +\textcolor{sec}{\section{Conception}} + +\textcolor{secp}{\subsection{�tude de l'existant}} + +\begin {description} +\item[Identification :] authentification gr�ce � un identifiant unique (exemple: AriseID) et un mot de passe qui sont sauvegard�s dans la base de donn�es. + +\item[Inscription :] tout �l�ve membre d'Arise peut s'inscrire gratuitement � TIMELINE. +Lors de cette inscription, il saisit ses informations personnelles (nom , pr�nom, promo, identifiant et mot de passe) et personnalise son profil afin de devenir membre. + +\item[Compte administrateur :]compte ayant acc�s � certaines fonctionnalit�s permettant notamment l'ajout ou la suppression de soir�e et de concours. Ce compte est aussi responsable de la maintenance de l'application. + +\item[Importation des photos :]chaque utilisateur � la possibilit� d'importer des photos sur le site. Lors de l'importation, l'utilisateur doit renseigner une soir�e puis attendre une validation d'un administrateur. + +\item[Consultation des photos:]chaque utilisateur peut avoir acc�s aux photos post�es sur le site. Pour cela, il doit choisir une ann�e et une soir�e, il aura alors acc�s � une liste de photos. + +\end{description} + +\textcolor{secp}{\subsection{Nos Features :}} + + \begin{description} + +\item [Timeline :] am�lioration de la consultation des photos. Celle-ci se fera toujours par soir�e, mais l'utilisateur pourra naviguer le long de la Timeline et associer � chaque photo une heure dans la soir�e. L'application fournit ainsi une version temporalis�e de la consultation existante. + + +\item [Profil utilisateur �ditable:] sur la partie gauche de l'�cran, l'utilisateur a acc�s � une barre de navigation qui lui est propre. Il peut ainsi modifier ses informations personnelles (quote, avatar, surnom ou mot de passe), mais aussi avoir acc�s � toutes les photos qu'il a post�es (notamment celles ayant remport� un concours) et celles o� il est identifi�. + +\item [Identification des personnes pr�sentes sur une photo :]lors du post d'une photo, l'utilisateur peut identifier les personnes pr�sentes sur la photo. Les personnes identifi�es voient alors ces photos appara�tre dans la partie Mes Identifications de leur profil. +Chaque utilisateur peut ajouter une identification � une photo apr�s que celle-ci soit post�e � sa consultation. + +\item [Importation des photos plus compl�te :] chaque utilisateur � la possibilit� d'importer des photos sur le site. Lors de l'importation, l'utilisateur doit renseigner l'heure de prise de la photo, la date, et l'affilier � une soir�e afin qu'elle soit imm�diatement jointe � la Timeline. + + +\item [Commentaire :]chaque utilisateur peut ajouter un commentaire � une photo, qu'il l'ai post�e ou non. Les commentaires sont visibles par public et donc visibles par tous. + + +\item [Contact :]pour toute question, information ou r�clamation, l'utilisateur peut contacter l'administrateur en lui envoyant un mail. + +\item [Concours :]pour chaque soir�e, une liste de concours est propos�e pendant un certain temps. Chaque utilisateur peut voter une fois par soir�e et par concours pour la photo qu'il juge correspondre le mieux au th�me du concours. +\end{description} + +\textcolor{secp}{\subsection{Structure}} + +\textcolor{para}{\subsubsection{Structure du Projet}}Le projet est divis� en deux parties: la partie utilisateur et la partie administrateur. Les administrateurs ont acc�s � des fonctionnalit�s suppl�mentaires par rapport aux utilisateurs, notamment pour la maintenance du site. +\textcolor{para}{\subsubsection{Structure des pages}} +Sur Timeline, on trouve deux types de structure de pages : + +\begin{itemize} +\item les pages de timeline photos qui sont compos�es d'une barre de navigation horizontale en haut de l'�cran pour acc�der aux diff�rentes rubriques du site et l'affichage de la Timeline sur toute la largeur de l'�cran. +\item les autres pages suivent un autre mod�le : la m�me barre de navigation horizontale en haut de l'�cran, mais aussi un menu vertical personnel � gauche de l'�cran. Le contenu prend la place restante. +\end {itemize} + + + +\textcolor{sec}{\section {R�alisation technique}} + +\textcolor{secp}{\subsection {Partie graphique}} +L'ergonomie d'un site est un point tr�s important. Notre objectif principal est donc de faciliter l'utilisation du site pour les utilisateurs. Pour cela, nous avons d�fini certaines contraintes : + +\begin{description} +\item [Accessibilit� des navigateurs :] l'application doit �tre fonctionnelle sous les navigateurs les plus utilis�s, c'est-�-dire : Chrome, Firefox, Internet Explorer. Les diff�rentes fonctionnalit�s d�velopp�es devront donc �tre test�es sur ces trois navigateurs. + +\item [Accessibilit� des appareils :] l'application doit �tre au maximum responsive, pour que l'affichage soit plaisant sur les appareils de taille d'�cran plus petite (tablettes, smartphones). Pour cela, nous utiliserons le toggle device mode du panel d�veloppement de Chrome, les media queries et Bootstrap. + +\item [Le syst�me de navigation :] la navigation doit �tre simple, m�me pour les utilisateurs d�butants. Il est donc indispensable que l'apprentissage du site ne demande pas d' efforts � l'utilisateur. L'utilisation de menus qui r�pertorient les principales fonctionnalit�s permet � l'utilisateur de minimiser son effort mental et de trouver son chemin sans effort.\\ +La \textbf{barre de navigation}, qui est un menu horizontal fix� en haut de chaque page est donc compos�e de : + \begin{itemize} + \item acceuil : page d'acceuil pr�sentant les 10 derni�res photos post�es + \item soir�es : permet d'acc�der � la timeline de chaque soir�e + \item ajout : permet d'ajouter une photo � une soir�e + \item contact : contacter l'administrateur + \item concours : consulter les concours actuels et pass�s, voter pour une photo et voir celles qui sont d�j� nomin�es + \end{itemize} +La \textbf{barre personnelle} est un menu vertical situ� � gauche de l'�cran et permet d'acc�der � : mon profil, mes posts , mes identifications et mes wins. Il permet aussi de se d�connecter. +\end{description} + + +\textcolor{secp}{\subsection {Les technologies utilis�es}} +\begin{itemize} +\item GIT +\item Bootstrap +%todo +\end{itemize} + +\textcolor{secp}{\subsection {Probl�mes rencontr�s}} +\begin{itemize} +\item Difficult�s techniques +\item Difficult�s temporelles : certaines features �taient au final trop ambitieuses et non r�alisable dans le temps imparti +\item Organisation : attribution pr�cise des taches +\end{itemize} + + +\textcolor{sec}{\section {Planning et bilan}} + +\textcolor{secp}{\subsection{Discussions, maquette}} +�laboration d'un plan de site pr�cis et de features. Pas de programmation � ce stade. + +\textcolor{secp}{\subsection{Pr�sentation du projet au professeur, base de donn�es}} +Pr�sentation du plan de site et des features, r�duction de certains objectifs et identification des difficult�s � venir.\\ +�laboration du mod�le relationnel de la base de donn�es. + +\textcolor{secp}{\subsection{Choix des technologies}} +Nous optons pour un usage de Bootstrap, du serveur Git fourni par Arise et une consultation de \emph{http://www.phptherightway.com/}. +%TO check + + +\textcolor{secp}{\subsection{d�veloppement, Design, Tests}} +D�but du d�veloppement, attribution de taches � chaque membres. Le design de chaque page est �tudi� pour se rapprocher au mieux de la maquette r�alis�e pr�c�demment. + + +\textcolor{secp}{\subsection{Bilan}} +Au d�but du projet nous avions d�cid� de nous r�partir les t�ches en fonctions des langages utilis�s. Nous avons remis en question ce d�coupage puisque nous ne pouvions pas d�velopper ensemble. Par cons�quent, nous avons d�velopp� chacun de notre c�t� puis mis en commun gr�ce au GIT.\\ +\\ +Une fois la maquette de l'application �tablie, nous avons d�termin� les diff�rentes parties et modules du projet, puis nous avons d�fini les �l�ments de chaque module de sorte qu'un membre puisse commencer � d�velopper la mise en page relative � son module, le CSS. Mais aussi nous d�finissions les diff�rents �l�ments techniques relatifs au bon fonctionnement du module. \\ +\\ +Selon les diff�rents modules de la maquette, leurs complexit�s, et les diff�rentes comp�tences de chacun de membres, nous d�veloppions � un ou plusieurs les diff�rents �l�ments du module, ind�pendamment les uns des autres. Une fois l'�l�ment d�velopp� et les diff�rentes fonctionnalit�s r�alis�es, nous effectuons des tests unitaires. Lorsqu'ils sont valid�s et le r�sultat souhait� affich�, l'�l�ment en question est ajout� � l'ensemble du projet sur le GIT.\\ +\\ +Par la suite, nous v�rifions que le produit r�pond � nos attentes, c'est-�-dire que le module correspond au sc�nario pr�vu, sur le point de vue graphique ou technique. + + +\textcolor{secp}{\subsection{Am�liorations envisag�es}} +Les exigences fonctionnelles fix�es d�s le d�but par notre cahier des charges ont presque �t� men�es � bien. En effet, les principaux modules caract�risant un r�seau social ont �t� int�gr�s.\\ +\\ +Les exigences qui assurent la qualit� et la performance du site ont toutes �t� d�velopp�es. L'ergonomie du site est satisfaisante pour les utilisateurs d'apr�s les tests d'utilisabilit�, le site est compatible avec Internet Explorer et Firefox. \\ +\\ +Toutefois, certains points n'ont pu �tre d�velopp�s par manque de temps. + +\begin{description} +\item [Le module concours :] ce module n'a pas �t� totalement finalis�: l'ajout d'un concours correspondant � chaque soir�e et la cl�ture d'un concours par l'administrateur ont �t� d�velopp�s. Mais par souci de temps, la participation des membres aux diff�rents concours, n'a pu �tre int�gr�e. Nous avons donc laiss� de c�t� ce module, mais en laissant les liens s'y rapportant qui pourrait donc �t� int�gr� sans grande +difficult�. + +\item [Les modules commentaires , votes et bouton j'aime :] ceux-ci n'ont pas pu �tre int�gr�s par manque de temps. +\end{description} + +Bien que nous aurions pu d�velopper ces modules, nous avons pr�f�r� v�rifier et am�liorer les performances et la qualit� de l'application, notamment gr�ce aux diff�rents tests. Cette solution a �t� envisag�e lorsque nous nous sommes rendu compte que le temps �tait insuffisant, nous avons donc r�fl�chi afin de mener � bien notre projet de la meilleure fa�on possible. C'est pourquoi nous avons d�cid� de recarder notre sujet en ne gardant que les modules les plus important et en contrepartie nous avons d�cid� d'am�liorer la qualit� et la performance de notre application.\\ +\\ +Si nous �tions amen�s � approfondir le d�veloppement de cette application, nous pourrions envisager une spatialisation de la Timeline. En projetant celle-ci sur un plan de l'�cole, il serait possible de situer les photos dans l'espace et dans le temps et de fournir un mode de navigation innovant et encore plus convivial. + +\textcolor{sec}{\section{Conclusion}} +L'application finale n'int�gre pas tous les modules envisag�s dans notre cahier des charges. N�anmoins celle-ci est conforme � nos objectifs qui �taient d'int�grer les modules de base caract�risant la TIMELINE. De plus, l'application a �t� am�lior�e en termes de s�curit� (hashage du mot de passe), performance et qualit�, ce qui rend son utilisation beaucoup plus rassurante, rapide, facile et agr�able. + + + + + +\end{document} diff --git a/rapport1.0.pdf b/rapport1.0.pdf deleted file mode 100644 index d0c2970e522b3668f12d782304e720457fe5b1ed..0000000000000000000000000000000000000000 Binary files a/rapport1.0.pdf and /dev/null differ diff --git a/rapport1.0.tex b/rapport1.0.tex deleted file mode 100644 index 40a217c5068b4d6554b3b1ce7c588f241fa63122..0000000000000000000000000000000000000000 --- a/rapport1.0.tex +++ /dev/null @@ -1,226 +0,0 @@ -% !TEX TS-program = pdflatex -% !TEX encoding = UTF-8 Unicode - -% This is a simple template for a LaTeX document using the "article" class. -% See "book", "report", "letter" for other types of document. - -\documentclass[11pt]{article} % use larger type; default would be 10pt - -\usepackage[utf8]{inputenc} % set input encoding (not needed with XeLaTeX) -\usepackage[francais]{babel} - - -%%% Examples of Article customizations -% These packages are optional, depending whether you want the features they provide. -% See the LaTeX Companion or other references for full information. - -%%% PAGE DIMENSIONS -\usepackage{geometry} % to change the page dimensions -\geometry{a4paper} % or letterpaper (US) or a5paper or.... -% \geometry{margin=2in} % for example, change the margins to 2 inches all round -% \geometry{landscape} % set up the page for landscape -% read geometry.pdf for detailed page layout information - -\usepackage{graphicx} % support the \includegraphics command and options - -% \usepackage[parfill]{parskip} % Activate to begin paragraphs with an empty line rather than an indent - -%%% PACKAGES -\usepackage{hyperref} -\usepackage{booktabs} % for much better looking tables -\usepackage{array} % for better arrays (eg matrices) in maths -\usepackage{paralist} % very flexible & customisable lists (eg. enumerate/itemize, etc.) -\usepackage{verbatim} % adds environment for commenting out blocks of text & for better verbatim -\usepackage{subfig} % make it possible to include more than one captioned figure/table in a single float -% These packages are all incorporated in the memoir class to one degree or another... - -%%% HEADERS & FOOTERS -\usepackage{fancyhdr} % This should be set AFTER setting up the page geometry -\pagestyle{fancy} % options: empty , plain , fancy -\renewcommand{\headrulewidth}{0pt} % customise the layout... -\lhead{}\chead{}\rhead{} -\lfoot{}\cfoot{\thepage}\rfoot{} - -%%% SECTION TITLE APPEARANCE -\usepackage{sectsty} -\allsectionsfont{\sffamily\mdseries\upshape} % (See the fntguide.pdf for font help) -% (This matches ConTeXt defaults) - -%%% ToC (table of contents) APPEARANCE -\usepackage[nottoc,notlof,notlot]{tocbibind} % Put the bibliography in the ToC -\usepackage[titles,subfigure]{tocloft} % Alter the style of the Table of Contents -\renewcommand{\cftsecfont}{\rmfamily\mdseries\upshape} -\renewcommand{\cftsecpagefont}{\rmfamily\mdseries\upshape} % No bold! - -%%% END Article customizations - -%%% The "real" document content comes below... - -\title{Projet Web 1A} -\author{Groupe H \\Mahrous, Choquet, Naty-Daufin, Gamelin} -\date{2016} % Activate to display a given date or no date (if empty), - % otherwise the current date is printed - -\begin{document} -\maketitle - -\tableofcontents %sommaire - -\newpage - - -\section{Introduction} - -La gestion des photos d’évènements à l’école est encore très basique. Une fois connecté sur \emph{iiens.net}, l'upload des photos se fait par dossiers, tout comme la consultation. Enfin l'interface necessiterai d'être mise à jour, et son ergonomie repensée, bien que le site soit tout à fait fonctionnel. -Le but est de proposer un nouveau fonctionnement et une nouvelle interface sous la forme d’une application web (qui pourrai plus tard être intégrée à iiens.net). -Nous avons donc choisit de réaliser un site web grâce auquel chaque élève aura un profil et la possibilité d’ajouter ses propres photos pour une soirée, ses propres commentaires, d’identifier ses camarades sur les photos qu’il publiera... Toutes les photos ajoutées au site seront triées par soirée et par année, et affichées sous la forme d’une Timeline. -Nous avons souhaité ajouter un système de concours. Pour chaque soirée, une photo sera élu grâce au vote des utilisateurs pour chaque concours proposé. - - -\section{Conception} - -\subsection{Etude de l'existant} - -\begin {itemize} -\item \textbf{Identification :}Authentification grâce à un Identifiant unique (exemple: ariseID) et un mot de passe qui sont sauvegardé dans la base de données. - -\item \textbf{Inscription :}Tout élève membre d'Arise peut s’inscrire gratuitement à TIMELINE. -Lors de cette inscription, il saisit ses informations personnelles (nom , prénom, promo identifiant et un mot de passe ) et personalise son profil afin de devenir membre. - -\item \textbf{Compte administrateur :}Compte ayant accès à certaines fonctionnalités permettant notamment l’ajout ou la suppression de soirée et de concours. Ce compte est aussi responsable de la maintenance de l’application. - -\item \textbf{Importation des photos :}Chaque utilisateur à la possibilité d’importer des photos sur le site. Lors de l’importation, l’utilisateur dois renseigner une soirée puis attendre une validation d'un administrateur. - -\item \textbf{Consultation des photos:}Chaque utilisateur peut avoir accès aux photos postées sur le site. Pour cela, il doit choisir une année et une soirée, il aura alors accès à une liste de photos. - -\end{itemize} - -\newpage - - -\subsection{Nos Features :} - \begin{itemize} - -\item \textbf{Timeline :} Amélioration de la consultation des photos. Celle-ci se fera toujours par soirée mais l'utilisateur pourra naviguer le long de la timeline et associer à chaque photo une heure dans la soirée. L'application fournit ainsi une version temporalisée de la consultation existante. - - -\item \textbf{Profil Utilisateur éditable:}Sur la partie gauche de l’écran, l’utilisateur a accès à une partie qui lui est réservé. Il peut modifier ses informations personnelles, son avatar, avoir accès à toutes les photos qu’il a posté, avoir accès a toutes les photos sur lesquelles il est identifié, et avoir accès à toutes les photos ayant gagné un concours et sur lesquelles il apparaît. - -\item \textbf{Identification des personnes présentes sur une photo :}Lors du post d’une photo, l’utilisateur peut identifier les personnes présentes sur la photo. Les personnes identifiées voient alors ces photos apparaître dans la partie Mes Identifications de leur profile. -Chaque utilisateur peut ajouter une identification à une photo après que celle-ci soit postée. - -\item \textbf{Importation des photos plus complète :}Chaque utilisateur à la possibilité d’importer des photos sur le site. Lors de l’importation, l’utilisateur dois renseigner l’heure de prise de la photo, la date, et l’affilier a une soirée afin qu’elle soit immédiatement jointe a la Timeline. - - -\item \textbf{Commentaire :}Chaque utilisateur peut ajouter un commentaire à une photo, qu’il l’ai postée ou non. Les commentaires sont visibles par tous. - - -\item \textbf{Contact :}Pour toute question, information ou réclamation, l’utilisateur peut contacter l’administrateur en lui envoyant un mail. - -\item \textbf{Concours :}Pour chaque soirée, une liste de concours est proposée, chaque utilisateur peut voter une fois par concours par soirée pour la photo qu’il juge correspondre le mieux au sujet. -\end{itemize} - -\subsection{Structure} - -\subsubsection{Structure du Projet}Le projet est divisé en deux partie, la partie utilisateur, et la partie administrateur. Les administrateur auront accès des fonctionnalité supplémentaires. -\subsubsection{Structure des pages} -Il y a deux types de structure de pages : -\begin{itemize} -\item les pages suivant un modèle composé d’un menu horizontal en haut de l’écran, d’un menu vertical a gauche de l’écran, et des informations au milieu de l’écran. (Acceuil) -\item la page Timeline qui ne comprend que le menu horizontal en haut de l’écran et l’affichage de la Timeline sur le reste de l’écran. -\end {itemize} - - - -\section {Réalisation technique} - -\subsection {Partie graphique} -L’ergonomie est un point important. Son objectif principal est de faciliter l’utilisation du site par les utilisateurs. Pour cela, nous nous imposerons certaines contraintes : - -\begin{itemize} -\item \textbf {Accessibilité des navigateurs :}L'application doit être fonctionnel sous les navigateurs les plus utilisés, c’est-à-dire : Firefox et Internet Explorer. Les différentes fonctionnalités développées devront donc être testées sur les deux navigateurs. - -\item \textbf{Le système de navigation :}La navigation doit être simple, même pour les usagers débutants. Il est donc indispensable que l’apprentissage du site ne demande pas des efforts à l’utilisateur. L’utilisation de menu qui répertorie les principales fonctionnalités permet à l‘utilisateur de minimiser son effort mental.\\ -La \textbf{barre de navigation}, qui est un menu horizontal statique est donc composé de : - \begin{itemize} - \item acceuil : la page d’accueil - \item soirées : accéder à la Timeline de chaque soirée - \item ajout : ajouter une photo à une Timeline - \item contact : contacter l’administrateur - \item concours : participer à un concours ou consulter les derniers résultats - \end{itemize} -La \textbf{barre personnelle} qui est un menu vertical dynamique est donc composé de : mon profil , mes posts , identif et mes wins , deconnexion. -\end{itemize} - - -\subsection {Les technologies utilisées} -\begin{itemize} -\item GIT -\item Bootstrap -%todo -\end{itemize} - -\subsection {Problèmes rencontrés} -\begin{itemize} -\item Difficultés techniques -\item Difficultés temporelles : certaines features étaient au final trop ambitieuses pour le temps impartis -\item Organisation : attribution précise des taches -\end{itemize} - - -\section {Planning et bilan} - -\subsection{Discutions, maquette} -Elaboration d'un plan de site précis et de features. Pas de programmation à ce stade. - -\subsection{Présentation du projet au professeur, base de donnée} -Présentation du plan de site et des features, réduction de certains objectifs et identification des difficultés à venir.\\ -Elaboration du modèle relationnel de la base de données. - -\subsection{Choix des technologies} -Nous optons pour un usage de Bootstrap, du serveur Git fourni par Arise et une consultation de \emph{http://www.phptherightway.com/}. -%TO check - - -\subsection{Developpement, Design, Tests} -Début du developpement, attribution de taches à chaque mmbres. Le design de chaque page est étudié pour se rapprocher au mieux de la maquette réalisée precedement. - - -\subsection{Bilan} -Au début du projet nous avions décidé de se répartir les tâches en fonctions des langages utilisés. Nous avons remis en question ce découpage puisque nous ne pouvions pas développer ensemble. Par conséquent, nous devons développer chacun de notre coté puis mettre en commun grâce au GIT.\\ -\\ -Une fois la maquette de l’application établie, nous déterminions les différentes parties et modules du projet, nous définissions les éléments de chaque module de sorte à ce qu’un membre puisse commencer à développer la mise en page relative à son module, le CSS. Mais aussi nous définissions les différents éléments techniques relatifs au bon fonctionnement du module. \\ -\\ -Selon les différents modules de la maquette, leurs complexités, et les différentes compétences de chacun de membres, nous développions à un ou plusieurs les différents éléments du module, indépendamment les uns des autres. Une fois l’élément développé et les différentes fonctionnalités réalisées, nous effectuons des tests unitaires. Lorsqu’ils sont validés et le résultat souhaité affiché, l’élément en question est ajouté à l’ensemble du projet sur le GIT.\\ -\\ -Par la suite, nous vérifions que le produit répond à nos attentes, c’est-à-dire que le module correspond au scénario prévu, sur le point de vue graphique ou technique. - - -\subsection{Amélioration envisagées} -Les exigences fonctionnelles fixées dès le début par notre cahier des charges ont presque été menées à bien. En effet, les principaux modules caractérisant un réseau social ont été intégrés.\\ -\\ -Les exigences qui assurent la qualité et la performance du site ont toutes été développées. L’ergonomie du site est satisfaisante pour les utilisateurs d’après les tests d’utilisabilité, le site est compatible avec Internet Explorer et Firefox. \\ -\\ -Toutefois, certains points n'ont pu être développés par manque de temps. - -\begin{itemize} -\item \textbf{Le module concours} n’a pas été totalement finalisé en entier : l’ajout d’un concours correspondant à chaque soirée et la clôture d’un concours par l’administrateur ont été développés. Mais par souci de temps La participation des membres aux différents concours, n’a pu être intégré. Nous avons donc laissé de côté ce module, mais en laissant les liens s'y rapportant qui pourrait donc été intégré sans grande -difficulté. - -\item \textbf{Les modules commentaire , vote et bouton j’aime} n’ont pu être intégrés par manque de temps -\end{itemize} - -Bien que nous aurions pu développer ces modules, nous avons préféré vérifier et améliorer les performances et la qualité de l’application, notamment grâce aux différents tests. Cette solution a été envisagée lorsque nous nous sommes rendu compte que le temps était insuffisant, nous avons donc réfléchi afin de mener à bien notre projet de la meilleure façon possible. C'est pourquoi nous avons décidé de recarder notre sujet en ne gardant que les modules les plus important et en contrepartie nous avons décidé d'améliorer la qualité et la performance de notre application.\\ -\\ -Si nous étions amenés à approfondir le développement de cette application, nous pourrions envisager une spatialisation de la Timeline. En projetant celle ci sur un plan de l'école, il serait possible de situer les photos dans l'espace et dans le temps et de fournir un mode de navigation innovant et encore plus convivial. - -\section{Conclusion} -L'application finale n'intègre pas tous les modules envisagés dans notre cahier des charges. Néanmoins elle est conforme à nos objectifs qui étaient d'intégrer les modules de bases caractérisant la TIMELINE. De plus l'application a été améliorée en termes de sécurité (hashage du mot de passe), performance et qualité qui rend son utilisation beaucoup plus rassurante, rapide, facile et agréable. - - - - - - - -\end{document}