Maintenance du site web

Transcription

1 Maintenance du site web Un site Internet ou site Web c est quoi? Ce n est ni plus ni moins que du texte, des images, des photos, du son, des vidéos, des fichiers et des liens visibles sur un ordinateur. - Du texte : les 26 lettres de l alphabet + les signes et les accents du clavier. - Des photos et/ou des images au format.jpg.tif.gif.bmp.png etc. - Du son au format.wav ou.mp3 - Des vidéos au format.avi ou.flv - Des fichiers de n importe quel autre type, stockés et téléchargeables. - Des liens, c'est-à-dire que le clic de la souris sur le lien ouvre une autre page web ou fait une autre action sur l ordinateur. Un site Internet se lit comment? Il existe plusieurs logiciels de lecture de sites Internet. Tous sont gratuits. Alors que Word lit les fichiers.doc, Excel lit les fichiers.xls, Acrobat lit les fichiers.pdf et Picassa lit les fichiers.jpg, les navigateurs Internet lisent les fichiers.html. C est un langage ou un «protocole», les logiciels suivants (dans l ordre de popularité) savent lire le html : - Internet Explorer (plusieurs versions plus ou moins fiables) - Mozilla FireFox - Google Chrome - Opéra - Safari sur Mac - Et bien d autre plus confidentiels. C est quoi Internet? Ce sont des millions et des millions d ordinateurs interconnectés en «parallèle» via des câbles électriques à 4 conducteurs. On parle de réseau. Réseau Local (LAN Local Aera Network) quand les connexions restent dans un même bâtiment, Réseau Internet quand les connexions passent par les fils téléphone et sont accessibles au monde entier. WWW veut dire World Wide Web, toile d araignée mondiale. Les connexions sont de type filaire (câble RJ ou câble réseau Ethernet) de type Radio (WiFi - BlueTooth) ou de type CPL (courant porteur en ligne). Tutoriel de maintenance site Page 1 sur 10 Saint Palais janvier 2011

2 Où est le site Internet? Alors qu un document (fichier).doc qui est déjà enregistré sur le disque dur d un ordinateur (ou sur une clé USB) se lit avec le logiciel Word installé sur le même ordinateur, le site Web n est pas sur l ordinateur local, sinon, les autres ne pourraient pas le voir. Pour être accessible par tous les internautes, le site doit être enregistré sur un autre ordinateur «public». On dit un serveur Web, on dit aussi «ordinateur distant» ou «serveur distant». Si ça se trouve, le site du Lycée que l on a confié à un vendeur d hébergement (OVH), est enregistré sur un serveur distant à Strasbourg, en Chine ou au Pakistan. Cela signifie qu un internaute de Garris se connecte sans le savoir peut être à Pékin pour visualiser le site de Saint Palais. Lire le site - Le site est «hébergé» sur l ordinateur distant (serveur Apache, serveur Web ou serveur FTP). Comme une bibliothèque. - L internaute, en écrivant l url du site (l adresse se connecte sur l ordinateur distant, récupère les fichiers html distants et son navigateur (IE, Mozilla, Safari ) recombine tout ça et affiche le résultat localement à l écran. L important est de toujours garder à l esprit qu un site est toujours loin. Si on doit faire une mise à jour sur un site, il faut envoyer les fichiers ailleurs. Tutoriel de maintenance site Page 2 sur 10 Saint Palais janvier 2011

3 Comment est constitué un site Internet Entre autres, il existe des sites en «flash», il existe des sites en «html» pur et il existe des sites en «php». Le php, pour faire simple, est une interface qui reconstitue des pages html. En gros, un site est un cahier avec 1 ou 2 pages transparentes (calques) superposées l une sur l autre, que l on feuillette. - La première page contient le texte (lettres, mots, phrases, mise en page, couleur et taille des polices, tableaux Ce calque principal contient les liens, c'est-à-dire que si la souris passe sur un lien, le clic déclenche une action. - L autre calque sera constitué de photos qui vont se superposer sur le texte, à l endroit défini en page 1, ou à peu près. Voici les pages telles qu elles sont construites et enregistrées sur le serveur distant : page1.html Images associées à la page1.html Blablabla Textetextetexte. (mettre ici la photo maisonbleue.jpg taille 50x25) Blablablatextetexteblablabla. Encore du texte, visiter Saint Palais (quand on cliquera le mot Saint Palais, ouvrir le site : blablabla. Et voici la page telle qu elle apparaîtra à l écran : Blablabla Textetextetexte. Lien Blablablatextetexteblablabla. Encore du texte, visiter Saint Palais blablabla. Quand on lit une page html, on reçoit d abord le texte, puis la photo qui vient se coller dessus, au bon endroit, à condition d avoir envoyé à distance la page 1 et la photo!!!! Tutoriel de maintenance site Page 3 sur 10 Saint Palais janvier 2011

4 Le site Errecart Voici l organisation des pages du site Errecart (au 17 janvier 2011) Modifier une page : Il y a plusieurs niveaux de difficultés pour modifier des pages, tout dépend ce que l on veut modifier. - Modifier seulement du texte? - Modifier du texte et modifier la police, la couleur, la taille? - Changer une photo? - Modifier l aspect de la photo, la taille la position? - Ajouter une photo? - Modifier un lien? - Ajouter un lien externe (sur du texte ou sur une photo ou image)? - Ajouter un lien interne (sur du texte ou sur une photo ou image)? - Modifier l aspect d un tableau (lignes, colonnes )? - Insérer un tableau? Si vous parvenez à faire tout ça, vous saurez administrer quasi intégralement le site. Tutoriel de maintenance site Page 4 sur 10 Saint Palais janvier 2011

5 Pour travailler sur les pages html, on utilisera le logiciel NVU, libre et gratuit. Téléchargez NVU et installez-le sur votre ordinateur. Depuis l explorateur, faites un clic droit sur une page html, puis ouvrir avec NVU. En ouvrant la page cooperation.html, par exemple, avec NVU on arrive à cet écran : Texte avec couleur et taille choisie Cellule de tableau Lien sur du texte Lien sur une image ou photo Ligne et colonne Insérer une image ou un tableau Insérer un lien Choix de la forme du texte Tutoriel de maintenance site Page 5 sur 10 Saint Palais janvier 2011

6 Comment insérer une image : Cliquer dans la page l endroit où l on veut l image, Cliquer sur Image, puis sur parcourir, Choisir l image, puis OK On peut ensuite choisir de redimensionner l image avec cet onglet ou celui-ci Les images Les photos et les images doivent être préparées avant de les insérer. Dans une page web, la photo doit «peser» entre 20 et 100 koctets. (utiliser Microsoft Picture Manager pour alléger ou compresser les images). Le nom ne doit comporter ni espace ni accent. La casse (minuscule-majuscule) doit être respectée absolument. Pour gagner du temps, sachez dans quel dossier vous stockez vos images pour les récupérer facilement lors de l option «parcourir». Sachez enfin que les dimensions sont exprimées en «pixel» Selon les écrans, 10 pixels mesurent entre 2 et 3 millimètres. Tutoriel de maintenance site Page 6 sur 10 Saint Palais janvier 2011

7 L onglet «lien» permet de passer, si l on veut, à une autre page du site : Après le signe = écrire le nom de la page (sans espace en respectant la casse) index.php?page=ecossefr Ou bien le lien peut aller faire visiter un autre site : On écrit alors l url complet du site à visiter. Tutoriel de maintenance site Page 7 sur 10 Saint Palais janvier 2011

8 Enfin, on peut renvoyer vers un document à télécharger : Si l on veut, on peut demander à ce que le document s ouvre dans une nouvelle fenêtre (ou pas, au choix) Attention au nom exact du chemin du document!!! ressouces/ficheshoraires/fichedeas_2011.pdf Puis OK Penser à enregistrer chaque modification!! Tutoriel de maintenance site Page 8 sur 10 Saint Palais janvier 2011

9 Vérifier localement les modifications : Pour visualiser un site en php, il faut au préalable installer un petit logiciel (libre et gratuit) capable de générer des pages html. Il s agit de EasyPHP. Une fois installé et configuré (une fois pour toutes, je pourrai vous aider pour cela), vous pouvez visualiser vos pages localement, à l identique d Internet. Cela permet de valider les modifications avant de les transférer en ligne, à la disposition du monde entier. Télécharger EasyPHP. Exécuter l installation. Ouvrir EasyPHP, puis sur l icône en barre des tâches, clic droit et administration Configurer EasyPHP pour pouvoir ouvrir localement le site : Important : Validez par OK, puis fermez le navigateur. Rouvrez le navigateur. Vérifier que Easy PHP est ouvert. Solution 1 : dans la barre d adresse du navigateur vous saisissez l url suivante : avec un petit raccourci dans les favoris ou marque pages de votre navigateur, cette opération sera «transparente» Vous pouvez désormais visionner le site localement pour valider les modifications. Solution 2 : dans la barre des tâches, clic droit sur Easy PHP et Administration. Ensuite, cliquer sur Site Errecart : Tutoriel de maintenance site Page 9 sur 10 Saint Palais janvier 2011

10 Mettre en ligne, transférer les modifications : Une fois les pages modifiées et validées localement, les images préparées (taille, nom, poids ), les fichiers mis en forme, il faut transférer les modifications à distance. Pour cela on utilise un logiciel de «transfert ftp» ou client ftp. Je vous propose WinSCP. Télécharger WinSCP, installez le. Pour la première ouverture, il faut créer une nouvelle connexion Hôte : ftp.lycee-errecart.com Port : 21 Utilistateur : lyceeerr Mot de passe : zaxxxxxxxx4 Protocole : FTP Enregistrer cette connexion. Pour toutes les autres fois, il suffira d ouvrir WinSCP, de cliquer sur le site puis «connecter». La fenêtre vous présente à gauche, votre ordinateur local et à droite, le site distant. On retrouve le site local et le site distant à l identique sauf les modifications que l on vient de faire. Avec la souris, il suffit de glisser/déplacer de la gauche vers la droite tous les fichiers modifiés, sans oublier les photos, images, documents et dossiers qui ont changé. Vérifier en ligne les modifications : Comme personne n est à l abri d une erreur, il vaut toujours mieux vérifier en ligne si les modifications réalisées sont bien actualisées : Ouvrir le navigateur web, entrer l adresse du site distant : Vérifier toutes les pages modifiées. Penser à «actualiser» pour rafraîchir les pages déjà «en cache» dans l ordinateur. C est tout. Tutoriel de maintenance site Page 10 sur 10 Saint Palais janvier 2011