Mise en ligne : Filezilla WEB01

Cette exercice porte sur la mise en ligne de fichiers avec le logiciel Filezilla. Il s’agit d’effectuer des manipulations de fichiers et d’observer le résultat en ligne.

Consignes de l’exercice

Créez un dossier pour stocker votre site sur le bureau (ou dans l’espace Documents) de votre ordinateur. Ce dossier sera le dossier racine local de votre site.

Dans le dossier racine local, créez une page HTML avec la structure suivante :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mise en ligne avec Filezilla</title>
    </head>

    <body>
   
    </body>
</html>

Enregistrez la page HTML sous le nom mise_en_ligne_exo1.html en prenant soin de bien placer votre fichier dans le dossier racine local.

Complétez la page HTML mise_en_ligne_exo1.html avec le contenu suivant :

  • Un titre de niveau 1
  • Un paragraphe

Ouvrez la page mise_en_ligne_exo1.html dans un navigateur en local.

Observez attentivement le contenu du champ adresse de votre navigateur. Que remarquez-vous ? Consultez ensuite les explications ci-dessous.

À l’aide du client FTP Filezilla, mettez en ligne la page mise_en_ligne_exo1.html :

  1. Connectez-vous à votre espace d’hébergement ;
  2. Naviguez dans le dossier permettant de publier du contenu (généralement www ou public) de votre espace distant ;
  3. Déposez le fichier.

Avec votre navigateur, consultez la version en ligne de la page mise_en_ligne_exo1.html.

Observez attentivement le contenu du champ adresse de votre navigateur. Quelles sont les différences et les points communs entre l’adresse de la question 8 et celle de la question 6 ?

Modifiez la page mise_en_ligne_exo1.html pour y ajouter un paragraphe contenant le texte de votre choix.

Remplacez la page en ligne par la nouvelle que vous venez de modifier et consultez vos modifications en ligne.

Affichez le contenu de votre dossier racine local. Est-ce que les extensions de fichiers sont visibles ? Consultez l’explication ci-dessous.

Seulement si les extensions de fichiers n’étaient pas visibles à la question précédente, paramétrez votre système d’exploitation pour affichez les extensions de fichiers (.jpg, .png par exemple) .

Récupérez une image de paysage sur Internet avec les critères suivants :

  • Image réutilisable et modifiable / Licence domaine public ou CC0.
  • Largeur de l’image supérieure à 3 000 px voire plus si possible.

Nommez l’image mise_en_ligne_img_01 en respectant l’extension de fichier originale.

Attention !
Prenez de bonnes habitudes et ne mettez jamais d’accents, de caractères spéciaux, de majuscules ou d’espaces dans les noms de vos fichiers.

Insérez l’image dans la page mise_en_ligne_exo1.html et testez votre page en local pour vérifier que cela fonctionne bien… L’image devrait être beaucoup trop grande pour s’afficher correctement.

L’image étant trop grande, redimensionnez-la en ajoutant la propriété suivante dans l’image style="width: 400px;".

Testez votre page en local, l’image doit bien s’afficher et avoir cette fois-ci une dimension raisonnable.

Mettez à jour la page mise_en_ligne_exo1.html sur le serveur et consultez-la en ligne. L’image doit s’afficher.

Directement sur le serveur, créez un nouveau dossier images dans votre dossier racine distant et déplacez-y l’image mise_en_ligne_img_01.

Quelques précisions importantes :
Le dossier racine distant est l’équivalent sur le serveur du dossier racine présent sur votre ordinateur. Il contient donc tous les fichiers de votre site et est qualifié de distant car accessible via Internet. Celui qui est présent sur votre ordinateur sera quant à lui qualifié de dossier racine local. Pour que tout fonctionne correctement, il peuvent avoir un nom différent (par exemple : dossier_racine (pour le local) et www (pour le distant), mais leur contenus doivent être parfaitement identiques.

Testez votre page en ligne, l’image ne doit plus s’afficher.

Dans votre dossier racine local, effectuez les modifications nécessaires afin de réglez le problème avec l’image et replacez la page html corrigée sur le serveur.

Consultez la page en ligne. L’image doit s’afficher.

Videz le cache de votre navigateur.

Informations sur le cache :
Le cache d’un navigateur est un dossier qui stocke tous les fichiers que le navigateur télécharge lorsqu’il affiche une page web. Il est utile pour accélérer l’affichage des pages que vous consultez régulièrement.
Si vous consultez la même page web deux fois dans la même journée, votre navigateur ne téléchargera les images qu’une seule fois et récupérera celles qu’il a enregistré dans son cache lors de la première visite. La page se chargera ainsi plus rapidement.

Actualisez votre page dans le navigateur et observez le délai d’affichage de l’image.

Avez-vous remarqué un délai pour afficher l’image ?

Modifiez la page mise_en_ligne_exo1.html pour y afficher 5 fois la même image.

Mettez votre page mise_en_ligne_exo1.html à jour sur le serveur et consultez-la en ligne.

Videz à nouveau le cache de votre navigateur.

Actualisez votre page dans le navigateur et observez le délai d’affichage des images. Voyez-vous une différence par rapport à la question 25 ?

Dans le champ adresse du navigateur, supprimez le nom du fichier à la fin de l’adresse et validez.

  1. Si vous obtenez une erreur, c’est plutôt une bonne nouvelle, cela signifie que la liste des fichiers n’est pas visible par défaut, mais vous allez devoir traiter la question suivante…
  2. Si vous n’avez pas d’erreur et que la liste des fichiers présents dans votre dossier racine distant s’affiche alors vous pouvez sauter la question suivante.

Facultatif en fonction de la question précédente. Nous allons faire une petite manipulation pour changer un paramètre du serveur, suivez scrupuleusement les consignes suivantes :

  1. Créez un nouveau fichier dans votre dossier racine local et nommez-le htaccess.txt
  2. Modifier le fichier en question pour lui ajouter EXACTEMENT le texte suivant : Options +Indexes. ATTENTION à ne pas ajouter d’espaces en trop !
  3. Enregistrez le fichier.
  4. Déposez le fichier dans votre dossier racine distant.
  5. Renommez le fichier pour lui donner EXACTEMENT le nom suivant sans oublier le point au début et sans l’extension .txt à la fin : .htaccess
  6. Vous devriez maintenant être en mesure de consulter la liste des fichiers de votre site.
  7. Si vous obtenez une erreur 500 Internal Server Error, c’est que vous avez probablement fait une erreur dans le contenu du fichier.

Renommez la page mise_en_ligne_exo1.html en index.html.

Mettez en ligne et consultez la page index.html.

Essayez de consulter la liste des fichiers dans votre navigateur…

Supprimez la page index.html du serveur.

Déconnectez Filezilla du serveur.

Questions facultatives…

Vous pouvez vous aider de l’article suivant pour traiter les questions suivantes Utiliser les options avancées de Filezilla.

Via le Gestionnaire de sites, enregistrez l’accès au serveur dans Filezilla. Vous devez paramétrer l’accès au serveur avec :

  • Le dossier racine de votre site comme dossier local par défaut.
  • Le dossier de votre site sur le serveur comme dossier distant par défaut.
  • Dans les options avancées, cochez la case Comparaison de dossier.

Grâce au Gestionnaire de sites connectez-vous au serveur. Si votre paramétrage est correct, vous devez avoir le dossier de votre site local à gauche et le dossier de votre site distant à droite.

Personnalisez Filezilla pour définir Notepad++ comme logiciel d’édition par défaut.

Dans la partie Site local (à gauche) de Filezilla, faites un clique droit puis choisissez l’option Afficher / Éditer sur le fichier index.html.

Modifiez le fichier pour y ajouter un paragraphe.

Basculez sur Filezilla et mettez en ligne votre fichier modifié.

Attention
Si vous éditez un fichier dans la partie de droite, la partie site distant, Filezilla vous demandera de remplacer le fichier sur le serveur. Vous pouvez donc modifier un fichier plus rapidement, mais de cette manière, vous ne gardez aucune trace de la modification de fichier sur votre ordinateur. En cas de mauvaise manipulation, vous perdez tout !

Supprimez votre site du gestionnaire de site de Filezilla.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.