Ecole Industrielle et Commerciale de la Ville de Namur

Ecole Industrielle et Commerciale de la Ville
de Namur - EICVN
Webmasters 2011 - 2012
Conception de sites web dynamiques
Y. Mine

Conception de sites web dynamiques - Y. Mine - EICVN 11 - 12
2
Table des matières
Première partie : la conception de sites web dynamiques
Introduction
Chapitre 1 : planifier la structure du site (arborescence, navigation)
Chapitre 2 : identifier les avantages et les inconvénients d'un outil visuel de conception
Chapitre 3 : interagir avec une base de données
Chapitre 4 : créer des pages pour afficher, insérer et mettre à jour des données
dynamiquement
Chapitre 5 : créer des formulaires et valider leur contenu (côté client et/ou côté serveur
avantages et inconvénients)
Chapitre 6 : sécuriser l'accès à des pages (restrictions d'accès, ...)
Chapitre 7 : personnaliser des pages en fonction des navigateurs
Chapitre 8 : adapter les réponses du serveur aux préférences du visiteur
Chapitre 9 : intégrer au site divers services (chat, forum, moteur de recherche, ... selon le
cahier des charges), en adaptant le script si nécessaire
Deuxième partie : les animations
Qu'est-ce qu'une animation ?
L'animation : amie ou ennemie ?
Objectifs des animations
 Publicité
 Interactivité
 Démonstrations
 Mise en évidence
 Esthétique (rare)
Respect de l'ergonomie du site
Les différentes techniques disponibles
 Les CSS
 Le JavaScript
 Java
 Les effets directs en html
 Les formulaires
 Les forums
 Les Gifs animés
 Les bases de données
 Les vidéos
Exemples et exercices

Conception de sites web dynamiques - Y. Mine - EICVN 11 - 12
3
Première partie : la conception de sites web dynamiques
Introduction
Site web dont le contenu des pages n'est pas figé mais variable en fonction de l'heure, du
visiteur ou d'autres paramètres. Les pages HTML se construisent de manière personnalisée
au moment de leur consultation par les internautes.
La notion de site Web dynamique s'oppose à celle de site statique.
Un site statique est composé uniquement de pages HTML, créées une par une par un
webmaster. Dans ce cadre, chaque modification de page demande la réédition de cette
dernière et une nouvelle mise en place sur le serveur.
Dans le cadre d'un site dynamique, le contenu et la présentation des pages peuvent être
gérés indépendamment. Ainsi, le webmaster définit un modèle de présentation dans lequel
peut s'afficher "dynamiquement" un contenu, extrait le plus souvent d'une base de données.
Les modifications à apporter au site sont ainsi plus légères puisqu'elles ne nécessitent
l'accès qu'à un seul fichier ou au texte présent dans une base.
Autre grand avantage des sites dynamiques, les contenus affichés dans chacune des pages
peuvent être sélectionnés en fonction de différents paramètres : numéro d'article, heure de la
journée, etc. Il est également possible que ce contenu soit créé en direct par différents
utilisateurs du site. Enfin, les sites dynamiques permettent la gestion d'une communauté
d'utilisateurs, le profil de chacun d'eux pouvant être considéré comme un élément à afficher
ou un paramètre à utiliser pour personnaliser le contenu des pages.
La construction de sites dynamiques repose bien souvent sur des technologies CSS et de
scripts comme PHP, ASP ou ColdFusion.
Les sites d'actualité en direct, les forums ou les outils de gestion de contenu (Spip, Plone,
Joomla, …) sont les exemples les plus courants de sites dynamiques.
Sites statiques versus sites dynamiques
Site statique
"L'évolutivité extrême"
Site dynamique
"Vive la volumétrie"
Définition
Site web constitué de pages HTML
prédéfinies, créées une fois pour toutes à
l'aide d'un éditeur HTML. Le contenu des
pages est fixe.
Définition
Site web dont les pages HTML se
construisent lors de sa consultation par
un internaute, en sollicitant des bases de
données filtrées par des outils logiciels de
mise en forme.
Evolutivité Si la ligne éditoriale est
amenée à évoluer rapidement, la solution
statique est plus simple : il existe moins
de séparation entre le fond et la forme. Il
est aussi moins coûteux de faire évoluer
Evolutivité Si la majorité des paramètres
du site sont destinés à être pérennes, la
solution dynamique est à privilégier. La
solution est également préférée pour des
sites à forte volumétrie ou intégrant de

Conception de sites web dynamiques - Y. Mine - EICVN 11 - 12
4
un site statique vers l'accessibilité, sauf si
la volumétrie est très importante.
flux d'origine diverses.
Mises à jour Ces mises à jour
demandent un minimum de compétences
techniques (maîtrise du langage de
programmation et du webdesign). Un
principe : plus un site statique est
volumineux et plus sa mise à jour est
fréquente, plus celle-ci sera lourde à
gérer. Le site statique implique également
un risque de dépendance forte vis-à-vis
du webmaster (problème de transmission
des compétences et de goulot
d'étranglement lié à sa charge de travail).
Mises à jour Elles sont facilitées, tant
sur le fond que sur la forme, grâce aux
outils d'administration et à une meilleure
séparation entre le fond et la forme. Ces
mises à jour ne demandent pas de
compétences techniques particulières et
se font via un outil de gestion de
contenus. La formule est notamment
beaucoup plus adaptée en cas de
contributeurs multiples et de mises à jour
très fréquentes.
Fonctionnalités Limitées en termes
d'interactivité. Il est par exemple difficile
d'utiliser des fonctionnalités liées à des
bases de données.
Fonctionnalités Plus avancées grâce à
l'utilisation de bases de données (moteur
de recherche, interactivité,
personnalisation...).
Référencement Toutes les pages étant
individualisées, il est plus facile d'obtenir
un bon référencement. L'historique du site
est également conservé dans sa globalité
et en l'état sur le Net, ce qui facilite le
travail de référencement sur la durée.
Référencement Le référencement des
sites dynamiques ne nécessite pas
forcément de recourir à des artifices tels
que les pages alias ou les pages
satellites. Il suffit que le référencement
soit pris en compte dès la conception du
site. Un bon référencement dépendra de
la façon dont le site aura été développé.
Hébergement Pas de contraintes
particulières, les sites statiques
représentent la forme élémentaire du Net
à laquelle les hébergeurs sont habitués.
Hébergement Plus de contraintes en
théorie, car l'hébergeur doit permettre la
mise en place de scripts et de bases de
données correspondant aux technologies
utilisées.
Prix de revient et coûts de maintenance
Le coût de développement initial est
moins élevé, sauf si le site est
particulièrement volumineux. Mais la mise
à jour revient plus cher à la longue
(recours à un prestataire si les
compétences ne sont pas présentes en
interne, et si elles le sont, le webmaster
met plus de temps à réaliser les mises à
jour qu'avec un outil de gestion de
contenus).
Prix de revient et coûts de maintenance
Le coût de développement initial est en
général plus élevé, sauf si le site est
particulièrement volumineux. Mais ce
surcoût est amorti en raison des
économies réalisées sur la mise à jour.
En revanche, une refonte plus globale
que des simples mises à jour sera
souvent plus coûteuse : elle nécessite de
reparamétrer l'outil de gestion de
contenus.
Ainsi, un site dynamique n’est pas un site simplement garni d’animations en script,
flash ou autre. La dynamique ne représente pas du mouvement à l’écran.

Conception de sites web dynamiques - Y. Mine - EICVN 11 - 12
5
Chapitre 1 : planifier la structure du site (arborescence, navigation)
A/ Déterminer qui utilisera le site
La détermination du public cible va entraîner différents choix de conception dont il faut tenir
compte dès le début du processus de création.
Il faut commencer par les résultats de l’étude de marché ou de ce qui en tient lieu (le mot
« marché » est un terme générique et il n’implique pas nécessairement un objectif
commercial ou financier).
Quel est le marché cible? Ce marché cible sera le public principal. C’est lui qui déterminera
le contenu, le style, le ton du site Web.
 aspect linguistique - selon le cas, utilisez un langage simple et expliquez
soigneusement tous les termes spécialisés
 tranche d’âge
 sexe
 niveau culturel
 localisation géographique
 particularités (ex. : du matériel proposé aux malvoyants doit être présenté sur des
pages construites selon les limitations de ce public)
 issu d’une culture en particulier? Savez-vous ce qu’il pourrait considérer offensant?
Les affaires électroniques se font dans un environnement multiculturel et votre
succès en ligne peut dépendre de votre réponse aux attentes culturelles de votre
public.
 souvenez-vous des publics secondaires (simples curieux, intéressés, investisseurs
ou partenaires actuels ou futurs, concurrents, …)
Simplifiez votre message
il faut 30 % plus de temps pour lire un texte à l’écran que sur papier; ainsi, les utilisateurs du
Web ont de la difficulté à lire de longs paragraphes de texte.
Comment faciliter la lecture de votre site Web? Faites des phrases simples. Raccourcissez
vos paragraphes. Autant que possible, utilisez la voix active plutôt que la voix passive.
!!! simplification ne veut pas dire réduction
Soyez crédible
Soyez honnête, ne trompez pas la confiance de vos lecteurs. Positionnez-vous comme une
autorité en la matière; donnez des exemples de vos compétences. Parlez de votre sujet ou
produit avec enthousiasme! Enfin, énoncez votre politique de confidentialité et fournissez
toutes vos coordonnées utiles.