exo3

KompoZer
Td3
Mr Castanet - Année scolaire 2007/2008 - page 1
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 :
http://www.yahoo.com/france/actualite/aujourdhui.html
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
1. Téléecharger le logiciel “smartFTP”. Voici l’adresse de son site officiel :
www.smartftp.com/
Et installez-le.
2. En lançant le logiciel, vous vous connecterez suivant les paramètres de connexion
suivant :
hôte/adresse : 192.168.0.61 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 http://192.168.0.61
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
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 :
http://www.multimania.lycos.fr/
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 :
http://members.multimania.fr/georges
4. Une seconde page d’information vous sera proposée pour terminer votre inscription :
KompoZer - Td3 - page 4
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
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’email 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 :
http://membres.lycos.fr/votre 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
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 :
http://google.fr
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
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
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
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