Un mot sur les WYSIWYG (interfaces d'entrée de données web)

Un mot sur les WYSIWYG (interfaces d'entrée de données web)

6 Nov

Qu'est-ce qu'un WYSIWYG?

"WYSIWYG" (What you see is what you getest un acronyme familier à tous ceux qui travaillent dans les “interwebs”. Il décrit un élément de l'interface utilisateur nécessaire à l'édition de contenu en ligne.

Souvent, un WYSIWYG se manifeste sous la forme d’une liste d’options de formatage au dessus d’un champs texte.

Ci-dessous, le WYSIWYG de Wordpress:

Cet article se penche sur l’édition de contenu en ligne et explore des alternatives aux solutions traditionnelles.

Pourquoi utiliser un WYSIWYG?

Nous travaillons quotidiennement avec des sytèmes de gestion de contenu pour permettre à nos clients de mettre à jour leur propre site internet. Le WYSIWYG permet à un éditeur de pouvoir mettre en forme le contenu de ses pages sans connaissance du code HTML.

Les WYSIWYG transforment le contenu rédigé par l’utilisateur en code HTML. Ça permet de créer des balises sémantiques qui en plus de mettre en forme le texte, informent Google et les outils d’accessibilités de l’importance de chaque élément.

Le problème des WYSIWYG

Malheureusement, les WYSIWYG, bien qu’ils aient atteint un niveau avancé de mise en forme, ne remplissent pas complètement leurs missions sémantiques. Tout comme dans un logiciel d’édition de texte, la mise en forme prend souvent le dessus sur l’organisation des idées.

Lorsqu’il s’agit de code HTML, la moindre erreur peut influencer les performances SEO et même la cohérence d’une page. L’organisation d’une page en titre, sous-titre, paragraphe, liste et tableau est primordiale à une esthétique cohérente et à une compréhension optimale du contenu.

Comme il peine à deviner ce que l’auteur signifie réellement lorsqu’il ajuste l’affichage, le WYSIWYG génère du code HTML souvent approximatif.

Quelles solutions existent?

Il y a des centaines de solutions possibles pour l’intégration d’un WYSIWYG, en voici quelques-unes qui ont retenu notre attention.

TinyMCE

Wysiwyg très populaire et très répandu. Il est populaire grâce à son intégration dans Wordpress ainsi qu’à sa large gamme de configurations.

http://www.tinymce.com/

CKEditor

Autre Wysiwyg très répendu utilisé dans plusieurs CMS.

http://ckeditor.com/

Textile / Wiki syntax

Une alternative populaire aux WYSIWYG est l’utilisation d’un language alternative au HTML. Textile et Wiki syntax sont des langages de présentation très simples à utiliser, développés pour séparer le contenu de l’affichage. Ce type de langage est souvent utilisé dans les “wiki”.

Bien qu’ils ne soient pas très élégants, ils ont l’avantage d’être sécuritaires car ils empêchent, par leur conception, l’insertion de code malicieux. Leur simplicité fait qu’il sont faciles à enseigner à un néophyte.

http://en.wikipedia.org/wiki/Textile_(markup_language)
https://www.dokuwiki.org/syntax

Markitup

Pour enchaîner avec Textile voici un WYSIWYG qui supporte ce type de language de présentation. Markit up supporte aussi plusieurs autres formats et est une solution élégante pour de l’édition simple de contenu.

http://markitup.jaysalvat.com/examples/textile/

WYSIWYM

Cet acronym, “What you see is what you MEAN, insiste sur la sémantique du texte en informant l’utilisateur des blocs qu’il crée. Il est loin d’être au point et, entre nous, a une interface assez moche, mais il apporte une approche intéressante par rapport à la rédation en ligne.

http://www.wymeditor.org/
http://files.wymeditor.org/wymeditor/examples/01-basic.html

Le futur des WYSIWYG

Le WYSIWYG seront de plus en plus simple à utiliser et efficaces. Certains outils déjà disponibles implémentent des solutions adaptées au web et parfois plus intéressantes qu’un éditeur de texte traditionnel.

Google Drive

Le WYSIWYG de l’éditeur de texte de Google est beau, simple, non-intrusif et efficace au niveau sémantique. Google Drive permet déjà de publier des textes sur le web à partir de son interface utilisateur. Il fournit un API pour connecter à des applications externes ce qui laisse présager l’apparition futur de module pour les CMS. Google Drive est en ligne depuis avril 2012 et c’est définitivement un produit à surveiller.

http://drive.google.com

Substance

Substance est, tout comme Google drive, une plateforme collaborative d’édition de document. La différence majeure entre Drive et Substance est qu’au lieu d’essayer de remplacer Word, il se concentre sur l’organisation du texte. Bien que cet outil semble plus approprié à la création de long documents ou même de livres, son approche sémantique peut être très intéressante pour l’édition sur le web.

Substance est un produit experimental basé sur une nouvelle technologie, Node.js. Ce type de technologie vise à améliorer les interactions serveur/client et va certainement permettre le développement d’outils d’édition de contenu en ligne toujours plus efficaces.

http://interior.substance.io/

Aloha Editor

Aloha Editor est un tout nouveau genre de WYSIWYG et est celui qui se rapproche le plus de la signification litteral de l’acronyme. Il permet l’édition de contenu directement dans la page html sans aucune intervention d’un formulaire. Notre intérêt s’y porte d’autant plus que (spoiler alert) Drupal 8 risque d’inclure "core" le support de cet outils hors du commun!

http://aloha-editor.org/

Tags :

Ajouter un commentaire