Ryuran.info - Informatique

BBcode, Wyswyg, wikitext

ryuran — Tue, 28 Apr 2009 14:14:00 +0200

Cela fait pas mal de temps que je n'ai pas poster un nouvel article. Aujourd'hui j'ai trouver de quoi vous parler car ayant parcouru le web à la recherche de la solution miracle je n'ai trouvé qu'une réponse :

Il n'existe pas de solution correct pour permettre aux utilisateur de saisir du text riche.

J'ai chercher toutes les possibilité de bbcode à Markdownen passant Textile, Wikitext, zCode et même du coté des wyswyg et des nettoyeurs de xhtml.

BBcode

BBcode qu'est ce que c'est ?

Cette syntaxe était à l'origine très basique. Elle permettait simplement de mettre le texte en gras, souligner, italique ou insérer un lien ou une image. Tout ceci grâce à de balises semblable au html mais avec de crochets.

Exemples

BBcode :
[b]texte en gras[/b]

html équivalent :
texte en gras

Avantages

Le BBcode est fait pour être simple pour les utilisateurs (pas besoin de connaitre le html).
Il est utilisé par la grande majorité des forum à travers le web.

Inconvénients

Il y a plus d'une vingtaine de balises différentes, soit un nombre plus important que les balises xhtml de mise en forme simple usuelles.
Le code est difficile à saisir à cause des crochets "[" et "]" plus difficiles d'accès que les "<" et ">" du html.
BBcode est orienté "mise en forme" et non pas "sens sémantique". Même si les dernières versions changent ce problème, les utilisateur continueront à ne pas prendre en compte le sens sémantique des balises.
Les parseurs usuels génèrent du xhtml invalide pour la plus part et ne corrige pas vraiment le chevauchement de balises ([b]texte [i]en gras[/b] ou en italique[/i] qui est faux).
Les parseurs sont lourds et utilisent trop d'expression régulières. Et plus encore quand on demande que le code généré soit correct (je parle d'expérience).
Il existe de nombreuses variantes (entres différents forums).

Syntaxes Wiki

Les syntaxes Wiki qu'est ce que c'est ?

Les wikis utilisent des langages de balisage léger. Il y en existe plusieurs dont les plus connu et plus utilisés qui sont wikiText, Textil et Markdown.

La syntaxe n'utilise pas de balise comme le bbcode ou le html. Il s'inspire de la mise en page que l'on fait habituellement sur un éditeur de texte simple comme le bloc note (notepad).

Exemple avec markdown

syntaxe :
__texte mis en importance__

html équivalent :
texte mis en importance

Avantages

Très simple d'utilisation. On s'y fait vite.
Très complet.
La syntaxe source est facile à lire et n'est pas pollué de balisage.

Inconvénients

Il existe de nombreuses variantes.
Les parseurs sont aussi peuplés d'innombrable expressions régulières.
Trop complet pour le contenu d'un forum.

zCode (le BBcode XML)

zCode qu'est ce que c'est ?

Le zCode à été créer par le site du zéro pour l'édition de leurs articles ainsi que sur leur forum.

C'est simplement un xml inspiré du bbcode. Une sorte de HTML simplifié et surtout en français.

Exemple

zCode :
<gras>texte mis en importance</gras>

html équivalent :
texte mis en importance

Avantages

Le zCode est fait pour être simple pour les utilisateurs (pas besoin de connaitre le html).
Le sens sémantique est respecté.
Le code est en français.
L'utilisation des chevrons ("<" et ">") rend la saisie plus facile comparé au BBcode.
Donne la possibilité d'utiliser un parseur xml (avec php5 par exemple) donc moins d'expressions régulières.
On peut aussi l'utiliser de différentes façon comme tout ce qui est structuré avec du xml.

Inconvénients

Il est utilisé uniquement par le site du zéro (et par certains de leurs disciples) .
Le xml interdit l'erreur de syntaxe (corriger les erreurs de syntaxe via le parseur ou alerter l'utilisateur si il y a une erreur).
Code en français oui mais pour un site multilingue il faudra plusieurs versions différentes.
La syntaxe n'est pas bien différente du html (c'est un site de formation à la création de site web) donc facile d'utilisation pour les membres. Il faudrait voir si les autres s'y retrouvent.

WysWyg (What you see what you get)

Un éditeur WysWyg qu'est ce que c'est ?

C'est un éditeur entièrement visuel. C'est à dire que la mise en forme ce fait en live comme dans un logiciel de traitement de texte classique.

Avantages

Les utilisateurs n'ont besoins d'aucune connaissance particulière.
Aperçu direct du texte en cours de rédaction avec la mise en forme final.

Inconvénients

Nécessite javascript (ou plugin/extention pour le navigateur).
Le code généré est souvent invalide.
Problème de sécurité (html).

la variante WysWyM (What you see what you Mean)

C'est comme un WYSWYG mais plus orienté vers la sémantique que vers la mise en forme. Pour l'instant il n'en existe qu'un seul, WymEditor. Il est bien avancé mais pas encore aboutis.

Conclusion

Aucune solution ne se démarque par rapport aux autres. Elles ont tous des avantages et des inconvénient. Bien que le zCode est une bonne idée elle est plus avantageuse pour les programmeurs que pour les utilisateur.

La meilleur solution à mon avis

Il faudrait un code xhtml simplifié (ou un nouveau code xml) qui n'aurai pas la limite de la langue qu'à le zCode. Mais entièrement saisis pas WYSWYG pour ne pas demander aux utilisateur d'apprendre un langage.

Avantages

Les utilisateurs n'ont besoins d'aucune connaissance particulière.
Aperçu direct du texte en cours de rédaction avec la mise en forme final.
Le sens sémantique est respecté (en fonction du parseur).
Sans javascript l'utilisation des chevrons ("<" et ">") rend la saisie plus facile comparé au BBcode.
Donne la possibilité d'utiliser un parseur xml (avec php5 par exemple) donc moins d'expressions régulières.
On peut aussi l'utiliser de différentes façon comme tout ce qui est structuré avec du xml.

Inconvénients

Les personnes ne pouvant pas bénéficier de javascript seront désavantagées.
Il faudrait que le système soit normaliser et entretenu par une communauté (penser au plugins pour forums existant).

Remarque : sur le site du zero il y a un aperçu dynamique ce qui est une bonne alternative au wyswyg.

Initiation à l'accessibilité

ryuran — Thu, 02 Aug 2007 14:33:00 +0200

Varouj m'a demandé des informations sur
l'accessibilité des sites Internet. Je me suis donc rendu compte que sur découpe-fr c'est un sujet dont on parle peu et qui pourtant est important. Je rédige donc cet article pour rappeler des souvenirs à certains et en informer d'autre.

Je vais commencer par vous montrer un site qui n'a aucun rapport avec le codage car il sert à apprendre le japonais mais qui à pris toutes les mesures importantes pour être le plus accessible possible : Rapport d'accessibilité de CrapulesCorp

Tous les liens de cette page sont utiles mais je vais en rapeller certains dans la suite de ce billet.

1/ La validation xhtml

La première chose pour une bonne accessibilité d'un site internet c'est que le html soit valide. Pour vérifier si c'est le cas il y différentes solutions.

La première et la plus simple est le validateur officiel du W3C [en] (Il est en anglais ça risque d'en géner certains). Celui de W3C quebec est en français.

Ça c'était la solution à l'ancienne mais il y a mieux : L'extention "HTML VALIDATOR" Firefox [en] (oui c'est encore en anglais, un jours il faudra bien que vous l'appreniez). En plus de valider le xhtml d'origine il vérifie le html généré par les scripts (javascript) ainsi que les différents niveaux de normes d'accessibilité WCAG du WAI (à régler dans les options). Vous vous rendrez compte que Google Adsence génère à lui seul 28 avertissements xhtml c'est pour ça que je me refuse à l'utiliser sur mon blog.

2/ La sémantique

Quel un mot compliqué ! En gros c'est le sens du contenu. Ha ça reste encore flou !

Enfait on pourais utiliser les balises pour leur effet visuel par exemple :

<p>liste de chose : </p>
truc<br/>
machin<br/>
bidule<br/>

Ça, c'est incorrect car le sens sémantique des balises est mauvais. Une balise c'est un saut de ligne. Ça ne sert pas pour une liste. Si on corrige ça correctement ça devrait donné ça :

<p>liste de chose : </p>
<ul>
<li>truc</li>
<li>machin</li>
<li>bidule</li>
</ul>

<ul> est bien la balise qui indique une liste et <li> indique un élément d'une liste. c'est sémantiquement plus correct Car les balise on un sens correct. Aucun validateurs ne peut voir une erreur sémantique et la bonne utilisation des balise reste un choix subjectif mais il reste évident qu'un paragraphe n'est pas un titre.

3/ L'interopérabilité

Encore un mot compliqué ! Sa définition est des plus simple. L'interopérabilité d'un site internet c'est le fait qu'il fonctionne correctement avec tous les navigateurs.

Fonctionner correctement c'est pouvoir accéder à toutes les information du site quelque soit le navigateur et les plugins que l'on a.

C'est assez difficile à mettre en oeuvre. Le plus dur c'est quand on utilise des scripts ou des objets nécessitants un plugin.

Il faut toujours prévoir un texte alternatif. (attribut alt="..." pour les images). Si l'image ne s'affiche pas on doit pouvoir comprendre son sens. Si l'image est juste là pour un soucis d'esthétique (ça ne devrait pas être le cas, le CSS est là pour ça), il faut mettre un attribut alt vide alt="".

Si vous voulez vraiment y aller à fond voici la liste de tout les navigateurs [en].

Si vous voulez une capture d'écran de votre page vu par différents navigateurs sur différents systèmes d'exploitation aller voir le site Browsershots.org [en] (on l'utilise assez souvent sur découpe-fr).

On ne devrait pas trouvé sur internet : Site optimisé pour Internet Explorer 7.0 avec une résolution 1024x768 ou Site optimisé pour Firefox 2.0 avec une résolution 800x600 c'est totalement absurde on ne va pas changer de navigateur et de résolution à chaque fois qu'on change de site.

C'est au site de s'adapter aux différents visiteurs et pas l'inverse.

4/ Scripts

Utiliser des scripts ce n'est pas anti-accessible c'est des fois même un bon point mais il faut que le site soit tout de même utilisable en désactivant Javascript.

Le script Lightbox (Slimbox, Tickbox et autres) par exemple qu'on utilise de temps en temps pour les Folios n'empêche pas un fonctionnement normal des pages si on désactive javascript.

Les texte du genres il faut activer javascript pour voir le contenu de la page, ça ne devrait pas exister sur le web.

Pour testez vos script et les déboguer je vous conseil (en plus de DomInspector de Firefox) l'extention Firebug.

5/ Les objets

J'appelle objets les élément qu'on insère dans une page web avec la balise <object> donc les élément Flash et autres. La il n'y a pas 50 solution pour les rendre accessible. Comme les images il faut un texte alternatif mais là, il n'y a pas d'attribut alt="...".

<object type="application/x-shockwave-flash" data="http://www.ryuran.info/post/2007/08/02/..." height="..." width="...">
<param name="movie" value="...">

<p>Là un texte alternatif. Il peut-être aussi long que souhaité</p>

</object>

Évitez de mettre de télécharger le plugin. Si le navigateur est capable de supporter le plugin il le proposera lui-même à l'utilisateur. Sinon c'est que le navigateur est incapable de supporter ce plugin ou que l'utilisateur se refuse à le télécharger alors lui demander de faire un truc qu'il ne veux pas faire ou qu'il ne peut pas faire c'est stupide.

6/ Les outils d'aide à la validation d'accessibilité

Il n'éxiste pas de validateurs d'accessibilité mais des outils d'aide à la validation. L'accessibilité c'est u point de vue humain, il ne faut donc pas prendre ce que disent ces validateurs au pied de la lettre. L'extension HTML Validator de Firefox que l'on a cité précédemment peu déjà faire une vérification des 3 niveaux de normes d'accessibilité WCAG du WAI.

Mais pour moi, le meilleur validateur pour l'accessibilité c'est Ocawa qui propose aussi une toolbar pour Firefox (il y en a d'autres mais celui-là est bien complet et surtout francophone).

7/ Où trouver d'autres informations ?

Les sites les plus importants.

Openweb.eu.org: Les nouvelles sur l'accessibilité. Le menu à droite est très intéressant car il pointe sur des articles d'autres blogs qui traitent du sujet.
Pompage.net: C'est surement une des meilleure source d'information francophone sur le bon codage d'un site internet. Les articles sont très biens détaillés.
Opquast.com: Le site sur les bonnes pratiques d'internet.
Alsacreations.com: Ce site est déjà connu par beaucoup d'entre vous. Il y a de nombreux articles sur l'accessibilité.

Des articles intéressants :

(n'hésitez pas à lire les commentaires qui sont aussi très instructifs)

Si vous avez des commentaires ou des infos à ajouter n'hésitez pas.

Creative Commons

ryuran — Thu, 07 Jun 2007 12:49:00 +0000

Qu'est ce que c'est et comment ça marche ? Ce sont deux questions que je me suis posé la première fois que j’ai vu apparaître ces termes.

J’ai vite trouvé une réponse à la première. Creative Commons est une licence crée pour le partage et la diffusion des œuvres (Jusque là pas de problème). Avec cette licence on peut interdire l’utilisation de l’œuvre à but commercial (ça tombe bien c’est ce que je veux). Mais la vrai question est comment appliquer cette licence à l’œuvre en question.

La réponse est donnée par une BD simple à comprendre trouvée sur internet.

Merci selby !

Comment choisir mon linux ?

ryuran — Fri, 10 Nov 2006 21:45:00 +0000

J'avais pensé à Gentoo mais j'ai un doute.

J'aimerais un linux avec une interface facilement modelable (ce serait génial si on pouvait faire le design en css). J'aimerais aussi qu'il reconnaisse ma carte wifi et mon réseau sans fil que je ne galère pas trop avec la live-box. J'aimerais qui soit stable (d'un autre coté j'ai vécu avec windows donc tant que c'est plus stable que windows ça serait le minimum).

Si quelqu'un peut me conseiller je veux bien son mail merci à vous.

< et >

ryuran — Sat, 03 Jun 2006 14:10:00 +0000

Je me plante tout le temps avec ces deux entités html. En déconnant avec un ami j'ai fini par trouver un moyen mnémotechnique pour ne pas me tromper entre ces deux symboles (< et > servent respectivement à afficher < et > quand on les met dans une page html). Je me disais à chaque fois "g" comme "gauche" donc je met > à gauche et bah non là était mon erreur en fait c'est plutôt "l" comme "left" donc je met < à gauche. C'est quand même gênant on ne sait donc pas lequel est à gauche et lequel à droite. La solution trouvée est de se rapporter au code de la route. En France on roule à droite donc le "g" comme "gauche" est à droite car il est français et le "l" comme "left" est à gauche car il est en anglais Et les anglais roulent à gauche. C'est en fait comme le sens dans lequel roulent les voitures dans leur pays respectifs.

Donc dans l'ordre on a < et > ce qui donne < et >.

Majuscules à accents

ryuran — Thu, 01 Jun 2006 19:43:00 +0000

J'ai toujours été embêté par les majuscules à accent ou à cédille quand il fallait écrire avec mon PC. Donc j'ai cherché un petit peu pour trouver comment écrire ce genre de lettres au clavier. J'ai trouvé les numéros Alt + ???? sur cette page : http://www.cylibris.com/fr/auteurs/bar_typo.html.

Voici la liste des caractères souvents utilisés :

Alt 0171 guillemet français ouvrant : «
Alt 0187 guillemet français fermant : »
Alt 0151 tiret cadratin : —
Alt 0192 A accent grave : À
Alt 0194 A accent circonflexe : Â
Alt 0196 A tréma : Ä
Alt 0199 C capitale cédille : Ç
Alt 0200 E accent grave : È
Alt 0201 E accent aigu : É
Alt 0202 E accent circonflexe : Ê
Alt 0203 E tréma : Ë
Alt 0206 I accent circonflexe : Î
Alt 0207 I tréma : Ï
Alt 0212 O accent circonflexe : Ô
Alt 0214 O tréma : Ö
Alt 0217 U accent grave : Ù

Comme mon CMS est en utf-8, je peux me permettre de ne pas rechercher les entités html pour ce genre de caractères.

Maintenant je vais pouvoir dire : Ça va ? sur GoogleTalk avec une majuscule.

Pour ceux qui codent encore en iso-truc-machin, on peut trouver une liste assez complête des entitées html sur Comment ça marche : Listes des entités html sur www.commentcamarche.net

Encodage utf-8 PHP/mySQL

ryuran — Sat, 06 May 2006 16:33:00 +0000

Je ne dois pas l'avoir dit encore sur mon blog mais je suis en plein développement d'un petit CMS en php. Sa particularité est d'être extensible, multilingue et surtout il peut aussi bien servir pour un gros portail que pour un petit site. Bien sûr tout ça dans le respect des standards.

En fait si j'écris cet article c'est pour vous raconter les problèmes que j'ai rencontré au niveau de l'encodage utf-8 pour ce CMS. Aussi bien au niveau du php et de la base de donnée mySQL.

Au début, on avait simplement tout mis en iso-8859-1. Le CMS marchait correctement mais on s'est dit que si on a besoin de rendre le CMS multilingue on va avoir des problèmes à cause de cet encodage. Donc on a décidé de passer à l'utf-8. Donc on fait des recherches et on se rencontre qu'il ne suffit pas de faire passer tout l'affichage de php dans la fonction utf8_encode() et de mettre dans le html <meta http-equiv="content-Type" content="text/html; charset=utf-8" />. Ce serait si simple si ça suffisait.

Ensuite on a des problèmes avec la base de donnée car la bdd reçoit du utf-8 par les formulaires (à cause de l'encodage de la page) et l'enregistre comme de l'iso-8859-1 puis quand php récupère ça et le met en utf-8 avec utf8_encode() ça nous donne de jolis points d'interrogation. on a essayé utf8_decode sur tout ce qui sort de la bdd mais là aussi on a un problème, cette fonction ne marche pas correctement. On s'est dit que c'était peut-être dû à l'encodage de la base de donnée et de son inter-classement donc on a passé toute la base de donnée en utf-8 ce qui n'a pas vraiment été simple.

Le résultat a été le même donc on a voulu passer tout le code php en utf-8. Avec notepad++ ce n'était pas trop dur mais on a préféré passer à pspad qui est un peu diffèrent dans son utilisation mais très pratique pour le php. On a donc enlevé cette fichue fonction utf8_encode() et tous nos fichiers ont été mis en utf-8. On a bien sûr été informé du problème de traitement de chaîne de caractères en php et sql dû à ce changement d'encodage mais nous n'avons pas vraiment besoin de traiter des chaînes de caractères qui comportent autre chose que des caractères d'ASCII de base comme les url.

Finalement ça marche correctement mais il y a un problème avec phpmyadmin. Quand on modifie des données via l'interface de phpmyadmin, avec les formulaires habituels, il encode le résultat dans la bdd en iso-8859-1 ce qui est un peu embêtant car on se retrouve encore avec des points d'interrogations sur notre page. Je cherche un autre système de gestion de base de donnée qui n'a pas ce problème mais je n'ai encore rien trouvé.