WYSIWYG : je vois ce que tu vois aussi

Derrière l’acronyme WYSIWYG se cache l’expression « What you see is what you get », à savoir : ce que tu vois, c’est ce que tu obtiens. 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 ? Nous soulignons les avantages et les inconvénients de l’idée et présentons les éditeurs HTML WYSIWYG les plus connus.

La 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 populaire 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, sélectionnez-le et cliquez 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 ex. "<italic>Word</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 sortie - c’est-à-dire une publication numérique. 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.

Avant l’ère de l’informatique, tout était WYSIWYG car aucune compilation n’était nécessaire : si vous écrivez sur une feuille de papier ou utilisez une machine à écrire, vous obtenez un résultat concret. C’est seulement avec le développement des ordinateurs et de leurs programmes d’écriture qu’il a été important de s’interroger sur ce qu’il sortira de ce que l’on tape sur écran. Comme les cartes perforées n’étaient plus suffisantes pour la programmation, les développeurs de logiciels et les scientifiques avaient besoin d’un autre moyen pour entrer du code : un éditeur de texte. Les premiers programmes de traitement de texte étaient donc des éditeurs pour programmateurs. Les chaînes de caractères saisies dans ces programmes n’ont jamais été conçues pour être éditées sous forme de document.

L’un des premiers programmes de traitement de texte a été WordStar, apparu en 1978, qui pour l’anecdote, est toujours utilisé par l’écrivain George R. R. Martin (auteur qui a inspiré Game of Thrones). WordStar fonctionnait à l’origine sur le système d’exploitation CP/M et ne comportait que quelques fonctions. Dans la première version, les rédacteurs devaient encore travailler avec des marqueurs pour l’impression. Mais le programme est, selon l’avis général, le premier éditeur WYSIWYG. Il permettait de mettre en italique ou en gras un texte et de voir le résultat directement sur l’écran. Le problème à l’époque était que les capacités graphiques des ordinateurs n’étaient pas aussi avancées : les systèmes informatiques n’étaient pas en mesure d’afficher une image véritable sur l’écran.

Avec les possibilités croissantes qu’ont offertes PC et Mac, le texte pouvait être de mieux en mieux affiché sur l’écran. Mais pour le traitement de texte, le principe du WYSIWYG ne s’arrête pas là : en particulier pour la création de sites Web, les éditeurs sont devenus très importants. La plupart des sites Web sont écrits en langage HTML (Hypertext Markup Language). Comme pour les langages de balisage et de programmation en général, le code doit d’abord être compilé avant que le résultat ne devienne visible.

Donc, si vous créez un site Web en utilisant HTML, vous devez imaginer ce qui devra être émis. C’est pourquoi les éditeurs HTML WYSIWYG qui facilitent ce travail sont de plus en plus populaires. Le premier du genre a été WebMagic de Silicon Graphics en 1995. Au cours des deux années suivantes, les éditeurs FrontPage de Microsoft (qui n’est maintenant plus disponible) et Dreamweaver de Macromedia (qui fait maintenant partie d’Adobe) sont apparus. La demande de bons éditeurs est forte, mais que doit bien pouvoir faire un tel logiciel ?

Un éditeur WYSIWYG pour la création de sites Web 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 les fonctions du logiciel pour le faire, qui le convertit, quasi 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 les navigateurs de tous les visiteurs du site pourraient également les prendre en charge. Ce problème est maintenant moins pertinent. Dans un éditeur HTML WYSIWYG, les utilisateurs peuvent choisir parmi de nombreuses polices.
• Marquage de la police : le texte peut être par exemple 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 Web. 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.
• Tableau : 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 du World Wide Web. 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 pour 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. Mais aussi simple que soit le principe du « What you see is what you get », les programmes restent limités et des erreurs peuvent se produire sans que la cause soit connue.

Au début, 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é. Cela leur donne un contrôle total sur ce à quoi ressemblera le résultat final. C’est également vrai en dehors du HTML : vous en avez certainement déjà fait l’expérience pénible sur Word. Le programme effectue un formatage que l’utilisateur ne peut influencer qu’en naviguant dans de nombreuses fenêtres et menus.

Ce n’est pas le cas lorsque l’on saisit du code HTML ou d’autres langages de balisage : les développeurs peuvent voir exactement ce qui doit arriver au texte pendant la compilation. Par conséquent, certains utilisateurs utilisent pour créer des textes à imprimer ou à convertir en PDF le langage macro TeX ou le progiciel LaTeX. Développé à l’origine pour les travaux scientifiques, TeX permet de respecter des spécifications précises de mise en forme et d’insérer facilement des formules mathématiques et scientifiques.

De plus, on note des problèmes spécifiques à Internet : même avec le WYSIWYG, le résultat rendu n’est pas toujours tel qu’il est affiché au préalable à l’écran. Différents systèmes et divers navigateurs produisent parfois un contenu différent, en plus des appareils mobiles qui ont encore des modes d’affichage spécifiques. C’est pourquoi la promesse « What you see is what you get » ne tient pas forcément sa promesse, du moins pour les sites Internet. Les concepteurs Web testent donc généralement leurs pages sur différents systèmes avant de mettre leur travail en ligne.

Les éditeurs WYSIWYG créent du code HTML en arrière-plan. Cependant, ils ne garantissent pas que le code ainsi créé soit optimal. Par le passé, les concepteurs Web ont critiqué à maintes reprises ces programmes pour avoir produit des codes source inutilement gonflés ou qui comportent des erreurs. Ces derniers peuvent entraîner de longs temps de charge ou de faux messages d’erreur.

Malgré les inconvénients nommés ci-dessous, il est très pratique d’utiliser un éditeur WYSIWYG. Les débutants, en particulier, peuvent ainsi créer eux-mêmes leur site Internet, même s’il s’agit d’un site simple. Voici les programmes les plus connus.

Macromedia a lancé Dreamweaver en 1997 (alors exclusivement pour Mac OS). Ensuite, le développement de Dreamweaver a été poursuivi par Adobe (tout comme Flash, un autre projet Macromedia). L’éditeur propose une utilisation WYSIWYG ou directement avec du code. Les deux vues peuvent également être affichées côte à côte, de sorte que les modifications du code sont directement visibles dans l’aperçu et vice versa. L’aperçu fonctionne avec différents navigateurs et sur les appareils mobiles. Vous pouvez visualiser votre projet sur mobile par exemple avec un code QR. Grâce à une fonction de publication intégrée, les utilisateurs peuvent également déplacer les contenus créés directement sur leurs serveurs et les mettre en ligne. Dreamweaver fait partie de Creative Cloud.

Avec SeaMonkey, les utilisateurs disposent d’une suite Internet complète sur leur ordinateur. En plus d’un navigateur, d’un client e-mail, d’un client IRC et d’un carnet d’adresses, SeaMonkey Composer intègre également un éditeur HTML propre. Le pack d’application est issu de la suite Mozilla, qui a depuis été abandonnée. Les développeurs, toutefois, ont des liens toujours très forts à la Fondation Mozilla. Tout comme l’ensemble du pack, SeaMonkey Composer est très simple et convient donc surtout aux projets de sites Web simples. Vous pouvez passer d’une vue HTML à une vue WYSIWYG. Le programme gratuit reste néanmoins limité. L’éditeur est finalement surtout intéressant pour les puristes.

KompoZer a également émergé de l’environnement Mozilla. Comme pour SeaMonkey, la structure de cet éditeur HTML WYSIWYG est très simple. Les utilisateurs peuvent basculer entre la représentation graphique et le code source. Les fonctions utiles comprennent un assistant pour les formulaires, un éditeur CSS, un gestionnaire de site FTP qui permet aux utilisateurs de télécharger leurs projets, et un markup cleaner qui scanne les sauts de ligne inutiles dans le code écrit et vérifie que le site est conforme au W3C. Le développement KompoZer, tout comme celui de SeaMonkey, n’est pour le moment pas poursuivi. Le projet a été publié sous différentes licences open source.

Le développement de KompoZer a abouti à BlueGriffon. Ce dernier offre plus de fonctionnalités. Ainsi, vous pouvez afficher les deux vues en parallèle comme avec Dreamweaver. La version payante (il existe également une édition gratuite mais limitée) comprend également un éditeur EPUB. Il vous permet de créer des livres électroniques. À partir de la licence de base, les utilisateurs ont également accès à près de 2 500 modèles qui facilitent la création des sites Web.

Brackets est distribué par Adobe, mais contrairement à Dreamweaver, il est disponible en Open Source et gratuitement. Brackets est surtout un éditeur de texte et non un éditeur WYSIWYG. Avec la fonction de prévisualisation, le programme va néanmoins dans le sens d’un logiciel de traitement graphique. Tous les changements sont affichés en temps réel dans une fenêtre du navigateur. Le seul inconvénient est que cela ne fonctionne qu’avec Google Chrome. La manière dont les autres navigateurs Web afficheront le site Web ne peut être vérifiée que plus tard. Autre avantage : les fichiers CSS peuvent être ouverts et édités directement à partir du code aux endroits appropriés, ce qui accélère l’écriture du code car les concepteurs Web n’ont pas besoin de passer d’un fichier à l’autre. Ces modifications peuvent également être visualisées dans l’aperçu live. Par ailleurs, les développeurs proposent maintenant des centaines d’extensions pour Brackets. Il s’agit notamment de quelques ajustements purement visuels de l’interface utilisateur, mais aussi d’outils utiles pour par exemple l’auto-complétion ou pour analyser les bugs.

La première version de NetObjects Fusion est sortie en 1996 grâce à d’anciens employés d’Apple. Le principe WYSIWYG tel qu’il est repris par NetObjects rappelle encore plus un programme de PAO qu’un éditeur HTML classique. Les utilisateurs du logiciel arrangent les éléments du site Web par glisser-déposer au pixel près. Aucune connaissance HTML n’est nécessaire. Cependant, les concepteurs Web expérimentés ont la possibilité de passer au code source afin d’apporter des modifications directement dans le code HTML. Une autre particularité est l’aperçu de gestion de projet qui permet de déterminer comment on navigue sur le site Web. Sont alors classées les différentes sous-pages avec leurs liens grâce à un diagramme en arborescence. NetObjects Fusion est un produit payant disponible uniquement pour Windows. La version gratuite, Essentials, s’adresse principalement aux utilisateurs privés.

openElement est un autre éditeur HTML WSYIWYG gratuit. Toutefois, il est basé sur le code Chromium, qui nécessite le navigateur Chrome de Google. Encore une fois, la construction du site Web fonctionne en insérant et en déplaçant des éléments dans un aperçu visuel. Alors que la zone de montage se trouve au milieu de l’écran, les éléments disponibles sont disposés à droite dans une barre latérale. Ainsi, les utilisateurs peuvent simplement faire glisser les objets souhaités dans l’éditeur WYSIWYG. Les concepteurs Web peuvent afficher le code source de chaque page secondaire pour y apporter des modifications directement. Le programme est à la fois gratuit et sous licence open source, mais jusqu’à présent disponible uniquement pour Windows.

Pour l’éditeur HTML WYSIWYG gratuit RocketCake, les utilisateurs n’ont pas non plus besoin de connaissances HTML ou CSS. La structure de cet éditeur est similaire à celle de son concurrent openElement : au milieu se trouve la zone d’édition, à gauche et à droite une liste d’éléments de site Web. La particularité du programme : il permet de créer facilement des sites web responsifs pour les appareils mobiles. L’éditeur breakpoint facilite en effet cette mise en place : les concepteurs Web fixent en effet par son intermédiaire dse points dans le CSS sur lesquels la mise en page va changer en fonction des différentes tailles d’affichage. Bien sûr, il est également possible d’éditer directement du code avec RocketCake.

TOWeb de Lauyan Software suit la même approche WYSIWYG que RocketCake. Les deux programmes mettent l’accent sur une conception adaptée au responsive design. De plus, TOWeb permet une construction simple de boutiques en ligne et est bien adapté pour optimiser au mieux son site pour les moteurs de recherche. Ceci est possible grâce aux balises Alt et aux méta-titres pour éditer et générer du code HTML conforme au W3C. Grâce à la fonction de publication, les utilisateurs peuvent même choisir parmi des services d’hébergement prêts à l’emploi, ce qui devrait être particulièrement intéressant pour les débutants. TOWeb est une offre payante. Toutefois, si vous pouvez vous limiter à un seul site Web, vous pouvez utiliser le programme gratuitement. Pour chaque projet supplémentaire (et surtout pour les solutions e-commerce), l’achat d’un des trois forfaits est obligatoire.

Les éditeurs qui cachent en arrière-plan du code permettent de se concentrer entièrement sur le design. Par conséquent, les éditeurs WYSIWYG, qu’il s’agisse de traitements de texte ou d’éditeurs HTML, sont intéressants pour les utilisateurs qui prêtent grande attention à l’apparence de leur produit final. Dans de nombreux cas, les éditeurs WYSIWYG sont certes utilisés par les débutants, mais son approche est également profitable pour les concepteurs de médias. Au lieu de vous soucier des subtilités de programmation, vous pouvez vous concentrer entièrement sur la mise en page et le contenu. Toutefois, cela a, comme on l’a vu, des inconvénients : si vous souhaitez apporter des modifications au-delà des fonctions de conception prévues de l’éditeur choisi, vous vous confrontez aux limites du principe WYSIWYG. Ce n’est qu’en intervenant vous-même dans le code source que vous ne pourrez avoir un contrôle total sur votre résultat final.