Bande patrimoine CharlevoixPlan
Accueil
Élèves
Ainée
Amis
Tous
Forum
Trousse
Liens
Contact


Cap sur le Web !

Bienvenue sur la page d'aide pour les élèves et les aînés qui participent au projet de conception d'une page Web dans le cadre de l'utilisation de la trousse pédagogique "La course aux trésors".

Cet outil s’adresse autant à ceux qui ont une certaine expérience dans la conception de pages Web qu’à ceux qui n’en ont jamais réalisées.

Je suggère aux personnes qui ont de l'expérience sur le sujet de prendre tout de même le temps de lire ce document afin de connaître les diverses règles à respecter ainsi que la méthode de transmission de leur production au webmestre pour hébergement sur le site.

Quant à ceux qui n’ont pas d’expé- rience en construction de pages Web, je les invite à suivre les indications contenues dans ce document. Ils pourront ainsi découvrir comment réaliser des pages Web en toute simplicité.

Avant d'entreprendre la réalisation de votre page Web, rassemblez tous les documents que vous utiliserez, puis faites un croquis de la présentation souhaitée, afin de visualiser la page dans son ensemble.

Gardez en mémoire que votre page sera présentée sur l'internet à un grand nombre de personnes qui la visionneront à l'aide d'un navigateur.

Un certain nombre de facteurs peuvent modifier ce qui apparaîtra à l'écran.

Afin de créer une présentation qui sera vraiment conforme à l’idée que vous vous en faites, un certain nombre de standards doivent être respectés. Nous les examinerons plus loin en détail.

Rappelez-vous que les ordinateurs n'ont pas tous la même vitesse de transmission, par exemple, la superbe photo couleur que vous avez insérée dans votre page peut prendre quelques secondes à s'afficher pour ceux qui ont un branchement haute-vitesse, alors qu'elle prendra plusieurs minutes dans les autres cas.

Votre défi consiste à être créatifs tout en respectant les standards établis afin d'offrir à tous les visiteurs une expérience agréable lors de la visite de votre page.

Quelques règles de base

D'abord, assurez-vous que votre page sera agréable à visionner même pour ceux qui ont des petits écrans en créant une page de base qui ne sera pas plus large que 800 pixels, soit à peu près 25 cm. Ainsi, elle sera visible sur toute sa largeur sur un écran de 33 cm. Elle peut être aussi longue que nécessaire.

Commencez par créer un répertoire dans lequel vous mettrez tous les fichiers qui composent votre page ;
checkboxLes pages HTML
checkboxLes photos utilisées
checkboxLes dessins et illustrations
checkboxTous les autres fichiers

Faites régulièrement des sauvegardes de votre travail ; cela vous évitera de recommencer depuis le début en cas de problème.

Vous êtes maintenant prêts à créer votre première page Web.

Alors moussaillons, à l'abordage !

Couleurs et styles

La plupart des écrans peuvent afficher des milliers et parfois des millions de couleurs, chacune avec ses nuances.

De plus, les navigateurs tels que Netscape et Explorer n'affichent pas toujours les couleurs comme nous les voyons sur notre écran lors de la conception.

Afin de contourner ce problème, les graphistes et les webmestres ont convenu de se référer à une palette de 216 couleurs appelée "les couleurs Web.

En choisissant parmi ces couleurs, vous augmentez vos chances de voir votre page s'afficher avec les couleurs que vous avez choisies.

Souvenez-vous de ceci :

  • Certaines combinaisons de couleurs rendent la lecture difficile .
  • Un trop grand nombre de couleurs peut créer de la confusion.
  • Il est également possible d'utiliser une image comme
    fond d'écran .

Soyez créatifs. Lorsqu’ils sont bien utilisés, les moyens les plus simples peuvent donner un caractère unique à votre page.

Les couleurs, les fontes (polices de caractères), les illustrations et la disposition contribueront au style et à l’originalité de celle-ci.

Vous pouvez aussi trouver l'inspiration en allant voir ce que d'autres ont réalisé : visitez les sections élèves et aînés ou étudiez la composition d'autres sites Web dont vous aimez les couleurs et les styles.

Texte et polices

Il est maintenant temps de rédiger votre texte.

Vous pouvez le faire à l'aide d'un traitement de texte comme Word ou directement dans la page si vous utilisez un éditeur de page Web comme Frontpage.

Les fontes  ne sont pas toutes supportées par l'ensemble des navigateurs.

Afin de vous assurer d'un affichage sans problème, choisissez des polices standard telles que : Arial, Helvetica, Courrier, Georgia, Times, Trebuchet, Verdana, Comic, etc.

Les tableaux sont souvent utilisés dans la conception de pages Web. Grâce à eux, l'information sera organisée dans une structure stable. Notez d'ailleurs que la page que vous lisez présentement est elle-même une série de tableaux.

Les graphistes ont pour règle de ne jamais utiliser plus de trois fontes dans une même page afin de rendre la lecture plus facile. Ce n'est pas une règle absolue mais plutôt un conseil.

Les navigateurs, Explorer par exemple, n'utilisent pas les points comme mesure pour la grosseur d'une police comme le font les traitements de texte (par exemple : Helvetica 12 points). Ils utilisent plutôt une taille relative. Prenons un exemple : si la police spécifiée par défaut dans le navigateur est Courrier 16, alors, pour créer un titre plus gros que le texte, nous spécifierons la taille +2, soit deux crans plus gros que la taille de base.

Si vous utilisez une police fantaisiste comme Curly et que le visiteur ne la possède pas sur son ordinateur, il y a des chances que votre texte lui apparaisse en Courrier, ce qui peut donner un résultat bien différent de ce que vous voyez sur votre ordinateur.

Vous pouvez créer un titre dans une police fantaisiste visible pour tous en le mettant dans une image.

Il n'y a pas de limites techniques au nombre de couleurs des polices que vous pouvez utiliser ; rappelez-vous cependant qu’il est préférable d'utiliser des couleurs Web et que le texte en bleu suggère normalement la présence d'un hyperlien.

L'hypertexte, aussi appelé hyperlien et parfois lien URL, se caractérise par sa capacité de relier "électroniquement" des fichiers informatiques. Par exemple, un lien hypertexte peut prendre la forme d'un texte souligné (et dans une couleur différente) ou d'image dans une page Web sur laquelle on peut cliquer pour accéder à une autre page Web ou à une ressource quelconque d'Internet.

Si, dans le cadre de votre cueillette d'information, vous avez découvert d'autres sites Web dont le contenu est complémentaire à votre recherche, n'hésitez pas à les suggérer à vos visiteurs comme complément de leur lecture en créant un hyperlien.

Les hyperliens constituent le fondement même du réseau internet.

Images

On entend par résolution le nombre de pixels qui constituent une image. Plus une image possède de pixels au centimètre carré, plus la résolution est élevée. Toutefois, pour une page Web, il est inutile de créer des images à plus de 72 DPI , puisque c'est la résolution maximale des écrans. Les pixels supplémentaires ne seront donc pas affichés et augmenteront inutilement le temps de chargement de votre page.

Les illustrations regroupent toutes les images qui ne sont pas des photos ; il peut s'agir de dessins, de logos, de cartes géographiques ou de toute autre image reliée à votre sujet.

Ces illustrations doivent être soumises en format GIF 

Le proverbe dit qu'une image vaut mille mots ; c'est particulièrement vrai dans le cadre d'une page Web où les visiteurs ne s'attendent pas à lire de longs textes.

De plus, la technologie permet d'adjoincre à votre texte un onglet grâce auquel le visiteur pourra, en cliquant sur l'image (hyperlien), accéder à une version grande taille de votre photo.

Toutefois, n'oubliez pas qu'un trop grand nombre de photos peut alourdir votre page au point où le visiteur, lassé d'attendre, partira vers une autre destination sans avoir visité votre page.

Notez que les photos doivent être soumises en format JPEG et que les images utilisées doivent être recadrées à la dimension et à la résolution désirées avant d'être insérées dans votre page.

Si vous avez accès à une caméra numérique, vous pourrez l'utiliser pour illustrer votre thème, présenter votre informateur ou afficher toute autre photo qui contribuera à la compréhension et à l'embellissement de votre présentation.

Il est suggéré d'utiliser le logiciel fourni avec la caméra afin de transférer vos photos sur l'ordinateur et de faire les retouches que vous jugez utiles. Vous pouvez aussi utiliser un logiciel de retouche spécialisé tel que Photoshop.

Lors de la cueillette d'information, vous trouverez toutes sortes de documents intéressants que vous pourrez intégrer dans votre page Web. Pour ce faire, vous devrez utiliser un analyseur (scanner).

N'oubliez pas de demander la permission avant d'utiliser des images qui ne vous appartiennent pas.

GIF ou JPEG ?

L'utilisateur hésite parfois entre les formats GIF et JPEG décrits dans le texte précédent.

En cas de doute, référez-vous aux exemples ci-contre. Rappelez-vous que les photos doivent toujours être en format JPEG et que les logos et dessins sont le plus souvent en format GIF.

Il est déconseillé d'utiliser d'autres formats.

Exemple d'une image GIF

Exemple d'une image JPEG

Autres médias

Afin d'utiliser d'autres médias sur votre page, les documents audio (cassette, disque vinyle ou autres) devront d'abord être numérisés dans le format MP3  .

Les sons synthétisés devront être en format MIDI 

Si vous avez accès à une caméra vidéo numérique ou traditionnelle, vous pourrez joindre des documents vidéo à votre page Web. Mais prenez en considération que ces fichiers sont assez longs à télécharger, puisqu’ils occupent beaucoup d’espace (plusieurs méga-octets).

Les séquences vidéo ne devront pas dépasser deux minutes et devront être fournies en format MPEG-4 

Note : Jusqu’à nouvel ordre, le site Web n’acceptera que des pages avec du texte et des photos, ce qui exclut pour l’instant les montages avec son et vidéo.

Réalisation de votre page

Pour concevoir votre page Web, vous pourrez utiliser un éditeur de pages Web tel que Frontpage ou un traitement de texte tel que Word grâce à la fonction "Enregistrer en tant que page Web" qui se retrouve dans le menu "fichier". Ces logiciels vous permettent de concevoir des sites simples sans connaître les langages de programmation comme HTML 

Dans les deux cas, l'effort d'apprentissage est minimal.

La page d'accueil de votre page Web doit se nommer mapage.html (remplacez "mapage" par un nom court qui décrit votre sujet).

Toutes les autres pages, le cas échéant, doivent avoir un nom de huit caractères maximum, sans accent ni espace et l'extension .html (par ex. : page2.html).

La même règle s'applique à tous les autres fichiers soumis en ajoutant l'extension appropriée (maphoto.JPEG, monlogo.GIF, etc.).

Gardez tous vos fichiers groupés dans un même répertoire.

Une fois votre page complétée, vous pourrez la visualiser comme si vous étiez en ligne en ouvrant le fichier mapage.html dans votre navigateur Explorer ou Netscape.

Assurez-vous que le texte apparaît correctement et que les accents sont bien présents. Testez vos hyperliens et regardez si les photos et les illustrations s'affichent correctement.

N'oubliez pas de faire des copies de sécurité de votre travail afin de ne pas avoir à tout recommencer en cas de problème.

Résumé de la réalisation de la page Web, étape par étape

checkboxFaites un croquis de la présentation souhaitée.
checkboxCréez un répertoire pour centraliser vos fichiers.
checkboxChoisissez une couleur ou un motif pour l’arrière-plan.
checkboxChoisissez vos polices et vos couleurs de polices pour chaque partie de texte.
checkboxFaites vos cadres d’images et vos cadres de textes.
checkboxÉcrivez vos paragraphes dans les espaces que vous avez prévus.
checkboxNumérisez vos photographies en fichiers JPEG.
checkboxNumérisez vos autres images, s’il y a lieu, en fichiers GIF.
checkboxInsérez vos images JPEG et vos fichiers GIF dans les espaces prévus.
checkboxVérifiez votre document : est-ce que tout y est ?
checkboxAttention, le document doit être exempt de fautes.
checkboxEnregistrez en tant que page Web (menu fichier) si vous travaillez avec Word.
checkboxTestez votre page dans un navigateur comme Explorer ou Netscape.
checkboxFaites une copie de sécurité de votre page.

Transmission de votre page

Maintenant que votre page Web est terminée, corrigée et testée, il suffit de nous la faire parvenir pour que nous l'annexions au site dans la catégorie appropriée.

Pour la transmission, vous avez les choix suivants :

checkboxCourriel

Créez un courriel dans lequel vous annexerez tous vos fichiers comme pièces jointes.

Le courriel sera envoyé à l'adresse suivante :
webmestre@patrimoine-charlevoix.net

N'hésitez pas à demander de l'aide en cas de besoin.

checkboxSupport informatique

Vous pouvez également nous faire parvenir votre page en la copiant sur un CD ou sur une cassette Zip. Expédiez le tout à l'adresse suivante :

Service de formation continue
Centre d’études collégiales en Charlevoix
Centre éducatif Saint-Aubin
50-3, rue Racine
Baie-Saint-Paul (Québec)
G3Z 2R2
Att : M. Rémy Couture

Ressources

Il existe de nombreuses ressources pour vous aider à réaliser votre première page Web : un membre de votre famille, un ami, un voisin calé en informatique, votre professeur ou le responsable de l'informatique dans votre école.

Le Web offre également des sites qui viennent en aide au débutant. Voici quelques liens utiles :

Créer sa page Web
Ma première page en 20 leçons
Word pour créer une page Web

Pour des questions spécifiques à votre école, comme l'utilisation d'un analyseur (scanner) ou d'une caméra numérique, communiquez avec le technicien du laboratoire d'informatique de votre école ; il se fera un plaisir de vous aider dans votre démarche.

Imprimer le guide