Création d'un site WEB pour enseignant : Formation offerte par le Récit national en formation professionnelle Objectif général: Développer des compétences de base pour réaliser et gérer un site WEB Contenu: 1. Types de serveurs et hébergement d un site WEB 2. La production d un site WEB, les principes de base 3. Quelques éditeurs 4. Mon projet, l arborescence et structure de répertoires Cette formation est proposée par: Sylvain Grenier, Consultant en production multimédia et enseignant en médias numériques à la CS de la Vallée-des-Tisserands courriel: greniers@csvt.qc.ca Yves Shields, Programmeur-analyste et enseignant en médias numériques à la CS de la Vallée-des- Tisserands courriel : shields@csvt.qc.ca 1
Types de serveurs Hébergement d un site Web Internet Fournisseur de service Internet, payant ou gratuit AOL - Sympatico - Geocity - Multimania etc. Serveur Internet de Commission scolaire ou de centre Hébergement Production du site internet Hébergement sur le réseau de votre CS ou quelque fois de votre centre. Les conditions de réussite sont la collaboration de l équipe technique et l efficacité du système. Hébergement chez des fournisseurs de services Internet gratuit comme Multimania etc. Ils sont faciles à trouver en effectuant une recherche sur Internet. Les inconvénients : serveurs très occupés, lenteur de branchement pour vos clients et publicités imposées etc. Hébergement chez des serveurs payants comme Sympatico ou autres fournisseurs de services locaux. 2
Production Ordinateur de production et de tests Éditeur HTML (obligatoire) Logiciel de traitement d'image (optionnel) Tests fonctionnels sur navigateurs Explorer 5 et + Netscape 4 et + (obligatoire) Tests sur l'ordinateur de production avec une adresse locale Transfert et entretien Transfert par FTP (File transfert protocol) Serveur Internet Transfert par le réseau de votre CS ou centre Mise en onde Tests fonctionnels sur navigateurs Tests sur n'importe quel ordinateur avec l'adresse internet Internet La production d un site web La production initiale se fait sur n importe quel ordinateur, avec un éditeur HTML et un logiciel de traitement d image s il est nécessaire. L ordinateur de production devient également l ordinateur de test. Le site transféré sur le serveur Internet (hébergé) devient visible sur Internet. Les transferts s effectuent avec des logiciels FTP ou par le réseau interne de votre CS. Une adresse est allouée à votre site. Des tests fonctionnels sont obligatoires sur le serveur Internet. Il faut toujours avoir au moins une copie de notre site Web, habituellement sur l ordinateur de production. Une copie additionnelle est recommandée. 3
Des éditeurs HTML Un éditeur Html s'impose pour vous décharger d'un certain nombre de tâches fastidieuses comme les caractères spéciaux, les codes de couleur, l'encodage des balises, etc. La majorité des éditeurs est disponible sur le Net en version d'évaluation. Un éditeur doit vous faciliter le travail tout en vous laissant la main dans l'élaboration de votre page. Tous offrent les fonctions usuelles de codage html. Les éditeurs Html les plus récents sont WYSIWYG (What You See Is What You Get) ou avec prévisualisation intégrée comme votre traitement de texte. Le codage des balises Html n'apparaît donc plus. Gardez cependant toujours à l'esprit que la prévisualisation n'est pas [et ne sera jamais] fidèle à 100% par rapport à ce qui sera affiché par le navigateur. Dreamweaver FrontPage 2000 Adobe Golive www.adobe.com Macromedia Dreamweaver est considéré par beaucoup comme le meilleur éditeur Html du moment. C'est assurément une bonne pointure. Les Webmestres apprécieront sa façon intelligente de concevoir la création de sites (codage Html propre et académique, compatibilité avec les différents navigateurs, mises à jour dans tout le site,...). Il est peut-être un peu déroutant lors de la première prise en main avec ses différentes palettes d'outils mais on s'y habitue aisément. Complet, performant, professionnel et évolutif. Un seul handicap cependant, c'est son prix. http://www.macromedia.com/software/dreamweaver/ Microsoft quand tu nous tiens... Le fameux "look and feel" de Windows appliqué à l'éditeur de Microsoft rend sa prise en main des plus aisée par les utilisateurs de Microsoft Office et plus spécialement de Word. Un bon sinon un très bon produit. www.microsoft.com/frontpage On adore ou on déteste!... Adobe Golive ravira les concepteurs graphiques de par son interface et sa possibilité de "placer" les éléments dans la page Web. Les webdesigneurs d'essence bureautique seront assurément déconcertés voire perdu dans cet univers de palettes et autres outils (un grand écran ne sera pas 4
Le processus de réalisation d'un projet web La première étape, la conceptualisation. Quels sont nos objectifs. De quoi voulons-nous parler. Quels sont les contenus disponibles, ceux à développer. Faire l inventaire des images, du texte etc. Comment allons-nous classer l information? Un site est comme un livre avec son index et ses chapitres. Comment allons-nous présenter le tout? Organiser nos idées en réalisant un arborescence. À partir de l'arborescence nous nommons les pages et conceptualisons la navigation. Cela devient l architecture du site. Un exemple concret le nouveau site du Récit national en FP. Projet: Récit Anglais 108 Français 105 Add to your bookmarks Date: Le 4 mars 2002 106 News 106b Inscription 2 Home Page News and the Address 107 Address 100 Mission 101 Resources Copyright 102 103 Project Development 104 Network of Exchange 100a Plan of Action 100b Ministerial Orientations Teacher's Resources by Sector (Inforoute FPT Database) General Resources Information on Vocational Online Courses Available on the Internet Integration of Technology in the Classroom, an Introduction Dreamweaver 4 ICT Projects Projects from the Network of Exchange Provincial Committee English Network French Regional Network 100c RÉCIT's Network Vocational in Canada English Teacher's Directory in Vocational Tutorial on Searching the Web Journals in Vocational Etc. In-Service Activities Powerpoint Requests Directory of Tools and Software used in Vocational 6
À partir de l arborescence nous réalisons le répertoire du site Web. La création des pages Création de la page d accueil, index.htm ou default.htm. Vous pouvez utiliser Htm ou Html. Habituellement sur un serveur Linux, la page d accueil est «index». Sur un serveur Nt la page d accueil est «default». Donner un titre à la page d accueil. Dans la plupart des sites deux types de pages sont à conceptualiser, la page d accueil (niveau 1) et les pages de contenus (niveau 2). Conceptualiser les pages avec l aide de croquis (storyboard). Toujours se servir de tableaux afin d avoir une mise en page stable dans tous les moniteurs. Les tableaux auront en général des bordures invisibles. Privilégier la dimension en pixel au lieu d en pourcentage. Pour un moniteur de 15 pouces, créer un tableau d un maximum de 750 pixels afin d éviter la barre de défilement. On doit être prudent lorsqu'on utilise des polices de caractères originales. Notre ordinateur peut en effet être doté d'une grande variété de polices récupérées dans Internet où dont on a hérité lors de l'installation d'un logiciel de graphisme, mais ces polices peuvent ne pas se retrouver sur l'ordinateur de la personne qui voudra lire votre page Web. Par défaut, son navigateur affichera alors ses propres polices (celles qui lui sont disponibles) ce qui peut affecter la mise en page et l'organisation des contenus. Parmi les valeurs sûres que l'on retrouvée "universellement" (ou presque), notons les polices Arial, Times New Roman et Courrier qui s'affichent de la même façon tant sur Mac que PC. 7
Faire attention dans l utilisation des images. Plus vous disposez d'images dans votre page Web et plus vous leur faites occuper une grande surface, plus vous risquez de voir les internautes "zapper" votre page pour naviguer vers d'autres cieux. La plupart des gens utilisent des connexions modem. En général le total des images dans une page ne devrait pas dépasser 80 ko. Si vous voulez présenter des images de grande dimension, offrir l option de la voir plus petite au départ, en cliquant afficher le plein format. En résumé Création du répertoire contenant le site Dans FrontPage, nouveau site Web Donner un nom et un emplacement sur notre ordinateur Création d'une page d'accueil (HTML) Donner un nom de fichier (.htm ou.html) index.htm ou default.htm Donner un titre Sauvegarder à la racine du site. Apparence visuelle et navigation Création du sous-répertoire images Dans FrontPage nouveau dossier Création des autres sous-répertoires Dans FrontPage nouveau dossier Création d'une page secondaire (HTML) Donner un nom de fichier (.htm ou.html) Nom à votre choix Donner un titre Sauvegarder à la racine du site ou dans un sous-répertoire. Apparence visuelle et navigation Exercice pratique, réalisation d un site web simple, après l exercice pratique. (optionnel) 1. Penser à un sujet, simple de préférence 2. Structurer son idée et réalisé un arborescence 3. Créer un nouveau site FrontPage 4. Réaliser des pages dans FrontPage Sylvain Grenier et Yves Shields de Virtu-Ose 8