A l’intérieur de la muraille

Cette page explique comment le site est construit

Image réalisé par ChatGpt avec le prompt: « Dessine moi un tableau montrant le plus esthétique ment possible la conception d’un site internet »

La genèse du Site

Michel Ange: La création d’Adam (achevé en 1511)

Lorsqu’il y a quelques années nous avons décidé ma compagne et moi de traverser tous les pays des amériques, j’ai cherché un outils qui me permettent facilement d’organiser mes documents et mes réflexions sur ce voyage, j’ai pensé utiliser Google Sites qui permettait de créer gratuitement des sites Internet. Ce fut un excellent choix, car cela a permis tout au long du voyage de tenir informé nos proches de notre aventure.
Malheureusement, Google a profondément modifié ce site qui existe toujours: De la neige au soleil et qui sera un jour transféré dans ce site.

L’idée de refaire un site était toujours présent, mais d’une part je ne voulais pas retomber dans les travers précédent et d’autre part comme vous pouvez le constater dans ce site j’ai beaucoup d’autres activités qui m’ont accaparées.

Le choix du code

La très grande majorité des sites Internet sont écrits en PHP qui est un langage de programmation libre qui comme tout langage de programmation demande une courbe d’apprentissage assez cnséquente. Il n’est pas « WYSIWYG » (acronyme de la locution anglaise « What You See Is What You Get », signifiant littéralement en français « ce que vous voyez est ce que vous obtenez.)

Heireusement il existe des logiciels qui peuvent sans écrire un seule ligne de code permettent de réaliser un site Internet. Il s’agit de ce que l’on appelle un CMS (Système de gestion de contenu) un programme informatique permettant de créer un site Internet, un blog ou encore un site de vente en ligne. Un CMS permet, entre autres, de travailler à plusieurs sur un même document; de séparer les opérations de gestion de la forme et du contenu ; de structurer le contenu (FAQ, documents, blogues, forums, etc.) ; de hiérarchiser les utilisateurs et de leur attribuer des permissions (anonyme, administrateur, contributeur, etc.). Il fournit également une chaîne de publication (workflow), offrant par exemple la possibilité de mettre en ligne le contenu des documents. Enfin, il est possible de gérer tout type de documents (bureautique, audio, vidéo…) et d’ajouter des fonctionnalités par l’intermédiaire de plugins. Il en existe plusieurs alors:

Quel est le meilleur logiciel de création de site Web ? En cliquant sur le lien précédent vous aurez une comparaison intéressante des différents CMS. Pour ma part j’ai choisis WordPress.org logo noir et pas WordPress.com logo bleu. Le premier est une association sans but lucratif qui développe un produit complet, le deuxième est une société à but lucratif qui vous met au départ gratuitement un WordPress dépouillé ainsi que l’achat du nom du site et son hébergement pour vous vendre par la suite ce qui vous auriez eu gratuitement avec WordPress.org. Mais pour avoir la conscience tranquille il finançait en partie WordPress.org. Comment est-ce possible. C’est très simple, un des fondateurs de WordPress.org est le propriétaire de WordfPress.com.

Pourquoi j’ai choisi WordPress, aujourd’hui dans sa version 6.7.2, et qui passera en 6.8 le 15 avril 2025 , avec son thème Twenty Twenty Five parce que c’est le CMS qui est utilisé pour faire plus de la moitié des sites Internet dans le monde et qu’il dispose de nombreuses communautés de bénévoles très active dont une est francophone.

Conception sites web

Les choix techniques

Ayant un NAS (Serveur de stockage en réseau) Synology dont j’étais très content et après avoir étudié les avantages et inconvénients d’héberger mon site sur mon NAS, j’ai décidé de tenter l’hébergement à domicile.

Comme je voulais avoir un temps d’accès rapide j’ai upgrader mon réseau de 1 Gigabit/s à 10 et :

• Changer ma Box
• Acheter un nouveau NAS équipé d’une carte 10 gigabits et de 20 giga de RAM
• Acheter un Switch 10 giga

sans penser à la consommation que cela représentait.
Puis j’ai sous-estimé la difficulté d’implanter correctement WordPres.org, c’est à dire à la dernière version au lieu d’utiliser le paquet Synology qui n’est jamais à la dernière version.

Cela s’est révélé beaucoup plus complexe que ce que je pensais et j’ai passé une annonce dans codeur.com (la meilleur Place de marché en ligne de travailleurs indépendants sur le sujet) pour avoir de l’aide et j’ai écrit à François Xavier le créateur et principal animateur du site Cachem orienté NAS et connaissant très bien ceux de Synology pour savoir s’il ne connaissait pas quelqu’un pour me venir en aide.

Sa réponse a été celle-ci:

« L’hébergement d’un site Web sur un NAS n’est pas une bonne idée, même si c’est possible.
Personnellement, je préfère passer par Infomaniak et O2Switch pour l’hébergement de mes sites.
OVH n’est pas mal, même si je trouve qu’il est limité. Il est accessible en termes de tarif.
Je comprends que les sites sont installés et les noms de domaine fonctionnent. Pour les certificats SSL (comme Let’s Encrypt), il faut que les ports 80 et 443 soient ouverts sur votre Box/routeur et sur le NAS (si le pare-feu est actif).
S’il vous faut un environnement de travail pour développer/tester un site Web, le NAS est bien. Dès qu’il faut le mettre en ligne, je recommande d’utiliser un vrai hébergeur. Surtout si c’est une boutique en ligne…
Les hébergeurs ont des systèmes de protection robustes et offrent de nombreux services complémentaires que je déconseille sur un NAS comme mettre un serveur Mail.« 

Parallèlement j’ai reçu ma facture d’électricité et je me suis aperçut qu’un réseau 10 giga bit comprenant une Box, un Switch, un NAS fonctionnant 24h / 24 heures coutaient en consommation électrique plus que le prix d’un hébergement.

Alors je n’ai pas fais de l’Escalade d’engagement appelé trivialement « Biais d’investissement » qui décrit un certain type de comportement humain : un groupe ou un individu continue de prendre des décisions allant dans le sens d’une décision initiale, et ce, même si cette décision initiale a conduit à un échec.

Une partie de ce site d’ailleurs est consacré au biais de raisonnement car il sagit de murailles qui nous empêchent de raisonner sainement.

A priori photo des serveurs o2Switch emprunté à anthdesign

Et j’ai pris o2Switch comme hébergeur car:

• Il est ergonomique
• Il est réactif et en français
• Il est bon marché (Tout du moins avant son augmentation récente de prix)
• Ses débits sont rapides

et je ne le regrette pas. En plus il existe de bons tutoriels pour le prendre en main, exemple: « Créez facilement votre site web et boîte mail avec o2switch (Tutoriel complet) » J’ai fait ce choix avant de lire ce comparatif extrêmement bien fait par un hébergeur français Lrob que je ne connaissais pas. Étant très satisfait d’o2Switch pour le moment, je relirai attentivement ce document avant le renouvellement de mon abonnement chez mon hébergeur actuel.
Ci-après un article publirédactionnel de Korben, un geek qui a un très bon site, sur Wp Tiger et l’interface technique d’o2switch.

Le public cible

• Les domaines scientifiques et techniques préférés des Français incluent notamment l’environnement, la santé, l’espace, et les nouvelles technologies
  • L’intelligence artificielle (IA) : Apprentissage automatique, chabots, assistants vocaux, reconnaissance d’image, etc.
  • Les technologies numériques : Internet des objets (IoT), blockchain, cybersécurité, cloud computing.
  • La robotique : Robots industriels, assistants domestiques, drones, etc.
  • La biotechnologie : Médecine personnalisée, thérapie génique, impression 3D d’organes.
  • L’exploration spatiale : Missions lunaires, exploration de Mars, satellites avancés.
  • Les énergies renouvelables : Panneaux solaires innovants, batteries à hydrogène, fusion nucléaire expérimentale.
  • La réalité virtuelle et augmentée : Applications dans le divertissement, l’éducation, la formation professionnelle.
• Certains sondages estiment que 50 à 60 % des Français adultes se disent concernés par L’intelligence artificielle
• Les bridgeurs : 2,5 millions de joueurs en France
• Le nombre de personnes intéressées par l’aquariophilie est estimé à 1,8 millions de personnes. Il est difficile de connaître le nombre d’aquariophiles récif aux en France, néanmoins, la présence active de communautés en ligne et l’existence d’associations dédiées suggèrent une communauté passionnée et engagée.
• 270.000 travaillent dans l’aéronautique et le spatial et un grand nombre de français semblent être intéressés par le Sujet
• La majorité des français sont favorables au nucléaire, je n’ai pas trouvé d’études qui ressente ceux qui sont intéressés.
• Le nombre de passionnés de trains et de modélisme ferroviaire est estimé à 300.000

La Charte Graphique

• Code typographique
  • Soulignement: réservé uniquement aux hyperliens
    • Texte en bleu pour les hyperliens internes
    • Texte en noir pour les hyperliens externes au site
  • Italique réservé aux citations
  • Identification des auteurs: (W) pour Wikipédia (SAP) pour Serpent à Plumes
• Polices de caractères
  • Le nouveau thème par défaut de WordPress comprend 9 polices (Marope, fira code), avec de nombreuses variantes. Celles-ci incluent des options peu connues comme Beiruti, Fira, Literata et Manrope. Elles sont associées deux par deux:
    • Beiruti
    • Fira Code
    • Literata
    • Marope
    • Playtipi
    • Roboto Slab
    • Volkorn
    • Ysabeau Office
  • Polices de caractères ajoutées donnatn l’impression que d’une écriture dans la langue du pays:
    • Indi
    • Germanique
  • Liste des polices à espacement fixe

Le parti pris linguistique

Utiliser les vrais mots même si ceux-ci ne sont pas très usités, avec un lien donnant leurs définitions.

Privilégier Wikipédia pour cela car cette encyclopédie est une source d’information précieuse

Utiliser le moins possible d’anglissime

La parti pris esthétique

Banksy : Well Hung Lover

Mettre un bandeau pour le menu; par exemple panoramique de mur ou murailles, remparts de Carcassonne ou Aigues-Mortes

Pages particulières l’Erreur HTTP 404 illustrée par le Grand Trou bleu du Bélize en anglais  » Great Blue Hole » qui me rappele de bons souvenir voir de « La neige au soleil« .

Comment aborder les sujets traités?

Cela n’a d’interet que si l’approche est original ou inhabituel par exemple pour:

• Autour de Vernoux -en-Vivarais présentation par distance en temps de Vernoux. Fiches classées alphabétiquement et rcherche par temps d’accès à partir de Vernoux, localisaton sur une carte ou plusieurs cartes en huit secteurs horaires avec regroupement 2 par 2 avec lieux cliquables.
• Bridge par système avec questions réponses classés alphabétiquement par thèmes

Ce que vous ne trouverez pas

Des adresses mails des auteurs, car certains robots  étant très friands d’adresses mails laissées à la vue de tous, nous ne voulons pas etre exposé à une vague de spam.

En réserves

• Agent intelligent
• Bullshit
• Citations
  • « Passer pour un idiot aux yeux d’un imbécile est une volupté de fin gourmet ». (Geoges Courteline)
• ”Musées scientifiques
• Œuf de Colomb

A faire:

• Une galerie de photos digne de ce nom
• Insérer un formulaire de contact ou de dialogue avec mes lecteurs.
• Installer d’autres polices de caractères et en particulier l’Indy
• Un fil d’Ariane
• Une sauvegarde régulière
• Un compteur de connexion
• une signature manuscrite pour le serpent à plumes
• Mettre en place un flux RSS
• Une connexion aux autres réseaux sociaux que ceux qui sont en gras et qui sont deja accessibles
  • Sous quel nom: Eric Piat, Le serpent à Plumes ou Passe Murailles? Je prendra celui des deux derniers qui n’est pas pris avec une préférence pour le Serpent à Plumes.
  • Quels réseaux sociaux utilisent mes sites appréciés?
    • Agence Ylo
    • Avions Légendaires utilise: facebook, X,
      Mastodon
    • Cachem utilise: facebook, X,Youtube,
      mastodon, Bluesky & un
      Flux RSS
    • Emmaüs Connect utilise facebook, Instagram,
      Linkedin, discover
    • Micro récif n’en utilse pas
    • Science étonnante utilise facebook, twiter,
      Youtube, LinkedIn & un Flux
      RSS
    • Tesla Mag utilise X, Instagram,Linkedin,
      WhatSapp.
    • Top déclaration n’en utilise pas
    • Train Consultant utilise: facebook, X, Dribbble
  • Les différents réseaux sociaux
    • Bluesky Social resemble à X
    • Dribbble Il sert de plate-forme de conception de portfolio, l’une des plus grandes plates-formes permettant aux concepteurs de partager leur travail en ligne. La société est entièrement isolée, sans siège social.
    • Facebook, Utile pour partager des articles de blog, créer un groupe autour de son hobby ou interagir avec des communautés existantes.
    • Instagram, pour partager des photos & des vidéos (1 à 2 minutes). Idéal si son hobby est visuel (photographie, dessin, cuisine, jardinage, etc.). Les reels et les stories permettent de capter rapidement l’attention.
    • LinkedIn S’il peut avoir une dimension professionnelle (photographie, écriture, développement web, etc.).
    • Mastodom est un réseau social et logiciel de microblogage auto-hébergé, libre, distribué et décentralisé via ActivityPub au sein du Fediverse. Il permet de partager des messages (ou « pouets » en français, posts ou toots dans d’autres langues, dont l’anglais), images, médias et autres contenus. C’est une alternative à Twitter.
    • Pinterest  propose à ses utilisateurs de se créer des collections d’images numériques qui ont attiré leur attention sur internet. Parfait pour les hobbies créatifs (DIY, design, mode, décoration, cuisine). C’est une bonne source de trafic vers un site web.
    • Reddit Intéressant si son hobby implique des discussions, de l’actualité ou du partage d’idées (écriture, technologie, sports, etc.).
    • Snapchat À l’origine, chaque photographie ou vidéo envoyée (« snap ») n’était visible par son destinataire que durant une à dix secondes, mais il est désormais possible d’envoyer des snaps sans limite de durée.
    • TikTok Pour du contenu court et engageant, surtout si on veut toucher un public plus jeune avec des vidéos dynamiques.
    • WhatsApp,
    • X (Twiter) Intéressant si son hobby implique des discussions, de l’actualité ou du partage d’idées (écriture, technologie, sports, etc.).
    • Youtube, Si son hobby se prête à des tutoriels, des démonstrations ou des partages d’expériences longues (gaming, bricolage, musique, etc.).
  • Utiliser les templates de Twenty twenty fine
• Modifier l’aspect des titres de page si c’est possible
• Mettre en place un flux RSS
• Mettre en place des mailings avec possibilité de se désabonner pour:
  • la famille élargie,
  • le cercle,
  • le bridge Olivier Barrillon,
  • le bridge de Melun,
  • le groupe de théâtre,
  • le groupe de marche,
  • les amis,
  • les gens dont j’ai le mail,
  • les inscrits volontaires
• Contacter les sites appréciés et ceux qui sont cités. Donc faire une liste des sites cités

• Versions
  • Passées: 1.0.0. Mise ne place du site fontionnel
  • Futurs:
    • 1.0.4 L’art autrement
    • 1.0.5 L’intelligence artificielle
    • 1.0.5 Les biais de raisonnement
    • 1.0.6 Le nucléaire
    • 1.0.7 L’aquarium récifal
    • 1.0.8 Quai Jacoutot
    • 1.0.7 Elle s’appelait Monique
    • 1.0.8 Une vie de bâtisseur
    • 1.0.9 Le train
    • 1.0.9. De la neige au soleil
    • 1.0.10 L’art urbain
    • 1.1.0 Sécurisation du Site
    • 1.2.0. Refonte graphique du site: Choix des polices de caractères, de la palette de couleurs, de la construction des pages, ETC.
    • 1.3.0. Optimiser le référencement
    • 1.4.0 Mise en place d’une interaction avec le lecteur, des cookies et de leurs gestins
    • 1.5.0 Mis en place de la rubrique précédente « A faire », de ce qui reste et qui n’a pas été mis en place au fil de l’eau. Peut-être passer le site en multilangues (Anglais & Espagnol)?
    • Une fois par an
      • Changer ou non d’hébergeur
      • Vérifier si les liens sont toujours à jour
      • Réorienter les objectifs

Pour réaliser ce site j’ai utilisé:

• Des Outils informatiques
• Des Tutos sur O2Switch
• Un aide mémoire WordPress
• Le langage HTML
• Mon NAS Chéri
• Des sources de Média
• Ma Besace