{"id":3090,"date":"2020-11-03T22:01:50","date_gmt":"2020-11-03T21:01:50","guid":{"rendered":"http:\/\/graphizm.fr\/greta\/?p=3090"},"modified":"2025-10-05T19:16:08","modified_gmt":"2025-10-05T17:16:08","slug":"utiliser-filezilla","status":"publish","type":"post","link":"https:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/","title":{"rendered":"Utiliser Filezilla"},"content":{"rendered":"\n<p class=\"has-subtle-background-background-color has-background\">Dans ce cours, nous allons voir <strong>comment utiliser le logiciel Filezilla pour transf\u00e9rer le dossier d&rsquo;un site simple, de notre poste de travail (en local) sur le(s) serveur(s) d&rsquo;Alwaysdata.<\/strong><\/p>\n\n\n\n<p>Lors du cours pr\u00e9c\u00e9dent (<a rel=\"noreferrer noopener\" href=\"http:\/\/graphizm.fr\/greta\/fcs\/utiliser-services-gratuits-alwaysdata\/\" target=\"_blank\">Utiliser les services gratuits d&rsquo;Alwaysdata<\/a>), vous avez ouvert un compte gratuit chez l&rsquo;h\u00e9bergeur Alwaysdata. Je vous ai indiqu\u00e9 comment <strong>r\u00e9cup\u00e9rer les param\u00e8tres de connexion FTP<\/strong> dont vous allez avoir besoin. Assurez-vous de les avoir \u00e0 port\u00e9e de main&nbsp;!<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Sommaire<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #6b6b6b;color:#6b6b6b\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #6b6b6b;color:#6b6b6b\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/#Rappel\" >Rappel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/#Les_tutos\" >Les tutos<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/#Les_videos\" >Les vid\u00e9os<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/#Les_tutos_ecrits_et_illustres\" >Les tutos \u00e9crits (et illustr\u00e9s)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/#La_pratique\" >La pratique<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/#Precautions_a_prendre\" >Pr\u00e9cautions \u00e0 prendre<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/graphizm.fr\/greta\/fcs\/utiliser-filezilla\/#Test_de_bon_fonctionnement\" >Test de bon fonctionnement<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Rappel\"><\/span>Rappel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Vous disposez maintenant de toutes les donn\u00e9es de param\u00e9trage pour pouvoir mettre votre site en ligne<\/strong> en utilisant le client FTP <a href=\"https:\/\/filezilla-project.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Filezilla<\/a>.<\/p>\n\n\n\n<p>\u279c Si ce logiciel n&rsquo;est pas install\u00e9 sur votre poste de travail, je vous invite \u00e0 l&rsquo;installer d\u00e8s maintenant, en veillant \u00e0 installer Filezilla-client depuis l&rsquo;adresse <a rel=\"noreferrer noopener\" href=\"https:\/\/filezilla-project.org\/download.php?type=client\" target=\"_blank\">https:\/\/<strong>filezilla-project.org<\/strong>\/download.php?type=client<\/a>.<\/p>\n\n\n\n<p class=\"has-accent-background-color has-background\"><strong>Attention, soyez tr\u00e8s vigilants&nbsp;: l&rsquo;adresse filezilla.org (sans le \u201d-project\u201d&#8230;) est un site malveillant&nbsp;!<\/strong> N&rsquo;essayez m\u00eame pas d&rsquo;y aller&nbsp;!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_tutos\"><\/span>Les tutos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Je ne vais pas r\u00e9inventer le fil \u00e0 couper le beurre, il existe de nombreux tutos en ligne pour apprendre \u00e0 utiliser Filezilla. Voici ma s\u00e9lection.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_videos\"><\/span>Les vid\u00e9os<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">L&rsquo;installation de Filezilla<\/h4>\n\n\n\n<p>Dans la vid\u00e9o ci-dessous, l&rsquo;auteur va droit au but, installe Filezilla et transf\u00e8re un fichier PSD dans un dossier nomm\u00e9 \u201cpublic_html\u201d. Pour aller plus loin, nous sommes invit\u00e9s \u00e0 regarder une autre vid\u00e9o&#8230; sur laquelle il envisage de nous montrer comment installer WordPress&nbsp;! Ben non, cela ne nous concerne pas (&#8230; pas maintenant du moins) mais, pour tout ce qui nous est pr\u00e9sent\u00e9, du d\u00e9but jusqu&rsquo;au transfert du fichier PSD, je valide&nbsp;!<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Se connecter en ftp\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/rK2y0vpXPrQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">L&rsquo;utilisation de Filezilla<\/h4>\n\n\n\n<p>Dans la vid\u00e9o suivante, tout commence bien puis l&rsquo;auteur s&#8217;emm\u00eale un peu les pinceaux avec les ports 21 et 22 et les protocoles ftp et sftp&#8230; mais pour la suite c&rsquo;est impeccable. Le dossier public c\u00f4t\u00e9 serveur est un dossier \u201cwww\u201d (comme chez Alwaysdata)&#8230; cela nous va donc parfaitement. Valid\u00e9&nbsp;!<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Tutoriel FileZilla - Se connecter \u00e0 un serveur FTP chez un h\u00e9bergeur\" width=\"580\" height=\"326\" src=\"https:\/\/www.youtube.com\/embed\/hxuGjo1u0eo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>L&rsquo;auteur de la vid\u00e9o ci dessus (Fabien Numelion) propose sur <a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/channel\/UCtVVIxhOVVt7XHYF14u6IgQ\" target=\"_blank\">sa cha\u00eene YouTube<\/a> d&rsquo;autres vid\u00e9os susceptibles de vous int\u00e9resser&#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Les_tutos_ecrits_et_illustres\"><\/span>Les tutos \u00e9crits (et illustr\u00e9s)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>J&rsquo;ai rep\u00e9r\u00e9 il y a d\u00e9j\u00e0 longtemps un article qui expose les choses de mani\u00e8re d\u00e9taill\u00e9e. Filezilla a relook\u00e9 l\u00e9g\u00e8rement son interface depuis le moment o\u00f9 cet article a \u00e9t\u00e9 r\u00e9dig\u00e9 mais les boutons et les fen\u00eatres n&rsquo;ont pas chang\u00e9 de place&#8230;<\/p>\n\n\n\n<p>Vous pouvez donc lire <a rel=\"noreferrer noopener\" href=\"https:\/\/www.culture-informatique.net\/comment-ca-marche-filezilla\/\" target=\"_blank\">Comment \u00e7a marche Filezilla&nbsp;?<\/a>. Pour les curieux ou ceux qui souhaitent se rafra\u00eechir la m\u00e9moire sur un point ou deux, il y a des liens vers d&rsquo;autres articles comme <a rel=\"noreferrer noopener\" href=\"https:\/\/www.culture-informatique.net\/cest-quoi-un-serveur-ftp\/\" target=\"_blank\">C&rsquo;est quoi un serveur FTP&nbsp;?<\/a>. On est en plein dans le sujet&nbsp;!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"La_pratique\"><\/span>La pratique<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Concr\u00e8tement, il va falloir <strong>transf\u00e9rer dans le dossier \u201cwww\u201d<\/strong> situ\u00e9 sur le serveur d&rsquo;alwaysdata <strong>le dossier complet de votre site<\/strong> personnalis\u00e9 situ\u00e9 en attendant sur votre poste de travail. En utilisant Filezilla comme cela vous a \u00e9t\u00e9 montr\u00e9 et expliqu\u00e9 plus haut, tout devrait marcher comme sur des roulettes&nbsp;!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Precautions_a_prendre\"><\/span>Pr\u00e9cautions \u00e0 prendre<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Avant de vous lancer, vous allez faire attention \u00e0 quelques petites choses&#8230;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Le fichier index.html<\/h4>\n\n\n\n<p>Il est imp\u00e9ratif, pour que votre site s&rsquo;affiche dans la fen\u00eatre du navigateur de vos futurs lecteurs en saisissant une simple URL, que le dossier de votre site contienne un fichier nomm\u00e9 \u201cindex.html\u201d. C&rsquo;est la page d&rsquo;accueil&#8230; m\u00eame si elle est la seule page du site. <strong>Si le fichier html que vous voulez montrer au reste du monde porte un autre nom, renommez-le \u201cindex.html\u201d !<\/strong> <\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\">Si vous le nommez autrement, il sera n\u00e9cessaire de saisir le nom du fichier \u00e0 la fin de l&rsquo;url d&rsquo;acc\u00e8s au dossier du site.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Les images dans le dossier img<\/h4>\n\n\n\n<p>Inutile de transf\u00e9rer sur le serveur d&rsquo;Alwaysdata des images de maquette qui n&rsquo;ont pas \u00e9t\u00e9 utilis\u00e9 dans la page HTML. Veillez \u00e0 ce que vos images soient correctement compress\u00e9es. Vos images doivent \u00eatre \u00e0 la dimension maximale de leur utilisation dans le site (affich\u00e9 sur grand \u00e9cran)&#8230; pas plus&nbsp;! <strong>Compress\u00e9es au format jpeg (qualit\u00e9 \u00e9lev\u00e9e ou 60%), vos photos ne surchargeront pas votre espace d&rsquo;h\u00e9bergement.<\/strong> <\/p>\n\n\n\n<p class=\"has-secondary-background-color has-background\"> Si vous chargez excessivement l&rsquo;espace mis gratuitement \u00e0 votre disposition (100 Mo maximum), vous ne pourrez pas h\u00e9berger votre portfolio et le CMS avec lequel nous travaillerons au niveau 3 de la formation&nbsp;!<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Le nom du dossier<\/h4>\n\n\n\n<p>L&rsquo;url permettant d&rsquo;acc\u00e9der \u00e0 votre compte est de la forme <strong>nomducompte.alwaysdata.net<\/strong>. Quand vous aurez transf\u00e9r\u00e9 votre dossier de site, pour acc\u00e9der au fichier \u201cindex.html\u201d il faudra saisir une adresse sous la forme <strong>nomducompte.alwaysdata.net<span style=\"color: #0170ba;\" class=\"ugb-highlight\">\/nom-du-dossier<\/span><\/strong>.<\/p>\n\n\n\n<p>L&rsquo;adresse de votre site se termine par le nom que vous allez donner au dossier qui contient le fichier \u201cindex.html\u201d et les dossiers d\u00e9pendants (le dossier \u201ccss\u201d, le dossier \u201cimg\u201d, etc.).<\/p>\n\n\n\n<p>Nommez votre dossier de site sans mettre de majuscule ou de chiffre au d\u00e9but du nom, sans lettres accentu\u00e9es ni espaces. Utilisez de pr\u00e9f\u00e9rence les tirets hauts (tirets du 6) pour s\u00e9parer les mots. <strong>Soyez concis et explicites&nbsp;!<\/strong><\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Une fois ces pr\u00e9cautions prises, vous pouvez transf\u00e9rer le dossier correctement nomm\u00e9 de votre poste de travail vers le dossier \u201cwww\u201d (dans le dossier&#8230; pas \u00e0 c\u00f4t\u00e9 du dossier \u201cwww\u201d).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Test_de_bon_fonctionnement\"><\/span>Test de bon fonctionnement<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Si tout s&rsquo;est bien pass\u00e9, vous devriez acc\u00e9der \u00e0 votre site en saisissant dans votre navigateur l&rsquo;adresse <strong>nomducompte.alwaysdata.net\/nom-du-dossier<\/strong>.<\/p>\n\n\n\n<p>En transmettez-moi cette adresse, je pourrai voir votre site, comme tous ceux \u00e0 qui vous communiquerez la m\u00eame adresse&nbsp;!<\/p>\n\n\n\n<p class=\"has-subtle-background-background-color has-background\">\u279c Transf\u00e9rez un autre dossier de page Web, nomm\u00e9 convenablement (avec son fichier \u201cindex.html\u201d \u00e0 l&rsquo;int\u00e9rieur)&#8230; Modifiez ensuite le nom du dossier \u00e0 la fin de l&rsquo;url pr\u00e9c\u00e9dente&nbsp;: vous devriez acc\u00e9der \u00e0 votre deuxi\u00e8me site Web&nbsp;!<\/p>\n\n\n\n<p>Voil\u00e0 qui vous ouvre de nouvelles perspectives pour l&rsquo;avenir \ud83d\ude09<\/p>","protected":false},"excerpt":{"rendered":"<p>Dans ce cours, nous allons voir comment utiliser le logiciel Filezilla pour transf\u00e9rer le dossier d&rsquo;un site simple, de notre poste de travail (en local) sur le(s) serveur(s) d&rsquo;Alwaysdata. Lors du cours pr\u00e9c\u00e9dent (Utiliser les services gratuits d&rsquo;Alwaysdata), vous avez ouvert un compte gratuit chez l&rsquo;h\u00e9bergeur Alwaysdata. Je vous ai indiqu\u00e9 comment r\u00e9cup\u00e9rer les param\u00e8tres [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,16],"tags":[],"class_list":["post-3090","post","type-post","status-publish","format-standard","hentry","category-fcs","category-fcs2-cours"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","twentytwenty-fullscreen":""},"post_excerpt_stackable_v2":"<p>Dans ce cours, nous allons voir comment utiliser le logiciel Filezilla pour transf\u00e9rer le dossier d&rsquo;un site simple, de notre poste de travail (en local) sur le(s) serveur(s) d&rsquo;Alwaysdata. Lors du cours pr\u00e9c\u00e9dent (Utiliser les services gratuits d&rsquo;Alwaysdata), vous avez ouvert un compte gratuit chez l&rsquo;h\u00e9bergeur Alwaysdata. Je vous ai indiqu\u00e9 comment r\u00e9cup\u00e9rer les param\u00e8tres de connexion FTP dont vous allez avoir besoin. Assurez-vous de les avoir \u00e0 port\u00e9e de main&nbsp;! Sommaire Toggle RappelLes tutosLes vid\u00e9osLes tutos \u00e9crits (et illustr\u00e9s)La pratiquePr\u00e9cautions \u00e0 prendreTest de bon fonctionnement Rappel Vous disposez maintenant de toutes les donn\u00e9es de param\u00e9trage pour pouvoir mettre votre\u2026<\/p>","category_list_v2":"<a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/\" rel=\"category tag\">FCS<\/a>, <a href=\"https:\/\/graphizm.fr\/greta\/category\/fcs\/fcs2-cours\/\" rel=\"category tag\">FCS2-cours<\/a>","author_info_v2":{"name":"Yves Goguely","url":"https:\/\/graphizm.fr\/greta\/author\/formationsgreta\/"},"comments_num_v2":"0 commentaire","_links":{"self":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3090","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/comments?post=3090"}],"version-history":[{"count":17,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3090\/revisions"}],"predecessor-version":[{"id":3128,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/posts\/3090\/revisions\/3128"}],"wp:attachment":[{"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/media?parent=3090"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/categories?post=3090"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphizm.fr\/greta\/wp-json\/wp\/v2\/tags?post=3090"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}