davidtouvet.com

Si comme moi vous n’arrivez toujours pas à vous faire à l’éditeur WYSIWYG de WordPress (essayez de copier-coller un code embed provenant de youtube par exemple en ayant pris soin avant de basculer en mode HTML et vous verrez le désastre…), vous n’avez comme autre choix que d’utiliser les quicktags de WordPress, sorte de petits boutons cliquables nous épargnant la saisie fastidieuse des balises HTML.

Eh bien, sachez qu’il est possible de les éditer ces petits boutons pour se configurer la barre quicktags de nos rêve. Deux cadeaux: un tutoriel qui explique tout cela et une barre améliorée de la mort qu’il suffit de charger sur son serveur à la place de l’originale.

Par exemple, lorsque j’ajoute une citation, la barre orginale me permet en cliquant sur blockquote d’obtenir ceci:

<blockquote></blockquote>

Jusqu’à présent, je devais rajouter à la main un attribut cite et la mention source pour obtenir ceci:

<blockquote cite="">

Source</blockquote>

Il suffit de repérer dans le fichier quicktags.js le code suivant:

edButtons[edButtons.length] =
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote>'
,'</blockquote>\n\n'
,'q'
);

et de remplacer par

edButtons[edButtons.length] =
new edButton('ed_block'
,'b-quote'
,'\n\n<blockquote cite="">'
,'\n\nSource</blockquote>\n\n'
,'q'
);

Et pour finir en beauté, on remarquera que l’avant-dernière ligne indique le raccourci clavier du quicktag, ici “q”. Sur OS X et Firefox, utilisez la touche Ctrl+q, sur Windows, essayez par exemple Alt+q ou ?

WordPress Francophone publie un mode d’emploi bienvenue pour étendre les fonctionnalités de l’éditeur visuel de WordPress : TinyMCE. Merci

C’est assez logique, mais il fallait le dire. Ou le lire sur “Attention aux recherches avec les éditeurs de contenu WYSIWYG“.

S’il est attrayant d’intégrer un éditeur de contenu WYSIWYG dans ses applications web, un point sur lequel il convient de faire attention est la recherche. En effet, ce type d’éditeur produit du code HTML que l’on enregistre typiquement dans une base de données. Le problème est qu’une recherche sur le contenu saisi par ce biais peut être largement déficiente, et ce pour deux raisons principales :

* Parce qu’on peut ne pas retrouver les informations recherchées à cause de caractères spéciaux transformés en entités HTML, et
* Plus grave, parce qu’on peut retrouver des informations liées à la présentation : couleurs (red, blue, etc), polices (”times new roman”, etc), ou même plus simplement des balises HTML (strong, etc).

Source

… sans connaître forcément le langage HTML. Lorsque vous devez fournir un contenu pour une page web sous forme HTML et que vous n’avez rien sous la main pour cela, vous pouvez utiliser l’éditeur de démonstration de FCKeditor en ligne.

FCKeditor est un éditeur WYSIWYG que l’on retrouve dans de nombreux sites web pour composer du contenu. Pour ceux qui auraient de la peine avec ce terme barbare, en voici une définition pêchée sur Wikipédia:

WYSIWYG est un acronyme (de la locution anglaise What you see is what you get signifiant littéralement « ce que vous voyez est ce que vous obtenez » ou plus élégamment « tel affichage, tel résultat ») couramment utilisé en informatique pour désigner les interfaces utilisateur graphiques permettant de composer visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou d’image. Il désigne, de fait, une interface « intuitive » : l’utilisateur voit directement à l’écran à quoi ressemblera le résultat final (imprimé).

Source

Marche à suivre: se rendre sur l’éditeur de démonstration de FCKeditor et taper son texte comme on le ferait avec un traitement de texte par exemple. Les boutons sont suffisamment explicites pour permettre d’y ajouter des liens vers des pages web ou des images par exemple. Cliquer à la fin sur l’icône “Source” et vous voilà prêt à copier-coller du beau code HTML. Facile et rapide non?

Coup de gueule sur Gadgetopia.com. L’auteur estime que les gens ne maîtrisent pas la compétence de formatage d’un texte, que ce soit à l’époque sur Word, puis sur des éditeurs web tels que Frontpage ou Dreamweaver et maintenant avec les éditeurs WYSIWYG.

C’est un des problèmes des systèmes de gestion de contenu (CMS). En général, le concepteur coupe les éléments de ses pages en petits paquets (ici le titre, ici le nom de l’auteur, ici le texte principal, etc.) et évite ainsi que l’éditeur final ne puisse commettre des erreurs d’édition et / ou de formatage. Malheureusement, certains champs ne peuvent pas être coupés en petits morceaux, notamment le champ qui contiendra le texte principal.

Une parade fut l’introduction d’éditeurs WYSIWYG, c’est à dire une panoplie de petits boutons “à la Word” pour aider l’éditeur à bien formater son texte et une possibilité de voir le résultat final et non pas du code HTML. On avait pensé trouver la solution pour qu’enfin les textes soient bien formatés. Pour l’auteur de cet article, le problème n’est pas de proposer ou non de tels éditeurs mais de savoir comment formater un texte. Pour lui, c’est bien plutôt d’un manque de compétence de base en formatage de texte qui explique les “erreurs” commises par les éditeurs. Voici quelques exemples d’erreurs classiques:

• No use of headings
• No use of bulleted or numbered lists
• Overuse of underlining and boldface
• No concept of whitespace
• Paragraphs that are way too long for the Web
• No awareness of the difference between a line break and a paragraph break
• No awareness of what terms should be hyperlinked, and where they should link
• No awareness of how images should be positioned
• A desire to center every heading, title, and subtitle
• Attempts to “hack” horizontal whitespace with tabs and consecutive spaces
• Overly large tables without headings, captions, or consistent spacing

Je ne peux qu’acquiescer. C’est en effet un des problèmes principal que nous rencontrons avec nos applications. La seule solution jusqu’à présent est de fournir aux éditeurs un guide expliquant précisément comment écrire pour tel site. Mais même ainsi, on retrouve des font face= un peu partout… Mais je vais quand même essayer l’éditeur proposé dans l’article: eWebEditPro.

net2ftp ne remplacera sûrement les mastodontes du FTP mais se révèle très agréable à utiliser notamment lorsque l’on n’est pas devant sa machine préférée. net2ftp tourne sur un serveur web auquel on accède par l’entremise d’un navigateur web. Pour se connecter à son compte FTP, il suffit de se rendre sur la page d’accueil de net2ftp.

Les fonctionnalités sont impressionnantes. On retiendra par exemple la possibilité d’éditer des fichiers en ligne (même du HTML en WYSIWYG), de télécharger plusieurs documents qui seront automatiquement zippés, de gérer les droits des fichiers (chmod), syntax highlighting, de rechercher des des mots ou des phrases, de calculer la taille de fichiers ou de dossiers, bref du bon boulot!

Pour les plus curieux, une gallerie de captures d’écran de net2ftp est disponible. Il est également possible d’installer net2ftp sur son propre serveur et de bénéficier ainsi d’autres types de fonctionnalités administratives.

Dix raisons d’utiliser XHTML, les CSS et le DOM est un bon article qui répertorie 10 avantages d’utiliser ces 3 standards W3C.

1. Gagner du temps en séparant le contenu de la présentation
2. Réduire la charge du serveur: en effet, le fichier CSS n’est téléchargé qu’une fois et mis en cache
3. Favoriser l’accessibilité
4. Rendre le code plus lisible
5. Améliorer l’expérience utilisateur: en permettant aux utilisateurs de ne plus être prisonniers d’une seule mise en page
6. Plus de versions imprimables spécifiques à prévoir
7. Anticiper sur le futur
8. Faire plaisir aux moteurs de recherche
9. L’apprentissage est facile
10. S’ouvrir à de nouveaux visiteurs

Bonne remarque finale: De même, si chaque page est créée par des rédacteurs plutôt que des techniciens, le risque d’invalider les pages est décuplé. J’ai constaté cela sur un des sites sur lequel je travaille. C’est bien beau de travailler avec ces standards mais il faut aussi que les utilisateurs qui insèrent du contenu les respectent. D’où l’idée d’utiliser des formulaires WYSIWYG qui définiront correctement le contenu.