ÉPREUVE INTÉGRÉE DE LA SECTION BREVET D'ENSEIGNEMENT SUPÉRIEUR DE WEBDEVELOPER ENSEIGNEMENT SUPÉRIEUR ÉCONOMIQUE DE TYPE COURT
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Institut de Formation supérieure de la Ville de Wavre
ÉPREUVE INTÉGRÉE DE LA SECTION
BREVET D’ENSEIGNEMENT SUPÉRIEUR DE WEBDEVELOPER
ENSEIGNEMENT SUPÉRIEUR ÉCONOMIQUE DE TYPE COURT
Création du site internet
TOITURES IANNIS
Rapport présentée par Dulieu Gisèle
Superviseur : Rudy Renard
Année 2017 - 2018
TABLE DES MATIÈRES : Introduction ........................................................................................... 03 Description des outils web spécifiques utilisés ............................................. 04 Template HTML / CSS .......................................................................... 04 Lightbox ............................................................................................ 04 Javascrip ........................................................................................... 04 PHP ................................................................................................... 04 SQL ................................................................................................... 04 Analyse ................................................................................................. 05 La base de données ................................................................................. 05 CMS ...................................................................................................... 06 La page « login » ................................................................................ 06 La page « dashboard » ........................................................................ 07 La page « upload » ............................................................................. 09 La page « edit » ................................................................................. 10 La page « update » ............................................................................. 11 Les formulaires ....................................................................................... 12 Choix du contenu .................................................................................... 12 Les couleurs ....................................................................................... 12 La navigation ...................................................................................... 13 Choix technique ...................................................................................... 13 La maintenance ...................................................................................... 13 L’hébergement ........................................................................................ 14 Référencement ....................................................................................... 15 Promotion du site .................................................................................... 15 Conclusion ............................................................................................. 16
INTRODUCTION :
L’entreprise Toitures Iannis a vu le jour le 1er avril 2016. Monsieur Iannis Iliadis,
freelance depuis des années dans le milieu de l’évènementiel, décida deux ans
plus tôt de reprendre des études pour se former au métier de couvreur.
Passionné par son métier de technicien audiovisuel, après avoir parcouru le
monde à plusieurs reprises, il a voulu changer de carrière afin d’être plus présent
auprès de sa famille située dans le Brabant Wallon.
Depuis 2016, il enchaîne les chantiers les uns derrière les autres, sans pour
autant avoir fait la moindre publicité. Le bouche à oreille a été jusqu’à présent
son unique source de publicité.
Son activité prenant un réel envol, il songe sérieusement à engager son premier
ouvrier durant l’année 2019.
Après un long entretien avec Monsieur Iannis Iliadis, celui-ci m’a expliquée son
envie de posséder un site internet qui lui permettrait d’afficher les photos de ses
chantiers déjà réalisés. Je lui ai donc proposé un site vitrine, avec un portfolio
dynamique qu’il pourrait lui-même mettre à jour.
Le site sera exclusivement en français car Monsieur Iannis Iliadis souhaite
atteindre uniquement le marché francophone du pays.
N’ayant que peu de temps de libre suite à sa profession, mais aussi à son activité
en tant que technicien audiovisuel qu’il conserve à quelques occasions sur
l’année, Monsieur Iannis Iliadis avait besoin d’une interface de CMS simple et très
facile d’utilisation.
03
DESCRIPTION DES OUTILS WEB SPÉCIFIQUES UTILISÉS :
TEMPLATE HTML / CSS :
J’aurais pu créer moi-même l’architecture du site Toitures Iannis, mais afin de
gagner un peu de temps, temps que j’ai voulu consacrer à d’autres postes de
cette aventure, j’ai pris la décision de télécharger un template one page gratuit et
libre d’utilisation commerciale.
Le modèle que j’ai choisi, je l’ai voulu doté du framework Bootstrap. Cette
fameuse bibliothèque qui n’est plus à présenter, permet une utilisation de la mise
en page du site de manière plus rapide et plus facile au point de vue CSS. Ce qui
était une bonne chose car l’apparence du site à complètement été modifiée.
LIGHTBOX :
Afin de pouvoir afficher un agrandissement de la photo miniature introduite
dans le portfolio, j’ai utilisé le lightbox déjà présent dans le fichier du template
téléchargé.
JAVASCRIPT :
Le javascript n’est utilisé que pour l’agrandissement des images avec Lightbox.
J’ai utilisé les pages fournies avec le lightbox.
PHP :
Pour l’envoi des données introduit dans le formulaire de la partie «Contact»
Pour mon CMS, j’ai utilisé PHP 7. Je me suis basée sur les cours de POO et de
PHP que Monsieur Marc Jacquet m’a donnés durant mes deux années d’études au
sein de l’école IFOSUP.
SQL :
J’ai utilisé ce langage pour pouvoir enregistrer les photos du client, ainsi que leurs
informations dans une base de données.
04
ANALYSE :
LA BASE DE DONNÉES :
Nom de la base de données : on_the_roof
Nom des tables utilisées :
contact : pour l’envoi de mails depuis le formulaire de la partie contact
utilisateurs : pour la gestions des administrateurs et connection au CMS
upload : pour la galerie photos
Description des tables :
contact :
ctc_id : id
ctc_nom : nom introduit dans le champ «Nom»
ctc_email : email introduit dans le champ «Votre email»
ctc_mess : info introduit dans le champ «Message»
utilisateurs :
user_id : id
user_log : login
user_pw : mot de passe
upload :
img_id : id de la photo
img_nom : nom que le client donne à sa photo
img_desc : description que le client donne à sa photo
img : l’image
05
CMS :
Page « Login » :
06
CMS :
Page « Dashboard » :
07
Page « Dashboard » suite :
Taille réelle :
Si le client clique sur l’une des vignettes, l’image s’affiche dans sa taille réelle.
Bouton «insérer une image» :
Si le client clique sur le bouton «insérer une image», il sera redirigé vers la page
«upload» qui permet d’insérer une nouvelle image dans la galerie photos.
Bouton «Modifier la galerie» :
Si le client clique sur le bouton «Modifier la galerie», il sera redirigé vers la page
«edit» qui permet de modifier la galerie.
08
Page «Upload» :
Bouton «Accueil» :
Si le client clique sur le bouton «Accueil», il sera redirigé vers la page «Dashboard».
Bouton «Modifier la galerie» :
Si le client clique sur le bouton «Modifier la galerie», il sera redirigé vers la page «edit».
Champ «Nom de l’image» :
Le client inscrit dans ce champ le nom qu’il souhaite donner à son image.
Champ «Description de l’image» :
Le client inscrit dans ce champ la description qu’il souhaite donner à son image.
Le bouton «parcourir» :
Quand le client clique sur ce bouton, il a la possibilité de choisir, depuis son
ordinateur, une image à insérer dans la galerie.
Bouton «Enregistrer» :
Quand le client clique sur ce bouton, il envoie toutes les informations dans la
base de données et l’image apparait sur la page «Dashboard».
L’envoi est impossible si le champ «Titre de l’image» ou le champ «Description de
l’image» est vide.
09
Page «Edit» :
Bouton «Accueil» :
Si le client clique sur le bouton «Accueil», il sera redirigé vers la page «Dashboard».
Bouton «Insérer une image» :
Si le client clique sur le bouton «insérer une image», il sera redirigé vers la page
«upload» qui permet d’insérer une nouvelle image dans la galerie.
Bouton «update» :
Le client clique sur le bouton «update», il sera redirigé vers la page «update» qui
permet de modifier le nom de l’image, la description de l’image et / ou l’image
elle-même.
Bouton «delete» :
Si le client clique sur le bouton «delete», il effacera automatiquement l’image et
toutes ses informations dans la base de données.
10Page «Update» :
Bouton «Accueil» :
Si le client clique sur le bouton «Accueil», il sera redirigé vers la page «Dashboard».
Bouton «Insérer une image» :
Si le client clique sur le bouton «insérer une image», il sera redirigé vers la page
«upload» qui permet d’insérer une nouvelle image dans la galerie.
Champ «Titre de l’image» :
Le client a la possibilité de modifier le nom de l’image via ce champ.
Champ «Description de l’image» :
Le client a la possibilité de modifier la description de l’image via ce champ.
Bouton «Parcourir» :
Si le client clique sur le bouton «parcourir», il a la possibilité de choisir, depuis
son ordinateur, une nouvelle image pour remplacer celle actuelle.
Bouton «Submit» :
Quand le client clique sur ce bouton, il envoie toutes les informations dans la
base de données. L’envoi est impossible si le champ «Titre de l’image» ou le
champ «Description de l’image» est vide.
11LES FORMULAIRES :
Sur le site de Toitures Iannis se trouve un formulaire de contact.
Quand un internaute envoie un message, il reçoit en retour un mail automatique
de remerciement qui l’informe qu’une personne reviendra rapidement vers lui.
Dans le CMS, il y a un formulaire sur la page index qui permet au client de se
connecter avec son login et son mot de passe.
Ces donées sont vérifiées dans la page log.php avec une connection à la base de
données.
Il y a un formulaire sur la page update-img.php qui permet de mettre à jour les
données de l’image, ainsi que l’image elle-même.
Les informations de ce formulaire sont traitées dans la page img_save.php
Il y a également un formulaire sur la page upload-img.php qui permet
d’introduire une nouvelle image avec ses informations dans la base de données.
Les données de cette nouvelle image sont traitées dans la page img_ajout.php
CHOIX DU CONTENU :
LES COULEURS :
Le choix des couleurs a été imposé par le client. Celui-ci possédait déjà des cartes
de visite aux couleurs grises et vertes, et ne souhaitait pas en changer.
Gris anthracite : #636469 Vert dynamique : #94ae44
Un dérivé de cette couleur
a été utilisé en guise de
background : #eee
12LA NAVIGATION :
La barre de navigation est située en haut de la page.
Quand la taille de l’écran atteint 768 pixels, celle-ci se transforme en ce qu’on
appelle, un menu «hamburger». C’est à dire, trois petit traits qui affiche un menu
déroulant lorsqu’on clique dessus.
CHOIX TECHNIQUE :
Le site a été conçu de manière responsive. Il s’adapte à toutes tailles d’écran et
tous navigateurs.
Cependant, j’ai remarqué un petit souci de compatibilité avec la propriété CSS
border-radius que j’ai placé sur les vignettes des images du portfolio et que je
n’ai pas réussi à résoudre.
Malgré le fait que sur le site caniuse.com il est indiqué que cette propriété devrait
fonctionner, il n’en est rien pour la version Internet Explorer 11. Par contre, en ce
qui concerne Edge, il n’y a aucun souci.
13LA MAINTENANCE :
Le site du client sera hébergé chez OVH. Ce fournisseur en hébergement est
réputé pour sa surveillance constante de ses serveurs.
Une offre a été faite auprès du client pour entre autre, faire une sauvegarde des
fichiers composant le site, les fichiers de configuration et la base de donées, une
fois par mois. De cette façon, au moindre problème mettant le sie hors ligne,
j’aurai la possibilité de le remettre en ligne très rapidement.
Le site du client ayant été conçu en HTML 5, CSS 3 et PHP 7, il est assurré d’être
aux normes des techniques actuelles pour les 3 à 4 années à venir. Néanmoins,
en fonction de l’évolution des technologies standards du web, je maintiendrai les
codes du site en veillant à ce qu’une balise ou un de ses attributs ne deviennent
pas obsolète et ne soient plus supportés par certains navigateurs, ou ne soient
plus pris en compte par les moteur de recherche. A contrario, une nouvelle balise
pourrait être mise en place et mieux exploitée qu’une ancienne par un moteur de
recherche.
un site utilise des fichiers temporaires risquant d’alourdir rapidement l’espace qui
lui est réservé. Il importe donc de le nettoyer régulièrement sinon il peut subir un
ralentissement à l’ouverture ou un plantage temporaire.
L’HÉBERGEMENT :
Le site de Toitures Iannis sera hébergé chez OVH, dès que le client aura fait un
choix final sur son nom de domaine.
J’ai conseillé le choix de ce serveur à mon client, parce que je suis moi-même
chez eux depuis quelques années et je suis très contente de leur services.
De plus, ce fournisseur de services de cloud computing a une réputation qui n’est
plus à faire et a un des plus grands parcs mondiaux de serveurs.
14RÉFÉRENCEMENT :
Le site a été conçu en utilisant la technique du référencement naturel, c’est à dire:
Les balises meta
Les balises alt et title pour les images
La balise strong
De plus, le site est inscrit sur Search Console via mon site dgcreation.be
Un fichier robots.txt se trouve à la racine du site
Un sitemap.xml se trouve également à la racine du site :
http://dgcreation.be/ontheroof/
2018-05-21T15:07:52+00:00
PROMOTION DU SITE :
La promotion du site se fera en partie via les réseaux sociaux tels que Facebook,
Twitter, Instagram, Youtube.
J’ai proposé à Monsieur Iannis Iliadis de le mettre en rapport avec une
connaissance, spécialiste en communication sur les réseaux sociaux, afin de l’aider
à démarrer au mieux cette activité.
15CONCLUSION :
Je voudrais remercier l’ensemble de mes professeurs, mais surtout Madame
Nathalie Vanassche pour ses cours d’HTML 5 / CSS 3 et Approche Design. Grâce
à elle, je suis dorénavant capable de pouvoir mettre ma créativité sur la toile.
Ses connaissances me permettent de pouvoir transformer l’apparence d’un site à
ma guise grâce, entre autre, à ses connaissances en CSS qu’elle m’a transmise.
Elle m’a également appris ce qu’était le référencement naturel, le responsive. Je
regrette juste qu’on n’ai pu voir ensemble la création de newsletters. Faute de
temps, sans doute.
J’aimerais remercier Monsieur Bruno Martin qui, avec beaucoup de gentillesse par
moment et de patience à d’autres, m’a appris ce qu’était une base de données.
Comment la créer. Comment l’utiliser. Grâce à ses cours j’ai été capable d’en créer
une pour le site de mon client. J’aimerais également le remercier pour ses cours de
CMS. Même si cette matière n’était pas à mon programme, j’ai souhaité la suivre
car elle représente une grande part du marché du web. Dorénavant, si besoin
pour un futur employeur, je dois travailler sur un Wordpress ou Joomla, je serais à
même de pouvoir comprendre comment me diriger dans ce labyrinthe de modules,
d’articles...
Et enfin, et pas des moindres, Monsieur Rudy Renard et Monsieur Marc Jacquet
qui m’ont appris ce qu’était réellement les langages de développeurs et comment
les utiliser. C’est en grande partie grâce aux cours de Monsieur Jacquet que j’ai
pu réaliser le CMS de la galerie photos de mon client. Je me suis replongée dans
mes notes de cours et exercices du même genre, qu’il nous avait appris l’année
dernière.
En conclusion je voudrais juste rajouter ceci, je vous remercie toutes et tous pour
votre savoir, votre patience, votre bonne humeur et votre bienveillance. Grâce à
vous, moi qui ne savais même pas ce qu’était une balise il y a un peu plus de deux
ans, suis capable aujourd’hui de coder un site. Ces deux dernières années ont été
une très belle aventure dans ma vie que je n’oublierai jamais, tout comme je ne
vous oublierai jamais non plus.
Merci.
16CRÉATION DE SITES INTERNET
C R E AT I O N
CAHIER DES CHARGES :
TOITURES IANNIS
Iannis Iliadis
Avec vous sur les toits
Présentée par : Dulieu Gisèle
Année : 2017 - 2018CRÉATION DE SITES INTERNET
C R E AT I O N
TABLE DES MATIÈRES :
1. Description générale du projet .............................................................................................. 03
1.1 Définition du client / commanditaire ................................................................................ 03
1.2 Description de l’activité du client ..................................................................................... 03
1.3 Présentation du client ...................................................................................................... 03
1.4 Objectif du site ................................................................................................................. 03
1.5 Définir le ou les publics cible du site ................................................................................ 03
1.6 Nom de domaine .............................................................................................................. 04
1.7 Hébergement .................................................................................................................... 04
1.8 Maintenance ..................................................................................................................... 04
1.9 Compatibilité ..................................................................................................................... 04
1.10 Planning de la liste des tâches ....................................................................................... 04
2. Analyse des sites concurrents ................................................................................................ 05
2.1 Site positif ......................................................................................................................... 05
2.2 Site négatif ........................................................................................................................ 07
3. Charte graphique du site Iannis Iliadis ................................................................................... 08
3.1 Description de l’objet du cahier des charges .................................................................... 08
3.2 Slogan ............................................................................................................................... 08
3.3 Code couleur du site ......................................................................................................... 08
3.4 Fonts utilisées pour le site ................................................................................................. 08
3.5 Design ............................................................................................................................... 08
4. Définition du contenu ............................................................................................................. 09
4.1 Photographies et textes .................................................................................................... 09
4.2 Site conçu uniquement en français avec : ...................................................................... 09
5. Structure du site ..................................................................................................................... 09
5.1 Menu haut vertical ............................................................................................................ 09
5.2 Partie accueil ................................................................................................................... 09
5.3 Partie à propos ................................................................................................................. 09
5.4 Partie services ................................................................................................................... 09
5.5 Partie portfolio ................................................................................................................... 09
5.6 Page contact ..................................................................................................................... 09
5.7 Page mentions légales ...................................................................................................... 09
5.8 Conception graphique ....................................................................................................... 09CRÉATION DE SITES INTERNET
C R E AT I O N
5.9 Mockup de la one page ..................................................................................................... 10
5.10 Visuel de l’accueil de la one page Toitures Iannis .......................................................... 11
6. Aspect technique ..................................................................................................................... 11
6.1 Captures d’écran du CMS ................................................................................................. 12
6.2 Formation - Guide utilisateurs .......................................................................................... 12
7. Référencement du site ............................................................................................................ 12
7.1 Mots clés généraux ........................................................................................................... 12
8. Campagne de lancement et de promotion du site .................................................................. 13
8.1 Actions envisagées ............................................................................................................ 13CRÉATION DE SITES INTERNET
C R E AT I O N
1. DESCRIPTION GÉNÉRALE DU PROJET :
1.1 DÉFINITION DU CLIENT / COMMANDITAIRE :
Iannis Iliadis
rue du Bassinia 2
1348 Louvain la Neuve
Tel : 0496 68 35 30
ontheroofs@icloud.com
1.2 DESCRIPTION DE L’ACTIVITÉ DU CLIENT :
Couvreur zingueur
Ardoisier
Nettoyage de gouttières et chéneaux
Petits travaux en toiture
Dépannage toitures
1.3 PRÉSENTATION DU CLIENT :
Située à Louvain-la-Neuve, l’entreprise familiale Toitures Iannis réalise des travaux,
des entretiens et des réparations de toiture partout en Wallonie.
Cette entreprise met son expérience et son savoir-faire au service des particuliers,
des entreprises et des services publics.
En tant qu’ouvrier polyvalent et qualifié, Iannis Iliadis conjugue ses compétences
artisanales à la maîtrise des dernières techniques de construction.
1.4 OBJECTIF DU SITE :
L’objectif du site a pour but d’être avant tout la carte de visite du client et de faire
connaître la qualité de son travail à un large public. Le site lui permettra également
de pouvoir montrer à travers des photos, ses divers chantiers déjà réalisés un peu
partout en Wallonie mais aussi ceux qui sont en cours.
Le ton employé est sobre, clair et moderne.
Un simple site vitrine est suffisant, avec une base de données pour présenter une
liste des photos des chantiers du client dans la partie « Portfolio ».
1.5 DÉFINIR LE OU LES PUBLICS CIBLE DU SITE :
Les publics cibles du client sont :
Les particuliers
Les entreprises
Les services publics
De nouveaux clients potentiels cherchant à installer ou rénover une toiture
Des clients potentiels cherchant à installer, rénover, nettoyer des gouttièresCRÉATION DE SITES INTERNET
C R E AT I O N
1.6 NOM DE DOMAINE :
Le nom de domaine sera enregistré par le client lui-même. Celui-ci hésite encore
entre « avec-vous-sur-les-toits.be » ou «toitures-iannis».
Le client souhaite prendre le temps de la réflection.
1.7 HÉBERGEMENT :
L’hébergement du site est momentanément mis en ligne sur mon site : dgcreation.
be/toitures-iannis. Dès que M. Iannis Iliadis aura fait son choix pour le nom de
domaine, le site sera hébergé chez OVH.fr
1.8 MAINTENANCE :
Après la livraison du site au client, Dulieu Gisèle offrira durant les douze mois qui suivent,
une maintenance et mise à jour du site. A raison de maximum une mise à jour par mois.
1.9 COMPATIBILIÉ :
Le site sera responsive et donc, compatible avec toutes les tailles d’écran
1.10 PLANNING DE LA LISTE DES TÂCHES : ÉCHÉANCE :
Rédaction du cahier des charges par Dulieu Gisèle 31 janvier 2018
Validation du cahier des charges par le client 15 février 2018
Livraison du nom de domaine par le client *
Choix du template graphique par Dulieu Gisèle 31 janvier 2018
Validation du template graphique par le client 15 février 2018
Livraison du contenu photographique par le client 01 avril 2018
Livraison du contenu rédactionnel par le client 01 avril 2018
Développement de l’application CMS par Dulieu Gisèle 01 mai 2018
Test de fonctionnalité et d’ergonomie par Dulieu Gisèle 01 mai 2018
Validation du site par le client 15 mai 2018
Formation du client aux fonctionnalités CMS 18 mai 2018
Mise en ligne du site 20 mai 2018
Référencement auprès des moteurs de recherche **
* Encore au stade de la réflexion par le client
** Dès la mise en ligne du site sur l’hébergeur du client
Fait à Perwez le 15 février 2018 en deux exemplaires et approuvé par M. Iannis Iliadis
Réalisation : Dulieu Gisèle Responsable du projet : Iannis IliadisCRÉATION DE SITES INTERNET
C R E AT I O N
2. ANALYSE DES SITES CONCURRENTS :
2.1 SITE POSITIF :
http://www.toituredepetter.be
POINTS POSITIFS :
Le site est conçu de manière responsive. Il s’adapte avec fluidité sans aucun
problème à toute taille d’écran.
C’est un site ergonomiquement facile à lire et attractif de par le choix des
couleurs.
Dans la partie Contact, l’internaute à la possibilité d’appeler la société via
internet, juste en cliquant sur l’un des numéros de téléphone.
POINTS NÉGATIFS :
Il est dommage que le menu de navigation disparaît dès qu’on commence à
descendre sur une page, surtout sur les longues pages. Ça oblige l’internaute
à «scroller» pour remonter au menu et pouvoir choisir une autre section dans
le menu. Il auraît été judicieux dans ce cas, de mettre un bouton «haut de
page» dans le coin inférieur droit de l’écran et qui permettrait de remonter
automatiquement en haut de la page.CRÉATION DE SITES INTERNET
C R E AT I O N
SITE POSITIF :
http://www.delleusebastien.be/index-fr.aspx
POINTS POSITIFS :
Le site est conçu de manière responsive. Il s’adapte avec fluidité sans aucun
problème à toute taille d’écran.
Le site est clair et facile à parcourir de par le choix des couleurs. Le regard n’est
pas obstrué par des fioritures sans intérêts, placées de part et d’autre sur les
pages du site.
Le menu est fixe et facile d’accès, qu’importe l’endroit où se trouve l’internaute
sur la page
Les divers services de l’entreprise sont présentés de manière séparé l’un de
l’autre. Ça permet au futur client de trouver immédiatement la catégorie qu’il
recherche en un coup d’oeil.
POINTS NÉGATIFS :
La typographie des textes est trop petite et fatigue rapidement les yeux. Pour un
confort de lecture, l’internaute sera obligé de zoomer dans la page du site.
Absence totale de la page des Mentions Légales.CRÉATION DE SITES INTERNET
C R E AT I O N
2.2 SITE NÉGATIF :
http://www.toiturelefin.be
POINTS POSITIFS :
Les liens des différents partenaires placés sur la page «Partenaires» s’ouvrent
dans une nouvelle fenêtre. Cette procédure permet à l’internaute de pouvoir
naviger aisément sur le site partenaire et de revenir sur le site toiturelefin.be
d’un simple clic qui referme l’onglet du site partenaire.
POINTS NÉGATIFS :
Il est clair que ce site à dû être créé il y a déjà plusieurs années. On peut le
remarquer à son design et au fait qu’il ne soit absolument pas responsive
La taille de police est bien trop petite et on est obligé de zoomer sur la page pour
pouvoir lire les textes, sans fatiguer ses nerfs optiques.
Le site n’est absolument pas ergonomique.
Aucune photos affichées sur le site, n’offre la possibilité de s’ouvrir sur un
agrandissement.CRÉATION DE SITES INTERNET
C R E AT I O N
3. CHARTE GRAPHIQUE DU SITE IANNIS ILIADIS :
3.1 DESCRIPTION DE L’OBJET DU CAHIER DES CHARGES :
L’objet de ce cahier des charges est la réalisation d’un site dynamique avec
hébergement.
Le logo de Iannis Iliadis a été réalisé par Dulieu Gisèle.
3.2 SLOGAN : Fourni par le client
« Iannis Iliadis, avec vous sur les toits »
3.3 CODE COULEUR DU SITE :
Le site a été conçu sur base des couleurs que le client Iannis Iliadis avait déjà
utilisé pour ses cartes de visite.
Gris anthracite : R129 V129 B131
Vert anisé : R216 V221 B55
Blanc : R255 V255 B255
3.4 FONTS UTILISÉES POUR LE SITE :
Le client souhaitait un design modern, sobre, raison pour laquel j’ai choisi une
police sans serif.
En premier niveau : Font Google : roboto
En second niveau : Police Helvetica Exemple de la police Helvetica
En troisième niveau : Police sans serif Exemple d’une police sans serif
3.5 DESIGN :
Le client souhaite une interface épuré dont les couleurs dominantes donneraient
une apparence moderne.
La fonction première du site est de présenter diverses photos de ses chantiers.
Ainsi que l’utilisation d’un formulaire qui permettra à de futurs clients de contacter
l’entreprise Toitures Iannis pour avoir des informations, des devis...CRÉATION DE SITES INTERNET
C R E AT I O N
4. DÉFINITION DU CONTENU :
4.1 Photographies et textes :
Les contenus photographiques et textes seront fournies par le client Iannis Iliadis
4.2 Site conçu uniquement en français avec :
Une one page
Un design responsive (compatible mobiles et tablettes)
Une galerie que le client pourra gérer lui-même grâce à un CMS, avec une
interface accèssible par login et mot de passe
Un formulaire de contact
5. STRUCTURE DU SITE :
5.1 Menu haut horizontal :
M
enu fixe avec effet « hamburger » lorsque la taille de l’écran descend en
dessous d’une certaine largeur.
5.2 Partie accueil :
L
ogo du client avec effet de diminution de taille lorqu’on commence à faire
défiler la onepage.
Slogan principal « Avec vous sur les toits »
Sous slogan « Pour rénover, isoler, améliorer votre habitat ! »
Un bouton qui amène à la partie « A propos »
5.3 Partie à propos :
Présentation du client en quelques lignes. Accompagné d’un visuel.
5.4 Partie services :
P
résentation des divers services qu’offre le client, avec un résumé en
quelques lignes pour chaque service.
5.5 Partie portfolio :
Galerie
photos des chantiers du client
L
e portfolio sera alimenté par le client Iannis Iliadis via l’interface CMS
développé et mis en place par Duieu Gisèle
5.6 Page contact :
F
ormulaire de contact qui permettra aux futurs clients de Iannis Iliadis, de le
contacter pour une question, un devis...
5.7 Page mentions légales :
Mentions légales fournis par le clientCRÉATION DE SITES INTERNET
C R E AT I O N
5.8 CONCEPTION GRAPHIQUE :
Le site permet une lecture agréable et conviviale, notamment pour les utilisateurs
de tablettes et smartphones.
Le menu est fixe pour faciliter la navigation dans le site.
5.9 MOCKUP DE LA ONE PAGECRÉATION DE SITES INTERNET
C R E AT I O N
5.10 VISUEL DE L’ACCUEIL DE LA ONE PAGE TOITURES IANNIS :
6. ASPECT TECHNIQUE :
Le site créé en HTML5/CSS3, Bootstrap comportera une partie dynamique, à savoir
le portfolio, qui sera administrable par le commanditaire.
L’interface d’administration et de mise à jour du contenu photographique se fera à
travers un CMS créé par Dulieu Gisèle. Cette interface sera accessible à partir d’un
ordinateur connecté à internet, via un login et mot de passe défini par le client
Iannis Iliadis.
Une base de données sera liée au CMS.CRÉATION DE SITES INTERNET
C R E AT I O N
6.1 CAPTURES D’ECRAN DU CMS
6.2 FORMATION - GUIDE UTILISATEURS :
Une formation à l’outil d’administration et mise à jour du portfolio sera dispensée
au client Iannis Iliadis. En outre, une aide gratuite par téléphone et par email lui
sera donnée durant les douze premiers mois après réception auprès du client du
site internet.
7. RÉFÉRENCEMENT DU SITE :
De manière à optimiser le référencement naturel du site web, le code de la
one page sera rédigé suivant les bonne pratiques du SEO : respect des balises
d’hiérarchie, création de textes alternatifs pour les images, construction de liens
hypertextes optimisés, optimisation des URL et réécriture des adresses si besoin,
déclaration du site auprès des moteurs de recherche avec indication de l’adresse de
la page de plan de site au format sitemap...
Un large pan de la stratégie de communication et de promotion étant basé sur les
réseaux et médias sociaux, il est impératif que le site soit optimisé pour cet usage
et ainsi prendre en compte les bonnes pratiques du SMO : icônes de partage sur
le site, renvoi possible vers les comptes des différentes plateformes de réseaux et
médias sociaux, remontées de contenus depuis les réseaux et médias sociaux (à
venir) ...
7.1 Mots clés généraux :
toiture, couvreur, zinc, toit, démoussage, gouttière, zingueur, asphalte, réparation,
nettoyage, construction, tuiles, ardoises, couverture, dégâts, isolation, entretien,
étanchéité, devis, réfection, aluminium, chéneaux, descentes d’eau, égout toiture.CRÉATION DE SITES INTERNET
C R E AT I O N
8. CAMPAGNE DE LANCEMENT ET DE PROMOTION DU SITE :
8.1 Actions envisagées :
Une présence constante de l’adresse du site internet sera apposée sur tous les
documents imprimés (cartes de visite, factures, journaux publicitaires, en-tête
de lettre, lettrage voiture et camionnette, vêtements de travail...)
L’adresse du site apparaîtra dans la signature mail du client.
Le site se fera fortement connaître via les réseaux sociaux.
Le transfert d’informations se fera également connaître via le bouche à oreilleMODE D’EMPLOI : MISE À JOUR DES PHOTOS
CONNECTEZ-VOUS Introduisez votre login et mot de passe, puis cliquez sur le bouton «log me in». LA GALERIE PHOTOS Si vous cliquez sur une miniature, celle-ci s’affichera avec sa taille réelle. Si vous voulez insérer une nouvelle image, cliquez sur le bouton «Insérer une image». Si vous voulez modifier une image, cliquez sur le bouton «Modifier la galerie».
INSÉREZ UNE NOUVELLE PHOTO Si vous souhaitez retourner sur la page de la galerie photos, cliquez sur le bouton «Accueil». Si vous voulez modifier une image, cliquez sur le bouton «Modifier la galerie». Donnez un nom à votre photo dans le champ «Nom de l’image». (champ obligatoire) Donnez une description à votre photo dans le champ «Description de l’image». (champ obligatoire) Choisissez votre photo sur votre ordinateur en cliquant sur le bouton «Choisir un fichier». Enregistrez votre photo dans la galerie en cliquant sur le bouton «Enregistrer».
MODIFIEZ UNE PHOTO Si vous souhaitez retourner sur la page de la galerie photos, cliquez sur le bouton «Accueil». Si vous voulez insérer une nouvelle image, cliquez sur le bouton «Insérer une image». POUR MODIFIER : Cliquez sur le bouton «update» correspondant à votre photo. Cliquez dans la champ «Titre de l’image» ou «Description de l’image» pour modifier le nom ou la description de la photo. Si vous souhaitez remplacer la photo par une nouvelle, cliquez sur le bouton «choisir un fichier». Une fois vos modifications faites, cliquez sur le bouton «Submit» pour les enregistrer dans la galerie photos.
EFFACEZ UNE PHOTO Si vous souhaitez effacer une photo, cliquez sur le bouton «delete».
Vous pouvez aussi lire
