WYSIWYG : je vois ce que tu vois

Derrière l’acronyme WYSIWYG se cache l’expression « What You See Is What You Get », à savoir : tu obtiens ce que tu vois. Sur ce principe, les opinions divergent. Est-ce une bonne idée de ne travailler que superficiellement sur les textes et les sites Web et de laisser les programmes écrire eux-mêmes le code correspondant en arrière-plan ? Découvrez ici les avantages et inconvénients de l’idée et ainsi que les principaux éditeurs WYSIWYG.

Que signifie WYSIWYG ?

Cette séquence de lettres quelque peu déroutante signifie, tout simplement, que le texte tel qu’il apparaît dans l’éditeur est également affiché de cette manière dans le produit final. Il est difficile de l’imaginer autrement pour la plupart des utilisateurs s’ils ne connaissent que Word comme programme de traitement de texte. En effet, le logiciel de Microsoft est un bon exemple d’éditeur WYSIWYG. Ce que vous voyez apparaître à l’écran, que ce soit le texte ou la mise en page avec police, caractères gras, paragraphes, etc., sera exactement ce que votre imprimante rendra aussi. Par exemple, si vous voulez mettre un mot en italique dans votre texte, vous n’avez qu’à le sélectionner et à cliquer sur le bouton correspondant.

En fait, Word vous évite d’écrire du code. Sans un programme comme Word, vous devriez entrer des marqueurs dans votre texte (par exemple <italic>Mot</italic>), que le terminal interprète et convertit. Dans notre exemple, ce terminal serait l’imprimante. Mais la conversion du document Word en fichier PDF ou la présentation du document dans un navigateur peut également être considérée comme une publication numérique et donc une sortie. Pour les éditeurs HTML, la question est de savoir s’ils ont besoin de WYSIWYG. Avant d’entrer dans les détails, il convient toutefois de jeter un bref coup d’œil sur l’histoire de ces éditeurs.

Fonctions des éditeurs HTML WYSIWYG

Un éditeur WYSIWYG doit permettre aux utilisateurs n’ayant pas de connaissances approfondies du HTML de créer un site Web. Avec un tel programme, les utilisateurs n’entrent pas le code manuellement, mais utilisent le logiciel pour le faire. Celui-ci le convertit ensuite en arrière-plan en code HTML.

• Police : lorsque le Web a été créé, les possibilités d’utiliser différentes polices de caractères étaient encore très limitées. Hormis Times New Roman, Verdana et Arial, qui ont été installées sur la plupart des ordinateurs, les concepteurs Web ne pouvaient pas utiliser d’autres polices. En effet, on ne pouvait pas partir du principe que tous les navigateurs pourraient les prendre en charge. Ce problème est désormais moins pertinent. Dans un éditeur HTML WYSIWYG, les utilisateurs peuvent choisir parmi de nombreuses polices.
• Mise en forme de la police : le texte peut être en italique, en gras, souligné, barré ou en petites majuscules. Avec un éditeur WYSIWYG, que ce soit pour la création de code HTML ou pour le traitement de texte, les utilisateurs n’ont pas besoin d’effectuer les marquages manuellement, mais peuvent traiter la partie de texte souhaitée en appuyant simplement sur un bouton.
• Mise en page : les zones de frappe et les espaces blancs sont importants dans l’apparence d’un site Web. En positionnant le contenu, les concepteurs Web peuvent donner un certain style à leur site. Sans les possibilités du WYSIWYG, il sera nécessaire aux programmeurs de spécifier les espaces blancs, c’est-à-dire les zones qui ne sont pas remplies de contenu, pixel par pixel.
• Structure : comme pour les textes classiques, le contenu d’un site Web doit être structuré de façon à ce que les visiteurs puissent s’y retrouver. Les titres (ou sous-titres), qui peuvent être facilement définis dans les éditeurs WYSIWYG, guident les lecteurs à travers le texte.
• Tableaux : le contenu Web peut être enrichi de listes et de tableaux. Avec un logiciel qui supporte le WYSIWYG, les concepteurs Web peuvent directement insérer leurs éléments et n’ont pas besoin de les saisir sous forme de code.
• Médias : les sites Web ne sont pas que des textes. Vidéos, images et autres éléments graphiques constituent une grande partie d’Internet. Pour que ces contenus soient également affichés, les créateurs de sites doivent les intégrer dans le code HTML. Les éditeurs HTML WYSIWYG le font automatiquement. Dans la plupart des cas, les utilisateurs peuvent même glisser/déposer les objets correspondants aux endroits souhaités.

Les éditeurs qui prennent en charge le WYSIWYG ont plus de fonctions que la simple conception du contenu : il est par exemple souvent possible de publier du contenu via l’éditeur directement sur votre site Web. De nombreux éditeurs HTML mâchent le travail à leurs utilisateurs : ils affichent par exemple les sous-pages du site Web dans une barre latérale bien visible. De plus, il est intéressant de pouvoir basculer dans son éditeur entre la vue WYSIWYG et le code.

Éditeurs WYSIWYG pour HTML

Utiliser un éditeur HTML WYSIWYG s’avère payant dans de nombreuses situations. Les débutants, en particulier, peuvent ainsi déjà créer leurs propres sites Web. Dans les sections suivantes, nous avons regroupé pour vous quelques-uns des programmes les plus connus.

Dreamweaver

Macromedia a lancé Dreamweaver dès 1997 (alors uniquement pour Mac OS). Depuis, le géant du logiciel Adobe a racheté Macromedia.

SeaMonkey Composer

Avec SeaMonkey, les utilisateurs obtiennent une suite Internet complète sur leur ordinateur. Outre un navigateur, des clients email et IRC et un carnet d’adresses, SeaMonkey Composer intègre également son propre éditeur HTML.

KompoZer

KompoZer est également issu de l’environnement de Mozilla. Comme SeaMonkey, la structure de cet éditeur HTML WYSIWYG est très simple.

Brackets

Brackets est distribué par Adobe, mais contrairement à Dreamweaver, il est open source et disponible gratuitement. Brackets est avant tout un éditeur de texte et non un éditeur WYSIWYG. Avec sa fonction de prévisualisation, le programme se rapproche néanmoins d’un logiciel d’édition graphique.

NetObjects Fusion

La première version de NetObjects Fusion est apparue en 1996, développée par d’anciens employés d’Apple. Le principe WYSIWYG défendu par NetObjects Fusion ressemble même davantage à un programme de publication assistée par ordinateur qu’à un éditeur HTML typique. Les utilisateurs du logiciel organisent les éléments du site Web par glisser-déposer, au pixel près.

openElement

openElement est un autre éditeur HTML WYSIWYG gratuit. Il est basé sur le code Chromium, qui est également à la base du navigateur Chrome de Google. Ici aussi, la construction d’un site Web fonctionne en insérant et en déplaçant des éléments dans une vue graphique.

RocketCake

L’éditeur HTML WYSIWYG gratuit RocketCake ne nécessite en principe pas non plus de connaissances en HTML ou en CSS. La structure de cet éditeur est similaire à celle de son concurrent openElement.

Au centre se trouve la zone d’édition, à gauche et à droite une liste des éléments du site Web ainsi que la navigation dans les fichiers. La particularité de ce programme est qu’il permet de créer facilement des sites Web responsive pour les appareils mobiles. C’est notamment le rôle de l’éditeur de breakpoints : Il permet aux webdesigners de définir des points dans le CSS où la mise en page change en fonction de la taille de l’écran. Bien entendu, RocketCake permet également d’éditer directement le code.

TOWeb

TOWeb de Lauyan Software adopte la même approche WYSIWYG que RocketCake. Les deux programmes partagent notamment leur focus sur le design responsive.

Inconvénients du principe WYSIWYG

Lorsque l’on débute, les éditeurs WYSIWYG peuvent sembler être la solution parfaite : même sans connaissances en HTML ou programmation, des documents (Web) adaptés à la publication peuvent être générés sur ordinateur. Mais pour diverses raisons, certains utilisateurs préfèrent utiliser un éditeur comme Notepad++, pour lequel du code doit être directement entré.

• Manque de contrôle : les éditeurs WYSIWYG effectuent des mises en forme sur lesquelles l’utilisateur ne peut agir qu’en naviguant dans de nombreuses fenêtres et menus. Ce n’est pas le cas lors de la saisie de code HTML ou d’autres langages de balisage : les créateurs voient exactement ce qui doit se passer avec le texte lors de la compilation. C’est pourquoi certains utilisateurs utilisent le langage macro TeX, ou le logiciel LaTeX qui en est dérivé, pour créer des textes destinés à l’impression ou des fichiers PDF. Développé à l’origine pour les travaux scientifiques, TeX permet de respecter des consignes de mise en forme précises et d’insérer plus facilement des formules mathématiques et scientifiques dans le corps du texte.
• Problèmes spécifiques à Internet et différents types d’affichage : même avec le WYSIWYG, le résultat n’est pas nécessairement tel qu’il apparaît à l’écran du concepteur du site. En effet, le résultat final unique n’existe pas sur Internet. Les différents systèmes et navigateurs affichent parfois le contenu différemment, sans compter que les terminaux mobiles ont eux aussi des modes d’affichage différents. C’est pourquoi la promesse « What You See Is What You Get » est vide de sens, du moins en ce qui concerne les sites Web. C’est pourquoi les concepteurs de sites Web testent généralement leurs pages sur différents systèmes avant de mettre leurs résultats en ligne.
• Qualité du code : les éditeurs WYSIWYG créent un code HTML en arrière-plan. On ne peut cependant pas toujours partir du principe que le code ainsi créé est valable pour un usage professionnel. Par le passé, les concepteurs de sites Web ont régulièrement critiqué ces programmes pour leur production de code source inutilement gonflé ou erroné. Cela entraîne des temps de chargement longs et des erreurs d’affichage.