What you see is what you… ?

get, mean or code !

26 juillet 2014,
par Romy Têtue

Mots-clefs associés à cet article :

Le WYSIWYG n’est pas une interface, mais un mode d’édition. Parmi d’autres. What you see is what you… get, mean or code.

On parle souvent de « WYSIWYG » (prononcé [wɪziwig] ou [wiziwig]) pour désigner les interfaces d’édition formellement constituées d’un champ de saisie chapeauté d’une barre d’outils de formatage du texte, par opposition à, par exemple, l’édition en balisage léger… à tort, car l’un n’exclut pas l’autre ! Toutes les interfaces de ce type ne sont pas WYSIWYG, ou pas strictement, et réciproquement, l’édition en balisage léger peut être, elle aussi, WYSIWYG.

Le WYSIWYG n’est pas une interface, mais un mode d’édition. Parmi d’autres. On distingue :

  • édition avec aperçu du rendu visuel final
  • édition avec aperçu sémantique
  • édition directe du code source

WYSIWYG : voir le rendu visuel final

Le mode WYSIWYG — What you see is what you get : « ce que vous voyez est ce que vous obtenez » — donne à l’utilisateur l’impression de voir son document tel qu’il sera publié, lui permettant de mettre en forme de façon visuelle, sans avoir à mémoriser et à utiliser des commandes spécifiques. Dans ce mode, peu adapté aux malvoyants, le visuel est privilégié sur le contenu. Ce mode a le défaut de générer un code ni très propre, ni très sémantique, parfois vraie bouillie ! dégradant la qualité de l’information informatiquement transmise.

CKEditor en mode WYSIWYG

Les exemples sont légion : CKEditor, TinyMCE, etc. Côté logiciels, le fameux Dreamweaver permet de réaliser des pages web en mode WYSIWYG ; il est aussi vivement décrié pour cela, pour la qualité déplorable du code produit.

WYSIWYM : aperçu sémantique

Le mode WYSIWYM — What you see is what you mean : « ce que vous voyez est ce que vous voulez dire » — permet de se concentrer sur le sens davantage que sur la mise en forme. Il s’oppose au mode WYSIWYG qui lui est postérieur. Le WYSIWYM donne un aperçu qui ne correspond pas au rendu visuel final, puisque celui-ci diffère selon le format final (PDF, HTML, Word, etc.), mais permet de s’assurer de la bonne structure sémantique du document en donnant un aperçu de la hiérarchie des titres, etc. En permettant au rédacteur de se concentrer sur le sens davantage que sur la forme, le WYSIWYM est plus adapté aux publications multisupports et aux chaînes éditoriales.

LyX 1.3 sous Linux

Exemples : LyX, logiciel libre pour la création de documents LaTeX.

WYSIWYC : éditer le code

Le mode WYSIWYC — What you see is what you code : « ce que vous voyez est ce que vous codez » — permet d’éditer directement le code source du document, qu’il s’agisse de HTML, de LaTeX, ou d’un langage de balisage léger. Il peut co-exister dans un éditeur afin, par exemple, de permettre de nettoyer le code généré en mode WYSIWYG.

S’il permet un meilleur contrôle du code produit, il s’adresse à des utilisateurs avancés, qui ont une connaissance minimale du code en vigueur.

Édition en wikitexte (dans Mediawiki)

Exemples ? MediaWiki permet de rédiger en wikitexte. Côté logiciel, Dreamweaver dispose aussi d’un excellent WYSIWYC, trop méconnu.

Trois modes d’édition… complémentaires !

Pour résumer : à partir du moment où l’on rédige directement avec du code, qu’il s’agisse de balises HTML ou d’une syntaxe légère de type Markdown ou wikitexte, c’est du WYSIWYC. Le WYSIWYM suppose un rendu formel minimal qui, contrairement au WYSIWYG ne correspond pas au rendu final. C’est le cas de certains outils de rédaction backend, qui donnent un aperçu WYSIWYM, non fidèle au rendu final frontend (sinon ce serait du WYSIWYG), tout en laissant la possibilité d’éditer le code WYSIWYC. Capiche ?

Bref, un même composant de rédaction peut permettre l’édition en plusieurs modes (souvent WYSIWYG et WYSIWYC).

Côté interface, chacun de ces trois modes d’édition, WYSIWYG, WYSIWYM et WYSIWYC, peut se présenter sous la forme d’un champ de saisie avec — comme on le voit dans les captures d’écran ci-dessus — ou sans barre d’outils et s’accompagner, ou pas, de raccourcis clavier ou de syntaxe légère, etc.

Enfin, le WYSIWYG est une excellente idée, qui n’est discutable que parce que son implémentation est difficile, avec pour conséquence de générer du code déplorable. Ce mode d’édition ne doit donc pas être le seul, ni celui privilégié, mais être proposé en complément de WYSIWYC.

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 25 août 2014 à 14:17, par Sylvain En réponse à : What you see is what you… ?

    La question finale est : Quel est le meilleur mode d’édition pour un utilisateur non-développeur ? Cette question me revient tous les 6 mois depuis 6 ans.

  • Le 27 août 2014 à 21:36, par Joseph En réponse à : What you see is what you… ?

    Mon rêve serait de trouver une sorte d’intermédiaire entre WYSIWYC et WYSIWYM pour du balisage léger (j’ai Markdown en tête), qui serait une sorte de colorisation syntaxique améliorée.

    Je m’explique : que l’interface affiche bien le code source mais avec une mise en forme light. Autrement dit, mes titres sont dans une titraille un peu plus grande, mon gras est en gras, l’italique en italique, le lien de couleur bleu et souligné, etc.

    C’est du coup assez similaire à concept de la colorisation syntaxique, mais un petit grand au-dessus, la mise en forme du code correspondant à un aperçu sémantique.

  • Le 4 septembre 2014 à 17:33, par Bruno En réponse à : What you see is what you… ?

    Merci pour cet article.

    Pour moi aussi, c’est une question centrale et récurrente. J’ai constaté par de trop nombreuses fois, de nouveaux rédacteurs SPIP jeter l’éponge, y compris des personnes très diplômées (comme quoi).

    Mon rêve : une édition directe en frontend, en vrai WISIWYG, mais cadrée. Il n’est pas question non plus de laisser faire n’importe quoi.
    On doit aussi pouvoir basculer d’un mode à l’autre, en fonction du public et de l’expérience.
    Ce jour viendra, j’en suis sûr.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom