WYSIWYG : je vois ce que tu vois

Derrière l’acronyme WYSIWYG se cache l’ex­pres­sion « 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 tra­vail­ler que su­per­fi­ciel­le­ment sur les textes et les sites Web et de laisser les pro­grammes écrire eux-mêmes le code cor­res­pon­dant en arrière-plan ? Découvrez ici les avantages et in­con­vé­nients de l’idée et ainsi que les prin­ci­paux éditeurs WYSIWYG.

Que signifie WYSIWYG ?

Cette séquence de lettres quelque peu dé­rou­tante signifie, tout sim­ple­ment, 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 uti­li­sa­teurs s’ils ne con­nais­sent que Word comme programme de trai­te­ment de texte. En effet, le logiciel de Microsoft est un bon exemple d’éditeur WYSIWYG. Ce que vous voyez ap­pa­raître à l’écran, que ce soit le texte ou la mise en page avec police, ca­rac­tères gras, pa­ra­graphes, etc., sera exac­te­ment ce que votre im­pri­mante rendra aussi. Par exemple, si vous voulez mettre un mot en italique dans votre texte, vous n’avez qu’à le sé­lec­tion­ner et à cliquer sur le bouton cor­res­pon­dant.

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 in­ter­prète et convertit. Dans notre exemple, ce terminal serait l’im­pri­mante. Mais la con­ver­sion du document Word en fichier PDF ou la pré­sen­ta­tion du document dans un na­vi­ga­teur peut également être con­si­dé­rée comme une pu­bli­ca­tion 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 uti­li­sa­teurs n’ayant pas de con­nais­sances ap­pro­fon­dies du HTML de créer un site Web. Avec un tel programme, les uti­li­sa­teurs n’entrent pas le code ma­nuel­le­ment, 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 pos­si­bi­li­tés d’utiliser dif­fé­rentes polices de ca­rac­tères étaient encore très limitées. Hormis Times New Roman, Verdana et Arial, qui ont été ins­tal­lées sur la plupart des or­di­na­teurs, les con­cep­teurs Web ne pouvaient pas utiliser d’autres polices. En effet, on ne pouvait pas partir du principe que tous les na­vi­ga­teurs pour­raient les prendre en charge. Ce problème est désormais moins pertinent. Dans un éditeur HTML WYSIWYG, les uti­li­sa­teurs peuvent choisir parmi de nom­breuses polices.
• Mise en forme de la police : le texte peut être en italique, en gras, souligné, barré ou en petites ma­jus­cules. Avec un éditeur WYSIWYG, que ce soit pour la création de code HTML ou pour le trai­te­ment de texte, les uti­li­sa­teurs n’ont pas besoin d’effectuer les marquages ma­nuel­le­ment, mais peuvent traiter la partie de texte souhaitée en appuyant sim­ple­ment sur un bouton.
• Mise en page : les zones de frappe et les espaces blancs sont im­por­tants dans l’apparence d’un site Web. En po­si­tion­nant le contenu, les con­cep­teurs Web peuvent donner un certain style à leur site. Sans les pos­si­bi­li­tés du WYSIWYG, il sera né­ces­saire aux pro­gram­meurs 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 clas­siques, 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 fa­ci­le­ment 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 con­cep­teurs Web peuvent di­rec­te­ment 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 gra­phiques cons­ti­tuent 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 au­to­ma­ti­que­ment. Dans la plupart des cas, les uti­li­sa­teurs peuvent même glisser/déposer les objets cor­res­pon­dants aux endroits souhaités.

Les éditeurs qui prennent en charge le WYSIWYG ont plus de fonctions que la simple con­cep­tion du contenu : il est par exemple souvent possible de publier du contenu via l’éditeur di­rec­te­ment sur votre site Web. De nombreux éditeurs HTML mâchent le travail à leurs uti­li­sa­teurs : ils affichent par exemple les sous-pages du site Web dans une barre latérale bien visible. De plus, il est in­té­res­sant 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 nom­breuses si­tua­tions. Les débutants, en par­ti­cu­lier, peuvent ainsi déjà créer leurs propres sites Web. Dans les sections suivantes, nous avons regroupé pour vous quelques-uns des pro­grammes les plus connus.

Dream­wea­ver

Ma­cro­me­dia a lancé Dream­wea­ver dès 1997 (alors uni­que­ment pour Mac OS). Depuis, le géant du logiciel Adobe a racheté Ma­cro­me­dia.

SeaMonkey Composer

Avec SeaMonkey, les uti­li­sa­teurs ob­tien­nent une suite Internet complète sur leur or­di­na­teur. Outre un na­vi­ga­teur, 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’en­vi­ron­ne­ment de Mozilla. Comme SeaMonkey, la structure de cet éditeur HTML WYSIWYG est très simple.

Brackets

Brackets est distribué par Adobe, mais con­trai­re­ment à Dream­wea­ver, il est open source et dis­po­nible gra­tui­te­ment. Brackets est avant tout un éditeur de texte et non un éditeur WYSIWYG. Avec sa fonction de pré­vi­sua­li­sa­tion, le programme se rapproche néanmoins d’un logiciel d’édition graphique.

Ne­tOb­jects Fusion

La première version de Ne­tOb­jects Fusion est apparue en 1996, dé­ve­lop­pée par d’anciens employés d’Apple. Le principe WYSIWYG défendu par Ne­tOb­jects Fusion ressemble même davantage à un programme de pu­bli­ca­tion assistée par or­di­na­teur qu’à un éditeur HTML typique. Les uti­li­sa­teurs du logiciel or­ga­ni­sent les éléments du site Web par glisser-déposer, au pixel près.

ope­nE­le­ment

ope­nE­le­ment est un autre éditeur HTML WYSIWYG gratuit. Il est basé sur le code Chromium, qui est également à la base du na­vi­ga­teur Chrome de Google. Ici aussi, la cons­truc­tion d’un site Web fonc­tionne en insérant et en déplaçant des éléments dans une vue graphique.

Ro­cket­Cake

L’éditeur HTML WYSIWYG gratuit Ro­cket­Cake ne nécessite en principe pas non plus de con­nais­sances en HTML ou en CSS. La structure de cet éditeur est similaire à celle de son con­cur­rent ope­nE­le­ment.

Au centre se trouve la zone d’édition, à gauche et à droite une liste des éléments du site Web ainsi que la na­vi­ga­tion dans les fichiers. La par­ti­cu­la­rité de ce programme est qu’il permet de créer fa­ci­le­ment des sites Web res­pon­sive pour les appareils mobiles. C’est notamment le rôle de l’éditeur de break­points : Il permet aux web­de­sig­ners de définir des points dans le CSS où la mise en page change en fonction de la taille de l’écran. Bien entendu, Ro­cket­Cake permet également d’éditer di­rec­te­ment le code.

TOWeb

TOWeb de Lauyan Software adopte la même approche WYSIWYG que Ro­cket­Cake. Les deux pro­grammes partagent notamment leur focus sur le design res­pon­sive.

In­con­vé­nients du principe WYSIWYG

Lorsque l’on débute, les éditeurs WYSIWYG peuvent sembler être la solution parfaite : même sans con­nais­sances en HTML ou pro­gram­ma­tion, des documents (Web) adaptés à la pu­bli­ca­tion peuvent être générés sur or­di­na­teur. Mais pour diverses raisons, certains uti­li­sa­teurs préfèrent utiliser un éditeur comme Notepad++, pour lequel du code doit être di­rec­te­ment entré.

• Manque de contrôle : les éditeurs WYSIWYG ef­fec­tuent des mises en forme sur les­quelles l’uti­li­sa­teur ne peut agir qu’en naviguant dans de nom­breuses 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 exac­te­ment ce qui doit se passer avec le texte lors de la com­pi­la­tion. C’est pourquoi certains uti­li­sa­teurs utilisent le langage macro TeX, ou le logiciel LaTeX qui en est dérivé, pour créer des textes destinés à l’im­pres­sion ou des fichiers PDF. Développé à l’origine pour les travaux scien­ti­fiques, TeX permet de respecter des consignes de mise en forme précises et d’insérer plus fa­ci­le­ment des formules ma­thé­ma­tiques et scien­ti­fiques dans le corps du texte.
• Problèmes spé­ci­fiques à Internet et dif­fé­rents types d’affichage : même avec le WYSIWYG, le résultat n’est pas né­ces­sai­re­ment tel qu’il apparaît à l’écran du con­cep­teur du site. En effet, le résultat final unique n’existe pas sur Internet. Les dif­fé­rents systèmes et na­vi­ga­teurs affichent parfois le contenu dif­fé­rem­ment, sans compter que les terminaux mobiles ont eux aussi des modes d’affichage dif­fé­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 con­cep­teurs de sites Web testent gé­né­ra­le­ment leurs pages sur dif­fé­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 pro­fes­sion­nel. Par le passé, les con­cep­teurs de sites Web ont ré­gu­liè­re­ment critiqué ces pro­grammes pour leur pro­duc­tion de code source inu­ti­le­ment gonflé ou erroné. Cela entraîne des temps de char­ge­ment longs et des erreurs d’affichage.