Collège Pie10 www.danielpie10.be/site.php Daniel Massart Février 2007
Sommaire 1 OBJECTIFS 1 2 TYPES DE SITES 1 2.1 Les blogs 1 2.2 Les sites «bibliothèques» 2 2.3 Les sites statiques classiques 2 2.4 Les sites dynamiques 3 3 LES LOGICIELS NECESSAIRES 4 3.1 La retouche d images 4 3.1.1. Installer le programme 4 3.1.2. Transformer les images à la vollée 5 3.2 Un logiciel pour créer une image animée 6 3.3 Un programme pour transformer tes fichiers Word, Excel ou autres en format PDF 6 3.4 Le logiciel de transfert ftp 7 3.5 Le logiciel de création de site 7 3.6 Un logiciel de création de galeries photos 7 4 AVANT DE CREER LE SITE 8 4.1 Choisir un modèle de site 8 4.1.1. Un site d une page 8 4.1.2. Un site de plusieurs pages renvoyant toujours à une page d accueil 9 4.1.3. Un site de plusieurs pages avec menu 9 4.2 La charte graphique du site 9 4.3 Les choix concernant le site exemple 10 5 PREPARATION DES DOSSIERS 11 5.1 Créer les répertoires 11 5.2 Copier les photos transformées dans le répertoire images 11 5.3 Placer les documents dans les dossiers appropriés 11 5.4 Créer la galerie photo 12 5.5 Créer l animation GIF 13 5.6 Définir l emplacement du site sur le disque dur 14 5.7 Création de la première page 15
5.7.1. Les étapes à suivre pour réaliser le site 15 5.7.2. Quelques infos sur la manière d utiliser le logiciel 16 6 METTRE LE SITE EN LIGNE 19 6.1 Mettre en ligne avec Filezilla 19
1 1 OBJECTIFS Réaliser un site de quelques pages en vue de mettre différents documents à la disposition des élèves. Utiliser une série d outils gratuits tels que la retouche d images, la transformation en fichier pdf et la création d une galerie photos avec Picassa2, 2 TYPES DE SITES Selon l énergie et le temps que vous avez à consacrer à l élaboration de votre site, vous pouvez vous diriger vers différents modèles de site. Remarque: ce classement n est pas officiel. 2.1 Les blogs Les blogs sont des sites interactifs qui permettent facilement de mettre des informations en ligne. Avantages Inconvénients pratiquement pas besoin de connaissances préalables pour utiliser ces sites préformatés, les internautes peuvent interagir avec votre blog et poster des commentaires, les élèves connaissent très bien ce système de communication, il est possible d ajouter du texte, des images, des vidéos. On ne peut pas ajouter d autres types de documents (word, pdf, ) On est obligé de choisir parmi divers modèles prévus, L interactivité avec l internaute vous oblige à vérifier régulièrement ce qui est posté, L adresse est rendue publique. Il existe plusieurs portails qui permettent de créer son blog. Le plus connu est http://skyblog.com/
2 2.2 Les sites «bibliothèques» Ce sont des sites qui sont essentiellement composés de liens menant vers divers documents. Avantages relativement facile à créer, il ne demande pas beaucoup d investissement temps ; Inconvénients les documents que vous avez déjà créés pour vos cours peuvent être utilisés tel quel ; il n y a pas de limitation dans le type de documents à mettre à la disposition de l internaute, la mise à jour du site est relativement aisée. vous avez besoin d un hébergement et d un domaine (voir plus loin), la qualité graphique est très spartiate, il n y a pas d interactivité (du moins dans un premier temps), un programme très simple de création web est suffisant (word), Exemple : http://www.danielpie10.be/site.php 2.3 Les sites statiques classiques Ce sont les sites les plus répandus sur le net. Les informations sont directement rédigées pour être affichée en page Web. Il y a des images, du son, des tableaux, des boutons graphiques, Avantages l interface graphique peut être très recherchée, on peut ajouter un forum, des menus, des boutons interactifs, des animations, le texte est adapté à la présentation web, il est possible de créer des liens sur différentes zones (texte, photos, zone définie, ) on peut prévoir des formulaires de réponses. Inconvénients nécessite plus de temps de réalisation, la mise à jour du site prend plus de temps, nécessite une connaissance plus poussée des différents logiciels.
3 2.4 Les sites dynamiques Ces sites prennent de plus en plus d importance sur la toile. Et sont visiblement la technologie de l avenir. Avantages on a la possibilité d adapter le contenu de la page en fonction du moment de la journée ou de la date. on peut personnaliser l accès en fonction de l internaute divers routines de mise à jour peuvent être programmées on peut permettre une interactivité plus grande à l internaute (ajouter des photos, gérer une base, ) Inconvénients Les sites en php ne peuvent être testés que sur un hébergeur ou à l aide d un programme transformant votre machine (Wamp5, easyphp) ; C est de la programmation, donc beaucoup moins intuitif que la création de site statique avec un logiciel du type NVU ou Dreamweaver. Exemple : www.pie10.be
4 3 LES LOGICIELS NÉCESSAIRES 3.1 La retouche d images Lorsque vous placez des photos sur le net. Il est important que celles-ci ne soient pas trop lourdes. Il est donc souvent nécessaire de retravailler un minimum vos photos prises avec votre appareil photos numériques. Les éléments auxquels il faut être particulièrement attentif sont : la taille de l image (± 100 Ko) ; son orientation ; les dimensions de l image (faire en sorte qu elles correspondent au maximum à ce que vous avez besoin, inutile de devoir la réduire lors de son placement dans votre page Web) ; sa résolution en dpi (72 dpi pour une photo à présenter à l écran) ; son format (JPG, PNG ou GIF). EXERCICE : retoucher les images à télécharger à cette adresse : www.danielpie10.be/informatique/site/franiere.exe cliquer sur franiere.exe cliquer sur parcourir aller dans Mes Documents cliquer sur Créer un nouveau dossier le nommer ImagesFra cliquer sur Installer Ce sont des photos de Franière prises avec un appareil numérique. Comme tu peux le voir, elles ont une taille de 900 x 1200 pixels et un poids de l ordre de 350 Ko. Elles portent également des noms chiffrés peut parlant. Notre premier exercice va consister à transformer ces photos pour qu elles puissent être utilisées dans un site. 3.1.1. INSTALLER LE PROGRAMME Nous allons utiliser un logiciel gratuit : Irfanview. Il est téléchargeable à cette adresse : http://www.01net.com/outils/telecharger/windows/multimedia/albmums_et_visionneuses/fiches/tele15035.html Installe le fichier en cliquant sur, Clique sur Suivant jusqu à l installation, Ferme le programme, Clique ensuite sur pour que le programme soit en français.
5 3.1.2. TRANSFORMER LES IMAGES À LA VOLLÉE Pour les placer sur un site nous allons réduire leur taille à 360 pixels de côté ; le poids du fichier devrait être le plus bas possible, idéalement en dessous de 100 Ko ; nous renommerons toutes les photos en suivant le modèle FRA####. 1. Ouvrir IrfanView, 2. Aller dans Fichier Convertir/renommer en série, 3. Regarder dans ImagesFra, 4. Cliquer sur une photo, puis sur CTRL A pour toutes les sélectionner, 5. Cliquer sur Ajouter, 6. Sélectionner les options suivantes, 7. Cliquer sur Choisir les Options Avancées, 8. Cliquer sur OK, 9. Cliquer sur Démarrer.
Tu peux retourner dans le répertoire ImagesFra. Des nouvelles images ont été rajoutées elles se nomment FRA001 --> FRA034 ont un poids en dessous de 50 Ko et une taille maximale de 360 pixels. Avec ce programme, tu peux également ajouter du texte aux photos ou rajouter un cadre. La taille des photos dépendra de ce que tu veux en faire. Si tu veux faire une vignette tu peux réduire à 150 pixels. 6 3.2 Un logiciel pour créer une image animée Tu peux obtenir des GIF animés tout fait sur différents sites. Par exemple sur http://membres.lycos.fr/gifland/giftheme.htm Il en existe plusieurs, je te propose Beneton Movie GIF sur : http://telechargement.journaldunet.com/telechargement/6146/2/beneton_movie_gif/index.html 3.3 Un programme pour transformer tes fichiers Word, Excel ou autres en format PDF Le format PDF a comme avantages qu il est moins lourd que les fichiers.doc, qu il n est pas modifiable (aisément) et qu il est lisible par tous les internautes (la visionneuse est disponible gratuitement sur le net (adobe reader)). EXERCICE : transformer le fichier word HistoriqueFraniere.doc en docfraniere.php Nous allons utiliser pdfcreator disponible sur http://www.01net.com/outils/telecharger/windows/bureautique/editeur_de_texte/fiches/tele26668.html clique sur, installe le programme, ouvre le fichier : HistoriqueFraniere.doc, va dans Fichier Imprimer, choisi PDFCreator comme imprimante, clique sur OK, change le titre en docfraniere, clique sur Enregistrer, sélectionne ton répertoire (Mes Documents). Si tu veux que le fichier soit facilement téléchargeable, veille à ce que son nom ne comporte pas d espace ni d accent.
7 3.4 Le logiciel de transfert ftp Lorsque ton site sera terminé, il faudra le transférer chez ton hébergeur. Nous utiliserons le programme Filezilla. Tu peux le télécharger sur http://www.01net.com/outils/telecharger/windows/internet/ftp/fiches/tele17966.html clique sur, clique sur Next, désélectionne documentation en français, Suivant --> installation. Nous apprendrons à l utiliser concrètement, lors du transfert du site exemple. 3.5 Le logiciel de création de site Il serait possible de créer un site avec le bloc-notes de Windows. Nous ferons d ailleurs un exercice permettant d afficher une phrase à l écran. Mais cette méthode implique une connaissance approfondie du langage html. Le plus simple est d utiliser un logiciel de création de site. Il en existe plusieurs : Dreamweaver est reconnu comme étant le meilleur mais coûte très cher à l achat. Frontpage proposé par Windows, s utilise de manière très intuitive mais les sites créés avec ce programme ne fonctionnent que chez les hébergeurs qui ont souscrit certaines conventions avec Microsoft. Enfin depuis quelques années, un logiciel gratuit parmi d autres a pris de l importance et devient de plus en plus performant. Il s agit de NVU. C est ce logiciel que nous allons utiliser. NVU est téléchargeable sur http://www.01net.com/outils/telecharger/windows/internet/editeur_de_site/fiches/tele29699.html Un tutoriel complet est disponible sur http://www.framasoft.net/img/pdf/nvu-standard-v-1fr- 2.pdfhttp://www.framasoft.net/IMG/pdf/nvu-Standard-v-1fr-2.pdf 3.6 Un logiciel de création de galeries photos Dans le site exemple nous créerons une galerie photos en quelques clics grâce à Picassa2 disponible sur Google. Tu peux le télécharger sur http://picasa.google.fr/intl/fr/download/thanks.html Ce logiciel permet de stocker vos images, de les retoucher facilement et de faire des cd cadeaux.
8 4 AVANT DE CRÉER LE SITE Avant de créer un site, il faut d abord avoir une idée claire de ce qu on veut réaliser. 4.1 Choisir un modèle de site Il y a plusieurs manières d envisager un site. Il peut être en une page, en plusieurs pages revenant toujours sur une page d accueil ou avec un menu intégré. 4.1.1. UN SITE D UNE PAGE C est le site le plus facile à réaliser. Vous tapez votre cours sur Word en utilisant les styles pour les titres et en créant au début du document une table des matières (des explications sont disponibles sur mon site : www.danielpie10.be/informatique/word). Lorsque tu as terminé de réaliser ton document. Tu peux le transformer en site web en allant dans Fichier Enregistrer en tant que page Web Veille à changer le nom de ton document par index (la première page d un site doit toujours s appeler index. et à choisir le format htm.
9 En cliquant sur les entrées du sommaire tu arrives directement sur le chapitre voulu. L inconvénient de cette méthode est l aspect très sobre de la page Web. Si ton document est important, le poids de la page web sera élevé et il faudra plus de temps de téléchargement. Word crée automatiquement la page web, mais il a l inconvénient de créer des codes inutiles qui alourdissent le fichier. 4.1.2. UN SITE DE PLUSIEURS PAGES RENVOYANT TOUJOURS À UNE PAGE D ACCUEIL Chaque page est indépendante et est accessible uniquement à partir d une page d accueil sommaire. Prévoir un lien de retour sur chaque page. Page d accueil Première page Deuxième page Troisième page Inconvénient A la longue, l internaute risque de se lasser de toujours devoir revenir à la page de départ. 4.1.3. UN SITE DE PLUSIEURS PAGES AVEC MENU Un menu est placé sur chaque page. Dans l exemple que nous allons réaliser nous créerons un menu que nous placerons dans chaque page. Plus tard, lorsque tu auras acquis de l expérience, tu pourras utiliser quelques codes php tel que l include qui permet d insérer une page web dans un tableau. Cette méthode est très pratique car il suffit à ce moment là de créer une page menu et de l insérer dans chaque autre page. Si des modifications doivent être réalisées, il suffira alors de ne modifier qu un seul fichier. 4.2 La charte graphique du site Il s agit de déterminer les couleurs du site et son design. Le mieux à faire est de se promener sur la toile et repérer les sites qui te plaisent le mieux. Tu peux également obtenir des kits graphiques tout fait qu il suffira d adapter. Un site parmi d autres : http://www.premiumwanadoo.com/easycreation/easycreation.htm Pour t aider à choisir les couleurs de ton site tu peux utiliser ce site : http://www.smartpixel.net/chromoweb/fr/ va ensuite sur Chromoflash
10 4.3 Les choix concernant le site exemple Les couleurs : fond de page : noir zone variable : bleu foncé texte : blanc liens : bleu clair liens cliqué : vert clair Les pages : 4 pages : Origine Géographie liens galerie photos Chaque page suivra le model suivant Origine Géographie Liens Galerie photos Email Contenu Bannière animation gif avec 5 photos Les répertoires nécessaires :
11 5 PRÉPARATION DES DOSSIERS 5.1 Créer les répertoires 1. Dans ton répertoire personnel (Mes Documents) crée un répertoire avec les 4 premières lettres de ton nom et les 2 premières de ton prénom. E a) Clique sur et sur pour ouvrir le poste de travail b) Va dans le dossier Mes Documents c) Clique droit sur la souris, puis sur nouveau dossier, nomme le dossier NNNNPP 2. A l intérieur de ce dossier crée les dossiers Historique et images Nous allons commencer par placer dans les répertoires appropriés les éléments dont nous aurons besoins. Remarque : nous pourrions réaliser cette étape plus tard. 5.2 Copier les photos transformées dans le répertoire images 1. Va dans le dossier ImagesFra (créé lors du premier exercice) 2. Sélectionne toutes les images commençant par FRA (clique sur la première image puis en maintenant la touche enfoncée clique sur la dernière photo à prendre). 3. Coupe ces images en enfonçant les touches et X 4. Colle ces images dans le répertoire images en enfonçant et V 5. Ajoute l image originale franiere-baniere.gif 5.3 Placer les documents dans les dossiers appropriés 1. Copie le fichier docfraniere.pdf 2. Colle le fichier dans le répertoire histoire
12 5.4 Créer la galerie photo 1. Ouvre Picassa2 2. Sélectionne le fichier ImageFra (qui ne contient plus que les images originales) 3. Sélectionne les fichiers à placer dans la galerie 4. Va dans 5. Choisi un nom de répertoire Sélectionne ton dossier NNNNPP
13 6. 7. Cliquer sur Terminer 5.5 Créer l animation GIF Ouvre et installe-le Clique sur pour choisir une image et recommence l opération de manière à créer un GIF composé de 5 images. (choisi les images dans le dossier images de ton site) Garde les tailles originales A pour sélectionner les 5 images Clique sur pour enregistrer ton animation. Place-la dans le dossier images sous le nom animation.gif Cherche et ajoute au dossier image une animation gif pour représenter le lien menant à l email.
14 Création du site sur Franière 5.6 Définir l emplacement du site sur le disque dur 1. Clique sur Edition des sites 2. Donne un nom à ton site (ici Franière suivi de ton Prénom et Nom) En cliquant sur parcourir recherche le dossier racine de ton site (NNNNPP) 3. Clique sur OK
15 5.7 Création de la première page La première page d un site DOIT toujours s appeler index. C est le premier fichier que le navigateur va chercher par défaut. 5.7.1. LES ÉTAPES À SUIVRE POUR RÉALISER LE SITE 1. Créer un tableau de 4 cellules 2. Adapter la taille des cellules 3. Modifier les couleurs de fond de page 4. Modifier les couleurs des cellules 5. Ajouter la bannière 6. Ajouter le GIF animé 7. Trouver une animation GIF pour la boite à email 8. Ecrire le texte du menu 9. Créer les liens pour chaque entrée du menu a) Origine index.html b) Géographie geographie.html c) Liens liens.html d) Galerie photos fichier index.html du dossier de la galerie e) Boite email vers ton email 10. Enregistrer la page sous le nom model.html 11. Compléter la cellule centrale cf page origine du site exemple (étiquette sur l image, lien vers docfraniere.pdf) 12. Modifier le nom de la page en Franière - origine 13. Enregistrer la page sous index.html 14. Rouvrir le fichier model.html et transforme-le pour qu il corresponde à la page geographie.html 15. Modifie le nom de la page et le nom du fichier 16. Idem pour la page liens.html 17. Modifier le titre affiché dans la galerie modifier le fichier caption.html du dossier de la galerie
16 5.7.2. QUELQUES INFOS SUR LA MANIÈRE D UTILISER LE LOGICIEL Pour plus d infos réfère-toi au tutoriel de NVU Notre première page servira de modèle pour les pages suivantes. Elle sera composée d un tableau de 4 cases. CLIQUE SUR TABLEAU REDUIT LA TAILLE DE LA PREMIERE COLONNE en maintenant le clique sur la ligne de séparation des 2 colonnes et en réduisant la première colonne à 220 pixels
17 DEFINI LES COULEURS DE BASE DU SITE Va dans Outils Préférences et défini les couleurs de base (cf les couleurs choisies lors de la préparation du site). DÉFINIR LES COULEURS DES CELLULES DU TABLEAU CTRL + clic sur la cellule ensuite BDS CHANGER LA COULEUR DES CARACTÈRES Sélectionner le texte et cliqué sur INSÉRER DES IMAGES Cliquer sur l image et l amener à l endroit voulu MODIFIER LE NOM DU FICHIER Fichier Enregistrer sous ne pas oublier l extension.html MODIFIER LE NOM DE LA PAGE (c est ce qui apparaîtra au dessus du navigateur) Menu Format CRÉER UN LIEN Cliquer sur
18 AJOUTER UNE ÉTIQUETTE À UNE IMAGE Cette étiquette apparaîtra lorsque on passe sur l image avec la souris BDS sur l image propriété image
19 6 METTRE LE SITE EN LIGNE Pour mettre un site en ligne, tu as besoin d une ADRESSE FTP, D UN NOM D UTILISATEUR ET D UN LOGIN. L école loue un hébergement qui lui permet de créer plusieurs comptes ftp. Ton adresse sera http://nnnnpp.pie10.be L adresse ftp est ftp.pie10.be Ton login : tu le recevras quand ton répertoire sera créé Ton mot de passe : tu le recevras quand ton répertoire sera créé 6.1 Mettre en ligne avec Filezilla 1. Ouvre Filezilla 2. Va dans fichier Gestionnaire de sites 3. Nouveau site Ton mot de passe
20 4. Clique sur Renommer et donne un nom à ton site 5. Clique sur Enregistrer et Quitter 6. Dans la partie de gauche, sélectionne ton dossier racine (Mes Documents / NNNNPP) 7. Clique sur pour te connecté à ton site 8. Sélectionne les fichiers que tu veux transférer et déplace les de gauche à droite