Nous allons voir pendant ce cours comment procéder pour bénéficier des services gratuits de l’hébergeur Alwaysdata. Notre objectif à court terme est de pouvoir déposer des sites Web simples, personnalisés par nos soins lors des cours précédents.
Nos besoins
Capacités d’hébergement
Si vous compressez convenablement les images utilisées pour les sites personnalisés par vos soin, le poids total de chaque site à héberger ne devrait pas dépasser quelques Mo. Plus tard vous hébergerez votre portfolio sur le même espace. Bien conçu, votre portfolio ne devrait pas dépasser 20 Mo.
Pour la suite de la formation, nous aurons besoin d’héberger un CMS sans base de données (Bludit). Ce CMS, une fois utilisé pour réaliser la maquette d’un site vitrine, ne dépassera pas 50 Mo (images intégrées comprises). 70 Mo à 80 Mo d’espace d’hébergement suffisent donc amplement pour la mise en ligne des publications réalisées en cours de formation FCS.
Si vous envisagez de publier d’autres sites statiques sur le même espace d’hébergement, dans un but d’exercice, prévoir 20 à 30 Mo supplémentaires est réaliste. Cela porte notre besoin maximum à 100 Mo, pour le seul cadre de la formation FCS et la préparation du Titre Pro IMeP.
Base de données
Nous n’avons pas besoin d’accéder à une base de données dans le cadre de la formation actuelle. Nous n’avons pas besoin d’installer le CMS WordPress (ce qui nécessiterait le paramétrage d’une base de données et au moins 100 Mo supplémentaires pour installer sans souci quelques thèmes et extensions appropriés).
Aide en ligne
L’idéal est de pouvoir disposer d’une aide en français et d’une assistance rapide en cas de besoin.
Adresse du site
Les comptes gratuits ne permettent pas d’obtenir des noms de domaines gratuitement. Cependant la plupart des offres proposent de choisir des sous-domaines, dans la mesure où ils sont disponibles. Il s’agit alors de l’intitulé de votre compte
Généralement, l’intitulé de votre compte précède le nom de domaine de l’hébergeur et prend une forme comme moncompte.alwaysdata.net chez Alwaysdata.
Créer un compte chez Alwaysdata
➜ Je vous propose ici de créer un compte gratuit chez l’hébergeur Alwaysdata.
Vous disposerez de 100 Mo pour héberger vos publications, d’une aide en ligne en français, d’un tableau de bord de gestion de votre compte assez clair. L’adresse Web permettant d’accéder à vos sites (dont votre portfolio) se terminera par alwaysdata.net.
La démarche d’inscription est très simple. Si vous avez besoin de consulter l’aide en français, elle est accessible à cette adresse : https://help.alwaysdata.com/fr/
Attention : tous les 4 mois, il vous faudra vous connecter à votre compte en tant qu’administrateur. Si vous ne le faites pas, votre compte sera annulé. Vous serez avertis par mail avant la date butoir.
S’inscrire chez Alwaysdata
➜ La démarche d’inscription est très simple. Choisissez bien la formule gratuite mutualisée et complétez le formulaire d’inscription avec des données valides. L’inscription s’effectue à cette adresse : https://www.alwaysdata.com/fr/
Je vous recommande de saisir d’abord votre mot de passe dans un éditeur de texte. Choisissez un mot de passe fort puis copiez-le pour le coller dans le formulaire d’inscription d’Alwaysdata.
Pensez bien à enregistrer votre fichier de note. Nommez-le de manière explicite. En procédant ainsi vous éviterez les fréquentes erreurs de saisie et de copie qui vous obligeraient à redemander un mot de passe lors de connexions ultérieures infructueuses.
➜ Une fois votre compte créé, vous pouvez accéder à votre espace d’administration, à l’adresse suivante : https://admin.alwaysdata.com/.
Récupérer Les paramètres de connexion FTP
Pour placer vos sites Web en ligne, vous devrez utiliser les fonctionnalités d’un logiciel nommé “client FTP” (je vous propose dans un autre cours d’utiliser le client FTP “Filezilla”).
➜ Pour cela, vous devez noter dès maintenant les données dont vous aurez besoin ultérieurement. Sans ces données vous ne pourrez rien transférer chez Alwaysdata avec Filezilla ! Attention, vous en aurez besoin plusieurs fois…
Dans la colonne de gauche de votre espace d’administration, repérer l’onglet “Web”, ouvrez-le puis repérez l’onglet “Accès distant”. Ouvrez-le à son tour puis cliquez sur FTP. Toutes les informations dont vous avez besoin sont sur cette page…
Il s’agit donc de noter les informations suivantes :
l’adresse d’hôte FTP (sous la forme ftp-moncompte.alwaysdata.net)
votre identifiant de connexion FTP (nom d’utilisateur… c’est généralement le même que le nom du compte)
votre mot de passe de connexion FTP (c’est le même que votre mot de passe de connexion à l’espace d’administration)
Contrairement à ce que vous pourriez entendre sur certains tutoriels, je vous demande (dans un premier temps) de ne pas créer de nouvel utilisateur FTP.
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 !
Pour finaliser la production d’un site simple créé à partir de la rédaction structurée d’un article, je vous propose maintenant d’insérer en tête de page un menu fixe.
Chacun dispose désormais d’un dossier de site dans lequel se trouvent :
le fichier index.html,
le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)
➜ Pour insérer un menu fixe, nous allons utiliser l’application Web Luxbar. Celle-ci génère le code HTML dont nous avons besoin.
Préparation
Le code proposé par l’appli Luxbar est opérationnel dans la mesure ou la feuille de style correspondante est disponible dans le dossier du site.
➜ Il est donc nécessaire de télécharger la feuille de style “luxbar.css” puis de la placer dans le dossier “css” du site.
Il s’agit maintenant d’utiliser l’application Luxbar pour générer le code HTML du menu.
Inutile de télécharger l’appli Web (comme cela vous est proposé en début de page. Tous les réglages s’effectuent directement sur la page de l’application. Il suffit de cocher les options souhaitées. Quoiqu’il en soit, tout est modifiable dans le code ultérieurement.
Choix du nombre d’onglets
➜ Le nombre d’onglets dépend à priori du nombre de sous-titre h2, auquel il faut ajouter un onglet “Accueil”, pour revenir en haut de page quand on en a besoin.
Choix de la position du menu et de sa couleur
➜ Je vous invite à choisir la position “Fixed”. En effet, elle se révèle la plus intuitive et la plus pratique sur tous les écrans.
Sur la capture d’écran, j’ai coché “Fixed Bottom” pour des raisons pratiques de positionnement des commentaires 😉
Choix des modalités d’affichage dans la barre de navigation
➜ Choisissez ici les options qui vous conviennent le mieux.
L’option d’animation du hamburger concerne l’icône des 3 traits superposés qui s’affiche pour accéder au menu quand l’écran ou la fenêtre de navigation est de petite taille.
Paramétrer le code HTML du menu
Une fois les options choisies, l’application Luxbar vous propose de copier dans votre code source une série de lignes HTML (un bouton “Copy” apparait au survol du code).
➜ Copiez le code HTML proposé et collez-le dans le code source de votre page Web (index.html) en changeant le nom du conteneur du menu. Choisissez la balise <nav> à la place de la balise <header>.
Établir les liens avec la page dans le code du menu
Sur la capture d’écran précédente, j’indique que des changements doivent être effectués dans le code HTML du menu Luxbar. En effet, il s’agit d’établir un lien entre chaque onglet et l’endroit de la page vers lequel l’onglet est sensé pointer.
Pour installer proprement un menu Luxbar avec les styles que je vous ai proposé, il est nécessaire de procéder à des améliorations dans le code HTML et dans les CSS.
➜ Téléchargez les CSS adaptées et placez-les dans le dossier “css”. Ensuite, appelez celle qui vous convient via la balise <link>, dans le head de votre site.
➜ Mettez en place les bandeaux qui vont permettre aux titres <h2> de s’afficher sous la barre de menu. Positionnez ensuite les différents id (ancres de navigation) dans les <div class= »bandeau »> (voir l’exemple donné dans la capture d’écran précédente).
Pour que les feuilles de style adaptées au menu Luxbar puissent s’appliquer correctement à votre page HTML, il est nécessaire de créer de créer 2 boîtes (divisions) importantes :
une boite <main></main>
une boîte <footer></footer>
La boîte <main></main> englobera les contenus principaux (h1 – p – h2 – p – p – etc.). Dans notre cas, elle sera chapeautée par la boîte <nav></nav> contenant le menu et elle sera suivie de la boîte <footer></footer> contenant des informations annexes sur le site et ses contenus.
Je vous propose de télécharger un exemple de réalisation similaire pour voir quels sont précisément les attendus à ce stade des opérations 😉
Dans ce cours, après avoir pris le temps de soigner la structuration d’un texte intégré dans une page HTML, nous allons appliquer à la page un style graphique (un look, un habillage, une apparence soignée…).
Préparatifs
➜ Pour réaliser l’exercice, nous allons établir un lien entre une feuille de style CSS et la page HTML que nous avons élaborée lors du cours précédent. Téléchargez les pages HTML sur lesquelles vous avez travaillées lors de la séance précédente.
La démarche que nous suivons vous amènera, pas à pas, à la mise en ligne d’une page Web optimisée pour la consultation en ligne sur tous les écrans. Le diaporama ci-dessous détaille la démarche complète.
Appuyez sur la touche J pour voir les vignettes de toutes les diapos, sur la touche P pour imprimer le diaporama et sur la touche T pour visionner le diaporama normalement
Le fichier HTML présenté sur la 5e diapositive est mis à votre disposition avec les fichiers HTML sans CSS à télécharger précédemment.
Compléter et faire valider son code
Nous devons nous assurer que le code que nous avons produit est conforme aux exigences du Web. Pour vérifier cela, nous utiliserons des extensions de Brackets, installées préalablement par nos soins. Il s’agit de :
Beautify
HTML Skeleton
Nu Markup Checker
Leur installation et leur prise en main sont présentées sur cette fiche de cours : Utiliser les extensions de Brackets. Il n’est pas nécessaire d’installer pour le moment l’extension “Open in browser” mentionnée en dernier sur la fiche.
Je rappelle qu’un cours assez bref, intitulé Personnaliser Brackets, est disponible sur ce site.
➜ Je vous demande donc d’installer les 3 extensions mentionnées et d’en tester l’usage. Concernant HTML Skeleton, prenez bien la précaution d’ouvrir une nouvelle page avant de faire des tests !
➜ Je vous propose ensuite de nous retrouver en classe audio sur Zoom, pour faire un point sur l’usage de ces extensions. Je vous montrerai en partage d’écran ou sur de courtes vidéos comment utiliser ces extensions pour optimiser le code de vos pages HTML.
Nous verrons notamment :
Comment indenter rapidement le code source avec “Beautify”
Comment insérer la balise meta viewport avec “HTML Skeleton”
Comment repérer d’éventuels erreurs de codage avec “Nu Markup Checker”
Appliquer un style graphique déjà codé
Pour réaliser la suite du cours, vous avez besoin de télécharger un dossier intitulé « css », dans lequel se trouvent 4 feuilles de style déjà prêtes :
➜ Pensez à décompresser l’archive en .zip pour accéder aux feuilles de styles. Ne modifiez surtout pas le nom du dossier “css” et placez ce dossier dans un dossier nommé comme votre fichier HTML (“django” ou “bilbo” ou “rancoon” etc.) dans lequel se trouvera donc, l’un à côté de l’autre, le fichier “nom-de-fichier.html”et le dossier “css”.
Pour appliquer ces styles à votre page il va être nécessaire de placer dans le <head> une instruction HTML qui va permettre au navigateur de savoir
que telle feuille de style doit être appliquée aux éléments HTML
où trouver cette feuille de style (dans le dossier “css”)
➜ Après avoir placé fichier HTML et dossier CSS dans un même dossier, vous allez donc intégrer la ligne de code ci-dessous, soit en la recopiant, soit en effectuant un copier-coller, soit en utilisant HTML Skeleton puis en complétant la ligne insérée.
Voici la ligne à insérer dans le <head>, sous le <title>, dans sa forme définitive (avec l’url de la feuille de style nommée « simple.css ») :
<link rel="stylesheet" href="css/simple.css">
➜ Le navigateur est averti par le code qu’il va devoir prendre en compte une ressource externe (<link>). Il est averti que cette ressource est une feuille de style (« stylesheet » = feuille de style, en anglais…) et le code lui indique où se trouve la feuille de style et comment elle se nomme (il n’est pas question qu’il tienne compte des feuilles de style voisines…).
➜ Voyez comment le navigateur affiche désormais votre page HTML…
Cela n’a plus rien à voir avec du texte en Times, noir sur fond blanc, collé à gauche de la fenêtre de navigation ! 😀
➜ Changez maintenant le nom de la feuille de style en le remplaçant par celui d’une des 3 autres feuilles placées dans le dossier « css ». Observez les changements.
Vous comprenez maintenant pourquoi il est si important de bien structurer son texte dès le départ. En effet, il est possible de proposer des variantes de présentation, sans toucher au texte. Il suffit de changer ou modifier la feuille de style. Il y a la structure HTML d’un côté et la présentation CSS de l’autre. Ces deux types d’instructions sont pris en compte simultanément par le navigateur.
Le gros avantage de ce procédé est de pouvoir utiliser une même feuille de style pour des textes différents ou des styles différents pour un même texte… en modifiant une simple ligne de code ! 😉
Intégrer une des images collectées
Nous avons vu (à la fin du cours précédent) comment collecter et intégrer une image. Le moment est venu de placer les instructions HTML adéquates dans votre code source, pour que l’image de votre choix soit affichée dans le corps de la page. Je vous montre donc le code à placer à l’endroit qui vous semble le mieux adapté pour illustrer votre texte.
➜ Placez le dossier « img » dans lequel vous avez placé vos images (cours précédent) dans le dossier qui contient déjà le fichier .html et de dossier « css ». Intégrez le code indiqué plus bas en indiquant le nom de l’image de votre choix à la place de « nom-image.jpg ».
<img src="img/nom-image.jpg" alt="Description du sujet de l'image à des personnes malvoyantes">
➜ Ce code indique au navigateur qu’il doit afficher une image (<img>). Il indique également au navigateur l’endroit où se trouve l’image (ici, dans le dossier « img » situé à la racine — à coté — du fichier HTML). Le texte alternatif est complété afin de remplir pleinement son rôle (voir la fin du cours précédent).
Observez alors le résultat dans la fenêtre de votre navigateur. Testez l’affichage en version mobile ou responsive (touche F12 dans Chrome…).
➜ Changez de feuille de style (en modifiant le nom de la feuille appelée dans le <head>… Observez les changement de présentation dans votre navigateur !
Parvenus à ce stade, je vous invite à partager vos productions en commençant par renommer votre page HTML. Nommez-la “index.html”. Celle-ci sera la page d’accueil de votre futur site “one-page”. Ce site sera donc constitué du dossier contenant :
le fichier index.html,
le dossier css contenant les 4 feuilles de styles utilisables (même si la seule feuille de style utilisée est absolument nécessaire)
le dossier img contenant les images collectées (même si là aussi, seule l’image intégrée dans la page soit nécessaire)
➜ Compressez le dossier complet du futur site avant de le partager sur l’espace Slack de la formation.
Personnaliser les feuilles de style CSS
Pour vous faciliter la tâche, je vous ai préparé des feuilles de style prêtes à l’usage. Il se peut qu’elles ne vous satisfassent pas tout à fait et que vous ayez envie de les modifier. C’est tout à fait envisageable.
Pour faire cela, il va falloir apprendre à parler CSS. Comme pour le HTML, au début on y comprend pas grand chose et petit à petit on apprend à discerner les endroits où il est possible d’effectuer des modifications sans tout détruire.
Évidemment, vous allez parfois casser des feuilles de style… Ce n’est pas grave ! Cela ne va pas endommager votre navigateur ou votre éditeur de code, encore moins votre navigateur. Vous reviendrez en arrière, vous repartirez de votre point de départ et vous serez plus vigilants 😉
Changer les couleurs du site
Maintenant que nous disposons d’un dossier complet avec index, css et dossier d’images, nous ne parlerons plus de page HTML mais de site Web. Certes, le dossier du site n’est pas encore hébergé sur un serveur mais il s’agit bien d’un produit de communication destiné à la consultation avec un navigateur !
Les couleurs utilisées dans les feuilles de styles que je vous ai transmises ne vous plaisent pas forcément… Elles ont cependant été choisies pour fonctionner de manière optimale les unes avec les autres.
Nous allons envisager de modifier les couleurs utilisées dans la feuille de style nommée “dark-one.css”. Pour cela nous allons commencer par la dupliquer et par la renommer “dark-two.css”
En ouvrant le dossier de votre site dans Brackets et en ouvrant la feuille de style “dark-two.css”, vous remarquerez que j’ai indiqué en commentaire, en tête de fichier, les références des 3 couleurs utilisées dans la feuille de style “dark-one.css”. En survolant avec votre curseur le nom des couleurs, un aperçu de la couleur s’affiche dans un petit cadre.
Si vous cliquez sur le nom de la couleur et que vous tapez “cmd-E”, une fenêtre de paramétrage des couleurs s’ouvre dans Brackets et facilite grandement les changements à effectuer.
Vous constaterez que les 3 couleurs utilisées sont des variantes de teintes semblables ou analogues : une variante sombre, une variante moyenne et une variante claire. Pour modifier le nuancier, je vous propose de changer la teinte moyenne puis, à partir de cette teinte moyenne, de créer les variantes sombres et claires (une vidéo à ce sujet est disponible sur Slack).
➜ Commencez par faire vos changements dans une duplication de la ligne de commentaires. Vous utiliserez ensuite la fonction “rechercher-remplacer” pour changer les mentions des couleurs dans toute la feuille de style.
➜ Observez les changements de couleurs opérés. La couleur sombre est toujours la couleur de fond. La couleur claire est utilisée pour le texte. La mouleur moyenne met en valeur les titres,le chapô, les filets et les bordures du cadre de l’image.
En apprendre un peu plus sur les CSS
Voici quelques sites que je vous recommande pour débuter avec les CSS.
https://marksheet.io/ (à consulter avec Chrome pour demander la traduction automatique en français)
Dans ce cours nous allons apprendre à organiser les contenus d’une page HTML pour préparer leur stylisation. Pour cela nous allons utiliser deux structures rédactionnelles basées les 2 plans indiqués ci-dessous.
h1 – p – h2 – p – p – h2 – p – p – h2 – p – ul – p
h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p – h2 – p – ul – p
Nous allons utiliser des séparateurs pour isoler certains contenus et intégrer dans la page une citation, une liste de liens et des mots importants, afin d’enrichir le contenu de l’article. Nous verrons pour terminer comment intégrer une image.
Auparavant, nous allons détailler deux points importants :
les 4 composants de toute rédaction
les similitudes entre design “print” et design “hosted”
Les 4 composants de toute rédaction
Faisons le point sur le rôle central de la rédaction, dans la publication en ligne en particulier, mais aussi dans la publication sur papier.
La rédaction Web (et toute rédaction, en général) est la combinaison de 4 composants : une structure cohérente, un vocabulaire précis, une syntaxe pertinente et une juste orthographe.
Sur MapsOfMind, pour ramener la carte à une vue d’ensemble après avoir zoomé sur un des sujets : rafraîchir simplement la page . 😉
Lors de la création d’une page HTML simple, la structure rédactionnelle est mise en place en même temps que les balises de titrage (heading), de paragraphes et de listes. La structure de base sur laquelle vous avez travaillé jusqu’à maintenant était celle-ci :
h1 – p – h2 – p – p – h2 – p – p
Concernant le choix du vocabulaire, de la syntaxe et de l’orthographe, vous avez collecté sur le Web des textes que je vous ai invité à simplifier (ou à étayer…) pour coller davantage à la structure ci-dessus.
➜ Je vous recommande cependant de relire vos textes simplifiés et, si nécessaire, de modifier la syntaxe (l’ordre des mots ou des phrases). ➜Ajustez également le vocabulaire pour que les idées à transmettre soit clairement communiquées… ➜ Pour terminer, faites relire vos textes à des personnes compétentes si vous avez du mal à orthographier correctement vos textes.
Similitudes en design “printed” et “hosted”
Avant de vous demander de travailler sur la structuration du texte intégré dans votre page HTML, je voudrais revenir sur les opérations communes à la communication sur papier et la communication sur fenêtre de navigation. Je vais insister sur 3 points :
La structuration quelque soit le format
la stylisation pour montrer l’important
la coloration pour favoriser la lecture
Structurer quel que soit le format
Je mets en relation de similitude la communication imprimée (printed) et la communication hébergée (hosted). La première a pour support de lecture un support analogique de dimensions fixes (le plus souvent une feuille de papier). La seconde a pour support de lecture un support numérique de dimensions variables (la fenêtre d’un navigateur, affichée en plein écran ou non).
La page imprimée est structurée dans un format donné, une fois pour toutes, mais la page hébergée est structurée, une fois pour toutes, pour plusieurs dimensions d’affichage. 😉
Cela nous oblige, en design graphique (quel que soit le mode de publication), à concentrer nos efforts sur la structuration des informations. Nous devons veiller à ce que que la structure logique des contenus soit toujours perceptible, quelque soit le format de présentation au public.
S = DHO (Structuration = découpage à chaud = Découpage + Hiérarchisation + Ordonnancement)
La nécessité de structurer les contenus ou blocs d’informations, à l’échelle de la page entière ou des différentes parties de la page n’est pas le seul point commun entre le design pour l’imprimé et le design pour l’hébergé.
Styliser pour montrer l’important
La stylisation est la modification des formes et des couleurs du contenu d’une page pour rendre la communication plus efficace (et non principalement plus belle…). il s’agit de mettre en évidence ce qui est le plus important.
En design graphique, cela se traduit très rapidement par le choix d’un nuancier de couleurs et d’une combinaison typographique, tous deux fonctionnels. Cependant, les concepteurs des navigateurs n’ont pas jugé utile d’aller plus loin que la mise en place de styles graphiques très simples (styles par défaut des navigateurs). Ils laissent aux designers graphiques le soin d’assurer toute la stylisation supplémentaire voulue, en fonction des contextes des projets de publication.
Les styles par défaut des navigateurs
Les navigateurs disposent de styles graphiques par défaut. Ces styles, très simples, permettent de visualiser les choix structurels effectués.
Les deux couleurs utilisées sont le noir et le blanc. Noir pour les textes et blanc pour l’arrière plan. La famille typographique utilisée par défaut est le Times, utilisée en 4 fontes (Regular, Bold, Italic et Bold italic).
Les titres de niveau 1 sont présentés avec une force de corps plus importante que les titres de niveau 2. Il en est de même pour les titres de niveau 2 par rapport aux titres de niveau 3, etc. Tous les titres sont en caractères gras (Bold) et tous les paragraphes sont affichés en caractères normaux (Regular)
Notez qu’en design pour le Web, la graisse d’un caractère est indiquée par un nombre allant de 100 à 900. Un caractère normal (Regular) a une graisse de 400, un caractère gras (Bold) a une graisse de 700.
➜ UTILISER L’EXTENSION WHATFONT
Pour analyser les polices de caractères d’une page Web, je vous recommande l’utilisation de l’extension Whatfont. Même s’il est possible d’inspecter les polices de caractères avec les outils de développement de Chrome (Afficher > Options pour les développeurs > Outils de développement), l’extension WhatFont offre quelques avantages (voir ci-dessous)
Désactiver les CSS dans Chrome
➜ Ayant finalisé la rédaction de vos textes intégrés dans une page HTML, pouvez-vous percevoir la structuration de vos contenus rédactionnels (titres, sous-titres, paragraphes), en l’absence de toute stylisation CSS ?
Pour désactiver l’affichage des styles d’une page Web, dans le navigateur Chrome (recommandé dans le cadre de ce cours), je vous recommande l’installation de l’extension Web Developper.
En cliquant sur “Disable All Styles”, vous désactivez les CSS de la page consultées. En cliquant également sur “Disable Browser Default Styles”, vous désactivez les feuilles de styles par défaut appliquées par le navigateur.
Évaluer la perception de la structure sans stylisation
Le résultat est un affichage des contenus sous leur forme la moins sophistiquée qui soit. Dans ce cas, pouvez-vous affirmer que le plan rédactionnel est visible et que le message transmis est clairement compréhensible ? Si c’est le cas, c’est que la structuration (DHO) est bonne !
Vous constaterez visuellement qu’il est plus facile de percevoir la structure d’un texte lorsque ce texte est présenté (ou affiché) sur une petite largeur que sur une grande largeur.
Pour vous en rendre compte, quand vous êtes dans Chrome, appuyez sur la touche F12 de votre clavier (ou menu Afficher > Options pour les développeurs > Outils de développement) puis sur le bouton de simulation d’affichage sur mobile (Toggle device toolbar). Veillez à ce que le réglage de votre fenêtre de simulation soit réglée sur “Responsive” et actionnez la poignée de réglage de la largeur de l’affichage.
Coloriser pour favoriser la lecture
Nous avons vu quelle était l’importance du contraste de valeurs en design graphique, en particulier dans la communication imprimée. Voir pour rappel le cours intitulé Les couleurs en design graphique.
Dans la communication hébergée, la question du contraste des couleurs est centrale ! Il existe même des normes d’accessibilité très contraignantes imposant des ratios de contraste très élevés. La norme AAA, par exemple, permet difficilement d’utiliser plus de 2 couleurs pouvant être appliquées à des textes de taille inférieure à 14 pt (19 px environ) sur un fond donné.
Une couleur, en design imprimé ou en design hébergé, doit toujours être envisagée appliquée à une forme disposée sur un fond. Une couleur considérée isolément n’a aucune fonctionnalité en communication visuelle !
La couleur noire utilisée par défaut par les navigateurs pour afficher les textes codés en HTML ne présente de lisibilité maximale que sur fond blanc.
Que penseriez-vous d’un navigateur qui afficherait les textes de cette manière ? Pourtant le texte est bien noir !
Compléter la structure de la page HTML
Ce qui a été produit
Lors des activités proposées à la fin du cours précédent, vous avez mis en place une page html en vous appuyant sur des gabarits simples mis à votre disposition. Ces gabarits présentaient 2 structures rédactionnelles schématisées ainsi :
h1 – p – h2 – p – p – h2 – p – p
h1 – p – h2 – p – p – h2 – p – h3 – p – p – h3 – p – p
Je vous ai laissé libres de choisir la structure qui vous semblait la mieux correspondre à vos besoins en matière de rédaction. La seconde structure nécessite en effet la mise en place d’un texte plus long (et demande donc plus de travail) !
J’ai insisté sur le découpage des textes collectés pour qu’il corresponde à ces plans. Je vous ai demandé de bien équilibrer la longueur de vos paragraphes (en simplifiant le texte si nécessaire).
Je vous ai également demandé de bien aérer la présentation de votre code source pour faciliter la vision de votre structure dans votre éditeur de code (et aussi dans Slack, quand vous publiez votre fichier html en pièce jointe).
➜ Avant d’aller plus loin, veillez à ce que vos titres permettent immédiatement de comprendre de quoi il est question. Il s’agit de faire en sorte que le message essentiel du texte soit perceptible au premier coup d’œil, à la lecture des titres et des sous-titres.
Le premier paragraphe est un paragraphe d’introduction nommé chapô. Il résume tout ce dont il va être question dans le suite du texte. Sa lecture doit donner envie de lire l’article, en informant déjà très clairement l’internaute sur l’essentiel !
Ce que nous allons ajouter
1 – Ajouter des filets séparateurs
Comme vous avez pu le voir sur la précédente image, quand tous les styles sont désactivés, les séparateurs revêtent une importance particulière. Dans l’exemple qui nous intéresse, ils permettent de mettre en valeur le chapô.
➜ Je vous invite donc à placer un filet séparateur avant et après le premier paragraphe qui suit le titre de niveau 1. Cela se code à l’aide de la balise autofermante <hr> (à ne pas confondre avec <br>).
Nous verrons plus tard comment les styliser et les personnaliser pour leur donner une couleur, une épaisseur ou une longueur différente.
➜ Vous allez également ajouter un filet séparateur à la fin de votre texte avant d’insérer un nouveau paragraphe d’une seule ligne de texte mentionnant votre nom dans une phrase comme celle-ci “Exercice réalisé par Prénom Nom”.
Cela va me permettre de ne pas trop me mélanger les pinceaux en prenant connaissance de vos publications 😉
2 – Ajouter une citation
➜ À l’endroit que vous jugerez le plus approprié, je souhaiterais que vous intégriez une citation. Inutile d’ajouter les guillemets, ceux-ci seront affichés (ou non…) lors de la stylisation CSS. Inutile, non plus, de mettre le texte en italique. Cela se fera (ou non…) avec l’application des styles.
Il est intéressant de savoir comment les navigateurs gèrent l’affichage de ce type de contenu (généralement en décalant la citation par rapport à l’alignement à gauche des paragraphes de texte courant)
Une citation s’intègre dans le code source entre les balises <blockquote> et </blocquote>.
3 – Ajouter une liste de liens
Votre texte traite d’un sujet dont il a sûrement été question dans d’autres articles en ligne, sur d’autres sites ou même, dans des livres publiés chez tel ou tel éditeur. Communiquez ces références à vos lecteurs.
➜ Commencez par élargir le champ de votre recherche et faites une sélections des meilleurs articles et des meilleurs références en ligne concernant le sujet de votre texte. Vous intègrerez les liens menant aux sites sélectionnés dans une liste non ordonnée que vous allez créer, dans un chapitre intitulé “En savoir plus”. Ce chapitre et la liste de liens seront placés entre le dernier chapitre de votre texte actuel et le dernier séparateur mis en place précédemment.
Une liste non ordonnée est aussi nommée “liste à puces” du fait que les navigateurs affichent chaque item d’une telle liste précédé d’une puce.
La création d’une liste non ordonnée se code entre les balises <ul> et </ul>, chaque item de liste (chaque lien dans notre cas…) étant positionné entre les balises <li> et </li>.
Une liste ordonnée serait codée entre les balises <ol> et </ol>.
Comment coder un lien hypertexte ?
Un lien hypertexte est codé entre les balises <a> et </a>. Le texte placé entre ces balises est nommé “intitulé du lien”. Les navigateurs affichent les intitulés de lien en bleu et soulignent cet intitulé. Cependant, ce simple codage ne suffit pas pour atteindre la page cible en cliquant sur le lien.
Pour rendre le lien efficace, il est nécessaire d’encoder l’adresse URL de la page cible dans la balise d’ouverture. On insère donc cette adresse de la manière suivante :
Dans cette ligne de code, https://domaine-site-cible.xxx est l’URL fictive du site cible et le code qui suit est une instruction spéciale. Elle ordonne au navigateur d’ouvrir la page Web ciblée dans une nouvelle fenêtre ou un nouvel onglet. Cette dernière instruction permet à l’internaute de ne pas perdre la page où il se trouvait avant de cliquer sur l’intitulé du lien, au cas où il rebondirait de lien en lien bien loin de votre page. 😉
➜ Examinez ci-dessous un exemple de liste de liens encodés en HTML, précédée d’un paragraphe d’introduction et du titre de niveau 2 “En savoir plus”.
Vous repèrerez également sur cette capture d’écran le codage d’une citation, entre balises <blockquote> et </blockquote>. Dans cette citation, les mentions oranges ( ) sont le codage de caractères insécables. Vous constaterez aussi que le Prénom et le Nom écrits dans la dernière ligne sont placés entre les balises <strong> et </strong>, ce qui les affiche par défaut en gras dans une fenêtre de navigateur.
4 – Mettre en valeur les mots importants
Votre article commence à prendre tournure ! Il est cependant entendu que dans le cadre de ce cours, je ne vous parle pas de référencement naturel ni d’expressions ou de mots clés pouvant optimiser le référencement de votre article par les moteurs de recherche. Cela vous obligerait à remanier bien davantage vos textes. Si le sujet vous intéresse, vous pouvez toujours vous référer aux cours Rédaction Web et Référencement Naturel.
Il existe cependant une technique simple pour optimiser le contenu d’une page Web en vue d’une meilleure indexation sur les pages de résultats des moteurs de recherche. Il s’agit tout simplement de mettre en valeur les mots importants du texte, tous axés sur le sujet principal de l’article. Pour cela il convient de les encoder entres les balises <strong> et </strong>.
➜ Mettez entre balises <strong> et </strong> les expressions ou mots importants de votre texte.
Le navigateur, comme nous venons de le voir, affiche en gras les mots “forts”. L’affichage en gras attire l’attention sur ces mots (comme pourrait aussi le faire un affichage en italique…). Mais c’est la rôle sémantique de la balise <strong> qui importe le plus ! La balise <strong> permet en effet aux algorithmes des moteurs de recherche de mieux analyser le sujet de votre article en sachant ce que vous jugez importants dans votre texte.
➜ Je vous propose un test imparable pour savoir si vous avez mis en évidence les bonnes expressions ou les bons mots. Vous affichez votre texte dans le navigateur et vous lisez seulement les mots et expresions en gras. Si vous parvenez à saisir le message essentiel de votre article, alors vous avez fait du bon travail… Sinon, vous devinerez sans peine ce qu’il faut améliorer 😉
L’alternative <b>
Il existe une autre balise permettant d’afficher un texte en gras, sans pour autant que ces mots en gras soient jugés “forts” ou importants. Il s’agir de la balise <b>, qui n’a pas de fonction sémantique particulière.
➜ Je vous invite, pour tester l’usage de la balise <b>, de mettre entre <b> et </b> tout le premier paragraphe, le fameux chapô (ou chapeau, selon les orthographes…).
Si des mots ont été placés entre <strong> et </strong> dans le chapô, ils ne seront pas affichés “deux fois plus gras”. Ils seront cependant pris en compte comme mots importants par les moteurs de recherche.
Fin de la structuration et préparation de la stylisation
Si vous examinez maintenant votre texte dans la fenêtre de votre navigateur, même en désactivant les styles par défaut du navigateur, vous devriez vous rendre compte des avancées réalisées.
Votre texte est prêt à être stylisé ! Je ne vous ai pas fait intégrer d’image pour le moment. L’affichage des images sans application de style CSS détruirait l’ordonnancement visuel sur lequel nous avons travaillé jusqu’à maintenant, en particulier si ces images sont de grande taille.
Nous aurons l’occasion d’insérer plus tard une illustration dans notre page Web. Je vais vous montrer dès maintenant comment nous procèderons.
Collecter des illustrations
La première étape consiste à se mettre en quête d’une illustration pertinente pour votre article. J’utilise ici le terme “illustration” pour désigner une image servant à “illustrer” un texte. Il peut s’agir d’une photographie, d’un dessin, d’une infographie, d’un pictogramme, etc.
Pas question de choisir une image qui ne soit pas libre de droits ! Vous irez donc faire des recherches thématiques sur le site pexels.com (qui effectue ses sélections sur plusieurs sites d’images en même temps). Vous pourrez aussi choisir une illustration dessinée sur la banque d’images Ouch.
Si vous êtes inspirés, vous pourrez prendre en main de formidables outils de de photomontage et d’assemblage de dessins tels que Photo Creator et Vector Creator. Vous produirez alors sans difficulté des illustrations personnalisées correspondant parfaitement à nos sujets… et cela sans débourser un centime ni même devoir vous inscrire sur une plateforme Web.
Si vous souhaitez illustrer votre texte avec des icônes, vous en trouverez un grand nombre sur icones8.fr ou flaticon.com. Vous n’avez que l’embarras du choix (gratuit et payant…) !
➜ Collectez ou produisez des images susceptibles d’illustrer votre texte avec pertinence. Partez du principe que pour une image publiée il faut en collecter 4, afin de faire le meilleur choix possible ! Placez le fruit de votre collecte dans un dossier que vous nommerez « img ».
Il n’est pas défendu d’utiliser Photoshop ou Illustrator. Souvenez-vous cependant que les images matricielles destinées à la publication en ligne sont en RVB et que leur formats d’enregistrement sont le JPG (ou JPEG), le PNG ou le GIF (pas de PSD, de TIF ou TIFF !). Pour les images vectorielles, leur format d’enregistrement est uniquement le SVG (pas de AI ou d’EPS !)
Intégrer une image
L’intégration d’une image s’effectue en paramétrant correctement la balise autofermante <img>. Il est nécessaire d’une part de préciser dans la balise <img> quelle est la source de l’image (indiquer au navigateur où se trouve l’image à afficher). D’autre part, il est obligatoire de formuler un texte alternatif (toujours dans la balise <img>).
Le texte alternatif sert à trois choses :
décrire l’image aux moteurs de recherche
offrir une alternative d’affichage si le navigateur ne parvient pas à afficher l’image
permettre aux robots lecteurs utilisés par les personnes malvoyantes de leur décrire l’image
Ce rouage essentiel du référencement des images est donc un exercice supplémentaire de rédaction. Vous en saurez davantage en consultant le dernier chapitre du cours RWRN.
➜ Examinez ci-dessous le code d’intégration de l’image “woman-typing-writing-1800×1200.jpg”. Dans quel dossier est-elle placée ? Où se trouve ce dossier ?
Vous noterez que l’image est nommée sans utilisation de lettre majuscule ni de chiffre en début d’intitulé, sans utilisation de point ailleurs que devant l’extension, sans lettre accentuée ni espace.
Par ailleurs, les dimensions de l’image, en pixels, sont indiquées en fin d’intitulé de l’image. Cela s’avère très utile en design pour le Web, vous le découvrirez très vite 😉
Nous allons voir dans ce cours comment se structure simplement une page HTML. Nous collecterons des informations sur le sujet. Nous verrons ensuite comment créer une page Web en récupérant un code simple et en l’intégrant dans un fichier avec l’éditeur de codeBrackets. Je vous inviterai alors à personnaliser le contenu rédactionnel du code source.
La structure élémentaire d’une page Web
Voici deux schémas présentant la structure élémentaire d’une page HTML (on dit aussi page Web…). Le premier est un schéma en arbre, le second un schéma en cadres imbriqués. Dans la « vraie vie », il s’agit de lignes de code positionnées les unes sous les autres.
Dans le second schéma, les textes sont en anglais. Le premier texte (Page title) est placé entre <title> et </title>, deux balises HTML indiquant au navigateur où commence et où se termine le titre de la page. Ce titre de page s’affiche dans l’onglet de la fenêtre active. Attention à ne pas confondre le titre de la page avec le titre des contenus de la page (entre balise <h1> et </h1>.
Le titre de la page est placé dans la tête du code source (à ne pas confondre avec la têtière qui se trouve généralement en tête de page affichée dans le navigateur…). La tête de code source est délimitée par les balises <head> et </head>.
Le titre des contenus de la page (le GRAND titre devant sauter aux yeux du lecteur…) se trouve positionné entre les balises <h1> et </h1>, au tout début de la boîte délimitée par <body> et </body>. Dans le schéma en boîte présenté plus haut ce titre est en anglais (This is a heading), autrement dit “Ceci est un titre”.
Sous le grand titre, nommé aussi “titre de niveau 1” (header one), se trouvent deux paragraphes. Je vous montre maintenant ce que cela donnerait sous la forme « code source »… après traduction des textes en français (pour les balises elles-même : défense absolue de les traduire, les navigateurs ne comprennent pas le français…). Les lignes roses montrent les boîtes ou cadres imbriqués.
Je vous montre un gabarit de ce type, disponible sur le site w3schools.com. N’hésitez pas à demander la traduction automatique de ce site. Il y a dans le menu du site de w3schools (un site norvégien) une icône en forme de planète qui permet d’activer la traduction automatique du site dans la langue de son choix.
Les flèches bleues montrent les éléments HTML déjà rencontrés dans la structure élémentaire étudiée plus haut.
En complément de ce cours, j’ai mis en ligne un autre cours dans lequel j’aborde de manière un peu différente le même sujet (la structure HTML élémentaire). Le cours s’intitule Manipuler le code source avec Brackets et propose d’examiner le code source d’une page Web consacrée aux pangrammes pour se familiariser avec le langage HTML.
J’ai réalisé une courte BD en ligne pour insister sur les fonctions du “head” et du “body”, de façon plus “cool”…
➜ Vous pouvez aussi visionner la courte vidéo du cours consacré à la structure HTML sur apprendre-a-coder.com
En savoir plus à ce sujet (en bonus…)
Référence incontournable en matière de documentation sur les langage de codage pour le Web, le site de la fondation Mozilla, MDN web docs, est LE site où tout est dit. On y trouve un tutoriel intitulé Écrire une simple page HTML. Plus dans le sujet tu meurs… mais vous verrez que les choses se compliquent assez vite.
Le site w3schools.com, que nous venons de mentionner plus haut, permet d’apprendre seul le HTML et de nombreux autres langages de codage. Un des points fort de ce site est son outil de test du code ou bac à sable (bouton « Try it Yourself » ou « Essayez vous-même« ).
Pour les plus intéressés, je recommande vivement de s’inscrire aux cours gratuits decodecademy.com. Le cours de HTML est très bien conçu.
Pour les inconditionnels de la vidéo, il existe de bonnes chaînes YouTube consacrées au sujet. Ma préférence va vers le site apprendre-a-coder.com, même si on n’est pas sur YouTube… et que la rigueur n’est pas toujours au rendez-vous.
Vous ne serez pas perdu, car l’auteur utilise Brackets (mais sans les extensions qui vont bien, nous y reviendrons). Il y existe aussi une série de vidéos payantes sur le site udemy.com (mais avec des échantillons gratuits qui traitent des bonnes raisons d’apprendre à coder). Pour les plus exigeants, allez plutôt voir du côté de grafikart.fr, c’est gratuit mais c’est plus professionnel… et donc un peu plus difficile !
Pour éditer le code source d’une page Web, je vous recommande l’utilisation d’un éditeur de code nommé Brackets.
Il est téléchargeable gratuitement et sans limitation sur le site brackets.io. Brackets fonctionne sous Windows, MacOs et Linux. Ceux d’entre vous qui utilisent un PC prêté par le GRETA disposent de Brackets parmi les programmes installés sur le portable.
Si vous avez l’habitude d’utiliser un autre éditeur de code, vous pouvez l’utiliser sans que cela gêne votre apprentissage. Vous trouverez une liste des principaux éditeurs de code sur de nombreux sites dont le BlogDuWebdesign.
Je vous propose, avant d’aller plus loin avec Brackets, de personnaliser cet éditeur de code. En lui ajoutant qualques extensions, Brackets va se révéler très pratique pour commencer à manipuler le code source d’une page HTML, une feuille de style CSS et plus tard un script JS.
Pour savoir comment ajouter des fonctionnalités à Brackets, consultez la fiche extensions-brackets.
Infos sur Brackets
Premiers pas avec Brackets, texte affiché à l’ouverture de l’éditeur, mis en ligne sur graphizm.fr
Bienvenue chez Brackets, un article à traduire en français avec Chrome, sur github.com
L’aide de Brackets, à traduire automatiquement si nécessaire, toujours sur github.com
Découvrir les usages de Brackets en vidéo avec grafikart.fr (très complet)
La même vidéo est intégrée dans un article de jenseign.com, un site consacré à l’apprentissage du HTML-CSS (niveau avancé).
Voici un petit TP pour manipuler le code source d’un site Web. Vous allez personnaliser une page HTML qui fonctionne comme la page index.html du site “Pangrammes” étudiée brièvement sur graphizm.fr/fcs/manipulation-code-source.
Le fonctionnement du site
Le type de site que vous allez manipuler est composée d’une seule page Web. En cliquant sur le bouton “EN SAVOIR PLUS”, on ouvre ce qui s’appelle une fenêtre modale. Il est possible de refermer cette fenêtre en cliquant sur la croix placée en haut à droite de la fenêtre modale. Vous avez certainement déjà rencontré ce type d’animation lors de vos navigations sur le Web.
Le modèle (ou template) de ce site a été téléchargé sur le site codyhouse.co, a une époque où de tels modules étaient téléchargeables librement. On y trouvait plein de gabarits à personnaliser.
➜ Pour réaliser l’exercice sans avoir à copier-coller le code de tous les fichiers qui composent le site « ma-couleur », je vous invite à télécharger le site complet sous la forme d’un fichier zippé.
➜ Avec l’éditeur de code de votre choix,ouvrez le dossier « ma-couleur » (Fichier > Ouvrir un dossier > sélectionner le dossier > Ouvrir). Éditez le fichier « index.html » et prenez vos repères en vous rappelant ce que vous avez vu précédemment sur graphizm.fr/fcs/manipulation-code-source.
Des consignes plus détaillées vous sont données dans le fichier « index.html », elles sont visibles en pied de page après avoir accédé au texte sur la couleur bleue.
Dans ce cours vous allez apprendre à identifier les composantes d’un site Web statique.
Identifier le fichier index.html
Tous les sites Web ont une page d’accueil. Cette page est généralement nommée index.html. On désigne généralement un fichier enregistré au format HTML sous le nom de page HTML ou page Web.
Une page Web est donc un document enregistré au format HTML dans lequel des informations de plusieurs types sont codées. On trouve ainsi dans une page HTML des informations se rapportant directement ou indirectement aux fichiers suivants :
la ou les feuille(s) de style associées
la ou les images insérée(s)
le ou les script(s) utilisé(s)
La ou Les feuilles de style se rapportent au codage de l’apparence d’un site. Le ou les scripts se rapportent au codage de l’animation des composants d’un site.
Chacun de ces fichier n’est pas obligatoirement associé à une page Web mais la plupart des pages publiées en intègrent un ou plusieurs (notamment les 2 premiers).
Repérer le contenu d’un dossier de site
Pour organiser l’édition et la publication des pages Web, on place de préférence ces fichiers dans des dossiers nommés de façon explicite. On utilise le plus souvent les dossiers suivants :
un dossier nommé css (ou styles) pour y placer les feuilles de style au format .css
un dossier nommé img (ou images) pour y placer les images aux formats .jpg, .png ou .gif
un dossier nommé js (ou scripts) pour y placer les scripts au format .js
Tous ces dossiers sont ensuite placés dans un dossier qu’on nomme communément dossier du site (pour le désigner entre designers et développeurs). Ce dossier porte toutefois un nom (informatiquement) et ce nom est utilisé dans l’URL du site en question.
Ce sont les noms de ces dossiers de site que vous retrouvez au bout des URL, lors de vos navigations.
Par exemple, le documents que vous allez ouvrir dans un instant est accessible à cette adresse : http://graphizm.fr/contenu-dossier-page-web/
Quel est le nom du dossier dans lequel ce document se trouve placé ?
Quel est le nom du fichier html que lit votre navigateur pour vous permettre de prendre connaissance du contenu du document ?
➜ Manipulez le document ci-dessous pour découvrir plus de détails au sujet du contenu d’un site Web.
Si d’autres ressources doivent être associées à une page Web, il est possible de créer d’autres dossiers pour les classer convenablement. Il est ainsi possible d’utiliser un dossier fonts ou fontes pour y placer des polices de caractères.
➜Affichez le code source du document ci-dessus et répondez aux questions suivantes :
Quel est le nom du dossier dans lequel se trouve le fichier intitulé style.css?
Quel est le numéro de la ligne où se trouve l’indicationde la réponse à la question précédente ?
Quel est le nom du dossier dans lequel se trouve le fichier intitulé index.js?
Quel est le numéro de la ligne où se trouve l’indicationde la réponse à la question précédente ?
Le type de page Web dont il est question ici est nommée page Web “statique” et le site qu’elle présente est nommé ”site statique”.
Cela ne signifie pas que le contenu de la page ne bouge pas. Ils s’agit d’une page HTML dont le contenu ne varie pas en fonction de la demande de l’utilisateur. On oppose les pages statiques aux pages dynamiques.
Faites une recherche sur le Web en utilisant la requête suivante : page web statique vs page web dynamique. Cela vous amènera très probablement à éclaircir plusieurs autres concepts en rapport avec la publication Web.
Manipuler le code source
Pour examiner le contenu d’un dossier de site Web, téléchargez le fichier pangrammes.zip, décompressez-le et examinez son contenu.
Comment organiser ses fichiers sur apprendre-html-et-css.com . Les nombreuses fautes d’orthographe présentes sur les pages de ce site nous montrent l’importance d’une relecture des textes avant publication…
