Utilisez la commande "Imprimer" dans le menu "Fichier" de votre navigateur pour imprimer cette page.

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 relativement à la 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éatif 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 ;
  • Les pages HTML
  • Les photos utilisées
  • Les dessins et illustrations
  • Tous 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, chacun 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 que votre page s'affiche 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 une impression de 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 polices de caractères ne sont pas toutes supportées par l'ensemble des navigateurs.

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

La création des tableaux est souvent utilisée 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 (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 sur le 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 la capacité qu’il a de relier "électroniquement" des fichiers informatiques. Par exemple, un lien hypertexte peut prendre la forme de 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 ou les visiteurs ne s'attendent pas à lire de longs textes.

De plus, la technologie permet d'insérer un onglet pour accompagner votre texte 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, risque de partir 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ée 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 scanner.

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

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éos à 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éos ne devront pas dépasser deux minutes et devront être fournies en format MPEG. 

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 (par ex. maphoto.JPEG, monlogo.GIF, etc.).

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

Une fois que votre page sera 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

  • Faites un croquis de la présentation souhaitée.
  • Créez un répertoire pour centraliser vos fichiers.
  • Choisissez une couleur et/ou un motif pour l’arrière-plan.
  • Choisissez vos polices et vos couleurs de polices pour chaque partie de texte.
  • Faites vos cadres d’images et vos cadres de textes.
  • Écrivez vos paragraphes dans les espaces que vous avez prévus.
  • Scannez vos photographies en fichiers JPEG.
  • Scannez vos autres images, s’il y a lieu, en fichiers GIF.
  • Insérez vos images JPEG et vos fichiers GIFdans les espaces prévus.
  • Vérifiez votre document : est-ce que tout y est ?
  • Note importante : Le document doit être exempt de fautes.
  • Enregistrez en tant que page Web (menu fichier) si vous travaillez avec Word.
  • Testez votre page dans un navigateur comme Explorer ou Netscape.
  • Faites 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 ;

Courriel

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

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

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

Support 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, Qc.
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 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.