Article de blog en mode expert

14 janvier 2020
Carole

Article de blog en mode expert

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

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.

Les quatre volets de l’édition d’articles

Intégration de contenus web professionnelle
4. Articles de blog en mode professionnel
Mode expert : mettre les mains dans le code

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 Eco) = pour éco-conception web > améliore l’efficience des sites web pour réduire l’impact environnemental.

Optimiser votre espace de travail

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.

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.

Solution Libre

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

Solution payante

Dreamweaver est une solution de type WYSIWYG qui permet de travailler sur deux espaces de travail différents :

  • un cadre dédié au contenu codé,
  • un cadre pour visualiser le rendu.

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.

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

Trucs et astuces d’édition

Introduction

Voici une liste explicite des principales astuces que j’utilise au quotidien. N’hésitez pas à me laisser un commentaire si vous avez des questions ou si vous souhaitez que j’approfondisse certains points.

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 ?

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 :

  • &nbsp;
  • &#160;
  • &#xA0;
 <h4>Ce titre est vraiment très beau&amp;!</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 de Facebook

Je vous donne cette astuce car je l’utilise beaucoup. Imaginez : vous avez créé un article, vous l’avez publié et en le partageant sur Facebook, 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 ? Facebook a mis en cache vos métadonnées. Il faut le vider depuis l’outil Debugger de Facebook. Il suffit de renseigner votre URL pour repartir de zéro.

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 !
Carole Lavocat Cheffe de projet

No comments

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *