éditeur Web - Page d`accueil

Création de sites Web
À partir d’un Système de
Gestion de Contenu
Introduction
Généralités sur le Web
La naissance du WWW
Le web date de mars 1989, naissance au CERN (Organisation européenne
pour la recherche nucléaire ). Les inventeurs : Tim Berners-Lee et Robert
Cailliau.
L’ idée géniale, « prendre le principe d’hypertexte, le relier au principe du TCP
(Transmission Control Protocol - littéralement, « protocole de contrôle de
transmissions ») et du DNS (Domain Name System - le système de noms de
domaine permet d'établir une correspondance entre une adresse IP et un
nom de domaine ». Peu de temps après naissaient le premier navigateur internet,
les premiers blogs etc.
Dès 1991, le World Wide Web est ouvert au grand public.
IPv4 : 192.85.150.134 (Max 4,2 milliards d’adresses)
IPv6 : 1fff:0000:0a88:85a3:0000:0000:ac1f:8001 (Max 3,4 X 1038 adresses)
Les premiers outils
•
•
•
•
1990 : Premier navigateur
WorldWideWeb (plus tard
rebaptisé nexus), utilisation
confidentielle.
1993 : premier navigateur
stable et largement diffusé,
NCSA Mosaic 
1994 : Netscape Navigator
1995 : Internet Explorer 1

Le World Wide Web Consortium
(W3C)
• Le World Wide Web Consortium, abrégé par le sigle
W3C, est un organisme de standardisation à but nonlucratif, fondé en octobre 1994 comme un
consortium chargé de promouvoir la compatibilité
des technologies du World Wide Web telles que
HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le
W3C n'émet pas des normes au sens européen, mais
des recommandations à valeur de standards
industriels.
Un affichage aléatoire
- Des navigateurs qui ne respectent pas les
consignes du W3C.
- Multiplicité des OS.
- Tailles et définitions d’écran variables.
- Modules complémentaires qui modifient le
fonctionnement des navigateurs.
- Absence de plugins (flash…)
Test Acid 2
Il s’agit d’un indicateur de la prise en charge des standards du W3C par les navigateurs.
IE7
Firefox 2.0
http://acid2.acidtests.org/
http://acid3.acidtests.org/
 Opera 9.0
Vocabulaire 1
•
•
•
•
•
HTTP (pour HyperText Transfer Protocol) est le protocole de communication
communément utilisé pour transférer les ressources du Web. HTTPS est la variante
sécurisée de ce protocole.
Une URL (pour Uniform Resource Locator) pointe sur une ressource. C’est une
chaîne de caractères permettant d’indiquer un protocole de communication et un
emplacement pour toute ressource du Web.
Un hyperlien (ou lien) est un élément dans une ressource associé à une URL. Les
hyperliens du Web sont orientés : ils permettent d’aller d’une source à une
destination.
HTML (pour HyperText Markup Language) est un langage informatique permettant
de décrire le contenu d’un document (titres, paragraphes, disposition des images,
etc.) et d’y inclure des hyperliens. Un document HTML est un document décrit
avec le langage HTML. Les documents HTML sont les ressources les plus consultées
du Web. Le HTML est maintenant remplacé par le XHTML (Extensible HyperText
Markup Language).
Un serveur Web est un hôte sur lequel fonctionne un serveur HTTP (ou serveur
Web). Un serveur Web héberge les ressources qu’il dessert.
Vocabulaire 2
• Un navigateur Web est un logiciel client HTTP conçu pour accéder aux
ressources du Web. Sa fonction de base est de permettre la
consultation des documents HTML disponibles sur les serveurs HTTP.
Le support d’autres types de ressource et d’autres protocoles de
communication dépend du navigateur considéré.
• Une page Web (ou page) est un document destiné à être consulté avec
un navigateur Web. Une page Web est toujours constituée d’une
ressource centrale (généralement un document HTML) et
d’éventuelles ressources liées automatiquement accédées
(typiquement des images).
• Un éditeur HTML (ou éditeur Web) est un logiciel conçu pour faciliter
l’écriture de documents HTML et de pages Web en général.
• Un site Web (ou site) est un ensemble de pages Web et d’éventuelles
autres ressources, liées dans une structure cohérente, publiées par un
propriétaire (une entreprise, une administration, une association, un
particulier, etc.) et hébergées sur un ou plusieurs serveurs Web.
Vocabulaire 3
• Une adresse Web est une URL de page Web, généralement
écrite sous une forme simplifiée limitée à un nom d’hôte. Une
adresse de site Web est en fait l’adresse d’une page du site
prévue pour accueillir les visiteurs.
• Un hébergeur Web est une entreprise de services
informatiques hébergeant (mettant en ligne) sur ses serveurs
Web les ressources constituant les sites Web de ses clients.
• Une agence Web est une entreprise de services informatiques
réalisant des sites Web pour ses clients.
• Un annuaire Web est un site Web répertoriant des sites Web.
Partie 1
Création de sites Web
Historique
Création de site – La préhistoire
Du HTML (Hypertext Markup Language, format
de description de page) avec un éditeur de texte
(type bloc note)
Création de site – Feuilles de style
Une première amélioration l’utilisation des
feuilles de styles.
Le concept de feuilles de style est apparu en
1996 avec la publication par le W3C d'une
nouvelle recommandation intitulée « Cascading
StyleSheets » (feuilles de style en cascade),
notée CSS.
Éditeurs Web WYSIWYG (1)
Un éditeur HTML (ou éditeur Web) est un logiciel
conçu pour faciliter la préparation et la modification de
documents écrits en HTML. Un éditeur WYSIWYG
permet d'éditer une page Web à peu près telle qu'elle
apparaît dans les navigateurs courants.
Ex. : Dreamweaver, Komposer…
(1) What You See Is What You Get
Exemple éditeur WYSIWYG
(Dreamweaver CS3)
Enrichir une page Web
Le langage HTML permet de décrire le contenu
d’une page, mais très vite il s’est avéré
nécessaire d’utiliser des langages de script, qui
permettent d’effectuer des opérations plus
complexes (ouverture automatique de fenêtre,
tester les caractéristique de l’ordinateur hôte…).
Différents langages sont apparus :
JavaScript, PHP
Exemple de JavaScrip
(détection de la langue)
•
•
•
•
•
•
•
•
•
•
•
<html>
<head>
<title></title>
<script type="text/javascript">
<!-- Debut
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"
if (navigator.browserLanguage)
var language = navigator.browserLanguage;
/*
Bon pour commencer on va faire une petite détection de la propriété browserLanguage de l'objet navigator et voir si le visiteur ne viens pas avec Internet Explorer.
Pourquoi ? Parce que tout simplement les développeur de chez Micro$oft ont "oubliés" d'implanter une propriété (language pour ne pas la citer) de l'objet navigator pour mettre la leur
(qui n'existe donc pas en javascript). Donc il faut (encore) prévoir un cas spécial.
*/
else
var language = navigator.language;
/*
Donc si le visiteur a un navigateur intelligent qui comprend un minimum javascript, on va mettre dans la variable language la valeur retournée par la propriété language de l'objet
navigator.
*/
if (language.indexOf('fr') > -1) document.location.href = 'francais.html';
// Bon on parle français hein donc c'est le premier test.
if (language.indexOf('fr') > -1) document.location.href = 'francais.html';
else if (language.indexOf('nl') > -1) document.location.href = 'neerlandais.html';
else if (language.indexOf('en') > -1) document.location.href = 'anglais.html';
else if (language.indexOf('de') > -1) document.location.href = 'allemand.html';
else if (language.indexOf('ja') > -1) document.location.href = 'japonais.html';
else if (language.indexOf('it') > -1) document.location.href = 'italien.html';
else if (language.indexOf('pt') > -1) document.location.href = 'portugais.html';
else if (language.indexOf('es') > -1) document.location.href = 'espagnol.html';
else if (language.indexOf('sv') > -1) document.location.href = 'suedois.html';
else if (language.indexOf('zh') > -1) document.location.href = 'chinois.html';
// puis on passe en revue les autres (la liste n'est pas complète hein...)
// Si vous avez un navigateur parlant Breton, je suis preneur de ce que ca retourne.
else
document.location.href = 'francais.html';
// Ici la page par défaut si la langue n'est pas dans la liste
// fin du script -->
</script>
</head>
<body>
</body>
</html>
Site statique
Site dynamique
Partie 2
Les système de gestion de
contenu
La notion de SGC
• Un système de gestion de contenu ou SGC ((en) Content Management
Systems ou CMS) est une famille de logiciels destinés à la conception et à
la mise à jour dynamique de site web ou d'application multimédia. Ils
partagent les fonctionnalités suivantes :
• Ils permettent à plusieurs individus de travailler sur un même document ;
• Ils fournissent une chaîne de publication (workflow) offrant par exemple la
possibilité de mettre en ligne le contenu des documents ;
• Ils permettent de séparer les opérations de gestion de la forme et du
contenu ;
• Ils permettent de structurer le contenu (utilisation de FAQ, de documents,
de blogs, de forums de discussion, etc.) ;
• Certains SGC incluent la gestion de versions.
Comment fonctionne un CMS
Création d’un compte Jimdo
• Aller sur : http://fr.jimdo.com/
Partie 3
Création d'un site Internet :
Méthodologie
Étape 1 : Préparation
Il s’agit d’une phase de réflexion, elle se
décompose ainsi :
1.
2.
3.
4.
Définir le cahier des charges
Déterminer la structure du site (arborescence)
Elaborer la charte graphique
Rechercher les ressources
Étape 1.1 : Cahier des charges
Il est élaboré par le client.
Contexte : présentation du client
Besoins, cible et objectifs : avec une présentation des contenus
Spécifications techniques du site : Ressources, chartes graphiques,
caractéristiques (statique, dynamique, nombre de pages, animations flash,
éventuellement présentation de l’arborescence, outils…)
Promotion et suivi du site : Opération de communication, Mises à jour
Pilotage du projet : interlocuteur, planning
Budget : il n’est pas toujours précisé (risque d’entraîner une augmentation des
tarifs)
Étape 1.1 : Cahier des charges
Ressources :
Juratic
http://www.juratic.com/bibliotheque/ateliers/Trame_cahier_des_charges.pdf
http://www.juratic.com/bibliotheque/ateliers/cahier_des_charges_mode_empl
oi.pdf
Joliespages.com
http://www.joliespages.com/pages/cahier1.php
Étape 1.2 : Structure du site
• Vous devrez ensuite définir la manière dont
l'information sera répartie dans les diverses
pages de votre site et de la façon dont
l'internaute pourra se déplacer à l'intérieur du
site.
• Tâche : Dessiner le plan du site sous la forme
d'un organigramme. Chaque page sera
représentée sous la forme d'un rectangle et
chaque lien par une flèche.
Étape 1.2 : Structure du site
Il existe plusieurs manières de structurer un site :
 Structure séquentielle ou linéaire
 Structure en étoile
 Structure arborescente
 Structure transversale
 Combinaison de différentes structures
Conseils
Étape 1.2 : Structure du site
Structure séquentielle ou linéaire
Elle ne reflète pas vraiment la notion d'hypertexte car elle reste
dans sa conception très linéaire. Les liens sont établis pour que
le lecteur avance de page en page du début jusqu'à la fin. Un
retour vers le sommaire est disponible depuis chaque page
Sommaire
Étape 1.2 : Structure du site
Structure en étoile
Une page centrale assure la
distribution de l'information à
travers des allers-retours
permanents.
Sommaire
Étape 1.2 : Structure du site
Structure arborescente
L'information est organisée pour aller du plus général vers le
plus spécifique.
Sommaire
Étape 1.2 : Structure du site
Structure transversale
Ce type de structure est très
lourd à mettre en place car il
offre une multitude de choix
tant pour le concepteur que
pour l'utilisateur. C'est
l'exemple du dictionnaire où
chaque mot d'une définition
renvoie à une autre
définition. Tous les nœuds
laissent la possibilité de
rejoindre chacun des autres
nœuds.
Sommaire
Étape 1.2 : Structure du site
Combinaison de différentes structures
En fonction des sujets traités par le site, plusieurs types de structures
peuvent être imbriqués à l’intérieur d’un même site.
Sommaire
Étape 1.2 : Structure du site
Conseils :
• Simplicité et clarté de l'interface de navigation,
(Facilement mémorisable, ergonomique, sans duplication des contenus…)
• Chaque page du site doit posséder une barre de
navigation et des éléments de menu évocateurs.
• Tout au long de la visite dans le site, on doit pouvoir
à tout moment revenir à la page d'accueil.
• On doit pouvoir accéder aux informations en 3 clics
• Elle doit faciliter le référencement du site.
Étape 1.3 : Charte graphique
• Elle définit l'identité visuelle du site,
• Elle définit les règles de composition des
pages,
• Elle est constituée des éléments suivants :
•
•
•
•
couleurs,
fond de page,
typographie (polices),
éléments graphiques : logo, icônes, boutons.
Étape 1.3 : Charte graphique
Conseils
• Elle doit être homogène pour l'ensemble du site.
• La couleur du texte doit être contrastée par rapport à la couleur du fond
est au service du contenu.
• Le graphisme doit mettre en valeur le contenu (évitez tout ce qui peut
détourner l’attention du visiteur : couleurs criardes, fonds d’écrans
surchargés, titres envahissants, etc.).
• Les caractères gras, souligné et italique doivent être utilisés avec
circonspection : Le gras (ou la couleur) sera préféré aux majuscules pour
mettre en évidence un élément, car il est plus facile à lire et les majuscules
signifient CRIER sur Internet. L'italique amoindrit la lisibilité du texte. Le
souligné identifie les hyperliens sur le réseau Internet et il doit être
réservé à cette fin.
Étape 1.3 : Charte graphique
Conseils (suite)
• Les polices de caractère doivent faciliter la lecture : Un maximum de trois
polices de caractères devrait être utilisé afin de conserver l'harmonie
visuelle des pages-écrans. Les polices à privilégier sont celles sans
empattement comme Helvetica, Verdana et Arial (par opposition au Times
New Roman par exemple qui est une police avec empattement), d'une
taille d'au moins 12 points.
• Les pages ne doivent pas être trop chargées en texte et en illustrations : la
mise en page doit être aérée.
• La mise en page doit faciliter le repérage de l’information et la navigation :
Il est possible de disposer un texte de plusieurs façons dans une pageécran. On peut l'afficher à la grandeur de l'écran, le disposer en tableau ou
le structurer dans un environnement par cadre, mais toujours dans un
objectif de lisibilité.
• Éviter les textes trop larges qui nécessitent les déplacements horizontaux
de la barre de défilement, éviter les mots clignotants dans un texte, etc.
Étape 1.3 : Charte graphique
Les polices - Restrictions
Une police ne s’affiche correctement uniquement si elle est
installée sur le poste client
(ordinateur utilisé pour consulter le site Web)
Pour utiliser une police spécifique, on doit l’inclure dans une
image ou une animation.
La propriété « famille de police (font-family) » sert à indiquer la
liste prioritaire des polices à utiliser. Si la première police de la
liste n'est pas disponible sur l'ordinateur utilisé pour accéder au
site, la police suivante est essayée et ainsi de suite jusqu'à ce
qu'il y en ait une qui convienne.
Étape 1.3 : Charte graphique
Les polices - Typologie
Deux types de noms existent pour catégoriser les polices :
• Le nom de famille : souvent appelées « polices ».
Exemple :"Arial", "Times New Roman" ou "Tahoma".
• La famille générique : des groupes de noms de familles
ayant des aspects uniformes.
Exemple : sérif, sans sérif, monospace
Étape 1.3 : Charte graphique
Les polices - Familles
• Sérif : avec empattements
• Sans sérif : sans empattement
• Monospace : chasse fixe
–
–
Étape 1.3 : Charte graphique
• Liens utiles :
http://www.webmaster-hub.com/outils/color.html
http://colorschemedesigner.com/
• Une source d’inspiration :
http://www.joliespages.com/
• Des exemples à ne pas suivre :
http://www.webnavets.net
Étape 1.4 : Rechercher les ressources
Réunir tous les éléments dont vous aurez besoin pour
réaliser le site : textes, illustrations, boutons, fonds
d'écran, etc.
NB : La plupart des ressources sont disponibles sur le web. Il convient
toutefois de s'assurer qu'elles sont libres de droit en consultant le
copyright du site ou en contactant l'auteur. Pour plus de détails
concernant les droits d’auteur sur Internet, consultez le site Educnet.
Étape 2 : Création
Il s’agit maintenant de créer votre site, elle se
décompose ainsi :
1.
2.
3.
4.
Rédiger les textes
Préparer les images
Réaliser des pages
Tester le site
Étape 2.1 - Rédiger les textes
Avant d’entamer la réalisation des pages, vous préparerez l'ensemble des
textes du site. Il est conseillé de les saisir dans un traitement de texte et
les corriger. Faire valider les textes par le client !
Quelques conseils
• Les sources des documents présentés sur le site doivent être indiquées.
• Qualité de la langue : l’orthographe, la formulation et la structure des
phrases sont capitales. Le niveau de langue doit être approprié au public
visé.
• La rédaction des textes doit être adaptée au mode de lecture des
internautes : une lecture rapide et souvent non linéaire. On facilitera la
lecture en utilisant des phrases courtes. Si un texte est trop long, on le
répartira sur plusieurs pages.
Étape 2.2 – Préparer les images
Vous devrez également préparer les images que
vous souhaitez intégrer dans votre site de
manière à améliorer leur qualité et optimiser
leur poids.
Cf. exercice sur http://gdetot.jimdo.com/