KompoZer. Td3. M r Castanet - Année scolaire 2007/ page 1

Transcription

1 KompoZer Td3 M r Castanet - Année scolaire 2007/ page 1

2 Exercice 1 Dans cet exercice, nous allons appréhender les méthodes pour transférer notre site chez un hébergeur. Mais nous déplacerons notre site sur un ordinateur de la salle des profs qui a été transformé en mini-serveur : nous travaillerons uniquement sur notre réseau local. Cela nous permettra de simplifier la procédure pour bien comprendre le principe. Ainsi, l ordinateur de la salle des profs doit être équipé : d un serveur FTP : afin de pouvoir copier l ensemble des fichiers constituant notre site sur le disque dur de l ordinateur distant. d un serveur HTTP : afin que cette ordinateur puisse répondre au navigateur des clients et leur renvoie les pages Web demandées. Nous avons installé le logiciel EasyPHP sur cette ordinateur : en une simple installation, il installera un serveur FTP, HTTP et Apache. Dans cet encadré, nous reprenons une partie du tutorial (voir page 10 - IV. Structure d un site Internet) On se connecte à une page Web tel que à travers une adresse (URL) de la forme : Cet URL indique : Le client recevra les données sous le protocole HTTP : le langage de communication utilisé entre les navigateurs et les serveurs Web. Une connexion est ouverte sur le domaine yahoo.com en cherchant l hôte www : ces deux données identifient le site Web à consulter). Le reste de l URL indique le chemin d accès du fichier demandé : france/actualite/aujourdhui.html Le domaine et l hôte désigne le serveur (ou un ensemble de serveurs) hébergeant le site. Mais un ordinateur est repéré sur le net par quatre nombre écrit de la forme suivante : xxx.xxx.xxx.xxx où xxx est un nombre compris entre 0 et 255. Ce nombre s appelle le numéro IP et identifie (jusqu à la prochaine reconnexion) les ordinateurs de manière unique sur le Web. Ainsi, un ordinateur peut s identifier soit par son URL, soit par son numéro IP (cet IP reste fixe pour des gros serveurs tel que yahoo et change par moment pour les ordinateurs particuliers.). KompoZer - Td3 - page 2

3 1. Téléecharger le logiciel smartftp. Voici l adresse de son site officiel : Et installez-le. 2. En lançant le logiciel, vous vous connecterez suivant les paramètres de connexion suivant : hôte/adresse : ou intranet identifiant/loggin : eleve mot de passe : savio smartftp est un gestionnaire de fichier permettant de copier, supprimer des fichiers, création de dossier sur l ordinateur distant. Après identifications, il vous placera à la racine de l espace laissé à votre disposition par votre hébergeur : celle-ci dépend de l adresse rentrée mais également de l identifiant utilisé. 3. Sur votre disque dur local, sélectionnez l ensemble des fichiers présents à la racine de votre site et effectuez un glisser-déposer dans la fenêtre de SmartFTP afin de copier l ensemble de votre site sur le serveur. 4. a. Vérifier que votre site est bien ligne en essayant l adresse sur le navigateur Web de différentes machines. b. Vérifiez que les différents liens de votre site n est pas également souffert du transfert (aucun problème ne devrait apparaître si vous avez utilisé correctement les URL relatives). Notre serveur est placé sur le réseau local du lycée et celui-ci n est pas ouvert vers l extérieur. Ainsi, votre site sera accessible à partir de n importe quel ordinateur du lycée mais pas à partir de l extérieur. Pour remédier à ce problème, nous allons dans le prochain exercice trouvé un hébergeur gratuit sur Internet. Exercice 2 Maintenant que nous avons appris à transférer notre site sur un serveur, nous allons maintenant nous mettre à la recherche d un hébergeur qui nous dispensera un peu d espace dur pour notre site et nous permettra ainsi de le rendre accessible à toute personne sur Internet 24h/24. Si vous disposez d une connexion internet personnelle, votre fournisseur d accès Internet (FAI) peut vous offrir un espace personnel : renseignez-vous. Sinon nous allons tourner vers des hébergeurs gratuit qui, en échange de quelques publicités (pas forcemment les plus jolies) incrustées dans vos pages, vous offre KompoZer - Td3 - page 3

4 un espace pour héberger votre site. Pour les besoins de la suite de notre formation, nous allons choisir un hébergeur supportant l exécution du PHP et offrant une base de donnée MySQL : l hébergeur gratuit Lycos est choisi. Voici comment ouvrir un espace d hébergement chez Lycos. 1. Rendez vous à l adresse suivante : 2. Pour commencer l inscription, cliquez sur le lien : Créer un site! représenté dans l encadré ci-contre 3. La page suivante vous demandera quelques informations vous concernant. Le nom d utilisateur est important, car c est lui qui déterminera l adresse Internet d accés à votre site. Si votre nom d utilisateur est georges, votre site sera accessible alors par l adresse : 4. Une seconde page d information vous sera proposée pour terminer votre inscription : KompoZer - Td3 - page 4

5 5. La page suivante vous informe qu un mail vous a été envoyé pour confirmer votre inscription. Dans ce mail se trouve un lien qu il faudra visiter afin de rendre effective votre inscription : 6. Après avoir actionné le lien, vous accéderez à la page suivante : KompoZer - Td3 - page 5

6 7. Voila votre inscription et l ouverture de votre page a été faite. Il ne reste plus que maintenant d attendre la reception de l de confirmation avec tous les paramètres qui vous permettront de mettre votre site en ligne : Dans le cas où ce mail se fait longuement attendre, vous pouvez déjà commencer à utiliser votre site en utilisant les informations suivantes : L adresse de connexion à votre site : nom d utilisateur/ Les paramètres de connexion FTP pour transférer les fichiers sur le seveur de Lycos : hôte/adresse : ftp.membres.lycos.fr utilisateur/identifiant (loggin) : votre nom d utilisateur mot de passe FTP : votre mot de passe FTP Exercice 3 Voici quelques possibilités pour diffuser l existence de notre site : Envoyer l adresse du site à nos connaissances. Enregistrer notre site sur les moteurs de recherche. Si notre site parle d un sujet particulier (musique, sport, autre passion... ), nous avons toujours la possibilité de laisser des messages sur des forums associés à ce sujet. Dans cet exercice, nous allons voir comment référencer notre site auprès de Google (le moteur de recherche le plus utilisé actuellement). Mais il sera intéressant d effectuer la même démarche pour Yahoo, MSN... KompoZer - Td3 - page 6

7 Votre site peut être référencé par un moteur de recherche de plusieurs manières : Vous pouvez rajouter manuellement votre site à la liste des sites référencés pour un moteur de recherche. Votre site peut être référencée car il existe un lien sur un autre site qui lui est déjà référencé. Voici comment proposer votre site au moteur de recherche Google : 1. Rendez-vous à la page d accueil du site Google : 2. En bas de la page, cliquez sur le lien A propos de Google, puis le lien Ajouter/supprimer votre URL. 3. Sur la page proposée, mettez l adresse complète de la page, une description légère et rentrez également le code permettant d identifier que la proposition n a pas été fait par une machine. Exercice 4 JavaScript est un langage côté client : le code s exécutera directement sur la machine du client à l aide du navigateur. Grâce à JavaScript, le navigateur du client peut détecter les mouvements de souris, les touches actionnées et le langage Javascript pourra lancer l exécution de script au déclenchement de tels événements. Pour information, PHP est un langage côté serveur : c est à dire qu il s exécute directement sur le serveur hébergeant le site et que son utilisation est transparente pour l utilisateur. PHP n inter-agira qu avec les données fournis par le client au serveur. JavaScript s exécute sur l ordinateur client : le code est transporté jusqu au client (gén eralement inclu directement dans la page Web) et y est exécuté : ceci entraîne une augmentation de la taille du fichier (souvent négligeable) et le code du programme peut être récupéré par n importe quelle personne maîtrisant suffisamment ce langage. 1. Comme Firefox, KompoZer possède une console permettant de contrôler les erreurs de JavaScript. Il est intéressant dans le cas de l ajout de code Javascript sur notre page de laisser cette fenêtre ouverte : Outils Console JavaScript Si des anciens messages d erreurs sont présents, cliquez sur le bouton Effacer KompoZer - Td3 - page 7

8 afin de commencer l intégration du code JavaScript sur une nouvelle page. JavaScript gère certains événements pouvant occurer dans une page : Le client clique ou double-clic sur un élément HTML : onclick ; ondblclick Sa souris survole ou quitte un élément : onmouseover ; onmouseout Une touche est pressée : onkeypress L intégralité du document vient d être chargé (seulement utilisable par l élément body ) : onload Un formulaire contenu dans la page va être envoyé au serveur(seulement utilisable par l élément form ). onsubmit On associe alors une action à un événement : celle-ci s enclenchera à chaque apparition de l événement. Pour intégrer et utiliser convenablement le JavaScript, il est nécessaire de connaître le langage HTML : mais ceci n est pas d actualité dans cette partie de la formation. Nous nous contenterons d utiliser quelques fonctionnalités de KompoZer et d écrire déjà préparé pour nous. 2. Voici un exemple d utilisation, où le passage de la souris du client au dessus d un élément HTML entraîne le changement de sa couleur de fond. a. Choisissez l élément de votre page qui sera affecté par ce comportement, faîtes un clic-droit dans la barre d état afin de sélectionner la commande suivante : menu contextuel Propriétés avancées... Evénements JavaScript a. Lors du passage du curseur au dessus de l élément, la couleur de fond changera. Pour cela,, sélectionnez l attribut onmouseover et affectez-lui la valeur : KompoZer - Td3 - page 8

9 this.style.backgroundcolor= #BBBBBB b. Lorsque le curseur quitte l élément, la couleur de fond redevient transparente. Pour cela, sélectionnez maintenant l attribut onmouseout et affectez-lui la valeur : this.style.backgroundcolor= transparent Attention de respecter dans la saisie des codes JavaScript les majuscules et minuscules car JavaScript y est sensible : on dira que JavaScript est sensible à la casse des caractères. Pour comprendre la signification des valeurs affectées, il faudra attendre la seconde partie de la formation. Mais la valeur #BBBBBB est une chaînes de caractères représentant une couleur en codage RGB sur 24 bits. 3. Dans cette partie de l exercice, nous allons utiliser JavaScript pour faciliter la maintenance du bandeau de navigation de notre site. Un fichier externe contiendra le code de ce bandeau, et JavaScript chargera automatiquement ce code (et par là le bandeau) dans chacun des fichiers, facilitant ainsi la maintenance du site. Il est à noter que cette solution est artisanale et que le langage de programmation PHP offrira une solution plus confortable. Pour des raisons techniques nous utiliserons cette méthode que pour les fichiers index.html contenus dans les sous-dossiers (pour un problème de lien relatif) a. Créez un fichier nommé navigation.js à la racine de votre site : partez d un nouveau fichier texte à partir de la commande : Menu contextuel Nouveau Document texte Et modifier son nom. b. On va récupérer le contenu du bandeau de navigation : Pour cela, ouvrez un des fichiers index.html d une des sous-catégories. Repérez l élément div représentant le bandeau de navigation (cet élément porte l identifiant ID pnavigation ). Cliquez sur le bouton de cet élément dans la barre d état afin de sélectionner l ensemble de son contenu. Passez en affichage Source (onglet du bas de la fenêtre de KompoZer) : le code source de cet élément div se trouve sélectionner. Actionnez la commande copier dans le menu Edition ou actionnez la combinaison de touche Ctrl+C pour copier la sélection dans le pressepapier. c. Editez maintenant le fichier navigation.js en l ouvrant avec le bloc-note. Collez-y le contenu du presse-papier (commande Edition Coller ou KompoZer - Td3 - page 9

10 combinaison de touches Ctrl+V) : c est à dire le code HTML représentant le bandeau de navigation. Il est nécessaire de supprimer tous les sauts de lignes du code : celui-ci ne doit former qu une seule ligne aussi longue soit-elle. autre contrainte liée à JavaScript, cette ligne ne peut contenir les apos-trophes ) Nous allons inclure ce code dans une variable que JavaScript va insérer par la suite automatiquement dans nos fichiers. Pour cela, rajoutez en début et en fin de fichiers les caractères nécessaires pour que l ensemble du code ait la ressemblance suivante : var codenavigation=... ; document.write(codenavigation); où les pointillés représentent le contenu du presse-papier. Enregistrez et fermez le fichier. d. Pour chaque fichier des sous-dossiers, nous devons demander l inclusion de ce fichier qui aura pour effet d écrire le bandeau. Pour cela, éditez chacun de ces fichiers à l aide de KompoZer, et rajouter le code suivant juste après chaque balise ouvrante <body> à l aide de l onglet Source : <SCRIPT src="../navigation.js" type=text/javascript></script> Voici quelques explications sur ce qui a été réalisé dans cette question : On ne s intéresse qu au sous-dossier car le contenu du bandeau de navigation de la page d accueil (situé à la racine du site) ne contient pas les même liens relatifs que les autres fichiers... Ceci dû à la différence d emplacement des fichiers. Nous avons supprimé tous les sauts de lignes dans le code du contenu de la barre de navigation, car une commande JavaScript ne peut contenur de saut de ligne (une des limitations de ce langage) La rencontre du code document.write(...) permet à la page d insérer le code présent entre les parenthèses. Ici, il insérera le contenu de la variable codenavigation qui est le contenu de la barre de navigation. KompoZer - Td3 - page 10