diff --git a/rapport1.0.tex b/rapport1.0.tex new file mode 100644 index 0000000000000000000000000000000000000000..2b75575aec3235b26885b7bd03c9ebee2303e515 --- /dev/null +++ b/rapport1.0.tex @@ -0,0 +1,212 @@ +% !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{Profil utilisateur éditable :}Un membre a des droits sur ses informations personnelles. Il peut donc modifier à tout moment ses données telles que son pseudo, son mot de passe , surnom, mais aussi son image personnelle (avatar). + +\item \textbf{Importation des photos :}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{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 à la Timeline de la soirée en question. + +\end{itemize} + +\newpage + + +\subsection{Nos Features :} + \begin{itemize} +\item \textbf{Profil Utilisateur :}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, 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{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} + +% Structure projet + + +\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 :}Le site Community 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 concours : participer à un concours ou consulter les derniers résultats + \item ajout : ajouter une photo à une Timeline + \item contact : contacter l’administrateur + \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.\\ + +\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}