Mise en ligne

Il existe aujourd’hui de nombreuses manières de mettre en ligne un site web, afin qu’il soit accessible au plus grand nombre (et notamment à vos enseignants).

La plus ancienne et robuste est d’utiliser un logiciel FTP (File Transfer Protocol) pour copier les fichiers de votre ordinateur vers votre espace sur un serveur web.

Pré-requis

Un hébergeur

Il est nécessaire de disposer d’un espace chez un hébergeur. Le coût annuel d’un hébergement est de quelques dizaines d’euros. En France, les hébergeurs les plus courants sonts ovh, gandi ou online. LWS est un hébergeur français dont les offres de prix sont très intéressantes. Les offres d’Alwaysdata sont plus onéreuses, mais un espace disque de 200 Mo est offert aux étudiants de l’ÉSAD.

Un nom de domaine ?

Bien que n’étant pas indispensable à la suite du processus décrit ci-dessous, un nom de domaine vous permet de personnaliser l’adresse à laquelle votre site sera accessible sur le web.

Pour rappel, un domaine a trois parties qui se lisent de droite à gauche:

On n’achète pas de domaine, mais on le loue à celui qui gère le TLD qu’on a choisi. Les entreprises qui gèrent des domaines Internet sont appelées registrars de domaines. En France, gandi ou ovh sont parmi les registrars les plus connus, mais la plupart des hébergeurs vous proposent d’associer (parfois gratuitement, ou à prix réduit la 1re année) un domaine à votre hébergement.

Sur l’offre gratuite d’Alwaysdata, le domaine est alwaysdata.net et le sous-domaine correspond au nom de votre compte ; par exemple : esad-pyrenees.alwaysdata.net. Le processus ci-dessous utilise un compte gratuit sur Alwaysdata.

Un client (logiciel) FTP

Il existe de nombreux logiciels capables de se connecter à un serveur en FTP, tel que Cyberduck, FileZilla ou Transmit (MacOS). Le processus ci-dessous utilise Cyberduck.

Démarrer

Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. organisés en dossiers et sous-dossiers. Relire HTML/Bien démarrer

Accents, espaces, capitales doivent être proscrits dans les noms des fichiers et dossiers !

 mon_site
     css
         style.css
     images
         image.jpg
     index.html
     page2.html

Récupérer les identifiants et mot de passe de connexion

Pour déposer des fichiers sur votre espace dans le serveur d’Alwaysdata, il vous faut conaitre les identifiants permettant de vous y connecter. Ces informations sont accessibles depuis le menu “Accès distant / FTP” de l’interface d’administration de votre compte sur alwaysdata.

admin FTP alwaysdata

  1. L’hôte FTP : ftp-[votrecompte].alwaysdata.net
  2. Le nom d’utilisateur : [votrecompte]
  3. Le mot de passe : [votr3m0tdep4sse!]

Clients FTP

Cyberduck

Cyberduck est un client FTP libre et gratuit qui vous permet de vous connecter à votre serveur pour y déposer et manipuler des fichiers. Il est téléchargeable ici : https://cyberduck.io

Si l’interface est en anglais, vous pouvez modifier l’option dans les préférences de langue du logiciel.

L’écran d’accueil de l’interface s’ouvre sur les “signets” (les connexions déjà enregistrées). Notre objectif est de créer un nouveau signet, pour pouvoir nous re-connecter au serveur sans avoir à saisir les infos de connexion à chaque fois.

Cyberduck

Une fois les informations de connexion saisie dans les champs de la fenêtre dédiée, on peut fermer la fenêtre. Le signet se retrouve alors enregistré dans la liste.

Cyberduck

Vous pouvez alors double-cliquer sur le signet pour démarrer la connexion. Si un alerte de sécurité s’affiche, n’hésitez pas à cocher la case “ne plus afficher” et à continuer.

Cyberduck

Si vous avez saisi les bonnes informations de connexion, la fenêtre de Cyberduck affiche alors le contenu de votre espace sur le serveur.

Cyberduck

Filezilla

Filezilla est un logiciel open source plus ancien que Cyberduck et doté d’une interface un peu plus complexe.

Il permet notamment d’afficher à la fois le contenu local (à gauche – les fichiers de notre propre ordinateur) et le contenu distant (à droite – le contenu du serveur).

Cyberduck

Cliquer sur l’icône en haut à gauche (Gestionnaire de sites), créez un nouveau site (équivalent à un “favori” sur Cyberduck), puis saisissez les informations d’authentification dans la partie droite.

Le “Chiffrement” devrait être établi sur “Connexion FTP explicite sur TLS si disponible” et le “type d’authentification" sur “Normale”.

Une boîte de dialogue vous proposera d’enregistrer votre mot de passe. Et une alerte de sécurité s’affichera peut-être.

Cyberduck

Contrairement à Cyberduck qui nécessite l’utilisation du Finder ou de l’explorateur de fichiers Windows pour pouvoir glisser les fichiers vers l’espace en ligne, Filezilla offre un navigateur de fichiers locaux. Son seul “défaut” est d’afficher les dossiers et les fichiers dans deux zones séparées.

Mise en ligne

Par défaut, l’utilisateur FTP d’Alwaysdata a accès à la “racine” de l’espace disque (qui contient les dossiers admin et www).

Par défaut également, le serveur affiche au visiteur le contenu du dossier www. Cette option est configurable dans l’interface d’administration de votre compte, via le menu “Web / Sites” → “Default site / Modifier”.

admin alwaysdata

Si vous disposez d’un nom de domaine, Alwaysdata permet de créer plusieurs sites, accessibles via différentes adresses. Dans le cas présent, nous allons héberger plusieurs projets sur le même site, grâce à une page d’index personnalisée. Nous ne modifions donc pas la configuration du site par défaut d’Alwaysdata.

Dans Cyberduck ou Filezilla, en double-cliquant sur www, on peut accéder au contenu du dossier que verront les visiteurs du site.

Cyberduck

Un fichier index.html y est placé par défaut et correspond à la page d’accueil temporaire de votre site (dans le cas présent, http://esad-pyrenees.alwaysdata.net ; ou pour vous http://[votrecompte].alwaysdata.net). Vous allez pouvoir le supprimer pour le remplacer par votre propre page d’accueil.

On crée alors un fichier html très simple (la CSS peut même y être intégrée), contentant quelques liens vers les dossiers des projets, voire même les fichiers de présentation (notes d’intention, maquettes, storyboard ou wireframes).

Dans cet exemple, on postule deux projets, webdesign et cultures_num qui contiennent chacun quelques fichiers :

 index.html ← page d’accueil personnalisée
 webdesign
     index.html
     note.pdf
     storyboard.pdf
     maquettes.pdf
 cultures_num
     index.html
     note.pdf
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ESAD Pyrénées</title>
        <style>
            body { margin: 2em; font-size: max(2em, 4vw); font-family: sans-serif;}
            a { color: black; text-decoration: none;}
            a:hover { color: tomato}
        </style>
    </head>
    <body>
        <p>
            ÉSAD Pyrénées 
        </p>
        <p>
            <a href="webdesign/index.html">→ webdesign</a><br>
            <a href="webdesign/note.pdf">↪ note d’intention</a><br>
            <a href="webdesign/storyboard.pdf">↪ storyboard</a><br>
            <a href="webdesign/maquettes.pdf">↪ maquettes</a>
        </p>
        <p>
            <a href="cultures_num/index.html">→ cultures numériques</a><br>
            <a href="cultures_num/note.pdf">↪ note d’intention</a>
        </p>        
    </body>
</html>

Vous pouvez alors téléverser (uploader) ce fichier index.html ainsi que les dossiers contenant le code de vos projets à l’intérieur du dossier www, par un simple glisser/déposer.

La structure de votre FTP deviendra donc :

 / (racine)
     admin
     www
         index.html
         webdesign
             css
             img
             index.html
             cultures_num
             css
             img
             index.html
            

Cyberduck

Une fois que les fichiers ont été transférés via le protocole FTP, on peut y accéder dans un navigateur web en HTTP en saisissant l’URL :
http://votre-compte.alwaysdata.net.

Erreurs fréquentes

Ouverture de session échouée. 530 Login or password incorrect.

Vous vous êtes trompé·e dans une des informations de connexion (nom de serveur hôte FTP, nom d’utilisateur ou mot de passe). Vous pouvez les vérifier dans l’interface d’administration de votre compte sur Alwaysdata, et éventuellement réinitialiser le mot de passe.

Forbidden! You don't have permission to access … on this server.

Si l’ouverture de votre site (http://[votrecompte].alwaysdata.net) dans un navigateur produit une erreur de ce type, c’est vraisemblablement que vous avez oublié de nommer index.html la page d’accueil de votre projet.

Not Found! The requested URL / was not found on this server

Si l’ouverture de votre site (http://[votrecompte].alwaysdata.net) dans un navigateur produit une erreur de ce type, c’est vraisemblablement que vous avez oublié de téléverser votre contenu à l’intérieur du dossier www (ou du dossier alternatif spécifié dans l’interface d’administration](https://admin.alwaysdata.com/site/) de votre site sur Alwaysdata).

Les images / styles ne s’affichent pas

Vérifiez que vous avez bien utilisé des URLs relatives dans les chemins vers vos images, médias et fichiers css (et pas des URLs “absolues”, qui commencent par file:///…). Rappelez-vous également que les accents, espaces, capitales doivent être proscrits dans les noms des fichiers et dossiers !