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: