Le blog de llaumgui - Balise - jQuery

Utiliser mootools dans Dotclear 2.0

llaumgui — Wed, 16 Apr 2008 19:17:00 +0200

Dotclear, le gestionnaire de blog, dans sa version 2.0 (dont la RC1 devrait pointer le bout de son nez le 1er mai) utilise jQuery comme librairie javascript. Notons au passage que l'utilisation d'une telle librairie permet de gagner un temps de développement précieux et d'éviter d'éventuels problèmes de compatibilité entre les différents navigateurs.

Actuellement, l'utilisation du javascript dans le thème par défaut (Blowup) se limite à la gestion du cookie de la case "Se souvenir de moi sur ce blog".

J'aime beaucoup jQuery (je m'en suis servi dans mon précédent thème et sur d'autres projets) mais professionnellement j'utilise beaucoup mootools et j'ai acquis des facilités avec ce framework.
Pour mon dernier thème, Nodoka, c'est donc mootools que j'ai retenu et j'ai donc eu à entreprendre de porter le code de la gestion des cookies de jQuery vers mootools.
Histoire de vous faciliter la vie si vous aussi vous souhaitez utiliser mootools dans vos thèmes Dotclear, je vous mets mon bout de code à disposition ainsi que la documentation.

svn co https://svn.llaumgui.com/javascript/mootools_1.1.x/dc_remember/

On remarquera qu'il y a 2 fichiers : un fichier source avec le code lisible et commenté; et une version compressée avec YUI Compressor. D'ailleur, La compression des javascripts donnera bientôt lieu à un nouveau billet.

Nouveau thème pour le blog

llaumgui — Sun, 13 Apr 2008 17:46:00 +0200

Après pas mal de temps passé, de recherche, de codage, d'effaçage puis de re-codage : voici la nouvelle version du blog.
Le thème s'appelle Nodoka et il est clairement inspiré du thème GTK2 de Fedora ;-). Pour le moment on est en version ~~alpha~~bêta mais il devrait s'enrichir au fil des jours.

Les nouveautés :

Nouveau look, c'est le plus visible
Evolution des couleurs et du bandeau avec l'heure... Comme le bureau de Fedora
Mise en avant de le possibilité de souscrire par email aux commentaires d'un billet et de gérer ses abonnements
2 nouvelles pages.
- La première, Crédit et mentions légales avec les copyrights/copylefts d'à peu près tout
- La seconde, A propos du blog avec les anciennes versions et des informations sur le blog.
Réécriture des javascripts de Dotclear pour tourner avec mootools à la place de jQuery
Blog valide CSS 2.1 et xHTML 1.0 Strict

jQuery 1.2 est dans les bacs

llaumgui — Tue, 11 Sep 2007 13:53:00 +0200

C'est juste au moment où je suis en train de réfléchir aux côtés dynamiques, 2.0 & funky de Scénario-PaintBall v3; que mon framework JavaScript / AJAX préféré voit publier sa version 1.2.
Pour ceux qui ne le connaissent pas (encore), jQuery est une bibliothèque permettant de « Write less, do more » (Traduction partisane : « Faire un max de choses en n'en foutant le moins possible » ; j'adore ce slogan !) et qui surtout est compatible tous navigateurs. Dépassé (enfin presque) le temps où l'on perdait du temps à déboguer ses JS sous Internet Explorer !

Je vais donc explorer, pour SPB, les nouvelles pistes offertes par jQuery 1.2.
Comme certaines librairies peuvent être incompatibles entre elles et que je ne veux pas forcer à l'utilisation d'un framework en particulier : je ne pense pas utiliser jQuery dans ezipb-shoutbox.
Cependant, comme eZ publish le permet, dans le cadre de mon site (qui est dans une extension), je vais surcharger le JS d'ezipb-shoutbox et utiliser jQuery.

jQuery, UTF8 et Internet Explorer

llaumgui — Sat, 03 Mar 2007 13:52:00 +0100

Toujours dans la catégorie "pamphlet contre le navigateur de la firme de Redmond" : un petit désagrément que je viens de constater entre jQuery, le plugin Validation et Internet Explorer.
Si l'encodage de la librairie de base (jquery.js) et celui du plugin (jquery.validation.js) sont différents (UTF-8 pour l'un et ISO-8859-1 pour l'autre), des erreurs Javascript apparaissent dans IE.

Ça a l'air triviale, mais pourtant j'ai passé plus de 3 heures à essayer de débuger du Javascrit sous IE (il parait que c'est possible ;-)) qui, n'ayons pas peur des mots, est une véritable bouse dans le domaine du débug JS.

Une fois que tout marche, ce plugin se révèle très pratique, car la syntaxe pour vérifier les entrées d'un formulaire est relativement simple :

// Mode débug :

//$.validator.defaults.debug = true;



$(document).ready(function() {



        $("#comment-form").validate({

                errorContainer: $("#comment-form div.error-form"),

                errorLabelContainer: $("#comment-form div.error-form ul"),

                errorWrapper: 'li',

                metaWrapper: "validate",

                

                rules: {

                c_name: { required: true },

                c_mail: {

                        required: true,

                        email: true

                },

                c_content: { required: true }

                },              

                messages: {

                c_name: msg_valid_name,

                c_mail: msg_valid_email,

                c_content: msg_valid_content

                }

        });

});

Pour les messages d'alertes, on notera que je passe des variables par soucis de respecter l'internationalisation de DotClear

Faut que je vérifie la licence (GPL / MIT) du truc et si elles le permettent je pense l'utiliser pour mon prochain gros projet professionnel. Comme le dit le slogan de cette librairie :

write less, do more

Thème llaumgui-ng, Dotclear 2 et jQuery

llaumgui — Sun, 25 Feb 2007 23:49:00 +0100

Je viens de basculer par défaut le thème "llaumgui-ng" et je devrais bientôt retirer le thème "llaumgui" de mon blog. Ce nouveau thème est plus moderne est plus sérieux que le précédent. Il est pour le moment en version bêta et devrait évoluer graphiquement (couleur, header, etc...) et techniquement, me permettant ainsi de transformer LLaumguiDotCom en petit Labo Web 2.0.

Pour agrémenter le design et améliorer l'ergonomie, j'utilise jQuery, la librairie JavaScript proposée en standard dans DotClear 2 :

La liste des tags et le formulaire

L'onglet Tags du menu du haut permet de faire dérouler la liste des tags, il en est de même pour le formulaire permettant de poster un commentaire qui par défaut est caché. Pour cela j'utilise la fonction toggle() de jQuery pour afficher et masquer un élément CSS (.tabstags) qui par défaut est masqué.

$(document).ready(function() {



        /* Gestion des tags déroulants */

        $("li.tags a").click(function() {

                $("ul.tabstags").toggle("slow");

        });

});

Les info-bulles

Simple utilisation du plugin ToolTip disponible pour jQuery et activable via la syntaxe :

$(document).ready(function() {



        /* Plugin ToolTips */

        $('a, input, img').Tooltip();

});

Quelques idées à venir si elle ne demande pas de modification du kernel de Dotclear :

Formulaire Ajax powered pour éviter de recharger la page lorsqu'on demande une prévisualisation, sous condition que ça ne facilite pas le SPAM.
Formulaire de recherche à la Google Sugeste.
Et bien plus encore ;-).

Preview du thème LLaumgui-ng

llaumgui — Fri, 23 Feb 2007 00:08:00 +0100

A la demande générale de certain qui se reconnaîtrons, je suis en train de concocter un nouveau thème pour mon blog, simplement appelé llaumgui-ng.

Pour le moment, vous pouvez admirer une preview de ce que ça donnera : un thème qui se rapproche du bureau de Gnome avec un header bien plus sobre que l'actuel qui sera basé sur un fond d'écran de Diana.

Question technique, j'utilise des éléments de CSS 2.0 qui pourraient ne pas être compatible IE6 (:first-child par exemple), et je m'en fout ! Je ne vais pas me casser le XXX à la place des ingénieurs de chez Microsoft qui ne sont pas fichus de coder un navigateur munit d'un interpréteur correct ! A bon entendeur...
Je suis aussi en train de regarder du côté de jQuery, inclue dans DotClear 2.0 afin de voir ce que je peux en faire...

J'attends vos remarques et commentaires.