Catégories
FCS FCS1-cours

Les modes de publication en ligne

Dans ce cours vous allez inventorier et tester plusieurs modes de publication de contenus sur le Web. Il sera question de plateformes d’édition et de publication auto-hébergée, d’éditeurs WYSIWYG, de langage et d’éditeurs Markdown. Ce cours vous permettra d’avoir un premier aperçu des formes de publication en ligne les plus simples.

Pour tirer profit de ce cours, vous devez avoir suivi les cours intitulés Le fonctionnement du Web et Contenu d’un dossier de page Web.

Utiliser une plateforme d’édition en ligne

Le moyen le plus simple de publier des contenus sur le Web est d’utiliser les services clés en main de plateformes proposant à la fois des outils d’édition intuitifs et un hébergement automatique des contenus édités. Je vous propose d’en examiner deux plus attentivement : Netboard et Google Sites.

Ne vous illusionnez pas, il faut consacrer un peu de temps à la prise en main de ces plateformes. Pour réaliser des sites satisfaisants, il va vous falloir faire des essais, produire des contenus adaptés, choisir des images, etc. Vous gagnerez un peu de temps en utilisant les modèles proposés sans chercher, dans un premier temps, à les modifier.

Utiliser la plateforme Netboard

Netboard se présente comme un outil en ligne gratuit et facile à prendre en main pour collecter, organiser et partager tout contenu Web. Il s’agit de publier ses textes, images, liens, vidéos, documents annexes, etc. sous forme de blocs d’infos (fiches ou cartes) rangés dans des onglets.

Un site Netboard complet détaille le mode d’emploi de la plateforme : https://jmd85.netboard.me/presentation/?tab=132247

➜ Si vous souhaitez avoir un bon aperçu sur Netboard, je vous propose de visionner la vidéo ci-dessousun prof d’anglais explique à d’autres profs comment utiliser Netboard.

Netboard peut donc servir à :

  • regrouper et partager des collections de liens (veille informationelle)
  • organiser et structurer la présentation de contenus pédagogiques (en tant qu’apprenant ou en tant qu’enseignant)
  • regrouper en mode collaboratif des documents sur une thématique
  • rassembler et partager une documentation sur un sujet précis
  • maquetter un site Web en testant la répartition des contenus sous différents onglets
  • etc.

En utilisant des dispositions de contenus simplifiées et des « skins » sobres, vous pouvez donner à vos sites Netboard une apparence simple et fonctionnelle.

Utiliser Google Sites

Google Sites permet de publier des contenus sous une forme visuelle très différente des sites Netboard. Le résultat s’apparente davantage à un site « professionnel ». Le revers de la médaille est une multiplicité d’options de personnalisation pouvant paraître complexes de prime abord.

Il est nécessaire d’avoir bien préparé son projet de publication en amont pour tirer parti de toutes les fonctionnalités proposées. Google propose quelques modèles à personnaliser. N’hésitez pas à utiliser ces modèles pour mettre au point votre premier site.

Vous trouverez une documentation détaillée sur le centre d’aide de Google. La vidéo ci-dessous montre la réalisation d’un site de quelques pages en une vingtaine de minutes, résumées par l’auteure (Lou) en 6 minutes 30. Lou est habituée à la publication en ligne, l’interface de Google Sites lui est familier. De plus, elle a pris le temps de produire plusieurs autres sites avec Google Sites avant d’en faire la présentation sur YouTube.

➜ Google site mériterait qu’on lui consacre un cours entier. L’essentiel à retenir est qu’il existe des moyens de publier des contenus en ligne sans avoir à saisir une seule ligne de code ni à transférer manuellement des fichiers sur un serveur distant.

Vous trouverez en ligne des tutoriels plus détaillés (attention de bien sélectionner les articles les plus récents car l’éditeur classique n’est plus disponible depuis novembre 2020). Voici un exemple de tuto assez complet : https://fr.techtribune.net/google/google-sites-comment-utiliser-le-createur-de-site-web-de-google/102077/

Utiliser un éditeur WYSIWYG

À partir du moment où vous envisagez de mettre en ligne vos contenus en utilisant les services d’un hébergeur, vous aurez à produire des pages HTML. Il vous faudra ensuite transférer ces pages chez votre hébergeur. Vous utiliserez pour cela un outil (nommé client FTP) tel que Filezilla. Voyez le cours consacré à l’utilisation de Filezilla.

Nous reviendrons plus tard à cette étape incontournable et aux solutions alternatives qui permettent aux internautes de lire vos pages HTML via une adresse Web valide.
➜ En attendant vous vous contenterez de lire vos pages HTML directement sur vos postes de travail, avec votre navigateur préféré.

Pour produire une page HTML doté d’un code source propre, il existe depuis de nombreuses années des éditeurs dit WYSIWYG (What You See Is What You Get = Ce que vous voyez est ce que vous obtenez). Ces outils permettent de générer une page HTML en structurant et stylisant du texte par le biais de sélections et de clics sur des boutons (à la manière d’un traitement de texte).

Utiliser rakko.tools

Parmi les outils disponibles en ligne je vous propose d’utiliser rakko.tools, basé sur l’éditeur TinyMCE

Je vous invite à consulter cette page Web, réalisée avec rakko.tools : https://graphizm.fr/fcs/rakko-tools. Il a fallu en compléter le code source pour rendre le fichier conforme aux normes du Web. Le plus gros du travail avait toutefois été fait automatiquement au moment de l’export HTML.

Utiliser d’autres éditeurs WYSIWYG

Les éditeurs WYSIWYG grand public ne permettent pas de manipuler confortablement le code source et d’enrichir ainsi une page Web. Pour effectuer cela convenablement, il est nécessaire d’utiliser des éditeurs WYSIWYG plus élaborés comme BlueGriffon ou Dreamweaver. Leur prise en main est plus laborieuse et leur prix beaucoup plus élevé !

Utiliser un éditeur Markdown

Le langage Markdown est un langage de balisage léger permettant de structurer un texte avant de l’exporter sous forme de page HTML, de fichier PDF, DOC, TXT, etc.

Des éditeurs Mardown en ligne permettent de travailler rapidement à l’élaboration de pages Web simples et présentées sobrement. Voici à quoi ressemble une mise en page effectuée avec stackedit.io :

La page ci-dessus, exportée au format HTML (option page stylisée avec sommaire — HTML styled with TOC ), s’affiche dans une fenêtre de navigation de la manière suivante :

Vous pouvez visualiser cette page en ligne en cliquant sur ce lien : https://graphizm.fr/fcs/stackedit/langage-markdown-toc.html

Utiliser d’autres modes de publication en ligne

Je me contenterai de les mentionner, sans entrer dans les détails car ils requièrent des compétences plus avancées pour pouvoir être utilisées facilement. Ces compétences seront pour la plupart acquises au fil de la formation FCS (niveaux 2 et 3). La préparation au titre pro Designer Web permet de compléter utilement ces compétences.

Utiliser des frameworks CSS

Un framework CSS est une boîte à outils dans laquelle se trouvent des instructions de stylisation prêtes à l’emploi. Les frameworks CSS (nommés aussi kits CSS) font gagner beaucoup de temps lors de la conception de pages Web élégantes.

Le framework CSS le plus souvent cité est Bootstraap. Le framework w3.css, étudié pendant la formation, est un framework CSS utilisé pour s’initier au maniement de ce type de boîte à outils.

Utiliser des CMS sans base de données

Un CMS sans base de données (nommé aussi CMS flat-file) est un système de gestion de contenus en ligne enregistrant les contenus du site dans des fichiers indépendants. Ils sont plus simples à mettre en œuvre, plus sûrs et plus faciles à maintenir que les CMS avec base de données.

Pour en apprendre davantage sur le sujet, je vous invite à consulter mes ressources mises en ligne sur Netboard.

Utiliser des CMS classiques et des plateformes de création de sites

Le CMS le plus populaire est de loin WordPress. Viennent ensuite Shopify, Joomla, Squarespace, Drupal et Wix. Parmi ceux-ci, Squarespace et Wix sont des plateformes de création de sites offrant un service complet alliant l’usage du CMS à l’hébergement du site en passant par la réservation du nom de domaine.

Catégories
FCS FCS1-exos

Coder sans coder

Dans les exercices qui suivent, vous allez manipuler des balises HTML virtuelles et reconstituer des structures simples par glisser-déposer (drag and drop).

Reconstituer une structure HTML simple

Le premier exercice est accessible à cette adresse : https://graphizm.fr/fcs/drag-and-drop-html/

➜ Il s’agit, en faisant glisser les balises de droite à gauche, de reconstituer schématiquement une structure HTML du type h1-intro-h2-p-p

Cliquez sur l’image pour faire l’exercice

L’introduction dont il est question est un simple paragraphe dont le contenu est affiché en gras.

Reconstituer une structure HTML plus complexe

Le second exercice développe la structure du premier exemple en ajoutant une feuille de style interne, un second titre h2 avec ses paragraphes puis un script d’animation.

Le premier exercice est accessible à cette adresse : https://graphizm.fr/fcs/drag-and-drop-html-css-js/

➜ Il s’agit cette fois, toujours en faisant glisser les balises de droite à gauche, de reconstituer schématiquement une structure HTML du type h1-intro-h2-p-p-h2-p-p intégrant les éléments ajoutés.

Cliquez sur l’image pour faire le second exercice
Catégories
FCS FCS1-cours

Le fonctionnement du Web

Dans ce cours vous allez découvrir comment fonctionne le Web et réaliser plusieurs activités en lien avec ce sujet. De nombreux liens vers des ressources externes vous seront proposés, vous pourrez les explorer tranquillement, le moment venu.

Utiliser une analogie pour comprendre le Web

Pour commencer, je vous invite à lire les trois premières partie de l’article intitulé “Le fonctionnement du Web”, sur le site developer.mozilla.org :

L’idée à laquelle je vous invite à être attentif est celle ci :

“Faisons un parallèle entre le Web et une rue. D’un côté de la rue, il y a une maison qui correspond au client. De l’autre côté,  un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.”

Faites un dessin commenté (façon sketchnoting) en vous inspirant de l’analogie développée dans la deuxième partie de l’article mentionné ci-dessus.

Votre dessin commenté sera partagé pour en contrôler l’exactitude (mais non la qualité graphique) 😉

Créer une infographie

Pour fixer davantage dans la réalité les concepts abordés à l’étape précédente, je vous propose de réaliser vous même une infographie en utilisant des éléments graphiques mis à votre disposition (cliquez sur l’image ci-dessous).

Si vous ne parvenez pas à faire glisser les éléments de la zone de droite vers la zone de gauche, rafraîchissez la page (ctrl/cmd-R).

➜ Voici les consignes à respecter pour positionner les différents éléments constitutifs d’un large réseau informatique.

Pour connecter les éléments du réseau entre eux, je vous invite à utiliser (en présentiel, sur Mac) l’application Aperçu. En effet, cette application dispose d’une fonctionnalité permettant de simuler un cable de liaison entre 2 box. Il vous faudra pour cela effectuer une capture d’écran de votre “réseau”.

Vous pourrez légender votre infographie en utilisant Aperçu ou l’application Skitch, disponible sur votre poste de travail en présentiel.

Avant de passer au chapitre suivant, je vous invite à terminer la lecture de l’article publié sur developer.mozilla.org. Vous allez en effet avoir besoin de quelques informations supplémentaires pour bien comprendre les vidéos proposées plus bas.

Visionner quelques vidéos

La première vidéo que je vous propose de visionner survole le sujet mais sans oublier aucun point essentiel.

Vidéo de 3 minutes et 4 secondes

La seconde vidéo offre un panorama complet de ce qui se passe lorsque vous regardez une vidéo en ligne. Pour éclairer leur propos, les auteurs abordent tous les points avec lesquels vous vous êtes déjà familiarisés (plus quelques autres dont je vous ai peut-être déjà parlé…).

Je vous invite à regarder cette vidéo chez-vous, tranquillement, pour approfondir le sujet.

Vidéo de 9 minutes et 26 secondes

Compléter une carte heuristique

Toutes les réalités dont il est question sont abondamment documentées sur le Web. Vous allez rassembler sur une carte mentale numérique toutes les références que vous pourrez trouver sur les différents points abordés jusqu’à maintenant.

Téléchargez la carte heuristique au format .xmind pour pouvoir l’éditer en utilisant l’application XMind, disponible sur votre poste de travail. Si vous êtes chez vous, téléchargez la version gratuite de XMind8 et installez-la sur votre ordinateur.

Les explications concernant la prise en main de XMind et la manière de procéder pour compléter cette carte vous sont apportées de vive voix, en présentiel ou en distanciel.

Faire un peu d’histoire

L’histoire du Web est pleines d’anecdotes amusantes ou dramatiques. Elle commence beaucoup plus tôt qu’on se l’imagine et connait des rebondissements inattendus. Voici quelques ressources disponibles pour parfaire votre culture Web.

Liens sur l’histoire d’Internet

Liens vers Wikipedia

Catégories
FCS FCS3-exos

Personnaliser le thème Massively

L’un des thèmes de Bludit les plus impactants visuellement, se nomme “Massively”. Il s’agit d’un thème adapté pour le CMS Bludit mais qui, initialement, a été créé pour HTML5UP.

➜ Je vous propose dans ce cours d’activer Massively puis d’apprendre à le personnaliser pour créer une maquette de site pour le client pour lequel vous avez déjà travaillé lors du TP2 de PAO et Com-Créa.

Vous pourrez mentionner ce site dans votre portfolio, preuve de votre maîtrise de la publication en ligne à l’aide d’un système de gestion de contenus (couramment nommé CMS).

Analyser le thème Massively

Identifier les qualités de Massively

L’ambiance générale de votre site reposera essentiellement sur l’image de fond et sur la qualité des images d’accroche que vous associerez à chacun de vos articles.

L’image de fond, disposée en arrière plan, permet de plonger d’emblée le lecteur dans une atmosphère prégnante. En la choisissant avec soin, il est possible de créer un site extrèmement séduisant !

Le thème massively affiche les pages dynamiques en mettant en avant l’image d’accroche de chaque article. Le dernier article publiée occupe toute la largeur de la page d’accueil, sous le menu. Les autres se répartissent sur une grille de 2 colonne, sous le dernier article publié (… ou l’article épinglé).

La couleur affichée au survol des titres (bleu #18bfef par défaut) pourra être modifiée en fonction de la charte graphique (ou planche de marque) de votre client.

Une des qualités cachées de Massively est le potentiel de sa feuille de style. Il est en effet possible d’insérer dans les pages des éléments typographiques et iconographiques stylisés nativement en plein accord avec le look du thème.

➜ Il sera nécessaire d’explorer le potentiel de cette feuille de style native pour appliquer ces styles sur les sites construits avec Bludit. Le sujet sera développé plus bas.

Identifier les défauts du thème

Massively présente toutefois des défaut, notamment concernant les réglages adaptatifs (responsives, en anglais…). En effet, ces réglages ne permettent pas, par défaut, de voir entièrement les images insérées dans les pages statiques ou dans les articles quand on navigue sur petit écran. Une solution a cependant été trouvée. Il en sera question dans le cours.

L’intitulé du premier onglet, “Page d’accueil”, ne semble pas modifiable dans les réglages du tableau de bord de Bludit. C’est en effet une caractéristique du thème qu’il faut modifier dans le fichier de traduction. Cet intitulé peut ne pas vous satisfaire pleinement. Sans doute le simple mot “Accueil” serait-il préférable.

Vous allez apprendre à corriger ces défaut et à personnaliser le thème en profondeur tout au long de ce cours.

Personnaliser l’image de fond

Comme nous venons de le voir, l’impact visuel de ce thème repose sur l’image utilisée en fond de page.

Choisir une image fonctionnelle

Elle devra être choisie avec soin et recadrée de manière à laisser voir en haut de l’image ce qui servira d’arrière-plan au titre du site.

Si vous choisissez une image très claire, il sera nécessaire de modifier la couleur d’affichage du titre (en blanc par défaut). Sur un fond photographique, seules deux couleurs sont utilisables : le blanc (sur photos claires) ou le noir (sur photos sombre).

L’image d’arrière plan du thème Massively se nomme “bg.jpg”. Elle fait 1680 x 2000 pixels. Pour en faciliter l’affichage, il est impératif de la compresser de manière à ce qu’elle soit la plus légère possible. Un enregistrement pour le Web, à partir de Photoshop, avec une compression JPEG moyenne, devrait être optimale.

Comment remplacer l’image de fond

Veillez à donner à votre nouvelle image le même nom que celui de l’image d’origine. Remplacez l’image originale nommée bg.jpeg par celle que vous souhaitez utiliser.

Voici dans quel dossier il faut remplacer l’image d’origine par celle de votre choix : `dossier-du-site/bl-themes/massively/images/`

Pour visualiser le changement d’image de fond, il est souvent nécessaire d’effacer les images placées en cache (mémoire temporaire) dans votre navigateur. Avec Chrome, cochez juste “Images et fichiers en cache” dans “Effacer les données de navigation”.

➜ Notez à quel point le changement d’image de fond modifie totalement la perception de la page 😉

Positionner une image d’accroche

Pour accentuer cet effet d’immersion, je vous propose d’illustrer la page “À propos” en choisissant comme image d’accroche une partie de l’image de fond.

Source de l’image utilisée : https://littlevisuals.co/

Vous pouvez envisager de superposer le logo de votre client à cette image d’accroche pour indiquer clairement le lien entre la marque et le contexte visuel de sa présentation.

Un effet semblable est utilisable sur la page d’accueil (page de présentation des articles), en effectuant les mêmes opérations et en épinglant l’article concerné. Cet article sera alors toujours positionné en tête de tous les autres articles et l’effet de plongée dans le cœur de l’image sera toujours visible pour vos visiteurs.

Copier et coller du texte

Identifier le problème des textes collés

Quand on réalise un site à l’aide d’un CMS, il arrive qu’au lieu de saisir le texte directement dans l’éditeur de texte du CMS, on aille récupérer du texte sur un document existant. Se pose alors un problème agaçant : en collant le texte copié, on s’aperçoit que ce texte ne s’affiche pas sur le site comme les autres textes saisis directement.

Cela vient du fait qu’en copiant le texte dans le presse-papier, vous avez copié aussi les styles CSS associés au texte. Vous pouvez vous en rendre compte en activant la fenêtre d’édition HTML de l’éditeur de Bludit (cliquez sur le bouton <>, à droite de la barre d’outils). Vous verrez alors les styles CSS associés au texte collé.

Convertir le texte copié en texte brut

La solution au problème posé consiste à convertir le texte copié en texte brut en utilisant un éditeur de texte comme TextEdit (sur mac) ou Notepad (sur PC). Collez le texte dans un nouveau document et convertissez-le au format Texte (.txt).

Conversion d’un texte avec TextEdit, sur macOs (le texte surligné n’est pas converti)

Utiliser du texte brut

Pour rectifier les problèmes rencontrés dans Bludit, il faut effacer le code comprenant les styles, revenir en mode d’édition visuelle et coller dans le champ de saisie le texte converti préalablement au format Texte.

➜ Pour éviter ces manipulations, les développeurs saississent directement leurs articles en texte brut, directement dans leur éditeur de code favori.

Modifier la couleur de survol des titres

Si la couleur de survol à utiliser n’est pas déjà identifiée dans une charte graphique, vous devez la déterminer en fonction des couleurs des images principales du site.

Choisir la couleur la plus appropriée

Pour trouver la couleur la plus adaptée à votre site, le plus simple est de faire une capture d’écran du site lorsque vous survolez le titre du dernier article. Ensuite, en utilisant Photoshop (Images > Réglages > Teinte/Saturation), modifier les paramètres de la couleur bleue jusqu’à l’obtention de la couleur voulue. Notez alors sa valeur hexadécimale.

Modifier le fichier CSS du thème

➜ Pour appliquer cette couleur aux liens du site il est nécessaire de modifier le fichier main.css (la principale feuille de style du thème) qui se trouve dans dossier-du-site/bl-themes/massively/assets/css.

Modifiez le fichier “main.css” avec un éditeur de code (Bracket), après l’avoir téléchargé sur votre poste de travail. Après modification il sera nécessaire de remplacer le fichier “main.css” situé sur le serveur. Vous utiliserez pour cela un client FTP (Filezilla).

Recharger les CSS de la page active

Pour que votre modification s’affiche sur la page de votre site il sera sans doute nécessaire de recharger les feuilles de style de la page active, dans votre navigateur. L’extension de Chrome “Web developer” permet cette manipulation.

Cette opération est à renouveller, dans un premier temps, chaque fois que vous allez sur une nouvelle page. Pensez-y car sinon vous douterez d’avoir effectué correctement les changements indiqués ! On peut aussi vérifier que nos modifications sont opérantes en changeant provisoirement de navigateur.

Épingler un article et modifier la description

Bludit vous offre la possibilité d’épingler un article en tête de la liste des articles publiés. Sur la page d’accueil, celui-ci est alors présenté en premier, même si d’autres articles sont publiés après. Cela vous permet de mettre en avant un contenu clé, que les lecteurs verront d’emblée en arrivant sur la page d’accueil.

➜ Profitez-en pour compléter la description de cet article. Dans Massively, celle-ci s’affiche sous le titre de l’article (en italique et en gris clair). Cette description sert d’accroche ou de châpo pour inciter le lecteur à lire l’article. Elle est utilisée comme extrait par les moteurs de recherche, il est donc recommandé de placer le mot clé de la page au début de la description.

Veiller aux intitulés de pages statiques

Utiliser des titres courts

Le paramétrage d’une page en page statique sort la page en question du flux des pages dynamiques. Cette page n’est plus considérée par le CMS comme faisant partie du blog. Bludit utilise le titre des pages statiques pour l’insérer dans le menu principal (afin que l’utilisateur accède à cette page).

Si vous utiliser un titre long, l’onglet du menu affichera le titre en entier et cela posera vite un problème d’ergonomie si vous avez plusieurs pages statiques. Bludit, et le thème massively montrent ici leurs limites. À moins de trouver une astuce pour modifier les intitulés des onglets, il vaut mieux donner à ses pages statiques des titres courts 😉

Notez qu’il est possible de réécrire les URL d’une page dans les options de la page. Cela ne modifie pas pour autant le nom des pages du menu.

Modifier l’intitulé “Page d’accueil”

Comme nous l’avons mentionné plus haut, l’impossibilité de changer l’intitulé de la page des articles en utilisant le tableau de bord de Bludit peut être perçu comme un défaut du thème… ou du CMS.

➜ Cette modification est cependant possible en modifiant le fichier de traduction du CMS. Ce fichier est nommé fr_FR.json et il est placé dans dossier-du-site/langages. Vous pouvez le modifier en utilisant Brakets.

Utiliser le potentiel des CSS de Massively

La feuille de style de Massively, non minifiée, fait 4653 lignes ! Il y a dans cette feuille de style des instructions nombreuses pour styliser toutes sortes de contenus.

Consulter les pages de démonstration

➜ La première chose à faire pour se rendre compte de ce qu’il est possible de faire est de consulter la page intitulée Elements reference sur la démo du thème Massively proposée par HTML5-up.

J’en propose une adaptation provisoire en français réalisée rapidement dans Bludit, sur mon compte de démo Alwaysdata.

Vous allez découvrir que Massively permet l’usage d’une grille adaptative, qu’il propose une classe pour améliorer le comportement des images sur petits écrans, qu’il met à notre disposition des boutons de toutes sortes, qu’il autorise l’usage des icônes de FontAwesome, … et plein d’autres choses !

Images en grille avec gouttières et habillage avec marges confortables

Examiner le code source des pages de démo

La prise en main d’un thème passe inévitablement par l’examen du code source des pages de démonstration. Il s’agit de repérer quelles sont les classes utilisées et à quelles balises elles ont été attribuées.

L’application des classes ne peut se faire, avec Bludit, qu’en modifiant le code source dans la fenêtre d’édition du code HTML.

Pour y voir plus clair et profiter de la colorisation du code dans Brakets, je vous propose de copier le code source de ma page de démonstration et de le coller dans une nouvelle page créée avec Brackets.

Code source de ma page de démonstration

Vous pouvez aussi demander à votre navigateur d’afficher le code source de la page…

Transformer des liens en boutons

Comme cela est suggéré sur la capture d’écran ci-dessus, l’attribution d’une classe « button » transforme un lien en bouton. En ajoutant d’autres classes il est possible de personnaliser l’apparence des boutons. Les classes disponibles pour cela sont :

  • « primary »
  • « fit »
  • « small »
  • « large »

En rajoutant les classes « icon » et « fa-icon-name » (remplacer « icon-name » par le nom de l’icone à afficher), il est possible d’intégrer une icône Font Awesome dans le bouton.

Résoudre le problème d’affichage “responsive” des images

Massively dispose de 2 classes qui, utilisées simultanément, permettent l’affichage correcte des images sur tous les écrans. Il s’agit des classes « image » et « fit ».

Pour qu’une image devienne “responsive”, il est donc nécessaire de lui attribuer, directement dans le code source (via l’éditeur de page de Bludit) les classes « image » et « fit ».

Le code à insérer dans chaque balise <img>, entre “img” et “src”, est le suivant : class="image fit"

Catégories
FCS FCS2-exos

La toolbox du niveau 2

Voici une sélection d’outils et de sites conçus pour faciliter l’édition pour le Web. Vous trouverez ci-dessous des ressources utiles en matière de création de site, pour le maquettage et la finalisation de vos portfolios.

Éditeurs de code en ligne

repl.it : éditeur de code à la manière de BRACKETS.

htmleditor.online : éditeur de code WYSIWYG.

Apprentissage HTML CSS et frameworks

w3schools.com : site norvégien d’apprentissage de HTML, CSS, W3.CSS, BOOTSTRAP et plusieurs autres langages.

w3docs : site de tutoriels HTML et CSS (et plusieurs autres langages)… en français.

Faux texte

loripsum.net : générateur de faux texte avec nombreux paramétrages.

quackit.com : « dummy text generator » simple et efficace.

Fausses et vraies images de maquette

placeholder.com : des images de zoning (aplat gris ou coloré), avec texte personnalisable.

picsum.photos : de vraies images intégrables à toutes les dimensions souhaitées.

Icônes Web

flaticon.com : une immense banque d’icônes téléchargeables aux formats svg, png ou jpeg.

fontawesome.com/v4.7.0 : toutes les icônes utilisées dans les gabarits w3.css.

Images libres de droits

pexels.com : une banque d’images rassemblant les images de plusieurs banques d’images gratuites.

freepik.com : une banque d’images vectorielle très riche (avec des icônes et des photos en bonus).

Pour accéder à davantage de ressources iconographiques, consultez le site https://y-goguely.netboard.me/banquesdimages/

Montage photos et illustrations

Photo Creator : outil de montage photo réaliste intuitif et très performant (contenus des montages mis à disposition).

Vector Creator : outil de montage d’illustrations dessinées très stylisées (contenus stylisés mis à disposition).

Autres ressources pour l’édition Web

Pour accéder à davantage de ressources pour l’édition en ligne, consultez le site https://y-goguely.netboard.me/publicationenligne/?tab=176628#

Catégories
FCS FCS2-cours

Oh my code !

Pour vous consolider vos acquis en matière de création de site, je vous recommande un livre de Sonia BAIBOU : Oh my code ! Je crée mon premier site Web. Certainement le meilleur ouvrage publié sur le sujet !

Je vous fais part du texte placé en 4e de couverture…


PLONGEZ DANS LE CODE MAIS SANS VOUS NOYER !

Je veux apprendre à coder, mais par où commencer ? Par ce livre qui va vous initier au développement web, au travers d’un projet de création de site Internet avec HTML, CSS et JavaScript. Textes, images, liens, design responsive, tout y est pour faire de ce projet fil rouge, éprouvé et approuvé en ateliers de coding, un véritable condensé de connaissances.

Conçu spécialement pour les débutants et les débutantes en programmation, souhaitant découvrir l’envers du décor d’une façon 100% pratique, cet ouvrage qui va droit au but vous délivrera un contenu de qualité et d’une grande pédagogie, héritée de l’expérience de formatrice de son auteur. Il s’adresse à tous les curieux du code, que ce soit pour de nouvelles perspectives professionnelles, une reconversion ou par défi personnel.


C’est clair, le ton est sympathique, l’approche est très progressive et surtout, cela rejoint parfaitement ce que nous apprenons tout au long de la formation FCS ! Les illustrations sont nombreuses et toujours pertinentes, le site proposé en fil rouge est simple et motivant.

Le livre va beaucoup plus loin que le programme de la formation FCS, mais “c’est tout l’intérêt du bazar”… Vous pourrez progresser en toute autonomie, réviser sans vous prendre la tête et retrouver toutes les manipulations essentielles permettant de publier son site chez un hébergeur.

Catégories
FCS FCS2-exos W3CSS W3CSS-exos

Tests de mise en page avec w3.css

Le site w3schools permet de sauvegarder sous forme de liens les tests et exercices réalisés dans le bac à sable Tryit. Cette page regroupe quelques exercices ou tests intéressants réalisés par les stagiaires en formation (… ou par moi-même). Ils sont classés par thèmes d’activité.

Les couleurs

Les thèmes chromatiques

Page de référence : https://www.w3schools.com/w3css/w3css_color_themes.asp

Inversion de l’ordre des nuances

https://www.w3schools.com/code/tryit.asp?filename=GKKDRRDNFIG2

Les grilles

Page de référence : https://www.w3schools.com/w3css/w3css_responsive.asp

Divisions en tiers et en moitiés

https://www.w3schools.com/code/tryit.asp?filename=GKKSWCMSCQBH

Les cellules

Page de référence : https://www.w3schools.com/w3css/w3css_layout.asp

Test de rendu des différents types de cellules

Étape 1

https://www.w3schools.com/code/tryit.asp?filename=GKKQLMEKYAQH

Étape 2

https://www.w3schools.com/code/tryit.asp?filename=GKKRGE6U9UB9

Étape 3

https://www.w3schools.com/code/tryit.asp?filename=GKKSOY1QV8P7

Catégories
FCS FCS2-exos W3CSS W3CSS-exos

Personnaliser le gabarit Starter

Après avoir pris en main les fondamentaux du framework w3.css, le moment est venu de personnaliser les gabarits mis à votre disposition.

➜ L’un d’entre eux est désigné sous le nom de Starter. Il se trouve dans le dossier intitulé “site_starter_w3css”. Nous allons utiliser ce gabarit pour prendre en main un site multipages.

Corriger un bug de navigation

➜ Un bug est présent dans le système de navigation du gabarit. Je vous invite à le repérer, puis à y remédier dans Brackets, en modifiant les liens concernés.

Ajouter une 3e page

Le gabarit Starter est fourni avec 2 pages, en plus de la page index.

Vous êtes conviés à ajouter une 3e page, à en personnaliser le thème chromatique.

➜ Pour que la navigation sur le site fonctionne parfaitement, il vous faudra modifier les menus (pour grands et petits écrans) dans toutes les pages du site.

Insérer des photos à la place des icônes

Sur la page 3 que vous venez de créez, je vous propose de remplacer les icônes intégrées initialement par des photographies collectées sur les sites pexels.com ou unsplash.com.

➜ Pour cela vous êtes invités à créer un dossier « img » et à placer dedans les images que vous avez collectées. je vous laisse déterminer la taille (et le poids) des images à intégrer à la place des icônes 😉

Choisissez des image en harmonie avec le thème chromatique que vous avez choisi !

➜ Je vous recommande de mentionner la taille des images utilisées dans le nom de celles-ci. Pensez à dupliquer les images avant d’en modifier la taille ou le cadrage.

Pensez à utiliser les classes disponibles pour écarter le texte de la photographie ou la photographie du texte. Testez les classes w3-image et w3-padding sur l’élément <img>. La première classe force l’image à rester visible en totalité, quelle que soit la largeur de l’espace disponible.

Modifier la grille

En remplaçant les images par des photos, vous avez certainement constaté qu’elles n’avaient pas beaucoup de place pour exister sur le tiers de largeur accordée.

➜ Je vous propose d’opter pour w3-half plutôt que le 2 tiers + 1 tiers proposé par w3schools. Vous savez maintenant où insérer cette classe 😉

D’autres agencements sont possibles, avec des photos de proportions différentes. Je vous laisse l’initiative des tests.

Externaliser une partie des CSS

Si vous examinez ce qui est codé à partir de la ligne 20 du code source, sur chacune des pages HTML, vous allez constater que les mêmes instructions CSS internes se répètent d’une page à l’autre. D’autres instructions, par contre, sont différentes sur chaque page.

Je vous demande de copier les instructions identiques dans un nouveau fichier. Vous le paramètrerez en CSS et/ou vous l’enregistrerez dans le dossier « css » du site, en nommant ce fichier « style.css ». Il s’agira d’instructions venant contredire (ou compléter) les instructions du framework.

Attention : ne modifiez jamais le framework w3.css !

Quand, vous aurez fait cela, il devrait rester entre les balises <style> et </style> les seules instructions nécessaires pour personnaliser la tailles des icônes utilisées.

Optimiser l’appel des polices

Vous allez simplifier l’appel des polices (Lato et Monserrat) puis optimiser l’appel de la police Lato. Pour cela, supprimez du nouveau fichier CSS ce qui concerne la stylisation en Monserrat. Supprimez également l’appel de la police Monserrat dans le head du code source.

Allez ensuite sur Google Font et sélectionnez toutes les fontes de Lato. Récupérez le <link> dans la partie droite et insérez-le à la place du précédent. Inutile de copier le premier link (c’est du pistage de Google).

Vous pouvez maintenant utiliser toutes les graisses de la police Lato. Il suffit de spécifier dans « style.css » les éléments ou les classes qui doivent utiliser telle ou telle fonte.

➜ Par exemple, si vous voulez que les citations soient affichées en très maigre et en italique vous insérez ce code dans la feuille de style personnalisée :

blockquote {
    font-weight: 100;
    font-style: italic;
}

Personnaliser les têtières

Les bandeaux de têtière qui animent le haut de chaque page peuvent sans grande difficulté accueillir des images.

➜ Vous trouverez sur les pages d’un site Starter “amélioré” des astuces pour parvenir à personnaliser ces têtières à votre idée.

Pour découvrir comment procéder, essayez de décortiquer le head du code source du site ci-dessus… et le head du site proposé par w3schools, nommé The cafe. Vous pouvez examinez aussi le head du gabarit (téléchargeable plus haut) et nommé site_simple_onepage_brasserie_w3css (ce site est une adaptation du template « The cafe »).

➜ C’est dans les styles personnalisés internes que tout se code (… pour le moment) car nous envisageons de changer de têtière sur chaque page.

Attention, regardez attentivement le code source, l’appel d’une image dans les css ne se fait pas avec src= »… » mais avec url(« … »). N’oubliez pas les guillemets dans les parenthèses !

Publier un contenu personnel ou préparer un site type

Vous disposez maintenant d’un gabarit de site Web multipages entièrement réactif. Vous maîtrisez l’usage de la grille réactive basée sur les quarts, les tiers et les moitiés, vous êtes donc capables de modifier la présentation des contenus de chaque page.

Je vous invite donc à créer, à partir de ce gabarit un site Web de 3 à 4 pages avec le contenu de votre choix.

➜ Si vous ne souhaitez pas finaliser un site particulier, faute de contenus à intégrer dans les pages, vous pouvez travailler avec du faux texte.

Je vous suggère de mettre en place un site type pour :

  • une association sportive
  • un club d’activité de loisirs
  • un groupe de musique
  • un artisan (menuisier, plombier, …)
  • un commerçant
  • etc.

Soignez le choix des photos pour donner à votre site un look soigné. Utilisez les thèmes de couleurs disponibles et/ou les bibliothèques de couleurs proposées par w3schools.com.

Il vous sera facile de remplacer plus tard le faux texte par un contenu rédactionnel adapté. Vous pourrez ainsi proposer à moindre frais à d’éventuels clients et/ou amis la réalisation de sites simples et fonctionnels répondant à leurs besoins.

Mettez vos sites en ligne et transmettez-moi les liens via Slack 😉

Exemples de sites ou gabarits de sites réalisés dans le cadre de l’exercice proposé plus haut :

Catégories
FCS FCS2-cours W3CSS W3CSS-cours

Se familiariser avec W3.CSS

Vous avez vu dans des cours précédents comment utiliser des gabarits HTML-CSS pour personnaliser une page Web. Nous allons découvrir pendant ce cours un type de gabarits particulier, basé sur une feuille de style prête à l’usage : w3.css.

On nomme ce type de feuille de style “framework CSS”, ce qui pourrait être traduit par “boîte à outils CSS”. En effet, tout repose sur un système de classes CSS pré-paramétrées que chacun utilise en fonction de ses besoins.

Il existe de nombreux frameworks CSS, le plus utilisé étant Bootstrap. Ce dernier peut d’ailleurs être pris en main en suivant les tutoriels publiés sur w3schools.com.

Le framework W3.CSS a été mis au point par les concepteurs du site w3schools.com. Ce site d’apprentissage des techniques fondamentales de la création de site utilise cette feuille de style.

Découvrez l’essentiel des possibilités offertes par W3.CSS en lisant cette présentation des fonctionnalités du framework.

Naviguer sur le site w3schools.com

➜ Pour le bon déroulé de la formation, je vous recommande de vous familiariser avec la structure du site w3schools.com.

Ce site s’affiche par défaut en anglais. Il est cependant très facile d’en obtenir la traduction en français. Cliquez sur la petite planète située à droite de la barre de navigation du site et choisissez votre langue.

➜ Ce site permet d’apprendre de manière autonome à utiliser plusieurs techniques de création de sites. Vous y trouverez notamment une rubrique intitulée HOW TO qui regroupe des tutoriels répondant à de nombreux besoins.

Le site w3schools.com publie également :

Vous trouverez sur ce site des quizz et des exercices vous permettant de tester vos connaissances en HTML et CSS. Vous y découvrirez aussi des démos et des gabarits de sites réalisés en appui sur la feuille de style w3.css.

Les templates de w3schools.com

J’ ai rassemblé dans plusieurs dossiers les gabarits proposés par w3schools. Vous disposerez ainsi de plusieurs gabarits de portfolios et de quelques gabarits de sites à personnaliser selon vos besoins.

J’ai modifié les originaux à des degrés divers. J’ai parfois commenté le code et modifié une partie des contenus. Les gabarits de porfolios révisés sont les plus aboutis.

➜ Jetez un œil sur les différents modèles proposés mais ne vous attardez pas sur le code source. Vous travaillerez à partir de ces gabarits après vous êtes familiarisés avec W3.CSS. Je vous montre pour le moment ce vers quoi nous allons tendre au fil de la formation 😉

D’autres gabarits proposés par w3schools ont été rassemblés. Ils vous sont présentés sur ce site où vous pourrez passez facilement de l’un à l’autre. Pour les utiliser, vous devez les télécharger.

Comme pour les portfolios révisés, ne vous attardez pas sur le code source des gabarits téléchargés. Prenez juste connaissance des modèles proposés et testez leur navigabilité et leur réactivité. Nous en utiliserons quelques uns pour les exercices qui vont suivre.

Le bac à sable de w3schools

On nomme “bac à sable” un espace de tests, d’exercices et de tâtonnement. Le site w3schools dispose d’un outil très pratique pour s’exercer en ligne sans recourir à Brackets ou tout autre éditeur de code. Vous y accédez chaque fois que vous cliquez sur le bouton « Try It yourself » (« Essayez vous-même », en français).

Vous pouvez enregistrer “dans le cloud” vos exercices ou vos tests en cliquant sur la disquette, dans le menu de l’éditeur. Une adresse URL permettant d’accéder à votre code vous sera communiqué.

N’oubliez pas de copier l’URL communiqué lors de la sauvegarde, si vous souhaitez archiver vos essais de codage.

Je vous invite à faire quelques essais de codage à partir dun exercice d’initiation concernant l’usage de la couleur avec W3.CSS. Le lien ci-dessous est un exemple d’exercice sauvegardé.

Envoyez-moi via Slack le lien de sauvegarde de l’exercice effectué. Je pourrai, en un seul clic, accéder à vos productions, disponibles sur le cloud.

Nous reviendrons un peu plus loin sur l’usage de la couleur avec la feuille de style w3.css.

Les classes CSS

Vous l’avez compris : la feuille de style w3.css est une grande liste de classes CSS. Tous les noms de classe commencent par w3-. Il est ainsi envisageable de les combiner avec d’autres classes ne commençant pas par w3-.

Pour vous rafraîchir la mémoire, vous pouvez consulter la page du site w3schools consacrée aux classes CSS.

➜ Lisez attentivement le cours en ligne correspondant à l’onglet W3.CSS colors et faites l’exercice ci dessous :

Vous trouverez toutes les couleurs disponibles pour le texte à cette adresse :

➜ Vous constatez, qu’il est possible d’associer plusieurs classes à un même élément HTML et de définir ainsi un style précis à l’élément concerné.

L’ordre dans lequel vous spécifiez les classes n’a pas d’incidence sur la manière dont elles sont prises en compte par le navigateur.

Les bibliothèques et les thèmes chromatiques

En plus des couleurs par défaut paramétrées dans la feuille de style w3.css, le site w3schools met à notre disposition de nombreuses bibliothèques de couleurs.

➜ Vous pouvez visualisez quelques bibliothèques chromatiques regroupées dans un même document. Comme pour les couleurs par défaut, les classes correspondantes définissent à la fois la couleur du fond et une couleur de texte par défaut.

Nous disposons également de plusieurs thèmes chromatiques. Il s’agit d’une déclinaison monochrome d’une couleur par défaut, paramétrée sous forme de classes comprenant 10 nuances supplémentaires pour chaque couleur.

➜ Là aussi, je vous propose de visualiser quelques thèmes chromatiques regroupés dans un même document. Soyez attentif à la manière dont sont déclinés les noms de classes de chaque nuance.

Le d de d3 ou d4 correspond à la première lettre de l’anglais “dark”. Le l de l3 ou l4 (il s’agit bien d’un L minuscule et non d’un i majuscule…) correspond à la première lettre de l’anglais “light”.

Modifiez l’appel du thème chromatique dans l’exercice ci-dessous, proposé sur Try-it, et constatez le résultat de cette modification

➜ Je vous propose d’effectuer l’exercice suivant : il s’agit, à partir du nouveau thème chromatique que vous avez choisi précédemment de modifier l’ordre d’affichage des nuances (le plus clair en bas et le plus foncé en haut.

Envoyez-moi vos liens de sauvegarde via Slack 😉

➜ Pour la suite de cette formation je vous invite à utiliser un dossier “css” dans lequel se trouvent toutes bibliothèques et tous les thèmes de couleurs proposées par w3schools. Se sont des feuilles de style placées dans les sous-dossiers « lib-colors » et “theme-colors”.

Utiliser les couleurs avec w3.css

Pour utiliser les bibliothèques ou les thèmes chromatiques dans une page Web, il est nécessaire d’appeler la feuille de style correspondante dans un <link>, au niveau du <head> (ou au dessus du body quand il n’y a pas de balises <head>).

Soit on choisit de les appeler depuis les serveurs de w3schools avec un lien du type :

<link rel="stylesheet" href="https://w3schools.com/lib/w3-colors-signal.css>

Soit on choisit d’utiliser le dossier “css” fourni dans ce cours et pour la même bibliothèque de couleurs on aura un lien du type :

<link rel="stylesheet" href="css/lib-colors/w3-colors-signal.css>

➜ Voir par exemple le code source de lib-colors-signal-w3css.htm

Faites l’exercice suivant : https://www.w3schools.com/code/tryit.asp?filename=GKJN3H6EGJYF
(cliquez sur le bouton “Run” pour prévisualiser le rendu du codage).

➜ Une fois l’exercice terminé, transmettez-moi le lien de sauvegarde de votre travail, via la plateforme Slack.

Personnaliser un gabarit de cv

Je vous propose maintenant de personnaliser le gabarit de CV que vous avez téléchargé en début de cours avec les autres gabarits. Vous pouvez le télécharger seul à l’aide du bouton ci-dessous.

Utilisez le thème chromatique de votre choix, placez votre photo ou l’image qui vous semble la plus appropriée, adaptez les textes à votre parcours professionnel

Vous mettrez ensuite votre cv en ligne sur votre compte Alwaysdata et vous me transmettrez le lien permettant d’y accéder.

Activer les liens sur les petites icônes du footer

Pour les plus perfectionnistes d’entre vous va se poser le problème de l’activation des liens en relation avec les icônes de réseaux sociaux, en pied de CV. Voici ce que Sophie a expliqué à Éléonore à ce sujet :

C’est comme quand tu insères un lien pour aller vers un site internet et que tu dois cliquer sur un texte pour y aller, dans ce cas là tu tapes

<a href="https://copiercollerdunomdusite.fr">texte qui va supporter le lien</a>

Ça c’est la balise type.

Si tu ne veux pas que ce soit du texte cliquable mais plutôt une icône, il faut que tu « appelles » dans ta page l’icône (grâce à une feuille de style dédiée).

Ici les icônes sont déjà appelés (via une feuille de style fournie par le site FontAwesome.com et les classes qu’elle contient).

<i class="fa fa-linkedin w3-hover-opacity"></i>

Du coup, il suffit juste de mettre l’icône à la place de « texte qui va supporter le lien », ce qui donne : 

<a href="https://www.linkedin.com/in/sophie-rxxr-1a157a98/" target="_blank"><i class="fa fa-linkedin w3-hover-opacity"></i></a>

Et bien sûr, tu mets un petit target= »_blank » (comme placé dans le lien que je viens de te montrer), pour que la fenêtre s’ouvre dans un nouvel onglet.

“Tout est dans le target !” a ajouté Sophie 😉

Grilles réactives avec w3.css

Quand vous aurez terminé de personnaliser le gabarit du CV, je vous invite à aller voir comment il est possible de rendre une page plus réactive (responsive) sur petits écrans.

La première solution proposée se trouve dans l’onglet W3.CSS responsive.

➜ Voici un premier exercice à réaliser (transformer une rangée de 2 colonnes en rangée de 3 colonnes) : https://www.w3schools.com/code/tryit.asp?filename=GKKEN07VCLAM

Attention, il faudra modifier les titres et les textes que vous dupliquez pour que cela reste cohérent. Vous pouvez même traduire les contenus en français. Mieux encore, vous pouvez saisir un contenu qui fasse sens avec la disposition des divisions !

Pour égaliser la hauteur des divisions, je vous propose d’examiner le code de cet exercice :

https://www.w3schools.com/code/tryit.asp?filename=GKKMHQE0V65J

➜ Je vous propose maintenant un dernier exercice, à faire en local, avec Brackets. Vous me ferez parvenir via Slack le seul fichier “index.html” modifié. Je le placerai dans le dossier dans lequel sont déjà placées les css et je pourrai voir ce que vous avez fait.

Réalisations avec w3.css

W3.CSS est bien moins utilisé que Bootstrap. Il existe cependant plusieurs sites revendiquant leur appui sur cette boîte à outil assez simple à prendre en main. L’abondante documentation en ligne permet à des personnes autodidactes de produire des sites de qualité satisfaisante.

➜ Pour les trouver, avec Google ou Duckduckgo, saisissez entre guillemets “Made with w3css” ou “Powered by w3css ». Consultez à la fois les résultats “textes” et “images”.

En voici quelques sites réalisés avec w3.css :

Voici une série de templates personnalisés par un designer croate :

Voici des cv réalisés avec w3.css :

Vous trouverez sur l’ancien support de cours une liste de sites réalisés avec w3.css. Quelques sites ne sont plus accessibles. D’autres ont évolué vers des présentations plus sophistiquées. Vous constaterez une nette prédominance de sites scientifiques par rapport à la sélection 2020. Vous retrouverez aussi des sites que j’ai présentés cette année. Ils sont toujours d’actualité et montrent des contenus de qualité… c’est bien là l’essentiel !

Catégories
FCS FCS2-cours

Utiliser Filezilla

Dans ce cours, nous allons voir comment utiliser le logiciel Filezilla pour transférer le dossier d’un site simple, de notre poste de travail (en local) sur le(s) serveur(s) d’Alwaysdata.

Lors du cours précédent (Utiliser les services gratuits d’Alwaysdata), vous avez ouvert un compte gratuit chez l’hébergeur Alwaysdata. Je vous ai indiqué comment récupérer les paramètres de connexion FTP dont vous allez avoir besoin. Assurez-vous de les avoir à portée de main !

Rappel

Vous disposez maintenant de toutes les données de paramétrage pour pouvoir mettre votre site en ligne en utilisant le client FTP Filezilla.

➜ Si ce logiciel n’est pas installé sur votre poste de travail, je vous invite à l’installer dès maintenant, en veillant à installer Filezilla-client depuis l’adresse https://filezilla-project.org/download.php?type=client.

Attention, soyez très vigilants : l’adresse filezilla.org (sans le ”-project”…) est un site malveillant ! N’essayez même pas d’y aller !

Les tutos

Je ne vais pas réinventer le fil à couper le beurre, il existe de nombreux tutos en ligne pour apprendre à utiliser Filezilla. Voici ma sélection.

Les vidéos

L’installation de Filezilla

Dans la vidéo ci-dessous, l’auteur va droit au but, installe Filezilla et transfère un fichier PSD dans un dossier nommé “public_html”. Pour aller plus loin, nous sommes invités à regarder une autre vidéo… sur laquelle il envisage de nous montrer comment installer WordPress ! Ben non, cela ne nous concerne pas (… pas maintenant du moins) mais, pour tout ce qui nous est présenté, du début jusqu’au transfert du fichier PSD, je valide !

L’utilisation de Filezilla

Dans la vidéo suivante, tout commence bien puis l’auteur s’emmêle un peu les pinceaux avec les ports 21 et 22 et les protocoles ftp et sftp… mais pour la suite c’est impeccable. Le dossier public côté serveur est un dossier “www” (comme chez Alwaysdata)… cela nous va donc parfaitement. Validé !

L’auteur de la vidéo ci dessus (Fabien Numelion) propose sur sa chaîne YouTube d’autres vidéos susceptibles de vous intéresser…

Les tutos écrits (et illustrés)

J’ai repéré il y a déjà longtemps un article qui expose les choses de manière détaillée. Filezilla a relooké légèrement son interface depuis le moment où cet article a été rédigé mais les boutons et les fenêtres n’ont pas changé de place…

Vous pouvez donc lire Comment ça marche Filezilla ?. Pour les curieux ou ceux qui souhaitent se rafraîchir la mémoire sur un point ou deux, il y a des liens vers d’autres articles comme C’est quoi un serveur FTP ?. On est en plein dans le sujet !

La pratique

Concrètement, il va falloir transférer dans le dossier “www” situé sur le serveur d’alwaysdata le dossier complet de votre site personnalisé situé en attendant sur votre poste de travail. En utilisant Filezilla comme cela vous a été montré et expliqué plus haut, tout devrait marcher comme sur des roulettes !

Précautions à prendre

Avant de vous lancer, vous allez faire attention à quelques petites choses…

Le fichier index.html

Il est impératif, pour que votre site s’affiche dans la fenêtre du navigateur de vos futurs lecteurs en saisissant une simple URL, que le dossier de votre site contienne un fichier nommé “index.html”. C’est la page d’accueil… même si elle est la seule page du site. Si le fichier html que vous voulez montrer au reste du monde porte un autre nom, renommez-le “index.html” !

Si vous le nommez autrement, il sera nécessaire de saisir le nom du fichier à la fin de l’url d’accès au dossier du site.

Les images dans le dossier img

Inutile de transférer sur le serveur d’Alwaysdata des images de maquette qui n’ont pas été utilisé dans la page HTML. Veillez à ce que vos images soient correctement compressées. Vos images doivent être à la dimension maximale de leur utilisation dans le site (affiché sur grand écran)… pas plus ! Compressées au format jpeg (qualité élevée ou 60%), vos photos ne surchargeront pas votre espace d’hébergement.

Si vous chargez excessivement l’espace mis gratuitement à votre disposition (100 Mo maximum), vous ne pourrez pas héberger votre portfolio et le CMS avec lequel nous travaillerons au niveau 3 de la formation !

Le nom du dossier

L’url permettant d’accéder à votre compte est de la forme nomducompte.alwaysdata.net. Quand vous aurez transféré votre dossier de site, pour accéder au fichier “index.html” il faudra saisir une adresse sous la forme nomducompte.alwaysdata.net/nom-du-dossier.

L’adresse de votre site se termine par le nom que vous allez donner au dossier qui contient le fichier “index.html” et les dossiers dépendants (le dossier “css”, le dossier “img”, etc.).

Nommez votre dossier de site sans mettre de majuscule ou de chiffre au début du nom, sans lettres accentuées ni espaces. Utilisez de préférence les tirets hauts (tirets du 6) pour séparer les mots. Soyez concis et explicites !

➜ Une fois ces précautions prises, vous pouvez transférer le dossier correctement nommé de votre poste de travail vers le dossier “www” (dans le dossier… pas à côté du dossier “www”).

Test de bon fonctionnement

Si tout s’est bien passé, vous devriez accéder à votre site en saisissant dans votre navigateur l’adresse nomducompte.alwaysdata.net/nom-du-dossier.

En transmettez-moi cette adresse, je pourrai voir votre site, comme tous ceux à qui vous communiquerez la même adresse !

➜ Transférez un autre dossier de page Web, nommé convenablement (avec son fichier “index.html” à l’intérieur)… Modifiez ensuite le nom du dossier à la fin de l’url précédente : vous devriez accéder à votre deuxième site Web !

Voilà qui vous ouvre de nouvelles perspectives pour l’avenir 😉