{"id":146,"date":"2017-01-02T20:48:02","date_gmt":"2017-01-02T20:48:02","guid":{"rendered":"http:\/\/cellbiol.com\/test-bioinfo\/?page_id=146"},"modified":"2017-06-30T12:20:16","modified_gmt":"2017-06-30T12:20:16","slug":"uploading-local-files-to-a-remote-server","status":"publish","type":"page","link":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/chapter-3-your-first-web-page-learning-html-and-css\/uploading-local-files-to-a-remote-server\/","title":{"rendered":"3-2: Uploading local files to a remote server"},"content":{"rendered":"<h2>Local vs Remote File Editing<\/h2>\n<p>In a typical workflow, html pages and scripts code are edited locally, on a client PC, where a graphical user interface, and nice graphical editing software are available. Similarly, images are generally edited offline, maybe by using a program such as <a href=\"https:\/\/www.adobe.com\/products\/photoshop.html\">Adobe Photoshop<\/a>\u00a0or <a href=\"https:\/\/www.gimp.org\">The GIMP<\/a>.<\/p>\n<p>Edited files are then uploaded to the server for online publication by using an FTP client software. Mind that modern file transfer clients are not limited to the use of the FTP protocol, but also allow connection with SFTP and\/or SSH\/SCP (SCP is a protocol associated to SSH, called the <strong>S<\/strong>ecure <strong>C<\/strong>opy <strong>P<\/strong>rotocol, used to transfer files over an SSH connection). This is essential for us because to upload files to one of our servers, <a href=\"\/bioinformatics_web_development\/chapter-2-the-linux-operating-system-setting-up-a-linux-web-server\/installing-and-using-open-ssh-server-for-remote-connections\/\">on which OpenSSH Server was installed<\/a>, we will need to select a secure protocol.<\/p>\n<p>In alternative, or maybe for particular tasks and limited editing, html files or source code files can be edited directly on the server over a Terminal SSH connection with a shell editor such as nano. However graphical text editors are more friendly to use and significant amounts of web development work will usually take place locally by using tools running within a graphical desktop environment (either Linux, Mac or Windows, depending on what you have). For images, we basically have no alternative but working locally within a graphical environment, and then upload the images to the remote server.<\/p>\n<h2>FTP Clients &#8211; FileZilla<\/h2>\n<p>Several FTP clients are available, for all OS platforms. We will just consider one FTP client, which is free software licensed under the GNU Public Licence, available for all platforms, called <a href=\"https:\/\/filezilla-project.org\/\">FileZilla<\/a>. Feel free to use a different software if you prefer, the basic functionalities of these FTP clients are generally similar, as they basically all offer a graphical interface to the underlying protocols.<\/p>\n<p><a href=\"https:\/\/filezilla-project.org\/\">FileZilla can be downloaded here<\/a><\/p>\n<p>On the software interface there is an icon on the upper-left part (see figure 3-2-3) that provides access to the FileZilla Site Manager. This is where you can create new sites to connect to. For each site you need to enter:<\/p>\n<ul>\n<li>A name, for naming the connection (this can be anything you choose, for example &#8220;University server&#8221;). In the example in figure 3-2-1 the site is called &#8220;My Site&#8221;.<\/li>\n<li>An host address (this can be either a host name or an IP address)<\/li>\n<li>The connection protocol (FTP or SFTP-SSH). We will always choose the secure protocol<\/li>\n<li>The username of your user on the server<\/li>\n<li>The remote password<\/li>\n<\/ul>\n<figure id=\"attachment_150\" aria-describedby=\"caption-attachment-150\" style=\"width: 619px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_site_manager.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-150\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_site_manager.png\" alt=\"The FileZilla Site Manager\" width=\"619\" height=\"497\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_site_manager.png 619w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_site_manager-300x241.png 300w\" sizes=\"auto, (max-width: 619px) 85vw, 619px\" \/><\/a><figcaption id=\"caption-attachment-150\" class=\"wp-caption-text\">Figure 3-2-1: The FileZilla Site Manager<\/figcaption><\/figure>\n<p>Once a site is created and saved, you can, at any time, go to the site manager and connect to the site by simply pressing the connect button.<\/p>\n<p>On the first connection, similarly to what happens on a first SSH connection to a server through the Terminal, you get a Key confirmation screen (figure 3-2-2). If you tick the option checkbox you will see this confirmation screen again on subsequent connections.<\/p>\n<figure id=\"attachment_322\" aria-describedby=\"caption-attachment-322\" style=\"width: 554px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_first_connection_server_host_key_check.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-322\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_first_connection_server_host_key_check.png\" alt=\"FileZilla RSA Key check on first connection\" width=\"554\" height=\"226\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_first_connection_server_host_key_check.png 554w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_first_connection_server_host_key_check-300x122.png 300w\" sizes=\"auto, (max-width: 554px) 85vw, 554px\" \/><\/a><figcaption id=\"caption-attachment-322\" class=\"wp-caption-text\">Figure 3-2-2: FileZilla RSA Key check on first connection<\/figcaption><\/figure>\n<p>Once you are connected, you will see a window with two panes. On the left, the local filesystem (in red in the figure), on the right the server&#8217;s remote filesystem (in green).<\/p>\n<figure id=\"attachment_323\" aria-describedby=\"caption-attachment-323\" style=\"width: 980px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_interface.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-323\" src=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_interface.png\" alt=\"FileZilla Interface\" width=\"980\" height=\"720\" srcset=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_interface.png 980w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_interface-300x220.png 300w, http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-content\/uploads\/2017\/01\/filezilla_interface-768x564.png 768w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/a><figcaption id=\"caption-attachment-323\" class=\"wp-caption-text\">Figure 3-2-3: FileZilla Interface<\/figcaption><\/figure>\n<p>In order to upload files to the server, just select files from the left pane and drag them to the right pane, in the correct destination directory.<\/p>\n<h2>FireFTP Firefox add-on<\/h2>\n<p>It is worth mentioning here than another nice FTP client that we recommend is the FireFTP add-on for Firefox. It is cross-platform, easy to install and use. With the Firefox browser, go to the <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/fireftp\/\" target=\"_blank\">fireFTP add-on page<\/a> for installation.<\/p>\n<p>Before we move to building the first web page, let&#8217;s have a look to <a href=\"\/bioinformatics_web_development\/chapter-3-your-first-web-page-learning-html-and-css\/code-text-editors\/\">available code text editors<\/a>\u00a0to do the job.<\/p>\n<div class=\"google-ad\">\n<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- bioinfo web dev 2 --><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:inline-block;width:728px;height:90px\"\n     data-ad-client=\"ca-pub-0159360445983090\"\n     data-ad-slot=\"3442176918\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<h2>Chapter Sections<\/h2>\n<p>[pagelist include=&#8221;135&#8243;]<\/p>\n<p>[siblings]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Local vs Remote File Editing In a typical workflow, html pages and scripts code are edited locally, on a client PC, where a graphical user interface, and nice graphical editing software are available. Similarly, images are generally edited offline, maybe by using a program such as Adobe Photoshop\u00a0or The GIMP. Edited files are then uploaded &hellip; <a href=\"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/chapter-3-your-first-web-page-learning-html-and-css\/uploading-local-files-to-a-remote-server\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;3-2: Uploading local files to a remote server&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":135,"menu_order":2,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-146","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/comments?post=146"}],"version-history":[{"count":19,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/146\/revisions"}],"predecessor-version":[{"id":2749,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/146\/revisions\/2749"}],"up":[{"embeddable":true,"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/pages\/135"}],"wp:attachment":[{"href":"http:\/\/www.cellbiol.com\/bioinformatics_web_development\/wp-json\/wp\/v2\/media?parent=146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}