Remarque : même si nos guides les plus populaires ont été traduits en anglais, certains guides sont uniquement disponibles en français.

Studio Expert : Mode Article

Dernière mise à jour le 16 Août 2019

Avec le mode article, vos publications bénéficient d’un mode confort adapté aux petits écrans et qui répondra à tous les besoins de vos lecteurs (ajustement de la taille du texte, du contraste, etc.). Découvrez dans ce guide comment créer un mode article de A à Z sur vos documents.

    SECTIONS

Accès au paramétrage du mode article

Pour paramétrer le mode article il vous faut :

  1. Accédez au Studio Expert de votre média

  2. Sélectionnez la variante sur laquelle vous voulez créer le mode article

  3. Cliquez sur l’onglet “Enrichissement

  4. Cliquez sur le pictogramme “Mode article” parmi les rubriques à gauche de l’interface

 

Faire une détection des zones

La première étape du paramétrage du mode article est de détecter/créer les zones de texte et d’image. Il faut alors :

  • Soit tracer les zones une par une avec l’outil “Tracé en rectangle” situé dans la barre d’outils

  • Soit réaliser une détection automatique en cliquant sur “Détecter” situé dans le panneau de la rubrique “Mode article” (voir image du dessus).

A savoir : La détection automatique n’est généralement pas parfaite. En effet il peut y avoir à faire quelques retouches ou supprimer certaines zones inutiles (fond de page, entête de page, bas de page,etc…).

Quoi qu’il en soit, la détection automatique reste la solution la plus rapide. Au besoin, il est possible de grouper les zones ou les retracer avec les outils disponible dans le menu de zone de façon à ce que les zones correspondent à des contenus logiques.


Tracer une zone

Pour créer des zones d’actions, vous devez vous positionnez sur l’onglet “Enrichissement”, à la rubrique “Mode article”.

  1. Sélectionnez l’outils “tracé en rectangle

  2. Placez votre curseur sur le point ou vous voulez commencer à tracer votre zone

  3. Maintenez le clic gauche puis tracez votre zone

  4. Relâchez le clic gauche

  5. La zone est tracée

Tracer une zone sur un titre :

Un titre doit constituer une zone unique, même si l’auto détection avait fait plusieurs zones.

  • Titre sous forme d'image : Lorsqu'un titre se présente sous la forme d'une image, il faut garder le type “image”, la solution ne peut pas fournir l'information qu'il s'agit bien d'un titre car elle ne pourra pas détecter du texte.

Quelques cas difficiles :

  • Une zone de paragraphe doit correspondre à un paragraphe dans le texte (ceux-ci sont généralement marqué par un saut de ligne plus grand et/ou une indentation). Lorsqu’un paragraphe est coupé par un changement de colonne, la seule possibilité est de faire deux paragraphes distincts.

  • Lorsqu'il y a une lettrine, on peut se demander s'il faut lui donner sa propre zone ou l'inclure dans le paragraphe correspondant. La recommandation est pour l'instant de faire un bloc unique, et de corriger manuellement (voir plus bas) pour retirer un éventuel espace entre la lettrine et le reste du mot.


Fusionner plusieurs zones en une seule

Il est possible de fusionner plusieurs zones pour n’en faire qu’une seule :

  1. Sélectionner les zones que vous souhaitez fusionner

  2. Cliquez sur le pictogramme “fusionner en une seule zone” du menu d’action de la zone

  3. Les zones ont fusionné

 

Gérer les chevauchements de zones

Certains types de chevauchements sont possibles entre zones, d’autres sont problématiques. En effet, le contenu situé dans chaque zone est extrait indépendamment. Certains chevauchements mèneront donc à du contenu dupliqué.

Il ne faut jamais que deux images se chevauchent, pareil pour deux zones de texte.

Entre deux zones de texte

Aucun texte ne doit se situer dans deux zones de texte à la fois. Il est autorisé à deux zones de texte de se chevaucher légèrement, si aucun texte ne se situe dans le chevauchement. Dans l’idéal, il vaut mieux éviter tout chevauchement.

Entre texte et image

Une zone de texte et une zone d’image peuvent se chevaucher, à condition que l’espace d’intersection ne contienne pas de texte (sinon celui-ci sera répété). Ici, le premier zonage pose problème car le « e » final de « école » se trouve à la fois dans l’image et dans la zone de texte.

En conséquence, du texte ne doit pas se situer dans une zone d’image comme sur l’exemple en haut à droite.

L’inverse est cependant possible. Lorsqu’un texte épouse le contour d’une image, il est donc possible, selon la sémantique, soit de faire plusieurs zones de texte, soit de faire une zone qui chevauche entièrement l’image.

A savoir : Il existe des exceptions ou le texte fait parti intégrante de l’image, dans ces cas là, ce sera une zone d’image.

Astuce : une zone de texte ne prend en compte que le texte présent dans le document virtualisé. C’est ce qui permet de ne pas voir apparaître de bout d’image présent dans une zone de texte lors de la visualisation. A l’inverse, une zone image recopie trait pour trait ce qu’il y’a à l’intérieur.


Paramétrer la “Sémantique”

Pour que la solution puisse détecter au mieux les différents types d’HTML et générer un mode article plus abouti, il est nécessaire de définir la “Sémantique” de chaque zone. Les sémantiques proposées sont :

  • Paragraphe : Paragraphes de texte, c’est le type de de zone le plus courant

  • Titre : Titre de niveau 1 à 6

  • Métadonnées d’article : Métadonnées d’article. C’est un type de bloc de texte qui donne généralement des informations comme l'auteur de l’article, la date de publication, l'origine de l'article, etc.

  • Rubrique : Rubrique de l’article. Un article peut avoir une rubrique, qui ne doit pas être sélectionnée comme un titre. La rubrique est souvent en haut d'une page, ou juste au-dessus ou juste au-dessous du titre, souvent en petites capitales. Elle fournit en général une catégorie du contenu. Par exemple : interview, article, dossier, édito, zoom sur, point de vue, tribune, perspectives, actualité, etc, peuvent être des noms de rubriques. La rubrique fournit en général la catégorie générale de l'article.

  • Citation : Une citation est un paragraphe entier en exergue qui est un discours rapporté. Il se situe parfois en marge, ou entre deux colonnes. Une citation au sein d’un paragraphe plus large ne doit pas être définie comme citation. Un texte est une citation si l'on peut mettre (ou s'il y a déjà) des guillemets autour du paragraphe et qu’il est coupé du reste. On inclut dans les citations les textes en exergue repris du corps de texte.

  • Note de bas de page (Footnote) : Un article comporte parfois des “Notes de bas de page”. Il faut les marquer comme telles. Dans l'ordre de lecture, elles doivent apparaître avant le prochain niveau de titre (ou à la fin de l'article).

  • Graphique : Représentations graphiques de données numériques, quantitatives ou statistiques…

  • Image : images, dessin, flowcharts, photos, infographies…

  • Tableau : Données tabulées

  • Légende : Légendes associées à un graphique, une image ou un tableau

  • Métadonnées de figure : Informations annexes associées à un graphique, une image ou un tableau. Autrement dit, la légende, l’auteur, etc.

Pour définir la sémantique de la zone :

  1. Cliquez sur la zone souhaitée

  2. Le menu de la zone apparaît à droite de l’interface

  3. Dans les paramètres vous retrouvez le panneau déroulant “Sémantique

  4. Choisissez la sémantique adaptée

A savoir : Les titres doivent être numérotés de façon continue (sans sauter de niveau). Le niveau du titre doit refléter la structure du document entier. Cela fournit une information très importante concernant la structure du document et la hiérarchisation des articles.


Créer les articles

Maintenant que vos zones sont tracées et la sémantique définie, il faut créer les articles. Le contenu de chaque article dépend principalement de vos préférences, nous conseillons tout de même de créer un article par chapitre/section de votre document. Pour créer un article :

  1. Référez vous au panneau de la rubrique “Mode article

  2. Cliquez sur le bouton “+” nommé ”Ajouter un nouvel article”

  3. Un encadré apparaît dans l’espace juste en dessous

  4. Sélectionnez l’outil de “liaison de zones” dans la barre d’outils

  5. Cliquez dans l’ordre souhaité sur chaque zone à intégrer dans l’article

A savoir : Les articles peuvent couvrir plusieurs pages du document.

Astuce : Pour définir l’ordre de lecture de vos zones plus rapidement, vous pouvez cliquer sur la première zone et maintenir le clic en glissant votre souris sur les suivantes.


Paramétrer une “Figure”

Voici un exemple de “Figure” :

Pour créer une “Figure” :

  1. Éditez la “Sémantique” séparément et distinctement pour chacune des zones (image, légende, métadonnées de figure)

  2. Sélectionnez les zones souhaitées

  3. Dans la barre d’outils du menu de la zone cliquez sur le pictogramme étiquette “Grouper en figure

Edition de la “Sémantique” de chaque zone

  • Image” = Image

  • Légende” = Aire de jeux……

“Grouper en figure” après sélection des zones

  • F0” : Signifie que c’est la première figure du document, la deuxième sera nommée “F1” et ainsi de suite

A savoir : Il est possible de créer une figure avec une “image”, un “graphique” ou un “tableau” et, à minima, une légende


Génération du mode article.png

Générer le mode article

Une fois que vous avez lié toutes vos zones et créé vos articles, vous pouvez générer le “Mode article”.

Génération réussi.png
  1. Référez vous au panneau de la rubrique “Mode article

  2. Cliquez sur “Générer l’HTML

  3. La génération s’effectue

  4. Une fois la génération réussie, cliquez sur “Fermer

  5. Cliquez sur le pictogramme “œil” en haut à droite de l’interface pour visualiser le document

  6. Cliquez sur “Menu” en haut à gauche ou long cliC droit sur le document

  7. Cliquez sur “Mode article” ou “Lire en mode article

A savoir : La génération peut être lente sur les “gros” médias.

Générer L'HTML.png

Un pictogramme vous indique si la génération du mode article est à jour. Après chaque modifications effectuées il faut à nouveau “Générer L’HTML” pour qu’elles s’enregistrent et qu’elles soient visibles à la consultation.

Générer L'HTML 2.png

Faites les ajustement nécessaire si vous considérez qu’il y en a besoin. Certaines modifications ne peuvent être réalisées via les paramètres des articles, c’est le cas pour des documents complexes avec par exemple des titres ou des paragraphes dans le désordre. Il faut donc apporter des modifications manuellement.


Faire des modifications manuellement sur le mode article

Il est parfois nécessaire de faire des modifications manuellement, notamment sur des documents complexe en terme de mise en forme. Il faut toute fois quelques notions en code HTML pour apporter des modifications plus poussés.

  1. Référez vous au panneau de la rubrique “Mode article

  2. Cliquez sur la “Clé à molette” à droite de “générer l’HTML

  3. Le panneau HTML apparaît avec les aperçus

  4. Cliquez sur les flèches situées de part et d’autre de la fenêtre pour naviguer entre les pages

A savoir : Chaque modification apportée à partir de ce panneau régénérera automatiquement le mode article. Il n’est donc pas nécessaire de générer l’HTML.

Pour pouvoir modifier le code HTML :

  1. Cliquez sur le pictogramme de la “Porte” dans l’encadré “Version Surchargée

  2. Le code est alors copier et coller dans l’espace de modification

  3. Vous pouvez faire les modifications

  4. Une fois les modifications effectuées sur l’article, cliquez sur “Valider” en bas à droite de l’écran

A savoir : Il faut valider les modifications avant de pouvoir naviguer entre les différents articles.

Panneau HTML.png

Une fois votre mode article satisfaisant, il vous suffit de publier, en cliquant sur la fusée, pour mettre en ligne vos articles.


Help center.png

CENTRE D’AIDE - HELPCENTER

En complément de notre guide utilisateur, nous avons créé et mis à votre disposition des vidéos didacticielles dans l’objectif de vous guider pas à pas dans la prise en main de notre solution.

Accédez au Helpcenter, notre banque de tutoriels, en cliquant sur le lien suivant : https://ub.stream/tutoriel