css 4 design » Editeur HTML http://css4design.com Le blog de l'intégrateur web Sun, 05 Feb 2012 18:10:56 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Maqetta — Editeur HTML5 / Javascript en ligne ou à emporter http://css4design.com/maqetta-editeur-html5-javascript http://css4design.com/maqetta-editeur-html5-javascript#comments Wed, 20 Apr 2011 13:11:01 +0000 Bruno Bichet http://css4design.com/?p=9876

Maqetta est un éditeur HTML5 open source lancé par IBM sous l’égide de la fondation Dojo. Cet éditeur existe en deux parfums : une version en ligne en mode Saas et un logiciel de 42,7 Mo à télécharger sur son poste de travail. La version en ligne est déjà très intéressante : l’ajout des contrôles jQuery UI s’effectue par glissé-déposé et l’interface est suffisamment WYSIWYG pour voir les Menus à onglets (Tabs) ou les Menus en accordéons (Accordions) fonctionner pour de vrai. On peut passer à volonté du mode «Design» au code «Source» ou avoir les deux à l’écran, horizontalement ou verticalement.

Maqetta : une interface complète pour cet éditeur HTML5 / Javascript en ligne très prometteur (existe en version de bureau).

Interface de Maqetta en mode Saas. Cliquez pour agrandir l'image.

Maqetta en 5 mn chrono

  • Les balises disponibles en glissé-déposé sont : `div`, `span`, `table`, `a`, `label`, `h1`, `h2`, `h3`, `iframe`, `img`. On est loin de la richesse sémantique de HTML5 :-(
  • Les fichiers s’ajoutent les uns à côté des autres dans des onglets :-)
  • Maquetta permet de gérer toute l’aborescence de votre projet web. Un projet de test est mis à votre disposition pour découvrir les possibilité de l’éditeur qui propose par ailleurs un tutoriel (en anglais) :-)
  • Un module HTML Rich Text permet de saisir du texte formaté, une sorte de WYSIWYG dans le WYSIWYG qui peut s’avérer très pratique pour saisir rapidement du texte à l’intérieur des balises `div` ou `p`, etc. :-)
  • Outre jQuery, Maqetta inclut les bibliothèques Dojo et YUI. :-)
  • L’interface propose de nombreuses palettes : Widgets, Fichiers, Propriétés, Etats, Outline. :-)
  • Interface parfois un peu longue à la détente et semble mettre le CPU sur les rotules :-(

Mes deux cents

Je garde l’installation de la version bureau pour plus tard. Cette version de Maqetta en ligne est déjà pas mal du tout et mérite qu’on y ouvre un compte. N’hésitez pas à me dire ce que vous en pensez et à partager les découvertes que vous avez faites !

 

Articles sur le même sujet

flattr this!

]]> http://css4design.com/maqetta-editeur-html5-javascript/feed 1 BlueGriffon — Un éditeur HTML5 & CSS3 WYSIWYG avec des morceaux de Firefox http://css4design.com/bluegriffon-editeur-html5-css3-wysiwyg http://css4design.com/bluegriffon-editeur-html5-css3-wysiwyg#comments Sun, 23 Jan 2011 17:58:53 +0000 Bruno Bichet http://css4design.com/?p=8985

Après ma longue liste commentée des éditeurs HTML plus ou moins WYSIWYG, voici mes premières impressions sur BlueGriffon. C’est un éditeur HTML complètement WYSIWYG dont l’affichage est confié au moteur de rendu qui équipe le navigateur Firefox. Le créateur s’y connait, puisqu’il s’agit de Daniel Glazman (@glazou pour les intimes) qui travaillait déjà sur Composer, l’éditeur HTML de la suite Netscape, puis sur Nvu dans le cadre de Disruptive Innovations. Il fait partie du groupe de travail de normalisation du langage CSS au W3C : c’est un vrai spécialiste des CSS.

BlueGriffon : un éditeur HTML5 et CSS3 WYSIWYG prêt pour WAI-ARIA pour créer vos pages web directement dans l’éditeur !

«Un éditeur Web dernière-génération basé sur le moteur de rendu de Firefox»

Prêt pour ARIA, HTML5 et CSS3

La particularité de BlueGriffon est d’entrer dans la modernité en prenant en charge HTML5 et CSS3. Il est possible d’appliquer à vos balises HTML un rôles ARIA parmi les 73 options disponibles dans une liste déroulante. Les styles CSS sont accessibles depuis le panneau «Propriétés de style» qui propose d’appliquer les CSS de manière intuitive à l’aide de menus déroulants, de sélecteurs de couleurs, de cases à cocher et d’options à sélectionner.

Bref, on se croirait presque dans Dreamweaver, le support des CSS3 (colonnes, dégradés, ombres portées, etc.) en plus. L’application des styles s’effectue au choix, sur un identifiant, une classe ou un style en ligne. A noter que les styles appliqués depuis les menus déroulants en dehors du panneau de style produisent des styles en ligne, comme le centrage des éléments, par exemple.

Le côté WYSIWYG de BlueGriffon ne vous empêchera pas de basculer vers le mode «Source» pour voir à quoi ressemble le code qui est relativement propre et clair, même si l’on trouve ça et là, des retours chariots intempestifs sous forme de balises BR. J’aurais préféré que le logiciel utilise des paragraphes par défaut, à modifier selon les besoins par la suite.

FontSquirrel et Google Font Directory

BlueGriffon permet de choisir directement les polices de caractère issues de FontSquirrel et de Google Font Directory. Pour le premier, Bluegriffon va même jusqu’à télécharger le kit comprenant la police de caractère choisie sous les différents formats nécessaires pour en garantir l’affichage sur tout les navigateurs, ce qui est très, mais alors très intéressant. D’autant plus que la police de caractère choisie est prévisualisée en Direct live. Je vous recommande fortement la lecture des Bonnes pratiques pour les déclarations @font-face pour aller plus loin sur l’utilisation de de la propriété Font Face.

Extensions

Il est possible d’ajouter des modules externes à BlueGriffon pour la modique somme de 29,26€ TTC jusqu’à la sortie de la version 1.0 : mode plein écran, compteur de mots, insertion de bouts de code en un clic, gestion d’une boite à outils, gestion des formules MathML et LaTeX, gestion des tableaux. Par ailleurs, des gestionnaires de modèle, de projet, de script et de WebFonts sont actuellement en projet.

Pas glop

Cette première prise de contact avec ce logiciel se solde par un avis mitigé : j’ai l’impression que les professionnels du web ne seront probablement pas comblés et que les débutants ne parviendront pas vraiment à faire ce qu’ils veulent, sauf peut-être dans le cadre de la production d’affiches où les effets CSS3 WYSIWYG à base d’ombres portés, de dégradés, etc. feront merveille.

Glop glop

Un des points fort du logiciel est l’application des feuilles de styles externes à l’ouverture d’un document, ce qui rend BlueGriffon intéressant pour modifier les textes contenus dans un document complexe sans se perdre dans les méandres du code. En ce qui concerne la méthode de travail avec un éditeur vraiment WYSIWYG on peut dire qu’après le design dans le navigateur, BlueGriffon inaugure peut-être le design dans l’éditeur HTML. A quand une fusion entre un logiciel comme Gimp et BlueGriffon pour créer et intégrer dans la foulée ?

BlueGriffon en bref

N’hésitez pas à partager vos impressions sur l’intérêt du WYSIWYG en matière d’intégration web en général et sur BlueGriffon en particulier.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/bluegriffon-editeur-html5-css3-wysiwyg/feed 11 Markdown on Save — L’ami HTML de Markdown pour WordPress http://css4design.com/markdown-on-save-wordpress-html http://css4design.com/markdown-on-save-wordpress-html#comments Fri, 15 Oct 2010 15:44:35 +0000 Bruno Bichet http://css4design.com/?p=7425

Markdown on Save est un plugin WordPress qui permet de rédiger des articles avec la syntaxe Markdown tout en enregistrant la version HTML dans en base de donnée. La version Markdown est sauvergardée dans une nouvelle table post_content_formatted pour conserver l’intégrité de vos articles. En l’absence du plugin Markdown, c’est la version HTML qui est enregistrée dans la table post_content, comme d’habitude.

Markdown on Save

Ce plugin présente l’avantage d’accélérer l’affichage de vos articles puisqu’il n’est pas nécessaire de les convertir à la volée depuis la syntaxe Markdown vers la version HTML. Lors de la modification d’un article, c’est la version Markdown qui s’affiche. Attention toutefois aux éditeurs externes qui vous feront perdre la version Markdown de votre billet, ce qui en soi n’est pas dramatique.

C’est quoi Markdown ?

Markdown est un convertisseur qui transforme du texte « brut » en code XHTML. C’est une alternative aux éditeurs WYSIWYG qui ne s’adaptent pas forcément à tous les besoins. Markdown vous permettra de rédiger des textes en utilisant un format de balisage de texte simple à écrire et à lire, puis à le convertir en code XHTML (ou HTML en option) structurellement valide.

La syntaxe Markdown en détail. Cliquez sur l'image pour accéder au site de Michel Fortin

Un des intérêts de Markdown est qu’il s’agit d’un simple fichier que l’on peut utiliser dans n’importe quel projet et pas nécessairement dans WordPress. Il ne s’agit pas d’un éditeur HTML WYSIWYG, mais c’est une des rares solutions qui permet d’obtenir des imbrications de balises complexes avec un minimum d’effort.

Lire Markdown, un plugin WordPress pour produire du XHTML facilement, rapidement et proprement pour plus d’information.

Merci beaucoup à Li-An pour m’avoir prévenu de la sortie de ce plugin très utile o/

Articles sur le même sujet

flattr this!

]]> http://css4design.com/markdown-on-save-wordpress-html/feed 2 30+ éditeurs HTML plus ou moins WYSIWYG http://css4design.com/editeurs-html-wysiwyg http://css4design.com/editeurs-html-wysiwyg#comments Tue, 14 Sep 2010 12:45:18 +0000 Bruno Bichet http://css4design.com/?p=4758

Qu’il s’agisse de créer une page web ou de permettre aux utilisateurs de mettre en forme leurs articles ou leurs commentaires, on a toujours besoin d’un éditeur HTML à consommer sur place ou à emporter. Voici une sélection de plus de 30 éditeurs HTML (tirée en grande partie de ma liste des 1000 ressources pour webdesigner) qui devrait occuper les longues soirées d’automne qui s’annoncent.

Editeurs de page web Windows (et/ou multi-OS)

Eclipse
Eclipse est un environnement de développement intégré (IDE) lancé par IBM pour développer des applications en Java. Son architecture est développée autour de la notion de plugins, ce qui permet de l’utiliser pour le développement web où il remplacera sans peine un Dreamweaver ou un Notepad++ grâce notamment aux « plugins » suivants :
  • WTP (Web Tools Platform) — Reconnait les formats HTML, CSS, JSP, JSF, javascript, XML, DTD, XSLT… (coloration syntaxique, auto-complétion, validation et aide à la saisie des fichiers XML par la DTD associée, etc.)
  • Aptana — Mêmes fonctionnalités que WTP. L’auto-complétion des fichiers CSS donne la compatibilité (IE et Firefox) des différentes balises de style, Débugger Javascript
  • ATF (Ajax Toolkit Framework) — Prise en compte du langage AJAX dans le développement web
  • Amateras Eclipse HTMLEditor — Reconnait les formats HTML, CSS, JSP, javascript, XML, DTD… avec un éditeur graphique de pages
  • X-Men — Editeur de fichiers XML (non maintenu depuis 2003)
  • OxygenXML — Prise en charge du format XML, DTD, XML SCHEMA, et XSLT (avec un débugger de feuilles de style XSLT)
  • EclipseTidy — Editeur de fichiers HTML et XML
  • eZing Builder — Editeur WYSIWYG de pages web (HTML)
  • Euromath 2 — Editeur WYSIWYG de fichiers XML permettant d’écrire des expressions mathématiques (un peu de la même manière qu’avec Latex)
  • EclipseXSLT — Création Gestion avancée des fichiers XSLT, avec la coloration syntaxique, la possibilité de créer plusieurs configurations de style applicables à un même fichier XML, etc.
Retrouvez la liste complète des plugins Eclipse sous forme d’un PDF mis à jour par Benoît Courtine.
Netbeans
Dans la même catégorie qu’Eclipse, Netbeans est une pure merveille. Prévu pour développer en Java, il existe des versions spécifiques pour développer en PHP, Ruby ou C++. Je m’en sers pour faire de l’intégration HTML & CSS dans un environnement PHP : il faut dire que son explorateur de code est très utile, sans compter les différentes aides comme l’auto-complétion et le «plié-déplié» des portions de code. Cerise sur le gâteau, Netbeans est capable de repérer automatiquement les balises fermantes.
Le seul défaut majeur de Netbeans est la lourdeurs inhérente aux applications écrites en Java d’une manière générale.
Dreamweaver
Cet éditeur de pages web fut créé par Macromedia puis racheté par Adobe. La fonction chercher-remplacer plus que complète (il faudrait un tutoriel pour faire le tour de la question) et la gestion multi-sites avec le transfert FTP méritent à eux seuls l’achat du produit. L’aspect ouiziouigue du bouzin est encore – dans la version CS3 – réservé aux gadgétophiles.
Le gros point noir de Dreamweaver est sa gestion fantaisiste du format UTF-8 qui nécessite un passage préalable dans un vrai éditeur comme Notepad++…
Notepad++
Quand Dreamweaver m’ennuie, c’est vers Notepad++ que je me tourne, tant sa simplicité apparente est reposante. Il prend en charge la coloration syntaxique de pratiquement tous les langages, et ses fonctions de « traitement » de textes sont impressionnantes (même si je n’en n’utilise pas le dixième).
Les plus : Notepad++ est capable de plier-déplier les blocs de code et possède un explorateur de fichier. De plus, utilisé conjointement avec FileZilla (en le spécifiant comme éditeur de texte distant, par exemple), vous avez une configuration légère pour trois fois rien ;)
Depuis la version 5.7, notepad++ est capable de répérer automatiquement les balises ouvrantes et fermantes.
Les moins : l’auto-complétion des propriétés CSS n’est pas vraiment contextuelle (contrairement à Dreamweaver).
KompoZer
KompoZer — Développé à partir de la version 1.0 de Nvu, ce logiciel reprend à son compte la gestion des plugins et des thème à la Gecko (Firefox), ce qui semble prometteur pour l’avenir. Des fondations de Nvu, KompoZer semble avoir gardé le goût de la non-simplicité pour la gestion des feuilles de style, notamment.
Intype
Intype — Ce puissant éditeur de code est d’après p4bl0 l’équivalent de TextMate sur Windows. Encore en version Alpha, vous pourrez suivre l’évolution du développement de cet éditeur prometteur sur le blog. Je l’utile pour comme logiciel par défaut pour ouvrir les .css auxquels je veux juste donner un coup d’oeil.
HTML-Kit
HTML-Kit — J’ai une relation ambiguë avec ce logiciel : je l’installe aussi souvent que je le désinstalle à cause de son interface peu intuitive qui finit toujours par me gêner avant que je trouve mes marques. Mais c’est un très bon produit et je ne désespère pas de m’y adapter un jour !
Il est possible d’avoir HTML-Kit en français avec une présentation du logiciel en prime.
UltraEdit-32
UltraEdit-32 — C’est un éditeur de code source qui supporte la plupart des langages (C++, PHP, HTML, VB Perl, Java). Il dispose aussi d’un module FTP et permet – comme Notepad++ d’enregistrer des macro-commandes pour les tâches répétitives.
Ce n’est pas un logiciel gratuit, mais la version UltraEdit-32 Professional Text Editor ne coûte que 34€, soit 12 fois moins que Dreamweaver CS3 !
Jedit
Jedit –C’est un éditeur écrit en Java, ce qui lui permet de fonctionner sous toutes les plate-formes.
Quanta Plus
Quanta Plus — Avec cet éditeur de texte, on sort un peu du développement web, puisqu’il permet également de créer des livrets de documentation, ce qui peut toujours être utile.
CSSED
CSSED — Cet éditeur de feuilles de style CSS nécessite l’installation de GTK+ Runtime Environment avec comme avantage de tourner sous Linux, Mac OSX et Windows !
E-Texte Editor
E Texte Editor — Toute la puissance de TextMate sur Windows (au point de laisser Mac OS X et switcher sur Windows ?).
PSPad
PSPad — Le meilleur pour la fin ? C’est bien possible car contrairement à HTML-Kit, son interface est très agréable et son intégration avec TopStyle Lite est très réussie. L’ensemble fournit un environnement de développement de pages web très complet et simple d’utilisation.
Parmi les petits plus appréciables : un générateur de faux-texte Lorem Ipsum et l’intégration de Google avec des options de recherche avancées, toujours utiles en plein travail.
A noter que la version Pro de TopStyle inclut un éditeur HTML.
BlueGriffonTM
La nouvelle génération d’éditeur HTML basé sur le moteur de rendu de Firefox pour un Wysiwyg sans tâche.

Linux

Scribes
Scribes — C’est un éditeur pour Linux, puissant tout en restant simple et léger.
gedit
gedit — Il s’agit de l’éditeur de texte officiel pour l’environnement de bureau GNOME.
SciTE
SciTE — Cet éditeur de texte complet (coloration syntaxique, arbre de code dépliant, fonctions rechercher/remplacer) se distingue par l’exportation au format PDF, RTF ou HTML. Bien que disponible également pour Windows, SciTE gagne sa place dans la section Linux grâce à sa configuration par fichiers : pas de panique, Framasoft veille ;)

Mac OS X 10.4+

TextMate
TextMate — L’éditeur manquant ? Sur Windows, en tout cas, c’est sûr ;)
BBEdit
BBEdit — Si vous êtes Apple Addict.
TextWrangler
TextWrangler – Par le même éditeur de BBEdit dont il est une version allégée, cet éditeur autorise la manipulation de texte et l’administration de serveur Unix.
Smultron
Smultron — Conçu à la fois pour ne pas effrayer les débutants et satisfaire les utilisateurs avancés. Le projet n’est plus mis à jour, mais Fraise — projet basé sur la même architecture — est disponible.
cssedit
cssedit — un très bon éditeur de CSS.
Coda
Coda — Encore un bien joli éditeur de texte et de CSS qui intègre un module de transfert FTP.

Editeurs HTML hybrides

BBComposer
BBComposer est une extension Firefox, ce qui le distingue des autres éditeurs HTML disponible sur le marché. Il est donc possible d’utiliser cet éditeur HTML dans votre CMS préféré sans ajouter de plugin.
Lire BBComposer : un éditeur html à consommer sur place ou à emporter »
Markdown
Markdown est une alternative aux éditeurs WYSIWYG qui ne s’adaptent pas forcément à tous les besoins. Markdown vous permettra de rédiger des textes en utilisant un format de balisage de texte simple à écrire et à lire, puis à le convertir en code XHTML (ou HTML en option) structurellement valide.
Lire Markdown : un plugin WordPress pour produire du HTML

Editeurs HTML « riches » WYSIWYG

Ces éditeurs WYSIWYG ont la particularité d’utiliser Javascript pour permettre de convertir le contenu des champs créés à l’aide de la balise textarea en contenu HTML en cliquant sur des icônes plus ou moins explicites après avoir sélectionné les portions de textes adéquates.

Lire 10 jQuery and non-jQuery javascript Rich Text Editors pour avoir un avis (en anglais) sur quelques éditeurs HTML.

En bref :

Il y a de quoi faire ! N’hésitez pas à me signaler les éditeurs HTML qui auraient échappé à ma vigilance et surtout ceux que vous utilisez au quotidien.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/editeurs-html-wysiwyg/feed 29 Installer Drupal (ou les tribulations d’un WordPressien en Drupalie) http://css4design.com/installer-drupal http://css4design.com/installer-drupal#comments Wed, 20 Jan 2010 17:54:03 +0000 Bruno Bichet http://css4design.com/?p=4858

Drupal est un outil hors pair qui permet à ses utilisateurs de créer rapidement des sites internet complexes et sur-mesure et répondre ainsi aux cahiers des charges des clients les plus exigeants. Dans le monde des CMS Drupal fait partie des poids lourds. Sa réputation d’usine à gaz peut freiner les plus motivés, d’autant plus que son installation réserve parfois des surprises. Si vous avez l’habitude d’utiliser WordPress, vous risquez de ne plus retrouver votre confort habituel. Chez Drupal tout est affaire de modules et il faut en installer quelques-uns pour se sentir comme à la maison. 

Ma connaissance de Drupal est proche de zéro : j’ai abordé cet article sous l’angle de celui qui a l’habitude d’utiliser WordPress au quotidien. Il ne s’agit pas d’un comparatif entre Drupal et WordPress : les deux CMS présentent des différences dans leur mode de fonctionnement dont vous aurez un bon aperçu en lisant l’excellent billet Drupal et WordPress : deux logiques proches, mais différentes de Marie-Aude.

Amadouer Drupal

La première chose à faire est de télécharger la dernière version stable de Drupal et de décompresser l’archive pour la copier sur votre serveur. Pour information, j’utilise un hébergement mutualisé chez PHPNET qui semble posséder les pré-requis nécessaires, ce qui peut ne pas être le cas partout.

Saisissez l’adresse de votre site web et suivez les étapes de l’installateur automatique. En ce qui me concerne, l’assistant s’est arrêté à l’étape de la saisie des informations permettant la connexion à la base de données MySQL. A ce niveau, deux problèmes au moins sont susceptibles de survenir (et sont comme par hasard survenus) :

  1. Un caractère spécial dans le mot de passe peut empêcher la connexion à la base de données. Méfiez-vous donc des caractères : / @ + ( ) ? = & car vous risquez de ne pas aller très loin. Des caractères d’échappement sont prévus, mais sait-on jamais.

  2. Il semble que l’installation automatique soit comme les antiobiotiques et qu’il soit nécessaire d’écrire en dur les éléments pour la connexion avec la base de données : nom de la base, nom d’utilisateur, mot de passe et nom du serveur dans le fichier /sites/default/default.settings.php qu’il faudra renommer en settings.php. Saisissez à nouveau ces informations dans l’assistant pour passer à l’étape suivante.

    Notes : Il ne faut pas simplement renommer le fichier. Il faut créer un fichier settings.php à côté du dossier default.settings.php soit en dupliquant et renommant ce dernier, soit en créant un fichier vide nommé settings.php

Lire Installation de Drupal.

Drupal, au pied !

Une fois que vous aurez posé la souris dans le menu Administer, la palanquée d’options et de paramètres disponibles vous fera prendre  conscience du potentiel de Drupal. N’ayez pas peur et suivez le guide pour avoir un Drupal fonctionnel à votre service plutôt que l’inverse !

Vous aurez besoin d’installer de nombreux modules parfois dépendants d’autres modules. C’est le prix à payer pour… la modularité. Et oui, la force de Drupal est d’être entièrement composé de modules ; les éléments de base du moteur ne sont finalement que des modules obligatoires.

L’installation de ces modules s’effectue en suivant généralement les étapes suivantes :

  • Téléchargez et décompressez le module,
  • Faites glisser le dossier du module vers le dossier modules de votre installation,
  • Activez le modules et ses sous-modules éventuels dans le dossier Administrer › Construction du site › Modules,
  • Personnalisez les paramètres dans Administrer › Configuration du site › Votre_Module.

Notes : Les pages permettant d’installer les modules sont assez peu friendly. Toutefois, les explications sont concises et claires ; les dépendances entre les modules sont bien indiquées et sont d’ailleurs rappelées dans la page permettant d’activer les modules. Les dépendances peuvent même s’activer automatiquement lorsqu’elles se trouvent toutes dans le dossier modules. C’est assez bien fait.

Des URLs propres

Tout se passe bien ? Ok, passons à la suite. Une des premières choses que je fais lorsque j’installe un CMS, c’est de jeter un oeil sur les paramètres permettant d’avoir des URL’s propres (sans le point d’interrogation). Dans Drupal, ça se passe dans Administer › Site configuration › Clean URLs.

La case Disabled est cochée et si tout va bien vous pourrez cliquer sur Enabled. Si ce n’est pas le cas, ouvrez le fichier .htaccess à la racine de votre installation et supprimez le commentaire # devant la ligne # RewriteBase / (ligne 107 vers la fin du document). L’adresse http://votresite.fr/?q=admin/settings/clean-urls se transforme alors en http://votresite.fr/admin/settings/clean-urls.

Drupal en français

Pour avoir Drupal en français, rendez-vous sur la page de téléchargement et choisissez votre traduction. Contrairement à WordPress où un seul fichier est nécessaire pour la traduction de l’interface d’administration, vous verrez qu’il faut ajouter pas moins de 44 fichiers de traduction répartis dans 77 dossiers.

Heureusement, il suffit de faire glisser les dossiers décompressés aux emplacements adéquats sur votre serveur pour qu’ils fusionnent avec ceux qui sont déjà là (si vous travaillez sur Windows, prenez garde de ne pas remplacer les dossiers).

Assurez-vous ensuite que les modules Locales et Content Translation sont activés dans Administer › Modules. Allez ensuite dans Administer › Site Configuration › Languages et cliquez sur l’onglet Add Language et choisissez French dans le menu déroulant. Validez et sélectionnez French par défaut. Enregistrez la configuration et voilà ! Drupal est en français.

Lire Drupal 6 : comment installer la langue française.

Un éditeur WYSIWYG

Une fois Drupal en français, il est temps de passer à la rédaction des contenus. Dans Drupal, l’éditeur pour rédiger les pages ou les billets est livré en deux parfums :

  1. Filtered HTML :  les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les tags HTML autorisés sont limités à  <a>, <em>, <strong>, <cite>, <code>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>. Les lignes et les paragraphes vont à la ligne automatiquement.
  2. Full HTML : les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement. Les lignes et les paragraphes vont à la ligne automatiquement. Tous les tags HTML sont autorisés.

Notes : vous verrez plus tard qu’il est possible d’associer un éditeur selon les droits accordés aux utilisateurs de Drupal. Vous pourrez ainsi réserver la version Full HTML de l’éditeur aux administrateurs du site et la version Filtered HTML aux autres contributeurs. Point positif, le champs d’édition peut se scinder en deux pour créer un résumé ou un chapô.

Installer un nouvel éditeur visuel

Malgré tout, cet éditeur est un peu rustique comparé à ce que l’on a l’habitude de voir sur WordPress. Pour avoir un éditeur digne de ce nom, il faut installer WYSIWYG API qui gère l’installation d’autres éditeurs comme TinyMCE ou FCKEditor, bien plus conviviaux. Et si vous en profitiez pour utiliser BBComposer ?

Notes : arrivés là, vous avez certainement eu l’occasion de voir la richesse des options disponibles dans Drupal. L’édition des articles ne fait pas exception et on commence déjà à voir des différences significatives avec WordPress. Notamment en ce qui concerne les paramètres du menu qui permettent de donner un titre plus court pour faire apparaitre l’article dans un menu. Il est même possible de choisir le poids de l’entrée du menu pour préciser son emplacement.

Dès que le module wysiwyg est décompressé, faites-le glisser dans le répertoire modules de votre installation Drupal et activez-le dans Administrer › Construction du site › Modules › User Interface › Wysiwyg.

Cliquez ensuite dans Administrer et sur Par module (à côté de Par tâche) pour installer ou choisir un éditeur visuel à votre convenance. Vous avez le choix entre 9 éditeurs côté client :

  1. jWYSIWYG
  2. FCKeditor
  3. markItUp
  4. NicEdit
  5. openWYSIWYG
  6. TinyMCE
  7. Whizzywig
  8. WYMeditor
  9. YUI editor

Notes : si vous installez FCKeditor, faites attention à ne pas télécharger la nouvelle version CKEditor 3.1, qui ne semble pas encore compatible avec le module wysiwyg. Descendez plus bas dans la page et choisissez FCKeditor 2.6.5. Ou dirigez-vous vers TinyMCE. Notez toutefois que si l’éditeur CKeditor n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible comme module indépendant.

J’ai voulu installer openWYSIWYG, mais la version de démonstration m’indique que mon navigateur (Google Chrome) n’est pas pris en charge. C’est balot qu’un projet open source ne prenne pas en charge un produit basé lui aussi sur de l’open source :/

Une fois l’archive décompressée, créez le répertoire /sites/all/libraries et copiez le dossier tinymce. Lorsque vous cliquerez sur Administrer › Configuration du site › Wysiwyg, vous aurez la possibilité d’associer TinyMCE au format d’entrée Filtered HTML ou Full HTML (ou les deux). Comme vous le devinez sans doute, il est bien entendu possible d’associer un éditeur visuel différent par format d’entrée. Il suffit de répéter les étapes précédentes pour comparer TinyMCE avec FCKeditor, par exemple, qui dispose d’une interface en français, ce qui n’est pas négligeableNotez que si l’éditeur CKeditor (nouvelle version de FCKeditor) n’est pas pris en charge directement par le module Wysiwyg, il est tout de même disponible en tant que module indépendant..

Modifier les préférences de tinyMCE ou FCKeditor

Le point fort de Drupal dans sa gestion des éditeurs wysiwyg, c’est sa capacité de pouvoir associer un éditeur différent selon les contributeurs en fonction de leurs besoins ou des restrictions que vous voudrez leur imposer, ou de modifier les préférences d’un même éditeur visuel selon les contributeurs pour affiner encore plus la gestion des droits.

Pour cela, retournez dans le module wysiwyg et modifiez le format d’entrée pour accéder aux options Paramètrage de base, Boutons et plugins, Apparence de l’éditeur, Nettoyage et sortie et CSS. Notez que seuls les boutons cochés seront activés au final ; ils ne s’ajoutent pas à ceux qui sont définis par défaut, mais constituent en quelque sorte un nouveau package. En gros, il manque une case Tout sélectionner ;)

Voir Install FCKeditor Using WYSIWYG API.

Insérer des images dans Drupal, mission impossible ?

Quand on a l’habitude de WordPress, il semble tout naturel de télécharger une image depuis le web ou à partir de son poste de travail pour l’afficher où bon nous semble dans un article. C’est encore plus vrai depuis WordPress 2.9 qui autorise quelques traitements sympathiques sur les images.

Dans Drupal, c’est comment dire… Bref, c’est pas évident. La documentation précise bien qu’il est possible d’insérer une image dans un contenu via FTP puis d’utiliser la balise HTML img, mais quelque chose me dit que ça ne va pas plaire à tout le monde. Heureusement, il existe plusieurs solutions pour y remédier (ou pas).

Module Image (Bof)

Le pitch : le module Image permet aux utilisateurs ayant les permissions adéquates d’uploader des images dans Drupal, de les afficher individuellement en page d’accueil, de les insérer dans un article ou encore de les grouper dans une galerie et de créer automatiquement des miniatures de différentes tailles.

Faites glisser Image dans le dossier modules de votre installation et activez-le dans Administrer › Construction du site › Modules puis Image. Vous remarquerez à cette occasion que Drupal installe automatiquement les fichiers de langue pour les modules qui en possèdent. Frambi-framboise sur le gâteau, le module Image crée pour nous les répertoires /sites/default/files/images et /sites/default/files/images/temp.

Malheureusement, tout ne fonctionne pas comme sur des roulettes : le tableau de bord indique que Image Import et ImageMagick advanced options ne sont pas configurés correctement. Pour le premier, le message précise que le répertoire d’import n’a pas été configuré et pour le second, qu’il n’a pas été installé correctement.

Pour spécifier le répertoire d’import, je vais donc dans Administrer › Configuration du site › Images et dans le doute j’indique/home/temporaire/upload. Pour ImageMagick je me contente de le désactiver dans Administrer › Configuration du site › Boite à outils image. En attendant de voir si tout est OK au niveau de mon hébergement je me contenterai de la librairie GD.

Bref, après toutes ces péripéties j’ai toujours bien envie d’afficher une image. Or, il semble que ce module ne fait qu’ajouter un type de contenu Image à côté des Pages et des Story. Ce qui ne correspond pas vraiment à mes besoins (Je n’exclus pas, bien évidemment, le fait d’être passé à côté de quelque chose d’essentiel). Mais au moins avons-nous déjà la possibilité d’uploader des images dans Drupal, ce qui n’est pas rien ;)

ImageField (Bof)

Dépendant des modules CCK et FileField, ImageField fournit un uploader dans la lignée du module Image vu plus haut. Des modules complémentaires permettent de générer des miniatures, de saisir des méta-données en plus des traditionnels alt et title, de recadrer les images ou encore de télécharger des images par lot.

Une fois que vous aurez copié ces modules, vous vous apercevrez que CCK est un gros morceau : il bénéficie d’un menu pour ses dépendances dans la liste des modules. Ne sachant pas encore de quoi j’aurais exactement besoin, j’ai tout coché. Mais impossible d’activer le module FileField à cause de l’absence du module getID3 (gestions des informations contenus dans les fichiers audios). Dans le doute, je l’installe. Un message d’erreur m’avertit que je n’ai pas installé la bibliothèque getID3 dans le dossier sites/all/libraries/getid3/.

Mais nous ne somme pas au bout de nos peines car à la lecture de la documentation de ImageField, il semble nécessaire d’installer les modules ImageCache et ImageAPI qui n’était nécessaire que pour la version 5.x de Drupal…

Une fois ImageCache installé, mis à jour et assimilé dans les grandes lignes (les plus pressés regarderont directement la vidéo Maintainable Image Gallery), vous pourrez vous rendre sur Administrer › Construction du site › ImageCache pour voir les possibilités du module. J’ai également installé le module Views qui de toutes façons fait partie des incontournables de Drupal (pendant que vous y êtes, installez également le module d’aide avancé pour Views).

Une fois que vous aurez terminé le tutoriel Imagefield – how to set up and make a basic view vous aurez plus ou moins la même chose qu’avec le module Image présenté plus haut…

Lire Préparer Drupal pour la manipulation d’images.

IMCE (Yeah!)

Le module IMCE permet d’uploader des fichiers et des images avec la gestion des répertoires distants en prime. Le tout compatible avec FCKeditor, TinyMCE et WYMEditor. Pour éviter certaines incompatibilités entre les éditeurs et/ou certains modules, il est préférable de passer par le module IMCE Wysiwyg bridge qui facilite l’intégration du module IMCE dans les éditeurs visuels TinyMCE et FCKeditor pour le moment.

Pour éviter de tout mélanger, je vous conseille de désactiver le module Image installé précédemment et d’installer IMCE et IMCE Wysiwyg bridge puis de jeter un oeil sur les options de IMCE dans Administrer › Configuration du site › IMCE.

Pour accéder à ce qui nous intéresse, une dernière étape est nécessaire : cocher la case IMCE dans la liste des boutons et plugins de l’éditeur visuel TinyMCE dans Administrer › Configuration du site › Wysiwyg !

Faites la même chose pour FCKeditor pendant que vous y êtes, histoire de passer rapidement d’un éditeur visuel à l’autre. L’idéal étant de créer deux nouveaux formats d’entrée en plus de Filtered HTML et de Full HTML pour leur associer nos deux éditeurs visuels nouvellement installés.

Le résultat de nos manipulations prend la forme d’une icône Browse ou d’un bouton Parcourir le Serveur juste à droite du champs URL de l’image (quand on a cliqué sur l’icône Insérer/modifier l’image). Un clic sur ce bouton affiche enfin la boite de dialogue qui permet d’uploader, de générer les miniatures et d’envoyer le tout à l’éditeur qui se chargera d’afficher l’image dans l’article, enfin !

Notez que le module IMCE est également disponible pour le module CKeditor.

Ca ne marche toujours pas ?

Que l’image s’affiche correctement dans l’éditeur ne signifie pas qu’elle s’affichera dans votre article une fois publié… La raison est que même si vous spécifiez un éditeur visuel comme FCKeditor, le comportement par défaut est de filtrer les balises HTML à la manière de Filtered HTML. Pour y remédier, rendez-vous dans Administrer › Configuration du site › Formats d’entrée et décochez la case filtre HTML.

Drupal 7 (Yeah?)

La prochaine version de Drupal devrait gérer nativement les images avec des champs Image pouvant être ajoutés aux contenus et auxquels peuvent être attachés des effets tels que le redimensionnement, le recadrage, etc. Cette version est actuellement en Alpha1.

Notes : cette prochaine mouture de Drupal marquera un tournant dans l’ergonomie du CMS qui devrait avoir été amélioré de manière significative par rapport à la version 6.15 que je teste actuellement.

En attendant la suite des tribulations d’un WordPressien en Drupalie…

Malgré la longueur de ce billet, l’installation de Drupal est moins compliquée qu’il n’y parait. Les problèmes que j’ai rencontrés vous seront sans doute épargnés. L’installation des différents modules prend du temps et de nombreux aller-retours sont nécessaires pour installer, activer ou modifier les paramètres.

Les critiques concernant l’ergonomie perfectible de Drupal (qui va être radicalement modifiée avec l’arrivée de la version 7) sont sans doute un moindre mal au regard des possibilités. Et puis, entre nous, si vous trouvez que Drupal est trop riche, c’est peut-être que WordPress ou votre CMS préféré suffit à votre bonheur ^_^

Toutefois, la saisie et la mise en forme de textes et d’images sont le coeur et la raison d’être de tout CMS et l’absence d’un éditeur visuel intégrant images, son, vidéos, etc. se fait cruellement sentir. D’autant plus que les solutions proposées par la communauté Drupal n’offrent pas le même confort d’utilisation que ce qu’on trouve dans WordPress 2.9 où le module d’upload et d’édition d’image est une petite merveille. Mais la version 7 pointe son nez et tout ces inconvénients ne seront sans doute qu’un mauvais souvenir ;)

Quelques liens

Articles sur le même sujet

flattr this!

]]> http://css4design.com/installer-drupal/feed 27 BBComposer — l’éditeur HTML à consommer sur place ou à emporter http://css4design.com/bbcomposer-editeur-html-a-consommer-sur-place-ou-a-emporter http://css4design.com/bbcomposer-editeur-html-a-consommer-sur-place-ou-a-emporter#comments Thu, 14 Jan 2010 13:12:58 +0000 Bruno Bichet http://css4design.com/?p=4576

Initialement développé pour les besoins internes de la société ElitWork, BBComposer est un éditeur de texte qui produit du code HTML (mais aussi du Wiki, BBCodes et XBBCodes) dans un environnement WYSIWYG. Nicolas et Mathieu Froidure ont prêté une attention particulière au code généré, avec la sémantique des balises comme fil directeur. BBComposer est une extension Firefox, ce qui le distingue des autres éditeurs HTML sur le marché comme TinyMCE ou CKEditor. Il est donc possible d’utiliser cet éditeur HTML dans votre CMS préféré sans ajouter de plugin.

BBComposer et WordPress

Dans WordPress, par exemple, il suffit de passer l’éditeur de texte en mode HTML (au lieu du mode Visuel) et de cliquer avec le bouton droit de la souris pour sélectionner BBComposer et choisir le langage de votre choix (XHTML 1.0, par exemple). Il ne reste plus qu’à saisir votre texte et à l’enrichir avec les balises appropriées.

Une fois le langage sélectionné, la zone d’édition de BBComposer apparait. Comme vous pouvez le constater les options sont nombreuses.

La fenêtre d'édition de BBComposer et la barre latérale pour utiliser des styles CSS en ligne. Cliquez pour agrandir l'image.

Des « super blocs » et des listes de définition

La plupart des éditeurs présents sur le marché se contentent de créer des balises de manière linéaire. BBComposer se distingue encore en permettant la création de super blocs avec les balises blockquote et div.

A propos de blockquote, la plupart des éditeurs ont oublié qu’une deuxième balise de type block était nécessaire comme : 

<blockquote>
    <p>La citation</p>
</blockquote>
Parmi les options de formatage disponibles on notera — outre les traditionnels titres sur 6 niveaux ou les listes ordonnées ou non ordonnées — les listes de définition qui justifieraient presque l’adoption de BBComposer, tant il est vrai qu’elle sont sous-utilisées, certainement en raison de leur manque de prise en charge par les éditeurs WYSIWYG !

Des styles pour avoir la classe

Grosse cerise sur le gâteau, il est possible d’ajouter une ou plusieurs classes CSS sur chaque élément, y compris sur un super bloc div. Ceci peut être très intéressant lors de la rédaction d’articles de type magazine pour obtenir une mise en forme différente selon le sujet sans passer systématiquement par le mode HTML pour saisir les balises.

Je pense notamment à la possibilité d’ajouter une classe wrapper ou clearfix à un super bloc pour rétablir le flux après avoir mis des éléments en float: left ou float: right à supposer que vous ayez déjà une classe .float-left et .float-right à votre disposition dans votre fichier style.css.

Des styles en ligne à profusion

Avantage ou inconvénient, une barre latérale propose une foultitude d’option de formatage qui se traduisent par l’insertion de styles en ligne comme <p style="text-align: center;">blabla</p>.

Petite digression…

Même si je trouve que les styles en ligne, c’est pas bien dans le cadre du développement d’un site web (au niveau de l’architecture des pages), je trouve que BBComposer offre une solution simple pour permettre aux clients qui le souhaitent d’enrichir leurs textes. Bien sûr, c’est la porte ouverte à toutes les fenêtres et le risque est grand de voir une typo différente par ligne et 4 couleurs dans le même paragraphe… ;)

… Revenons à nos moutons !

Outre le formatage du texte, la palette des styles propose de définir ou modifier les propriétés margin et padding ainsi que l’arrière-plan, la position absolute ou encore float avec les options clear nécessaires pour rétablir le flux après les éléments flottants.

Documentation

Un des point-clés d’une application se trouve dans sa documentation. A cet égard, BBComposer nous gâte :

Une application extensible

BBComposer est extensible. Parmi les extensions disponibles, je vous encourage à tester l’extracteur sémantique de mots-clés KGen :

KGen est un générateur de mots-clés qui permet d’analyser les mots contenus dans une page et de déterminer ceux qui, pour les moteurs de recherche, auront le plus d’importance.

Voici une vidéo de présentation.

Pour Conclure

Je suis loin d’avoir fait le tour de BBComposer et sa richesse demande un peu d’adaptation, mais le confort procuré par les super blocs et la possibilité d’attribuer une classe à n’importe quel élément valent le détour.

La nature de BBComposer lui permettra de trouver sa place dans votre boite à outil puisqu’il ne vous obligera pas à supprimer votre éditeur préféré. Vous pourrez même le proposer à vos lecteurs qui pourront ainsi enrichir leurs commentaires (à supposer que votre CMS autorise l’utilisation des balises HTML ou BBCode dans cette zone).

Les utilisateurs de WordPress pourront sans peine l’utiliser dans la zone d’édition des billets pour palier les manques de l’éditeur TinyMCE installé par défaut, notamment l’absence de la balise code, bien pratique lorsqu’on a l’occasion de parler des langages du web !

Articles sur le même sujet

flattr this!

]]> http://css4design.com/bbcomposer-editeur-html-a-consommer-sur-place-ou-a-emporter/feed 8 Drawter : dessinez, c'est intégré ! (WYSYWYG Powa!) http://css4design.com/drawter-dessiner-integrer-wysywyg http://css4design.com/drawter-dessiner-integrer-wysywyg#comments Wed, 26 Nov 2008 20:42:17 +0000 Bruno Bichet http://www.css4design.com/?p=2531

Drawter est un générateur de code HTML et CSS en ligne qui vous permet de dessiner votre mise en page dans un canevas. Vous pouvez choisir les options de votre page comme le titre, le doctype, la langue du document, les balises que vous souhaitez pour chaque bloc présent à l’écran et pour chacune d’entre elles les propriétés et les attributs.

Une fois votre maquette terminée, vous choisissez le mode de placement pour vos blocs : float: left ou position: absolute. Le site autorise les imbrications de balises pour réaliser des mises en page complexes dans une interface réactive et intuitive. N’hésitez pas à parcourir toutes les options disponibles dans les palettes d’options et amusez-vous :) Drawter : dessinez, c’est gagné ? A tester !

PS : Merci à Thierry pour le lien ;)

Articles sur le même sujet

flattr this!

]]> http://css4design.com/drawter-dessiner-integrer-wysywyg/feed 6 Memento pour la syntaxe Markdown en usage dans les commentaires http://css4design.com/memento-pour-la-syntaxe-markdown http://css4design.com/memento-pour-la-syntaxe-markdown#comments Tue, 12 Aug 2008 18:57:28 +0000 Bruno Bichet http://www.css4design.com/?p=810

Vous pouvez désormais utiliser la syntaxe Markdown dans la zone des commentaires. Cette syntaxe est très facile à utiliser et également très complète, mais tout n’est pas indispensables pour écrire un commentaire. Voici donc les éléments les plus utiles :

Paragraphe

Un nouveau paragraphe s’obtient en sautant une ligne. Comme d’habitude.

Blocs de citation

> Voici une citation qui tient sur un paragraphe

> Voici une citation qui contient deux paragraphes : le premier,

> et le deuxième.

Bloc de code

Pour écrire un bloc de code, il suffit d’indenter chaque ligne avec au moins 4 espaces ou une tabulation :

Un paragraphe normal     un bloc de code

Note : pour écrire du code au fil du texte, il faut utiliser l’accent grave seul (Alt GR 7 sur mon clavier suivi d’un espace)

Je préfère `text-indent: -9999` à `display: none`

Les listes

Listes non-ordonnée ul

Démarrez avec un astérisque. Il est possible d’utiliser le signe + (plus) ou le – (tiret) à la place.

* item 1

* item 2

* item 3

Listes ordonnée ol

Démarrez avec un chiffre suivi d’un point.

  1. item 1

  2. item 2

  3. item 3

Les liens

L’ancre du lien est délimitée par des crochets, tandis que l’URL est encadrée par des parenthèses.

Voici la syntaxe pour donner un [lien externe](url du lien externe).

Pour les plus pointilleux d’entre vous, voici un [lien](url du lien "le title") agrémenté d’un title.

Mise en évidence

Il faut utiliser deux astérisques devant et après le terme pour renforcer le texte strong

**En gras sur ce blog**

Utilisez un astérisque avant et après le terme à mettre en emphase em

*En italique sur ce blog*

Conclusion

Je vous invite fortement à vous rendre sur le site de Michel Fortin pour voir les possibilités de Markdown. Voici d’autres informations sur Markdown avec WordPress.

Articles sur le même sujet

flattr this!

]]> http://css4design.com/memento-pour-la-syntaxe-markdown/feed 21