Pixarea Blog

WYMeditor 0.3 released

WYMeditor 0.3 is has been released !

If you need a web-based XHTML editor which produces clean W3C valid code, which is easy to integrate, easy to extend, and open-source, then your search is over.

WYMeditor has been rewritten to be easier to integrate and to extend, using the JavaScript library jQuery (http://jquery.com), which also greatly improves the code quality and robustness.

WYMeditor is compatible with Microsoft Internet Explorer 6.0+, Gecko-based browsers (e.g. Mozilla Firefox 1.5+), and Opera 9.0+.

Thanks a lot to all the contributors !

Oeuvre collective...

Excellent délire...

Le matériel de travail...

Encore quelques photos, et la version finale sur le blog d'Élise.

PHP-generated CSS magic

I would like to share my new experiments concerning CSS, and how it can be used with a server-side scripting language like PHP.

What frustrates me the most when I write stylesheets is the amount of repetitive work that has to be done by manually. Because there is no support for variable or constants in CSS, you are often forced to copy/paste values across your stylesheet, and make lots of calculations "by hand".

A simple example: If you want to change the width of a column, you often have to change the width of others elements in various places of your stylesheet, which can be tedious and prone to errors.

Wouldn't it be better to have these values computed automagically ?

Unfortunately, you can't define variables, constants, or use formulas in CSS. But with some PHP, it becomes possible. The only problem is that dynamic stylesheets can't be as fast as static files... But this method won't slow down your site because PHP is used to generate a static .css file: you work with a dynamic stylesheet during development, then you can use only the generated static stylesheet on your "live" site.

The HTML index.htm

Here is the basic HTML page used for the example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>PHP-generated stylesheet demo</title>
    <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
  </head>

  <body>
    <div id="page">

      <div id="hd">HEADER</div>

      <div id="bd">
        <div id="main">MAIN</div>
        <div id="sub">SUB</div>
      </div>

      <div id="ft">FOOTER</div>

    </div>
  </body>

</html>

the file screen.css

The above html file links to a screen.css, here comes the code:

@import url(project.css.php);
@import url(project.css);

It's the interesting part: if you open project.css.php in your browser, you will see a blank page.
But each request to project.css.php will create or overwrite the file "project.css".

So we only need to create the file project.css.php since the file project.css will be generated automagically.

the file "project.css.php"

Here is an example of what this file can look like:

<?php 
  //VARS
    $darkColor  = "#41455f";
    $lightColor = "#ccb0bf";
    $pageWidth  = "45em";
    $subWidth   = "60%";
    $mainWidth  = 100 - intval($subWidth) . "%";
    $mainFloat  = "left";
    $subFloat   = ($mainFloat == "left" ? "right" : "left");

  //CAPTURE OUTPUT AND WRITE INTO A FILE    
    function callback($buffer){ file_put_contents("project.css",$buffer); }
    ob_start("callback");
?>

/*STYLESHEET*/
  
  /*layout*/
  #page       { width: <?= $pageWidth ?>; margin: auto;}
  #bd         { overflow: hidden; }
  #main       { float: <?= $mainFloat ?>; width: <?= $mainWidth ?>}
  #sub        { float: <?= $subFloat ?>; width: <?= $subWidth ?>}
  
  #hd, #ft, 
  #main, #sub { padding: 2em 0 }
  
  /*borders*/
  div         { border: 0 solid <?= $darkColor ?>;}
  #hd, #ft    { border-width: 1px 0;}  

  /*colors*/
  body        { background: <?= $darkColor ?>}
  #page       { background: <?= $lightColor ?>;}
  #main       { border-width: <?= $mainFloat == "right" ? "0 0 0 1px" : "0 1px 0 0" ?>; margin-left: -1px;}

/* END STYLESHEET*/

<?php 
 //END CAPTURE OUTPUT
  ob_end_flush();
?>

Some interesting features in the above example:

the first part titled "VARS" allows to define some variables that will be used in the stylesheet, which can bring a lot of comfort by avoiding repetitive work.
the second part titled "CAPTURE OUTPUT AND WRITE INTO A FILE" and the last part titled "END CAPTURE OUTPUT" simply generate the final file project.css
the more useful feature is to compute values used in the layout by entering custom formulas: here the width of column #main is computed from the width of column "#sub".
Some logic is used for the floats: depending which side the column #main is floated (left or right), the column #sub will be floated at the opposite side. Plus a 1px border is added on the left or right side of the column, depending if it's floated left or right.

For this article, I have kept the example very simple, but this approach bring lots of possibilities.

Development phase

During the development, when you refresh your browser,

the HTML page loads screen.css which in turn loads the files:
- project.css.php - returns nothing but creates (or updates) the file project.css
- project.css - automatically updated by the previous request

So this method is 100% transparent: the update is made when you refresh your browser, so you don't have anything to do and you can work like always.

Online version

When development is finished, you simply remove the first line of screen.css like this:

@import url(project.css.php);
@import url(project.css);

You can erase the file project.css.php but it's better to keep it so you can benefit from this whole approach again when you will need to make some changes.

You will simply have to restore the line @import url(project.css.php); and remember to work on the file project.css.php only, and never touch the generated file ''project.css'.

I hope you will find this approach useful, don't hesitate to share you thoughts !

WYMeditor 0.2 stable and Drupal module

This is an English translation of the original post written in French by Jean-François: WYMeditor 0.2 stable et module Drupal

WYMeditor is a web-based XHTML WYSIWYM editor.

WYMeditor 0.2 stable has been released!
This release brings compatibility with Internet Explorer from versions 5.5 to 7.0, and browsers using Gecko (Mozilla Firefox for example).

WYMeditor is available under licenses MIT or GPL, you can choose the one you prefer.

Thanks to the excellent work of Frédéric Palluel-Lafleur (alias Moxide) and Anton, WYMeditor is now integrated into Drupal as a module!
This project is still under development, but editing works already perfectly, as the adding of containers and classes.

Hats down to Frédéric et Anton, and long life to this module.

I take this occasion to relay the information (related to the call of Monique Brunel) concerning the The International Day of Disabled People the third of december 2006, which central theme this year will be the digital accessibility.

When Daniel and me, a little more than one year ago, have decided to launch this project, we realised that it could be useful for other people. The idea to bring it to the opensource community was obvious.
From this time we have received different reactions, ranging from "Are you smoking crack ?" (!) to "WYMeditor is the future of the web" (!)

WYMeditor is now a mature project which deserves the label 1.0 rather than 0.2 (maybe would it then gain more visibility), and which we use in production since version 0.1.
Without having to take care of it, when using WYMeditor, our clients create web pages that are fully compliant with today's W3C standards.
It's a real challenge: allowing them to modify their web site while eliminating as much as possible the problems related to presentation, but with a simple tool which can convince and "sell itself". Quadrature of the circle you say ?

If WYMeditor can contribute to a better and more accessible web, it motivates us to improve it !

WYMstyle progress

WYMstyle 0.3 progresse calmement mais sûrement.

L'objectif est toujours de proposer des outils de travail pour la création de layouts CSS complexes selon des principes simples, prévisibles et applicables de manière systématique.

Les (très) grosses difficultés proviennent à 99% d'Internet Explorer, à cause de ses nombreux bugs qui me donnent beaucoup de fil à retordre.

Une des fonctionnalités qui manque cruellement dans IE5 et IE6, mais supportée dans la version 7 est le child selector ">" (sélecteur enfant), qui est d'une importance essentielle pour apporter à WYMstyle 0.3 certaines fontionnalités vraiment intéressantes.

Il est en général possible de simuler le fonctionnement du child selector dans IE5 et IE6, mais au prix d'un code CSS lourd et tordu. J'ai donc décidé d'utiliser la librairie javascript IE7 de Dean Edwards pour ajouter le support du child selector à IE5 et IE6. Le résultat est un code CSS bien plus épuré, lisible et facile à utiliser.

Le fait que WYMstyle 0.3 nécessite du code javascript pour un support correct de IE5 et IE6 ne me plaît pas vraiment. Mais après avoir réécrit plusieurs fois WYMstyle 0.3 à cause de ce navigateur capricieux (pour rester poli), et après avoir fait des tartines de code CSS pour contourner les limitations d'IE5 et IE6, j'en suis venu à la conclusion qu'un peu de javascript était un moindre mal.

Pour le développement de WYMstyle 0.3, je considère donc comme base de travail les navigateurs gecko (Firefox, Netscape), Opera, Webkit (Safari), IE7, KHTML (Konqueror) sur plateformes Windows, Linux et MacosX.

Ça me semble déjà pas mal, et finalement IE5 et IE6 n'auront même pas à aller se faire voir, grâce à cette "rustine javascript" dont ils sont les seuls à avoir besoin.

Pour les curieux ou les courageux, les derniers progrès sont visibles en ligne. Attention, c'est encore de la version alpha, en évolution permanente et sûrement pas utilisable en production. Pour cela téléchargez plutôt WYMstyle 0.2.

Si vous souhaitez récupérer le code de WYMstyle au complet (toutes versions), ou des parties spécifiques, vous pouvez le faire par svn.

WYMstyle - past/present/future

When I got my job as a web designer, I used to design websites with tables, slicing images in Photoshop then using Dreamweaver for the rest of the job. As a "junior" web designer, I soon began to search for any useful information wich would help me to improve my skills.

Quickly I discovered web standards, and online ressources like A list Apart, which were advocating what was for me a completely new approach to the design of web sites.

After spending some days to study these techniques, I definitely threw tables out of the window. My next designs were completely built on (X)HTML/CSS, I discovered that I didn't need WYSIWYG HTML editors anymore and I switched to a simple text-based editor (I found Pspad to be perfect for the job,and still use it daily for almost all my coding needs).

During years 2004 and 2005 I designed several websites, with XHTML/CSS. While consecutively writing CSS files, I noticed some repetition in my work, and I became more and more frustrated by the feeling that I was wasting my time by partly reinventing the wheel with each new project. I had a strong feeling there must be a way, which would allow to make the process of writing stylesheets less repetitive, but I didn't know how to approach the problem.

Thus I began to search for a solution, and I found this article "Modular CSS" by Mike Stenhouse. Clearly Mike had put the right words on the problem, and offered some very interesting thoughts. Later he wrote another article A CSS Framework, which became the base of my own reflexion on this subject.

By the end of year 2005, I started my own experiments. My goal was to find an "ideal XHTML page structure" and to make a set of "CSS modules" ready to be imported in the main CSS file of my websites. After a lot of work and struggling with browser bugs (mainly IE), I had the first version of my framework ready. My set of modular CSS files allowed me to quickly produce custom CSS layouts, in matter of seconds rather than hours, and to reduce time required for browser-testing. The coding standards set by WYMstyle allowed me even to reuse lots of website-specific code across projects.

Although WYMstyle is freely available since february 2006, there hadn't been any real public adoption (yet ?). I received scarce but very positive feedback by people who started to use it only recently, and who gave very interesting critics and suggestions. But I have to admit I made almost no communication about WYMstyle yet, and the documentation is still minimalistic.

Recently I discovered Yahoo Grids, it is a CSS framework created by Yahoo for their needs, it is freely available for anyone to use. Yahoo Grids is a terrific tool to build CSS layouts, it's very well-thought, small and elegant. I first asked myself if it was better than WYMstyle. Maybe was it time to forget about WYMstyle and switch to Yahoo Grids ?

After some study of Yahoo grids, I came to the conclusion that WYMstyle and Yahoo Grids, while having similarities, are two different beasts, each solution has it's advantages over the other, and both solutions have their strong points. So while Yahoo grids is appropriate for some projects, WYMstyle may still be the weapon of choice for other projects.

Anyway, this reflexion, and the concepts present in Yahoo grids made me understand how I could redesign WYMstyle to improve it and to solve some of its limitations.

I'm now working on WYMstyle version 0.3, which will be a complete rewrite. If you use WYMstyle, be warned that version 0.3 won't be compatible with prior versions. The CSS files but also the required (X)HTML will be different from previous versions.

My project with WYMstyle 0.3 is to take the best from both solutions. Some elements from the Yahoo grids approach will be used to build the basics, which will be completed with features already available in WYMstyle 0.2.

The result should allow to build CSS layouts as fast as with WYMstyle 0.2, with the power of CSS grids to create really complex layouts without pain. WYMstyle will remain very open to community contributions. I hope WYMstyle will become an easy to use but complete toolbox, full of ready-to-use and well-tested CSS-based tools.

H.O.net supporte WYMeditor et WYMstyle

H.O.net, l'entreprise où je bosse avec Jean-François, a décidé de supporter le développement de nos projets personnels WYMeditor et WYMstyle.

Voir l'info sur le blog de JF.

Pour ce qui est de notre CMS au stade alpha WYMsite, nous avons décidé de ne plus nous en occuper, car il semble préférable de nous concentrer sur les projets cités ci-dessus, et sur notre projet perso Wikiz. Comme nous avons déjà développé un CMS (CMS-Website) au boulot, nous n'avons pas besoin d'en créer un autre (même s'il c'était un terrain d'expérimentation intéressant). Il n'est pas exclu que nous reprenions le développement de WYMsite dans le futur, mais rien n'est prévu pour l'instant.

Ces événements vont donc me permettre de consacrer plus de temps en particulier à mon framework CSS WYMstyle.

J'ai récemment commencé à travailler sur la version 0.3, qui sera une réécriture complète de WYMstyle. Avec la version 0.3, des concepts majeurs de WYMstyle seront "revisités" et bénéficieront d'un approche générale plus puissante. Ces améliorations se baseront sur mon expérience passée à utiliser et développer WYMstyle, et bénéficieront de l'apport de concepts inspirés de Yahoo grids, un framework CSS réalisé par Yahoo et qui renferme de très bonnes idées.

Inscrit

Ça faisait des années que ça me trottait dans la tête, et voilà c'est fait:
finalement me voilà inscrit aux cours du soir de dessin à l'Académie des Beaux-Arts de Tournai.

C'est bien beau de passer son temps le nez dans du XML, XSL, PHP, CSS, XHTML, etc. encore faut-il ne pas oublier l'usage du crayon...

...premier cours le 11 septembre :)

WYMeditor: quelques news

Petit récapitulatif des dernières news relatives à WYMeditor.

Un forum pour WYMeditor

N'hésitez pas à l'utiliser en cas de besoin ou pour poster des questions, remarques, suggestions,...
Vous souhaitez intégrer WYMeditor à un CMS ? Profitez-en pour en parler sur le forum (et vous faire un peu de pub).
http://forum.wymeditor.org/forum/

WYMeditor + Drupal ?

Une discussion intéressante: un projet Drupal pourrait être lancé prochaînement pour intégrer WYMeditor.
http://drupal.org/node/81440

Cette discussion a m'a permis de m'intéresser à Drupal, qui semble être un CMS fort bien pensé. En tous cas, la communauté Drupal a l'air très active et sympathique, elle m'a laissé une excellente impression.

WYMeditor 0.2 rc2 disponible

Meilleur comportement sous navigateurs utilisant Gecko (Firefox, Mozilla, Netscape, etc.).
Un exemple simple d'intégration en PHP a été ajouté.
Voir la news et les commentaires sur le site de Jean-François

WYMeditor sur Digg

Quelqu'un a ajouté WYMeditor sur Digg.com. Vous pouvez aider WYMeditor simplement en diggant (en votant pour) cette news, ce qui permettra de mieux faire connaître le projet.

WYMsite: un CMS construit sur les standards

Le silence n'est pas synonyme d'inactivité, bien au contraire !
Depuis plus d'un mois, je consacre 99% de mon temps libre au projet WYMsite.

WYMsite est encore au stade de développement, mais se distingue déjà par son approche particulière de la gestion de contenus.

Les caractéristiques de WYMsite:

Technologies et outils embarqués: PHP5, XSL, XHTML, CSS, WYMstyle, WYMeditor, Jquery.
Utilisation intensive des XSL.
Stockage des données au format XML.
Éditeur HTML intégré (WYMeditor) de type WYSIWYM (et non WYSIWYG).
Séparation totale des données et de la présentation grâce aux transformations XSL, à l'éditeur de type WYSIWYM, et aux feuilles de style CSS.
Conformité stricte aux standards.
Interfaces extrêmement flexibles et extensibles.
Système de templates combinant de simples fichiers HTML à la puissance des transformations XSL.
Multilingue, UTF8.
Multi-site, avec une approche permettant la mise en commun immédiate de fonctionnalités entre projets.
En plus du (X)HTML, possibilité de générer n'importe quel type de contenus.
Fonctionnalités décomposées sous forme de "modules XSL":
L'ajout de fonctionnalités à un projet se fait en important les modules (fichiers XSL) souhaités.
La personnalisation par projet se fait en redéfinissant à volonté et de manière sélective les modules importés (par morceaux ou en totalité), ou en créant de nouveaux modules.

WYMsite est un CMS opensource en cours de développement d'un genre particulier, initié par Jean-François et moi-même, il est le premier (à ma connaissance) à accorder une place centrale aux feuilles de style XSL, leur confiant bon nombre de tâches normalement réservées à la "couche PHP" (au grand désespoir de Jean-François).

La couche XSL dispose à tout moment d'un accès complet aux sources de données, il est donc possible de modifier l'interface existante ou de développer rapidement des interfaces spécialisées en fonction des besoins de chaque projet. De même, toute donnée passe d'abord par la couche XSL avant d'apparaître à l'écran. Toute information peut donc être transformée, manipulée, restructurée par la couche XSL.

Il s'agit là de ma tentative de créer un CMS offrant une liberté totale aux designers.

Cette démarche et plus qu'influencée par ma façon de penser "interface", alors forcément cela ne plaîra pas aux puristes qui verront d'un mauvais oeil le fait de confier autant de logique à la "couche de présentation".

J'invite qui le souhaite à télécharger la version en développement, poser des questions, et éventuellement rejoindre le projet.

Pour cela, il vous faudra un client SVN pour récupérer le tout depuis le repository.

Toutes les infos se trouvent ici: WYMsite, et là: trac (gestion de projet) et puis là aussi: download

Pour info, je bosse actuellement sur ma petite branche nommée from-revision014e, qui se trouve de ce côté-là:
svn://svn.wymsite.org/wymsite/branches/d.reszka/

À l'heure où j'écris ces lignes, c'est donc là que se trouve la dernière révision du code. Pour l'utiliser vous avez besoin d'un environnement PHP5 avec l'extension Tidy activée.

Pour la petite histoire, l'idée de départ de WYMsite était de réaliser un nouveau CMS s'inspirant de la philosophie de CMS-website (CMS propriétaire développé par H.O.net pour ses clients). C'est à dire: stockage dans des fichiers XML, héritage de propriétés de manière récursive, éditeur non WYSIWYG, prise en main immédiate, conformité stricte XHTML.

Pour finir, au fur et à mesure de sa création, WYMsite s'est éloigné complètement de son "grand frère" CMS-Website, en tirant parti des possibilités spécifiques aux nouveaux outils et langages utilisés.