Catégories
CM FCS FCS1-cours

L’architecture client-serveur

En complément du cours sur le fonctionnement du Web, voici une présentation très simple de l’architecture client-serveur dans le contexte de la création et de l’utilisation de sites Web.

Que sont les clients et les serveurs ?

Pour qu’il y ait un serveur, il doit y avoir au moins deux ordinateurs, l’un qui sert (le serveur), l’autre qui reçoit (le client). Un serveur web est en fait un programme disponible en tout temps (ou presque) qui attend qu’un internaute-client s’y branche avec son navigateur pour accéder à de l’information placée sur le serveur. Le serveur Web et le navigateur peuvent « se parler » grâce au protocole HTTP. Bien que cela ne soit pas l’usage, les navigateurs (nommés aussi fureteurs au Québec…) peuvent être désignés par l’expression “client HTTP”.

Un client est d’abord actif (ou maître), il envoie des requêtes au serveur, il attend et reçoit ensuite les réponses du serveur.
Un serveur est initialement passif, il attend, il est à l’écoute, prêt à répondre aux requêtes envoyées par des clients. Dès qu’une requête lui parvient, il la traite et envoie une réponse.

Dans le schéma présenté plus haut, seul un logiciel est cité, côté client ou côté serveur, utilisant le protocole HTTP ou le protocole FTP. Il en existe plusieurs autres dans chaque catégorie. Faites des recherches sur le Web pour découvrir ceux que vous ne connaissez pas.

Voir une animation sur le rapport client-serveur

L’Université de Lille propose une courte animation résumant de manière très clair le rôle du serveur et celui du client, dans le secteur du Web…

HTTP et FTP

Pour dialoguer l’un avec l’autre, le client et le serveur doivent bien sûr utiliser le même protocole de communication.

Dans le cas de la consultation de sites en lignes, le protocole utilisé est le protocole HTTP (HyperText Transfert Protocol ou Protocole de Transfert HyperTexte, en français).

File Transfer Protocol (Protocole de Transfert de Fichier), ou FTP, est un protocole de communication destiné au partage de fichiers d’un ordinateur vers un autre, sur un réseau TCP/IP. TCP/IP est la suite des protocoles utilisés pour faire fonctionner Internet.

En savoir plus

Vous trouverez des informations plus détaillées sur ces sujets sur le document suivant :

http://projet.eu.org/pedago/sin/ISN/8-client_serveur.pdf

Pour les plus curieux, l’auteur du pdf ci-dessus propose d’autres ressources à cette adresse :

http://projet.eu.org/pedago/sin/

Sur le site malekal.com, vous trouverez des informations complémentaires (en naviguant dans les rubriques du site, vous trouverez de nombreuses autres informations sur les réseaux et leur configuration.)

https://www.malekal.com/le-modele-ou-architecture-client-serveur/

Un glossaire du Web est consultable à l’adresse suivante :

http://mapageweb.umontreal.ca/lerouxpa/internet/xgloss.htm

Ce glossaire a plus de 20 ans et il a été rédigé par un enseignant québécois. Il reste d’actualité sur tous les concepts fondamentaux du fonctionnement d’Internet. Il vous permet par ailleurs de voir à quoi ressemblait un site dans les années 90 !

Exercice

Téléchargez et imprimez l’image ci-dessous. Complétez le schéma en remplissant de mémoire les différent cadres. Inscrivez en pied de l’image la signification de HTTP et FTP.

Catégories
CM FCS FCS1-cours

Processus de design Web

Dans ce cours, vous allez aborder le processus de design d’un site Web en vous basant sur le processus de design d’un imprimé vu en cours de Com-Créa (G-P-C-R-U).

Les étapes du processus

La gestion de projet demeure au centre du cycle des opérations de webdesign. Le cœur de la phase de préparation consiste en une série d’opérations de marketing, nommé dans ce contexte webmarketing. L’opération suivante, la production des contenus, est à la fois la dernière opération de préparation et la première opération de conception.

Au cœur de la phase conception se place la conception UX et UI (User eXperience et User Interface). La dernière étape de la conception (et première étape de la réalisation) est l’intégration des contenus dans le prototype mis au point par les concepteurs UX et UI.

Au cœur de la phase de réalisation se situe le développement des fonctionalités du site puis leur implémentation dans le code du site. L’étape suivante est la mise en ligne du site en s’assurant que tout fonctionne.

En phase d’utilisation, la mise en ligne étant effectuée, le référencement du site et sa promotion sur les réseaux sociaux se concrétise et se vérifie. La dernière phase consiste en une analyse des statistiques (données d’utilisation du site) avec une maintenance ou mise à jour en conséquence.

Activités

1 – Complétion de l’infographie

Téléchargez et imprimez l’image ci-dessous. Complétez-la de mémoire en inscrivant les légendes qui accompagnent les visuels.

2 – Redistribution des tâches

Effectuez des captures d’écran du sommaire du livre d’Émilie Court intitulé Créer son site Web – Du projet à la réalisation (cliquer sur le bouton “Feuilleter” pour voir le contenu à utiliser).

Imprimez les captures d’écrans sur une page A4 puis découpez les différentes parties du sommaire.

Il s’agit maintenant de répartir dans les 9 cases du schéma vu précédemment les opérations découpées (autrement dit, de refaire le sommaire du livre…). Pour cela, collez les différentes parties sur une feuille A3 (orientation paysage) divisée en 9 cases (3X3).

➜ Vous allez vous rendre compte qu’une des cases du schéma procédural ne peut recevoir aucune des opérations mentionnées dans l’ouvrage d’Émilie Court. Une étape clé a été oubliée (aucun livre n’est parfait…) ! Vous complèterez donc vous-même cette case correspondant à une étape importante du processus étudié.

Catégories
CM 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.

Netboard exporte en pdf le contenu des sites. Le pdf est structuré par rubrique en fonction des onglets choisis. La mise en page est très propre.

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.

Utiliser StackEdit

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 éditeurs Markdown

Autres éditeurs Markdown en ligne :

Autres éditeurs Markdown hors ligne (installation sur PC, Mac, Linux)

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. Dans le cadre de la formation FCS, je vous propose d’apprendre à utiliser Bludit.

Pour en apprendre davantage sur les CMS sans base de données, 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 second 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
CM 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

L’analogie de la maison et du magasin

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) 😉

L’analogie du serveur et du client dans un bar

Une autre analogie permet de mieux comprendre l’interaction entre postes serveurs et postes clients. Il s’agit de comparer les serveurs informatiques à des serveurs travaillant dans un bar (ou une brasserie) et les clients informatiques à des clients du même bar.

Tout cela est très clairement expliqué dans la vidéo ci-dessous.

Le modèle client-serveur – Université de Lille

Faites une sketchnote en vous inspirant de l’analogie développée dans la vidéo ci-dessus en notant simplement les éléments essentiels de l’analogie

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 deuxième vidéo met en scène un utilisateur dubitatif après avoir tenté de retrouver son site Web sur un moteur de recherche. Il appelle la Hot Line pour tenter de comprendre ce qui lui arrive… Les explications sont claires et le ton plutôt humoristique !

Vidéo de 5 minutes et 18 secondes

La stroisième 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.

Un rapide résumé de l’histoire du Web est présenté sur la vidéo ci-dessous.

L’histoire du Web de 1965 à 2017… en 2 min 39 !

Vous pouvez écouter un conférencier raconter l’histoire du système Linux, en cinq épisodes, à cette adresse : http://projet.eu.org/pedago/sin/NSI/videos/linux_chronique/

Autres 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éé par HTML5UP sous la forme d’un site statique HTML-CSS

➜ Pour ce cours, je vous invite à activer Massively sur votre site Bludit. Vous allez ensuite apprendre à le personnaliser pour créer soit votre portfolio, soit une maquette de site pour le client pour lequel vous avez déjà travaillé lors du TP2.

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 (CCP-3 du Titre Pro IMeP).

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. Cette image s’accroche est associée à un lien vers l’article concerné. Le lien vers le dernier article publié occupe toute la largeur de la page d’accueil, avec son image d’accroche bien visible, sous le menu. Les liens vers les autres articles se répartissent sur une grille de 2 colonnes, sous le dernier article publié (ou l’article épinglé…).

Une couleur de focus est visible au survol des boutons et des titres d’article. Cette couleur de focus doit permettre la lisibilité des textes sur fond sombre (l’image de fond) et sur blanc (contenant des articles). Cette couleur et l’image de fond fondent le style visuel d’un site utilisant le thème Massively.

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) du 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 alors 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 est 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

Optimiser l’effet produit par la première 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.

Épingler un article et modifier sa 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.

Dans notre cas, je vous propose d’épingler l’article dont l’image d’accroche est une reprise de l’image de fond (avec ou sans logo superposé).

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

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.

Le cas se présente par exemple si vous copiez du faux texte à partir du site https://hipsum.co/.

Cela vient du fait qu’en copiant le texte dans le presse-papier, vous copiez 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 de la symbolique du thème traité. Vous devez surtout veiller à ce que cette couleur autorise la lecture des textes sur fond sombre ou sur fond clair.

Choisir une couleur de valeur moyenne

Le moyen le plus simple pour sélectionner une couleur de valeur moyenne est d’utiliser le site hsluv.org. En effet, le sélecteur de couleur s’ouvre par défaut sur un rouge avec une luminosité de 50%. Il suffit donc de déplacer le petit cercle blanc situé sur le côté droit du trapèze des couleurs pour modifier la teinte et la saturation de la couleur recherchée.

D’autres priorités que l’optimisation du contraste de luminosité peuvent vous amener à choisir des couleurs plus claires ou plus foncées. Veillez toutefois à ce que le ratio de contraste sur le blanc ou le noir soit au moins supérieur à 3 (norme d’accessibilité AA-Large).

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.

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.

Personnaliser le thème Massively (niveau avancé)

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 constatez que Massively permet l’usage d’une grille adaptative. Vous constatez aussi que le CMS propose une classe pour améliorer le comportement des images sur petits écrans. Bludit met également à notre disposition des boutons de toutes sortes, 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…

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"

Changer l’ordre des onglets du menu

Le titre des pages statiques est automatiquement utilisé en tant qu’intitulé d’onglet dans le menu du site. L’ordre des pages peut être modifié en attribuant une position à chacune d’entre elles. Pour cela, il suffit de paramétrer le champ “Position” dans les options de la page (onglet “avancé”).

Modifier les icônes des réseaux sociaux dans le menu du site

Pour modifier les icônes de lien vers les réseaux sociaux, il est nécessaire de se rendre dans les réglages généraux du site. Personnalisez les adresses des différents réseaux proposés. L’icône du réseau disposant d’une adresse valide s’affichera automatiquement.

Il manque la plateforme Pinterest dans la liste des réseaux proposé par Bludit et Massively.

Un plugin payant à 1 dollar permet de remédier à cette absence : Social Media Suite.

Dans un portfolio, il est possible de créer un bouton (voir plus bas), dans le corps d’une page, pour conduire les lecteurs vers vos tableaux Pinterest. Cela a du sens, dans un contexte de conception graphique !

Modifier la favicon du site

Pour modifier la favicon du site, créez un dossier « img » dans le dossier du thème. Placer dans le dossier « img » le fichier « favicon.png ».

La favicon du CMS Bludit fait 32 x 32 pixels.

Il se peut que le navigateur refuse d’afficher la favicon dans un premier temps. Testez le résultat avec un autre navigateur ou sur un autre appareil.

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 »
Apparence des boutons dans l’éditeur de pages de Bludit
Apparence des boutons dans les pages du site

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.

Liste et noms de toutes les icônes intégrables dans un site Massively

Personnaliser la page d’erreur 404

Dans Bludit, pour modifier la page d’erreur 404 (page not found), il est nécessaire de créer une nouvelle page statique puis, dans les réglages généraux, de la paramétrer pour qu’elle devienne la page d’erreur de navigation du site.

Un problème surgit cependant dans la version 3 du CMS : cette nouvelle page statique apparaît dans le menu et Bludit 3 ne permet pas de masquer une page dans le menu via le tableau de bord.

Une astuce consiste à paramétrer cette page en tant que brouillon. Pour cela il suffit de cliquer sur “PUBLICATION”, à droite du bouton “Aperçu”, en tête de la page d’édition. Le mot “BROUILLON” s’affiche alors (voir ci-dessous).

Personnaliser davantage le thème Massively (niveau expert)

Utiliser les classes incluses dans les CSS du thème pour afficher une grille

Le thème Massively prévoit l’utilisation d’une grille Flexbox basée sur 12 colonnes. Plusieurs largeurs de fenêtre de navigation (avec points de ruptures correspondants) sont envisagées :

  • xlarge (entre 1141 px et 1680 px)
  • large (entre 981 et 1140 px)
  • medium (entre 737 et 980 px)
  • small (entre 481 et 736 px)
  • xsmall (entre 321 et 480 px)
  • xxsmall (entre 0 et 320 px)

Chaque rangée (row) est constituée de 12 colonnes. Les colonnes de la grille sont paramétrées pour occuper autant de colonnes que nécessaire (col-1 à col-12).

Les concepteurs du thème proposent de créer des grille en paramétrant une seule rangée globale puis de créer des rangées apparentes en utilisant le code suivant : <!-- break -->.

Voici un exemple de code pour mettre en place une grille de 2 rangées apparentes de 2 et 3 colonnes. Ce dimensionnement est valable sur tous les écrans sauf sur les petits écrans où chaque colonne est paramétrée pour occuper toute la place disponible (col-12-small).

<div class="row gtr-150 gtr-uniform" style="line-height: 1.4; min-height: 100px;">
<div class="col-6 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">1re rangée • 1re colonne 50% (100% sur petits écrans)</p>
</div>
<div class="col-6 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">1re rangée • 2e colonne 50% (100% sur petits écrans)</p>
</div>
<!-- break -->
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 1re colonne 33,33% (100% sur petits écrans)</p>
</div>
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 2e colonne 33,33% (100% sur petits écrans)</p>
</div>
<div class="col-4 col-12-small"><img class="image fit" src="https://via.placeholder.com/300" alt="">
<p style="text-align: center;">2e rangée • 3e colonne 33,33% (100% sur petits écrans)</p>
</div>
</div>

➜ Vous pouvez visualisez cette grille à cette adresse : http://comptetestfpw.alwaysdata.net/bludit-massively/grilles-responsives#main

Voici ce à quoi ressemble le code source de la grille dans un éditeur de texte avec coloration syntaxique :

Attention, pour insérer les images dans la grille importée dans une page : cliquez sur le cadre gris puis sur le bouton “Images”, en haut à droite, sélectionner l’image et validez.

N’oubliez pas de rajouter class=“image-fit” dans le code de chaque image importée (Bludit retire cette classe au moment de la mise à jour du contenu).

Les classes contenant l’expression gtr concernent le paramétrage des gouttières (gutters, en anglais). Les largeurs de gouttières disponibles s’étagent ainsi : gtr-0, gtr-25, gtr-50, gtr-150 et gtr-200.


Vous disposez désormais de nombreux éléments pour personnaliser le thème Massively. Vous découvrirez certainement d’autres moyen d’optimiser votre site en appui sur ce thème. Je vous souhaite beaucoup de réussite dans votre projet éditorial 😉

La version 4 de Bludit apportera son lot de nouveauté courant 2022.

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

Mega Creator : outil de montage photo réaliste intuitif et très performant et d’illustrations dessinées très stylisées (contenus 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 webdesign avec w3.css

Le site w3schools permettait 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é.

Aujourd’hui, les exercices effectués sont sauvegardés en tant que page HTML. Pour retrouver la dynamique de l’édition dans le bac à sable Tryit, il est nécessaire de copier le code source de l’exercice et de le coller dans l’espace d’édition de n’importe quel exercice Tryit (ou dans un éditeur de code comme VCS ou Brackets).

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

Il s’agit ici d’inverser l’ordre des nuances de l’échelle des tons. Un défi supplémentaire consiste à effectuer ce changement avec le minimum de modifications du code source.

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

La sauvegarde de la première étape a été faite sous forme de fichier HTML, sur mon « space » w3schools. Il est donc nécessaire de copier le code source et de le collet dans un éditeur de code ou dans un autre exercice mis en œuvre sur Tryit.

https://dendrographe.w3spaces.com/maquettage-avec-cellules.html

Étape 2

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

Étape 3

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

Étape 4

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

La typographie

Pages de référence :
https://www.w3schools.com/w3css/w3css_defaults.asp
https://www.w3schools.com/w3css/w3css_text.asp
https://www.w3schools.com/w3css/w3css_fonts.asp

Utilisation des classes de fontes de w3.css

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

Utilisation d’autres polices de caractères – Safe fonts

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

Utilisation d’autres polices de caractères – Google Fonts

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

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.

page d'accueil du gabarit starter proposé par w3schools.com et personnalisé par Yves Goguely

Personnaliser la couleur des pages du gabarit

Chaque page du site est liée à un thème chromatique. L’appel du thème est effectué dans le “head” de la page, en liant la page à une feuille de style CSS placée dans le dossier “theme-color”.

➜ Modifiez le choix des thèmes chromatiques pour commencer la personnalisation du gabarit. Vous pourrez toujours revenir sur votre choix plus tard.

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

En commençant par la page 3, 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 !

Exemple d’image intégrée dans la page 3

➜ 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 peut-être envisagé que les images ou les textes prennent plus de place

➜ Je vous propose d’opter pour w3-third et w3-twothird plutôt que le w3-half proposé dans le gabarits. Vous savez maintenant où insérer ces classes 😉

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 puis optimiser l’appel des fontes et choisir une autre famille typographique..

Allez ensuite sur Google Font et sélectionnez toutes les fontes de Overpass. Récupérez le @import dans la partie droite et insérez-le dans la feuille de style personnalisée.

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 :