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-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 la présentation des fonctionnalités du framework (visuel ci-dessus).

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 test, d’exercice et de tâtonnement. Le site w3schools.com dispose d’un outil très pratique pour s’exercer en ligne sans recourir à VS Code ou à tout autre éditeur de texte. 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 dans le cloud vos essais de codage.

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

Cliquez sur le bouton Run >> pour afficher la page dans la fenêtre de prévisualisation.

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 proposé par w3schools.com en cliquant sur l’onglet W3.CSS colors et faites l’exercice ci-dessous :

Vous trouverez les 30 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 complexe pour l’élément sélectionné.

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 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.

➜ 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 (améliorés sur le plan des normes d’accessibilité). Les feuilles de style révisées sont 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).

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

Changer les icônes utilisée sur le CV

Le gabarit de CV proposé utilise les icônes de la bibliothèque Font Awesome version 4.7 (notez bien ce numéro de version…).

Comme pour des feuilles de style ou des polices Google Fonts, Les icônes sont appelées depuis les serveurs de Font Awesome. Vous trouvez le lien d’appel des icônes dans le head du code source.

➜ Repérez dans le code HTML les endroits où sont utilisées des icônes (entre balises <i> et </i>. Pour les modifier, changez simplement le nom des icônes. Vous trouverez toutes les icônes disponibles dans cette version de Font Awesome sur le site https://fontawesome.com/v4.7.0/icons/ 😉

Dans un gabarit basé sur w3.css, n’utilisez pas le code proposé sur le site de Font Awesome ! Modifiez juste le nom de l’icône dans la portion de code source concernée.

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 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 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 !

W3.CSS et Bootstrap

Le framework CSS le plus utilisé est sans aucun doute Bootstrap. la courbe d’apprentissage de Bootstrap est cependant plus raide que celle de W3.CSS. Plusieurs articles comparent les 2 frameworks.

Le cours sur les frameworks d’Olivier Nocent, permet de se faire une idée des différences et des points communs entre les 2 boîtes à outils.

W3.CSS vs Bootstrap est un comparatif entre le ténor des frameworks CSS et le framework que vous venez de découvrir.

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 😉