Création et Gestion de Sites Web et de Portails Documentaires

Ce laboratoire présente les concepts fondamentaux liés à la création et à la gestion de sites web et de portails documentaires. Il permet de comprendre les notions essentielles du web, des sites statiques et dynamiques, ainsi que des portails documentaires. Ce TP s'adresse aux étudiants en sciences de l'information documentaire souhaitant acquérir les compétences nécessaires pour concevoir et gérer un portail documentaire. Aucun matériel spécifique n'est requis, seulement un accès à un ordinateur avec un navigateur web et des connaissances de base en informatique.

Objectifs

• Comprendre les concepts fondamentaux du web et des réseaux informatiques.
• Différencier les sites web statiques et dynamiques.
• Connaître la structure et les fonctions d’un portail documentaire.
• Appréhender les principes de conception d’un site web et d’un portail documentaire.
• Identifier les bonnes pratiques d’organisation et de navigation dans un portail.
• Maîtriser les notions d’ergonomie et de présentation adaptées aux utilisateurs.

Prérequis et installation

• Connaissances de base en informatique et navigation web.
• Compréhension élémentaire des réseaux informatiques (LAN, WAN, protocoles).
• Accès à un ordinateur équipé d’un navigateur web récent (Internet Explorer, Netscape, ou équivalent).
• Éditeur HTML pour la création de pages statiques (exemple : Notepad++, Sublime Text).
• Connaissance élémentaire du langage HTML est un plus.

Comprendre les concepts fondamentaux du web

Commencez par étudier la notion de réseau informatique, qui désigne un ensemble d’ordinateurs reliés pour échanger des informations et partager des ressources. Apprenez la différence entre les réseaux locaux (LAN), métropolitains (MAN) et étendus (WAN), dont Internet est le plus connu.

Ensuite, familiarisez-vous avec le concept de protocole, notamment TCP/IP, qui régit la communication entre ordinateurs sur Internet. Comprenez que l’Internet est un réseau mondial interconnectant des millions d’ordinateurs, accessible grâce à des protocoles communs.

Enfin, distinguez le Web (World Wide Web) de l’Internet : le Web est une application multimédia de l’Internet, composée de documents hypertextes et hypermédias reliés par des liens cliquables.

Un résultat correct est la capacité à expliquer ces notions avec vos propres mots et à identifier les différents éléments d’un réseau informatique et du Web.

Différencier site web statique et site web dynamique

Créez un site web statique simple en utilisant un éditeur HTML. Ce site sera constitué de pages HTML fixes, stockées sur un serveur et renvoyées telles quelles aux visiteurs. Vérifiez que le contenu ne change pas automatiquement et que toute modification nécessite une intervention manuelle dans le code source.

<!DOCTYPE html>
<html>
<head>
  <title>Site statique exemple</title>
</head>
<body>
  <h1>Bienvenue sur mon site statique</h1>
  <p>Ce contenu est fixe.</p>
</body>
</html>

Ensuite, observez un site dynamique, où les pages HTML sont générées à la demande en interrogeant une base de données. Comprenez que la mise à jour est facilitée, que le contenu peut être personnalisé et que l’administrateur utilise des formulaires pour modifier les données affichées aux visiteurs.

Un résultat correct est la compréhension claire des différences entre ces deux types de sites, notamment en termes de gestion du contenu et de mise à jour.

Étudier la structure et la navigation d’un portail documentaire

Apprenez à concevoir l’arborescence d’un portail documentaire en préparant une organisation claire des fichiers et répertoires sur votre disque dur. Cette arborescence doit refléter la répartition thématique de l’information et faciliter la maintenance.

• Choisissez des noms de fichiers et dossiers intelligibles et définitifs.
• Veillez à ce que les URL soient courtes et stables.
• Prévoyez une redirection en cas de suppression d’URL pour éviter la désorientation des usagers.

Ensuite, organisez la navigation en tenant compte du comportement des internautes qui lisent rarement intégralement les pages. La navigation doit être intuitive, permettre de savoir où l’on se trouve, où l’on est allé et où l’on peut aller.

• Limitez le premier menu à cinq à sept unités d’information.
• Utilisez un maximum de trois niveaux de sous-menus.
• Intégrez un outil de recherche pour les portails volumineux.
• Proposez un plan du site ou un sommaire pour faciliter la représentation mentale.

Un résultat correct est un organigramme clair du portail, sans cul-de-sac ni récursivité, permettant une navigation fluide et efficace.

Utiliser les pages de cadres (frames) pour la navigation

Expérimentez la création de pages utilisant des frames pour diviser l’écran en sections indépendantes. Par exemple, un cadre fixe contenant le menu, et un autre cadre affichant le contenu sélectionné.

Attention aux limites des frames :

• Les moteurs de recherche peuvent mal indexer les pages en frames.
• Les anciennes versions de navigateurs peuvent mal gérer les favoris.
• Les liens directs vers une page spécifique peuvent ne pas afficher le contexte complet.

Pour pallier ces limites, ajoutez des liens de retour vers la page d’accueil dans chaque page principale.

<frameset cols="20%,80%">
  <frame src="menu.html" name="menu">
  <frame src="accueil.html" name="contenu">
</frameset>

Un résultat correct est une page web divisée en cadres fonctionnels, avec une navigation fluide et des liens de retour bien positionnés.

Appliquer les principes d’ergonomie et de présentation

Étudiez le fonctionnement de la lecture sur écran. Comprenez que le lecteur est submergé d’informations et que l’émotion précède la raison dans la perception d’un texte. L’œil ne lit pas linéairement mais effectue des saccades, captant des groupes de mots en un quart de seconde.

Pour optimiser la lecture :

• Placez le logo en haut à gauche avec un lien vers la page d’accueil.
• Placez le moteur de recherche en haut à droite, si disponible.
• Présentez les menus à gauche ou en haut, de préférence en vertical.
• Laissez des espaces blancs entre les paragraphes pour aérer le texte.
• Privilégiez les titres courts (moins de 15 mots), les synthèses, tableaux, schémas, graphiques et images.
• Évitez les longs textes non aérés qui peuvent décourager le visiteur.

Un résultat correct est une page claire, attrayante, facile à parcourir, qui guide l’œil du lecteur et facilite la compréhension rapide de l’information.

Résultats attendus

• Maîtrise des notions de réseau, protocole, Internet et Web.
• Capacité à différencier et créer un site web statique simple.
• Compréhension du fonctionnement d’un site dynamique et de ses avantages.
• Conception d’une arborescence claire et stable pour un portail documentaire.
• Organisation d’une navigation intuitive avec menus limités et outils de recherche.
• Utilisation efficace des frames avec gestion des limites.
• Application des règles d’ergonomie pour une présentation lisible et attractive.

Pièges courants

• Confondre Internet et Web, ce qui peut entraîner une mauvaise compréhension des technologies.
• Créer des sites statiques sans prévoir de mise à jour facile, rendant le site rapidement obsolète.
• Organiser une arborescence confuse avec des noms de fichiers peu explicites ou des URL instables.
• Concevoir des menus trop nombreux ou des sous-menus profonds, dépassant la capacité de mémoire à court terme des utilisateurs.
• Utiliser excessivement les frames sans prévoir de liens de retour, ce qui peut désorienter les visiteurs et nuire au référencement.
• Ignorer les principes d’ergonomie, en particulier la disposition des éléments, la taille des titres et la densité du texte.
• Omettre d’intégrer un moteur de recherche dans les portails volumineux, compliquant l’accès à l’information.