Projet Tuteuré
Bagne Nouville Web application
Jonelle Amio, Clément Tasté, Florentin Mingual, Iréné Ikapa
Contexte du projet : 2
Attente du client : 3
L’équipe: 3
Rôle Version 1 3
Rôle Version 2 3
Rôle hypothétique Version 3 4
Veille, Référencement et Nom de domaine: 4
Nom de domaine: 4
Veille 4
Référencement 5
Scenario 6
Côté client (Front Office) : 6
Côté serveur (Front Office) 7
Côté serveur (Back Office) 8
En détaille (plus technique) 9
Côté client (Front Office) 9
Côté serveur (Front Office) 10
Côté serveur (Back Office) 11
Problèmes rencontrés et solutions apportées 11
Création graphique: 12
Logo: 12
Maquette: 14
photographie avant après: 15
Icône : 16
Personnage: 16
Icônes des bâtiments : 17
Audio-visuel : 19
Communication : 19
Journée du patrimoine: 20
Reportage Nc1er: 20
Réseaux sociaux: 21
Les Nouvelles-Calédoniennes: 22
Gestion de Projet : 22
Gestion d’une équipe: 23
Retroplanning : 23
Avancement du projet 27
Conclusion : 28
Ouverture potentielle : 28
Remerciement: 28
Annexe: 29
CONTEXTE DU PROJET :
L’association Témoignage d’un passé a fait appel à notre filière afin de réaliser une web application. Elle permettra aux utilisateurs de faire revivre l’histoire du bagne et ses bâtiments, grâce à leurs smartphones ou tablettes, mais aussi de s’informer sur l’histoire du bagne.
ATTENTE DU CLIENT :
L’association Témoignage d’un passé, notre commanditaire a exprimé plusieurs besoins vis-à-vis du projet tuteuré concernant le bagne de Nouville. Le premier et le plus important était de créer une web application, sur laquelle serait représentée une carte de Nouville où différentes informations par rapport aux bâtiments du bagne figureront, telles que le nom, l’histoire du lieu etc… Les informations ainsi que la page devaient paraître jeunes et modernes sans pour autant ne pas trop s’écarter de la charte graphique déjà existante. Un autre souhait de l’association, faire apparaître des bâtiments qui ont disparu, rénovés, réhabilités sans forcément conserver le côté ancien de l’endroit (cf cases dortoirs, boulevard du crime),
L’ÉQUIPE:
Jonelle AMIO : Développeur web
Irene IKAPA : Intégrateur web
Florentin MINGOUAL : Infographiste
Clément TASTE : Infographiste
RÔLE VERSION 1
Jonelle AMIO : Développeur Web
Irene IKAPA : Infographiste, Intégrateur Web
Florentin MINGOUAL : Infographiste
Clément TASTE : Communication, Infographiste
RÔLE VERSION 2
Jonelle AMIO : Développeur web, Intégrateur Web
Irene IKAPA : Webmaster, Photographe
Florentin MINGOUAL : Infographiste,
Clément TASTE : Communication, Infographiste, Photographe, Intégrateur Web, Web Designer
RÔLE HYPOTHÉTIQUE VERSION 3
Jonelle AMIO : Développeur Web
Irene IKAPA : Infographiste, Intégrateur Web
Florentin MINGOUAL : Infographiste, Animateur 3D
Clément TASTE : Communication, Infographiste
Ce document fait suite au cahier des charges réalisé au semestre 3 que vous
trouverez en annexe, si vous ne l’avez pas encore lue nous vous invitons à le
faire.
VEILLE, RÉFÉRENCEMENT ET NOM DE DOMAINE:
NOM DE DOMAINE:
bagnenouville.nc
Nous avons choisi le nom de domaine “bagnenouville.nc” car il est simple à retenir, on sait à quoi
s’attendre en voyant le nom de domaine, le fait d’avoir choisi un “.nc” permet de faire comprendre que le site
est local et que le bagne se situe sur Nouville en Nouvelle-Calédonie. En anglais le nom est
“nouvillepenalcolony.nc” qui est un peu plus long que celui en français. Le mot bagne seul ne permet pas
d'identifier le site sur internet car celui de Nouvelle-Calédonie n’est pas le seul dans le monde. C’est pourquoi
on a rajouté le mot nouville en plus pour permettre d’identifier le lieu où se situe le bagne en Nouvelle-Calédonie
et qu’il soit unique par rapport aux autres noms de domaines. Une autre proposition était
“témoignagedubagnenouville.nc” mais cependant le nom était trop long en français comme en anglais.
VEILLE
Pour le nom de domaine et les mots clés nous avons avons fait une veille grâce aux cours de Mme. P.Goukskou pour répertorier chaque nom de domaine des sites parlant du bagne ou de prison et des lieux touristiques. Nous avons donc cherché les mots clés appropriés pour le bagne.
.
RÉFÉRENCEMENT
Nous avons pris les mots clés Bagne, Nouméa, passé, prisonnier,Nouville, lieu touristique, histoire,
Nouvelle-Calédonie et application touristique car nous parlons du bagne qui se situe sur Nouville en Nouvelle-
Calédonie à Nouméa. C’est la ou on mettais les bagnards qui étaient aussi des prisonniers pour faire des
travaux pour le gouvernement dans le passé qui est une partie de l’histoire de la Nouvelle-Calédonie.
Maintenant, cette endroit est devenu un lieu touristique avec l’Université de la Nouvelle-Calédonie qui s’y est
installé. Nous avons donc décidé de faire un site web abut informatif pour le bagne de Nouville dans le but
d’attirer les touristes et les jeunes qui s’intéressent à l’histoire de ce lieu et de notre passé.
Nous avons retranscrits ces mots en anglais : Penal colony, Noumea past, prisoner, Nouville, history, New-
Caledonia, application web, tourist attraction, tourist site.
Cela permet de toucher pas que les personnes locales mais ceux à l’internationales aussi qui s'intéresserait à
ce lieu touristique.
Pour notre site nous avons donc mis en place des métadonnées pour qu’il soit bien référencé naturellement et
non en payant.
Nous avons mis comme titre “Témoignage d’un passé”.
<title>Témoignage d'un passé</title>
Avec comme contenu “Le Témoignage d’un passé vous fait revivre l’histoire du bagne de Nouville notamment
au travers de ses bâtiments et de son lieu grâce à sa nouvelle application.”
<meta name="Description" content="Le Témoignage d’un passé vous fait revivre l’histoire du bagne de
Nouville notamment au travers de ses bâtiments et de son lieu grâce à sa nouvelle application.">
Nous nous sommes mis en tant qu’auteur du site.
<meta name="Author" content="Jonelle Amio, Clément Taste, Florentin Mingoual, Irene Ikapa">
Nous avons mis un lien google+ même si l’association n’a pas de description google+, elle pourrait en avoir une
plus tard.
<link rel="Publisher" href="https://plus.google.com/+bagnenouville/posts">
Nous avons mis le lien de notre site pour y avoir accès.
<link rel="Canonical" href="https://bagnenouville.nc">
Voici ce que cela donne en anglais.
<link rel="Canonical" href=”nouvillepenalcolony.nc">
Nous avons mis un robot qui permettra d’indexer toutes les pages de notre site web.
<meta name="Robots" content="index, follow">
Nous avons utilisé les cours de Mme Tania Vijeh et de Mme Georgia-Pigi Gkouskou pour apprendre à
référencer les sites webs sans devoir payer (le référencement naturelle qui est le SEO). Nous avons utilisé un
site qui nous a permis de faire les métadonnées “https://www.seocentro.com/tools/seo/metatag-
generator.html”.
Nous avons réutilisé les compétences et les outils utilisés en cours fait avec Mme Georgia-Pigi Gkouskou pour
indexer notre site avec les robots et compléter les méta-names et les contents.
Nous avons dû rechercher quel site n’a pas la même description et le même contenu, utilisé des mots clefs qui
avaient un rapport avec le bagne de Nouville et l’association.
SCENARIO
Arrivant sur le site application, l’internaute aura la possibilité, soit de finir son jeu, ou alors de continuer vers le
site.
Quand on est suffisamment proche d’un des « markeurs » l’icône change, et celle-ci devient cliquable.
Au clic du « markeur » la vieille image du bâtiment s’affiche et au clic de ce même bouton l’image ancienne
disparaît pour laisser l’image actuelle du bâtiment va se mettre au-dessus de l’autre. De même pour le texte,
un bout de partie du texte s’affiche, et au clic, tout le texte s’affiche.
Sous la carte, on pourra retrouver les informations historiques et actuelles sur le bagne en Nouvelle Calédonie
puis en bas de la page le footer, les copyright, les partenaires, les mention légale…
Développement Web
CÔTÉ CLIENT (FRONT OFFICE) :
Suite à notre cahier des charges du semestre 3, certains outils que nous avions choisis et mis en places
ne nous satisfaisait pas, et puisque nous avons tant appris avec les cours de Mr Gilles Enée (développement
web) nous avons largement les compétences de trouver les solutions les plus adaptées aux fonctionnalités que
nous exigeons sans utiliser de logicielle de bibliothèque (librairie ou Framework) :
● Affichage en pleine écran des informations concernant le bâtiment du bagne en cliquant sur son icône
correspondant sur la carte
● Affichage du texte au-dessus les images ayant une animation sympa (du bas au haut de l’écran) au simple
clic d’un bouton dynamique placé en bas à droite de l’écran.
● Affichage en superposition de deux images avant/ après au clic d’un bouton qui se trouve en bas à gauche
de l’écran avec une animation semblable au texte mais cette fois de gauche à droite.
● Quitter le pop-up (les informations vis-à-vis du bâtiment du bagne)
● Changer le type de carte à afficher depuis le menu
● Changer la langue depuis le menu
Le Google api (interface de programmation applicative pour Application Programming Interface)
est quelque chose que nous n’avons jamais appris, mais grâce au cours d’algorithmique et développement web
de Mr Gilles Enée, nous maîtrisons le langage de programmation (JavaScript) nécessaire pour apprendre
comment l’api (logiciel de bibliothèque) Google marche, puis l’utiliser, et l'implémenter dans le site du bagne.
Grâce à ce logiciel de bibliothèque, nous avons une carte interactive avec ses markers (icônes cliquable sur la
carte) qui est la base de notre web application.
Une nouvelle fonctionnalité a été ajoutée, que nous n’avions pas pensé parce que nous n’avons pas le
matériel pour le faire, une visite virtuelle en 360 avec ses hotspots, des bâtiments qui ne sont pas accessibles au
public, grâce à Mr Eric Ragusa, au semestre 4, qui nous a vivement conseillé d’utiliser au maximum sa caméra
360 qu’il nous a mit humblement à disposition, nous avons donc eu cette idée de visite virtuelle, avec ses
conseils, et nos compétences en développement web, on a pu intégrer cette fonctionnalité en utilisant l’api
Google VRView. Bien que la vue VR soit compatible avec la vraie lecture VR stéréoscopique grâce à la
compatibilité avec Google Cardboard, elle est par défaut un mode "fenêtre magique" qui fonctionne sur tout,
du navigateur de bureau aux applications mobiles sans matériel spécial. Cette technologie nous a permis de
donner un contenu immersif au web application qui est aussi actuellement son point fort.
CÔTÉ SERVEUR (FRONT OFFICE)
Pour que le site soit dynamique, et multilingue, nous avons mis en place une base de données fait sur
mesure pour le web application et qui a demandé énormément de rigueur.
Les cours de semestre 2 et 3 (base de données, développement web) sur le langage coté serveur (php, sql) de
Mr Gilles Enée a été très bénéfique, puisque nous avons sue exactement ce que l’on devait faire, de la conception
de la structure de données jusqu'à la mise en place sur la web application, et grâce à ses astuces nous avons
réussis à éviter de nombreuses erreurs, et nombreuses heures de travail.
Ce qui fait le site multilingue, détectant si le navigateur utilisé par l’utilisateur, est en anglais ou en français selon
le site change de langue, ayant par défaut la langue française, les textes, les images, les liens, et les métas (partie
non visible aux utilisateurs, réserver aux robots du navigateur, permettant d’indexer le site web et de mieux le
référencer aux recherches sur un moteur de recherche) vient de la base de données qui sont modifiables via le
back office. De plus on peut ajouter comme on peut supprimer ou modifier les partenaires du site, et tout reste
responsive.
CÔTÉ SERVEUR (BACK OFFICE)
Cette partie est à la fois simple et compliquée, tout d’abord, la mise en place de la sécurité de la partie
administrateur (connexion) a été simple puisque nous l’avons déjà fait dans le cadre d’un TP et d’un projet de
développement web, et aussi parce que le cours a été bien expliquer.
Ensuite pour insérer, supprimer, rechercher et afficher des éléments dans la base de données via le
back office n’a rien de compliqué, on en a tellement fait en TP qu’on peut même réciter les lignes de code de
PHP pour effectuer ses actions.
La partie qui demande un petit peu plus de réflexion, c’est la partie, éditer un élément de la base de données, il
y a plusieurs solutions possibles, ayant plus ou moins de complexité et de flexibilité, et nous avons choisi le plus
simple.
La partie casse-tête arrive quand on ajoute la possibilité d’uploader des images, c’est pas évident de
créer une formule qui a des champs de texte, nombres avec uploader d’images.
Nous avons passé du temps à penser la meilleur approche pour le faire, avec l’aide de Mr Gilles Enée nous avons
réussi, cette fonctionnalité a pu aboutir dans les délais que nous nous somme fixé.
Uploader une image est une chose, uploader 3 images dans le même formulaire avant de l’enregistrer dans la
base de données en est une autre. C’est beaucoup plus compliqué que ce que nous imaginons parce qu'on ne
l’a jamais fait, mais puisque nous somme assez compétent dans ce langage et dans l’algorithmique, grâce aux
cours et au TP que nous avons fait, nous avons tant appris et tant pratiquer.
C’est encore plus compliqué de modifier des éléments de la base de données avec des gestions d’images
(uploader, remplacer, supprimer…) nous avons eu de nombreuses erreures que nous avons corrigé à plusieurs
reprises, l’importance c’est qu’on s’en soit sorti et la satisfaction des fonctionnalités compliqué qui marche nous
encourage à aller plus loin. (Voir annexe : back office).
Pour cela nous avons créé une fonctionnalité de créer, ajouter, supprimer des utilisateurs avec une connexion
assez particulière, il faut que le compte qui va se connecter soit le compte admin de l’association de témoignage
d’un passé ou le compte administrateur de dut mmi, et ces compte-là ne peut être effacé. (Voir annexe : gestion
des utilisateurs).
Nous avons aussi mis en place un contrôleur; si on essaye de se connecter et soit le mot de passe ou le login est
incorrect, au bout de la 5 fois on ne pourra plus jamais essayer de se connecter jusqu’au prochain nettoyage de
cache de navigateur. (Voir annexe : contacter l’administrateur).
Cette nouvelle fonctionnalité est très pratique, nous l’avons jamais vu, ni en cours, ni sur le web, modifier les
feuilles du style (css) du site via le back office avec une interface familière et les raccourci clavier habituelles,
grâce à une librairie JavaScript (logicielle bibliothèque) codemirror, et nos compétences en JavaScript, jQuery
PHP, nous avons réussi de l’implémenter sur le back office.
Au départ notre Mr Gilles Enée nous a proposé d’utiliser Google prettify mais celle-ci ne correspond pas à ce
que nous voulions mais grâce à celui-ci nous avons trouvé une alternative qui correspond à nos exigences. (Voir
annexe : CSS editor).
EN DÉTAILLE (PLUS TECHNIQUE)
Les compétences et connaissance appliquer, ou nécessaires pour apprendre les api et librairies, ou pour apporter
les solutions algorithmiques et ainsi la capacité de juger ce qui est le meilleur pour le web application sont acquis
au 3 premier semestre de cours de Mr Gilles Enée. Et les base d’algorithmique pour comprendre et appliquer
les cours de Mr Gilles Enée sont acquis aux cours d’algorithmique de Mr Gilles Taladoire. Ce web application est
seulement une infime partie de nos compétences et connaissances acquis au 3 premier semestre des Gilles.
Nous avons aussi appliquer nos connaissance et compétence sur l’UX design (l'expérience utilisateur, celle-ci
comporte l’ergonomie, la façon dont l’utilisateur va utiliser le web application, pour que chaque chose veut dire
à l’utilisateur, que tout soit intuitif, il n y a pas besoin des instructions sur comment l'utiliser) et la SEO (Search
Engine Optimsation c’est à dire, l’optimisation du site web pour les moteurs de recherche) grâce aux cours de
Mme Pergia Gkouskou-Giannakou et Mme Tania Vijeh.
CÔTÉ CLIENT (FRONT OFFICE)
Suite à notre veille, pour l’affichage en plein écran des informations sur le bagne au clic sur son icône ou sur son
titre à droite de la carte, le librairie JavaScript, info bubble (alternative de infowindow, afficheur par défaut de
Google quand on clique sur un marker) est insuffisant, de plus il y a des fonctionnalités qu’on ne vas pas s’en
servir, et ne correspond pas à notre structure html, nous avons aussi essayé un autre librairie de JavaScript vu
en cours et appliquer en TP, le magnific popup, qui est dépassé non plus nos attentes, nous avons donc cherché
un autre solution, et celle-ci comporte 3 ligne de code, un event listener (écouteur d'événement) de Google, si
on clique sur un marqueur (icône) cette fonction est appeler, qui lui, va afficher avec la fonction « show() » de
jQuery la boîte d’information cacher (display : none) et inversement quand on clique sur la croix en haut à droite
de la fenêtre quand le cette boîte s’affiche, on va le cacher avec « hide() » la fonction de jQuery (display :none).
Pour la partie affichage de texte au clic d’un bouton, nous avons d’abord essayé avec la fonction « animate() »
de jQuery mais comme disait nos profs quand on fait des boulettes, « pourquoi faire simple, si on peut faire
compliquer ? », donc nous avons fait cette fonctionnalité sur CSS grâce au keyframes que nous avons appris dans
le cours d’intégration multimédia, mais celle-ci prend beaucoup de ligne pour une simple animation, la solution
le plus simple, c’est un mélange de CSS3 et de jQuery, tout simplement en changeant la classe du bouton qui
dit, si le texte ou l’image est affichée ou pas, de côté CSS3, il suffit de mettre un « transition » de tant de second
et un « transform : translate » pour gérer l’emplacement des boîtes (texte/images avant/après).
De même façon que l’affichage de pop-up d’information sur le bâtiment du bagne quand on clique sur son icône
ou sont titre depuis sa légende à droite de la carte. Nous avons mis en place un autre écouteurs d'événement «
event listener », sur le menu il y a deux différents type de carte, satellite, ou plan, quand les cliques l’écouteur
d'événement va appeler la fonction change.maptype (change le type de carte) soit en satellite soit en plan, tout
dépend de ce que l’utilisateur a choisi.
Pour le changement de langue, il suffit d’ajouter « ?lang=fr ou ?lang=en » sur l’url du site, et c’est la
programmation côté serveur qui va tout gerer. Mais pour cela il suffit de créer 2 balise « a » ayant pour « href »
égale a ?lang=en pour l’anglais et ?lang=fr pour le français.
La visite virtuelle n’a pas été simple, ca appris du temps pour comprendre comment utiliser l’api google VRView,
cette api (interface de programmation applicative pour Application Programming Interface) (vue VR pour
Virtual Reality qui veut simplement dire réalité virtuelle) nous permet d'intégrer des photos que nous avons pris
à 360 degrés dans le Web application, nous avons téléchargé la version production (non minifier) depuis le site
de developpers.google directement, une fois que les fichiers sont sur nos répertoires, nous les ’avons modifiés,
car cette api nécessite une structure particulier qui correspond pas à notre site, et à notre façon de l’afficher;
une fois configuré nous l’avons travailler afin de mettre en place des hotspot (sont des régions sur une
photosphère avec laquelle les utilisateurs peuvent interagir. Les hotspots peuvent être rendus sur toutes les
plates-formes, mais la manière dont les utilisateurs interagissent avec eux diffère.), nous avons passer quelques
heures pour comprendre la démarche pour vraiment tout personnaliser et intégrer sur le web application et
aussi la façon dont on va l’afficher, qui a demandé un moment de réflexion de l’ergonomie.
CÔTÉ SERVEUR (FRONT OFFICE)
Quand l’utilisateur arrive sur la page, avec PHP on détecte le langage de son navigateur, et n’accepte que anglais
ou français, sinon par défaut la langue est en francais, l’utilisateur à la possibilité de changer de langue via le
menu.
Une fois que la langue est défini, nous allons l’enregistrer sur la session d’utilisateur, suite à cela, nous allons
récupérer les données depuis la base de données avec des requêtes préparées afin de mettre le contenu en
langue souhaité.
On met d’abord les métas données, ensuite on transforme les tableaux en PHP contenant les informations
nécessaire pour la carte (icônes, titre de marker, id de marker…) en tableaux JavaScript sans passer par AJAX,
puis on récupère aussi les textes et les liens, les liens des images pour remplir le site, grâces au requetes préparer
de PHP.
Au total on fait quatre requêtes préparées des quatre table, la partie meta, popup et marker, la table de contenu
du front office (le dictionnaire), et enfin la partie partenaire. les codes de ces quatres tableaux sont dans des
fichiers PHP différents, qui sont ensuite inclus sur l’index.php.
La partie popup et marker sont dans des fichiers séparé, car les éléments qu’ils contient ne sont pas destiné au
même endroit de notre structure html.
Donc on fait d’abord la requête préparer, puis on génère du html (contenu du popup qui s’affiche au clic sur le
marker) et on stock les informations qu’on va utiliser pour générer du JavaScript (conversion de tableau PHP en
tableau JavaScript) comme le titre de bâtiment, le lien de l'icône de marker… dans un tableau (array) de session.
Suite à cela dans la partie “dictionnaire” du site, après avoir fait la requête préparer on les stock dans un tableau
de session, pour que sur index.html, il suffit de faire un “echo” pour afficher l'élément dans le bon endroit.
Et enfin, au bas de la page on inclus le fichier PHP, qui récupère les textes, images et liens depuis la base de
données. Afin de générer du html concernant les partenaires de web application.
CÔTÉ SERVEUR (BACK OFFICE)
les fichiers du back office sont dans un répertoire particulier, que nous avons protéger avec “.htaccess” et non
indexé par le “robot.txt”. Quand on clic sur “se connecter” via le menu de la page d'accueil, on arrive sur le
“backoffice.php” de répertoire “user”, on créer la session et on demande si l’utilisateur est connecté puis on
affiche le formulaire de déconnexion, sinon on affiche le formulaire de connexion, au clic de bouton soumettre,
on vérifie avec PHP si le mot de passe que l’utilisateur a mis est correcte avec une requête préparée et la fonction
“password_verify()” de PHP, généré par “password_hash()”, qui crée une clé de hachage pour un mot de passe
afin de protéger les mot de passe contre des personne malveillant. si le mot de passe et son pseudo est correcte,
on crée une variable de session qui dit que l’utilisateur est bien connecté, sinon on compte jusqu'à cinq échec
de connexion, puis on bloque l’utilisateur de se connecter sur le site.
Arriver sur le back office après l’authentification, on affiche 6 bouton, permettant de modifier les
éléments du site qui sont stocké sur la base de données; la partie application (les textes et images de popup, les
images des icônes..), page d'accueil (tous les textes, images et liens), meta, et partenaire puis les deux autre
boutons renvois vers d’autre fichier qui nécessite une connexion particulier, car ces parties s’agit de la gestion
des utilisateurs et du css du site web.
Au clic de n’importe quel (quatres premiers) boutons, on affiche une formulaire permettant aux administrateurs
de rechercher quelque chose en particulier avec un mot clé, simplement de tout afficher, ou d’ajouter un
nouveau (que pour les bâtiments et pour les partenaires), une fois que les utilisateurs sont affiché, l'utilisateur
pourrait modifier ou supprimer l’élément de son choix.
Pour cela, les fichiers sont séparé par fonctionnalité. Par exemple, pour la partie application web, chaque bouton
de la page d’accueil de back office est un “input” de type “submit” ayant un “name” particulier permettant de
savoir ce qui a été cliqué, grâce à une “condition ‘if’” ce bouton a été cliqué on appelle la fonction formulaire
d’application web, celui ci affiche un champs de formulaire de recherche, tout afficher… et tout est fait par PHP,
les interactions avec la base de données se fait par des requêtes préparé
PROBLÈMES RENCONTRÉS ET SOLUTIONS APPORTÉES
Nous avons du mal a démarrer car nous ne savons pas comment commencer, qu’est qui est en priorité. on a
donc commencer dans l’ordre de tp, td, cm que nous avons appris, c’est à dire, la structure de la base de
données puis, la création de connexion, avec les mot de passe crypté, puis l’insertion, l’affichage, des
éléments, puis supprimer et enfin modifier les éléments avec des requêtes préparer de PHP. et enfin le front
office (page d’accueil).
On a eu un gros souci d’ergonomie, d’affichage des textes, d’animations, des beugs, En isolant les problèmes
et en les attaquants un par un, on a réussi à s’en sortir, et a chaque mise à jour de site web on essaye toujours
de le faire tester au gens extérieurs qui sont vraiment nul, pour savoir si c’est assez car on souhaiterait que les
personne qui vont utiliser le site web soit a l’aise avec.
On aussi beaucoup de problème avec le serveur web de l’iut, comme l’https qui nous a pénalisé car ça à nous
coûter une fonctionnalité majeur, la géolocalisation d’utilisateur, ce qui fait le web application une augmented
reality. Mais ce n’est pas tout, il faut être dans les salle informatique de l’iut afin de mettre ajours le site. Et
comme le serveur est bien configurer (ironique), on a eu pas mal de problème qu’on avait pas quand on test le
site en local.
Côté CSS nous n’avons pas pensé à l'adapter à tous les navigateurs.(erreur de débutant) et comme on test que
sur google chrome on a pas pensé de tout.
CRÉATION GRAPHIQUE:
Grâce aux cours d’infographie de Mr Valérian Neuenschwander nous avons sue comment utiliser les
logiciels de la suite Adobe, pour ce projet nous avons utilisé uniquement Photoshop et Illustrator, Mme
Stéphanie Pirounakis a su éveiller notre côté créatif, le sens des couleurs, la mise en forme etc… Enfin avec Mme
Florence Dhie et Stéphanie Pirounakis à le mettre en forme de façon professionnel, pour par exemple rédiger
convenablement une charte graphique ( couleurs utilisées, typographies etc…)
● LOGO:
Au cours de ce Projet nous devions réaliser un logo dans la continuité de la charte graphique
de la web application. Nous avions d’abord créer un premier logo (cf Cahier des charges/Annexe logo1)
qui n’était pas adéquat nous avons alors réalisé un deuxième logo qui s’adaptait plus au bagne de l’île
Nou où était représenté l’architecture typique de cette époque. Après un premier passage devant un
jury, il aurait fallu que le logo soit plus locale, nous avons alors réalisé un troisième logo (cf Annexe logo
1), où l’on représentait un margouillat zébré pour représenter les barreaux des cellules et le coté tenue
de prisonnier. Après différents essaie avec ce dernier logo, nous avons alors que l’on avait du mal à
distinguer ce qu’il représentait lorsque que le logo est en petite. Un fois le problème de distinction
résolue nous avons alors demandé à notre cliente de choisir tout en lui disant lequel nous préférions et
pourquoi entre le logo représentant l’architecture du bagne et celui représentant un margouillat, Mme
Emmanuelle Eriale a alors choisi le logo représentant l'encadrement de la porte de la chapelle du bagne.
Nous avons réalisé ce logo à l’aide du logiciel Adobe Illustrator, que l’on étudié avec Mr Valérian Neuenschwander en cours d’infographie. Avec les compétences acquis en Esthétique et Expression Artistique ainsi qu’en Théories de l'Information et de la Communication, nous avons pue l’adapter au site, au niveau des couleurs et ainsi créer une charte graphique professionnelle. Une fois le logo terminé nous l’avons décliné en différentes version, en noir et blanc, en couleur sur fond blanc et sur fond noir, en version en anglais puis en favicone, comme vue au semestre 3 avec Mme Florence Dhie.
À travers ce logo on peut reconnaître l’appartenance à l’association Témoignage d’un passé, avec la disposition de la typographie, incrustée dans une architecture, mais aussi le fait de réutiliser le mot « Témoignage ». Ce logo est spécifique au passé du bagne en Nouvelle-Calédonie, d’où le fait que nous avons utilisé Témoignage du bagne et non Témoignage d’un passé.Ce logo se veut moderne, jeune tout en restant dans l’optique du bagne et de l’association.Pour créer ce logo nous nous sommes inspirés de la chapelle du bagne de l’île Nou (voir Annexe logo 3) qui possède une voûte de porte typique de l’architecture du temps du bagne.
Couleurs : R :63 V :0 B :44 #3F002C
R :175 V :175 B :175 #AFAFAF
Typographie : « IrisUPC » avec un contour noir de 1pt
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789*/-+
ëêéèàù
● MAQUETTE:
Toujours dans l’optique de l’identité visuelle de la web application, nous avons réalisé différentes
maquettes, afin de répondre et d’adapter le site au mieux, en fonction des retours que l’on avait. Les cours de
Mme Georgia-Pigi Gkouskou et de Mme Tania Vijeh sur l’ergonomie des sites web ainsi que les cours de Mr
Gilles Enée nous ont permis de créer une maquette et donc un site par la suite, qui soit le plus ergonomique et
le plus simple possible. La création d’une maquette de site vue au semestre 1 avec Mme Georgia-Pigi Gkouskou,
avec l’appuie des cours d’infographie de Mr Valérian Neuenschwander et les cours d’esthétismes de Mme Aude
Emilie Dorion et Mme Stéphanie Pirounakis, nous a beaucoup aidé pour la réalisation de celui-ci.
Au début du projet nous avions proposé deux maquettes (cf Cahier des Charges/Version 2/Description
graphique et Ergonomique), une comportant une galerie et l’autre non, Mme Emmanuelle Eriale avait choisi
c’elle n’en comportant pas, nous l’avons alors reprit comme maquette de base. Le problème sans doute le plus
compliqué à été de rendre la carte plus adaptée aux smartphones et aux tablettes, une fois la solution trouvé
nous l’avons ajouté à la maquette du site.
→
Une fois la maquette du front office terminé nous avons commencé à réaliser une maquette du
backoffice toujours sur le même principe, de façon à ce qu’il soit simple d’utilisation aussi bien pour notre
commanditaire que pour les futurs développeurs. A travers les cours de Mr Gilles Enée, nous avons vue comment
était fait un back office qui nous a beaucoup aidé pour faire celui-ci. Nous n’avons réaliser trois maquettes du
back office (cf Annexe Maquette 1, Maquette 2, Maquette 3) car nous avions beaucoup de choses à y apporter
et avons donc préféré directement les mettres sur le site, sans forcément faire une maquette pour chaque
nouvelle fonction afin de gagner du temps. Pour faire le design du back office nous avons repris celui du front
office pour garder une cohérence entre les deux parties et pour bien faire comprendre que l’on est toujours sur
le même site.
● PHOTOGRAPHIE AVANT APRÈS:
L’un des grands rôles de la web application était de faire revivre certain bâtiments du bagne(cf
Annexe Photo 1, Photo 2, Photo 3, Photo 4, pour cela nous avons, utilisé les connaissances de deux
matière, l’infographie avec l’utilisation de photoshop et l’audio visuel avec Mme Alice Daumas où l’on
a appris à utiliser des appareilles photographiques (cf Cahier des charges/ Annexe/Photo 1).
Grâce à ses deux matières nous avons pue à travers des photomontages faire revivre les
bâtiments du bagne et leurs histoires. Pour cela nous avons procédé en trois étapes:
● la première à été de récupérer les photos des archives afin de voir qu’elle bâtiments nous
devions photoshopé, puis ensuite de trouver le même angle de vue, ce qui à été le plus
compliqué car certain bâtiments ont totalement disparue, ou alors on été complètement
reconstruit, la végétation n’est pas la même que celle de l’époque, certain arbre était très
gênant pour repérer le meilleur emplacement pour prendre la photos. un autre problème que
l’on a rencontré c’était que les objectifs de l’époque n’était pas les mêmes, ils donnent
l’impression que les bâtiments sont plus proches les uns des autres, et qu’ils sont légèrement
plus haut.
● la deuxième étape était de prendre la photo une fois le bon endroit repéré, cependant à cause
des quelques problèmes cités précédemment nous avons du refaire certaine photos car la
position des bâtiments n’étaient pas la même que celle des photos d’archives.
● la troisième et dernière étapes était, grâce à photoshop de “collé” la photo ancienne sur la
nouvelle, et de découper certain éléments de la photo d’archive par exemples les montagnes
ou alors la moitié d’un bâtiments, afin de faire apparaître la photo nouvelle du lieu.
● ICÔNE :
○ PERSONNAGE:
C’est un bagnard de Nouvelle-Calédonie possédant une tenue en noir et blanc avec un chapeau de
paille.
Le noir représente la part d’ombre de cette histoire, la couleur blanche est la pour s'opposer à l’ombre. Elle représente la lumière qui adoucit le personnage et son histoire. Le bagnard
représente l’époque d’avant représentant les ethnies du territoire et les criminels des villes qui étaient exploitées pour faire les travaux civils.
Ce personnage nous faisait penser aux bagnards en Nouvelle-Calédonie en tenue blanche avec
leur grand chapeau de paille. Comme l'icône n’avais pas de pied, nous avons choisi de mettre
des chaînes aux mains pour dire que le bagnard n’est pas libre de ses mouvements car le bagnard
avait des chaînes aux pieds. Nous avons rajouté la paille dans la bouche du bagnard pour ajouter
un style sympathique, pour adoucir l’image du bagnard qui sont aussi des criminels.
○ ICÔNES DES BÂTIMENTS :
Pour ce projet on a dû utiliser des logiciels qu’on a vus en cours avec Mr Valérian
Neuenschwander qui est un professeur d’infographie. Ces connaissances nous on permit de retoucher
des photos, faire un Montage artistique d’une bonne qualité. Il fallait aussi déterminer un design du
site et les couleurs, pour cela nous avons fait appel à nos connaissances d’expression artistique avec
Mme Stéphanie Pirounakis. Il fallait choisir avec grand soin les couleurs et les formes pour que le site
soit bien compris par notre cible.
Pour les icônes que nous retrouverons sur la carte, nous nous sommes inspirés d’un jeu qui est devenu en une semaine le jeu le plus joué au monde sur smartphone et tablette, “Pokémon go”. Nous avons juste repris la forme circulaire de l’icône et nous avons modifié le contenu de façon à ce qu’il entre en cohérence avec le sujet. Nous avons ajouté comme couleur le gris pour rester dans le domaine du bagne. Pour modifier ces icônes nous avons demandé conseil à notre professeur d’infographie pour avoir des icônes plus agréables à regarder. Nous avons dû revoir nos cours d’infographies pour pouvoir créer ces icônes et ainsi que ceux sur le logiciel adobe photoshop.
Le pointeur
La couleur grise est mise en évidence pour représenter l’époque des années 1863 où les français ont colonisé la Nouvelle-Calédonie pendant cette période. Représentant le neutre et l’ancienneté aussi.
L’église
L’église représentée comme un symbole de paix et de rédemption est représenté par la couleur blanche qui représente les valeurs de l’église qui est un lieu saint pour les religieux.
Nous avons utilisé une chapelle car cela exprime très bien l’église et le côté chrétien des personnes. Nous avons récupéré une icône d’une église sur internet.
Les ateliers
Les ateliers sont représentés par des rouages noirs. Le noir ici présente la technologie et le commerce des commerçants et bagnards ainsi que les différentes activités pratiquées par les artisans. Les engrenages pour faire l’atelier représente une zone de travail où l’on produit des objets pour les vendre après. Il s’agit d’un cycle et l’atelier est là pour ça. L’engrenage représente l’évolution ainsi qu'un cycle qui dure en boucle. Nous avons récupéré cette icône sur google.
Les vestiges archéologiques
Ces vestiges archéologiques est un lieu de recherche qui est de couleur marron car cela représente les vestiges historiques, un travail pour lequel il faut voyager et explorer la nature pour découvrir de nouveaux vestiges. Nous pensions utiliser un bâtiment mais c’était trop vague donc au final nous avons utilisé la pelle comme icône de l’archéologie. Notre inspiration pour cette icône nous vient du fait que l’on trouve que la pelle représente l’outil principal de l’archéologue pour trouver des objets du passé mais 2 pelles permet de montrer les liens entre archéologues et leurs coopérations sans faille. Nous avons ainsi pris sur internet une icône d’une pelle.
Mais les icônes n’étaient pas ergonomiques, nous les avions modifiées pour qu’elle soit conforme au site et voici les nouvelles icônes.
On a choisis de mettre toutes les icônes sur fond blanc pour avoir une meilleur ergonomie et pour les différenciés des nouvelles icônes.
On a ajouté une nouvelle fonctionnalité qui permet de voir le lieu où on a pris la photo grâce à ces icônes. On l’a mis sous fond noir pour qu’on puisse la différencier des autres icônes avec un icône blanche.
Nous avons ensuite modifiés cette icône en la mettant sous forme de gif pour qu’elle se différencie des autres icônes car elle n’était pas assez voyante pour le public donc nous l’avons animé en fusionnant cette icône avec les autres icônes ayant un rapport avec la photo et le lieu.
Nous avions une autre proposition que pourrons ensuite refaire les prochaines personnes qui s’occuperont de ce site de rajouter une fonctionnalité en plus sur nos icônes. C’est à dire de montrer quand l’icône est possible d’aller dessus car on est assez proche.
Une icône impossible d’aller dessus car on est trop loin ou on est pas dans la zone. On a pris la couleur rouge pour dire qu’elle n’est pas accessible au public et qu’il faut s’en approcher pour qu’elle y soit accessible.
Ces couleurs font référence au feu de la ville qui permet de montrer quand il est possible de passer au feu vert et quand on doit attendre au feu rouge le temps que le feu passe au vert.
Pour en arriver à faire ces icônes, nous avons dû utiliser les cours de Mr Valérian Neuenschwander notre professeur d’infographie pour l’ergonomie des icônes et les cours de Mme Stéphanie Pirounakis pour le design des icônes. Nous avons donc dû utiliser le logiciel photoshop pour l’assemblage des icônes et le logiciel illustrator pour redessiner certaines icônes comme la grue et l’icône du personnage.
Nous avons utilisé google image pour chercher les icônes correspondant à chaque image. Et savoir si
elles étaient libre de droit de les utiliser ou non. Dans cette recherche nous avons dû trouver des icônes pour
ensuite les modifiés qui n’étaient pas tout le temps facile (comme la grue avec illustrator pour la décalquer au
propre à partir d’une image). Trouver les icônes qui correspondent au style de l’association c’est à dire son design
et les images si elles n’étaient pas assez frappantes ou n’allaient pas avec l’association. L’ergonomie était un
problème car, avant l’idée du fond blanc, aucune icône n’allaient avec la couleur grise (en fond) donc nous avons
dû rajouter un nouveau fond qui est blanc mais en gardant l’icône grise et de voir qu’elle icône allait avec cette
couleur sinon elle devait être mise en noir pour correspondre avec le fond. Pour les icônes de photographie
n’étaient pas assez frappante donc nous avons dû en faire une image qui s’anime pour attirer l’utilisateur du
site. Comme n’ayant pas étudié cette animations en cours d’infographie, nous avons dû l’apprendre par nous
même à l’aide de tutoriel.
AUDIO-VISUEL :
A travers ce projet nous avons mit les cours de Mme Alice Daumas et de Mr Eric Ragusa en pratique, en
effet à travers leurs matière nous avons appris à utiliser les appareils photographiques, des CANON 750d EOS
avec les différents objectifs mis à notre dispositions, et donc de choisir le plus adapté aux photos que l’on
souhaitait prendre. Nous avons aussi eu la chance d’avoir une caméra 360 que Mr Eric Ragusa nous à prêté, ce
qui à permis de réaliser des photos 360 de la boulangerie ainsi que tu presbytère de la chapel (cf Annexe 360 1,
360 2, 360 3, tous deux fermé au public.
COMMUNICATION :
Au cours du semestre 4 plus particulièrement au cours de ce dernier mois, il ya eu beaucoup de communication autour de ce projet ainsi qu’autour de la journée de présentation au grand public qui a eu lieu le 26 août au CREIPAC, aussi bien via la radio, que les Nouvelles-Calédoniennes, ou encore le journal télévisé.
JOURNÉE DU PATRIMOINE:
Samedi 26 août s’est déroulé l’un des moments clé de notre projet, au cours de la journée du patrimoine l’association témoignage d’un passé a organisées différentes activités autour du bagne, nous avons été invité à l’occasion de cette journée pour présenter notre web application, qui permet de faire revivre les bâtiments du bagne à travers son smartphone où sa tablette. Cela été pour nous une nouvelle expérience très enrichissante de présenter un site sur lequel on a passé autant de temps, de voir la réaction de l’auditor, mais aussi les retours qu’on nous fait. Cette journée n’a pas seulement servi à faire connaître notre site, elle a aussi permis de promouvoir l’IUT et le DUT MMI.
REPORTAGE NC1ER:
Dans le but de faire connaître notre site, Mme. E.Eriale a contacté Nc1er afin qu’il réalise un petit
reportage sur la web application, ainsi le jeudi 24 août nous avons donc participé à la production du reportages,
avec des interviews, des explications et des démonstrations du site. Nous avons pue voir le reportage paraître
dans le journal du 19h30 le vendredi suivant afin d’annoncer l’évènement pour le samedi.
RÉSEAUX SOCIAUX:
Pour élargir la communication de notre site applicatif web, l’association témoignage d’un passé nous aide à communiquer à traver leur page facebook via des images de notre présentation aux grands publics.
Les pages Facebook du DUT MMI Nouvelle-Calédonie et de l’Institut Universitaire de Technologie de Nouvelle-Calédonie ont de leur côté partagé des articles de journaux concernant notre projet tuteuré (cf Annexe Article 1, Article 2).
LES NOUVELLES-CALÉDONIENNES:
Lors de la prise des photos 360 dans la boulangerie, Mme Emmanuelle Eriale a souhaiter faire des photos de nous, afin d’illustrer un article des Nouvelles-Calédoniens concernant la préparations de la journée du patrimoine.
Durant l'après-midi de la journée du patrimoine un journaliste des Nouvelles-Calédoniennes nous a contacté dans le but de faire un article sur notre projet, nous avons donc eu le privilège de paraître dans l’édition du lundi avec une demi page concernant la web application qui permet de faire revivre les bâtiments du bagne.
GESTION DE PROJET :
● GESTION D’UNE ÉQUIPE :
Au cours de ce projet nous avons appris à gérer une équipe, c’est à dire à se répartir les rôles au sein de
l’équipe en fonctions de l’avancement du projet et des difficultés que l’on rencontre, savoir être multitache dans
certains cas, mais aussi savoir anticiper si quelqu’un risque de s'absenter ou de tomber malade afin que l’on
puisse avoir son travail rapidement et reprendre la main derrière lui pour que le projet puisse continuer.
Nous avons essayé de faire de façon à ce que chacun soit impliqué dans la gestion de l’équipe, en prenant les
décisions en groupe, en tenant compte des avis des membres.
On s’est ainsi rendu compte que ce n’est pas forcément évident de gérer une équipe.
● RETROPLANNING :
Grâce au cours de Gestion de Projet de Mr Frédéric Saugnac nous avons vue comment faire un
rétroplanning, les différentes tâches et jalons que l’on a rencontré au cours du projet. Pour résumer ce projet et
ces différentes étapes nous avons effectué un rétroplanning depuis le semestre 3 jusqu’à la fin du projet.
Dates Tâches
02/03/17 Première réunion
Présentation du projet par le client
Début du projet
09/03/17 Deuxième réunion
Discussion du projet avec le client
Répartition des tâches dans le groupe
09/03/17 01/06/17 Tâche Photographe
09/03/17 1ère Prise photo
16/03/17 27/04/17 Empêchement : Travaux en cours
04/05/17 01/06/17
Dernière photo à prendre
En attente du bateau et de la fin des travaux
04/05/17 04/05/17 Troisième réunion
Avancement du cahier des charges, du sites web, création d'un personnage sur la carte
23/03/17 11/05/17 Tâche Infographiste V1
23/03/17 11/05/17 Charte graphique préparé
23/03/17 23/03/17 Recherche Typographie
30/03/17 11/05/17 Création des icônes
30/03/17 06/04/17 Création du logo
04/05/17 11/05/17 Création du gif
16/03/17 01/06/17 Tâche Infographiste V2
16/03/17 21/03/17 Retouche des photos prises
23/03/17 27/04/17 Attente des autres photos
Cause : Besoin d'un bateau pour une photo ou deux et attente de la fin des travaux en face de l'IUT.
04/05/17 01/06/17 Retouche des dernières photos
04/05/17 25/05/17 Création de jeu de carte
Créer le dos de la carte
08/05/17 11/05/17 Retouche des icônes
Améliorations des icônes de la V1
04/05/17 11/05/17 Retouche du personnage
Amélioration du personnage de la V1
04/05/17 01/06/17 Web design
01/06/17 22/06/17 Tâche Infographiste V3
01/06/17 08/06/17 Prise des vidéos
09/06/17 22/06/17 Retouche bâtiment en 3D
09/03/17 14/07/17 Tâches Développeur Web
09/03/17 15/03/17 L'arborescence
Création de l'arborescence du site et de la base de donnée
16/03/17 23/03/17 Etude google API
Effectue des études sur Google API ("Géolocalisation" : savoir comment ça marche et comment
l'intégrer au site web)
24/03/17 30/03/17 Intégration du Google API
Intégrer le Google API dans le site web applicatif
31/03/17 06/04/17 création de localisation de l'utilisateur
Suivi des déplacements de l'utilisateur
07/04/17 13/04/17 Personnalisation de la page
Rajout des documents via le Jquery
27/04/17 29/05/17 Changement de librairie
Recherche et étude d'une nouvelle librairie permettant d'afficher l'image et le texte concernant les
bâtiments du bagne (infobubble : équivalent de infowindows : librairie par défaut de Google API)
17/07/17 17/07/17 Fin du travail du Développeur Web
03/04/17 07/04/17 Vacances
09/03/17 14/07/17 Tâches Intégrateur Web
09/03/17 16/03/17 Création d'une maquette
17/03/17 23/03/17 Création du site web
Créer le corps(la structure ou son squelette) du site web grâce à l'HTML
04/05/17 11/05/17 Création du fond du site web
Créer le fond du site web grâce au css (la couleur, la typographie)
19/05/17 01/06/17 intégration des images
Attente du texte pour associer aux images (le texte donné par le client)
02/06/17 08/06/17 mentions légales+copyright
09/06/17 15/06/17 Préparation de la base de donnée
24/03/17 06/04/17 Recherche des coordonnées
17/07/17 17/07/17 Fin de la tâche de l'Intégrateur Web
27/04/17 27/04/17 Quatrième réunion
Récapitulatif du projet et des tâches accomplis
08/06/17 08/06/17 Rendu rapport de stage et soutenance du projet
12/06/17 16/06/17 Vacances
18/07/17 18/07/17 Test de l'application
03/08/11 03/08/11 Lancement de la web application
07/08/17 18/08/17 Vacances
24/08/17 24/08/17 5èmes réunion du projet
26/08/17 26/08/17 Présentation du groupe de projet au public - Date du 26 août-
31/08/17 31/08/17 Dernière réunion du projet
04/09/17 04/09/17 Rendu du rapport du projet
07/09/17 Oral Projet tuteuré
AVANCEMENT DU PROJET Malgré le fait que l’on est passé beaucoup de temps sur ce projet, hors horaire scolaire, que nous
ayons fait des réunions afins de se fixer des nouveaux objectifs, de faire des points sur l’avancement du projet,
nous n’avons malheureusement pas pu arriver à terminer le projet dans les temps, notamment au niveau de la
transmission aux futurs développeurs ou à notre client. Vu le déroulement du projet, nous avons pensez à de
nombres nouvelles fonctionnalité que vous retrouverez ci-dessous dans l'Ouverture potentielle”.
CONCLUSION :
Ce projet tuteuré nous a donné une vision du monde professionnel, en travaillant plus comme des
professionnels et moins comme des étudiants. Aussi bien dans la communication avec clients mais aussi avec
les médias, également en gestion de projet avec les deadlines. Nous avons amélioré notre collaboration d’équipe
et établit les tâches en fonction des capacité de chacun. Nous sommes fier du travails que nous avons mené au
cours de ces deux semestres, certes il reste encore des choses à effectuer pour que le site soit complètement
fini.
Dans l’ensemble nous trouvons que le projet s’est bien déroulé, mise à part vers la fin du projet où l’on
commençait à se déconcentrer ce qui nous a fait perdre du temps. De plus, le redoublement d’un des membres
du groupes nous a empêché à l’heure actuelle de transmettre le site à notre cliente, car par manque de temps
nous n’avons pas fini le design du back office ainsi que le tutoriel pour l'utiliser. Ainsi, nous pensons l’effectuer
au début de nos stage afin que Mme Emmanuelle Eriale puis avoir accès à son site le plus rapidement possible.
OUVERTURE POTENTIELLE :
Malgré le fait que l’on est travaillé dessus durant 1 ans, la web application a encore beaucoup de
fonctionnalité qui peuvent être apporté et auxquelles nous avons réfléchi pour les futurs développeurs:
● la première est de reconstituer certain bâtiments en 3D,
● la deuxième serait d’ajouter un agenda aussi pour prévenir des futurs visites du sites ou alors des futurs
évènements comme la journée du patrimoine ou autre.
● la troisième est de créer un formulaire de contacte afin que des gens puisse partager des photos d’objets
ancien (en rapport avec le bagne) qu’ils ont chez eux.
● la quatrième aurait pour un but ludique, ajouter au site un jeux de carte mémo avec les bâtiments du
bagne dessiné dessus.
● la cinquième aurait pour but d’aider le visiteur à se déplacer,en utilisant un système de tracking,ainsi il
sait où il se trouve
● la sixième serait une option, ce serait de rendre tous les bâtiments interactifs, avec un avant/après.
● le septième qui reste aussi une options, est de transformer le site en une application.
● le huitième concerne le côté communication avec la réalisations de flyers ou autres pour toucher un plus
grand nombres de personnes
REMERCIEMENT:
Merci à
Mr Gilles Enée pour nous avoir accompagné tout au long de ce projet.
Mme Emmanuelle Eriale pour avoir fait appel à notre formation pour la réalisation de ce projet.
L’IUT et à Mr Eric Ragusa pour le prêt du matériel.
Et enfin à tous nos professeur qui nous ont permis à travers leurs cours, la réalisation de ce projet.
ANNEXE:
Logo 1
Logo 2
Logo3
Photo 1
Photo 2
Photo 3
Photo 4
Maquette 1 Maquette 2
360 1
360 2
360 3
Article 1
Article 2
Back Office: