Email: Belouar.hocine@gmail.

com
05/03/2012 Université Kasdi Merbah Ouargla 1
 Conception d'un site web
Introduction
Un Site Internet (ou Site Web) est un ensemble de pages
liées entre elles par ce qu'on appelle des Hyperliens.

Un site web ou site est un ensemble de pages Web pages

hyperliées entre elles et mises en ligne à une adresse
Web.
Un site web est un ensemble de pages qui peuvent être
consultées en suivant des hyperliens à l'intérieur du site.
L’adresse Web d'un site correspond en fait à l’URL d'une
page Web, prévue pour être la première consultée : la page
d’accueil.
05/03/2012 Université Kasdi Merbah Ouargla 2
 Conception d'un site web
La consultation des pages d'un site s'appelle une
« visite », car les hyperliens devraient permettre de
consulter toutes les pages du site sans le quitter. Une
visite peut commencer par n'importe quelle page,
particulièrement lorsque son URL est donnée par un
moteur de recherche. Techniquement, rien ne
distingue la page d'accueil d'une autre page.
En janvier, le web compte plus de 580 millions de
sites, dont plus de 175 millions considérés comme
actifs.
05/03/2012 Université Kasdi Merbah Ouargla 3
 Historique du Web
Le « World Wide Web » (www) a été créé en 1989
par l’ingénieur du CERN Tim Berners Lee. Le 30
avril 1993, le CERN annonce que le « World Wide
Web » sera libre d’utilisation pour tout le monde.

La toute première adresse internet du premier serveur web était

« http://info.cern.ch », hébergé par un ordinateur NeXT du CERN.
Une version ultérieure de cette toute première page html est
consultable sur le site du W3C.
Avant l’introduction de l’HTML et HTTP, d’autres protocoles tels
que FTP et Gropher étaient utilisés pour obtenir des fichiers depuis
un serveur. Ces protocoles offraient une organisation basique de
répertoires dans lesquels l’utilisateur naviguait et choisissait les
fichiers à télécharger.

05/03/2012 Université Kasdi Merbah Ouargla 4

 Les étapes pour concevoir un site Web

Définir ses objectifs

Organiser la structure du site
Définir les parties statiques et dynamiques
Elaborer le contenu
Rassembler les supports: photos, vidéos etc...
Choisir un nom de domaine et un hébergeur

05/03/2012 Université Kasdi Merbah Ouargla 5

 Les étapes pour concevoir un site Web

1. Définir ses objectifs

Quelque soit la vocation de votre site, il
est nécessaire de mener une réflexion
pour déterminer les attentes de vos
visiteurs. En fonction du public ciblé, il
est important de définir ses objectifs.

05/03/2012 Université Kasdi Merbah Ouargla 6

 Les étapes pour concevoir un site Web
2. Organiser la structure du site
L'étape suivante consiste à définir la
structure du site en établissant un plan qui
reprendra le menu du site avec les différents
éléments qui le composent, l'ordre dans
lequel ils sont présentés et leur appellation.
Le visiteur doit comprendre l’organisation de
la navigation du site en un clin d'œil et il faut
s'assurer de l'accessibilité des différentes
pages.
05/03/2012 Université Kasdi Merbah Ouargla 7
 Les étapes pour concevoir un site Web
3. Définir les parties statiques et
dynamiques
Il est nécessaire de déterminer si certaines parties du site
doivent être mis à jour et selon quelle fréquence. Pour
mettre à jour le contenu de votre site, le webmaster devra
concevoir une interface d'administration avec laquelle il
vous sera possible de modifier le contenu. Il s'agit d'un site
dynamique.
En opposition, si le contenu du site n'a pas besoin d'être
changé au fil du temps, on parle d'un site statique.

05/03/2012 Université Kasdi Merbah Ouargla 8

 Les étapes pour concevoir un site Web

4. Elaborer le contenu
L'information que vous allez offrir sera peut-être présentée
sous forme de textes. Nous ne saurions alors trop vous
recommander de soigner la rédaction de ceux-ci. Les
internautes étant généralement pressés de trouver
l'information, il est préférable d’écrire des textes courts
allant droit au but. De même, il est préférable de s'exprimer
dans une langue simple et accessible.
Selon l'importance que vous accordez au référencement de
votre site, il conviendra d'écrire des textes en tenant
compte des mots clés pour lesquels vous souhaitez
apparaître dans les moteurs de recherche.
05/03/2012 Université Kasdi Merbah Ouargla 9
 Les étapes pour concevoir un site Web

5. Rassembler les supports: photos,

vidéos… etc.
Il nous semble judicieux de proposer une image
adaptée au public visé. L’aspect graphique est un
élément que nous conseillons de soigner.
Proposer un site vivant et attrayant doit également
faire partie des préoccupations. L'intégration de
multimédias comme la musique ou la vidéo, les
galeries d'images, l'utilisation de flash sont très
utiles dans certains cas.
05/03/2012 Université Kasdi Merbah Ouargla 10
 Les étapes pour concevoir un site Web

6. Choisir un nom de domaine et un

hébergeur

Enfin, il faudra choisir un nom de domaine et

un hébergeur pour accueillir vos pages.

05/03/2012 Université Kasdi Merbah Ouargla 11

 Site statique ou dynamique
Qu'est-ce qu'un site statique?
On entend par page statique, non pas une page sans
mouvements ou sans animations, mais une page
visible telle qu'elle a été conçue.
Ces pages peuvent présenter toute forme de contenu,
animations flash, images, musique, vidéo etc. mais
elles sont toujours présentées de la même façon.
Elles ne changent pas et c'est en ce sens qu'elles sont
statiques.

05/03/2012 Université Kasdi Merbah Ouargla 12

 Site statique ou dynamique
Qu'est-ce qu'un site dynamique?
Les pages dynamiques permettent de présenter les informations de
différentes manières selon l'interaction avec le visiteur.
Les pages sont alors construites "à la volée" grâce à une
programmation conçue par le Webmaster. Le contenu est issu d'une
base de données en fonction de critères établis par l'internaute puis
mis en page en temps réel.
C'est le cas par exemple d'un site E-commerce: présentation des
articles par thèmes, couleurs, prix etc.
C'est également le cas des blogs et des forums où les visiteurs
peuvent participer au contenu du site.

05/03/2012 Université Kasdi Merbah Ouargla 13

 Site statique ou dynamique
Comment choisir si une page est statique ou
dynamique?

Tout d'abord il convient de déterminer le rôle de la page.

Tout système d'interaction avec le visiteur nécessitera une
partie dynamique.
Pour un système de mise à jour, il conviendra de réfléchir
aux fréquences des mises à jour. Si le contenu ne change
peu ou qu'une fois à l'année, il n'est pas nécessaire de
passer par des pages dynamiques. Une intervention
ponctuelle du webmaster peut très bien convenir.

05/03/2012 Université Kasdi Merbah Ouargla 14

 Site statique ou dynamique
Quels sont les avantages et les inconvénients des
deux méthodes?
L'utilisation des pages dynamiques est plus souple
pour l'évolution du site mais nécessite plus de temps
de travail pour la programmation.
En opposition, les pages statiques sont plus "figées"
mais plus simples à réaliser.

05/03/2012 Université Kasdi Merbah Ouargla 15

 Outils pour la création
d'un site Web

05/03/2012 Université Kasdi Merbah Ouargla 16

 Outils pour la création d'un site Web
Il existe de nombreux outils pour la création et le
suivi d'un site internet. Certains sont des
programmes, d'autres des services en ligne. Afin de
s'y retrouver, nous les avons classés selon les
besoins:
Outils pour la création de pages web
Outils pour la création et la retouche d'images
Outils pour la réalisation d'animations flash
Outils pour l'élaboration de bases de données
Outils pour vérifier un site internet
05/03/2012 Université Kasdi Merbah Ouargla 17
 Outils pour la création d'un site Web
1. Outils pour la création de pages web

Un éditeur est un logiciel qui permet de créer des

pages web. Il existe un bon nombre d’éditeurs de
sites web. Néanmoins on peut les regrouper en
deux catégories :
 les éditeurs WYSIWYG
 les éditeurs de texte
 Avec un logiciel « assistant » au code HTML
PageSpinner sur MacIntosh, Amaya sur Unix, HTML-
Kit sur PC …
05/03/2012 Université Kasdi Merbah Ouargla 18
 Outils pour la création d'un site Web
1. Outils pour la création de pages web
Quelle est la différence entre un éditeur WYSIWYG et un
éditeur de texte?

 Les éditeurs WYSIWYG (What You See Is What You Get)

signifiant en gros « ce que vous voyez est ce que vous obtenez »,
vous permet d'écrire le contenu de votre site directement sans avoir
à taper une seule ligne de code HTML/CSS. En gros, ils génèrent
automatiquement le code HTML/CSS. C'est le cas notamment de
NVU, Frontpage, Dreamweaver, etc.
 Ces logiciels sont assez faciles à prendre en mains et vous permet de
créer rapidement une ou quelques pages voir un site web complet.

05/03/2012 Université Kasdi Merbah Ouargla 19

 Outils pour la création d'un site Web
Exemple d’un éditeurs WYSIWYG: Dreamweaver

05/03/2012 Université Kasdi Merbah Ouargla 20

 Outils pour la création d'un site Web
Exemple d’un éditeurs WYSIWYG: Notepad++

05/03/2012 Université Kasdi Merbah Ouargla 21

 Outils pour la création d'un site Web
2. Outils pour la création et la retouche d'images

Au fil des années, Photoshop est devenu une

référence en matière de retouche d'images.
Ce programme permet à la fois un travail sur des
images existantes, pour améliorer le rendu de
photos par exemple, mais aussi la création de
formes pour construire le design d'un site.

05/03/2012 Université Kasdi Merbah Ouargla 22

 Outils pour la création d'un site Web
3. Outils pour la réalisation d'animations flash

Flash est le programme qui, comme son nom

l'indique, permet de réaliser des animations
flash.
Plus qu'un simple programme pour réaliser
des animations, Flash permet de concevoir un
site entièrement réalisé avec sa propre
technologie.

05/03/2012 Université Kasdi Merbah Ouargla 23

 Outils pour la création d'un site Web
4. Outils pour l'élaboration de bases de données (1)

Plusieurs outils sont disponibles pour élaborer

des bases de données, à titre d’exemple
Mysql.

Easyphp ou Wampserver est une

technologie qui permet installer Apache, Php,
PhpMyAdmin et MySql sur les machines
pour réaliser des sites Web dynamiques.
05/03/2012 Université Kasdi Merbah Ouargla 24
 Outils pour la création d'un site Web
4. Outils pour l'élaboration de bases de données (2)
Apache : c'est ce qu'on appelle un serveur web. Il s'agit du plus important
de tous les programmes, car c'est lui qui est chargé de délivrer les pages
web aux visiteurs.
PHP : c'est un plug-in pour Apache qui le rend capable de traiter des
pages web dynamiques en PHP. En clair, en combinant Apache et PHP,
notre ordinateur sera capable de lire des pages web en PHP.
MySQL : c'est le logiciel de gestion de base de données. Il permet
d'enregistrer des données de manière organisée (comme la liste des
membres de votre site). Nous n'en aurons pas besoin immédiatement, mais
autant l'installer de suite.
PhpMyAdmin: est l’interface par laquelle on administre et manipule les
bases de données Mysql

05/03/2012 Université Kasdi Merbah Ouargla 25

 Outils pour la création d'un site Web
5. Outils pour vérifier un site internet
Ils existent différents services sur le web qui permettent
de vérifier le bon fonctionnement d'un site internet. En
voici quelques uns:
spider-simulator.com pour vérifier les balises title, les metas, la validité des
liens etc...
browsershots.org pour vérifier le rendu d'un site internet dans différents
navigateurs.
validator.w3.org/checklinkliens pour vérifier si une page comprend des liens
brisés.
bonpatron.com pour vérifier l'orthographe et la grammaire.
archive.org pour vérifier un site au cours du temps.
validator.w3.org pour vérifier si un site est valide W3C

05/03/2012 Université Kasdi Merbah Ouargla 26

 Choisir son nom de
domaine

05/03/2012 Université Kasdi Merbah Ouargla 27

 Outils pour la création d'un site Web
Qu'est-ce qu'un nom de domaine?

Le nom de domaine, c'est simplement l'adresse de votre

site.
Par exemple, univ-ouargla.dz

05/03/2012 Université Kasdi Merbah Ouargla 28

 Outils pour la création d'un site Web
Comment choisir un nom de domaine?
Il n’existe pas de règle absolue pour choisir un nom de domaine
mais nous pouvons néanmoins observer quelques pratiques
judicieuses :
Choisir un nom simple et court, facile à mémoriser. C’est par
exemple ce qu’ont fait des grands comme Ebay, Yahoo ou
encore Google.
Lorsque l’on utilise plusieurs noms communs pour former un nom
de domaine, il n'est pas possible d'utiliser d'espace entre ces mots.
Il faut alors choisir entre la méthode qui consiste à placer les mots
l’un à la suite de l’autre sans "séparateur" ou, au contraire, celle
qui consiste à utiliser un séparateur comme le "tiret".

05/03/2012 Université Kasdi Merbah Ouargla 29

 Outils pour la création d'un site Web
Comment choisir un nom de domaine?
Il est conseillé d’utiliser le tiret comme
séparateur de mots et de ne pas utiliser
plus de deux ou trois mots.

05/03/2012 Université Kasdi Merbah Ouargla 30

 Outils pour la création d'un site Web
L’extension du nom de domaine?
L’extension du nom de domaine donne une indication sur
le pays d’origine du site.
.dz pour l’Algérie, .fr pour France, .es pour Espagne
etc…
Il existe aussi des extensions comme .org pour
Organisation, .com pour Commercial, .info pour
Information etc…
Le choix de l'extension aura également un impact non
négligeable sur le référencement
05/03/2012 Université Kasdi Merbah Ouargla 31
 Utiliser un CMS pour créer un site web
Qu'est-ce qu'un CMS?

Un CMS (Content Management System) est un système

prêt à l'emploi, qui permet de créer rapidement un site
dynamique ainsi que l’interface d’administration pour
gérer son contenu. La plupart de ces systèmes utilise des
bases de données (avec le couple Php + MySql), mais
quelques uns fonctionnent sans.

Exemple de CMS: Drupal, Joomla et SPIP

05/03/2012 Université Kasdi Merbah Ouargla 32

 Avantages et inconvénients d’un CMS
Qu'est-ce qu'un CMS?

Un CMS s'articule sur deux parties distinctes:

L'interface d'administration: permet d'insérer et de gérer le
contenu du site: écrire des textes, placer des photos, construire le
menu etc... Elle est accessible uniquement par les administrateurs
du site avec un nom d'utilisateur et un mot de passe.

La partie visible par l'internaute: permet de présenter le contenu

du site avec sa mise en page et son design, le menu, les textes et
autres éléments spécifiques du site.

05/03/2012 Université Kasdi Merbah Ouargla 33

 Utiliser un CMS pour créer un site web
Avantages (1)
Rapidité d'installation pour un système de base fonctionnel.
Système prêt à l'emploi: coûts réduits pour une installation
simple.
Pas besoin de logiciel à installer, la gestion se fait dans
l'interface d'administration avec le navigateur Web. Ce qui signifie
également que vous pouvez gérer votre site où que vous soyez en
disposant d'une connexion à internet.
Séparation de la forme et du contenu. Il est possible de changer
le design du site sans modifier le contenu et vice-versa.

05/03/2012 Université Kasdi Merbah Ouargla 34

 Utiliser un CMS pour créer un site web
Avantages (2)
Organisation et hiérarchisation du contenu.
Edition des pages simplifiée par une interface
graphique.
Gestion des droits d'accès: Administrateurs,
Modérateurs, Editeurs, Visiteurs etc...
Possibilité d'inclure un moteur de recherche.
Possibilité de mettre à jour le contenu du site
facilement.

05/03/2012 Université Kasdi Merbah Ouargla 35

 Utiliser un CMS pour créer un site web
Inconvénients

Rien de tel qu'un site fait sur mesure qui réponde à un

cahier des charges bien précis, ni plus ni moins.
Besoin d'adaptation du CMS de base et nécessité
d'installer des modules complémentaires.
Difficulté pour créer un design personnalisé sans
compétences requises.
Mises à jour du système, correction des failles de
sécurité.
Gestion des coûts pour l'adaptation d'un CMS à un site
sur mesure.
05/03/2012 Université Kasdi Merbah Ouargla 36
 Merci de votre attention

05/03/2012 Université Kasdi Merbah Ouargla 37