Dossier de PrĂŠparation
1
Foulon Odile Master 2 Infographie
LE SITE WEB
SOMMAIRE
LE PROJET Présentation Thème Note d’intention Pourquoi un tel projet?
1 1 1 2
LOGICIELS ET TECHNIQUES UTILISéS Logiciels Les premiers pas en web
CHARTE GRAPHIQUE
Arborescence Template et ossature Typographie Logotype Couleurs Images Formes
3 - 4 5 - 9
10-11 12-13 14 - 15 15 16 - 17 18 - 19 20
PROFESSIONNALISATION L’entreprise Les difficultés
21 22
LE PROJET
1
Présentation : Réalisation d’un site web et d’un élément ( f lyer ou mailing) pour le lancement.
Thème : Institut de beauté, SPA Note d’intention :
Au cours de cette année, je souhaite ouvrir ma conception graphique au web. En effet, j’aimerais réaliser un site web pour un institut de beauté spa situé a Souchez ( 62153 ) ainsi qu’un flyer ou une campagne de mailing pour le lancement du site. Mon site se fera en CSS et PHP avec un éditeur de CMS tel que Joomla. J’espère que cette première réalisation de site web me permettra de comprendre ce nouvel univers devenu indispensable dans la communication graphique. Au cours d’un premier entretien avec la gérante de l’Institut, j’ai obtenu quelques éléments graphiques me permettant de réaliser ce dossier de préparation en rapport avec les éléments print existants.
2
LE PROJET
Pourquoi un tel projet ? Le comportement du consommateur a changé! La montée en puissance d’internet dans son quotidien le pousse de plus en plus à orienter ses décisions d’achat autour du net. On découvre et visite sur le web, on y prend le temps de s’informer, de comparer, de se faire une idée… C’est sans doute pour ces raisons que le site internet d’une entreprise, quel que soit son secteur d’activité ou sa taille, est devenu un outil de communication vital. Aujourd’hui, donner l’adresse de son site internet est devenu aussi naturel que de distribuer sa carte de visite. Ce projet m’intéresse beaucoup puisque la réalisation de site internet est une première pour moi. Je suis motivée à découvrir ce nouvel univers malgré le code présent dans le langage PHP et les feuilles de styles CSS. De plus, cet institut ne dispose d’aucun site internet. Ouvert depuis quelques années, la gérante fut très intéressée par cette proposition puisque la réalisation d’un site internet faisait partie de ses préoccupations actuelles.
LOGICIELS ET TECHNIQUES UTILISéS
3
Joomla est un système de gestion de contenu (en anglais, CMS, pour Content Management system). Pour faire simple, un CMS est un logiciel web qui permet de créer un site internet dynamique en toute simplicité. Joomla! est un CMS Open Source distribué sous licence GNU/GPL (gratuit) avec lequel vous pourrez mettre en ligne du contenu et mettre à disposition de vos visiteurs des services (forum, boutique en ligne, galerie photos, etc.), le tout sans connaissance technique particulière.
Xampp est un ensemble de logiciels permettant de mettre en place facilement un serveur Web, un serveur FTP et un serveur de messagerie électronique. Il s’agit d’une distribution de logiciels libres offrant une bonne souplesse d’utilisation, réputée pour son installation simple et rapide. Ainsi, il est à la portée d’un grand nombre de personnes puisqu’il ne requiert pas de connaissances particulières et fonctionne, de plus, sur les systèmes d’exploitation les plus répandus.
4
LOGICIELS ET TECHNIQUES UTILISéS
Suite Adobe CS4 est un panel de logiciels destinés à l’édition d’images, de vidéos et de site web.
Photomatix Pro permet de réaliser des photos combinées à partir de plusieurs prises d’un même sujet et d’un même angle, mais avec des contrastes différents. En effet, en fonction du contraste, des éléments sur les photos vont davantage ressortir et l’application propose de combiner ces prises pour garder les éléments importants à tous les plans. Les photos sont alors plus dynamiques…
Autopano permet de créer des images panoramiques de qualité professionnelle en assemblant automatiquement des photos ensemble.
LOGICIELS ET TECHNIQUES UTILISéS
5
Les premiers pas en web… Les langages : Les langages XHTML et CSS, eux, servent précisément à créer des sites web, et ils ont été créés de manière à être simples à utiliser. Le CSS : c’est l’abréviation de Cascading Style Sheets («Feuille de style»). Ce langage nous sert uniquement à présenter la page web. C’est en CSS que l’on dira : «Mes titres sont en rouge et sont soulignés, mon texte est dans la police arial, mon nom est centré, mon menu a un fond blanc...» etc . Grâce à ce langage, nous allons pouvoir créer rapidement et simplement la mise en page d’un site.
En résumé, on se sert de : • XHTML pour écrire le contenu de nos pages web. • CSS pour présenter ce contenu. Ces langages sont donc complémentaires, l’un ne va pas sans l’autre.
6
LOGICIELS ET TECHNIQUES UTILISéS
Quel que soit le site web que l’on souhaite créer, XHTML et CSS sont donc indispensables. Cependant, ils ne suffisent pas pour réaliser des sites dynamiques. Il faut les compléter avec d’autres langages. Par exemple : Le PHP est un langage que seuls les serveurs comprennent et qui permet de rendre un site dynamique. C’est le PHP qui «génère» la page web.
L’éditeur : Pour créer un site web, le bloc-notes suffit. Mais avec un peu de recherche, on peut trouver des logiciels vraiment utiles permettant de colorer automatiquement le code XHTML / CSS. Notepad++ est un logiciel de ce type, il est en français et gratuit.
Les navigateurs : Le travail du navigateur, c’est de lire le code XHTML / CSS que l’on a écrit, et d’afficher ce qu’il représente. Il existe plusieurs navigateurs dont les principaux sont Internet Explorer et Mozilla Firefox sur pc. Il est donc conseillé d’installer plusieurs navigateurs afin de vérifier que le site fonctionne correctement sur chacun d’eux.
LOGICIELS ET TECHNIQUES UTILISéS
7
Les balises et attributs : • Les balises En effet dans une page XHTML, en plus du texte, on y trouve des balises représentées comme ceci : <balise> Les balises sont invisibles pour le visiteur, elles servent de marqueurs pour indiquer quelque chose au navigateur. Il existe 2 types de balises : Les balises existant par paire sont les plus courantes. Exemple : <title>Bienvenue sur mon site !</title> Les balises seules sont un peu plus rares. On s'en sert en général pour insérer un élément dans une page. Il ne faut pas oublier de mettre un / à la fin de la balise. Exemple : <image /> • Les attributs Les attributs sont un moyen de donner des précisions sur une balise. On peut trouver des attributs sur les deux types de balises (par paire ou seules).
8
LOGICIELS ET TECHNIQUES UTILISéS
Exemple <image nom="soleil.jpg" /> Ici, l'attribut est "nom", et il a pour valeur "soleil.jpg". Cela indique que l'image que l'on veut insérer s'appelle "soleil.jpg". Dans le cas d'une balise fonctionnant "par paire", on ne met les attributs que dans la balise ouvrante et pas dans la balise fermante. Les noms des balises et attributs s'écrivent toujours en minuscules et les valeurs des attributs peuvent contenir des majuscules.
Les principales balises pour organiser son texte : Les paragraphes En XHTML, les choses sont plutôt simples : ça fonctionne en paragraphes. Chaque paragraphe se trouve entre les balises <p> et </p> (qui signifient "paragraphe"). <p> signifie "Début du paragraphe" </p> signifie "Fin du paragraphe" <br /> est une balise seule qui sert juste à indiquer qu'on doit aller à la ligne (elle doit être obligatoirement à l’intérieur d’un paragraphe)
LOGICIELS ET TECHNIQUES UTILISéS
9
Les titres En XHTML il existe 6 niveaux de titres différents. • <h1> </h1> : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut. • <h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre. •
<h3> </h3> : un "sous-titre" par exemple, etc.
Attention la balise <title> affiche le titre de la page dans la barre de titre du navigateur et non pas à créer des titres qui seront affichés dans la page web. Le CSS ressemble fortement au langage XHTML, il est juste différent car il sert à réaliser la présentation de votre page web. Par contre, il y a beaucoup de propriétés à connaître, par exemple les "effets de style" de la page sont rangés dans des propriétés ( la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte etc.).
10
CHARTE GRAPHIQUE
Osmose Institut dispose déjà d’une charte graphique pour les éléments print tel que le dépliant des tarifs ou encore le livret de présentation des soins. Le client m’a demandé de la respecter pour la création du site.
Arborescence L’arborescence permet de visualiser de façon schématique les différentes pages qui composent un site ainsi que les principaux liens qui les unissent. Pour simplifier, 1 case = 1 page. Tous les liens ne sont pas affichés car l’arborescence doit rester lisible et compréhensible par tous. En tant que livrable, elle doit être signée et approuvée par le client en phase de conception. Indispensable pendant cette première phase, elle est très utile tout au long du projet et doit continuellement être mise à jour, et ce, même après la mise en ligne du site. Voici l’arborescence du site aux derniers changements avec le client :
CHARTE GRAPHIQUE
11
Seconde partie de l’arborescence Sur cette arborescence, au deuxième niveau (rose claire) apparaissent les onglets qui seront présents dans le top menu. Sur la gauche de la page, on verra apparaître les onglets tels que « Les plus de l’Institut », « Contact », « Nos partenaires », « Ce qu’il faut savoir ». Mais cela risque encore d’évoluer.
12
CHARTE GRAPHIQUE
Template Un template graphique est un moyen de séparer le fond (le contenu informationnel) de la forme (la manière dont il est présenté). Très utilisé dans la conception de sites webs, un template agit comme un modèle dans lequel seul certains éléments sont modifiables (le contenu). Cela facilite la conception et la mise à jour des sites, aussi bien sur le contenu que sur la présentation. • Changer la charte graphique du site revient à changer le template et cela met à jour toutes les pages du site. • Ajouter une page ne consiste plus qu’à en écrire le contenu. Beaucoup de moteurs de template destinés à la construction de sites sont construits en PHP. Un autre moyen de gérer des templates au niveau d’un site consiste à utiliser des feuilles de style CSS. Souhaitant réaliser mon site via Joomla, j’ai téléchargé plusieurs templates gratuits disponibles sur le web. Je suis en train de sélectionner celui qui correspondrait le mieux au profil du site. Ci-contre l’ossature de la page d’accueil du futur site, les autres pages seront semblables à celle-ci.
CHARTE GRAPHIQUE
13
Ossature Bannière
Rechercher: Top menu left/module 1
corps
right/actualité
right/visiteurs
right/accéder à l’institut (googlemaps) right/horaires
pied de page
14
CHARTE GRAPHIQUE
Typographie Pour le print : • TITRES ET SOUS -TITRES Planet Estyle Regular (12 pt)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopkrstuvwxyz 0123456789 • TEXTE CONTENU BabelSans Regular(12 pt)
BabelSans Bold Italic (12 pt)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghij klmnopqrstuvwxyz 0123456789
BabelSans Medium Italic (12 pt)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 BabelSans Bold (12 pt)
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
CHARTE GRAPHIQUE
15
Pour le web : •
TITRES ET SOUS -TITRES font-family : «Planet Estyle Regular», Arial, Helvetica, sans-serif • TEXTE CONTENU font-family : «BabelSans Regular», Arial, Helvetica, sans-serif Les typographies sont basées sur le print existant.
Logotype Pour une entreprise le logo est indispensable. Sans logo, une entreprise ne peut exister aux yeux de son public, de ses clients, ni de ses fournisseurs et partenaires. Aujourd’hui je ne dispose que d’une image scannée du logo. Le client devrait pouvoir me le fournir lors du prochain rendez-vous.
CHARTE GRAPHIQUE
16
Couleurs A l’aide du logiciel «La boîte à couleurs», j’ai récupérer les couleurs des documents scannés. Ce ne sont donc pas les couleurs originales mais elles sont très proches. Pour le Web les couleurs sont en RVB.
Les bleus code RVB : R=203 V=252 B=231 code hexadécimal : #cbfce7
code RVB : R=173 V=226 B=216 code hexadécimal : #ade2d8
code RVB : R=119 V=203 B=177 code hexadécimal : #77cbb1
code RVB : R=57 V=95 B=116 code hexadécimal : #395f74
code RVB : R=28 V=64 B=80 code hexadécimal : #1c4050
CHARTE GRAPHIQUE
17
Les oranges code RVB : R=255 V=241 B=206 code hexadécimal : #fff1ce
Les marrons code RVB : R=110 V=65 B=59 code hexadécimal : #6e413b
code RVB : R=92 V=42 B=33 code hexadécimal :#5c2a21
code RVB : R=236 V=115 B=40 code hexadécimal : #ec7328
code RVB : R=119 V=203 B=177 code hexadécimal : #77cbb1
Les verts code RVB : R=176 V=202 B=79 code hexadécimal : #b0ca4f
code RVB : R=203 V=160 B=47 code hexadécimal : #cba02f
code RVB : R=96 V=202 B=130 code hexadécimal : #60ff82
CHARTE GRAPHIQUE
18
Image Les images scannées
Le client m’a donné plusieurs brochures avec des images que je peux utiliser pour le site sans aucun problème vis à vis des sociétés.
CHARTE GRAPHIQUE
19
Photographies Les séances prévues pour la réalisation des photographies de l’Institut ayant été annulée à deux reprises par le client, je lui ai demandé de bien vouloir m’en envoyer. La qualité de ses photos est mauvaise. Le client pourra m’accueillir au cours du prochain semestre pour faire quelques prises de vue.
Le Hammam
La cabine d’affusion
La cabine UVA
20
CHARTE GRAPHIQUE
Formes Le papillon et les courbes sont des formes rĂŠcurrentes dans les documents papiers fournis par le client. Elles reprĂŠsentent la tendance zen de lâ&#x20AC;&#x2122;institut.
papillon fresque murale salon
papillon logo
Sur le CD, des brosses Photoshop sont disponibles rappelant ces courbes.
PROFeSSIONNALISATION
21
L’entreprise L’institut de beauté Osmose, fort de son expérience d’esthéticienne depuis 10 ans, passionné, s’emploie à prodiguer aux femmes, détente et beauté avec ses soins du visage, ses soins du corps et ses massages détente, dans le respect de l’homme et de la nature. Dans un cadre où seule la « zen attitude » à son code d’entrée, vous oubliez votre stress et vous y entrerez pour trouver détente, relaxation et bien-être.
10 rue Pasteur 62153 SOUCHEZ 03 21 29 28 71
22
PROFeSSIONNALISATION
Les difficultés Au cours de ce semestre, j’ai rencontré plusieurs difficultées, que ce soit pour fixer mon projet ou trouver l’entreprise qui accepterait de «collaborer» avec moi. Ces deux points sont aujourd’hui résolus. Maintenant, j’espère trouver toutes les réponses aux questions que je me pose sur la réalisation technique d’un site web, la mise en ligne, l’hébergement, etc., afin que mon projet se concrétise et soit mis en ligne.
23