présente Imaginer, concevoir, mettre en ligne et maintenir un site Web

2 4-nov-03© Préambule La création d’un bon site Internet requiert de multiples compétences : Capacité rédactionnelles Sens de l’esthétique Compétences en informatique (multiplicité d’outils mis en œuvre, problématiques liées au développement) Nous allons ici vous présenter tous ces aspects sur lesquels nous allons revenir en détail tout au long de la saison. Bonne présentation…

3 4-nov-03© Agenda L’idée Les matériaux (de base, génériques) L’organisation du site La création du site Le dépôt de nom de domaine La mise en ligne Le référencement Les statistiques

4 4-nov-03© L’idée Site personnel ou site « de commande » un bon site passe par une maîtrise du sujet. L’articulation interne du site est liée à une vue claire du contenu à mettre en ligne. Les éventuelles évolutions du site doivent, dans la mesure du possible, être prisent en compte au plus tôt.

5 4-nov-03© Les matériaux Un plat n’est bon que si les ingrédients sont de qualité. Idem pour les sites web. Plus de 50% de la qualité d’un site web provient de la qualité des matériaux que l’on a à disposition. Les matériaux doivent être les plus diversifiés possibles (images, textes, sons, vidéos) Il y a deux types de matériaux : –Les matériaux directement liés au sujet –Les matériaux connexes

6 4-nov-03© Les matériaux liés au sujet Ce sont là les matériaux principaux. Avant de se lancer dans la conception d’un site il est primordial de récolter ou concevoir toute la matière qui va devoir être mise en ligne. Cette matière doit être composée dans la mesure du possible d’au moins des textes et des images (à relativiser en fonction du site) L’analyse de ce contenu va permettre de définir l’architecture du site à mettre en ligne. Où ça ? Ce contenu vous est fourni, vous demandez à ce qu’il vous soit fourni ou vous concevez vous même ce contenu?

7 4-nov-03© Les matériaux connexes Les matériaux vitaux peuvent être accompagnés de matériaux de moindre importance mais fort utiles pour donner vie à un site. Ex : des images ou autres icônes qui peuvent enrichir utilement le contenu de base, des compléments de textes, des liens sur des sites du même sujet. Attention aux notions de droits d’auteur et au droit à l’image ! Où ça ? Bibliothèque d’images, création personnelle, Internet

8 4-nov-03© L’organisation du site Vous avez désormais tout le contenu de votre site en format binaire ainsi qu’une partie de votre contenu connexe… il est temps d’imaginer l’organisation de votre site ! Découper le contenu en « chapitres » Imaginer les liens possibles entre ces différents « chapitres » Garder présent à l’esprit les évolutions afin qu’elles puissent s’intégrer aisément dans le site En ressortir une ébauche de « politique navigationnelle » concernant la gestion des menus notamment.

9 4-nov-03© Les différents types de navigation - 1 Navigation sous forme de cases de commande sur la gauche

10 4-nov-03© Les différents types de navigation - 2 Navigation sous forme de menu local

11 4-nov-03© Les différents types de navigation - 3 Conception d’un site sous forme de « frames ». Ici deux frames sont utilisées : –Une en haut pour la gestion de la navigation –Une principale en bas

12 4-nov-03© Les différents types de navigation - 4 Conception d’un site sous forme de « frames ». Ici trois frames sont utilisées : –Une en haut –Une sur la gauche –Une centrale

13 4-nov-03© Les différents types de navigation - 5 Rappel des menus sous forme de texte en bas par exemple.

14 4-nov-03© La création du site - Les outils Pour pouvoir répondre à tous les besoins de la création d’un site il faut un certain nombres d’outils. La liste des principaux ci-dessous : Un éditeur de site (Golive) Un logiciel de manipulation d’images (Photoshop) Un outil de visualisation d’images planche contact Un Traitement de texte (Word) Un logiciel FTP Eventuellement : Un logiciel de création d’images animées Animations Flash Un logiciel d’aide à la conversion d’images aux formats Internet

15 4-nov-03© La création du site - le démarrage A ce niveau il convient d’élaborer la ou les deux pages les plus importantes du site : –La page principale –Éventuellement la page d’accueil si celle-ci est différente de la page principale La « page principale » est le squelette du site. C’est ici que l’on retrouve le menu et que l’on met en place la « politique navigationnelle » retenue. L’aspect visuel du site est défini à 80% par cette page ! Dans le cas d’une page d’accueil celle-ci devra être esthétiquement travaillée. La page d’accueil devra être dans le même esprit que la page principale pour conserver une unité graphique logique.

16 4-nov-03© La création du site - Golive™ De nombreux outils de mise en page Web existent sur le marché. a, il y a quelques années opté pour un outil racheté par la société Adobe et qui porte désormais le nom de Golive. a investi sur cet outil en apprentissage, en licences logiciel, en littérature associée à cet outil. Cet outil existe sur plate-forme Macintosh et PC. Les points forts de Golive sont, en autre : –Conception de sites –Conception de site en mode collaboratif –Gestion de modèles –Définition de sous parties de site une seule fois –Moteur FTP intégré –Intégration avec les produits d’Adobe (Photoshop) –Ouverture du produit (ajout d’actions tierces)

17 4-nov-03© La création du site - Outils Golive™ Un site est un ensemble de fichiers informatiques rangés dans divers dossiers. Même si Golive en facilite la gestion il est recommandé de classer avec la plus grande minutie tous ces fichiers. (notamment dans le cadre de transfert de votre travail pour intégration dans un site complet) Les sauvegardes : toujours penser à sauvegarder vos travaux ! Ces aspects seront repris et bien évidemment détaillés lors de formations spécifiques en cours de saison.

18 4-nov-03© La création du site - faire attention… Qualité des images Code HTML compatible avec les navigateurs et les plates- formes Poids des images, vidéos Liens Internet cassés

19 4-nov-03© Dépôt du nom de domaine Par exemple : Le nom de domaine permet de retenir plus facilement les coordonnées d’un site Internet en lieu et place d’un n° IP du style Le dépôt des noms de domaine est réalisé auprès d’organismes spécialisés. Il s’agit d’un loyer renouvelable chaque année ou tous les x années. Les dépôts de noms de domaines.fr ou.asso.fr par exemple nécessitent des preuves de propriété du nom. Les dépots des noms de domaines.com,.net,.org etc ne nécessitent aucun document. Ils peuvent s’effectuer en 10 minutes pour un paiement par CB. Le coût pour une année est de moins de 30 € pour ces domaines. Des informations techniques concernant le serveur doivent être données (pas obligatoirement) lors du dépôt du nom de domaine. Une autre opération doit être réalisée sur le serveur pour faire le lien entre le nom de domaine déposé et le dossier informatique qui contient le site.

20 4-nov-03© La mise en ligne Internet Serveur Paris - Levallois Serveur Paris - Levallois Internautes Partout dans le monde Site à télécharger Chez vous… FTP HTTP

21 4-nov-03© La mise en ligne - 2 La copie du site doit être réalisée sur le serveur de afin que le site puisse être visible du monde entier. Le transfert s’effectue via le protocole FTP (file transfert protocol) Le module FTP est inclus dans Golive. Un compte FTP (identifiant & mot de passe) doit vous être fourni pour réaliser la copie du site qui se trouve sur votre ordinateur vers le serveur.

22 4-nov-03© Le référencement On recherche des sites sur Internet essentiellement par l’intermédiaire de moteurs de recherche. Afin d’être visible sur ces moteurs de recherche il faut se faire « référencer ». On indique certaines informations (brève description du site, etc) concernant le site via des « meta-tag » à destination des moteurs de recherche avant de se faire référencer. On référence plus particulièrement la première page mais on peut très bien référencer plusieurs pages du site.

23 4-nov-03© Les statistiques Il est fort utile de savoir si des visites sont réalisées sur le site. Si oui savoir comment les gens sont venus, combien de temps ils sont restés sur le site, etc. Par exemple :