SOMMAIRE INTRODUCTION
...................................................................................................................................................................p.4
1 - STRATéGIE DE COMMUNICATIOn
........................................................................................................p.5 à 17
L’Annonceur Cahier des charges Analyse de l’ existant Analyse de la concurrence Cibles Objectifs Ton et message Contraintes Moyens Liste des tâches, planning et devis Prévisions des risques
p.5 p.6 p.9 p.10 p.13 p.13 p.13 p.13 p.14 p.15 p.17
2 - CHARTE GRAPHIQUE & éDITORIALE
......................................................................................p.18 à 25 Logos et ambiances p.18 Arborescence p.21 Propositions de maquettes p.22 Zoning p.23 Choix du client p.24
3 - UTILISABILITé DU SITE
...................................................................................................................p.26 à 27 Storyboard p.26 Synopsis et rubriques p.27
4 - DéVELOPPEMENT
............................................................................................................................p.28 à 29
MLD - MCD Plugins jQuery
p.28 p.29
BILAN.........................................................................................................................................................................p.30 3
INTRODUCTION Proposée à des vacanciers, la location saisonnière est nécessairement meublée et pour une durée très variable, à la nuitée, à la semaine ou au mois. A la différence d’ une location de longue durée, l’ une des principales caractéristiques de la location saisonnière est de pouvoir être louée par son propriétaire pour des durées courtes, fixées librement. La location saisonnière est un phénomène en plein essor et s’ est imposée comme une véritable alternative aux autres formes de tourisme. A l’heure où les arbitrages budgétaires n’ ont jamais été aussi marqués, elle tire incontestablement parti de la crise. En supprimant les intermédiaires, elle permet aux vacanciers d’obtenir un hébergement facilement, alliant confort, autonomie et authenticité. Si le marché bénéficie de moteurs incontestables, sa croissance est très dépendante d’un cadre réglementaire stricte. Il est de plus en plus difficile de trouver un logement à un prix abordable à Antibes-Juan-les-Pins. Il faut dire que la ville ne manque pas d’ atouts. Les 23 kilomètres de côtes alternent criques, plages de sable fin ou de galets. Mais surtout à la pointe sud de la ville, abrite le Cap d’Antibes qui partage le littoral en deux : la baie des Anges et la baie de Golfe Juan. Quartier résidentiel, c’ est dans ce secteur que se pressent chaque année les vacanciers.
4
1 - STRATéGIE DE COMMUNICATION
-1 STRATéGIE DE COMMUNICATION L’ annonceur
Nicole Lecomte, représentée par Michel Le Corff lors du projet, est propriétaire de plusieurs biens immobiliers.Elle loue principalement par Internet ses propriétés : un gîte, une villa à Antibes et deux appartements situés en Sologne. Suite à un problème technique dû à la suppression des textes par l’hébergeur, elle souhaite refaire son site internet pour la propriété Villa Bella Vista situé à Antibes afin de le mettre au goût du jour, le rendre plus attractif et plus adapté à la clientèle. Ce site a pour objectif principal la diffusion de l’offre de location de la villa. Il doit par ailleurs permettre d’ établir un dialogue entre les clients potentiels et la propriétaire. Les clients étant souvent d’ origine anglo-saxonne, il est indispensable que le site soit complété d’ une version anglaise.
5
1 - STRATéGIE DE COMMUNICATION
CAHIER DES CHARGES 1. PROJET Ce site a pour objectif principal la diffusion de l’offre de location de la villa. Il doit par ailleurs permettre d’établir un dialogue (par mails) entre les clients potentiels et la propriétaire. Les clients étant souvent d’origine anglo-saxonne, il est indispensable que le site soit complété d’une version anglaise.
2. MAÎTRE D’OUVRAGE ET MAÎTRE D’OEUVRE : Auprès des agences, le Maître d’ouvrage (MOA) doit : - valider les phases de choix (graphisme, ergonomie, contenus) ; - valider le respect du cahier des charges ; - veiller au respect des délais ; - fournir les contenus de base (textes, plaquettes, logos, images, photos). Le maître d’oeuvre (MOE), vis-à-vis du client, se destine à : - Concevoir et réaliser le site internet - Respecter les délais - Proposer un planning de réalisation et un devis pour la réalisation de la prestation.
3. CIBLES ET OBJECTIFS Ce site comporte plusieurs cibles : - familles françaises ; - familles anglo-saxonnes ; - retraités de toutes nationalités. Ce site n’est pas un site de vente à proprement dit mais plutôt un site informatif. Il doit être un support de communication qui permet de faire découvrir la villa aux potentiels clients ainsi que de fidéliser la clientèle en donnant une image moderne et sereine de la villa.
4. CONTRAINTES Comme tout projet, des contraintes subsistent. Tout d’abord, nous avons des contraintes temporelles, en effet, nous avons des dates clés à respecter. Le projet se divise en deux étapes symbolisées par deux rendus : - Rapport de Conception (03/02/2014); - Rapport final (27/02/2014). Mais aussi, des contraintes en terme de contenus puisque les ressources disponibles pour la réalisation du site internet comprennent des images en petit et grand format (.jpg) et des textes, en format .txt Ensuite, le site internet devra proposer les contenus en français, et en anglais, en fonction des cibles. Par ailleurs, le site web sera responsive afin que le client puisse le regarder sur les différents supports. Pour finir, les données relatives au back-office seront stockées dans une ou plusieurs base(s) de données MySQL. . 6
1 - STRATéGIE DE COMMUNICATION 5. ARBORESCENCE L’ architecture du site est simple et la version tronquée des textes actuellement en ligne : www.villabellavista.fr permettent d’appréhender simplement l’arborescence. En complément, je fournis les fichiers d’un site équivalent : www.gitecamelia.fr afin de mieux comprendre l’ architecture du futur site et notamment la mise en forme des futurs textes. À noter que les données du site Camélia sont stockées dans des fichiers .txt et non dans une base de données MySQL; ce qui explique que le site fonctionne toujours sous PHP5 bien qu’écrit dans une version de PHP bien antérieure.
6. PRESTATIONS ATTENDUES 6.1 - Charte graphique et charte éditoriale - une recherche graphique et iconographique ; - une réflexion ergonomique et la définition d’un système de navigation ; - des propositions de mise-en-page et de charte éditoriale. 6.2 - Création et récupération de contenus - adapter à une présentation web tous les contenus fournis ; - créer les éléments graphiques (fond de page, boutons, icônes...). 6.3 - Développement La programmation proprement dite du backoffice et le traitement du formulaire de collecte d’informations devront se faire dans les langages de développement classiques à savoir : PHP5, XML, MySQL, CSS3. La diversité actuelle des supports de communication implique de penser la création de ce site en « Responsive Web Design ». 6.4 - Maquette du site Afin de valider le site, l’agence devra fournir une maquette afin de vérifier que le site est conforme aux objectifs : navigation, graphisme, mise-en-page et charte éditoriale. 6.5 - Dépôt du nom du domaine et hébergement Le nom de domaine du site villabellavista.fr est déjà déposé. 6.6 - Référencement Le prestataire proposera au client plusieurs solutions possibles pour le référencement du site tenant notamment compte du public visé, ainsi que de la vocation et des contenus du site web pour le référencement naturel. 6.7 - Mise à jour La mise à jour des photos et des textes est assurée par le client. C’ est un impératif du cahier des charges. 6.8 - Statistiques de connections Le prestataire fournira au client un accès en ligne aux statistiques de fréquentation du site. Celles-ci doivent comprendre un maximum de renseignements : - nombre d’ accès visiteurs ; - mots clés tapés par les internautes ; - moteurs et annuaires de provenance ; - nombre de visites, etc. L’ outil Google Analytics est très complet sur ce sujet. 7
1 - STRATéGIE DE COMMUNICATION 7. LIVRABLES ATTENDUS Les pièces à livrer par l’agence pendant et après la réalisation du site sont les suivantes : - planning de réalisation avec un engagement sur la date de « livraison » ; - arborescence détaillée du site ; - fichiers informatiques source (pages HTML, graphismes, bases de données, programmes...) ; - documents décrivant le site, son fonctionnement et son hébergement ; - version du code HTML utilisée ; - version des navigateurs compatibles.
8. OBLIGATIONS, PROPRIÉTÉS ET DROITS Trois agences concurrentes ont été constituées par l’équipe pédagogique de la licence. Les agences sont encadrées par l’équipe pédagogique et ont plusieurs entrevues avec le client, afin qu’il valide ou réoriente les produits présentés. Une soutenance finale est organisée, le 27 février 2014, pour validation du travail d’une agence par le client et pour évaluation pédagogique du niveau des étudiants (travail noté). Le client s’engage à : - Mettre à disposition des agences le cahier des charges ainsi que les ressources documentaires nécessaires à la réalisation du travail demandé ; - Faciliter les prises de rendez-vous, les repérages des agences, en prenant en charge les déplacements et repas éventuels ; - Participer aux réunions, à la soutenance finale, à l’évaluation des travaux pendant toute la période du projet. L’IUT de Blois s’engage à : - Garantir l’ encadrement des étudiants de la licence ATC et assurer l’ organisation matérielle du projet ; - Assurer l’organisation de l’ évaluation des produits réalisés ; - Assurer la réalisation des produits à la date prévue par le cahier des charges.
8
1 - STRATéGIE DE COMMUNICATION
analyse de l’existant page d’accueil // ONGLETS // TEXTES // GESTION IMAGES
Après une analyse du site actuel Villa BellaVista, nous avons pu constater que malgré quelques points positifs, le site souffre globalement de défauts d’utilisabilité et de graphisme. En effet, le fait que le menu soit disposé sur deux lignes et qu’il comporte autant d’entrées est très problématique en terme d’utilisabilité. De même, la couleur verte omniprésente dans le site ne permet pas de donner plus d’importance aux éléments qui en ont besoin, tels que les titres de pages. Enfin, le site souffre globalement du fait qu’il est assez agé et ne dispose pas des derniers standards (lightbox, slider et responsive). 9
1 - STRATéGIE DE COMMUNICATION
analyse de la concurrence La Crique Magique
Malgré un menu en bas à droite en version PC, une mauvaise gestion de celui pour la version mobile ainsi que le temps de chargement des images légèrement trop long, ce site est intuitif, très porté sur les photos qui sont en très bonne qualité. Une ambiance est tout de suite mise en place grâce à des textures lors des chargements, des couleurs très vives qui incitent aux vacances, ce qui donnent un dynamisme important à ce site. L'aspect un tiers / deux tiers pour les images et les textes semblent une idée originale qui met en avant les visuels tout en ayant un texte lisible.
riad mhidou
Ce site est simple et intuitif puisqu'il dispose d'un menu standard, d'un slider classique en page d'accueil, des polices lisibles et de nombreuses présentations d'activités qui donnent un plus à l'internaute. Le plus également à ne pas négliger sur ce site, est la météo qui permet à l'internaute de se projeter en vacances. Néanmoins, les couleurs ne sont pas attrayantes ni inadéquates pour le type de clientèle. Le manque de titres, sous-titres et rubriques ne renvoient pas une image très professionnelle tout comme le menu aligné à gauche. 10
1 - STRATéGIE DE COMMUNICATION
mouschetty
Avec un graphisme original grâce à un menu vertical sur la gauche et un effet catalogue grâce au titre sur l’image de la page d’accueil qui est par ailleurs bien travaillée, ce site dégage une image haut de gamme et assez privilégiée malgré un défaut assez conséquent qui est le fond gris de droite qui n’ est pas centré et ne s’ adapte pas à la taille des écrans.
lafitenia resort
Les points positifs de ce site sont axés sur la simplicité d'utilisation. Le menu, classique, est centré en haut, la charte graphique est claire et définie dans tout le site et le contact est très présent ce qui permet de créer un lien de proximité avec le potentiel client. Malgré cela, plusieurs petits défauts sont présents, notamment trop d'éléments sont cliquables ; les textes sont trop nombreux sur la page d'accueil comme sur les pages suivantes et le menu, quant à lui, dispose d'entrées trop petites et trop nombreuses. Ce site dispose d'un esthétisme assez sobre et chic mais n’ est pas très intuitif et un peu trop statique. 11
1 - STRATéGIE DE COMMUNICATION
le domaine hautes ribes
Ce site semble très statique avec un logo simple, sans interactivité, ni d'aide à l'utilisateur notamment à cause du manque de “hover” sur les entrées du menu. Par ailleurs, les textes ne sont pas très lisibles à cause d’un empattement très présent. Cependant, des activités sont proposées autour de la villa, une lightbox jQuery permet d'agrandir les photos et de les voir grâce à des sliders. L'atout majeur de ce site est la visite virtuelle de la villa qui permet à l'internaute de s'y projeter.
bilan Grâce à cette analyse, nous avons choisi une stratégie d’ adhésion en s’inspirant de sites déjà existants tout en ajoutant une pointe d’ originalité qui permettra de se démarquer. Pour cela et afin de répondre aux attentes de la cible déterminée, nous avons sélectionné un certain nombre de critères qui sembleraient judicieux à mettre en place sur le site Villa BellaVista :
- Un menu simple et intuitif ; - Une gestion de l’ espace en magazine (une moitié image et l’ autre texte) ; - Une accroche “contactez-moi” qui permettrait de créer un lien de proximité avec les internautes ; - Installer une gallerie de photos avec possibilité de trier.
Cependant certains critères sont, quant à eux, à éviter :
- Un formulaire de contact à double utilisation (réservation et contact) ; - La musique d’ ambiance qui peut réfracter l’ internaute ; - Le menu en bas qui ne serait pas intuitif pour la cible.
12
1 - STRATéGIE DE COMMUNICATION
LES CIBLES Les cibles que souhaite atteindre le site de la Villa Bella Vista peut être divisées en deux cibles distinctes : Tout d’abord les familles françaises et anglo-saxonnes comprises dans une tranche d’âge d’ environ 35 à 55 ans avec des enfants, vivant plutôt dans des grandes villes avec une situation de CSP++. Ces familles privilégient les endroits plutôt paisibles et reposants avec des activités proches pour les enfants. Par ailleurs, il y a les retraités de toutes nationalités d’ environ 55-70 ans, anciens CSP++ souhaitant profiter du confort d’une villa en France dans un cadre d’exception.
objectifs Les objectifs de ce site sont principalement conatifs, c’ est-à-dire créer des réservations et du contact avec la propriétaire de la villa afin de créer des liens de proximité. Créer du trafic sur le site internet est également important afin de susciter l’intérêt des internautes et ainsi la fidéliser. Les objectifs secondaires jouent sur l’affectif, afin de donner envie aux internautes de partir en vacances en France.
ton & message “Une villa authentique pour des moments chaleureux” Le site s’ adressant à des familles et retraités, l’utilisation “des moments chaleureux” permet de donner un message cosy à la villa et le mot “authentique” permet de souligner la tendance « french touch » de la villa. Par ailleurs, en utilisant un ton sérieux et sobre sur le site, cela permet à la cible de s’ identifier tout en restant chic voulu par le haut de gamme mais simple afin de s’ adapter à la clientèle.
contraintes Temporelles : - Dossier de conception à rendre le 4 février 2014 ; - Site final à rendre pour le 27 février 2014 ; - Planning des tâches à respecter.
Techniques : - Peu de photos d’ Antibes sont disponibles, et celles de la villa sont à retravailler ; - Contenus et images imposés ; - 11 parties sont présentes : l’ accueil, la propriété, la piscine, les chambres, les salles à vivre, actualités, tarifs, plan d’accès, tourisme, services, contacts qui peuvent être rassemblés si besoin et utilité.
Budgétaires : Pas de budget imposé. 13
1 - STRATéGIE DE COMMUNICATION
MOYENS techniques : Lors des séances de projet professionnel prévues, l’IUT met à notre disposition dans les salles de classe certains logiciels comme la suite complète Adobe CS5, des logiciels de développement, des outils de traitement de texte et d’une connexion internet permanente. Cependant, nous disposons également personnellement de tout ces outils afin de pouvoir gérer les imprévus.
Humains : Grâce à des parcours complément différents, l’agence se compose de profils hétéroclites ce qui nous permet d’être performant dans tout les domaines de la création du site internet c’est-à-dire communication, graphisme et intégration-développement. Par ailleurs, les enseignants sont présents lors des séances prévues par l’IUT, ce qui permet d’avoir un avis extérieur sur le travail fait. Pour finir, M. Le Corff est contactable par mail pour des questions supplémentaires, pour connaître davantages les attentes de la clientèle mais aussi pour les validations et rendez-vous si besoin.
Organisationnels : Afin d’être correctement organiser pour la suite du projet, nous avons énuméré les aptitudes de chaque membres du groupe (communication, graphisme, développement) puis défini la liste des tâches à effectuer, le planning et la répartition des tâches suivant les compétences de chacun. Par ailleurs, la mise en place d’outils de communication et de partage a été indispensable, l’utilisation de google Drive permet le partage de tout les fichiers mais aussi de mettre par écrit un journal de bord avec la durée des tâches par jour et par personne. Pour finir, la mise en place d’Hangout, une plateforme de chat en groupe, a été indispensable afin de pouvoir communiquer tous ensemble hors des séances de projet professionnel imposé par l’IUT.
14
1 - STRATéGIE DE COMMUNICATION
liste des taCHES, planning et devis Listes des tâches
Réseau PERT
Planning GANTT et répartition des tâches
15
1 - STRATéGIE DE COMMUNICATION
devis
DEVIS Conception site web “Villa BellaVista”
Agence CinqPointHero* 128 rue Jean Jaurès 41000 Blois Tél: 02 54 55 21 17 Fax: 02 54 55 21 17 Email: rafael.lopes@cinqhero.com
Désignation
Montant HT (€)
Date: 30/01/2014 Cliente Nicole Lecomte Villa BellaVista 45, corniche des Cougoulins 06600 Antibes Tél: 06 18 48 11 79
TVA
Montant TVA(€)
Remise
Montant TTC(€)
Communication
1772
20%
354
35%
1382
Graphisme
1846
20%
369
35%
1440
Intégration
1662
20%
332
35%
1296
Développement
1357
20%
271
35%
1058
Gestion de projet
1708
20%
341
35%
1332
..Analyse concurrentielle ..Analyse de l’existant ..Plan de communication ..Logos ..Charte graphique ..Maquettes ..Intégration site mobile et ordinateur ..Modules JQuery ..Base de données ..Affichage Dynamique ..Backoffice
Montant HT: 8345 € TVA 20%: 1667 € Remise: 3504 € Prix TTC: 6508 €
Mention: Bon pour accord Signature
16
1 - STRATéGIE DE COMMUNICATION
prévisions des risques et solutions à apporter Absence d’un collaborateur pendant plusieurs jours: Même si chaque personne à un rôle qui lui est assigné, tout le monde possède des connaissances plus ou moins avancées de chaque domaine entrevue lors du projet, ainsi, en mobilisant une personne pour remplacer le collaborateur absent, celui-ci pourra, à l’aide des différentes ressources(internet) à sa disposition continuer le travail du collaborateur absent
Complexité technique d’intégration :
Les choix effectués lors de la conception de la maquette peuvent comporter une certaine difficulté d’intégration. Pour pallier à ce problème, nous avons travaillé sur les maquettes en pensant dés le début aux solutions d’intégrations adéquates.
Demandes trop nombreuses de la part du client :
Le client a le droit de demander autant de modifications qu’il le souhaite dans un environnement professionnel, si ces demandes sont trop nombreuses, les modifications demandées sont facturées et retardent le projet, cependant, étant donné que nous une date limite de rendue qui ne peut être déplacée, nous ne pourrons accéder à toutes les demandes du client si celles-ci sont trop nombreuses et seront dans l’obligation de refuser
Oublis de tâches :
Afin d’être certain de n’oublier aucun élément du site, nous avons dés le début du projet, rédiger une nouvelle fois le cahier des charges afin de bien cerner la demande du client, de plus, nous avons fait une liste des tâches et un planning que nous gardons pendant tout le temps du projet pour nous guider et nous assurer de ne rien oublier.
Dépasser la date limite de rendu :
Afin d’être certains de pouvoir respecter les délais, nous avons dés le début du projet pris le temps de travailler la phase de gestion afin d’être certains que le tout était réalisable dans les temps, nous avons pris une marge de manoeuvre générale qui nous permet de finir le projet en avance, de plus, nous avons prévu un délai supplémentaire de réalisation pour toutes les tâches afin d’être certain que le projet ne sera pas retardé.
Avoir un rendu qui ne convient pas au client :
Lors de la réalisation de tous les éléments graphiques, nous avons toujours proposé plusieurs solutions différentes que nous avons soumises au client afin de lui donner du choix et de l’aider à nous guider, ainsi, il a pu choisir à chaque étape la solution qui lui convenait au mieux.
Non cohérence entre les versions mobiles, tablettes et PC :
Afin d’être certains que toutes les versions du site dégagent la même image, nous avons pris en compte ce paramètre dés le début. En effet, lors de la création des maquettes nous avions déjà imaginés comment les décliner en versions plus petites. 17
2- graphisme
-2 charte graphique logos & ambiances
recherches du logotype Le site actuel ne possédant pas de logo, il est important de définir dès le début une identité au lieu, au site.
18
2- graphisme DEFINITIONS AXES & ambiances
19
2- graphisme
20
2- graphisme
arborescence
Tout d’abord, l’arborescence s’est inspirée de ce qui existe actuellement sur le site. En effet, nous l’avons revisité de manière à simplifier la navigation de l’utilisateur. Cette simplification s’est effectuée notamment grâce au regroupement des rubriques existantes “La Propriété”, “La Piscine”, “Les Chambres” et “Les Salles à vivre” dans une rubrique nommée “La Villa”. De même, les rubriques “Actualités”, “Tourisme” et “Services” dans la rubrique “Activités & Services” puis les rubriques “Plan d’accès” et “Contacts” dans la rubrique “Contact”. En ce qui concerne les outils mis en place, les informations, langues et formulaire de contact, étaient présentes dans le cahier des charges du client. Nous avons, également, ajouté un filtre des pièces afin de pouvoir faire un tri parmi le grand nombre d’images fournies. Pour finir, le footer contient les informations légales qui sont obligatoires et nous avons fait le choix de rajouter le “Contactez-moi” afin de renvoyer l’internaute vers la page Contact mais aussi un retour vers l’accueil afin que l’utilisateur puisse y retourner s’il ne sait pas que le logo est cliquable vers l’accueil.
21
2- graphisme
propositions maquettes
Après le rendez-vous avec le client du jeudi 30 janvier 2014, celui-ci a validé tout les choix graphiques, le logo choisi est le numéro 5 avec une ambiance plutôt estival axée sur les couleurs du midi et du soleil. Enfin la maquette découpée en deux parties (moitié texte, moitié image) a été sélectionnée, mettant plus en valeur les photos de la villa et offrant plus de dynamique au contenu. 22
2- graphisme
zoning
La disposition des éléments du site avec la mise en valeur des images en plein écran se veut simple d’utilisation. En effet, les éléments du site sont disposés en sorte que notre oeil lise les informations de gauche à droite. Il tend à évoquer l’utilisation d’un catalogue magazine, ainsi cela renvoie à quelque chose de moderne, dans l’air du temps. Tout d’abord pour l’en-tête, le logo est centré pour plus de rigueur, dû à la symétrie du header avec deux onglets de chaque côté qui fait aussi office d’onglet d’accueil. L’utilisateur rencontre une navigation classique, intuitive, pour ne pas charger le site et aller à l’essentiel : le contenu. La navigation reste en place tout au long de l’usage du site, l’internaute est en confiance avec le site, il n’est pas perdu. En ce qui concerne le footer, Il répond au header, par sa longueur qui prend tout l’espace. L’association des deux favorise le principe visuel évoqué plus haut, un aspect catalogue et cinémascope. Pour finir, le contenu central découpé en deux parties, moitié contenu et moitié photo, permet de mettre en avant les images de la villa, et les valeurs qu’elle véhicule : le soleil, la chaleur, les couleurs, les vacances, l’apaisement.
23
2- graphisme
choix du client
24
2- graphisme
25
3- utilisabilitĂŠ du site
-3 utilisabilitĂŠ du site storyboard du site web
26
3- utilisabilité du site
synopsis & rubriques La Villa BellaVista est une propriété mise en location depuis 2006, située à Antibes, en région ProvenceAlpes-Côte d’Azur (France). Le site ne repose pas uniquement sur un site de vente locative, c’est un site qui met en avant la qualité touristique d’une telle location exception dans un cadre idyllique. En arrivant sur le site, l’utilisateur accède à une page d’accueil épurée aux couleurs du midi avec un modèle original mais intuitif de présentation d’images grâce à la division en deux parties distinctes : le texte et un visuel attractif. Il se compose également d’un menu constitué de quatres rubriques claires et précises permettant de faciliter la navigation de l’utilisateur : La villa, Tarifs & Réservations, Activités et Services et Contact. Sur la page La Villa, l’internaute accède à une page avec de nombreuses images de la villa où se situe également un système de filtrage afin de pouvoir trier les différentes catégories d’images (Extérieur, salles à vivre, chambres) et pourra ainsi gagner du temps dans sa recherche d’informations. Sur la page Tarifs & Réservations, l’utilisateur peut consulter les tarifs saisonniers de la villa et par la suite la louer via un lien direct vers Abritel.fr. Sur la page Activités & Services, l’utilisateur peut consulter les différentes activités touristiques présentes dans la région ainsi que des services complémentaires facilitant la vie quotidienne du séjour du client. Sur la page Contact, l’utilisateur peut demander des renseignements via un formulaire de contact, la mise en place d’un plan d’accès de la propriété permettant de situer la propriété ainsi que la photo de la propriétaire. Dans le footer, l’internaute a la possibilité de changer la langue en Français ou Anglais puisque la cible est internationale, de visualiser les les mentions légales mais aussi de contacter l’annonceur avec un module “Contactez-nous”. Pour conclure, le site Villa BellaVista se veut accès sur les visuels de la location grâce à des images présentes sur la moitié droite de chacune des pages et ainsi mettre en avant la qualité de la villa, en version Française comme Anglaise.
27
4 - developpement
-4 developpement mcd // MLD mcd
mld
Ce Modèle Logique de Données a été pensé pour que la cliente puisse gérer la maintenance des contenus du site web sans avoir à toucher au code. Tout d’abord, la table Login permet de se connecter sur le back-office, avec une connexion sécurisée. De plus, la table textes permet l’ajout, la modification et la suppression des titres, sous-titres, et contenus dans les deux langues (EN/FR). Celle-ci est relié à la table pages, qui permet d’associer les contenus aux bonnes pages. Par ailleurs, la table photos permet d’ajouter, modifier et supprimer les photos du site, mais aussi, de trier avec l’aide de la table catégories. Pour finir, la table contact permet à la cliente d’ajouter, modifier ou supprimer un client.
28
4 - developpement
plugins j-query Afin de rendre le site plus attractif et renvoyer une image dynamique, plusieurs plugins jQuery seront mis en place :
Slider: Le slider sera utilisé pour l’affichage des photos sur la page “La villa”, ces photos pourront s’ouvrir aussi dans une lightbox.
Lightbox : La Lightbox permet d’afficher les images de la page “La villa” en grand format.
Google Maps : Le plugin Google Maps permet d’afficher dans la page Contact, la localisation de la propriété mais aussi de pouvoir visualiser les alentours
29
BILAN Avec un temps de réflexion trop important apporté à la gestion du projet, à la mise en place du planning et la distribution des tâches, nous avons commencé le début du projet plus tard que nos concurrents et donc pris du retard sur l’avant-projet. Cependant, par la suite cette organisation nous a permis de ne pas nous posé des questions sur “qui fait quoi et quand?” puisque le planning avec les tâches de chacun était présent sur le Google Drive de l’agence et avons gagné du temps par la suite. La validation rapide du logo, des ambiances de couleurs mais aussi des premières maquettes, nous a permis de gagné du temps sur le planning prévisionnel à ce jour, notamment en terme de graphisme puisque nous pourrons après validation finale des maquettes PC, les adapter aux tablettes et smartphone. Par ailleurs, la mise en place des outils comme le Google Drive et Hangout nous permet d’être réactif afin de s’adapter en cas d’imprévus rapidement et de mettre en place les solutions nécessaires.
30