Embed Size (px)
Citation preview
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 non-lucratif, 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
Opera 9.0
http://acid2.acidtests.org/
http://acid3.acidtests.org/
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.*/
• elsevar 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.
• elsedocument.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
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. Définir le cahier des charges 2. Déterminer la structure du site (arborescence) 3. Elaborer la charte graphique 4. Rechercher les ressources
Étape 1.1 : Cahier des charges
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)
Il est élaboré par le client.
Étape 1.1 : Cahier des charges
Ressources :Juratichttp://www.juratic.com/bibliotheque/ateliers/Trame_cahier_des_charges.pdfhttp://www.juratic.com/bibliotheque/ateliers/cahier_des_charges_mode_emploi.pdf
Joliespages.comhttp://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éaireElle 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 arborescenteL'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
Sommaire
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.
Étape 1.2 : Structure du site
Combinaison de différentes structures
Sommaire
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.
É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 - RestrictionsUne 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. Rédiger les textes 2. Préparer les images 3. Réaliser des pages 4. 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/
