Rapportsitewebdynamiquebouyahiakarima

Méthodologie de conception d’un
site web dynamique
1. Introduction :
Qu’est-ce qu’un site web :
Un site web est un ensemble de pages web visualisables
dans un navigateur. Ces pages web sont reliées entre
elles par des liens qui permettent de passer de l’une à
l’autre. En règle générale, on reconnaît un site web à
l’homogénéité du design de ses pages. L’ensemble des
pages d’un site web est en général accessible sous
une adresse au même nom de domaine.
Qu’est-ce qu’une page web :
Une page web est l’élément unitaire constitutif du site

web. Elle est formée d’éléments visibles et invisibles à
l’œil. Les éléments visibles sont le texte, les images, les
animations et vidéo. Les éléments invisibles sont
composés de codes interprétés par le navigateur pour
assurer la mise en page des éléments visibles et leurs
éventuelles interactions possibles avec l’utilisateur.
Ces codes répondent à des standards. Une page web

digne de ce nom est normalement composée
uniquement en respectant ces standards. Ces codes sont
de plusieurs types, principalement html, JavaScript et
leur évolution successive.
Techniquement, une page web n’est que le renvoi par

un serveur à un navigateur d’un fichier texte qu’il est
assez simple de lire dans sa forme brute et non
interprétée par le navigateur. Pour cela, il suffit dans
le navigateur de demander à voir les sources de la page
sur laquelle on se trouve (option disponible dans un
menu ou un autre suivant le navigateur employé)
Réaliser par Karima .Bouyahia 1

site web dynamique
Qu’est-ce que l’adresse d’une page internet :
L’adresse d’une page Internet, aussi nommée url, est

composée de plusieurs éléments :
Le premier indique le protocole utilisé dans la

conversation qui va s’instaurer entre le demandeur et le
serveur : le plus fréquent étant http://
Le second indique le nom de domaine à interroger et

son éventuel préfix : www.google.fr
La suite de l’adresse est variable et ne correspond plus

forcément a des réalités palpables en raison de
techniques comme l’url rewriting
On notera quand même qu’en général, le dernier

élément d’une adresse correspond à l’interrogation
particulière d’une page sur le serveur. Ce dernier
élément est repérable après le dernier caractère / qui
compose l’adresse. Il a souvent la syntaxe typique d’un
nom de fichier informatique, c’est à dire nom de fichier.
Ext. Le plus typique est de trouver ici index.html ou
index. PHP.
On remarquera que l’Ext indique bien souvent le langage
de programmation utilisé pour développer le site.
Après ce dernier élément nom de fichier .ext, on

trouvera parfois un ? suivi d’une chaîne de caractère
comportant parfois plusieurs signes & et =. Cette chaîne
de caractères permet de faire transiter des variables de
programmation d’une page à l’autre.
Pour résumer l’adresse typique d’une page internet est

la suivante :

site web dynamique
http://www.nomdedomaine.ext/index.html?
var1=un&var2=abo
On omet souvent le protocole quand on indique une

adresse Internet car le navigateur complet par défaut
avec http://.
Qu’est-ce qu’un navigateur :
Un navigateur est un logiciel qui permet de parcourir

un site web. Il n’y a pas un mais des navigateurs
différents. Les plus courants sont : Internet Explorer,
Firefox, Safari, Chrome mais on en compte de nombreux
autres.
Notre souci n’est pas de savoir quelles fonctionnalités

offrent chaque navigateur à l’utilisateur, elles sont
multiples et variées, mais plutôt comment chaque
navigateur rend à l’écran le site développé. Car malgré
les standards instaurés, un site peut s’afficher de fort
mauvaise façon chez un utilisateur si l’on n’a pas pris un
maximum de précaution. Au cours du développement
d’un site web, il faut donc tester la réalisation sur
plusieurs navigateurs.
Qu’est-ce qu’un code standard :
C’est un code qui respecte les normes définies par

l’organisme chargé de la normalisation des langages
(le World Wide Web Consortium) qui servent à créer
une page web.
Avoir un site web dont le code respecte ces normes est

la meilleure assurance pour que ce site s’affiche
correctement sur tous les navigateurs présents et futurs.

site web dynamique
Respectez les standards c’est aussi rendre plus

accessible votre site aux personnes présentant un
handicap. Pour s’assurer qu’un site respecte les
standards, il existe différents type de validateurs : l’un
pour le html, l’autre pour les feuilles de style
Qu’est-ce qu’un site dynamique :
Dans la vie, il y a plusieurs façons de concevoir les

choses : soit l’on fait du 100% original et l’on
recommence à chaque fois de zéro, soit l’on met en
place des outils qui automatisent les actions de bases et
l’on change quelques paramètres de ces outils pour leur
faire réaliser le résultat original voulu.
Un site dynamique fonctionne sur ce second schéma. On

part du principe que pour réaliser son site web qui
comportera 100, 10 000, 100 000 pages on ne réalisera
pas chacune d’entre elles de zéro. Grâce à un langage
de programmation, on créera un modèle identique pour
les 100 000 pages et l’on viendra compléter ce modèle
dynamiquement avec les informations qui caractérisent
chacune des pages web finales et qui les rendent
originales. Dans ce fonctionnement, seul le modèle
existe physiquement. Les 100 000 pages web finales ne
sont que la superposition, en temps réel, suivant la
demande de celui qui parcoure le site, du modèle et des
informations à y incruster.
Concrètement, le modèle peut être comparé à un

pochoir ou à un formulaire vierge. Imaginons qu’il n’y ait
qu’un exemplaire de ce formulaire et 100 personnes
différentes qui peuvent le remplir. Nous pourrons bien
avoir 100 résultats différents virtuels, mais il n’existera
toujours qu’une seule feuille de papier.

site web dynamique
Qu’est-ce qu’une base de données :
Une base de données c’est un format de rangement

d’informations. Par extension, c’est aussi le programme
qui gère ses bases sur un serveur. Parce qu’il est libre et
performant, le programme le plus utilisé est MySQL, mais
il est loin d’être le seul !
Revenons au principe d’une base de données. Celui qui a

les idées assez claires pour ranger les informations qu’il a
à sa disposition dans un grand tableau sait construire une
base de données.
La base de données minimale est en effet un grand
tableau : chaque colonne sert à ranger un type de donnée,
chaque ligne représente un enregistrement.
Prenons l’exemple d’un carnet de contacts

téléphoniques :
En colonne : n° du contact, nom, prénom, fonction,
numéro de téléphone
Chaque ligne est un enregistrement
N° du Préno
Nom Fonction Téléphone
contact m
Dupo Charle 00 22 45 89
1 Clown
nt s 33
Thom Germa Trompett 00 44 57 94
2
as ine iste 23
Duran Vivian Magicien 00 58 45 78
3
d e ne 99
Voici donc une base de données.
Imaginons maintenant que l’on souhaite stocker les

adresses de chaque contact.

site web dynamique
Deux solutions s’offre à nous : soit on rajoute des colonnes

à notre tableau, soit dans notre base de données on ajoute
un second tableau comme celui qui suit :
N° du N° dans la Code
Rue Ville
contact rue postal
De la 75
1 145 Paris
gare 010
De la 75
2 10 Paris
poste 010
Du 75
3 21 Paris
temple 003
Afin de faire correspondre la bonne adresse à la bonne

personne, nous avons reproduit la première colonne du
tableau 1 dans le tableau 2. Le n° du contact est la clef
entre ces 2 tableaux qui permet de dire par exemple que
Thomas Germaine, trompettiste, habite rue de la poste
dans le deuxième arrondissement.
Le choix de multiplier les tables ou d’ajouter des

colonnes à une table préexistante dépend bien souvent de
l’objectif à atteindre. Imaginons que nous souhaitions
ajouter comme information à notre base les instruments
de musique maîtrisés par chacun de nos artistes.
Deux solutions s’offrent à nous :

La première : ajouter des colonnes à l’une ou l’autre des
tables déjà créées plus haut. On pourrait appeler ainsi
chaque colonne : instrument 1, instrument 2, instrument 3
… Oui mais combien de colonnes ajouter au final ? Cinq ?
Et le jour où un nouvel artiste à référencer en maîtrisera 6,
comment ferons-nous ? Nous ajouterons une sixième
colonne pour lui uniquement ? Non, cette solution n’est
pas optimale.
site web dynamique
La seconde solution est de créer une nouvelle table de la

sorte :
N° du Instrum
contact ent
1 Violon
1 Gazou
Trompet
2
te
Que conclure de la lecture de cette table ? Que le

contact 1, le clown Charles Dupont joue du violon et du
gazou, que le contact 2 Germaine Thomas, joue de la
trompette.
Avantage : le jour le clown Charles jouera du piano, on
pourra ajouter une ligne à cette table
Pian
1
o
Cette deuxième solution sera dans cet exemple à préférer

largement.
Qu’est-ce qu’un index dans une base de données :
Dans un annuaire de contacts papier, le classement le

plus fréquent est alphabétique. L’index est la première
lettre du nom de famille. C’est cet index qui fait que
vous allez retrouver plus facilement le n° de téléphone
d’un contact.
Imaginons que vous donniez une liste en vrac, sans

aucun classement logique, d’une centaine de contacts à
votre secrétaire. Vous lui demandez maintenant de
téléphoner à M. Zaide. Que va faire la secrétaire ? Elle va

site web dynamique
parcourir la liste de haut en bas à la recherche de la

ligne concernant M. Zaide. Si elle a de la chance,
M. Zaide sera en début de liste et elle n’aura balayé que
quelques lignes pour le trouver. Mais imaginons que
vous êtes vicieux et que M. Zaide est en 88ème position.
La secrétaire devra balayer du regard 87 lignes avant de
trouver la bonne. Quelle perte de temps !
Et bien pour une base de données informatique c’est

la même chose. Une base sans index est une base que le
système doit parcourir de A à Z afin de fournir le résultat
recherché.
Il convient donc que votre base soit correctement

indexée. Toute colonne, ou presque, peut être indexée.
Mais il faut savoir choisir car tout indexer prend de la
place (surtout quand on traite des milliers
d’enregistrements). Il faut donc savoir comment votre
site va interroger la base de données. Va-t-il lui
demander de sortir l’information par nom de famille, par
fonction ? Imaginons qu’il faille afficher tous les artistes
par arrondissement parisien, il faudra donc prévoir
d’indexer cette colonne dans votre base de données.
Qu’est-ce qu’une base de données bien construit :
Une base de données bien construite et une base de

données qui comporte des tables bien étudiées par
rapport aux interrogations qu’elle va subir ainsi que
des index bien placés. Mais pas seulement.
Pour qu’une base de données soit performante, il

faut aussi que chaque champ (un champ étant une
colonne du tableau) soit correctement choisi par rapport
aux données qu’il va contenir. Au moment de la création

site web dynamique
d’une table, on doit définir chaque champ :

son type (numérique, textuel …), sa longueur potentiel
et d’autres paramètres. Ces définitions peuvent être
révisées ultérieurement pour adapter le contenant (le
type de champ) au contenu (les données). Mais il n’est
pas rare de trouver des erreurs dans la définition des
champs qui n’ont pas été choisis ou adaptés lors du
développement du projet : parfois des champs textuels
sont prévus et l’on y stocke des valeurs numériques,
d’autre fois, les dates sont stockées dans des champs
texte …
Une possibilité souvent oubliée est d’utiliser des

champs de type set ou enum. Ce type de champ est très
utile quand il faut stocker des informations contenues
dans une liste finie de possibilités.
Imaginons que dans la base de données d’artistes

que nous avons élaborée plus haut nous souhaitions
indiquer le jour de repos de chaque artiste. Nous
pourrions créer une colonne de texte de 8 caractères de
large et la remplir par « vendredi » ou « dimanche »
suivant le jour de congés hebdomadaire de l’artiste. Cela
serait fort dommage. Il vaut mieux utiliser un champ
enum qui aura comme différente possibilité (lundi,
mardi, mercredi, jeudi, vendredi, samedi, dimanche).
Pour chaque artiste le système ne stockera plus une
chaîne de caractère mais une simple valeur bien moins
gourmande renvoyant à la liste des possibilités.
Une base de données est également bien construite

quand les tables qui la composent sont d’un format bien
choisi. Il existe ainsi plusieurs formats de table qui
peuvent cohabiter dans une même base. Il convient de
vérifier que le format des tables correspond à l’utilisation
site web dynamique
que l’on souhaite en faire ou qu’il n’utilise pas un format

ancien et dépassé comme on le voit parfois !
Qu’est-ce qu’un langage de programmation côté

serveur :
Un langage de programmation côté serveur est un

ensemble de codes qui permettent (entre autres et pour
ce qui nous concerne ici) la réalisation de sites
dynamiques. Le langage utilisé fréquemment est PHP,
car c’est un logiciel libre donc gratuit d’utilisation, et
performant.
On emploie l’expression « coté serveur » car le code

écrit n’est jamais visible par l’utilisateur final du site. Ce
dernier ne voit que le résultat de l’exécution de ce code,
c’est-à-dire une page web.
Les rôles principaux du langage de programmation

sont :
Recueillir les demandes de l’expéditeur final (à travers
la demande de visualisation d’une page web,
l’interaction avec un formulaire ou un élément sur la
page …)
Interagir avec les bases des données pour y stocker ou
en extraire de l’information
Retourner à l’utilisateur une page web correspondant à
sa demande.
2. Objectif d’un site web :

Définir des objectifs avant le projet de création d’un site
internet permet de bien cadrer le projet. Pour cela il faut savoir
qu’est un objectif, comment le fixer et comment présente les
objectifs les plus courant pour un projet de site internet.
Réaliser par Karima .Bouyahia  10 

site web dynamique
Qu’est-ce qu’un objectif ?

Le (ou les) objectif(s) est le but que votre projet de création
de site internet se devra d’atteindre. Selon la définition
en marketing, il se devra d’être SMART (Spécifique, Mesurable,
Atteignable, Réaliste, Temporel). Le seul moyen de savoir si vos
outils marketing (votre site internet en fait partie) fonctionnent
est d’avoir défini des objectifs que vous pourrez ensuite
mesurer.
Pourquoi définir des objectifs à votre site internet ?
Votre site internet se doit d’être traité comme n’importe
quelle autre de vos actions marketing. Il disposera d’objectifs
qui lui sont propre. Cela est d’autant plus important que les
buts de votre site internet seront souvent multiples,
contrairement à une brochure ou une annonce presse.
Une spécificité propre à internet donne encore plus de sens à
la définition d’objectifs à votre site internet est que sur internet
tout est mesurable.
Grâce à des statistiques précises (souvent Google Analytics),
il est possible de récolter de nombreuses données précieuses
sur vos clients. Ces données vous aideront à améliorer vos
outils de communications web et donc le retour sur
investissement (ROI) de votre site internet.
Quels sont les objectifs les plus courants d’un site
internet ?
Quels seront les objectifs que vous définirez avant la création

de votre site internet ? Selon le type de projet, et votre agence
web pourra vous y aider, ces objectifs seront différents. Vous
trouverez ci-dessous les objectifs les plus courants. Sachez
toutefois que chaque projet web et chaque entreprise étant
différents, vos objectifs vous seront propres :
 Acquisition de nouveaux clients / prospects
 Amélioration de votre notoriété

site web dynamique
Apport d’un nouveau service à vos


clients / fidélisation de vos clients
 Information au sujet de votre entreprise
 Promouvoir un produit ou un service
 Vendre ses produits et services (commerce en ligne)
Il est utile de vous rappeler que vos objectifs seront SMART,

cela donnera par exemple pour l’acquisition de nouveaux
clients : « l’entreprise X se fixe l’objectif d’obtenir 10 nouveaux
clients par mois grâce à son nouveau site internet ». Cet
objectif rédigé de cette manière réponds aux critères d’un
objectif SMART car :
 Spécifique : cet objectif précise ce qui (ou qui) doit
atteindre l’objectif, ici le site internet.
 Mesurable : l’objectif précise un nombre de clients
à acquérir.
 Atteignable : l’équipe en charge du projet accepte
l’objectif, le comprend et l’estime réalisable
 Réaliste : par rapport aux performances
précédentes de l’entreprise X, acquérir 10 nouveaux
clients par mois semble réaliste. Cela est bien
entendu propre à chaque cas.
 Temporel : l’objectif est évaluable puisqu’on sait à
quel moment nous pourrons savoir s’il a été atteint.
Comment définir l’objectif de votre site web :
Pour trouver un objectif, la question à se poser est la
suivante :
Qu'est-ce que ce site web va me rapporter ?
Même si vous n'avez pas d'objectif monétaire,

pensez comme un entrepreneur. De plus, n'écartez pas la
possibilité d'avoir des revenus grâce à votre site web.
Vous allez mettre beaucoup de temps sur votre site, c'est
site web dynamique
une condition essentielle pour qu'il soit utile. Si vous y

mettez tout ce temps et que vous n'avez pas de
compensation directe ou indirecte, à un certains point
vous allez vous décourager.
Un bon objectif devrait vous permettre soit
d'augmenter votre motivation ou de réaliser que vous
vous êtes trompé. Plus vous vous approcherez de votre
objectif, plus vous serez motivé à le poursuivre. À mesure
que vous verrez vos progrès, vous aurez envie d'aller plus
loin. Par contre, si les résultats ne viennent pas, vous
réaliserez après un certain temps que vous vous êtes
trompé. Attention, il faut être patient, pour certains
projets il se peut que les résultats ne viennent qu'après
plusieurs mois. Ce sera à vous de décider quand ça ne
vaut plus la peine de poursuivre le projet mais avec un
bon objectif, ce sera plus facile de décider et vous saurez
exactement pourquoi vous n'y êtes pas arrivé.
Quand on se pose la question de ce que rapporte un
site web, il y a beaucoup de possibilités. Un site peut
vous rapporter des revenus directement mais il aussi
vous apporter des opportunités : un emploi mieux
rémunéré, des offres pour des conférences, des
demandes de services pour votre hobby.
Comment on détermine l'objectif de son site web :
Un bon objectif répond à certains critères. Vous avez

peut-être déjà vu cela ailleurs, un objectif doit être spécifique,
réaliste (ou atteignable), mesurable et avoir une durée précise.
 Spécifique : il doit porter sur une chose en particulier.
Évitez de voir trop large.

site web dynamique
 Réaliste : votre objectif doit tenir compte de la réalité.

Évitez de voir trop grand (mais pas trop petit non
plus).
 Mesurable : vous devez pouvoir mesurer le résultat,

c'est ce qui vous permet de savoir si vous réussissez.
 Durée précise : vous devez mettre une durée ou une

date à votre objectif.
Il se peut que vous ayez de la difficulté à définir

immédiatement votre objectif. Une des causes de cette
difficulté, c'est probablement que le but de votre site web n'est
pas clair. Il faut donc répondre à la question :
Qu'est-ce que je veux faire avec mon site web ?
Quelques idées de buts :
 Vendre des objets ou des services directement sur le
site
 Éduquer de futurs clients et les convertir plus
facilement
Créer de l'intérêt pour vos créations (livres, musique,
photos, etc)
 Recruter des supporteurs (politique, art, sport)
 Réduire ses coûts de publicité
 Augmenter sa crédibilité ou prouver son expertise
Si vous ne l’avez pas déjà lu, je vous suggère de lire

mon article Pourquoi devez-vous avoir un but, une mission et
des objectifs pour votre site web ?
Une fois que votre but est clair, il vous restera à choisir
un objectif. La quantité de visites sur votre site sera
site web dynamique
évidemment très importante, particulièrement au début. Mais

à mesure que vous progresserez, vous pourrez ajouter
d'autres objectifs.
La liste qui suit formule un bon objectif pour chacun
des buts que nous venons de voir. Ce ne sont que des
exemples, pour chaque but vous pouvez avoir autant
d'objectifs que vous voulez.
Quelques idées d'objectifs :
 Compléter 5 ventes dans les deux prochains mois
 15 visiteurs par mois utiliseront le formulaire de
contact pour des questions sur mon offre de service
15 téléchargements par semaine de l'extrait gratuit de
mon livre
 Accroître de 10% par mois le nombre d'abonnés à mon
infolettre
Obtenir 200 visiteurs uniques par jour via les moteurs
de recherche (Google, Yahoo, Bing, etc.)
 Obtenir 4 contrats de conférenciers dans les 6
prochains mois
 Et si j’échoue ?
Il est fort probable que voir ces objectifs, ou
penser à votre propre objectif vous inquiète.
Qu'est-ce qui arrivera si j’échoue ?
Mon opinion est que vous ne serez pas plus
mal si vous avez échoué. Par exemple, le
premier objectif consiste à compléter 5 ventes
dans les deux prochains mois. Qu'est-ce qui
arrive si vous n'avez que 4 ventes après deux

site web dynamique
mois ? Ou encore, si vous avez 5 ventes mais en

3 mois ? À mon avis, c'est mieux qui si vous ne
savez pas combien de vente vous voulez
compléter dans une période donnée. Et même si
vous n'avez aucune vente, tout n'est pas perdu.
Vous avez appris quelque chose : ce que vous
faites ne fonctionne pas. Il faut changer.
 La première étape :
Une fois que vous aurez votre objectif, vous
devrez trouver quelle est la première chose que
vous devez faire pour vous approcher de votre
objectif. Ne perdez pas votre temps à faire un
plan complet qui vous amène du début à la fin.
Trouvez la première étape et agissez le plus
rapidement possible. Une fois cette étape
complétée, vous serez bien placé pour trouver la
deuxième étape et ainsi de suite.
3. Etude de la cible :
Une fois que l’analyse des forces et faiblesses du projet,
de l’environnement, des parties prenantes et que les objectifs
de chiffre d’affaires ont été réalisées, l’élaboration d’une
stratégie peut avoir lieu.
Il ‘agit principalement de cibler sa clientèle potentielle et
choisir son positionnement

site web dynamique
 Cibler sa clientèle :
Il s’agit de sélectionner des groupes de prospects

présentant les mêmes caractéristiques et des
comportements identiques (segments de clients)
auxquels on va vendre les produits. L’identification
de chaque segments ayant normalement été fait lors
de l’étude de marché.
On peut distinguer plusieurs niveaux de clients :

Le client final ou consommateur : il s’agit de

la personne qui va consommer l’objet
 L’acheteur : il s’agit de la personne qui va
acheter le produit ou service
 Le prescripteur : il s’agit de la personne qui
prescrit au consommateur ou à l’acheteur
Attention à ne pas les confondre car l’erreur de ciblage
peut être fatale à l’entreprise.
Une fois les différents segments déterminés, il s’agit
de les quantifier (estimer leur nombre) mais aussi de
les identifier clairement (Que font-ils ? quel est leur
besoin ? quels sont leurs habitudes d’achats…)
Pour choisir le segment qu’il privilégiera, le porteur
de projet doit savoir :
Si le volume de clients dans chaque segment
est suffisant. Cela permettra de savoir si
l’entreprise pourra généré suffisamment de CA
pour vivre.
La présence d’un réel besoin du client potentiel.
Il ne s’agirait pas que le client n’ait pas besoin du
produit ou services. On peut parler également
d’adéquation entre l’offre et les attentes du
consommateur
site web dynamique
L’adéquation entre les moyens disponibles

(financiers, technologiques, humains…) et les
attentes de la cible
Voici deux exemples de segmentation :
Age, sexe, profession, catégorie
socioprofessionnelle
Activité, chiffres d’affaires, taille de l’entreprise,
 Choisir un positionnement
Le positionnement correspond à l'image qu'une
entreprise veut donner à son client et concurrents de ses
produits. Chaque entreprise à un positionnement
particulier : produit de luxe…
Or, à chaque segment de clientèle correspond un type de
positionnement.
Avant de se positionner, il s’agit de bien prendre en
compte :
 les attentes, les spécificités et les besoins des
cibles.
le positionnement des concurrents.

 les caractéristiques du produit (son avantage

concurrentiel) et des capacités de l’entreprise.
En cas de mauvais positionnement la sanction sera
souvent immédiate : le produit ne correspondra pas aux
attentes du consommateur qui ne l’achètera pas.
Pour bien fonctionner, le positionnement doit être :
 clair : il s’agit qu’il soit compréhensible et
perceptible par tous les niveaux de clients.
 Différent et pertinent : il s’agit d’avoir bien
pris en compte le positionnement des
concurrents.

site web dynamique
Le positionnement conditionnera le mix marketing :

le chef d’entreprise adaptera son prix, son produit, ses
moyens de distribution ainsi que la communication en
fonction de lui. Il conditionnera également, les moyens à
mettre en œuvre (tant financier qu’humain) pour
permettre à l’entreprise de pénétrer durablement son
marché.
4. Etude de la concurrence :
Dans la mise en place de votre plan marketing web, l’une
des toutes premières étapes, après avoir préalablement
analysé votre entreprise (ses ressources, ses forces, ses
faiblesses, ses opportunités de développement…), est
d’établir un audit concurrentiel. Grâce à cette analyse de la
concurrence, vous pourrez ensuite déterminer le plan
d’action.
 Pourquoi : Étudier la concurrence ?
Connaître son environnement concurrentiel est aussi
important, pour l’entreprise qui applique une véritable
démarche marketing, que se connaître soi-même. Que l’on
soit gros ou petit, il faut toujours compter avec l’existence
de cette concurrence qui est l’affût de la moindre faille pour
augmenter sa part de marché, lancer son nouveau produit…
Aussi faut-il dresser la liste de tous les éléments qu’il est
site web dynamique
indispensable de connaître pour y trouver sa place, ou

mieux encore, pour anticiper en se plaçant le premier
chaque fois que c’est possible.
L’analyse de la concurrence porte sur tous les aspects qui
font VOTRE différence
L’analyse concurrentielle a pour objectif de comparer
votre site avec celui des autres compétiteurs intervenant
dans votre domaine.
 La page d’accueil : structure et contenus mis en avant
 Ergonomie : les outils de navigation privilégiés
 Les meilleurs outils de fidélisation utilisés
 Les processus d’avant-vente et de commande les plus
aboutis
 Les contenus et les services à valeur ajoutée
 Le niveau d’interactivité et la qualité de la relation
clients-prospects
 Méfiez-Vous de la concurrence Indirecte :
La concurrence n’est pas seulement directe, elle est de

substitution. Que ce soit pour des raisons de prix, de
commodité, de mode, ou encore technologiques, la
clientèle est de moins en moins fidèle et peut se tourner
vers d’autres produits. Votre entreprise doit donc s’efforcer
de déceler tous les substituts possibles à ses produits et en
étudier ensuite les fournisseurs avec la même minutie que
ses concurrents directs, car ils sont potentiellement tout
aussi dangereux.
 Le rapport d’analyse de la concurrence :
D’une trentaine de pages, il comprend un compte-rendu
synthétique des pratiques Web dans votre secteur, une
analyse détaillée de l’ensemble des critères étudiés et une
série de recommandations basées sur les meilleures
pratiques observées

site web dynamique
 Le site internet dynamique face à la concurrence :

Comment savoir si ce type de
site correspond exactement à ce que je souhaite pour mon
projet ? Il existe tellement de possibilités, qu'il devient vite
contraignant d'arriver à choisir. Il faut avant tout savoir où
se situe votre business et ce dont vous avez besoin. Si vous
avez dans l'idée de publier de nombreux contenus (textes,
images, vidéos, etc...) alors il vous faudra choisir un site
dynamique.
 Les principales caractéristiques d'un site internet

dynamique :
1-Peu gourmand en ressource : Le contenu étant
stocké dans une base de données, le site sera donc plus
léger et moins consommateur de volume de stockage
2-Plus rapide : Un site dynamique se chargera plus

vite. Son architecture repose sur des gabarits. De ce fait
une fois le gabarit chargé une première fois par un
navigateur, le site sera plus rapide à s'afficher
3-Un back office : Terme qui désigne une interface qui

permet de « piloter » un site internet sans avoir besoin
de connaissance technique particulières
4-Une mise à jour simplifiée : Le contenu stockée

dans une base, sera plus facile à modifier que s'il est
intégré « en dur » directement dans des centaines de
pages HTML. Vous faites la modification une seule fois et
elle s'applique à toute les pages.
5- Un gain de temps : Le temps que vous gagnez

grâce à un site dynamique, vous pouvez le consacrer à

site web dynamique
d'autres activités
6- Mutualisation des efforts : Si vous êtes plusieurs

personnes à gérer le site, vous avez autant d'accès au
back office. Fini le temps où il fallait editer une page
depuis un ftp pour la modifier et dont la mise à jour
pouvait être perdue car entre temps une autre personne
avant éditer elle aussi le même fichier.
7- L'aspect financier : Un site dynamique permet une

économie très appréciable en termes de coûts de
production. Moins de coût vous permet d'attribuer cette
économie à d'autres secteurs d'activités.
8- Un serveur privé : Un site dynamique s'appuie sur

une architecture solide,mais également sur un espace
de stockage personnalisé. Un serveur de données dédié
permettra au site une vitesse d'affichage encore plus
rapide.
9-Amélioration du système de cache : Sur le web,

les sites demandent beaucoup de ressources pour être
affiché. Réduire ce temps permet d'accélérer l'affichage
des pages web et améliore grandement le succès d'un
site.
10-Les modules intégrés : Un site dynamique ne

serait rien sans les nombreux modules qui
l'accompagnent : formulaire intelligent, rappel
automatique, liaison avec un CRM ou logiciel de
compta... les possibilités sont nombreuses.
5. L’Arborescence :

site web dynamique
L’arborescence d’un site Internet permet d’en définir

la structure globale. C’est le premier pas pour architecturer
toutes les informations que vous avez commencé à traiter
jusqu’alors. L’arborescence d’un site Internet est une simple
retranscription des différentes pages et sections d’un site
internet, de manière structurée, un peu à la manière d’un arbre
généalogique. Si vous pouvez réaliser une arborescence à l’aide
d’un logiciel comme Microsoft PowerPoint, il en existe d’autres,
notamment Xmind (gratuit, en anglais) que nous utilisons pour
des projets de création de site dynamique plus conséquent…
 Structurer les pages du site Internet :
Sans définir à ce stade le menu de navigation, il
s’agit de mettre en ordre le puzzle des thèmes que vous
aurez prédéfini à l’étape précédente, et de les transcrire
sous forme de pages liées les unes aux autres.
Généralement, on garde l’idée d’avoir une
thématique par page, sauf pour la page d’accueil du
site Internet qui constituera un résumé de tous vos
contenus.
Pour un site Internet de quelques pages (type site
vitrine), la définition de l’arborescence du site sera
simple et rapide à effectuer. Pour un site plus
volumineux, il faudra sans doute y consacrer un peu
plus de temps.

site web dynamique
 Exemple d’arborescence d’un site Internet :
1.
Il est possible de bien administrer un site web même si

on ne dispose pas d’utilitaire
Spécifique qui puisse prendre cette administration en
charge. Il convient juste de préparer sur son disque dure une
arborescence permettant de gérer la répartition des
différentes pages HTML et leurs implications les unes dans
les autres de même que les éléments d’enrichissement du
portail (images, vidéo, son etc.)
Cette arborescence doit être :
 Le reflet de la répartition thématique : L’organisation
des fichiers et des répertoires
Étant guidée par l’organisation de l’information.
 Egalement le schéma de la répartition des tâches de
maintenance du portail entre les différents intervenants
: gestion des droits d’accès aux différents éléments de
l’arborescence.
Les noms des répertoires et des fichiers composent
l’URL d’une page :
 Il convient alors de les rendre intelligibles en choisissant
des noms informatifs.

site web dynamique
 Veiller à ce que l’URL soit définitive en évitant de

renommer ou de déplacer des
Fichiers et des répertoires.
 Rendre l’URL le plus court possible et mettre une
redirection en cas de disparition des
URL pour ne pas désorienter les usagers.
 Organisation de la navigation
Les visiteurs de votre portail à l’image de tous les
internautes ne lisent pas l’intégralité des pages. Ils utilisent
le plus souvent les liens pour naviguer entre les pages de
votre portail et la lecture est quatre fois plus lente sur un
support électronique que sur un support papier.
- Le contenu des pages doit alors permettre une lecture
transversale
- Aussi l’interface de navigation doit permettre à l’usager de
pouvoir à tout moment
Savoir : Où il est ; où est-il allé ; où peut-il aller.
Une visualisation globale de votre portail est
indispensable pour la construction cohérente et la clarté des
liens. On dessine l'organigramme du site en créant tous les
liens logiques, en évitant les culs-de-sac et les dangers de
récursivité.
C'est par une structuration simple et efficace du portail
que l’on permet à l'usager de se créer un modèle mental de
l'organisation de l'information et qu'on facilite la recherche
ainsi que l'accès à l'information.
Le premier menu devrait regrouper les blocs
d'information sous un maximum de cinq à sept unités, car la
mémoire à court terme de la majorité des individus ne peut
retenir plus d'information. Il est recommandé de structurer
l'accès à l'information en utilisant un maximum de trois
niveaux de sous-menus. Lorsque cela est possible, il faut
intégrer un outil de recherche dans les sites qui possèdent un
très gros volume de pages-écrans.

site web dynamique
Dans certains portails, le sommaire, ou un plan du site,

sera utilisé pour permettre à l'utilisateur de voir la
représentation mentale du site et faciliter la recherche
d'informations.
Voici quelques exemples de structures d'information :
1.mode linéaire :
Le mode linéaire observe une logique de suite, du récit
au classement alphabétique ou chronologique.
Les pages sont liées entre elles par des boutons
"suivant" ou "précédent".
C'est le modèle le moins intéressant sur le Web, car il
utilise peu les Fonctionnalités de l'hypertexte. La visite est
monotone, parfois pénible.
Mode linéaire avec choix
2.Mode hiérarchique :
Le mode hiérarchique consiste à appliquer une
démarche hiérarchique ou par menu. La plupart des portails
documentaires sont de ce type. Ce mode est simple à mettre
en œuvre. La navigation y est intuitive, l'utilisateur comprend
bien la structure du site car il est habitué à ce genre
d'organisation.
site web dynamique
Cette organisation hiérarchisée nécessite cependant un

travail d'analyse préalable du contenu (notions pré-requises,
doublons d'information...) car cette structure hiérarchisée ne
sera efficiente que si l'information disponible est clairement
organisée.
Attention aux menus "fourre-tout" ou aux découpages

trop profonds de l'information.
3.Mode en toile d'araignée :

site web dynamique
Ce mode est un réseau de documents peu ou pas

structurés reliés entre eux par des liens hypertextes.
L'utilisateur navigue d'un document à l'autre en cheminant
au hasard des liens.
Le mode en toile d'araignée ne possède aucune
structure, l'entrée peut se faire par n'importe quel bout, il n'y
a pas de "vue d'ensemble". C'est l'inconvénient majeur car
l'utilisateur peut se perdre ou manquer certaines parties.
6. La charte graphique :

site web dynamique
Une charte graphique est un terme venant du mot latin

charta qui signifie « papier ou lettre », en français charta a pris
le sens de « loi, règle fondamentale ».
L’élaboration de la charte graphique (ou design) est une

étape très importante dans la conception d’un site Web. Il s’agit
de concevoir la maquette qui va définir l’aspect global du site.
En gros, on détermine le style, les éléments graphiques et leur
positionnement (images, bannières, logo, etc.), les couleurs, les
formes et les polices de caractère du site Web.
 À quoi ça sert ?:
Une charte graphique, ça sert en gros à ce que le client
sache qui vous êtes en un seul coup d’œil.
Une charte graphique sert donc à créer une identité
visuelle pour une entreprise, une marque, un produit ou
encore un site Web.
Cette identité visuelle est en réalité une identité
graphique, car elle est générée par des couleurs, des
polices de caractère spécifiques, un logo ou encore un
agencement de tout ce qui précède.
Voici quelques exemples de logos qui créent une
identité visuelle pour une entreprise ou un produit
(personnage célèbre, film, marque de commerce, etc.).

site web dynamique
La police utilisée pour ces logos ressemble à une

police classique (arial narrow pour Youtube et Arial Black
pour IKEA par exemple), mais c’est l’association des
couleurs qui fait penser à la marque.
D’ailleurs, vous pouvez faire un test simple :
remplacez le nom de la marque par n’importe quel autre
texte et l’association des couleurs vous fera malgré tout
penser à la marque d’origine.
Et voici le dernier cas de figure, c’est-à-dire l’identité

graphique créée par un agencement de plusieurs critères
(association couleur/police ou couleur/logo par exemple).
Évidemment, dans le cas qui nous intéresse (la

conception de la charte graphique d’un site Web, il ne
faut pas juste se concentrer sur la création du logo.
Dans le cas d’un site internet, il s’agit de créer une
homogénéité visuelle (composée d’images, de couleurs,
de formes et… bien sûr d’un logo) qui se retrouvera de
page en page et qui permettra aux consommateurs de
répondre d’un seul coup d’œil aux questions suivantes :
• À qui appartient ce site ? À qui ai-je affaire ?
• De quoi traite ce site ? De quoi ça parle ?
• Quelles informations me donne ce site ? Pourquoi
suis-je là ?

site web dynamique
Donc, concrètement, il va falloir créer le logo, certes,

mais aussi choisir les couleurs du site, les polices
utilisées, la forme des menus.
Voici quelques exemples de chartes graphiques pour
un site internet :
 OBJECTIFS D’UNE CHARTE GRAPHIQUE :

Le but d’une charte graphique est de vous assurer
une cohérence, une harmonisation dans tous vos
supports de communication, qu’il s’agisse :
 d’un support papier (cartes de visite, flyers, affiche,
enveloppes, papier à entête… soit le package
classique d’une bonne agence de graphisme),
 d’un support physique (enseigne, vitrine, bâche,
véhicule, stand de présentation, matériel marketing,
T-shirt, etc.),
 d’un support virtuel (présentation électronique,
vidéo, multimédia, site web, email, etc.)
 ou de tout ce qui pourra surgir comme nouvelle
création graphique !

site web dynamique
 Ceci concerne tant votre entreprise et son personnel

que vos clients et fournisseurs. Tout document qui
provient de votre entreprise doit pouvoir être
identifié au premier coup d’œil.
 Si votre charte graphique est respectée, votre image
sera toujours la même quel que soit le support.
Regardez le nombre de sociétés qui ont une identité
graphique forte ! C’est le résultat d’une bonne charte
graphique utilisée et respectée dans toutes leurs
communications.
 COMPOSANTES D’UNE CHARTE GRAPHIQUE :

Que trouve-t-on exactement dans cette charte
graphique ? On sait maintenant que c’est un ensemble de
règles, mais qui portent sur quoi ?
 LE LOGO :
Votre logo est la clef de voûte de votre identité
graphique !
Vous avez certainement déjà vu des présentations ou
des documents où un logo est étiré, déformé,
minuscule, limite méconnaissable ou illisible… c’est
pour éviter ça que la charte graphique va définir les
conditions de son utilisation : ses proportions, sa
taille minimum et son positionnement par rapport
aux autres éléments (texte, titres, marges, etc.).
Le logo forme avec le nom de la marque
les éléments principaux de l’identité visuelle d’une
organisation ou d’un produit/service.Créé sur le long
terme, il doit être défini de manière précise au sein
de la charte graphique, avec sa Baseline s’il en
possède une et dans ses versions traduites s’il existe
site web dynamique
en plusieurs langues. En effet, son utilisation et sa

forme doivent toujours être cohérentes dans le
temps et selon les supports afin de garder une
stabilité visuelle et ainsi asseoir la visibilité et la
notoriété de la marque.
Voici les caractéristiques qui doivent être
déterminées et inscrites dans la charte graphique :
 Typographies utilisées au sein même du logo
(quand il s’agit d’un logo typographique non
schématique) ou dans son éventuelle baseline. Il
est utile de mentionner si ces typographies sont
libres de droits ou non afin que tout utilisateur
de la charte puisse se procurer facilement les
polices concernées, en toute connaissance de
cause.
 Couleurs utilisées pour le logo, en précisant
bien les équivalences des différents modes
colorimétriques (CMJN, RVB, LAB, Pantone, #
hexadécimal, etc.). Suivant les utilisations et les
supports (web, print, etc.) ce ne sont pas les
mêmes modes qui sont utilisés, il faut donc
prévoir les correspondances de couleur.
Attention tout de même : l’équivalence parfaite
n’existe pas !
Déclinaisons colorimétriques du logo en 1 ou 2

couleurs (pour les marquages d’objets ou les
site web dynamique
télécopies par exemple) ou en niveaux de gris

(pour les impressions en noir), etc.
Règles d’utilisation du logo et de sa Baseline :

sa construction, les usages sur des fonds clairs /
foncés / hétérogènes (photographie par
exemple), la taille minimale pour une bonne
visibilité, la zone d’exclusion ou espace protégé /
espace de dégagement (marge autour du logo à
respecter impérativement).
Exemples d’utilisations interdites :

modification de la construction du logo,
changement de couleurs, agrandissement sans
respect des proportions, etc.
 LA TYPOGRAPHIE (POLICE D’ÉCRITURE) :

La charte définit les règles de mise en page et
d’utilisation de la typographie dans un document.
Le caractère et la personnalité d’une ou plusieurs
typographies apportent une signification et
peuvent changer la vision et la portée d’un texte
en permettant de créer différents niveaux de
textes tout en assurant un confort de lecture. En
site web dynamique
plus bien sûr de participer à la cohérence générale

de la communication tant au sein de votre
entreprise qu’en dehors.
Cette partie doit mentionner les typographies
qui sont utilisées pour la rédaction de tous les
supports de communication. Elles peuvent être
totalement différentes de la typographie présente
dans le logo. Là encore, il est utile de préciser si
les typographies sont libres de droits ou non.
Prévoir des choix de substitution plus
« classiques » est également un réel plus.
En effet certaines polices ne sont pas installées
sur tous les postes, d’autres ne sont pas
disponibles pour certains usages (textes des
clients de messagerie mail par exemple). Avec une
correspondance typographique définie, les
communications conservent tout de même une
certaine cohérence : l’utilisation d’Arial à la place
d’Helvetica est un exemple courant.
 LES COULEURS :
Le choix des couleurs doit être limité pour
permettre une meilleure mémorisation et une
distinction rapide. Si vous devez imprimer votre
logo sur une surface colorée (voiture, farde
plastique, etc.), ce qui est permis et ce qui ne l’est
pas sera impérativement stipulé dans la charte
graphique… certaines couleurs ne sont pas
souhaitables avec votre logo. L’utilisation de
site web dynamique
vos signes graphiques sera également spécifiée

pour le noir et blanc (photocopies par exemple).
 Le nuancier des couleurs :
Cette partie de la charte graphique référence
toutes les couleurs susceptibles d’être souvent
utilisées, faisant partie de l’identité de la marque /
entreprise. Cela permet à chaque collaborateur
et/ou prestataire de retrouver facilement les
bonnes références colorimétriques en gardant ainsi
une cohérence dans la création des divers supports
de communication internes ou externes.
Une charte détaillée précisera également ici
les équivalences CMJN, RVB, LAB, Pantone, #
hexadécimal, etc. de chaque nuance, suivant les
besoins de l’entreprise en termes d’utilisation et de
finalité des supports.
La charte graphique symbolise l'harmonie du
site dans ses couleurs. Il est important pour le
visuel que tous les éléments graphiques
constituant le site soient en adéquation.
 La symbolique des couleurs :
Chaque couleur a une valeur symbolique.
Cette valeur est utilisée volontairement ou
inconsciemment.
Cette valeur n'est pas figée puisqu'on a
constaté qu'elle variait selon les époques et
les civilisations.
Parfois la couleur s'impose d'elle-même par
le produit ou le matériel que fournit
l'entreprise.
Parfois elle est en adéquation avec la
personnalité du chef d'entreprise qui aura
site web dynamique
choisi volontairement une couleur par choix

de goût conscient ou inconscient.
ROUGE : Force - Passion - Puissance -
Interdiction - Danger - Virilité - Courage -
Action – Force.
BLEU : Paix - Vertu - Immatérialité -
Méditation - Sagesse - Rêverie - Confiance -
Bonté - Calme - Sécurité - Foi - Féminité
VERT : Espérance - Nature - Immortalité -
Repos - Foi - Jeunesse - Fécondité -
Satisfaction – Calme.
JAUNE : Science - Conscience - Idéalisme -
Action - Luminosité - Orgueil - Jalousie -
Calme - Sécurité
BLANC : Pureté - Innocence - Chasteté -
Richesse - Silence
OR / ARGENT : Immortalité - Richesse -
Gloire (or) - Respect (argent) - Dignité
(argent).
ORANGE : Energie - Ambition -
Enthousiasme - Imagination - Richesse –
Honneur.
VIOLET : Politesse - Jalousie - Mystère -
Spiritualité - Mélancolie - Tristesse -
Modestie - Religion Inconscient - Secret
Ténèbres - Mort - Piété – Noblesse.
GRIS : Sobriété - Tristesse - Modernisme -
Peur – Monotonie.
NOIR : Mort - Deuil - Nuit - Mystère -
Monotonie - Tristesse - Détresse - Angoisse
- Noblesse - Distinction - Élégance – Silence
(Source de la symbolique des couleurs :

site web dynamique
Merci à CRIM formation - Ecole

polytechnique de Montréal).
La charte graphique est représentée au travers
du graphisme du site internet. (Colorimétrie
appliquée au design).
Une fois les couleurs représentant l'entreprise
connues ou définies il faudra concevoir tout le site
en tenant compte de cette charte.
Bien souvent les entreprises ou les institutions ont
déjà avant la création de leur site internet définie
cette charte.
 ELÉMENTS GRAPHIQUES / ICÔNES :

Certaines sociétés possèdent une mascotte ou
des éléments graphiques différents de leur logo,
par exemple pour créer une identité pour chaque
produit. On doit cependant chaque fois y retrouver
votre société.
 UTILISATION DES IMAGES, ILLUSTRATIONS,

PHOTOS :
Certaines images pourront être sélectionnées
dans la charte et le fait de les utiliser régulièrement
les associera au bout d’un moment avec votre
société de manière systématique.
 RÈGLES D’INSERTION DE CES ÉLÉMENTS SUR CHAQUE
SUPPORT :

site web dynamique
Il est important de conserver toujours les mêmes rapports de

proportions sous peine de déformer les éléments graphiques.
On définira dès lors les règles d’utilisation comme par exemple
les marges nécessaires dans un document, les espaces entre le
logo et le texte, etc.
Il n’y a pas de règle précise pour élaborer une charte
graphique, car aucune ne se ressemble ! Et pour cause, tous les
sites internet sont différents les uns des autres ! En revanche, il
y a quelques principes fondamentaux à respecter.
Avant tout, une charte graphique doit être cohérente et
donner une certaine homogénéité. Si vous voulez que le client
se souvienne de vous, pas question de changer les couleurs et
les logos à chaque page du site. Vous devez donner une
identité au site, c’est-à-dire lui créer un caractère permanent et
stable.
 Le choix du thème :
Et c’est là que la tempête d’idées que vous avez
préalablement réalisée va vous être utile.
Vous ne l’avez pas faite ? Alors… Où sont vos mots
clés ? Vos associations d’idées ? Eh bien voilà ! Vous
venez de tomber dans le premier piège !
Prenons deux exemples très pertinents, tirés du
Site du Zéro :
a. Supposons que vous devez réaliser un site
internet dont le thème serait la forêt. Qu’est-ce
qui caractérise la forêt selon vous ? Comment
peut-on graphiquement recréer cet univers pour
que, d’un seul coup d’œil, le visiteur sache de
quoi parle le site ? On peut penser au bois, à la
texture boisée, à la couleur verte, à la mousse
au pied des arbres, aux feuilles, à l’eau, à la
terre… Et si le site parle plus précisément de la
transformation du bois, on rajoutera des images
site web dynamique
de planches sciées ou de copeaux, de produits

transformés, etc. Les voilà nos fameux mots clés
et nos fameuses couleurs que nous avons définis
dans notre tempête d’idées !
b. Vous devez à présent réaliser un site internet
qui parle des anges… On ne sait pas encore
quelles couleurs vont être utilisées, mais on
imagine déjà que ce seront des tons clairs ou
pastels (blanc, rosé, bleuté, etc.). Il va aussi
falloir prévoir sans doute des nuages, des ailes
ou
des plumes, des robes blanches, des étoiles, des
auréoles, ou n’importe quoi qui peut se rapporter
à ce thème.
C’est pour cela que bien souvent, il est utile
d’aller visiter des sites internet qui parlent du
même thème, pour vous donner de l’inspiration.
 Le choix des couleurs :
Voici trois règles importantes à respecter concernant
le choix des couleurs :
• Elles doivent se rapporter au thème.
• Elles doivent bien s’agencer entre elles.
• Elles doivent être agréables à l’œil, du point de
vue de la visibilité (ni trop lumineuses, ni trop
foncées).
Il suffira ensuite de déterminer les couleurs
principales (celles qui sautent aux yeux en premier
lorsque le site s’affiche) et les couleurs secondaires
(couleur de la police, des titres, etc.).
 Définir la typographie (la police de
caractère) :
La typographie est très importante, car elle donne
d’emblée une certaine image du produit.

site web dynamique
Il faut aussi conserver une certaine homogénéité

dans vos choix de police ; une police pour les titres,
une pour les sous-titres, une pour le texte des
articles… Et c’est tout ! Éventuellement, votre logo
pourra lui aussi avoir sa propre police ou être
composé d’une association de deux polices
différentes.
Bref, si vous avez eu le réflexe de compter, vous
verrez qu’une charte graphique de site internet doit
contenir entre 2 et 5 polices… Pas plus.
 Le logo :
On va souvent commencer par réaliser le logo avant
de travailler sur le reste de la charte graphique.
Alors pourquoi diable ce chapitre arrive-t-il presque
en dernier ?
Et bien parce que pour réaliser un logo, il va falloir
que vous vous serviez de tous les enseignements
qui vous ont été dispensés ci-dessus !
Une fois que votre logo sera réalisé, vous pourrez
vous appuyer sur son concept et sur ses couleurs
pour décliner votre charte graphique au complet.
Le logo est un élément majeur d’une charte
graphique. Le résultat final est bien souvent à la
hauteur de la créativité de son auteur.
Retenez seulement deux mots : SIMPLICITÉ et
EFFICACITÉ.
 La disposition des éléments graphiques :
Il s’agit maintenant de décider de l’agencement
des différents composants du site. Dans les cas les

site web dynamique
plus classiques, les sites internet sont composés de

quatre parties principales :
• La bannière (aussi appelée « en-tête » ou «
header »). C’est le cœur graphique de notre design.
C'est elle qui donne le ton, c'est elle qui joue le
premier rôle en termes d'esthétisme.
Elle est l'emblème de la charte graphique.
• Le menu. Le menu va permettre de choisir le
contenu à afficher. Par exemple, on va pouvoir y
mettre différentes sections du site en leur donnant
des noms évocateurs comme "Page d'accueil",
"Contact" ou encore "Qui sommes-nous ?".
• Le corps. Dans le corps, on affiche tout le contenu
de la page. Si j'ai cliqué, par exemple, sur le bouton
"Contact" du menu, le corps va afficher des
coordonnées, une carte, un plan, un formulaire de
contact, etc.
• Le pied de page (aussi appelé « footer »). On
utilise le pied de page pour afficher des choses de
manière moins apparentes. Souvent, on peut lire
dans les pieds de page les "copyrights" des auteurs
du site, leurs noms, les mentions légales de
l'entreprise éditrice du site, etc.
Rien n’empêche ensuite de prendre ces quatre
composantes principales et de décliner la
présentation du site sous plusieurs formes. À vous
de choisir !

site web dynamique
 Les étapes gagnantes :

1. Une tempête d’idées qui permettra de bien cerner le
thème du site internet.
2. La création du logo.
3. La disposition des éléments graphiques (maquette papier).
4. Le choix des couleurs du site (entre 3 et 5).
5. Le choix des polices du site.
6. La réalisation de la maquette sur Photoshop (assemblage

des différents éléments).
 La création de la bannière (qui en général contient le

logo).
 La création des menus.
 La simulation d’un contenu.
 La création d’un pied de page.

site web dynamique
 Exemple de création d’une charte graphique, étape

par étape :
Le défi : vous êtes passionné d'informatique et souhaitez
partager vos connaissances en installant sur la toile un site
internet type "blog".
1. La tempête d’idées :
La tempête d’idées va nous servir à définir le thème du

site internet. On peut la modéliser grâce à une carte
heuristique (ou carte conceptuelle). On note les mots et
les idées en les regroupant par sous thème.
Par exemple, la carte a été réalisée avec Freeman, un

petit gratuiciel que vous pouvez facilement télécharger
sur Internet.
 Le design du site :
site web dynamique
Un exemple parmi tant d’autres ! Mais vous

remarquerez que beaucoup de blogues sont conçus
sur ce modèle. Nous avons donc mieux choisir un
classique.
Idéalement, cette maquette doit être réalisée avec
un papier et un crayon…
Il faut à présent habiller cette maquette et on
commence traditionnellement par le haut.
2.Le logo :
Dans ce cas précis, nous allons traiter les deux

ensemble, car le logo va s’intégrer à la bannière.
Rassurez-vous, point de graphisme compliqué. Épuré,

simple et efficace, voici les trois qualités Principales d’un

site web dynamique
bon logo, surtout pour un sujet comme l’informatique. Il

faut rester dans le thème et il faut donner une idée de
modernité.
Notre logo sera donc composé d’une simple phrase

accrocheuse avec une typographie relativement
classique. On rajoutera cependant une lettrine pour
insérer un élément graphique intéressant. On va aussi
attirer l’œil du lecteur avec un joli et lumineux vert
pomme. Cette « folie » sera la seule que nous allons
nous permettre, car il ne s’agit pas de faire fuir
l’internaute avec un amalgame de couleurs trop
fluorescentes. Le reste du site sera donc un modèle de
sobriété.
Couleurs majoritaires : noir et beige (sobre et

moderne).
Couleurs secondaires : vert, marron et blanc (le

blanc sera utilisé pour écrire sur le noir, le marron
pourra être utilisé pour écrire sur le beige par
exemple).

site web dynamique
3.La bannière
Tout d’abord, il va falloir définir sa taille.
Mettez-vous dans la peau de vos internautes.
Beaucoup d’écrans sont encore en résolution 1024px X
768px. Vous ne pouvez pas ignorer ce fait.
Si votre bannière est plus large que 1024px, les
visiteurs ne la verront pas en entier, ils devront utiliser
les barres de navigation pour aller d’un bout à l’autre.
Allons-y donc pour une taille de 950px de large et…

150px de haut.
Nouveau fichier de 950x150 (résolution de 72 ppp).
 Outil pot de peinture pour colorier en noir (ou

bien outil dégradé pour passer du noir au gris
très foncé).
 Agrandissement de la zone de travail de 20px
vers le haut.
 Outil pot de peinture pour remplir la zone avec la

couleur beige.
 Intégration du logo à gauche. Ajustement de la

taille et de la position du calque.
 Intégration d’une photo de clavier d’ordinateur.

Ajustement de la taille et de la position du
site web dynamique
calque. Mode de fusion luminosité. Découpage

d’une partie du calque avec l’outil rectangle de
sélection (contour progressif de 30px).
Nouveau calque par copier (on masque ensuite

l’ancien calque). Opacité du calque réglée à 30%.
4. Ajout de la barre de navigation :
 Outil rectangle. Couleur blanche. Effet sur le calque

(incrustation en dégradé du blanc au gris clair). Duplication
du calque.
 Outil trait. Duplication du calque pour garder la même taille.
Changer la couleur de chaque trait par la suite.
 Ajout des calques de texte. Police Verdana (voir carte
conceptuelle).

site web dynamique
5.Le menu vertical :

site web dynamique
6.Le corps :

site web dynamique
7.Le pied de page :

site web dynamique
7. Etude des technologies existantes :

Après la conception Web, vient la réalisation qui est l'étape
de concrétisation technique du projet client. C'est la phase de
développement pur, celle où il faut produire le code nécessaire
aux besoins du site. C'est à ce moment que les maquettes
graphiques sont transformées en pages HTML. Pour découvrir
le monde web il faut savoir c’est quoi Web ? C’est quoi une
page Web dynamique ? Quelles sont les technologies utilisées
pour la réalisation d’une page Web dynamique ?
1.Introduction au World Wide Web :
Le web, C'est le service de consultation de documents
sur Internet, le plus connu, le plus récent et aujourd'hui le
plus utilisé. C'est le service d'Internet qui a contribué le
plus à sa popularité.

site web dynamique
Le web a été inventé plusieurs années après Internet,

mais c'est lui qui a contribué à l'explosion de l'utilisation
d'Internet par le grand public, grâce à sa facilité d'emploi.
Depuis, le Web est fréquemment confondu avec Internet
alors qu'il n'est en réalité qu'un de ses services.
Le principe de web repose sur l'utilisation d'hyperliens
pour naviguer entre des documents (appelés «pages
web») grâce à un logiciel appelé. Une page web est ainsi
un simple fichier texte écrit dans un langage de
description (appelé HTML), permettant de décrire la mise
en page du document et d'inclure des éléments
graphiques ou bien des liens vers d'autres documents à
l'aide de balises.
Au-delà des liens reliant des documents formatés, le
web prend tout son sens avec le protocole HTTP
permettant de lier des documents hébergés par des
ordinateurs distants (appelés serveurs web, par
opposition au client que représente le navigateur). Sur
Internet les documents sont ainsi repérés par une adresse
unique, appelée URL, permettant de localiser une
ressource sur n'importe quel serveur du réseau internet.
2.Qu'est-ce qu'un site web ?:
Un site web est un ensemble de fichiers HTML stockés
sur un ordinateur connecté en permanence à internet et
hébergeant les pages web (serveur web).
Un site web est habituellement architecturé autour
d'une page centrale, appelée «page d'accueil» et
proposant des liens vers un ensemble d'autres pages
hébergées sur le même serveur, et parfois des liens dits
«externes», c'est-à-dire de pages hébergées par un autre
serveur.
site web dynamique
3.Des pages statiques vers les pages dynamiques :

L'explosion de l'Internet, vers 1995, a vu la
multiplication des sites dits "cartes de visite". Ces sites se
contentaient pour la plupart de transposer au mieux sur
le web les présentations classiques, sur papier, de
l'entreprise.
Ce type de site, construit directement en langage
html, a pour défaut majeur de n'offrir qu'une et une seule
présentation, sans aucune possibilité de personnalisation
et avec une interactivité limitée au strict minimum. Cette
limitation est due à la nature même du html, langage de
description des données dans lequel le contenu et sa
présentation sont indissociables. C'est pour cela que ces
pages sont dites statiques (voir Figure 6). Si l'on veut
modifier le design d'un site ainsi réalisé, il faudra changer
une à une toutes les pages qui le composent, avec un
éditeur html.
Si cette technique peut suffire pour des sites web de
petite taille, au contenu permanent ou rarement mis à
jour, elle est par contre très peu adaptée pour des sites
dont les informations font l'objet de modifications
fréquentes ou qui font appel à des processus complexes,
comme un catalogue de produits, un journal d'information
ou, de manière générale toute application e-business.

site web dynamique
Figure 6 : la requête d’une page statique
3.1 Qu'est-ce qu'une page dynamique :

Le principe d'une page dynamique est d'être
construit à la demande (à la volée) par le serveur (côté
serveur), en fonction de critères spécifiques. La
présentation et le contenu affichés peuvent ainsi être
personnalisés de manière interactive, en fonction des
produits, des internautes, des langues, etc.
On reconnaît facilement une page dynamique grâce
à l'URL qui s'affiche dans le navigateur web de
l’utilisateur :
 page statique :
http://www.monsite.com/accueil.htm: affiche la
page accueil.htm, stockée telle quelle sur le
serveur,
 page dynamique:
http://www.monsite.com/accueil.aspx?
langue=fr: affiche la page accueil.aspx en
site web dynamique
demandant au serveur d'afficher le contenu de

cette page en français.
Alors que les pages statiques font appel au html,
langage de description de données, les pages
dynamiques sont mises en œuvre grâce à un langage
de programmation. Grâce à lui, on pourra disposer
d'instructions conditionnelles, de boucles et de
fonctions de traitement complexes. Le langage de
programmation variera en fonction de la technologie
retenue (PHP, ASP, Java, etc.).
Le langage de programmation ne remplace pas le
html, mais il en produit. En effet, actuellement, les
navigateurs (browser) ne reconnaissent que ce
standard pour afficher des pages web.
3.2 Le fonctionnement des pages dynamiques :
Pour bien comprendre l'intervention de la
programmation, il faut rappeler rapidement le principe
de fonctionnement d'un serveur web. Lorsque
l'internaute tape l'adresse d'un site dans son browser,
celui-ci envoie une requête au serveur qui héberge ce
site (voir Figure 7). Le serveur transmet alors la page
demandée au browser qui l'affiche.
C'est l'architecture client/serveur : le client, c'est
l'ordinateur et le browser de l'internaute, et le serveur
… c'est le serveur web.
Le serveur web est un ensemble ordinateur/logiciel
paramétré pour pouvoir traiter certains types de pages
et notamment celles qui contiennent des instructions
de programmation. Il reconnaît ces pages grâce à l'URL
qu'il reçoit, effectue les traitements demandés et
site web dynamique
transmet le résultat au format html au browser de

l'internaute.
Cette manière de faire offre deux avantages
majeurs :
 Tous les traitements sont exécutés sur le
serveur, côté serveur, de manière totalement
transparente pour l'internaute. Le résultat
envoyé étant du html standard, on évite tout
problème d'incompatibilité avec le browser,
comme c'est parfois le cas avec des
programmes exécutés côté client (avec le
langage JavaScript par exemple).
 Chaque nouvelle requête reconstruit
systématiquement la page demandée, ce qui
veut dire que l'information transmise est à jour.
Un site dynamique est plus exigeant pour un
serveur Web qu'un site statique. En effet, alors que
pour un site statique le serveur se contente d'afficher
les pages, pour un site dynamique, il doit effectuer
différents traitements et accès à des bases de
données. Ces opérations pèsent sur la performance du
serveur. Toutefois, l'évolution incessante de la
puissance des ordinateurs et des logiciels rend cette
problématique finalement sans objet, sauf pour des
sites de très grand volume.

site web dynamique
Figure 7 : la requête d’une page dynamique
3.3 Le Back Office :

Un site dynamique est "automatiquement" double :
une partie publique vue par les internautes et une
zone d'administration privée protégée par mots de
passe et gérée par un web master comme le montre la
Figure 8.

site web dynamique
Figure 8 : Gestion des pages dynamiques.

4. .NET
Si l'on reprend la brève histoire du développement
web, on pourrait identifier 3 étapes :
 Les sites statiques, développés essentiellement grâce à
des outils de mise en page finalement assez proches
d'un traitement de texte évolué (comme Dreamweaver
ou Frontpage). Beaucoup de métiers liés à la publication
classique (le monde de la prépresse par exemple), se
sont diversifiés en mettant en œuvre des sites web.

site web dynamique
 Les sites dynamiques, développés sur base des

technologies de script côté serveur (ASP, PHP, CFM, JSP,
etc.). Ces technologies ont été mises au point par des
éditeurs connus (Microsoft, Sun) ou issus du monde de
l'Open Source (PHP) pour permettre la mise en œuvre
rapide de sites permettant de se connecter à une base
de données ou d'offrir de l'interactivité au visiteur.
 Les sites dynamiques développés sur base de plate-
forme professionnelles proposées par de grands acteurs
informatiques (IBM, Microsoft, Oracle, Sun, etc.). On
peut considérer qu'il s'agit là d'une sorte de
réappropriation du Web par les grands acteurs
informatiques classiques.
Ce très rapide résumé montre que l'informatique est
revenue en force avec la nécessité pour l'entreprise
d'intégrer l'e-business au sein de son activité globale,
plutôt de le laisser vivre de manière autonome et un peu
anarchique à côté de ses activités traditionnelles.
Cette nécessité d'intégration et de professionnalisme
se concrétise à l'apparition de plate-forme intégrées de
développement dont deux des plus connues sont :
.NET de Microsoft
J2EE de Sun
Dans ce projet, on a travaillé dans l’environnement
Microsoft et avec les technologies fournies par son
plateforme Microsoft .Net.
5. C’est Quoi .Net Framework?:

site web dynamique
En résumé .Net Framework fait une partie de la

plateforme Microsoft.Net et
 .Net Framework + Système d’exploitation Windows =
plateforme Microsoft.Net
 .NET Framework est un environnement de
développement et d’exécution qui permet à
différents langages de programmation et de librairies
de travailler ensemble en toute transparence
(seamlessly) pour créer des applications Windows
plus facile à développer, gérer, déployer et intégrer
avec d’autres systèmes en réseaux . Un kit de
composant qui a pour but de faciliter le
développement des applications Windows, web et
mobile.

site web dynamique
Figure 9 : Fonctionnement du CLI

Le Framework .NET s'appuie sur la norme Common
Language Infrastructure (CLI) qui est indépendante du
langage de programmation utilisé (voir Figure 9). Ainsi
tous les langages compatibles respectant la norme CLI
ont accès à toutes les bibliothèques installées dans
l'environnement d'exécution. La pile de composants de la
Figure 10 nous montre l’évolution du .Net Framework et
les composants qui sont ajoutés à chaque version.

site web dynamique
Figure 10 : Piles de composants du .Net Framework

5.1 ASP.NET :
ASP.NET est un ensemble de technologies de
programmation web créé par Microsoft ASP.NET fait
partie de la plateforme Microsoft .NET et est le
successeur de la technologie Active Server Pages
(ASP).
ASP.net est tout simplement la version .NET de
l'ASP. Auparavant les pages ASP étaient des pages
HTML comportant du code logique écrit dans une
version simplifiée de Visual Basic.

site web dynamique
Désormais les pages ASPx (.net) sont écrites de

manière complètement différente puisqu'elles
s'appuient sur le Framework .NET et la CLR.
Tous les langages supportés par .NET peuvent
servir à l'écriture de pages ASPx.
Les anciennes pages ASP peuvent continuer
d'exister et cohabiter avec les pages ASPX, mais
elles ne bénéficient pas des avancées de .NET. Outre
les langages disponibles, la plus grosse différence
vient du fait que les pages ASP.net sont compilées et
sont donc sous contrôle de la CLR (surveillance de
code, gestion des ressources, ...) La compilation a
lieu lors de la première requête vers la page, d'abord
en code MSIL, puis en code machine. Une fois
compilées, elles sont mises en cache dans la
mémoire du serveur .NET. ce qui garantit de très
bonnes performances.
Les pages ASPx bénéficient également de toutes
les possibilités offertes par les classes de base du
Framework .NET, et aussi de la possibilité d'être
déboguée (exécution pas à pas), de faire des traces,
de gérer les exceptions etc.
5.2 dynamité et Base de données(ADO.NET) :
L'accès aux bases de données est l'une des
fonctions essentielles des pages dynamiques.
Comment publier une base de données sur le web ?
Quels sont les différents types d’accès ? Quels sont
les grands standards ?.

site web dynamique
Pour des applications web et e-business, les bases

de données sont très rapidement devenues
indispensables.
Il est difficilement imaginable aujourd'hui de
réaliser un site web d'envergure sans intégrer les
capacités de stockage et de manipulation des bases
de données.
Ainsi, l'une des fonctions essentielles des pages
dynamiques est de permettre l'accès aux bases de
données afin de publier leur contenu sur le web.
L'émergence des sites dynamiques a d'ailleurs
fortement relancé le marché des bases de données.
ADO.Net est la nouvelle bibliothèque logicielle
d’accès aux données fournie en standard dans le
Framework .Net. C’est un ensemble de classes, de
structures, de types gérant l’accès à des sources de
données. La connexion à une source de données
s’effectue par le biais d’un fournisseur géré comme
OLE DB.
Il y a en fait deux moyens différents d’accéder aux
données. Ils ont tous les deux des qualités et des
défauts.
 Le premier est l’accès grâce à un data Reader. Cet
accès est très rapide mais il ne peut que lire les
données. La connexion à la base est toujours
activée.
 Le deuxième est l’accès grâce à un data Adapter qui
charge un data set. Cet accès est plus lent que le
premier mais permet d’ajouter, de modifier, de
supprimer et de lire les données. Il permet aussi de
site web dynamique
travailler en mode déconnecté de la base donc laisse

l’accès pour d’autres applications plus rapidement.
Il faut noter qu’ASP.Net 4 offre un ensemble de
contrôles “Data” qui facilitent l’accès à la base de
données. Ces contrôles peuvent être configurés
directement pour afficher des informations stockées
sans avoir recours à la programmation.
6. CSS :
Les feuilles de styles (en anglais "Cascading Style
Sheets", abrégé CSS) sont un langage qui permet de
gérer la présentation d'une page Web. Le langage CSS est
une recommandation du World Wide Web Consortium
(W3C), au même titre que HTML ou XML.
Les styles permettent de définir des règles appliquées à
un ou plusieurs documents HTML. Ces règles portent sur
le positionnement des éléments, l'alignement, les polices
de caractères, les couleurs, les marges et espacements,
les bordures, les images de fond, etc.
Le but de CSS est séparer la structure d'un document
HTML et sa présentation. En effet, avec HTML, on peut
définir à la fois la structure (le contenu et la hiérarchie
entre les différentes parties d'un document) et la
présentation. Mais cela pose quelques problèmes. Avec le
couple HTML/CSS, on peut créer des pages web où la
structure du document se trouve dans le fichier HTML
tandis que la présentation se situe dans un fichier CSS.
Avec CSS on peut par exemple définir un ensemble de
règles stylistiques communes à toutes les pages d'un site
internet. Cela facilite ainsi la modification de la
présentation d'un site entier. CSS permet aussi de définir
site web dynamique
des règles différentes pour chaque support d'affichage

(un navigateur classique, une télévision, un support
mobile, un lecteur braille...). CSS permet aussi
d'améliorer l'accessibilité des documents web.
De plus, CSS ajoute des fonctionnalités nouvelles par
rapport à HTML au point de vue du style. En effet, HTML
permet une gestion assez sommaire du style des
documents.
7. JavaScript :
Les technologies XHTML/CSS sont au coeur des
documents hypertextes publiés via HTTP sur le web. La
séparation forme/contenu peut être stricte et l'usage tend
à généraliser l'accessibilité par le respect des
spécifications XHTML 1.1 et CSS 2 issues du W3C.
La conception de documents interactifs doit aussi
intégrer une couche de programmation absente des
technologies précédentes. Le langage JavaScript offre
cette possibilité.
Le JavaScript est souvent utilisé comme un langage de
script côté client. Cela signifie que le code JavaScript est
écrit dans une page XHTML. Quand un navigateur fait une
requête sur
Une page XHTML avec du JavaScript, le script est
envoyé au navigateur qui interprète le code à la
différence d'un code PHP, par ex, qui est interprété par le
serveur.
Le script se situant dans une page XHTML signifie qu'il
peut être vu et copié par celui qui consulte la page. Ceci

site web dynamique
est peut être un souci du point de vue de la sécurité mais

permet de comprendre le code d'autrui et de le réutiliser.
Attention : JavaScript n'est pas Java... Bien que les
noms soient très semblables, le Javascript est
principalement un langage de script à utiliser dans des
pages XHTML, alors que Java est un vrai langage de
programmation qui fait des choses tout à fait différentes
de JavaScript.
Le JavaScript a été développé par Netscape pour le côté
client (dans le navigateur) et pour les scripts côté
serveur. À l'origine le langage s’appelait Live Script, mais
alors qu'il était sur le point de devenir connu Java était
devenu immensément populaire. Au dernier moment
Netscape a changé le nom de son langage de Script en
"JavaScript". Ceci a été fait purement pour des raisons
commerciales.
JavaScript comme Java descendent du C et du C++.
Tous les deux sont orientés objet (bien que ce soit moins
important pour le JavaScript que pour beaucoup d'autres
langages) et ils partagent une syntaxe similaire.
8. Référencement d’un site web :

Le référencement est l'ensemble des activités qui
permettent à un site web d'apparaître dans les premières
pages des moteurs de recherche lorsqu'un internaute effectue
une recherche à partir de quelques mots clés. Ce service a
l'avantage de faire connaître le site aux internautes, d'en
accroître la visibilité et d'en augmenter ainsi le nombre de
prospects.

site web dynamique
Un site web bien conçu doit être visible et surtout générer

du trafic. Pour ce faire, le site doit subir une optimisation de
ses pages pour être positionné sur les requêtes effectuées sur
les moteurs de recherche.
Il faut apprendre à optimiser les zones chaudes de vos pages

et à éviter les obstacles au référencement qui pourront
pénaliser votre site par la suite.
1.Zone chaude de référencement :

 Optimiser ses titres :
En termes de référencement, le critère auquel
les moteurs de recherche apportent le plus
d'importance est le titre. Vous devez donc soigner au
mieux le titre de chacune de vos pages. Chaque page
doit comporter un titre différent au risque de se
retrouver en "Duplicate content" soit du contenu
dupliqué dans les résultats de recherche. Les titres
doivent suivre les règles suivantes :
 Un bon titre doit comporter au maximum 10 mots

(sauf le, la, des, ou, etc..) ou 100 caractères
maximum
 Comporter des mots clés en rapport avec le sujet
traité
 Il ne doit y avoir plus de deux mots clés similaires
dans votre titre et doivent être séparé par 3 mots
environ.
 Un exemple pour un magasin informatique :
Magasin X, vente de consommables pour

imprimantes et de matériels informatiques
high-tech.
site web dynamique
Dans le titre vous pouvez aussi préciser si possible,

le nom de votre entreprise, son activité, sa
localisation ou les services rendus si cela vous parait
nécessaire. N’oubliez pas non plus de donner un
titre différent à chaque page !
Voici maintenant à quoi doit ressembler votre balise
HTML:
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Magasin X, vente de consommables
pour imprimantes et de matériels
informatiques hightech</title>
Remarque importante: Votre balise <title> doit

se trouver le plus haut possible dans le code car
certains logiciels de développement comme
Dreamweaver ou Frontpage ne les place pas
correctement, ce qui peut vous pénalisez dans votre
référencement.
Nota : Lors du référencement de vos pages, si une
de vos pages ne comportent pas de titre, le moteur
affichera l’expression "Untitled" lors des résultats de
recherche, ce qui vous pénalisera fortemant sur
votre classement (regardez sur google le nombre de
page sans titre en tapant dans Google
l’expression intitle:untitled, c' est très affolant !!!) .
Voici des exemples d’expressions à bannir pour
éviter d' être pénalisé par les moteurs:
- Bienvenue
- Bienvenue sur ma page
- Welcome

site web dynamique
- Home
- Index
- Défaut
- etc....
En résumé, éviter les titres trop banal, votre
référencement ne sera que meilleur !!
 Optimiser la zone de texte :

Optimiser un titre d'une page, c'est bien mais ceci
n'est pas suffisant. Quand les moteurs de
recherche indexent vos pages, ils vérifient et lisent la
totalité du texte présent sur les pages. Pour être
crédible, vous devez placer les mots clés les plus
importants le plus près de la balise <body>. Le
moteurs de recherche privilégient les 3 premières
lignes de texte visible plutôt que les dernières lignes
les plus en bas pour leurs critères de référencement :
<html>
<head>
content="text/html; charset=iso-8859-1">
<title>Magasin X, vente de consommables
pour imprimantes et de matériels
informatiques hightech</title>
</head>
<body>
Mettre ici votre texte avec vos mots clés les
plus importants!!
</body>
</head>
Vous devez également mettre en exergue vos mots

clés importants pour permettre une bonne
optimisation de votre page.
site web dynamique
Voici quelques conseils à savoir pour rendre vos

mots clés réactifs :
 Utilisez les balises <h1>Vos mots clés ici</h1>,
<h2>Vos mots clés ici</h2> etc... pour faire
ressortir vos titres de paragraphe (très apprécié
des moteurs).
 Mettre en valeur vos mots clés avec la
balise <strong>Vos mots clés ici!</strong> ce
qui a pour effet par défaut de mettre en gras votre
expression (cette balise est très appréciée des
moteurs également).
Idem pour la balise <b>Vos mots clés ici !
</b> qui est appréciée, mais moins importante
car elles ne sont pas considérée comme des
balises de style.
Les balises <em>Texte</em> permettent de
passer votre texte en italique. Cette balise est
également appréciée des moteurs de recherche.
Préférer la balise <strong> à la balise <b>. Pour

éviter tous problèmes de "blacklistage", vous ne
devez en aucun cas cacher du texte sur votre page
(exemple : texte blanc ou jaune très clair sur fond
blanc). Les moteurs ne pardonneront pas ce genre
de technique et supprimeront sans préavis votre site
de leur index.
Il existe également un critère que l'on

appel IDM (Indice de mot clé). Cette IDM permet de
calculer en pourcentage l'occurrence d'un mot
présent dans la zone de texte.

site web dynamique
Voici un exemple :
3 mots clés / 100 mots dans la zone de texte = 3%
Certains référenceurs préconisent un IDM maxi de
5% par page, mais cette information est à prendre
avec précaution. Beaucoup de sites utilisent des IDM
atteignant 10 à 15% et sont très bien référencés.
Note très importante : il vaut mieux créer de

petites pages décrivant bien le thème abordé plutôt
que de grands documents parlant de plusieurs
thèmes à la fois. Les moteurs sont très sensibles à
ce sujet et feront donc la différence lors des
résultats de recherche.
 Optimiser les adresses URL des pages :
Les liens internes ou externes sont des critères

important pour les moteurs de recherche. En somme,
les moteurs adorent les mots "cliquables", car vous
pouvez insérer des mots clés à l’intérieur de ces
mêmes liens. Pensez donc à bien soigner vos ancres
pour un maximum de réactivité. Voici comment
optimiser vos liens :
Voici un très bon lien :

<a href="http://www.referencement-
gratuit.com">referencement gratuit</a>
Dans cette exemple les mots "referencement
gratuit" sont très réactifs pour une recherche sur les
moteurs. A noter que le "-" (tiret) et
"_"(l'underscore) dans les adresses sont considérés
pour les moteurs comme un espace. N'hésitez donc
pas à placer un maximum de mots clés entre ces
balises.

site web dynamique
Voici un type de lien moins réactif :

<a
href="www.referencementgratuit.com">referenc
ementgratuit</a>
Ce type de lien est beaucoup moins réactif car il est
très peu probable qu'un internaute tape l’expression
"referencementgratuit" dans une requête. De plus,
les mots clés et le nom de domaine ne comporte aucun
espace et donc les moteurs ne feront pas la différence
entre les termes référencement gratuit et
référencement gratuit. Très récemment, nous avons pu
constater que le moteur de recherche Google peut
faire la différence comme le décrit l’image ci-dessous :
Ce type de lien est à proscrire!!
Voici un très mauvais lien maintenant :

gratuit.com">Cliquez ici</a>
Sur ce type de lien, aucun mots clés ne ressort et donc
l’expression
"Cliquez ici" n'est par conséquent aucunement

réactives !
Ce type de lien est également à proscrire !

site web dynamique
 Les liens dans une images
Vous pouvez insérer des liens internes ou externes

dans une image, les liens seront très bien suivis par les
moteurs.
Voici un exemple :
gratuit.com"><img src="images.jpg"
alt="Référencement gratuit sur les annuaires">
Vous avez remarqué la balise "alt.", celle-ci est très

importante car le texte contenu dans cette balise est
prise en compte par les moteurs de recherche. Les
liens présents dans cette balise ont une certaine
importance pour les moteurs.
A noter : Pendant longtemps, le texte compris dans la

balise "alt" sans effectuer de lien n'était pas pris en
compte. Cependant, Google indexe sans problème le
contenu de la balise "alt" même ci celle-ci n'est pas
issue d'un lien.
Voici un exemple :
<img src="images.jpg" alt="Référencement

gratuit sur les annuaires">
Pour information : l'attribut alt de la

balise <img> (images) est pris en compte par Google
mais pas avec Yahoo et MSN.

site web dynamique
 Les backlinks :
Comme vous avez pu le constater, les moteurs de
recherches attachent une grande importance à la
qualité des URL de lien. Cependant, il existe un autre
critère de référencement qui est basé sur l'échange de
liens. Plus vous effectuerez d'échange de liens avec
d'autres sites internet, plus votre site aura tendance à
monter dans les résultats de recherche.
Pour que les moteurs puissent apporter une

importance sur vos échanges de liens, vous devez
respecter les conditions suivantes :
 Les liens doivent contenir les mots clés essentiels
 Les sites doivent avoir un thème commun entre eux
 Les pages sur lesquels se trouve le lien doivent être

référencées sur les moteurs pour que le lien soit pris
en compte
 Les liens ne doivent pas être cachés
Evitez les pages qui comportent trop de liens

(compter 10 liens externes maxi par page). Si vous
souhaitez connaitre le nombre de backlinks pointant
vers votre site, vous devez utiliser la commande
suivante dans la zone de recherche des moteurs :
Link : www.votre-site.com (sur Google et MSN)

linkdomain:www.google.fr (sur Yahoo)
Certains moteurs comme Google n'affichent pas la

totalité des liens pointant vers votre site, ne soyez
donc pas inquiet. Les autres liens sont bien pris en
compte.

site web dynamique
 Popularité des pages :

La popularité d'une page est complémentaire à la
création des backlinks. Reprenons l'exemple de
Google, celui-ci attribut une note comprise entre 0 et
10 à chaque pages référencées dans son index. Cette
notation est appelé PageRank ou PR pour simplifier.
Le PageRank n'est pas attribué à un site global, mais
à chacune des pages d'un site. Cette note est défini
selon les 2 critères suivants :
 Selon le nombre de pages pointant vers votre site

 Selon le PageRank de ses mêmes pages
Le cheminement de l'attribution du PageRank peut
se résumer de cette façon :

Vous l'aurez compris, plus le PageRank de la page
site web dynamique
pointant vers votre site est fort (à partir de 6/10), plus

la popularité de votre site sera grande.
Attention : On entend souvent dire que les sites à fort

PageRank sont souvent mieux positionnés, ce qui
n'est pas toujours vrai. Le PageRank vous servira
surtout à vous positionner sur des requêtes plus
spécifiques.
Prenez donc bien en compte le PageRank du site

distant avant d'effectuer votre échange de liens.
L'importance des liens est aussi un critère pour une

bonne popularité. Un lien de ce type :
gratuit.com">referencement gratuit</a>
aura un meilleur poids pour la popularité du site
distant et de votre site que le terme
"referencementgratuit" par exemple. Pensez donc bien
à travailler vos liens en plaçant les bons mots clés.
Vérifiez également que vos sites respectifs parlent bien
du même sujet en ayant un thème commun (les
moteurs attachent une grande importance à ce
niveau).
 Choix du nom de domaine :

Le choix d'un nom de domaine peut influer les
résultats de recherche. Lors de requêtes, nous pouvons
constater que beaucoup de nom de domaine intègre
des mots clés ayant un rapport direct avec le site en
lui-même. Voici un exemple sur la
requête référencement (extrait de la 1ère page):

site web dynamique
Force est de constater que le nom de domaine joue un

rôle non négligeable à l'affichage des résultats. Vous
devez donc bien choisir les mots clés les plus parlants
pour présenter votre activité.
Pour les entreprises, Il n'est pas toujours évident de

placer des mots clés représentant au mieux l'activité
de votre entreprise (http://www.nom-de-mon-
entreprise.com). Dans ce cas, il faudra travailler sur
l'optimisation des titres, zone de texte, liens,
popularité, balise méta, etc...
Supposons que notre site test parle

de référencement gratuit, le meilleur choix du nom de
domaine serai le suivant :
www.referencement-gratuit.com
Avec un tel nom de domaine, votre site à vraiment

des chances d'apparaitre bien positionné dans les
site web dynamique
résultats de recherche. A noter que le "-" est utilisé

comme séparateur de mot clé, n'hésitez donc pas à
utiliser cette méthode (ne dépasser pas les 3 ou 4
tirets si possible).
Vous pouvez choisir n'importe quel domaine

(.com, .net, .biz, .fr, etc..), car à l'heure actuelle,
aucune préconisation n'a été formulé à ce sujet. Seule
l'ancienneté du nom de domaine peut effectivement
entrer en ligne de compte (achat du domaine sur
plusieurs années ou ancienneté dans l'index du
moteur).
 Les sous-domaines :
Les sous-domaines ont également un rôle

important dans le monde du référencement. Nous
pouvons ajouter des mots clés et de ce faite améliorer
notre référencement. Nous allons maintenant voir
comment fonctionne les sous-domaines. Repensons
notre exemple de nom de domaine cité ci-dessus :
www.referencement-gratuit.com
Nous souhaitons maintenant créer sur notre site

un blog parlant des méthodes du référencement. Les
fichiers de notre blog seront stockés dans le répertoire
suivant :
www.referencement-gratuit.com/blog/
Plutôt que de fournir cette adresse à nos internautes,

nous allons créer un sous-domaine avec des mots clés
placés à l'intérieur. Voici à quoi va ressembler notre

site web dynamique
URL maintenant :
blog.referencement-gratuit.com
Les moteurs de recherche apprécient beaucoup les

sous-domaines et les indexent sans problèmes (pas de
risque de contenu dupliqué !). Donc si un internaute
effectue une recherche sur l'expression "blog
référencement", votre site à de grande chance de
sortir en tête des résultats.
Pour la création de sous-domaine, les hébergeurs de

site comme OVH, Sivit et bien d'autres encore vous
permettent de créer autant de sous-domaine que vous
le souhaiter (renseigner vous auprès de votre
hébergeur pour la création de ses sous-domaines). En
générale, ceux-ci sont activés sous 24 heures.
 Les balises méta :
Les balises <meta> sont de moins en moins

utilisées de nos jours. Certains moteurs les utilisent
encore mais la plupart des grands moteurs ne le font
plus. Cependant, il ne faut pas non plus les ignorées:
<html>
<head>
content="text/html; charset=windows-1252" />
<title>Referencement-conseil.net - Les balises
méta</title>
<meta name="description"
content="Referencement-conseil.net - Les
balises méta">
<meta name="keywords" content="">
<meta name="rating" content="General">
site web dynamique
<meta name="expires" content="never">

<meta name="language" content="fr">
<meta name="distribution" content="Global">
<meta name="robots" content="index,follow">
<meta name="revisit-after" content="7 days">
<meta name="email"
content="vincentmartia66@hotmail.com">
<meta name="author" content="VINCENT
Martial">
<meta name="publisher" content="VINCENT
Martial">
<meta name="copyright" content="Copyright
©2009 - Referencement Conseil">
Détailles de ces balises:
content="text/html; charset=windows-1252" /> :
Cette balise permet de préciser le codage du texte.
Elle est juste utilisée par les moteurs pour définir le
type de codage. Cette balise doit être renseignée.
<title>Referencement-conseil.net - Les balises

méta</title> : La balise </title> est quant à elle
vitale pour les moteurs. Sans elle, les pages de votre
site porteraient toutes le même nom "untitle"
(duplicate content). Elle ne doit pas dépasser environ
10 mots ou 100 caractères. Cette balise doit se trouver
la plus haute possible dans votre code (au plus proche
de la balise <head> par exemple). Si ce n'est pas le
cas, faites-le !
<meta name="description"
content="Referencement-conseil.net - Les

site web dynamique
balises méta"> : Cette balise permet de résumer en

quelques mots le contenu du site si celui-ci ne
comporte pas de zone de texte (site en Flash ou avec
des frames par exemple). Nous vous conseillons de
remplir cette balise. Elle ne doit pas dépasser environ
20 mots ou 200 caractères. Cette balise doit se trouver
sous la balise <title>.
<meta name="keywords" content="mot clé 1,

mot clé 2, etc..."> : Cette balise ne sert quasiment
plus aux moteurs de recherche (sauf vraiment une
minorité). Il est cependant conseillé de placer quelques
mots clés séparés par une virgule. Placer également
les formes singuliers/pluriels, miniscules/majuscules
des occurrences dans cette balise. Cette balise ne doit
pas dépasser les 1000 caractères soit une centaine de
mots clés.
<meta name="rating" content="General">

<meta name="expires" content="never"> : Ces
balises ne sont aucunement prise en compte par les
moteurs de recherche et sont donc optionnelles.
<meta name="language" content="fr"> : Cette

balise permet de préciser la langue majoritaire du site.
Vous pouvez renseigner cette balise, mais elle n'est
pas obligatoire.
<meta name="distribution" content="Global"> :

Cette balise est optionnelle et n'est pas prise en
compte par les moteurs.
<meta name="robots" content="index,follow"> :

Cette balise doit être renseigné. Elle spécifie si le

site web dynamique
moteur doit ou non indexer la page et suivre les liens

présent sur celle-ci : "index, follow" pour indexer et
suivre les liens "noindex, nofollow" pour ne pas indexer
et suivre les liens de cette page. Si cette balise est
absente, la page sera indexée et les liens seront suivis
par défaut.
<meta name="revisit-after" content="7 days">

<meta name="email"
content="vincentmartia66@hotmail.com">
<meta name="author" content="VINCENT
Martial">
<meta name="publisher" content="VINCENT
Martial">
<meta name="copyright" content="Copyright
©2009 - Referencement Conseil"> : Ces balises
sont optionnelles et ne sont donc pas prise en compte
par les moteurs.
 Attributs alt et title :

Beaucoup de webmaster inclus les balises alt et title
pour l'affichage de texte alternatif en l'absence
d'images et dans les liens textuels de leurs pages.
Voici 2 exemples de code :
<img src="http://www.mon-
site.com/images/logo.gif" alt="Mots clés
ici"> pour une image
<a href="http://www.mon-site.com" title="Mots

clés ici"> pour un lien textuel
Voici les conclusions tirées de cette étude :

site web dynamique
 L'attribut alt de la balise <img> (images) est pris en

compte par Google mais pas avec Yahoo et MSN.
 L'attribut title sur une image ou un lien textuel n'est
pris en compte par aucuns moteurs de recherche.
Cas exceptionnel de l'attribut alt="" dans un

lien image
Nous pouvons rencontrer un deuxième cas de figure

concernant la balise alt="" lorsque celle-ci se retrouve
dans un lien image. Voici un exemple concret:
<a href="http://www.mon-site.com"><img
src="images/logo.gif" alt="Mots clés ici"></a>
A l'heure actuelle et seulement dans ce cas, Google

tiens compte dans ses critères de positionnement de
la balise alt="" si celle-ci se trouve dans un lien image
(version du cache de la page depuis la toolbar Google
-> Version texte seul), mais nous ne savons pas si le
poids de cet élément est primordiale ou non pour le
positionnement d'un site dans les résultats de
recherche.
 Les autres critères du référencement :

Il existe d’autres critères
de référencement susceptible d'avoir une influence
sur l'optimisation des pages.
Voici ces critères :
 Fréquence de mise à jour des pages : Plus les

pages sont mises à jour, plus le site sera considéré
comme réactif.
site web dynamique
 Date de création du document : Plus un

document est ancien dans l'index du moteur, plus
son poids pourrait être considéré comme fort.
 Nombre de pages du site : Plus un site

comportent de pages, plus sa notoriété sera
considéré par le moteurs.
 Validité W3C : Un code HTML propre peut

permettre aux spiders des moteurs de mieux
comprendre votre code. Cette étape n'est pas
obligatoire. Vous pouvez vérifier la validité de votre
site en cliquant sur ce lien: Validateur W3C.
 Notion de Trust Rank: Algorithme permettant

de repérer des tentatives de spam sur Google en
analysant les liens du web tout en partant de pages
de référence choisies par des humains. Très peu
d'informations sont encore disponibles sur cette
méthode.
2. Obstacles au référencement :
 Les pages satellites :
Une page satellite est une page web destinée à

améliorer le positionnement d'un site donné sur les
moteurs de recherche en proposant de nombreux liens
vers le site en question, associées à des combinaisons
de mots clés conçues pour obtenir un score élevé
lorsqu'elles sont évaluées par les algorithmes des
moteurs. Le visiteur qui atterrit sur une telle page se
verra le plus souvent redirigé automatiquement vers la
page du site grâce à une redirection en Javascript par
exemple.

site web dynamique
Depuis 2007, les moteurs de recherche ont mis un

terme à ce type de pratique. Nous déconseillons ce
type de pratique sous risque d'un blacklistage pur et
dur de votre site. Cette page est créée à titre
informatif. Voici un schéma simple du cheminement
d'une page satellite :
En règle générale, les pages satellites sont une liste

de liens cliquables, de zone de texte avec la mise en
exergue des mots clés (balise <h1></h1>,
<strong></strong>, <b></b>) pointant vers un site
bien spécifique. Les pages satellites sont hébergés sur
le même serveur que le site web et sont soumises aux
moteurs pour son référencement.
Lors d'une recherche, c'est cette même page qui

apparaitra bien positionnée et quand l'internaute

site web dynamique
cliquera sur le lien, il sera redirigé automatiquement

vers la page réelle du site grâce à la redirection
automatique. Il est clair que cette méthode est
fortement déconseillée pour éviter tous problèmes de
blacklistage!!
 Le cloaking :
Quand nous parlons de cloaking, nous pouvons
assimiler ce genre de technique à une page satellite.
La technique du cloaking consiste à tromper en
quelque sorte les spiders des moteurs de recherche.
Rappelons que cette technique est fortement
déconseillée et plus ou moins bien détectée par les
moteurs.
Pour commencer, il suffit de créer une copie de la
page "index.html" par exemple. La première sera la
page originelle du site et l'autre page sera optimisée. A
la différence d'une page satellite, cette page optimisée
ne contient pas de redirection automatique. A l'aide
d'un petit logiciel de reconnaissance d' IP, le
webmaster programme les adresses IP (ou par son
""user-agent") des spiders pour que lors de la visite, le
spider tombe sur la page optimisée. Cette page est
donc indéxée dans l'index du moteur et donc bien
positionné le cas échéant.
Dans le cas ou un internaute effectue une recherche
et tombe sur la page optimisée, celui-ci va cliquer sur
le lien et va se retrouver vers la véritable
page index.html du site non optimisée. Vu que
l'adresse IP de l'internaute n'est pas celle d'un spider,
le petit logiciel redirigera l'internaute vers la page
original du site qui elle n'est pas optimisée du tout
pour les moteurs. Résultat, ni vous, ni le spider du
moteur ne peut faire la différence. Ces techniques sont
site web dynamique
plutôt utilisées pour le référencement des sites web

dynamiques en particulier (titres non optimisés, liens
internes avec beaucoup de variables, etc...).
Avantages du cloaking:
 Peu complexe à mettre en oeuvre, la plupart des
informations sont disponibles en ligne
 Technique de spamdexing très difficile à détecter
par les moteurs par rapport aux pages satellites
Inconvénients du cloaking:
 Les moteurs de recherche n'apprécient pas ce
genre de méthode
 Risque de blacklistage de votre site par les
moteurs de recherche
A vous de voir si votre stratégie

de référencement sera basée sur les méthodes
de cloaking. Des sites web ont été blacklistés
dernièrement (affaire BMW entre autre) et nous
recommandons de ne pas utiliser cette technique pour
votre référencement.
 Les frames :
Nous allons maintenant apprendre à optimiser les
sites développés avec des frames. Les frames (ou page
à cadre en Français) ont longtemps été considérées
comme un réel obstacle en référencement. Ceci n'est
pas toujours vrai et celle-ci sont même un atout pour
obtenir un meilleur positionnement. Voici un schéma
type de page avec frames :

site web dynamique
Cette page est composée de 3 frames (cadre haut,

gauche et droit). Nous appellerons ces frames des
"pages filles" . Le tout est encapsulé dans un frame
appelé "mère". Voyons maintenant le code source de la
page mère (mere.html) permettant d'afficher ce
résultat:
<html>
<head>
content="text/html; charset=windows-1252">
<title>Titre de la page (à choisir avec
soin)</title>
<meta name="description" content="description
à choisir avec soin">
<meta name="keywords" content="mots clés à
choisir avec soin">
</head>
<frameset rows="14%,*">
<frame name="frame" src="fhaut.html">
<frameset cols="19%,*">
<frame name="fgauche" src="fgauche.html">
<frame name="fdroite" src="fdroite.html">
</frameset>
<noframes>
Texte et lien à choisir avec soin
</noframes>
</frameset>
site web dynamique
Pour indexer la page mere.html, les spiders des

moteurs de recherche peuvent réagir différemment. 3
cas de figure s'offre à eux :
1. Il ignore complètement la page web et ne

l'index pas (ses concepteurs en ont décidé comme
ça). Ce type de cas n'éxiste plus aujourd'hui.
2. Le spider indexe uniquement la page mère et
ignore les pages filles en ne suivant pas les liens
présent dans les balises <frame name="">. Ce cas
est également très rare de nos jours.
3. Le spider index la page mère et les pages filles
mais les considèrent toutes comme des pages web
distinctes, sans rapport les unes avec les autres. Si
un mot clé est trouvé par exemple dans le fichier
fdroite.html, le moteur n’affichera uniquement que la
page fdroite.html sans la mise en forme des frames.
Vous vous retrouver donc avec une page orpheline.
Ce type de cas est le plus courant.
Pour ce dernier cas, il est possible de recréer le

contexte des frames en ajoutant un petit code
javascript sur toutes les pages filles (dans la
balise <head>):
<script type="text/javascript">
<!-
// Test d'affichage sans l'environnement frames
if (parent.frames.length==0)
{
parent.location.href="mere.html";
};
// -->
</script>

site web dynamique
A noter: Il faudra bien sur enlever les codes

suivants: <!- et // --> que nous avons délibérément
utilisés pour l'affichage du script sur cette page à titre
d'exemple (pour éviter une redirection!).
Du fait que la page mère contienne très peu de code,
il est donc très facile de l'optimiser. Nous allons
maintenant optimiser le code de la page mere.html.
Pour cela, nous allons utiliser les balises suivantes :
o <title>Titre de la page (à choisir avec

soin)</title>
o <meta name="description"
content="description à choisir avec soin">
o <meta name="keywords" content="mots clés
o <noframes>Texte et lien à choisir avec
soin</noframes>
1)La balise <title>Titre de la page (à choisir avec
soin)</title> est la plus importante. Elle devra contenir
vos mots clés les plus important. Cette balise ne devra
pas dépasser les 10 mots ou 100 caractères. Si vous
devez répéter un mot clé, veillez à ne pas dépasser les 2
occurences maxi.
2)La balise <meta name="description"

content="description à choisir avec soin"> est
également importante pour les pages avec des frames.
Le contenu de cette balise sera repris dans les résultats
de recherche. Elle ne doit pas dépasser 20 mots ou 200
caractères. N'oubliez pas d'insérer un maximum de mots
clés dans cette balise.
3)La balise <meta name="keywords" content="mots clés

à choisir avec soin"> est beaucoup moins importante
site web dynamique
car elle ne concerne qu'un minimum de moteurs de

recherche. Néanmoins, il est préférable de bien
renseigner cette balise. Elle ne devra pas dépasser une
centaine de mots clés ou 1000 caractères environ. Les
mots clés ou expressions devront être séparés par une
virgule.
4) La balise <noframes>Texte et lien à choisir avec

soin</noframes> est très importante et devra être bien
remplit. Vous pouvez dans cette zone placer du texte et
surtout des liens pointant vers les pages de votre site
(pages filles par exemple). Voici un exemple de balise
<noframes></noframes> bien optimisé:
<noframe>
<a href="referencement-
conseil.html">Referencement conseil</a>: aide à
l'optimisation <a href="optimisation-
referencement.html"> et au référencement</a>
<a href="referencement-site-web.html"> de votre
site web</a>
</noframe>
Dans cet exemple, si le spider du moteur n'indexe pas

correctement vos pages filles mais indexe bien votre
page mère, celui-ci sera en mesure de suivre les liens
présents dans la balise <noframes>. De plus vous
bénéficiez d'un indice de mots clés élevés et votre page
risque d'être très bien positionné sur ces même mots
(mots clés présents dans le texte et surtout sur les
liens). Si vous avez mis en place une redirection
Javascript comme énuméré ci-dessus, vous avez tout à y
gagner!
Concernant les pages filles, il est conseillé de placer des

site web dynamique
balises <meta> sur toutes vos pages. Même si celle-ci

ne sont pas affichées, elles permettront en cas de page
orpheline de les rendre un peu plus réactives:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Titre de la page (à choisir avec soin)</title>
<meta name="description" content="description à
choisir avec soin">
<meta name="keywords" content="mots clés à choisir
avec soin">
</head>
<body>
Votre zone de texte ici
</body>
En conclusion, le standard W3C ne conseil pas ce type

développement, mais si votre site est à base de frames,
n'hésiter pas à en tirer partie
 Site 100% Flash :

La problématique des sites réalisés en Flash est
assez proche de celle des sites élaborés avec des
frames. Les sites en flash (format .swf) représentent
encore un obstacle pour les moteurs de recherche. Le
problème ne vient pas du fait que certains moteurs
comme Google savent indexer des sites en Flash, mais
surtout de la problématique de l'optimisation des ses
sites pour les moteurs. Voici sur l'image suivante une
recherche sur le mot "internet" (requête internet
filetype:swf):

site web dynamique
Comme vous pouvez le constater, les sites avec

des animations en Flash sont bien indexés par Google.
Nous vous conseillons pour le moment d'abandonner
toute idée de prendre en compte les animations Flash
dans votre stratégie de référencement. Si votre site
contient uniquement quelques animations Flash, il
faudra utiliser la version classique d'optimisation en
HTML (Voir les zones chaudes du référencement).
Si votre site est majoritairement constitué d'animations
Flash, nous allons voir comment l'optimiser au mieux.
Voyons comment est structuré un fichier en Flash:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,29
,0" width="800" height="600"> <param
name="movie" value="votre animation.swf">
<param name="quality" value="high">
<embed src="votre animation .swf"
quality="high"
site web dynamique
pluginspage="http://www.macromedia.com/go/get
flashplayer" type="application/x-shockwave-flash"
width="800" height="600">
</embed>
</object>
Si nous prenons ce cas de figure, votre site n'a aucune
chance d'être bien positionné dans les résultats des
moteurs de recherche suite à une requête. La méthode
d'optimisation des animations Flash s'effectue comme
avec des pages contenant des frames.
Voyons maintenant comment optimiser votre code:
<head>
content="text/html; charset=windows-1252">
<title>Titre de la page (à choisir avec
soin)</title>
<meta name="description" content="description
<meta name="keywords" content="mots clés à
choisir avec soin">
</head>
<body>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=6,0,29
,0" width="800" height="600"> <param
name="movie" value="votre animation.swf">
<param name="quality" value="high">
<embed src="votre animation .swf"
quality="high"
pluginspage="http://www.macromedia.com/go/get
flashplayer" type="application/x-shockwave-flash"
width="800" height="600">

site web dynamique
<noembed>
Texte de la balise noembed (à choisir avec soin)
<noembed>
</embed>
</object>
</body>
</html>
Détaillons maintenant ce code plus en détail:
<title>Titre de la page (à choisir avec soin)</title>
o <meta name="description" content="description à
choisir avec soin">
o <meta name="keywords" content="mots clés à choisir
avec soin">
<noembed>Texte et lien à choisir avec
o
soin</noembed>
1) La balise <title>Titre de la page (à choisir avec

soin)</title> est la plus importante. Elle devra contenir
vos mots clés les plus important. Cette balise ne devra
pas dépasser les 10 mots ou 100 caractères. Si vous
devez répéter un mot clé, veillez à ne pas dépasser les 2
occurences maxi.
2) La balise <meta name="description"

content="description à choisir avec soin"> est
également importante pour les pages avec des
animations en Flash. Le contenu de cette balise sera
repris dans les résultats de recherche. Elle ne doit pas
dépasser 20 mots ou 200 caractères. N'oubliez pas
d'insérer un maximum de mots clés dans cette balise.
3) La balise <meta name="keywords"

content="mots clés à choisir avec soin"> est
beaucoup moins importante car elle ne concerne qu'un
site web dynamique
minimum de moteurs de recherche. Néanmoins, il est

préférable de bien renseigner cette balise. Elle ne devra
pas dépasser une centaine de mots clés ou 1000
caractères environ. Les mots clés ou expressions devront
être séparés par une virgule.
4) La balise <noembed>Texte et lien à choisir avec

soin</noembed> est très importante et devra être
bien remplit. Vous pouvez dans cette zone placer du
texte et surtout des liens pointants vers les pages de
votre site. Voici un exemple de balise
<noembed></noembed> bien optimisé:
<noembed>
<a href="referencement-
conseil.html">Referencement conseil</a>: aide à
l'optimisation <a href="optimisation-
referencement.html"> et au référencement</a>
<a href="referencement-site-web.html"> de votre
site web</a>
</noembed>
Dans cet exemple, le spider du moteur pourra indexer

vos pages contenant des animations Flash grâce aux
liens présents dans la balise <noembed>. De plus vous
bénéficiez d'un indice de mots clés élevés et votre page
risque d'être très bien positionné sur ces mêmes mots
(mots clés présents dans le texte et surtout sur les
liens).
 Les URL dynamiques :

Les URL dynamiques sont le plus souvent générées par
des languages de programmation commme PHP ou le
language ASP de Microsoft. Ces languages permettent de
site web dynamique
générés un nombre considérable de pages grâce au

passage de variable dans ces mêmes URL. Voici un
exemple concret d'une URL dynamique:
http://www.monsite.com/categorie/produit.php?
lg=fr&id_product=2&detail=1
Avouer que cette URL n'est pas très parlante (pas de

mots clés, beaucoup de variables et donc pas du tout
réactive pour les moteurs). La partie qui nous intéresse
est la suivante :
produit.php?lg=fr&id_product=2&detail=1
Cette URL contient un caractère "?", synonyme de

passage de paramètres et des esperluettes & qui
séparent les différents paramètres entre eux. Pour
permettre d'afficher le détail de notre produit de notre
boutique, une page nommée "produit.php" à été créée.
Cette page permettra d'afficher un nombre illimité de
produits tirés souvent d'une base de donnée sans créer
une page spécifique à chaque produit (travail long et
fastidieux si vous devez gérer des centaines de
produits!).
Cette action est possible grâce au passage de variable
dans l'URL avec la méthode GET (utilisé en HTML).
Concernant l'indexation de ces URL, les moteurs de
recherche restent plus ou moins sensibles avec tous ces
passages de variable. A l'heure actuelle, voici les
recommandations des moteurs à ce sujet :
 Si l'URL comporte 3 paramètres (soit 2 esperluettes),
l'URL sera indexée sans problème.
 Si l'URL comporte 4 paramètres ou plus (soit 3
esperluettes), l'URL sera peut-être indexée ou pas du
tout par un grand de moteurs.

site web dynamique
Eviter également le passage de session (session() en

php) qui génére un numéro de session différent pour
chaque internaute. Les moteurs n'indexeront pas du tout
ses pages.
 Eviter également les adresses avec comme variable
"id": http://www.monsite.com/produit.php?id=1. Les
moteurs n'apprécient guère ses URL également et risque
de ne pas les indexer.
Il faut donc en règle générale, ne jamais dépasser les 3

paramètres (soit 1 point d'interrogation "?" et 2
esperluettes "&") pour que votre URL soit indexée
correctement. Néanmoins, si votre site comporte plus de
3 variables, il existe d'autres solutions que voici :
 Réécrire manuellement ses URL pour les rendre
"compatibles" avec les moteurs de recherche
 Utiliser la méthode de l'URL Rewriting (réécriture d'
URL) en utilisant le fichier .htaccess de votre serveur
web.
La solution la plus simple est d'utiliser la solution de

l'URL rewriting. Pour cela, nous devons créer un fichier
.htaccess qui contiendra les règles de réécriture et ce
fichier devra être transféré à la racine de votre site (ou
de votre répertoire). Voici pour notre exemple comment
écrire une règle de réécriture:
lg=fr&id_product=2&detail=1&annee=2009
Le fichier .htaccess se présentera sous cette forme:
RewriteEngine on
RewriteRule ^produit\-(.+)\-(.+)\-(.+)\-(.+)\.html$

site web dynamique
/produit.php?
lg=$1&id_product=$2&detail=$3&annee=$4 [L]
Avec cette méthode de réécriture, notre ancienne

adresse avec 4 paramètres sera réécrite de la façon
suivante:
lg=fr&id_product=2&detail=1&annee=2009
deviendra:
http://www.monsite.com/categorie/produit-fr-2-1-
2009.html
Vous voyez le résultat, les URL sont rendus

compatiblent avec les critères des moteurs de recherche.
Votre adresse se termine maintenant en .html. Pour aller
plus loin dans la réécriture d'URL, nous vous conseillons
de vous rendre sur la page suivante : Méthode de l'URL
Rewriting.
N'hésitez pas non plus à glisser des mots clés dans vos
URL réécrites, votre référencement n'en sera que
meilleur !
 Le language Javascript :
Le language Javascript est beaucoup utilisé pour des
animations, des menus déroulants ou des effets de roll-
over sur les liens par exemple. Mais qu'en ai t-il au
niveau référencement ?
Pour commencer, les moteurs de recherche à l'heure

actuel ne lisent pas les liens contenus dans un lien

site web dynamique
Javascript. Mais toutefois, il est possible de rendre un lien

de type Javascript compatible avec les spiders des
moteurs. Nous allons voir maintenant comment se
constitue un lien totalement Javascript:
<a
href="javascript:windows.open('http://www.mon-
site.com/mapage.html', 'newWindows')">Texte du
lien</a>
Pour tout vous dire, aucun moteur à l'heure actuelle

ne saura lire le contenu de la balise "href"
(javascript:windows.open('http://www.mon-
site.com/mapage.html', 'newWindows'). Les moteurs de
recherche ne pourront donc pas suivre le lien vers la page
pointée. Cependant, il est possible comme je vous le
précisait ci-dessus de rendre un lien
Javascript compatible avec les robots des moteurs et
ceux-ci peuvent être suivi sans problème par les spiders.
Voyons maintenant comment rendre notre lien ci-dessus
compatible avec les spiders:
<a href="http://www.mon-site.com/mapage.html"
onclick="windows.open(this.href); return
false;">Texte du lien</a>
Dans ce cas, nous avons mélangé un lien HTML avec

du language Javascript. Les moteurs pourront donc
suivrent sans problème le lien "href" et donc indexer le
lien présent dans cette balise HTML.
Vous pouvez donc mélanger du language HTML avec

du language Javascript pour établir vos différents liens,
en prenant la précaution de le rendre "spiders"

site web dynamique
compatible.
A noter : Des rumeurs sur le web précisent que Google

serait en train de développer un robot capable de lire les
liens ecrit en Javascript. Cette information n'est pas
encore confirmée à l'heure actuelle !
 Pages bilingues ou trilingues :

Si votre site internet s'adresse à plusieurs
communautés linguistiques, il est bon de savoir
comment réagissent les moteurs face à de tels sites au
niveau du référencement. Les pages bilingues ou
trilingues sont fortement déconseillées dans une
stratégie de référencement. Quand les moteurs de
recherche "crawl" vos pages pour la première fois, ils en
lisent le contenu et définissent une langue unique pour
celle-ci. Si le "crawler" constate que vos pages sont
rédigées en plusieurs langues, celui-ci ne définira
aucune langue unique. De plus, lors d'une recherche, un
internaute verra d'un mauvais oeil un site rédigé en
plusieurs langues et cela ne lui donnera pas envie d'y
revenir.
Pour pallier à ce problème, voici les différents conseil

pour rédiger vos sites bilingues ou trilingues:
Rédiger vos titres de pages en une seule langue

(balise <title>). Pas de titre multilingue dans tous les
cas !

site web dynamique
Rédiger la zone de texte (contenu) de vos pages en

une seule langue, sinon les moteurs ne pourront pas
définir une langue unique pour chaque page
Un site rédigé en Anglais et en Français
simultanément, ne sera peut-être pas visible lors d'une
recherche sur les pages Francophones ou vice-versa des
moteurs
Créer des sous-domaine pour définir vos différentes
zones linguistiques (exemple pour la partie
Française : www.monsite.fr, pour
l’Anglais : en.monsite.fr, etc....)
Si vous suivez bien ces conseils, votre site multilingue ne
devrait pas poser de problèmes d'indexations dans les
index des moteurs.
3. Le référencement naturel, c'est quoi ?
Vous avez souvent entendu parler de référencement
naturel ou liens organiques ou de liens sponsorisés, mais
qu'en ai-t-il ?
Nous allons apprendre ici à faire la différence entre ces

trois méthodes de référencement. Pour commencer,
nous allons analyser sur l'image suivante les différences
entre ces différentes méthodes :
Sur cette page de résultats google, nous pouvons

site web dynamique
remarquer la présence de 3 zones. Les zones 1 et 2 sont

des liens commerciaux ou "sponsorisés". Ces liens sont
issues de campagnes publicitaires dont les annonceurs
ont payés une certaine somme d'argent selon un
système d'enchères avec paiement au clic pour
apparaitre sur des requêtes demandés par les
internautes et sur des mots clés bien spécifique. Si vous
optez pour ce type de référencement, l'optimisation des
pages de votre site n'entre aucunement en ligne de
compte pour l'affichage des résultats. Cette technique
est conseillé surtout pour les sites posant des problèmes
au niveau référencement comme les sites en Flash, à
base de frames ou de javascript.
Concernant la zone 3, les résultats de recherche issue de

ses requêtes sont des liens naturels ou liens organiques.
Les liens naturels sont issues des algorithmes
mathématiques de pertinence des moteurs de
recherche. Pour arriver à positionner votre site en tête
des résultats, vous devrez effectuer un travail
d'optimisation sur vos pages pour que votre site
apparaisse également en tête de "gondole". Pour ce
faire, il faudra mettre en exergue vos mots clés sur vos
pages, remplir au mieux vos balises <meta>, <title>,
soigner vos URL (méthode de l'URL Rewriting), achat
d'un nom de domaine avec mots clés et bien d'autres
critères définissant au mieux votre activité.
En résumé, voici les avantages et inconvénients des

différentes méthodes. Pour les liens sponsorisés:
 Les +: Facilité de mise en œuvre pour les sites peu
optimisés (site en Flash, JavaScript ou avec des
frames)

site web dynamique
 Les +: Aucune optimisation nécessaire sur les pages

du site
 Les -: Les coûts peuvent être élevés sur des mots
clés trop génériques
 Les -: Possibilité d'annoncer sur des mots clés qui
n'ont aucun rapport avec le site.
Pour les liens naturels ou organiques :

 Les +: Possibilité d'optimiser les pages de son site
soi-même
 Les +: Aucun coût, juste un peu de technique est
nécessaire (sauf si vous passez par un prestataire
extérieur)
Les -: Optimisation et référencement assez long à

mettre en œuvre
Les -: Attention à la concurrence, le travail sera
rude!!
4. Pourquoi optimiser ses pages pour un bon

référencement :
Cette question brule les lèvres de nombreux

webmasters. Prenons l'exemple de Google, celui-ci
utilise pour l'affichage de ses résultats une centaine
de critères environ. Malheureusement, personne ne
connais vraiment tous ses critères à l'heure actuelle
(sauf bien sur les ingénieurs chargés du
développement du moteur). Sans un minimum de
travail d'optimisation, votre site n'a guère de chance
d'être bien positionné dans les résultats de recherche.
A noter également que selon un sondage, seulement
9% des internautes interrogés visitent la troisième
page de résultats tous moteurs confondus (contre

site web dynamique
plus de 60% pour la première page).
Pour arriver à positionner vos pages sur les 3

premières pages de résultats, vous devez passer par
un travail d'optimisation de vos pages. Il faudra donc
enrichir vos pages en intégrant du contenu mettant
en valeur vos mots clés les plus importants. Pour ce
faire, voici en quelques mots les zones les plus
importante ou vous devrez effectuer un travail
d'optimisation (par ordre d'importance):
La balise <title> reste la plus importante. Un titre
bien conçu équivaut à environ 40% du travail
de référencement La zone de texte soit le contenu de
la page en elle-même doit être également bien
fournit. Vous devez placés vos mots clés les plus
important et les mettront en exergue bien soigner vos
Url (liens internes et liens externes) en plaçant
des mots clés à l'intérieur de celles-ci Choisir un nom
de domaine correspondant au mieux à votre activité.
Essayer si possible d'intégrer des mots clés à
l'intérieur de celui-ci
D'autres critères entrent bien sûr en compte et vous
les découvrirez au fil des pages que contient ce site.
Concernant le choix de vos mots clés, vous pouvez
vérifier les taux de pertinence de chacun en vous
connectant sur le générateur de mots clés Google
adwords qui vous permettra de connaitre le nombre
de fois ou les mots clés ont été saisis pour des
requêtes (ceci est une estimation pour les liens
sponsorisés, mais la réalité en référencement
naturel est quasi proche).
Penser donc à l'avenir avant tout développement d'un

nouveau site web, d'établir un cahier des charges

site web dynamique
résumant au maximum les étapes d'optimisation et

de référencement de votre nouveau site web. Votre référencement n'en
sera que meilleur.
9. Hébergement :
Afin de rendre un site web disponible sur Internet, il est
nécessaire de le faire héberger sur un serveur web.
site web dynamique
L'hébergement est un service assuré par un fournisseur

spécialisé appelé hébergeur Internet qui met à disposition du
site, un espace disque dédié sur un serveur web connecté en
permanence à Internet.
L'hébergement peut être gratuit ou payant, dédié ou

mutualisé.
 Hébergement gratuit :
L'hébergement de site web gratuit est le plus souvent offert

en échange de la diffusion de messages publicitaires. Des
messages automatiquement intégrés au site internet, sous la
forme de bannières ou de pop-ups, disposées généralement en
haut ou sur les côtés des pages web. Les hébergeurs tirent
leurs revenus exclusivement de publicités placées sur les sites.
 Hébergement payant :
Il se décompose en deux catégories :
 Hébergements partagés ou mutualisés : On parle

d'hébergement mutualisé lorsque plusieurs sites Internet
sont hébergés sur un seul et même serveur. La notion «
mutualisé » signifie « partagé ». Ce type de formule propose
donc un serveur avec une configuration donnée et une offre
logicielle (serveur, bases de données, comptes de
messagerie, serveur de listes de diffusion, etc.) ainsi qu'un
espace de stockage bien défini. Ce type d'hébergement est
utilisé par tous les hébergeurs gratuits et de nombreux
hébergeurs payants. Il présente l'avantage d'être
relativement peu cher. De plus, aucune connaissance
d'administration n'est nécessaire et de nombreux services
sont inclus. Cependant les performances ne sont pas
forcément très bonnes et le client n'a pas accès au serveur
en tant qu'administrateur.
site web dynamique
 Hébergements dédiés : L'hébergement dédié s'oppose à

l'hébergement mutualisé. Par conséquent, chaque client
possède son propre serveur, ce qui lui permet un accès
direct en tant qu'administrateur : Il est le responsable des
logiciels et des sites qu'il installe ce qui est le principal
avantage de ce type d'offre. Ce type d'hébergement est utile
pour les sites ayant un important trafic et un fort contenu
dynamique. Cependant cela demande beaucoup de temps et
de nombreuses connaissances au niveau de l'administration.
Cet inconvénient est cependant levé dans les hébergements
dédiés dits "managés" ou "clés en main". Dans ce cas, le
client dispose de son propre serveur mais c'est les
techniciens de l'hébergeur qui s'occupent de sa gestion
système.
Une fois l'hébergeur trouvé, il est essentiel de le mettre en

ligne, c'est-à-dire de transférer (copier) les fichiers depuis le
serveur du développeur vers le serveur de l'hébergeur Internet.
Pour ce faire il est alors essentiel de se connecter à internet,
puis d'envoyer les pages sur le serveur à l'aide de logiciels de
transfert FTP.

site web dynamique
Table des matières

1. Introduction :..............................................................................................................................................................1
 Qu’est-ce qu’un site web :......................................................................................................................................1
 Qu’est-ce qu’une page web :..................................................................................................................................1
 Qu’est-ce que l’adresse d’une page internet :.........................................................................................................1
 Qu’est-ce qu’un navigateur :...................................................................................................................................2
 Qu’est-ce qu’un code standard...............................................................................................................................2
 Qu’est-ce qu’un site dynamique.............................................................................................................................3
 Qu’est-ce qu’une base de données.........................................................................................................................3
 Qu’est-ce qu’un index dans une base de données :................................................................................................5
 Qu’est-ce qu’une base de données bien construit..................................................................................................6
 Qu’est-ce qu’un langage de programmation côté serveur :....................................................................................7
2. Objectif d’un site web :.........................................................................................................................................7
 Qu’est-ce qu’un objectif ?.......................................................................................................................................8
 Pourquoi définir des objectifs à votre site internet ?..............................................................................................8
 Quels sont les objectifs les plus courants d’un site internet ?................................................................................8

site web dynamique
 Comment définir l’objectif de votre site web :.......................................................................................................9
 Qu'est-ce que ce site web va me rapporter ?.....................................................................................................9
 Comment on détermine l'objectif de son site web :.............................................................................................10
 Qu'est-ce que je veux faire avec mon site web ?..................................................................................................10
 Et si j’échoue ?............................................................................................................................................11
 La première étape :..................................................................................................................................11
3. Etude de la cible :...............................................................................................................................................12
 Cibler sa clientèle :...............................................................................................................................................12
 Choisir un positionnement...................................................................................................................................13
4. Etude de la concurrence :....................................................................................................................................14
 Pourquoi : Étudier la concurrence ?.....................................................................................................................14
L’analyse de la concurrence porte sur tous les aspects qui font VOTRE différence..................14
 Méfiez-Vous de la concurrence Indirecte :...........................................................................................................14
 Le rapport d’analyse de la concurrence................................................................................................................14
 Le site internet dynamique face à la concurrence :..............................................................................................15
 Les principales caractéristiques d'un site internet dynamique :.......................................................................15
5. L’Arborescence :..................................................................................................................................................16
 Structurer les pages du site Internet :..................................................................................................................16
 Exemple d’arborescence d’un site Internet :........................................................................................................17
 Organisation de la navigation...............................................................................................................................17
1. mode linéaire :..................................................................................................................................................18
2. Mode hiérarchique :.........................................................................................................................................19
3. Mode en toile d'araignée :................................................................................................................................20
6. La charte graphique :..........................................................................................................................................21

Une charte graphique est un terme venant du mot latin charta qui signifie « papier ou lettre
», en français charta a pris le sens de « loi, règle fondamentale »...................................................21
 À quoi ça sert ?:....................................................................................................................................................21
 OBJECTIFS D’UNE CHARTE GRAPHIQUE :..............................................................................................................23
 COMPOSANTES D’UNE CHARTE GRAPHIQUE :...........................................................................23

site web dynamique
 LE LOGO :..........................................................................................................................................................23
 LA TYPOGRAPHIE (POLICE D’ÉCRITURE) :..........................................................................................................25
 LES COULEURS :.....................................................................................................................................26
 Le nuancier des couleurs :................................................................................................................................26
 La symbolique des couleurs..........................................................................................................................26

 ELÉMENTS GRAPHIQUES / ICÔNES :............................................................................................28
 UTILISATION DES IMAGES, ILLUSTRATIONS, PHOTOS :....................................................28
 RÈGLES D’INSERTION DE CES ÉLÉMENTS SUR CHAQUE SUPPORT........................................................................28
 Le choix du thème :..........................................................................................................................................28
 Le choix des couleurs........................................................................................................................................29
 Définir la typographie (la police de caractère) :................................................................................................29
 Le logo :............................................................................................................................................................30
 La disposition des éléments graphiques :.........................................................................................................30
 Les étapes gagnantes............................................................................................................................................31
 Exemple de création d’une charte graphique, étape par étape :..........................................................................31
1. La tempête d’idées...........................................................................................................................................31
2. Le logo :............................................................................................................................................................33
3. La bannière.......................................................................................................................................................34
4. Ajout de la barre de navigation........................................................................................................................35
5. Le menu vertical :.............................................................................................................................................36
6. Le corps :..........................................................................................................................................................37
7. Le pied de page :...............................................................................................................................................38
7. Etude des technologies existantes :....................................................................................................................39
1. Introduction au World Wide Web :.......................................................................................................................39
2. Qu'est-ce qu'un site web ?:..................................................................................................................................39
3. Des pages statiques vers les pages dynamiques :.................................................................................................40
3.1 Qu'est-ce qu'une page dynamique :...................................................................................................................41
3.2 Le fonctionnement des pages dynamiques........................................................................................................41
3.3 Le Back Office :...................................................................................................................................................43

site web dynamique
8. Référencement d’un site web :...........................................................................................................................50
1. Zone chaude de référencement :..........................................................................................................................50
 Optimiser ses titres...........................................................................................................................................50
 Un exemple pour un magasin informatique.....................................................................................................50
 Optimiser la zone de texte :..............................................................................................................................52
 Optimiser les adresses URL des pages :............................................................................................................53
 Les liens dans une images.................................................................................................................................54
 Les backlinks :...................................................................................................................................................55
 Popularité des pages :.......................................................................................................................................56
 Choix du nom de domaine :..............................................................................................................................57
 Les sous-domaines :.........................................................................................................................................58
 Les balises méta :..............................................................................................................................................59
 Attributs alt et title :.........................................................................................................................................61
 Les autres critères du référencement...............................................................................................................62
2. Obstacles au référencement.................................................................................................................................63
 Les pages satellites :.........................................................................................................................................63
 Le cloaking........................................................................................................................................................64
 Les frames :.......................................................................................................................................................65
 Site 100% Flash :...............................................................................................................................................68
 Les URL dynamiques.........................................................................................................................................71
 Le language Javascript......................................................................................................................................73
 Pages bilingues ou trilingues............................................................................................................................75
3. Le référencement naturel, c'est quoi ?.................................................................................................................75
4. Pourquoi optimiser ses pages pour un bon référencement..................................................................................77
9. Hébergement :....................................................................................................................................................79
 Hébergement gratuit :..........................................................................................................................................79
 Hébergement payant :..........................................................................................................................................79
 Hébergements partagés ou mutualisés............................................................................................................79
 Hébergements dédiés.......................................................................................................................................79

site web dynamique

Rapportsitewebdynamiquebouyahiakarima

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapportsitewebdynamiquebouyahiakarima

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Méthodologie de conception d’un

site web dynamique

Une page web est l’élément unitaire constitutif du site

Ces codes répondent à des standards. Une page web

Techniquement, une page web n’est que le renvoi par

Réaliser par Karima .Bouyahia 1

Qu’est-ce que l’adresse d’une page internet :

L’adresse d’une page Internet, aussi nommée url, est

Le premier indique le protocole utilisé dans la

Le second indique le nom de domaine à interroger et

La suite de l’adresse est variable et ne correspond plus

On notera quand même qu’en général, le dernier

Après ce dernier élément nom de fichier .ext, on

Pour résumer l’adresse typique d’une page internet est

Réaliser par Karima .Bouyahia 2

On omet souvent le protocole quand on indique une

Qu’est-ce qu’un navigateur :

Un navigateur est un logiciel qui permet de parcourir

Notre souci n’est pas de savoir quelles fonctionnalités

Qu’est-ce qu’un code standard :

C’est un code qui respecte les normes définies par

Avoir un site web dont le code respecte ces normes est

Réaliser par Karima .Bouyahia 3

Respectez les standards c’est aussi rendre plus

Qu’est-ce qu’un site dynamique :

Dans la vie, il y a plusieurs façons de concevoir les

Un site dynamique fonctionne sur ce second schéma. On

Concrètement, le modèle peut être comparé à un

Réaliser par Karima .Bouyahia 4

Qu’est-ce qu’une base de données :

Une base de données c’est un format de rangement

Revenons au principe d’une base de données. Celui qui a

Prenons l’exemple d’un carnet de contacts

Voici donc une base de données.

Imaginons maintenant que l’on souhaite stocker les

Réaliser par Karima .Bouyahia 5

Deux solutions s’offre à nous : soit on rajoute des colonnes

Afin de faire correspondre la bonne adresse à la bonne

Le choix de multiplier les tables ou d’ajouter des

Deux solutions s’offrent à nous :

La seconde solution est de créer une nouvelle table de la

Que conclure de la lecture de cette table ? Que le

Cette deuxième solution sera dans cet exemple à préférer

Qu’est-ce qu’un index dans une base de données :

Dans un annuaire de contacts papier, le classement le

Imaginons que vous donniez une liste en vrac, sans

Réaliser par Karima .Bouyahia 7

parcourir la liste de haut en bas à la recherche de la

Et bien pour une base de données informatique c’est

Il convient donc que votre base soit correctement

Qu’est-ce qu’une base de données bien construit :

Une base de données bien construite et une base de

Pour qu’une base de données soit performante, il

Réaliser par Karima .Bouyahia 8

d’une table, on doit définir chaque champ :

Une possibilité souvent oubliée est d’utiliser des

Imaginons que dans la base de données d’artistes

Une base de données est également bien construite

que l’on souhaite en faire ou qu’il n’utilise pas un format

Qu’est-ce qu’un langage de programmation côté

Un langage de programmation côté serveur est un

On emploie l’expression « coté serveur » car le code