161 lines
15 KiB
HTML
161 lines
15 KiB
HTML
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
.page { padding: 1rem 0; font-family: var(--font-sans); }
|
||
.header { display: flex; align-items: center; gap: 12px; padding-bottom: 1rem; border-bottom: 2px solid var(--color-border-primary); margin-bottom: 1.5rem; }
|
||
.header-icon { width: 42px; height: 42px; background: #E6F1FB; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.header-icon i { font-size: 22px; color: #185FA5; }
|
||
.header h1 { font-size: 20px; font-weight: 500; color: var(--color-text-primary); }
|
||
.header p { font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; }
|
||
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 500; margin-left: 8px; background: #E6F1FB; color: #185FA5; vertical-align: middle; }
|
||
|
||
.card { background: var(--color-background-primary); border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); padding: 1rem 1.25rem; margin-bottom: 12px; }
|
||
.card-title { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }
|
||
.card-title i { font-size: 16px; }
|
||
|
||
.analogy { background: #EAF3DE; border-radius: var(--border-radius-lg); padding: 1rem 1.25rem; margin-bottom: 12px; display: flex; gap: 12px; align-items: flex-start; }
|
||
.analogy i { font-size: 26px; color: #639922; flex-shrink: 0; margin-top: 2px; }
|
||
.analogy-text { font-size: 14px; color: #3B6D11; line-height: 1.6; }
|
||
.analogy-text strong { color: #27500A; }
|
||
|
||
.step-list { list-style: none; }
|
||
.step-item { display: flex; gap: 12px; padding: 9px 0; border-bottom: 0.5px solid var(--color-border-tertiary); align-items: flex-start; }
|
||
.step-item:last-child { border-bottom: none; }
|
||
.step-num { width: 26px; height: 26px; border-radius: 50%; background: #185FA5; color: #fff; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
|
||
.step-text { font-size: 14px; color: var(--color-text-primary); line-height: 1.6; }
|
||
.step-text code { font-family: var(--font-mono); font-size: 12px; background: var(--color-background-secondary); padding: 1px 6px; border-radius: 4px; }
|
||
.step-sub { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; }
|
||
|
||
.tip { background: #EAF3DE; border-left: 3px solid #639922; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 13px; color: #3B6D11; margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; }
|
||
.tip i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
|
||
.warn { background: #FAEEDA; border-left: 3px solid #BA7517; border-radius: 0 6px 6px 0; padding: 8px 12px; font-size: 13px; color: #854F0B; margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; }
|
||
.warn i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
|
||
|
||
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
|
||
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 0.5px solid var(--color-border-tertiary); font-size: 14px; }
|
||
.info-row:last-child { border-bottom: none; }
|
||
.info-label { color: var(--color-text-secondary); }
|
||
.info-val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; background: var(--color-background-secondary); padding: 2px 8px; border-radius: 4px; color: var(--color-text-primary); }
|
||
.info-val.blue { background: #E6F1FB; color: #185FA5; }
|
||
.info-val.green { background: #EAF3DE; color: #3B6D11; }
|
||
|
||
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin-top: 6px; }
|
||
.vocab-item { border: 0.5px solid var(--color-border-tertiary); border-radius: 8px; padding: 10px 12px; }
|
||
.vocab-term { font-size: 13px; font-weight: 500; color: var(--color-text-primary); font-family: var(--font-mono); }
|
||
.vocab-def { font-size: 12px; color: var(--color-text-secondary); margin-top: 3px; line-height: 1.5; }
|
||
|
||
.schema { background: var(--color-background-secondary); border-radius: 10px; padding: 1rem; margin: 8px 0; display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }
|
||
.schema-box { background: var(--color-background-primary); border: 0.5px solid var(--color-border-secondary); border-radius: 8px; padding: 8px 14px; text-align: center; font-size: 13px; }
|
||
.schema-box .label { font-weight: 500; color: var(--color-text-primary); }
|
||
.schema-box .sub { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
|
||
.arrow { font-size: 20px; color: var(--color-text-secondary); padding: 0 8px; display: flex; align-items: center; }
|
||
.schema-box.blue { background: #E6F1FB; border-color: #B5D4F4; }
|
||
.schema-box.blue .label { color: #185FA5; }
|
||
.schema-box.green { background: #EAF3DE; border-color: #C0DD97; }
|
||
.schema-box.green .label { color: #3B6D11; }
|
||
</style>
|
||
<div class="page">
|
||
|
||
<div class="header">
|
||
<div class="header-icon"><i class="ti ti-server-2" aria-hidden="true"></i></div>
|
||
<div>
|
||
<h1>Le FTP, c'est quoi ? <span class="badge">o2switch</span></h1>
|
||
<p>Fiche débutants — Envoyer ses fichiers sur le serveur</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="analogy">
|
||
<i class="ti ti-bulb" aria-hidden="true"></i>
|
||
<div class="analogy-text">
|
||
<strong>L'analogie simple :</strong> imaginez votre serveur comme une <strong>armoire à dossiers dans un bureau distant</strong>. Le FTP, c'est le <strong>chariot</strong> qui vous permet d'apporter ou de récupérer des dossiers depuis chez vous, sans vous déplacer. Votre logiciel FTP (FileZilla) est la personne qui pousse ce chariot.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-question-mark" aria-hidden="true"></i> À quoi ça sert concrètement ?</div>
|
||
<ul class="step-list">
|
||
<li class="step-item"><div class="step-num" style="background:#639922;">✓</div><div class="step-text">Envoyer les fichiers de votre site sur le serveur o2switch<div class="step-sub">Votre site ne devient visible en ligne qu'une fois les fichiers déposés sur le serveur</div></div></li>
|
||
<li class="step-item"><div class="step-num" style="background:#639922;">✓</div><div class="step-text">Modifier ou remplacer un fichier existant<div class="step-sub">Par exemple, corriger une image ou mettre à jour une page HTML</div></div></li>
|
||
<li class="step-item"><div class="step-num" style="background:#639922;">✓</div><div class="step-text">Récupérer une sauvegarde de vos fichiers<div class="step-sub">Télécharger vos fichiers depuis le serveur vers votre ordinateur</div></div></li>
|
||
<li class="step-item"><div class="step-num" style="background:#639922;">✓</div><div class="step-text">Installer ou réparer une extension WordPress<div class="step-sub">Accès direct aux fichiers même si l'admin WordPress ne répond plus</div></div></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-route" aria-hidden="true"></i> Comment ça fonctionne ?</div>
|
||
<div class="schema">
|
||
<div class="schema-box blue"><div class="label"><i class="ti ti-device-laptop" aria-hidden="true"></i> Votre ordi</div><div class="sub">vos fichiers locaux</div></div>
|
||
<div class="arrow">→</div>
|
||
<div class="schema-box"><div class="label"><i class="ti ti-app-window" aria-hidden="true"></i> FileZilla</div><div class="sub">le logiciel FTP</div></div>
|
||
<div class="arrow">→</div>
|
||
<div class="schema-box"><div class="label"><i class="ti ti-lock" aria-hidden="true"></i> Internet<br>(SFTP chiffré)</div><div class="sub">connexion sécurisée</div></div>
|
||
<div class="arrow">→</div>
|
||
<div class="schema-box green"><div class="label"><i class="ti ti-server-2" aria-hidden="true"></i> Serveur o2switch</div><div class="sub">public_html/</div></div>
|
||
</div>
|
||
<div class="tip"><i class="ti ti-info-circle" aria-hidden="true"></i><span>On utilise toujours <strong>SFTP</strong> (et non FTP simple) car la connexion est chiffrée — vos mots de passe ne transitent pas en clair sur internet.</span></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-settings" aria-hidden="true"></i> Vos paramètres de connexion o2switch</div>
|
||
<div class="grid2" style="margin-top:8px; margin-bottom:0;">
|
||
<div>
|
||
<div class="info-row"><span class="info-label">Adresse du serveur</span><span class="info-val blue">ftp.votredomaine.fr</span></div>
|
||
<div class="info-row"><span class="info-label">Port</span><span class="info-val blue">22</span></div>
|
||
<div class="info-row"><span class="info-label">Protocole</span><span class="info-val green">SFTP</span></div>
|
||
</div>
|
||
<div>
|
||
<div class="info-row"><span class="info-label">Identifiant</span><span class="info-val">votre login cPanel</span></div>
|
||
<div class="info-row"><span class="info-label">Mot de passe</span><span class="info-val">votre mdp cPanel</span></div>
|
||
<div class="info-row"><span class="info-label">Dossier du site</span><span class="info-val blue">public_html/</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="warn" style="margin-top:10px;"><i class="ti ti-alert-triangle" aria-hidden="true"></i><span>Ces identifiants sont les mêmes que ceux de votre espace client o2switch (cPanel). Vous les trouvez dans l'e-mail de bienvenue o2switch.</span></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-list-check" aria-hidden="true"></i> Se connecter avec FileZilla — pas à pas</div>
|
||
<ul class="step-list">
|
||
<li class="step-item"><div class="step-num">1</div><div class="step-text">Télécharger et installer FileZilla (gratuit) sur <code>filezilla-project.org</code><div class="step-sub">Choisir "FileZilla Client", pas le Server</div></div></li>
|
||
<li class="step-item"><div class="step-num">2</div><div class="step-text">Ouvrir FileZilla → menu <code>Fichier</code> → <code>Gestionnaire de sites</code> → bouton <code>Nouveau site</code></div></li>
|
||
<li class="step-item"><div class="step-num">3</div><div class="step-text">Choisir le protocole <code>SFTP – SSH File Transfer Protocol</code> dans le menu déroulant</div></li>
|
||
<li class="step-item"><div class="step-num">4</div><div class="step-text">Remplir les champs : hôte, port <code>22</code>, identifiant et mot de passe<div class="step-sub">Laisser "Type d'authentification" sur <strong>Normale</strong></div></div></li>
|
||
<li class="step-item"><div class="step-num">5</div><div class="step-text">Cliquer <code>Connexion</code> — si une fenêtre s'ouvre avec une "clé d'hôte", cliquer <code>OK / Faire confiance</code><div class="step-sub">C'est normal lors de la première connexion, c'est le serveur qui se présente</div></div></li>
|
||
<li class="step-item"><div class="step-num">6</div><div class="step-text">Le panneau de droite affiche les fichiers du serveur — naviguer jusqu'à <code>public_html/</code><div class="step-sub">Le panneau de gauche = votre ordinateur. Le panneau de droite = le serveur.</div></div></li>
|
||
<li class="step-item"><div class="step-num">7</div><div class="step-text">Glisser-déposer vos fichiers du panneau gauche (votre ordi) vers le panneau droit (serveur)<div class="step-sub">Le transfert démarre automatiquement — la barre en bas indique la progression</div></div></li>
|
||
</ul>
|
||
<div class="tip"><i class="ti ti-bulb" aria-hidden="true"></i><span>Astuce : faire un clic droit sur un fichier du serveur → <strong>Afficher / Modifier</strong> pour l'ouvrir directement dans votre éditeur de texte et le sauvegarder automatiquement.</span></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-folder-open" aria-hidden="true"></i> Où mettre ses fichiers ?</div>
|
||
<ul class="step-list">
|
||
<li class="step-item"><div class="step-num" style="background:#185FA5;">📁</div><div class="step-text"><code>public_html/</code> — votre site principal<div class="step-sub">Tout ce qui est ici est accessible via votre nom de domaine (ex : monsite.fr)</div></div></li>
|
||
<li class="step-item"><div class="step-num" style="background:#185FA5;">📁</div><div class="step-text"><code>public_html/wp-content/themes/</code> — thèmes WordPress<div class="step-sub">Pour installer ou réparer un thème manuellement</div></div></li>
|
||
<li class="step-item"><div class="step-num" style="background:#185FA5;">📁</div><div class="step-text"><code>public_html/wp-content/plugins/</code> — extensions WordPress<div class="step-sub">Pour installer ou désactiver une extension (renommer son dossier suffit à la désactiver)</div></div></li>
|
||
</ul>
|
||
<div class="warn"><i class="ti ti-alert-triangle" aria-hidden="true"></i><span>Ne modifiez jamais de fichiers en dehors de <code>public_html/</code> si vous ne savez pas à quoi ils servent — les autres dossiers sont liés au système du serveur.</span></div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-mood-confuzed" aria-hidden="true"></i> Problèmes fréquents chez les débutants</div>
|
||
<ul class="step-list">
|
||
<li class="step-item"><div class="step-num" style="background:#BA7517;">?</div><div class="step-text">La connexion ne s'établit pas<div class="step-sub">→ Vérifier que le protocole est bien SFTP (et non FTP) et que le port est 22</div></div></li>
|
||
<li class="step-item"><div class="step-num" style="background:#BA7517;">?</div><div class="step-text">Les fichiers sont envoyés mais le site ne change pas<div class="step-sub">→ Vider le cache du navigateur (Ctrl+Maj+R) ou attendre quelques secondes</div></div></li>
|
||
<li class="step-item"><div class="step-num" style="background:#BA7517;">?</div><div class="step-text">Je ne trouve pas <code>public_html/</code><div class="step-sub">→ Après connexion, naviguer vers le dossier racine : clic droit → "Aller au répertoire personnel"</div></div></li>
|
||
<li class="step-item"><div class="step-num" style="background:#BA7517;">?</div><div class="step-text">Le transfert s'interrompt ou est lent<div class="step-sub">→ Réduire le nombre de transferts simultanés dans Édition → Paramètres → Transferts</div></div></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-title"><i class="ti ti-vocabulary" aria-hidden="true"></i> Vocabulaire essentiel</div>
|
||
<div class="vocab-grid">
|
||
<div class="vocab-item"><div class="vocab-term">FTP / SFTP</div><div class="vocab-def">Protocole de transfert de fichiers. SFTP = version sécurisée, toujours à préférer</div></div>
|
||
<div class="vocab-item"><div class="vocab-term">Serveur / Hôte</div><div class="vocab-def">L'ordinateur distant chez o2switch qui héberge votre site</div></div>
|
||
<div class="vocab-item"><div class="vocab-term">public_html</div><div class="vocab-def">Le dossier de votre site web, accessible depuis internet</div></div>
|
||
<div class="vocab-item"><div class="vocab-term">Port</div><div class="vocab-def">La "porte" de communication utilisée. SFTP = port 22</div></div>
|
||
<div class="vocab-item"><div class="vocab-term">Upload</div><div class="vocab-def">Envoyer un fichier de votre ordi vers le serveur</div></div>
|
||
<div class="vocab-item"><div class="vocab-term">Download</div><div class="vocab-def">Récupérer un fichier du serveur vers votre ordi</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|