# Chapitre 5

<h2 style="text-align: center">
Table des matières</h2>

- [Page d'accueil](/d4k9eSACSlOcsHHBx-5q5g)
- [Chapitre 1 : Présentation et analyse des idées](/9V7s5WJPQvKkrqgD03GvLA)
- A. Présentation de l’entreprise
- B. Analyse des idées
- [Chapitre 2 : Moyens des concurrents et choix de l'entreprise](/QNIGkHtRSN6aT3b5HNJh-w)
- A. Moyens de la concurrence
- B. Choix pour l’entreprise
- 1. Logo
- 2. Implantation
- 3. Site
- [Chapitre 3 : Application pour le logo](/nXla3gAtQ-mHS7GjpJCx1Q)
- A. Pourquoi faire un logo ?
- B. Réalisation
- 1. Première proposition
- 2. Seconde proposition
- 3. Dernière proposition
- [Chapitre 4 : Application pour l'implantation](/hKfV_v6qS3ixANSljUY0qw)
- A. Comment choisir son implantation
- B. Réalisation
- 1. Carrosseries
- 2. Garages
- 3. Nautisme
- [Chapitre 5 : Application pour le site internet](/2gniAEEQSf6s9PsunNYp0w)
- A. Pourquoi est-il important d’avoir un site internet ?
- B. Comment communiquer sur son site internet ?
- C. Réalisation
- 1. Menu
- 2. Pied de Page
- 3. Page principale
- 4. Pages secondaires
- 5. Page Contact
- 6. Référencement
- [Conclusion](/OWH_O-IdTySgYVE43XVTpA)
- [Bibliographie](/0-UmI1EsQKeDTaHcVtNZOw)

<p style="text-align: left">
<br/><br/>
<h2 style="text-align: center">
Pourquoi est-il important d’avoir un site internet ?
</h2>

<br/>Aujourd’hui, il est presque devenu nécessaire d’avoir son propre site web lorsque l’on monte son entreprise, surtout pour se faire connaître rapidement. Un site internet, c’est une visibilité sept jours sur sept et vingt-quatre heures sur vingt-quatre. Votre notoriété est en jeu, toutes les entreprises connues ont déjà leur site web. La majeure partie de la population française utilise internet régulièrement, un site permettra de toucher une nouvelle clientèle. De plus, les données sont tracées et grâce à quelques outils comme Google Analytics, il est possible d’analyser les comportements et d’évoluer en fonction des recherches et demandes des consommateurs. C’est également un investissement, il permet d’améliorer le service client et vous fera gagner du temps pour le consacrer à d'autres choses : un site internet répond aux principales questions que se posent les consommateurs. Vouloir se passer d’internet est une erreur car c’est passer à côté d’un potentiel énorme, principalement en visibilité.<strong>4</strong>

<br/><br/>
<h2 style="text-align: center">
Comment communiquer sur son site internet ?
</h2>

<br/>Comme vu auparavant, le digital commence à prendre une place abondante dans la communication moderne. C’est dû à une évolution des usages de la communication. Cette année, en cours de stratégie de communication numérique, j’ai appris que les entreprises pratiquaient auparavant une communication descendante et unilatérale. Depuis, la communication est devenue bilatérale, permanente et circulaire. L’outil digital qu’est le site internet est un levier de la stratégie de communication, il incarne l'entreprise et donne les informations principales sur elle.
Sur un site web, de nombreuses informations sont nécessaires. Par exemple laisser ses coordonnées afin de permettre le contact avec l’utilisateur. Le choix des réseaux sociaux est tout aussi important, il faut choisir les réseaux utilisés par les clients et déterminer le rôle de chacun de ses réseaux.<strong>5</strong>
Une phase toute aussi importante est le référencement de son site web, pour que les utilisateurs trouvent le site web ou le service qu’il propose rapidement.

<br/><br/>
<h2 style="text-align: center">
Réalisation
</h2>

<br/>Dans le cadre de la réalisation de la maquette du site web, je me suis appuyé sur les cours de WebDesign et ceux de Conception Web. J’ai utilisé le CMS <a href="https://fr.wikipedia.org/wiki/WordPress">WordPress</a> afin de le réaliser car c’était l’une des demandes de mon maître de stage. Je me suis donc formé seul à la maîtrise et j’ai beaucoup été aidé par mes cours de Publication Web sur le CMS <a href="https://fr.wikipedia.org/wiki/Wix.com
">Wix</a>.

L’objectif le plus important à court terme pour l’entreprise était d’avoir un site internet. Ce site internet “Vitrine” a comme objectif de faire connaître cette nouvelle entreprise. L’utilisation de Wordpress est justifiée par le besoin de mettre ce site à jour régulièrement et facilement, la chose la plus difficile étant de réaliser la maquette. L’utilisation du template <a href="https://salienttheme.info/">Salient</a> est un choix de monsieur Dumez, séduit par leur mise en page <a href="http://themenectar.com/demo/salient-ecommerce-creative/">ecommerce-creative</a>.

<p style="text-align: left">
<br/><h3 style="text-align: center">
Menu
</h3>

<br/>Avant de penser au contenu, il fallait choisir le style du menu. Les choix étaient un bandeau transparent au départ qui devenait de la couleur du fond du site lors de la visite du site. Ceci est devenu possible avec l’outil “Salient” de Wordpress dans la catégorie “Header Navigation” et la sous catégorie “Transparent Header Effect”. J’ai pu ensuite incorporer le logo provisoire qui faisait office de bouton d’accès à la page d’accueil et supprimer les ombres sous ce bandeau, grâce à l’outils “Header Box Shadow”. J’ai pu aussi choisir la mise en page du menu centré dans la catégorie “Layout & Content Related”. J’ai ensuite ajouté un effet de changement de couleur du logo quand le Menu deviens blanc, trouvé dans la catégorie “Transparent Header Effect”.

Pour passer au contenu, le Menu du site internet devait contenir cinq liens:
- Accueil
- Éco-Responsable
- Crypto-Monnaie
- Chromage
- Contact

Le bouton accueil étant automatiquement affecté au logo, le premier bouton à réaliser était celui d’ Éco-Responsable. Après de nombreuses recherches internet, j’ai trouvé une solution en utilisant un élément “HTML Brut” et le système d’ancre. J’ai d’abord créé ce Menu en le reliant a un lien personnalisé avec l’url “https://#” et le titre de navigation “< a href="#ecoresp">Éco Responsable</a>”. En effectuant cela, j’ai transformé le lien du menu de type url en lien vers une ancre html. Ensuite, j’ai incorporé aux endroits voulu une ligne de code en “HTML Brut” afin de créer ces ancres.

<br/>
<br/>

<br/>Après analyse de mon travail par monsieur Dumez, j’ai modifié le lien “Contact” par une icône de mail, trouvée dans la catégorie “Layout & Content Related”. J’ai également supprimé le slogan “La carrosserie qui assure” du bandeau, et retiré les tirets entre les différents liens. J’ai également ajouté de l’espace entre ces liens tout en modifiant l’opacité du bandeau à 100% pour une meilleure visibilité des utilisateurs à l'aide des outils “Menu Item Spacing” et “Header BG Opacity” dans la catégorie “Logo & General Styling”.

<br/>
<br/>
<p style="text-align: center">https://carrossur.com/</p>

<br/>Le résultat actuel n’est pas le final, il reste encore la police a changer, mais la majeure partie est effectuée.

<br/><h3 style="text-align: center">
Pied de page
</h3>

<br/>Le pied de page, ou Footer, est un élément important du site web. Malgré qu’il ne soit pas imposant en termes de design ou de contenu et contrairement aux idées reçues, un grand nombre de visiteurs y cherchent des informations.
Situé en bas du site web, le footer est la dernière chance pour un utilisateur de poursuivre sa navigation. Il doit être séduisant afin d’attirer l’attention et ne doit pas être négligé.
Pour savoir quoi mettre dans son pied de page, il faut savoir ce que les utilisateurs veulent y retrouver. Il ne doit pas être trop volumineux donc il faut choisir de garder uniquement le nécessaire. De plus, le principe du footer est d’afficher des éléments qui n’ont pas leur place ailleurs et son objectif est d’aider les visiteurs avec des informations supplémentaires.<strong>12</strong>

Le footer doit adopter un design cohérent, simple et clair. Il doit correspondre à votre site web en reprenant son style général. Il est important d’avoir dans son footer d’inclure les informations de contact, même si les normes de développement web incluent déjà dans le header. Utiliser des éléments graphiques comme des logos peut donner plus d'attrait visuel, par exemple l’inclusion des liens vers les réseaux sociaux. En effet, un logo comme celui de facebook est plus adapté qu’un message de type « suivez-nous sur Facebook ».<strong>12</strong>

Dans le cadre de la maquette de site web que j’ai réalisé, le footer devait contenir trois boutons pour trois réseaux sociaux:

- Facebook
- LinkedIn
- Instagram

Au fur et à mesure du développement du site internet, un changement de directive a été pris dans le choix de ces réseaux, les trois réseaux sociaux au final seront :

- Facebook
- LinkedIn
- Pinterest

Le premier, Facebook est un réseau social fondé en 2004 par Mark Zuckerberg. Il s’agit du troisième site web le plus visité au monde, avec plus d’un milliards et demi d’utilisateurs actifs dont trente et un millions de français ( soit un peu moins de la moitié de la population française ). De plus, il concentre un très bon panel de la population avec une répartition des utilisateurs sur toutes les tranche d'âge avec une parité des sexes.<strong>13</strong>

<br/>
<p style="text-align: center">https://www.emarketinglicious.fr/reseaux-sociaux/pourquoi-facebook-entreprise/</p>

<br/>Ce réseau social permet aussi aux entreprises de créer des campagnes allant de l’augmentation de la notoriété à la performance. De plus, il offre généralement le coût par clic le moins cher en comparaison à Google Adwords.<strong>13</strong>

Le second, LinkedIn est le réseau social professionnel leader mondial, en France il compte vingt millions de membres inscrits en 2020 (soit environ 64% de la population active ) dont la moitié soit dix millions d’utilisateurs actifs.<strong>14</strong>

<br/>
<p style="text-align: center">https://www.dynamique-mag.com/article/utiliser-linkedin-entreprise.10827</p>

<br/>Et malgré que ces chiffres sont très éloignés des milliards d’utilisateurs des autres réseaux sociaux, il propose aux entreprises de nombreux avantages. Par exemple l’augmentation de la visibilité ou du réseautage.
Cette visibilité est permise car votre page ou profil LinkedIn améliore votre référencement naturel, mais l’avantage principal est le développement de son réseau avec la possibilité de créer des groupes ou d’en rejoindre afin de discuter et d’échanger avec les autres membres.<strong>14</strong>

Le dernier réseau utilisé, Pinterest, mélange le réseautage social et le partage de photographie lancé en 2010. Son fonctionnement est basé sur le partage de ses centre d’intérêts à travers des albums de photographies, en proposant à ses utilisateurs de se créer une collection d’images numériques, pouvant se faire par l'intermédiaire d’un bouton “pin it”, raccourci intégrable sur son navigateur.<strong>15</strong>

Dans le cadre du pied de page du site web de Carrossur, les boutons ont été ajoutés avec l’aide de la catégorie Footer de Salient.

<br/>

Ils possèdent un effet de changement de couleur et d’opacité lorsque le curseur est pointé sur eux et sont accompagnés d’une ombre de révélation du pied de page de type large, adoptant la couleur de fond du pied de page, blanche, identique au reste du site web pour garder une homogénéité. Par la suite, un lien vers les copyrights et un autre pour les mentions légales y seront ajoutés.

<br/>
<p style="text-align: center">https://carrossur.com/</p>

<br/><h3 style="text-align: center">
Page principale
</h3>

<br/>La mise en page devais être similaire, un site One-page avec des blocs sous forme de rectangles blanc aux coins arrondis, precisé précedemment (lien6). Afin de réaliser cela, je suis parti d’une page blanche et j’ai importé plusieurs design de blocs en recherchant sur les templates de Salient. J’ai appliqué à chaque bloc un effet différent pour donner plus de choix et j’ai mis le fond du site en noir.

<br/>
<p style="text-align: center">https://carrossur.com/</p>

<br/>
<p style="text-align: center">https://carrossur.com/</p>

<br/>Le bloc retenu fut celui composé de deux colonnes dont la première contient trois blocs de texte et un lien cliquable. Le fond noir que j’avais appliqué a la page pour la rendre plus sobre ne convenais pas, le blanc étant plus épuré, et le seul effet désiré est le “Zoom Out Slowly”. Les textes ne devaient pas dépasser trois lignes et il ne fallait que deux blocs de texte. De plus, le bouton qui compte mener à la page externe devait contenir le texte “en savoir plus”. J’ai donc effectué ces modifications en ajoutant un dégradé radial de couleur sur chaque bloc partant de transparent jusqu’au noir. Pour des besoins de test des liens, j’ai parallèlement créé la page secondaire (lien9) Eco-Responsabilité

<br/>

<br/>Cependant, les bords n’étaient pas assez arrondis, j’ai donc importé plusieurs démos avant de trouver quel type d’élément acceptait l’arrondi de ses angles, il s’agit de l’élément “Column” qui possède un sous élément “Inner Column”, lui même contenant l’option “Border radius” que j’ai donc mis a 20 pixels. J’ai également mis à jour le premier bandeau en remplaçant “en savoir plus” par “découvrir l’entreprise”. De plus, j’ai changé le mode de fonctionnement des liens “en savoir plus” en modifiant le type de lien en “Regular” afin que la page ouverte se mette à jour, n’ouvrant pas une page à chaque clic.

<br/>

<br/>Suite à une demande de mon maître de stage, j’ai ajouté un élément contenant des chiffres déroulant dans un style de machine de casino. Pour effectuer ceci, j’ai importé l’élément et j’ai modifié le contenu, en changeant les valeurs et modifiant la couleur, et l’effet, en appliquant l’animation “Count to Value”.
Par la suite, j’ai retiré le surlignement sur le texte car j’ai assombri les images, j’ai centré le premier bandeau d’accueil et j’ai appliqué une marge de 15 pixels de chaque côté de chaque bloc afin d’atteindre le résultat voulu qui était que les images ne soient pas collés aux bords de l’écran. J’ai également réduit l’espace entre les différents blocs pour un meilleur résultat sur n’importe quel type d’écran (quinze pouces où vingt-et-un pouces).

<br/>
<br/>

<br/>Par la suite, j’ai été chargé de créer deux blocs supplémentaires, un premier bloc “Contact” avec une image cliquable renvoyant vers la page de contact (lien8), puis un bloc “Actualité” recensant automatiquement les nouvelles photos de Pinterest et les actualités de Facebook. J’ai d’abord recherché des plug-in afin d’automatiser cette tâche en vain, ces derniers n’étant disponibles que sous forme de widgets. C’est alors que j’ai trouvé qu’en écrivant certaines lignes de codes dans l’élément “HTML Brut”, il était possible d’incorporer ces widgets sous forme de bloc.

<br/>
<p style="text-align: center">https://carrossur.com/</p>

<br/>Le résultat final de la maquette du site web est donc composée de sept bloc :
- Accueil
- Éco-Responsable
- Crypto-Monnaie
- Chromage
- Chiffres
- Actualités
- Contact

Il est disponible a cette adresse : https://carrossur.com/

<br/><h3 style="text-align: center">
Page secondaires
</h3>

<br/>La mise en page des pages secondaires était libre, j’ai donc essayé plusieurs templates que Salient offre à ses utilisateurs. Dans un premier temps, j’ai choisi un template nommé “Sticky Verticals Tabs”, un template déjà utilisé lors de mes recherches pour faire la page principale en One-page. Cela permettait d’avoir une certaine cohérence avec la page d’accueil et de proposer un aspect différent pour mon maître de stage.

<br/>

<br/>Cependant, cette idée n’a pas été retenue car cette mise en page fut jugée trop complexe pour une page secondaire. Je suis donc parti sur une autre idée, plus simple. une mise en page sur deux colonnes avec à gauche une image et à droite un bloc de texte, puis une liste d’éléments sur la partie gauche et une image sur la partie droite.

<br/>

<br/>J’ai appliqué cette mise en page aux trois pages de précision soit :
- Éco-Responsable
- Crypto-Monnaie
- Chromage

Ensuite, afin de créer des liens entre les pages secondaires, j’ai créé deux colonnes. Celle de gauche contient une image cliquable dirigeant vers la page “Contact”(lien8), et celle de droite deux images cliquables revenant vers les deux autres pages secondaires. Pour les réaliser, j’ai repris les blocs utilisés sur la page principale que j’ai divisé en deux blocs de dimensions similaires, puis, dans les menus “Inner Column Réglages”, J’ai ajouté une marge de quinzes pixels de chaque côtés et un padding de 20% sur le dessus et le dessous afin de former le résultat ci-dessous.

<br/>
<p style="text-align: center">https://carrossur.com/</p>

<br/>Ces pages sont accessibles via ces liens :

- https://carrossur.com/index.php/eco-responsable/
- https://carrossur.com/index.php/crypto-monnaie/
- https://carrossur.com/index.php/chromage/

<br/><h3 style="text-align: center">
Page Contact
</h3>

<br/>J’ai également réalisé une page de contact, importante pour pouvoir donner des informations supplémentaires au visiteur du site web. Sa conception est simple, un bloc de texte présentant quelques informations et l’adresse à gauche et une carte à droite. La carte utilisée est une “Interactive Map” de type “Leaflet”, la carte google proposant de nombreux problèmes. Cette carte a une hauteur de 750 pixels afin d’harmoniser avec le bloc de texte qui la précède.

Elle est disponible à cette adresse : https://carrossur.com/index.php/contact/

<br/><h3 style="text-align: center">
Référencement
</h3>

<br/>A l’aide de mon cours sur le référencement, j’ai pu remplir les réglages généraux de référencement proposés par le plug-in AIOSEO. J’ai notamment choisi pour la balise “Titre Page” de mettre les étiquettes “Titre Page”, “Séparateur” et “Slogan”. J’ai de même choisi un texte personnalisé suivi d’un “Séparateur” et “Titre site” pour la balise “Meta Description”. Le rendu sur google est le suivant :

<br/>

<br/>J’ai également choisi comme phrase principale “carrosserie éco-responsable” afin d’augmenter le référencement. Le gestionnaire de référencement AIOSEO propose gratuitement la première phrase, et en propose une analyse. Selon cette analyse, il est important d’avoir cette phrase clé dans le titre, dans la méta description et qu’elle soit dans l’introduction.

Les autres réglages étant des options supplémentaires payantes, je n’ai pas pu modifier plus de réglages.

</p><br/>