Cours autotutoral : Gérer un site WEB facilement.

Suite du cours Créer des PAGES WEB facilement

Note : ce cours est une adaptation du cours sur HomePage développé pour la formation continue des maîtres du secondaire avec C.Oïhénart, et concrétise de nombreuses idées de B.Gisin, B.Class et plusieurs autres.

1. Mise en place des pages sur le serveur et Gestion des liens.
2. Images et
3. Optimisation de la taille du site.
4. Une page modèle pour la cohérence de votre site.
5. Présentations de techniques diverses
6. Quelques éléments de réflexion sur la conception d'un site
7. Ressources générales sur la production de sites WEB

Exercice guidé il n'est fourni que par le WEB, par souci de cohérence entre les moyens employés et la matière enseignée.

Il peut bien sûr être imprimé, de même que tous les documents fournis par les nombreux liens inclus. Aucune documentation papier n'est fournie autrement, que chacun se sente libre d'imprimer ce qu'il juge nécessaire. Nous pensons que cela mène en fait à moins de gaspillage de papier.

Haut de la page

1° Composer vos pages directement sur le serveur

Prenez ce site web sonné. Il est plein d'erreurs à rectifier (mac.sit pc.zip)

Préparer les fichiers

Quelques conseils pour préparer les noms de vos fichiers.

Etablir les liens en local

Si vous avez changé les noms, il faudra souvent rectifier les liens y faisant référence.
Une fois votre site composé et renommé, parcourez-le dans tous les sens pour vérifier que les liens sont effectivement corrects.

Créer une page d'entrée sur votre site :

Si vous ne l'avez pas encore fait, allez sur le serveur à l'adresse de votre site, trouvez la page modèle qui est prévue pour vous.
C'est le point d'entrée sur votre site. Prenez-la depuis le serveur (dans votre espace personnel, dossier PUBLIC.WWW) ou créez-en une; elle doit s'appeler index.htm. Ouvrez-la dans Nvu, et modifiez-la à votre goût, créez des liens vers vos pages.

Travailler directement sur le serveur

Lorsque vous travaillez sur un ordinateur de l'Université, vous ouvrez directement le fichier depuis votre espace personnel. Avec un ordinateur hors Université, il faut connecter le lecteur réseau avec un client DAV.

• Plus de détail sur le protocole DAV.

Vérifier le site on-line

Pour regarder vos pages, allez à cette adresse pour votre site web étudiants unige.

N.B. Il faut actualiser (possible aussi avec la touche F5 de votre clavier) dans votre browser pour voir la nouvelle version de votre page, sinon vous voyez la page en mémoire (dans le cache) sur votre ordinateur.

Liens utiles :

Faire vérifier votre site on-line Docteur HTML. (sympa mais souvent surchargé!)

Faire vérifier votre site on-line W3org : LA référence ultime.

Faire vérifier votre site on-line pour l'accessibilité par tous et la compatibilité avec divers browsers.

Mettez de l'ordre dans votre site. Modifiez la page de titre de votre site.

2° Gestion des liens

Vérifier le site

Avec Nvu, la vérification des liens de votre site s'effectue en parcourant vos pages on-line et en vérifiant qu'elles fonctionnent effectivement.

En cas d'erreur de lien pour des pages internes de votre site, éditer le lien et redéfinir le lien (clic sur le bouton Parcourir... et sélectionner le fichier à mettre en lien) et vérifier que la case L'URL est relative à l'emplacement de la page est cochée.

Dans le cas où se sont des liens sur des pages externes à votre site qui ne fonctionnent pas, il faut trouver l'adresse en question (pas toujours facile) et la copier dans l'espace prévu (voir ci-dessus).

3° Ajouter et optimiser des images pour votre site

Vous avez probablement un site à peu près comme celui-ci : Site madagascar complet à downloader d'un coup pour mac,pour PC

Les images : comment les intégrer dans ses pages

Les animations GIF comment les créer et les intégrer dans ses pages présenté au club-internet.

IKON Québec Point de départ pour trouver tant des matériaux graphiques que théoriques sur la communication visuelle. (GIGANTESQUE!)

Ressources d'images a downloader :

• Sélection de C.Oihénart
• Liens vers des sites d'images

Pour restreindre la taille des images :

• Consulter le document : Comment optimiser une image pour le WEB
• Stock d'exemples d'Images brutes à optimiser et aussi ici
• Google images
  

En Résumé :

Choisir le JPEG pour les photos :

Pour les GIF, limiter le nombre de couleurs au minimum nécessaire.

(Gimp (logiciel libre pour PC - Mac ou Linux) ou Photoshop Element ($ware pour PC ou Mac, dans les écoles souvent...) font un très bon job ici) ou iPhoto (Mac)

Penser à changer les liens qui s'y réfèrent si on renomme un fichier

Autres liens pour optimiser les graphiques

• Pour comprendre la trame et les niveaux.
• La page d'un participant du cours 176.3 : comparatif la même image en GIF et JPEG à divers niveaux de compression.
• Site interactif : Optimiser un JPEG on-line
• Site interactif : Optimiser un GIF on-line  

A la fin de cette phase vous avez à peu près ceci : plage1.html

4° Une page modèle pour la cohérence de votre site.

On peut crééer un modèle pour la page de son site :

• Cela crée un cohérence graphique
• Cela aide à se situer
• Cela accélère la production.

Exemple de page modèle.

Remarque : plusieurs images composent ce menu. Il est possible d'éditer des images à liens multiples. Pour faire ces liens multiples sur une image, vous avez deux possibilités: la première consiste à le faire directement dans le code HTML (onglet <HTML>Source dans l'éditeur Nvu) ; la deuxième est d'utiliser un autre éditeur avec la fonction qui permet cette opération, HomePage, par exemple. Une version de HomePage est disponible ici (30 jours). Les explications pour éditer des liens multiples sont là.

Créer à partir d'une page à vous ou d'internet (depuis le site madagascar p. ex.) une page sur la plongée :

Créez une page sur la plongée

Par exemple comme ceci

5° Présentations de techniques diverses :

• Les cadres (frames) (En principe à éviter, mais il existe des bons exemples ! si : en voici un et un autre). Il faut savoir que Nvu ne gère pas les cadres et qu'il risque même de les endommager si vous tentez de les ouvrir. Il n'est donc pas conseillé d'en utiliser.
• Le Javascript

Organisez votre page d'accueil pour y intégrer différents aspects (Exercices Madagascar, ressources et liens personnels par ex.)

Vous pouvez apprendre à créer des boutons dynamiques.

Une autre possibilité consiste à utiliser des boutons sans label pour les rendre réactifs

Cela peut donner à peu près ceci

• Les formulaires.
• Le Multimédia : Sons, Vidéo, etc.

6° Ressources générales sur la production de sites WEB :
Penser l'organisation du site globalement

Envisager la circulation dans votre site globalement :

Probablement la ressource la meilleure : Université de Laval

Pour des conseils de conception

• Comment on lit une page WEB (En)
• Webreference sur la conception graphique des pages
• L'emploi de la couleur (En) la couleur sur le WEB nombreux liens sur la couleur
• Remarquable site qui intègre la dimension pédagogique à la conception Guide de conception pédagogique et graphique d'un site éducatif sur le réseau Internet.
• Pour une réflexion sur le fond et la forme.
• Une sélection très remarquable de C. Oihénart

Pour des questions spécifiques à Nvu

• La FAQ officielle de Nvu (en)

Pour ajouter un dictionnaire à Nvu dans une autre langue que l'anglais : le site OpenOffice.org

Il vous faudra sans doute réorganiser le site à la suite de ces réflexions.
Vérifiez ensuite à nouveau tous les liens de votre site.

D'autres éditeurs de pages Web :

• Dreamweaver
• Présentation
• Dreamweaver Basics (Cours on-line)(En)
• Golive
• HomePage Version gratuite 30 jours (Mac, Windoze) Autre serveur si pas dispo
• Gérer un site facilement avec HomePage