Prévision d’un accès en ligne avec des informations de nature et de niveaux différents 

Résolution d’écran et espace d’affichage

La définition d’écran de la plupart des internautes est de : 480×640 ou 800×600. Il faut être conscient qu’on ne peut contenter les millions de connectés ; c’est pourquoi le questionnaire est d’une grande utilité car il nous renseigne sur la configuration utilisée par »nos » visiteurs.
En effet, chaque configuration influe sur le résultat affiché sur l’écran des utilisateurs. Si les visiteurs ont une résolution d’affichage différente de la nôtre, le texte va se placer différemment.
Par exemple, il faut savoir que ce sont les images qui sont le plus affectées par la différence de résolution d’écran des machines des internautes. Ainsi, le logo inséré dans la frame de droite apparaît d’une taille raisonnable en 800×600 mais prenait la moitié du cadre en 640×480. Il a fallu le réduire.
Un conseil important pour gérer la taille des pages : prendre en compte :
– Les 3 barres d’outils constamment présentes sur les écrans des internautes (barre de navigation, de location et personnelle).
– L’espace pris en pixels par les ascenseurs horizontal et vertical.
– Les marges appliquées par les navigateurs*.
Par exemple, au moment où on travaille la taille de la frise que l’on va insérer dans la page d’accueil, il faut penser à ces paramètres au nom de la lisibilité et de la visibilité.

Vitesse de transmission et temps d’affichage

La rapidité d’affichage : condition sine qua non via l’utilisateur.
La vitesse standard pour la transmission des données est aujourd’hui de 28800 et plus couramment de 33600 et de 56Kbps pour les modems rapides.
Le modem 56 K permet une liaison à 56000 bits par seconde, ce qui est presque identique à la vitesse du RNIS* (64000 bits par seconde).
Modems lents : 9600 bps ou 14400bps
Quelle connexion pour nos usagers : modem ou réseau ?

Analyse de l’existant

La plupart de nos utilisateurs sont connectés par réseau (Renater). Il faut cependant penser aux particuliers. De fait, on paramétra l’ordinateur en vitesse standard (cf. information à gérer au niveau de la barre d’état : Edition > Préférences > Barre d’état. Choisir 28.8)et on évitera les images ou graphiques trop lourds (pas plus de 10 à 15 Ko* par pages). Quand les images sont importantes, prévoir une version texte.
Les logogrammes insérés dans la page d’accueil sont en GIF entrelacé c’est à dire que le dessin est dépouillé pour être facilement compressé.
En somme, il faut vérifier en combien de temps se chargent les pages, quitte à chronométrer l’affichage. Le temps minimal d’attente pour l’internaute est d’environ 15 secondes.

Affichage en couleur : 256 couleurs

Pour optimiser la taille des fichiers .gif* ou .jpeg*, il faut s’assurer de ne pas utiliser trop de couleurs. Utiliser de préférence la palette de 8 bits (256 couleurs) plutôt que la palette de 16,7 millions de couleurs, cela permettra une économie de bits et donc un fichier moins lourd.

Logiciels utilisés

On a besoin de 3 types de logiciels pour la réalisation d’un document multimédia susceptible de contenir du texte et des images : un navigateur, un logiciel pour éditer le fichier texte (.html) et un logiciel pour manipuler les fichiers images (.gif ou .jpeg).

Les navigateurs

Les 2 logiciels Internet Explorer et Netscape Navigator sont indispensables pour visualiser et tester localement sur notre écran l’apparence des pages. On a la possibilité de les télécharger gratuitement.

Les éditeurs HTML

Un éditeur HTML permet de créer, de gérer et de publier des pages web sans rien connaître du langage HTML. Il propose une barre d’outils comme dans un traitement de texte Word. On utilise en fait l’utilitaire comme logiciel d’écriture.
Les pages sont affichées selon le principe du WYSIWYG (What You See Is What You Get) c’est-à-dire que le document est créé et affiché dans l’éditeur HTML tel qu’il sera présenté sur les écrans des utilisateurs par le navigateur.. Le logiciel s’occupe de générer automatiquement le code HTML sous jacent lors de la création ou de la modification des pages HTML.
Certains éditeurs offrent plus de fonctionnalités que d’autres8 Faire une recherche sur Internet grâce au mot clé « editors » pour avoir accès à une liste d’éditeurs HTML.
Editeurs utilisés :
-le logiciel Netscape Composer : il s’agit d’un module de Netscape Navigator. Gratuit, simple d’utilisation, convivial mais limité.
-le logiciel Dreamweaver version 2.0 : va nous permettre : d’utiliser les ancres nommées vers un autre document, ce que ne permettait pas Composer de faciliter la navigation avec la création de cadres, frames en anglais de créer une arborescence du site une mise à jour instantanée des liens. Chaque logiciel dispose de ce qu’on appelle un didacticiel. Il faut savoir que les pages d’aide en ligne sont rédigées en anglais. Un site du centre de développement de Dreamweaver est régulièrement mis à jour : on y trouve des conseils en anglais.

Les logiciels pour traiter les images

Les images créées dans un logiciel de retouche et de traitement d’images numérisées se composent de petits carrés appelés « pixels ». On appelle ces images, des images « bitmap »* à la différence des images dites « vectorielles », autre type d’image informatique.
Travailler sur des images « bitmap » revient à traiter, à modifier des ensembles de « pixels. Il s’agit en somme d’obtenir une image électronique à partir d’une photographie ou d’un dessin.

Logiciels utilisés

-Photoshop version 3.0.5 (Adobe) environ 500 frs
-Paint Shop Pro version 5 (Jase Sofwork)environ 600 frs : version d’évaluation téléchargée sur le site de l’éditeur. Celui-ci est plus simple d’utilisation. Par contre, pour un site de littérature qui tend de plus en plus à diffuser les couvertures des ouvrages, on rencontre un problème au niveau du détramage des couvertures (ôter la trame). On peut le faire avec le logiciel PhotoExpress.
Pour les images web, il existe plusieurs logiciels comme pour les éditeurs HTML : Image Ready (Adobe), Fireworks (Macromédia, 1998). L’avantage de ce dernier logiciel est la possibilité d’ouvrir 2 fenêtres simultanément pour visualiser l’effet de la compression sur une image JEPG. Avec les autres éditeurs, on est obligé de rouvrir à chaque fois l’application.

Périphériques

Pour tout périphérique branché sur une machine, il faut installer sur le disque dur de la même machine un driver ou encore un pilote, c’est à dire un logiciel qu’on peut télécharger et qui contient des fichiers comme par exemple l’exécutable d’installation (setup.exe) et quelques fichiers textes (readme.txt) et d’autres fichiers nécessaires à l’installation (install.exe). Ce fichier se trouve dans la plupart des cas sous le répertoire intitulé ProgramFiles / Iomega / Tools / Guest9x. Guest (invité en anglais) est un programme qui permet le dialogue entre l’ordinateur et le périphérique.

Lecteur Zip 100

Une fois sur le site, on trouve : le nom du logiciel, une brève description, l’auteur, la taille du fichier (il faut assez d’espace, de RAM* sur votre disque dur pour l’installer) et surtout un lien qui va permettre de le télécharger. Avant de le télécharger, il faut savoir où vous allez l’installer sur votre disque dur. (dans le répertoire ProgramFiles).
Le lecteur Zip doit être relié à la machine avant de charger le logiciel.
Catégorie: software, drivers. Choisir Iomega utilitaire
Télécharger* l’utilitaire Iomega Ware version 1.1.3 Size : 3.9MB
Enregistrement sous: C:/TEMP/Win9x_ioml 13_fr.exe
Temps de chargement : environ 20 minutes
Lorsque le logiciel est installé, il est demandé un réamorçage de la machine : éteindre la machine.
Il est possible de télécharger le pilote Zip sans licence. En fait, l’éditeur nous donne les moyens d’utiliser le lecteur acheté chez lui.

Scanner : Scan 600 SNAP

Scanner utilisé : celui du CAVUL.

Les photos prises lors du Salon de Valenciennes et les pictogrammes de M. Bury doivent être convertis en un format lisible par l’ordinateur. C’est pourquoi il faut les numériser grâce à un scanner et les enregistrer sur une disquette puisque le scanner est branché sur une autre machine que celle où on travaille.

Personnes ressources

-Olivier Barron, ASI (Assistant Ingénieur en Informatique).Rôle : aide pour l’installation du lecteur Zip, réponses à mes questions.
-Mme Marie Després Lonnet, webmaster* Rôle : installer le répertoire jeunet sur l’ordinateur serveur. Le répertoire est transféré grâce à un logiciel FTP.
-Jérémy Petit, étudiant en DESS SID en stage à Lille3
Rôle : réponses à mes questions, réduction du fichier image inséré à la page d’accueil, compréhension du code source, inscription du code Javascript dans les pages du site.
-Bertrand Croizille, Chargé d’enseignement en Sciences de l’Information et de la Documentation.
Ces mêmes personnes ne seront pas toujours présentes. C’est en fait le contact avec des experts basés sur la lecture d’ouvrages qui permet d’avancer dans la compréhension de tous les facteurs qui participent à la gestion de techniques au service d’une logique d’usage.
J’ai pu constater que le passage par la modélisation des problèmes rencontrés facilitait le dialogue et donc la compréhension avec les explications des personnes ressources. La modélisation m’a permis de manipuler les concepts étrangers, d’avoir un retour sur mes raisonnements incertains.

Définir un cahier des charges pour la gestion de projet

Une démarche de gestion de projet s’avère indispensable. Réaliser de manière empirique un projet sans réflexion en amont, sans formalisation ne peut conduire qu’à satisfaire les concepteurs et non le public visé. « La conception ne doit pas aboutir simplement à l’aspect visuel du site mais intégrer la définition du site, sa structure, son organisation, l’architecture technique, les outils nécessaires.. , »10
C’est pourquoi il est nécessaire de rédiger un cahier des charges, d’utiliser une méthodologie de projet et de mettre en place un processus de validation.

Vers la rédaction d’un cahier des charges

Un cahier des charges doit nous permettre de déterminer nos objectifs, nos besoins et nos moyens afin de mener le projet à son terme. Sa rédaction permet de faire un bilan : qu’estce qui existe? Une machine à la BdB pas assez puissante pour supporter le logiciel Dreamweaver, un répertoire jeunet et la possibilité de travailler avec l’utilitaire Composer. Le logiciel Dreamweaver a été acquis cette année par FUFR IDIST. Une machine pouvant héberger ce logiciel nous sera prêtée par le CAVUL et début juillet, une autre machine sera mise à notre disposition à la Bdb.
Le rôle d’un cahier des charges est plus précisément de servir de document de référence : doivent y figurer comme informations une synthèse des caractéristiques techniques et attentes des clients, les conditions d’utilisation, les caractéristiques esthétiques ou ergonomiques, celles relatives à la fiabilité des données, une étude de faisabilité technique, une méthodologie de gestion de projet caractérisée par la satisfaction d’un besoin, une analyse du système d’information et les procédures à suivre pour appliquer les solutions informatiques validées. Il permet aussi de maintenir la cohérence du projet dans le temps et de définir ce quel’on attend de ceux qui reprendront le projet. C’est en quelque sorte la « charte technique » du projet.

Vers une méthodologie

Comment faire ?

Il s’agit de répondre à la question : « comment faire? », c’est à dire comment travailler en équipe, comment se former, comment créer une maquette, comment évaluer ses compétences, comment transférer ses compétences, comment évaluer la charge de travail et son temps,…On comprendra pourquoi la lere partie de ce rapport est la plus conséquente car la phase de conception représente le socle de tout projet.
La lere phase de toute méthodologie est bien l’expression des besoins, des attentes.
Cela est un objectif difficile à remplir quand il n’y a pas d’utilisateur standard. C’est pourquoi il doit être défini et ce par le biais du questionnaire. « La vraie performance d’une machine serveur, c’est celle de l’utilisateur. »11 Il s’agit de mettre en oeuvre un produit « fini » qui soit conforme au standard extrait du questionnaire.
La seconde phase est la réalisation hors connexion (en local), la vérification des liens et de la mise en forme de l’ensemble des pages et enfin, la troisième phase, la mise en ligne sur le web suivie d’une évaluation du travail. La phase de réalisation dépend en grande partie de la phase de conception.

Deux méthodes

J’ai tenté deux méthodes : je pense qu’il faudrait savoir en tirer le meilleur parti tout en connaissant les limites car elles peuvent s’avérer complémentaires.
1ere méthode : On dispose d’un temps imparti, tant pis pour les erreurs et tant pis pour ce qui n’a pas été écrit. Cette méthode implique disponibilité certes mais elle implique aussi de prendre en compte la contrainte des horaires (9h-12h et 13h-17h). Méthode employée une semaine avant la mise à jour après avoir eu connaissance de la parution de l’article concernant le site dans la revue L Ecole des Lettres.
2eme méthode : On essaye, on tâtonne pour découvrir les différentes fonctionnalités du logiciel ou on va à l’essentiel avec ce que l’on sait même si l’on sait que l’on est entrain de perdre du temps. Par exemple, le logiciel Dreamweaver permet grâce à une fonction de taper dans une boîte de dialogue un paramètre, paramètre qui sera appliqué simultanément sur l’ensemble des fichiers du site. Si on ne trouve pas cette fonctionnalité, il faut ouvrir tous les fichiers un par un et leur appliquer ce paramètre. On a beau lire le manuel, cela ne va pas de soi d’utiliser le logiciel.
C’est un problème de formation : se former à l’outil n’est certes pas suffisant mais c’est nécessaire. La maîtrise d’un logiciel ne va pas forcément de soi même si une fois les fonctionnalités mémorisées et comprises, elles semblent simples à mettre en oeuvre. Il faut connaître leur existence et savoir pourquoi et comment les utiliser.

Introduction

Après la longue phase de conception, nous passons à la phase de réalisation.
Le site de littérature de jeunesse de Lille 3 est un « objet d’information ». Selon Gérard Weidenfeld, un objet regroupe une partie statique (un ensemble de données) et une partie dynamique (un ensemble de procédures manipulant ces données). » Nous essayerons donc dans cette partie de décrire à travers une arborescence initiale l’état du système tel qu’il a été conçu et d’appliquer sur l’ensemble du système les règles de réécriture proposées par Karine Marié. Il s’agit plus concrètement de structurer les données pour répondre à des besoins pratiques :
en « classes » à partir desquelles l’on génère des sous-classes en ce qui concerne la gestion du disque dur et l’architecture du système. par l’intermédiaire de frames pour gérer la logique navigationnelle, pour décrire l’offre des informations au travers de rubriques et pour en faciliter l’exploitation.
Il faut se demander en parenthèse: comment décrire les fichiers ? Leurs relations ? Comment les modéliser ?
Pour répondre à ces besoins pratiques, 2 procédures :
-établir les liens du système sur papier
-décrire les méthodes et procédures

Structure du site et liens hypertextes

Cette phase correspond à la (re)construction du site. Il s’agit de structurer et de concevoir sur papier un ensemble de pages grâce aux liens hypertextes. Les fichiers qui constituent le site sont abrités dans un répertoire « jeunet » placé sur le disque dur d’une des machines de la Bdb.( Poste de travail / Ms-Dos © / Pages HTML Jeun / jeunet).
Les travaux des étudiants désireux d’être publiés ont été enregistrés et intégrés au répertoire « jeunet ».

Arborescences

Se pose le problème de la continuité, paramètre primordial dans l’approche du système : il faut penser l’architecture du système à long terme sachant qu’elle sera amenée à évoluer.

Arborescence initiale et gestion du disque dur

C’est dans les deux cas gérer l’information en rubriques : en créant de nouveaux fichiers intégrés à la rubrique « actualités » et en créant des répertoires pour remédier à une future liste imbuvable de fichiers contenus dans un même et seul répertoire jeunet.
Gestion du disque dur la casse : majuscules ou minuscules?: Les noms des fichiers comprenaient tantôt des majuscules, tantôt des minuscules. Or, si, sous Windows, la distinction n’est pas importante, elle est sur Internet car le système d’exploitation des serveurs le plus répandu est Unix qui tient compte de la casse. On respectera donc « la casse » des caractères (une autre contrainte du web ) : que des minuscules.
Pour informations, le nom de la page d’accueil d’un site peut avoir une extension .htm ou .html. Comme certains fournisseurs d’accès n’acceptent que la seconde extension, la page d’accueil nommée index.htm a été renommée index.html.
A long terme, la multiplication des fichiers rendrait le site ingérable. Des répertoires et sous-répertoires ont été créés.

Table des matières

INTRODUCTION 
Partie I. CONCEVOIR
Introduction 
1. Présentation du projet
1.1. La refonte du site de littérature de jeunesse de Lille
1.1.1 Enoncé de la mission
1.1.2 Qu’est-ce qu’une refonte d’un site web ?
1.1.3 L’enjeu technique
1.2. Outils conceptuels
1.2.1 Transmission de connaissances et stockage de l’information
§ Mémoire humaine
§ Transfert d’un savoir naissant
§ Mémoire informatique
1.2.2 Recueil d’informations et outils techniques
1.2.2.1 Elaboration d’un questionnaire
§ Public visé
§ Opération de traduction et types de questions
1.2.2.2.Le terrain : couverture du Salon du Livre à Valenciennes
§ Recueil d’informations et information utile
§ La collecte
§ Droits de diffusion
§ Prévision d’un accès en ligne avec des informations de nature et de niveaux différents
1.2.3 Projet inscrit dans une politique de communication
§ Inter-Cdi
§ Biblio.fr et Cdidoc
1.3 Compétences et savoirs au service de la conception
1.3.1 Une nouvelle forme d’écriture
1.3.2 Respect des contraintes techniques du web
1.3.3 Travailler dans un contexte technologique HTML
§ Ou ‘est-ce qu ‘un document hypermédia ?
§ Ergonomie
§ Navigation et hypertexte
1.3.4 Une culture particulière
2. Analyse de l’existant : problèmes et attentes
2.1.Présentation des problèmes relevés en amont du questionnaire
2.1.1. Résumé : en matière de lisibilité
j> Problème defiabilité et de pertinence
§ Manque de clarté et de lisibilité
§ La couleur d’arrière plan
2.1.2. Problèmes techniques
§ Gestion du disque dur
§ Gestion de la page d’accueil
§ Les pages web non titrées
2.1.3. Charte graphique et information informelle
2.2.Résultats de l’enquête
2.2.1. Contexte technique : expression du besoin
2.2.2. Résolution d’écran et espace d’affichage
2.2.3. Vitesse de transmission et temps d’affichage
2.2.4. Affichage en couleur
2.3. Matériel et technique WYSIWYG
2.3.1. Machines utilisées
2.3.2. Logiciels utilisés
2.3.2.1 Les navigateurs
2.3.2.2. Les éditeurs HTML et le principe du WYSIWYG
2.3.2.3. Les logiciels pour traiter les images
2.3.3. Périphériques utilisés
2.3.3.1. Lecteur Zip 100
2.3.3.2.Scanner
2.4.Personnes ressources
3. Définir un cahier des charges pour la gestion de projet
3.1.Vers la rédaction d’un cahier des charges
3.2. Vers une méthodologie
3.2.1.Comment faire ?
3.2.2. Adapter la méthode au projet
3.2.3. Deux méthodes
3.3. Vers un nécessaire processus de validation
Partie II. REALISER
Introduction 
1. Structure du site et liens hypertextes
1.1 .Comment définir la structure d’un site ?
1.1.1. Définir une arborescence
1.1.2. Définir le site avec le logiciel Dreamweaver
§ Pour créer un site local
§ Création d’une carte du site
1.2. Arborescences
1.2.1. Arborescence initiale et gestion du disque dur
^ Arborescence initiale
§ Gestion clu disque dur
§ gestion du disque dur et arborescence : deux possibilités
1.2.2. Logique navigationnelle initiale
1.2.3. Arborescence finale
1.2.3.1. Redéfinir la page d’accueil
1.2.3.2. Création de répertoires
1.2.3.3. Anticiper sur la création defichiers frames
1.3. Les liens hypertextes
1.3.1 Types de liens
1.3.2. Création de liens
1.3.3. Chemins relatifs et absolus
1.3.4. Gestion des liens
2. Construction des pages HTML
2.1. La structure de base d’une page HTML
2.2. Mise en forme des pages web
2.2.1. Configuration des documents
2.2.2. Formatage du texte
^ Créer des paragraphes
§ Alignement du texte
§ Police
§ Style et corps de police
2.2.3. Paramétrage des couleurs HTML
2.3. Insérer des images
Rappel : les GIF animées et la question de la lecture
2.3.1. Le choix du format
2.3.2. Numérisation et insertion des images
2.3.3. Problèmes de redimensionnement et de résolution d’images
3. Des frames pour naviguer
3.1. Définition et intérêt
3.2. Mise en forme des frames
3.2.1. Attributs
3.2.2. Texture
3.2.3. Insertion du logo de Lille 3
3.3. Procédures et frames cibles
3.3.1. Comment créer une frame avec Dreamweaver ?
3.3.2. Les frames cibles
3.3.3. Création de contenu sans frame
3.4. Problèmes de compétence : le Javascript
4. Lisibilité technique via l’usager
4.1. Nommer les pages
4.2. Nommer les images
4.3. Référencement
4.3.1. Définition
4.3.2. Pourquoi référencer ?
4.3.3. Procédure
Conclusion 
Partie III. EVALUER
1. Evaluation du projet
1.1 Gestion des destinataires
Gestion du travail en équipe
Lisibilité technique et les futurs auteurs de contenu
Lisibilité technique via le futur webmaster
1.2. Evaluation des outils et de la politique de communication
1.2.1. Evaluation du questionnaire
1.2.2. Avantages du support électronique sur le support papier
1.2.3. Impact : le compteur
1.3. Gestion du temps
1.3.1. Le droit à l’erreur
1.3.2. Accès au matériel et disponibilité des personnes ressources
1.3.3. Perte de temps et calendrier
2. Exploitation du site
2.1 Présentation de l’information
2.1.1 Des tableaux pour faciliter la mise en forme
2.1.2 Des résumés comme médiation
2.2 Droits d’auteurs
2.3 Référencement
2.3.1.Formulaires et diagnostic pour un meilleur référencement
2.3.2 Affichage de l’en-tête et balises META
3. Maintenance du site
3.1 Evaluation du logiciel Dreamweaver
3.1.1 Pourquoi Dreamweaver ?
3.1.2 Lisibilité du manuel d’exploitation
3.1.3 Ergonomie
3.1.4 Limites du logiciel
3.2 Moyens de maintenance
3.2.1 Le personnel : coût et formation ?
3.2.2 La mise à disposition du matériel : une question à régler
3.2.3 Stockage du produit fini
3.3 Maintenance pour une interaction de qualité
3.3.1 Exigences de suivi : s’adapter aux évolutions rapides du web
3.3.2 Une exigence de communication : la charte graphique
3.3.3. Devenir un site de référence
3.3.3.1 En créant des liens hypertextes vers d’autres sites
§ Procédure
j Problèmes juridiques
3.3.3.2 En intégrant des informations utiles
3.3.3.3. Arborescence virtuelle conçue en fonction du projet
de M. Loock
CONCLUSION 
Index des termes techniques 
Bibliographie 
Liste des annexes

Télécharger le rapport complet