La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Création de sites Web À partir d’un Système de Gestion de Contenu.

Présentations similaires


Présentation au sujet: "Création de sites Web À partir d’un Système de Gestion de Contenu."— Transcription de la présentation:

1 Création de sites Web À partir d’un Système de Gestion de Contenu

2 Introduction Généralités sur le Web

3 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.adresse IP nom de domaine Dès 1991, le World Wide Web est ouvert au grand public. IPv4 : (Max 4,2 milliards d’adresses) IPv6 : 1fff:0000:0a88:85a3:0000:0000:ac1f:8001 (Max 3,4 X adresses)

4 Les premiers outils 1990 : Premier navigateur WorldWideWeb (plus tard rebaptisé nexus), utilisation confidentielle : premier navigateur stable et largement diffusé, NCSA Mosaic  NCSA Mosaic 1994 : Netscape Navigator 1995 : Internet Explorer 1 

5 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.World Wide Web HTMLXHTMLXMLRDFCSSPNGSVGSOAP

6 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…)

7 Test Acid 2 Il s’agit d’un indicateur de la prise en charge des standards du W3C par les navigateurs. IE7Firefox 2.0  Opera 9.0

8 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. HTTPHTTPS 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.URL chaîne de caractères 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.hyperlien 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). HTMLlangage informatique 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.serveur Webserveur HTTP

9 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é.navigateur Webclient HTTP 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).page Web 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.éditeur HTML 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.site Web

10 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.adresse Web 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.hébergeur Web Une agence Web est une entreprise de services informatiques réalisant des sites Web pour ses clients.agence Web Un annuaire Web est un site Web répertoriant des sites Web.annuaire Web

11 Partie 1 Création de sites Web Historique

12 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)HTML

13 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.

14 É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.WYSIWYGpage Webnavigateurs Ex. : Dreamweaver, Komposer… (1) What You See Is What You Get

15 Exemple éditeur WYSIWYG (Dreamweaver CS3)

16 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

17 Exemple de JavaScrip (détection de la langue)

18 Site statique

19 Site dynamique

20 Partie 2 Les système de gestion de contenu

21 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 :site web 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 ;workflow 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.) ;FAQblogsforums de discussion Certains SGC incluent la gestion de versions.gestion de versions

22 Comment fonctionne un CMS

23 Création d’un compte Jimdo Aller sur :

24 Partie 3 Création d'un site Internet : Méthodologie

25 É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

26 É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.

27 Étape 1.1 : Cahier des charges Ressources : Juratic oi.pdf Joliespages.com

28 É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.

29 Étape 1.2 : Structure du site Il existe plusieurs manières de structurer un site :  Structure séquentielle ou linéaire Structure séquentielle ou linéaire  Structure en étoile Structure en étoile  Structure arborescente Structure arborescente  Structure transversale Structure transversale  Combinaison de différentes structures Combinaison de différentes structures Conseils

30 É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

31 Étape 1.2 : Structure du site Structure en étoile Une page centrale assure la distribution de l'information à travers des allers-retours permanents. Sommaire

32 É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

33 É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.

34 É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.

35 É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.

36 É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.

37 É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.

38 É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.

39 É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.

40 É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

41 Étape 1.3 : Charte graphique Les polices - Familles Sérif : avec empattements Sans sérif : sans empattement Monospace : chasse fixe – –

42 Étape 1.3 : Charte graphique Liens utiles : Une source d’inspiration : Des exemples à ne pas suivre :

43 É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.Educnet

44 É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

45 Étape 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.

46 É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


Télécharger ppt "Création de sites Web À partir d’un Système de Gestion de Contenu."

Présentations similaires


Annonces Google