Views (Vues)

Le composant vues permet d’informer les utilisateurs sur le nombre de vues d’un article et sert ainsi d’indicateur de popularité. Il est généralement utilisé pour les vidéos.

Usage

Le nombre de Vues est une métadonnée standard.

• Il est toujours après le titre de l’article.
• Dans une liste d’articles, son affichage est facultatif.
• Dans un détail article, son affichage est aussi facultatif.

Bonnes pratiques

• Si le composant vues est affiché dans les Listes d’Articles, il le sera avec les autres métadonnées (source, date)
• S’il est affiché en Détail Article, il doit l’être avant le corps de l’article.
• Pour un article vidéo, il peut être affiché après la vidéo.
• Au-delà de 999 vues le nombre est arrondi aux centaines et passe en kilo. Ainsi 123 288 deviendra 123,3 k.
• Au-delà de 999 999 vues le nombre est arrondi aux centaines de milliers et passe en méga. Ainsi 4 495 3028 deviendra 4,5 M.

Style & code

Ce composant n’a pas de valeur sémantique HTML, il peut s’agir d’une balise <p> ou d’une simple balise <span> dans laquelle on met le texte donnant l’information chiffrée. Il suffit alors d’ajouter la classe su-views à cette balise. Les seules spécificités techniques de ce composant sont l’utilisation d’espaces insécables ( ) autour du k pour éviter les retours à la lignes indésirables.

Dans une liste d’articles

Dans ce contexte, il a juste besoin de la classe su-metadata sur un parent.

<div class="su-metadata">
    <span class="su-views">125&nbsp;k&nbsp;vues</span>
</div>

Dans un article

Dans un article, il a besoin de la classe su-article en plus pour le passer en mode « contenu éditorial ». Cette classe peut être à côté ou au-dessus de la classe su-metadata.

<div class="su-article">
    <div class="su-metadata">
        <p class="su-views">930&nbsp;k&nbsp;vues</p>
    </div>
</div>
<div class="su-article su-metadata">
    <p class="su-views">930&nbsp;k&nbsp;vues</p>
</div>

Sur fond sombre

En cas de fond sombre, utiliser la classe su-negative.

<section class="su-negative su-metadata" style="background: DimGray; padding: 10px">
    <span class="su-views">125&nbsp;k&nbsp;vues</span>
    <div class="su-articles-list">
        <span class="su-views">125&nbsp;k&nbsp;vues</span>
    </div>
</section>