Cheffe de projet web | Co-fondatrice et Présidente de Wexample
Durée : 9 minutes
Ce tuto, « Article de blog en mode expert » est dédié aux experts. Si vous ne comprenez pas certains termes employés sur ce tuto, je vous conseille de consulter cet article : Apprendre l’intégration de contenus web professionnelle.
Bonne lecture !
📢 Introduction
Pour rédiger un article de blog en mode expert, il est impératif de mettre toutes les chances de son côté :
- en apprenant les bases du web,
- en optimisant votre espace de travail,
- en faisant de la veille
- et en collectionnant les bonnes pratiques.
Dans ce tuto, vous trouver les sources essentielles et des raccourcis pour gagner un peu de temps dans votre quête de l’optimisation.
👍 Gagnez des points pour chaque optimisation
Chaque optimisation est accompagnée d’une mention :
(+1 SEO) = améliore le résultat dans les moteurs de recherche
(+1 W3C) = respecte les normes du World Wide Web Consortium
(+1 UI) = User Interface, améliore l’aspect visuel de votre article
(+1 UX) = User eXperience, améliore l’expérience utilisateur (donc la lecture et la compréhension)
(+1 Éco) = pour éco-conception web > améliore l’efficience des sites web pour réduire l’impact environnemental.
🔧 Apprendre le langage HTML5 et CSS3
(+1 SEO) (+1 W3C)
Nous n’allons pas nous mentir, faire une intégration web professionnelle sans connaitre les rudiments de HTML et CSS est un coup de chance. Certes, les technologies des WYSIWYG progressent. Il est cependant important de savoir vérifier vos intégrations en texte brut pour vérifier si vos “copier / coller” n’ont pas injecté des balises et des styles CSS indésirables.
Parmi les sites de référence pour l’apprentissage du HTML5 et du CSS3, je vous conseille Open Class Rooms.
🔨 Respecter les normes du W3C
(+1 W3C)
Le W3C l’organisme de standardisation chargé de promouvoir la compatibilité des technologies sur le web. Le non-respect de ces normes entraine des sanctions auprès des moteurs de recherche.
Vous devez impérativement bien structurer votre contenu dans vos balises HTML pour éviter des erreurs fatales. Vous apprendrez ainsi à ne pas mettre plusieurs balises <h1></h1>balises dans un même article.
Pour tester la validité de votre page web : Validator w3.
Je vous recommande également la lecture de cet ouvrage “Qualité web”, parfait pour les débutants.
🖥 Travailler en local
Créer votre contenu en local, c’est-à-dire avec des logiciels installés sur votre ordinateur.
Lorsque vous travaillez directement dans l’espace d’édition de votre site web, vous pouvez avoir des risques de perdre vos données, notamment si vous n’êtes pas sûr de vous et que vous faites un nombre de modifications importantes. Ces pages web d’édition ont beaucoup moins de performance que les logiciels installés sur vos ordinateurs. Il convient d’enregistrer très régulièrement vos modifications lorsque vous travaillez en ligne.
Travailler en local, c’est aussi une excellente pratique pour diminuer son empreinte numérique. (+1 Éco)
📝 Utilisez un éditeur de texte pro
La bonne pratique pour élaborer un article web est de travailler le fond sur un logiciel de traitement de texte et la forme sur un éditeur de code.
Et si vous aimez travailler sur des solutions libres, je vous conseille d’installer ces deux logiciels :
Le logiciel libre Notepad++ est de loin la meilleure solution.
Les fonctionnalités les plus utiles :
- supprimer rapidement des éléments indésirables <span></span>,
- basculer rapidement votre texte en lettre capitale en minimale…
Quelques raccourcis claviers utiles pour Notepad++ :
- Ctrl + j : éliminer les retours à la ligne.
- Ctrl + e : mettre tout un paragraphe sur une même ligne.
- Ctrl + u : passer en minuscule
- Ctrl + Maj + u : passer en majuscule
Et pour aller plus loin, voici un tuto très intéressant : “Mon pote notepad++ : 13 trucs et astuces”.
🅰️ Apprendre vos raccourcis clavier
Pour augmenter votre productivité et épater vos collègues. ? Vous pouvez chercher les raccourcis clavier :
- de votre OS,
- du navigateur,
- de WordPress, ou de votre système de gestion de contenu,
- et tous les raccourcis des caractère spéciaux avec la touche ALT.
📺📺 Travailler avec deux écrans
Un écran pour dédié à votre espace de travail,
Un autre pour afficher le résultat.
Pour rafraîchir votre page web : F5
Pour rafraîchir votre page web + vider le cache : Ctrl + F5
🖼 Format des images
Connaître et adapter le format de vos images pour les réseaux sociaux.
📇 Retour à la ligne
Entrée : pour effectuer un retour à la ligne normal.
Maj + Entrée : pour ne pas affecter l’espacement des paragraphes par défaut.
♾ Caractère spéciaux
Comment mettre des accents sur des majuscules ?
- Soit vous utilisez les caractères Unicode.
- Soit vous utilisez les raccourcis clavier.
- Ou “copier / coller” directement ces caractères : À, Ç, É, Ê et È.
Retrouvez aussi les caractères Unicode pour toutes les flèches.
⬜️ Espaces insécables
Dans la langue française vous devez mettre un espace juste avant les ponctuations faites en deux parties :
- !
- ?
- ;
- :
Le problème c’est qu’en HTML vous pouvez avoir des effets indésirables :
Ce titre n’est-il pas beau
?
Pour éviter ce problème vous devez accrocher votre ponctuation par un espace insécable avec l’un de ces codes :
-
-  
-  
<h4>Ce titre est vraiment très beau&!</h4>
Cette règle n’existe pas dans la langue de Shakespeare.
Emoji 😃
😀 😃 😄 😁 😆 😅 😂 🤣 ☺️ 😊 😇 🙂 🙃 😉 😌 😍 🥰 😘 😗 😙 😚 😋 😛 😝 😜 🤪 🤨 🧐 🤓 😎 🤩 🥳 😏 😒 😞 😔 😟 😕 🙁 ☹️ 😣 😖 😫 😩 🥺 😢 😭 😤 😠 😡 🤬 🤯 😳 🥵 🥶 😱 😨 😰 😥 😓 🤗 🤔 🤭 🤫 🤥 😶 😐 😑 😬 🙄 😯 😦 😧 😮 😲 🥱 😴 🤤 😪 😵 🤐 🥴 🤢 🤮 🤧 😷 🤒 🤕 🤑 🤠 😈 👿 👹 👺 🤡 💩 👻 💀 ☠️ 👽 👾 🤖 🎃
Les Émojis font désormais partie des caractères Unicode, en d’autres termes, ils sont interprétables par votre ordinateur. Un simple “copier / coller” depuis une bibliothéque suffit pour les intégrer à votre contenu.
🖍 Surligner un texte
Pour obtenir cet effet, vous devez ajouter un style à votre balise HTML comme ceci :
<span style="background-color: yellow;" >Mon texte sera surligné en jaune </span>
🎎 Indice et exposant
Comment mettre un caractère en indice ou en exposant ?
- Balise des exposants : <SUP>1<\SUP>.
- Balise des indices : <SUB>1<\SUB>.
Exemple :
Un texte qui comporte un <SUP>exposant</SUP> et un <SUB>indice</SUB>.
🖼 Faire un tableau
Pour créer un beau tableau en HTML , consulter ce tuto !
⚓️ Les ancres
Pour créer des ancres dans votre contenu, vous devez connaitre les id .
Les titres que vous souhaitez ancrer doivent comporter un id pour être reconnu.
<h2 id=”ancre-1”> Titre 1 </h2> <h2 id=”ancre-2”> Titre 2 </h2> <h2 id=”ancre-3”> Titre 3 </h2>
Vous devez ensuite connecter vos titres avec la balise des liens : <a id= »#un-id »>Mon super titre</a> comme ceci :
<h2><a href=”#ancre-1”> Titre 1 </a></h2> <h2><a href=”#ancre-2”> Titre 2 </a></h2> <h2><a href=”#ancre-3”> Titre 3 </a></h2>
🔬 Afficher du code HTML
Pour afficher des belles lignes de codes comme je l’ai fait tout au long de ce tuto, vous devez utiliser les balises <code></code> pour qu’il ne soit pas interprété par le navigateur.
Si vous souhaiter afficher du code en condition, utiliser les balises <pre></pre>.
🚽 Vider le cache des réseaux sociaux
Je vous donne cette astuce, car je l’utilise beaucoup. Imaginez un peu : vous avez créé un article, vous l’avez publié et en le partageant sur Facebook, Twitter ou Linkendin vous n’êtes pas satisfait du résultat. Vous supprimez votre post, vous faites vos petites modifications et au moment du partage, vous vous rendez compte qu’il vous affiche l’ancienne version. Pourquoi ? Ces plateformes ont mis en cache les métadonnées de votre article. Heureusement il existe des outils, mis à disposition des webmasters pour gérer ces problèmes.
Vous avez un doute sur l’apparence de votre projet web ?
Demandez conseil auprès de nos spécialistes : stratégie éditoriale, optimisation de contenus, amélioration UX et UI…
☕️ Conclusion
Voilà, je pense qu’avec tout ça, vous devriez pouvoir vous en sortir. Si toutefois vous avez besoin de plus de renseignements, n’hésitez pas à poser des questions dans les commentaires. À très bientôt pour un prochain dossier !
Ce sujet vous a plu, mais vous avez encore des questions sans réponses. N’hésitez pas à commenter cet article, je serai ravie de vous répondre.
Vous pouvez également adhérer à notre association et rejoindre notre ChatGPT vivant 😁
Tutos wex : Intégration de contenus
Éditer un article de blog en mode expert