Nothing is more destructive to good design than group thinking and collective decision making

Récemment, j’ai mis à jour un de mes anciens articles et je me suis intéressé à la manière de le faire correctement en respectant les conventions et en utilisant les outils HTML5. 

L’abréviation Màj

Ceci est une petite parenthèse pour blogueurs francophones.

Souvent, les titres d’articles mis à jour comportent la mention « Màj » dépourvue de balise <abbr>. Pour satisfaire le niveau AAA des règles WCAG 2.0, il est nécessaire d’identifier les abréviations comme suit :

<h2>Mon titre (<abbr title="Mise à jour">Màj</abbr>)</h2>

<ins> : la balise d’insertion

La balise <ins> permet de définir du texte inséré dans un document.

datetime

Au moyen de l’attribut datetime, il est possible de spécifier la date de l’insertion.

<ins datetime="2012-01-04">Vestibulum vitae neque risus, et volutpat augue. Praesent tempus posuere cursus.</ins>

datetime doit être une chaine de caractère représentant une date valide et une heure optionnelle.

cite

Si la mise à jour intervient suite par exemple à un article d’un magasine web, il est possible d’utiliser l’attribut cite afin de référer l’insertion à l’article en question.

<ins cite="http://www.domaine.com/article.html">Vestibulum vitae neque risus, et volutpat augue. Praesent tempus posuere cursus.</ins>

cite doit être un lien valid.

Une mise à jour correcte avec la balise <ins> et ses attributs

Voici une structure très basique d’un article :

<article>
	<header>
		<h2>Lorem ipsum</h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis, massa in hendrerit vulputate, nibh nisi tincidunt libero, ac luctus sem diam eget elit.</p>
</article>

Si on utilise les outils cités précédemment, voici un balisage correct pour une mise à jour de contenu :

<article>
	<header>
		<h2>Lorem ipsum <ins datetime="2012-01-04">(updated)</ins></h2>
	</header>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis, massa in hendrerit vulputate, nibh nisi tincidunt libero, ac luctus sem diam eget elit. <ins datetime="2012-01-04" cite="http://www.domaine.com/article.html">Vestibulum vitae neque risus, et volutpat augue. Praesent tempus posuere cursus.</ins></p>
</article>

Les styles

Il est bon d’utiliser un style CSS afin de faciliter l’identification des insertions. Ainsi on pourra faire plus facilement le lien entre le texte « Mise à jour » inséré dans le titre et celui se trouvant dans le corps de l’article.

Un exemple de CSS :

ins {
	background: #FFC;
	text-decoration: none;
}

Alors plutôt que de tout récrire, vous pouvez vous en inspirer.

1. Ouvrir le Terminal
2. Taper la commande defaults write com.apple.Finder AppleShowAllFiles true
3. Redémarrer le Finder (en appuyant sur alt, faire un clique droite sur l’icone du Finder et séléctionner Relancer)

Pour cacher ne pas afficher les fichiers cachés, c’est idem sauf la commande qui est defaults write com.apple.Finder AppleShowAllFiles false

Si comme moi, vous utilisez l’application Alfred, voici une extension fort pratique qui fait le même travail.

1. Dans Sublime Text 2, installer le plugin less2css via Package Control/.
2. Cloner le dépôt less.js-windows.

   Pour ma part, je l’ai cloner sous c:\workspace\less.js-windows.

3. Ajouter dans votre PATH le lien vers le dépôt.
   1. Cliquer sur le menu Démarrer.
   2. Cliquer droit sur le Poste de travail.
   3. Aller dans l’onglet Avancé.
   4. Cliquer sur Variables d’environnement.
   5. Dans la liste des Variables système, séléctionner Path.
   6. Modifier la variable.
   7. Aller à la fin de la valeur de la variable ajouter un ; et entrer le chemin du dépôt less.js-windows que vous avez cloner précédement.
4. Redémarrer Sublime Text 2.

A chaque fois que vous souvrez un fichier avec l’extension .less, celui-ci sera compilé en fichier .css.

Cette technique est très pratique pour le dévellopement. Cependant, pour des environnements de production, je conseil de passer par des outils comme Code Kit qui lui permet de compiler les .css sur une seule ligne. Pour l’instant la technique ci-dessus crée des fichiers de ce type :

#header {
  color: red;
}
#header a {
  font-weight: bold;
  text-decoration: none;
}
#header a:hover {
  color: #000;
  text-decoration: underline;
}
/* Operations */
#header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}