si28 rapport galerieutc · le gb aborde l’ensemble des procédés biologiques et des sciences du...

Galerie UTC

Rapport de projet

Pierre Yves CHOPIN / Caroline DI BIN / Mikael ROBERT

Université de Technologie de Compiègne

SI28 – P09

S. BOUCHARDON

SI28 – S. BOURCHARDON Mikael ROBERT P09 Galerie UTC Pierre Yves CHOPIN Caroline DI BIN

sur 19

Introduction

L’idée d’une galerie UTC permettant d’exposer des projets de tous les départements est venue avec l’envie à la fois de découvrir ce qui se produisait à l’UTC mais également de pouvoir montrer ses propres réalisations.

Et puis, en y réfléchissant, l’idée d’une galerie UTC devenait aussi un outil de communication et d’exposition pour les entreprises, ou toutes personnes extérieures, intéressées par un étudiant ou un profil.

Enfin, l’aspect mémoire constitue un point clé de cette initiative. Il s’agit de répondre à un besoin de connaissance de projets réalisés dans le passé par d’autres étudiants, que ce soit pour les poursuivre, ou comprendre en quoi consiste un enseignement particulier.

Dans le cadre de cette UV nous avons donc mis sur pied un prototype donnant une idée claire de notre concept et visant à montrer l’intérêt d’un tel service.


sur 19

Sommaire

Introduction ....................................................................................................................................... 2

Sommaire ............................................................................................................................................ 3

I- Cahier des charges ................................................................................................................ 4

a. Concept ............................................................................................................................... 4

b. Public cible .......................................................................................................................... 4

c. Objectifs .............................................................................................................................. 4

d. Ressources médias .............................................................................................................. 4

e. Structure et navigation ....................................................................................................... 5

f. Interactivité ......................................................................................................................... 7

g. Choix techniques ................................................................................................................. 7

II- Scénario ..................................................................................................................................... 9

III- Story-Board ............................................................................................................................ 11

a. Page d’accueil ................................................................................................................... 11

b. Organisation d’une page type ........................................................................................... 11

c. L’entête ............................................................................................................................. 12

d. Le pied de page ................................................................................................................. 14

e. Fond d’écran ..................................................................................................................... 14

f. Le corps ............................................................................................................................. 14

Conclusion ......................................................................................................... 19


sur 19

I- Cahier des charges

a. Concept

Prototype d'une plate-forme d'exposition virtuelle des réalisations des étudiants UTC au sein des UV à projet.

b. Public cible

Étudiants et personnel UTC

Motifs de consultation types :

Visiteur :

• Curiosité = "Motif découverte" ; • Intérêt pour un thème précis = "Motif thème" ; • Intérêt pour un projet en particulier = "Motif projet" ; • Intérêt pour un étudiant en particulier = "Motif parcours".

Contributeur

• Création ou mise à jour du profil ; • Ajout de projet(s).

Connaissance par rapport au sujet :

Connaissance de l'existence de projets divers (Découverte), éventuellement des thématiques abordées (Thème) ou de l'existence d'un travail effectué (Projet), ou connaissance d'un étudiant au parcours "intéressant" pour le visiteur.

Connaissance des spécificités de l'UTC, des branches et filières variable : de bonne (Contribution) à très superficielle (Découverte)

c. Objectifs

Faciliter l'accès à "une mémoire de l'UTC" notamment pour les étudiants. Mettre à la disposition des différents publics ciblés des informations sur les projets réalisés à l'UTC par des étudiants.

Permettre de suivre le parcours d'un étudiant au fil de ses projets.

Offrir un aperçu rapide de l'éventail des travaux d'UTCéens, ainsi que la possibilité de rentrer dans le détail.

Interagir: Évaluer, Contacter, Commenter, Partager...

d. Ressources médias

Les ressources du site seront fournies majoritairement par les utilisateurs-


sur 19

contributeurs.

Projet étudiant

Le projet est au cœur de notre plate-forme. Chaque projet comportera :

• Du texte : Titre, Description rapide, Description longue, Mots-clés... ; • Des illustrations ou photos en nombre limité ; • Des fichiers liés à télécharger: Vidéos, Son, PDF, etc. ; • Des liens externes s'il y a lieu.

Profil étudiant

Chaque utilisateur-contributeur, pourra pour son profil ajouter :

• Des informations textuelles : Données personnelles du type "âge", "loisirs", "texte descriptif", "liens vers site personnel ou profil"; ou Données étudiant (branche, UV suivies...).

• Une illustration (photo) de profil (fonction actuellement indisponible)

e. Structure et navigation

Les deux "motifs de consultation" appellent à deux accès différents :

L'accès visiteur

La plate-forme est axée autour de deux éléments clés, lieux de l'interaction : le projet et le profil étudiant. C'est donc autour de ces deux parties que s'articulera toute la structure. L'accès s'y fera par différents chemins :


sur 19

La plate-forme est organisée autour d'une base de données dans laquelle sont stockées toutes les informations. Le traitement des demandes (de type lien hypertexte, ou éventuellement recherche) se fait donc à partir de cette base.

L'accès contributeur

Pour un utilisateur encore non enregistré, il doit avant tout s'inscrire sur le site. Cette fonctionnalité sera accessible par un lien sur la page d'accueil et sur chaque page du site.

De la même façon, le contributeur déjà inscrit peut se connecter à son compte, pour le modifier (modification du profil, ajout ou modification d'un projet). Il accède alors à son espace personnel :


sur 19

f. Interactivité

Comme évoqué dans le point "Ressources médias" ci-dessus, du point de vue de l'utilisateur-contributeur, l'interactivité est grande.

Il produit entièrement le contenu de son profil, ainsi que des pages projets qu'il souhaite diffuser. Si la liberté de mise en page sera réduite au minimum par souci de cohérence graphique, l'utilisateur-contributeur a le contrôle sur le contenu.

Du point de vue de l'utilisateur-visiteur, l'interactivité est moins importante, mais reste présente de différentes manières.

Il peut naviguer par le chemin souhaité (pour par exemple s'intéresser au parcours d'un étudiant plutôt qu'à un département). Il a la possibilité de contacter les étudiants (si le visiteur est enregistré). À terme, dans une version plus poussée de la plate-forme, des fonctionnalités telles que le partage par mail ou par des réseaux sociaux du type Facebook, ainsi que la possibilité de noter un projet (système d'étoiles) pourraient être envisagées. Rappelons qu'il s'agit ici d'un prototype.

g. Choix techniques

Langages et technologies

Le Service Informatique de l'UTC n'étant pas en mesure de fournir l'environnement de travail Java souhaité (JBoss), le projet sera réalisé, côté serveur, en PHP/MySQL. Par souci d'évolutivité et d'accessibilité, tant pour les personnes que pour les moteurs recherche, l'interface, côté client, sera principalement réalisée en XHTML/CSS. Des parties de l'interface bénéficieront de traitements plus graphiques à l'aide de Javascript en utilisant la librairie jQuery. Le développement de la partie serveur est basé sur le framework Symfony.


sur 19

Administration

Une partie administration permet d’éditer les projets de tout utilisateur ainsi que les départements.

Un exemple de page de la zone admin :

A gauche, la liste des étudiants et droite la partie filtre qui permet de rechercher la personne voulue.


sur 19

II- Scénario La partie scénario répertorie les textes qui apparaitront sur l’ensemble des écrans.

Génie Biologique

Le GB aborde l’ensemble des procédés biologiques et des sciences du vivant, pour les exploiter industriellement et réaliser les équipements nécessaires à la médecine, aux biotechnologies, pharmaceutiques, cosmétiques et agro-alimentaires.

Génie Informatique

L’ingénieur en GI est un acteur de la mutation technologique de tous les secteurs de l’économie vers le numérique. Il est essentiellement un généraliste capable d’analyser les besoins, de proposer des solutions et d’encadrer leur mise en œuvre.

Génie Mécanique

L'élève ingénieur en GM reçoit une formation équilibrée ayant pour base un enseignement scientifique et technique, un haut niveau de culture générale, une large ouverture vers le monde industriel et la maîtrise d'au moins une langue étrangère.

Génie des Procédés

Le GP rassemble des connaissances et des savoir-faire qui permettent la transformation industrielle des matières premières naturelles ou synthétiques en des produits élaborés par une succession d'opérations.

Génie des Systèmes Mécaniques

L'ingénieur GSM, avant tout ingénieur mécanicien, est capable de concevoir et de réaliser des machines, des équipements, des structures ou tous types de systèmes mécaniques incorporant diverses technologies : mécanique, informatique, optique...

Génie des Systèmes Urbains

L’ingénieur GSU intervient dans les domaines de la maîtrise d'ouvrage et de la maîtrise d'œuvre aux échelles du territoire, de la ville ou du bâti. Il approche également de manière scientifique les multiples systèmes composant ces échelles.

Technologie et Sciences de l’Homme

L’UTC permet à ses étudiants d’aborder la complexité du monde socio-économique, à travers des formations spécifiques allant de la connaissance de l'entreprise et du management à l’histoire ou la philosophie des sciences.

Texte du pied de page

Le site "Galerie UTC" est un projet-prototype réalisé au sein de l'UV SI28 par Mikael Robert, Pierre Yves Chopin et Caroline Di Bin. Icones tirées de DryIcons.com

Page Edit Profile

Vous pouvez ici modifier vos informations. L’entrée de votre mot de passe est nécessaire.


sur 19

Page d’accueil

Découvrez les projets des étudiants De l'innovation, dans tous les domaines ! Faites connaître vos réalisations Inscription gratuite et immédiate pour tous les membres de l'UTC.


sur 19

III- Story-Board Le story-board a pour but de définir l’interface graphique du site web. Nous allons spécifier, ici, tous les éléments du site et expliquer les choix graphiques effectués.

a. Page d’accueil

La page d’accueil doit, le plus clairement et rapidement possible, indiquer l’objectif du site et ses différentes applications.

Ici, notre page d’accueil se décompose en 4 parties principales :

• Présentation concise des 2 objectifs du site. • Le logo du site avec sa fonction principale : « Galerie UTC » • Les 4 catégories de recherche d’un projet et/ou d’un profil que l’on retrouve également

au fil de la navigation • Se connecter à son profil ou s’inscrire

b. Organisation d’une page type

La page est composée de 3 parties principales : L’entête, le corps et le pied de page dont voici l’organisation.

Les trois composants de la page sont identiques et présents sur toutes les pages excepté sur


sur 19

la page d’accueil. En effet, la page d’accueil a un rôle différent, elle se doit de communiquer clairement et rapidement l’objectif du site.

Une constante sur toutes les pages est la façon dont est indiqué un lien. En effet, une zone réactive est signalée par un soulignement en pointillés et par un effet de rollover : lorsque la souris passe sur une zone réactive, elle apparait sur fond bleuté, le même bleu que les champs à compléter sur les formulaires. Cela permet de garder une homogénéité vis-à-vis de l’utilisateur.

c. L’entête

L’entête est construite de manière à naviguer facilement et à accéder rapidement aux différentes fonctions du site.

Entête

Le corps

Le pied de page


sur 19

Dans la partie supérieure, on retrouve l’espace connexion pour le visiteur, il se transforme en espace d’accès au profil lorsque que l’utilisateur est connecté. Ensuite, on retrouve les 4 boutons correspondants aux différents types de recherche puis tout à droite, le logo permettant de revenir à la page d’accueil.

Dans le but de limiter le nombre de clic nécessaire afin d’arriver à l’information recherchée, un menu déroulant est prévu dans la partie Département permettant d’accéder directement aux projets du département sélectionné.

Les icônes utilisés proviennent d’une banque d’icônes : dryIcon.com. Les symboles habillent le texte.

Nous avons choisi une association de couleur afin de représenter chaque catégorie : le « rouge » pour les réalisations, le « bleu » pour les étudiants et le « vert » pour les départements. Elles seront associées à chaque fois à leur partie correspondante, repère supplémentaire pour le visiteur.

Le logo rappelle des éléments du site de l’UTC par son icône et son dégradé de bleu. Les couleurs des personnages ajoutés sur notre logo rappellent les couleurs des différentes catégories de recherche.

http://www.utc.fr/


sur 19

d. Le pied de page

Le pied de page reprend les différents éléments de graphisme : le logo pour le retour à la page d’accueil, les différentes catégories et les auteurs du site.

On remarquera que les liens vers les catégories utilisent à nouveau les couleurs des différentes parties.

L’utilisateur retrouve donc les mêmes fonctionnalités dans l’entête et le pied de page afin d’éviter les aller retour entre le haut et le bas de la page.

e. Fond d’écran

Le fond d’écran est discret : un fond blanc parsemé de personnage, élément repris du logo. Il permet de garder un bon contraste entre le fond et les écritures.

f. Le corps

La page perso

On voit que deux possibilités sont offertes sur la page perso. Elles sont mises en évidence grâce à deux icones symboles habillant le texte.

La page « Editer mon profil »

Deux colonnes : celle de gauche donne l’intitulé du renseignement demandé et celle de droite les champs à remplir, clairement identifiés par une zone bleutée. L’alignement permet une bonne compréhension des éléments à renseigner en un coup d’œil.


sur 19

Ajouter un nouveau projet

La page « Ajouter un projet » à son profil propose de compléter les informations nécessaires du projet. Comme la page « Editer mon profil », les champs à compléter sont mis en évidence par une zone bleutée et les alignements sont, une fois de plus, respectés.


sur 19

Dans un souci d’efficacité de la page, quelques outils pratiques ont été ajoutés. Par exemple, on retrouve un calendrier afin de compléter la date de réalisation.

Page liste des départements

La page des départements permet au visiteur, ne connaissant pas les offres de formation d’ingénieur de l’UTC, d’avoir un aperçu des divers départements ainsi que des projets relatifs à ceux-ci. Chaque département est présenté de la même manière : son titre, un résumé explicatif et une illustration afin de rendre plus agréable la page.

Présentation en deux colonnes facilitant l’accès à l’information en un coup d’œil.


sur 19

Page liste des étudiants

La page liste des étudiants est, tout comme la page des départements, une liste d’étudiants présentés succinctement : nom et prénom, promo, département et photo de profil (fonction actuellement désactivée).

Page liste projet

La liste projet reprend également le même principe : une liste de projet présenté dans les grandes lignes (ici une seule colonne pour plus de lisibilité). Chaque projet est présenté grâce à : le titre, la date de création, le cadre du projet (UV et département) et une présentation rapide. Cette description sommaire permet de donner au visiteur l’information nécessaire à sa recherche que se soit la recherche d’un projet en particulier, d’un thème, d’un étudiant…


sur 19

Page de présentation d’un projet

Le principe de la page d’un projet et clair et simple : à droite, on trouve un encart récapitulatif du projet et les illustrations proposées et à droite un résumé du projet proposé par l’étudiant.

Afin de visualiser ces illustrations, il suffit de cliquer sur celle-ci et apparaît une lightbox.

La page projet permet également de faire le lien entre le projet et l’étudiant ainsi qu’entre le projet et la liste des projets de la branche dans lequel il apparaît.

Comme pour toute page, un retour vers la liste est possible.


sur 19

Conclusion

Le prototype proposé ici est en phase de test au moment de la rédaction du présent document. Il présente, comme tout prototype, une grande marge d’amélioration, notamment au niveau des fonctionnalités (notations, partage « social », recherche avancée, gestion des contributeurs aux projets, gestion des droits, affichage des informations personnelles…) et de la sécurité.

Pour autant il est fonctionnel et déjà des étudiants l’utilisent pour l’éprouver. Il est important de rappeler que le but de cette réalisation SI28 n’est pas l’obtention d’un produit fini mais bien de montrer les possibilités et l’intérêt d’un tel outil de communication multimédia à l’UTC. Au vu des réactions des différentes personnes consultées et étant donné la rareté de ce genre de service pour une école d’ingénieur ou université (hormis en informatique et en design), il apparaît donc plus que pertinent de développer une telle application web à l’UTC.

si28 rapport galerieutc · le gb aborde l’ensemble des procédés biologiques et des sciences du...

Documents