Du libre et du sport

Plugin DC2 : Javatar

Osku — Mon, 21 Jul 2008 15:37:00 +0200

Voici donc le plugin Javatar pour Dotclear 2.0 qui permet d'afficher l'avatar de votre compte Jabber dans les commentaires si vous êtes inscrit au service Présence Jabber.

Installation:

Téléchargez et installez le zip de la dernière version comme d'habitude
Rendez vous sur la page d'administration du plugin, l'activer (cocher la case).
Vous devez éditer les post.html et page.html du thème actif pour la mémorisation de l'adresse Jabber.

Dans ces fichiers, ajouter le bloc suivant dans #comments dl dd

      <tpl:SysIf has_tag="CommentAuthorJavatar">
      {{tpl:CommentAuthorJavatar}}
      </tpl:SysIf>

Et le bloc suivant dans #comment-form où vous voulez (pourquoi pas sous le paragraphe correspondant à l'adresse e-mail)

<tpl:SysIf has_tag="CommentAuthorJavatar">
        <p class="field"><label for="c_jabber">{{tpl:lang Jabber}}&nbsp;:</label>
        <input name="c_jabber" id="c_jabber" type="text" size="30" maxlength="255"
        value="{{tpl:CommentPreviewJabber encode_html="1"}}" />
        </p>
</tpl:SysIf>

Remarque: Si vous supprimez ce plugin, il n'est pas nécessaire d'éditer une nouvelle fois les fichies template.Merci les tpl:SysIf has_tag.

Personnalisation:

Vous pouvez choisir votre propre image par défaut (un chemin absolu est requis)
Vous pouvez donner une feuille de style spécifique à l'extension

Important

L'adresse Jabber est obligatoire pour la saisie d'un nouveau commentaire

Todo list:

~~Affichage de l'aide : j'ai moi-même besoin d'aide :-).~~ Résolu
Mémorisation dans le cookie de l'adresse Jabber.
Installation automatique des blocs.
Sélection automatique de l'image par défaut en fonction de la taille.
Ajouter une option pour rendre facultative la saisie d'un commentaire.
Traduction incomplète : You must provide a valid jabber address.

Quoi de neuf pour Dotclear 2.0 ?

Osku — Mon, 21 Jul 2008 15:12:00 +0200

En suivant la ligne du temps de Dotclear 2.0, on s'aperçoit que depuis la dernière RC2.1, les évolutions vont bon train.
Voyez par vous-même :

Le gestionnaire d'extensions a été revisité et permet maintenant de désactiver/activer les extensions. Toutefois n'y croyez pas que vous allez pouvoir réaliser cette opération sur certains blogs de votre ferme. Cette désactivation vaut pour l'intégralité des blogs. La désactivation par blog est une fonctionnalité intrinsèque au plugin.
Le module a été réécrit. L'import depuis Dotclear 1.2.X se réalise très facilement via se plugin. Et une classe d'import depuis Wordpress est en train de voir le jour (mais encore en travaux)
Le bug du classement des pages a été résolu. Un nouveau champ permet de gérer la position de la page. Vous pouvez donc les organiser comme vous voulez.
Une nouvelle présentation du bandeau de navigation du panneau de navigation a vu le jour. Pratique quand vous avez de très nombeuses extensions installées.
Enfin, le gestionnaire de thèmes a été remanié: il affiche notamment un lien direct vers la feuille de style sélectionnée.

Je vous laisse voir par vous même dans les différentes captures d'écran que j'ai faite. Les évolutions sont nombreuses depuis quelques mois.
En cette période de tour de France, j'aurais presque envie de soumette à Olivier un contrôle anti-dopage :-).

Tiens, des javatars...

Osku — Fri, 18 Jul 2008 17:10:00 +0200

Si votre compte Jabber est inscrit au service Presence Jabber, vous allez pouvoir montrer votre avatar dans les commentaires de ce site
Il s'agit dans un tout nouveau plugin, pas encore entièrement finalisé. Il manque :

Le nettoyage du code
L'installation automatique des blocs
La traduction
L'aide
La mémorisation dans la cookie de l'adresse Jabber sur le blog

Dans la partie administration du plugin, vous pouvez personnaliser l'image par défaut ainsi que la taille des Javatars affichés sur votre site (merci pour l'API de qualité).

L'adresse Jabber n'est bien évidemment pas affichée.

En attendant la mise à disposition d'une version propre, vous pouvez tester ici même :).

Horloge astronomique

Osku — Mon, 07 Jul 2008 16:54:00 +0200

Plus d'informations

Cliquer pour agrandir

Police Fontin: voyez plutôt...

Osku — Fri, 04 Jul 2008 22:41:00 +0200

Allez donc vite la récupérer.

Billet rapide

Osku — Fri, 04 Jul 2008 22:29:00 +0200

C'est possible depuis le changeset 2039 de Dotclear 2.

Drôlement bien :-)

Wikibarre personnalisée

Osku — Mon, 30 Jun 2008 12:25:00 +0200

Pep met à disposition sur son bricoland une barre d'édition au format Wiki pour les commentaires pour les sites propulsés par Dotclear.

Et bien sachez que le plugin est si bien fichu qu'il est possible de personnaliser cette barre d'édition.

Du coup, j'ai réalisé vite fait une version à base d'icônes du Projet Tango.

Mise en place

Téléchargez le fichier
Décompressez le et charger le contenu dans le dossier de votre thème en s'assurant de bien garder l'arborescence des fichiers :
- /img/wikibarre pour les images des boutons de la barre
- /wikibarre.css (à la racine du thème donc) pour la CSS relative (seuls les noms des images changent par rapport à l'édition disponible avec la version originale)
Aller dans le panneau de configuration de la wikibarre et renseigner donc le nom de la feuille de style de la wikibarre personnalisée, c'est à dire exactement:

wikibarre.css

Voilà, mission accomplie.

Refonte du thème Wsuper pour Dc2 - Testez svp

Osku — Tue, 17 Jun 2008 16:00:00 +0200

Voici quelques informations.
Le thème est livré avec 3 structures fixes (ou 'layout') :

bandeau de navigation à droite (layout-2C.css)
bandeau de navigation à gauche (layout-2A.css)
bandeau de navigation de chaque coté (layout-3E.css)

Merci encore à Kozlika pour les Aorakits.

Il est possible également de personnaliser la couleur de l'en tête, 7 images de couleur différente sont disponibles:

Bleu
Rouge
Violet
Cyan
Vert
Jaune
Orange

Ainsi que les zones .comment-info-co et #comments dd où les couleurs suivantes sont possibles:

Bleu
Rouge
Violet
Vert
Jaune
Orange

Vous avez les noms des images dans la feuille style.css, vous devriez vous en sortir pour personnaliser à votre guise votre blog :).

Quelques exemples de personnalisation :

En attendant de le remonter sur dotaddict, j'aimerais bien que vous testiez le thème et me fassiez des retours :)
Petit rappel, ce thème est disponible sous licence GPL.

Rendez vous directement sur le billet de support du billet pour le téléchargement

Refonte du thème Wsuper pour Dc2

Osku — Thu, 12 Jun 2008 15:08:00 +0200

Voici un aperçu de la prochaine version du thème Wsuper pour Dotclear2 :

Reset

Osku — Thu, 29 May 2008 14:31:00 +0200

On redémarre de zéro.
J'ai longtemps hésité avec une solution Gandi Herbergement mais l'offre (mt) Media Temple m'a séduit. J'ai également été très supris par la facilité avec laquelle j'ai installé une instance de Dotclear 2 RC1 pour gérer mes 2 domaines hébergés.
Restez branchés :-)

Des empreintes dans les commentaires

Osku — Fri, 21 Mar 2008 11:59:00 +0100

Un petit message de prévention aux futurs commentateurs, ce site garde en mémoire les informations concernant votre systême d'information et votre navigateur. Et je ne vous laisse pas le choix :-)

Tout ceci est possible gràce au plugin Empreinte confectionné par Sacha. Et une fois encore, tout est automatique, après l'installation, il suffit d'aller dans le menu de l'extension Empreinte pour configurer à votre guise le plugin. Il est inutile de modifier les fichiers template de votre thème.
Prévoyez quelques ajustements de votre feuille de style :) Par exemple :

#comments dt img
{
border:none;
margin:0;
padding:0;
}

Capture d'écran de la configuration:

Pour le tester, vous pouvez par exemple laisser un commentaire.

Pour le téléchargement, c'est par là.

Appel aux testeurs de plugins DotClear2

Osku — Fri, 07 Mar 2008 15:07:00 +0100

... pour tester la prochaine version de Carnaval qui gère maintenant les rétroliens :-).
Dans le même menu d'extension "Commentaires avec CSS" (d'ailleurs je vais pas tarder à changer ce nom ; les idées sont bienvenues), l'adresse du site web est utilisée dans le tpl PingIfOdd pour aller chercher la classe CSS que vous avez définie.
Ca semble fonctionner mais sait-on jamais...

Exemple d'affichage dans les rétroliens :

Sur ce billet^[1], après le bloc La discussion continue ailleurs, le rétrolien a une classe CSS supplémentaire SachaComment (afficher le code source pour voir).

Téléchargement provisoire :

Lien direct

Si vous avez un hébergement qui carbure avec du PostgreSQL, merci de le préciser aussi. Il y a quelques coquilles dans la traduction, ça va être corrigé :-).

Notes

[1] Ce doit être un des seuls rétroliens de mon blog \o/

Thème DC2 : Wtango

Osku — Thu, 07 Feb 2008 14:59:00 +0100

Voici un petit thème vite fait avec la palette et les icônes issus du projet Tango.

Mini screenshot :

Quelques spécificités:

L'utilisation de la fameuse pre2ol.js d' Olivier - bien pratique pour ceux qui codent beaucoup dans les billets dotclear.
Accès à la feuille de style du thème via les paramètres des thèmes : onglet Configuration du thème disponible après la sélection du thème.
Pas d'effets jQuery dans tous les sens.

Version 0.2 du 08/02/08

Correction de la CSS autour de la brique "@links" dans la sidebar
Correction du non affichage des boutons de type "submit"

Version 0.3 du 13/03/08

Mise à disposition du thème avec les dernières modifications (nombreuses)

Plugin DC2 : Carnaval

Osku — Sun, 03 Feb 2008 15:23:00 +0100

Je vous ai parlé récemment d'une astuce jQuery pour identifier certains commentaires. Mais voilà, certains ont déjà remarqué que si on désactive le javascript dans les préférences du navigateur, la mise en forme disparait fort logiquement.
Et voilà comment et pourquoi est arrivé le plugin Carnaval qui est tout simplement la plouguénisation de la fonctionnalité jQuery !

Comment ça marche ?

Tout simplement: dans votre administration dotclear2, vous devez avoir une nouvelle extension "Commentaires avec CSS" dans laquelle vous allez pouvoir associer une classe CSS à l'email d'un de vos commentateurs. Il ne reste plus qu'à personnaliser via la feuille de style de votre thème :-). Vous n'avez rien à ajouter dans les fichiers template de votre thème, c'est pas beau ça ? ;-)

Quelques limites

Vous ne pouvez pas associer plusieurs classes CSS à un même email : seul le premier enregistrement trouvé sera pris en compte.
La fonctionnalité n'est pas encore opérationnelle pour les rétroliens mais c'est prévu.

Je me suis rapproché du projet non offciel dcplugins créé par le compère Sacha pour plusieurs raisons :

Un dépôt subversion pour la gestion des fichiers du plugin
Les bons conseils de Sacha pour toute la programmation

A terme, et après retours de votre part, ce plugin sera évidemment remonté sur plugins.da.
Soyez indulgent, c'est mon premier ploug.

Screenshots

Thème DC2 : Wdark Green

Osku — Wed, 02 Jan 2008 13:41:00 +0100

Nouvelle année, nouveau thème pour DotClear 2 ;-)
En essayant diverses fonctions de Gimp et Inkscape, on arrive à faire des trucs sympas sans forcer.

Mini screenshot :

Détails sur Dotaddict

Quelques Features :

L'utilisation de la fameuse pre2ol.js d' Olivier - bien pratique pour ceux qui codent beaucoup dans les billets dotclear.
Accès à la feuille de style du thème et javascript personnalisé via les paramètres des thèmes : onglet Configuration du thème disponible après la sélection du thème.
Pas d'effets Jquery par défaut mais une petite notice est écrite.
Le dégradé utilisé pour décorer le bloc #top est disponible dans le sous répertoire /img au format SVG (fichier top.svg)

Ce thème est livré sous licence GPL.

Mise à jour du 04/01/08

Version 0.5 en pièces jointes.

AJout d'une image dans le .post-title
Corrections de marge et padding dans divers blocs.
Adaptation pour la wikibarre du Pep.

Mettre en avant certains commentaires avec jQuery

Osku — Thu, 27 Dec 2007 14:58:00 +0100

Avec jQuery il est possible de mettre en avant certains de vos commentateurs.
Pour les commentaires filtrés sur l'adresse web utilisée. On ajoute une classe aux éléments dt qui contient les infos du commentateur et au contenu du commentaire dd

$("div#comments dt a[@href*='dotclear']") .parents("dt") .next("dd") .addClass("dotclearComment");
$("div#comments dt a[@href*='dotclear']") .parents("dt") .addClass("dotclearComment");

Pour cet exemple, j'imagine qu'on utilise un thème avec la structure <dl>, <dt>, <dd>, <dt>, <dd> ...
Ensuite, il suffit d'ajouter une règle dans la feuille style :

dt.dotclearComment,dd.dotclearComment{color:green;background-color:black}

Il est certainement possible de plouguéniser la chose sans utiliser le framework jQuery ;-)

Thème DC2 : Wjsdark Simple

Osku — Fri, 14 Dec 2007 16:45:00 +0100

Voici le thème Wjsdark Simple, un thème pour DotClear 2 avec tout plein de jQuery dedans.

Mini screenshot :

Installation :

Rien de nouveau de ce coté là, ça se passe comme d'habitude. Puis choisissez la décoration via Paramètres des Thèmes dans la partie administration de vote DC2.

Configuration :

Comme le thème Wsuper, vous pouvez peaufiner la feuille de style et les différents effets jQuery (je reviendrais en détails plus tard sur le sujet), tout n'est pas encore nickel de ce coté là - ça viendra.

Quelques fonctionnalités :

Si vous choisissez d'afficher le bloc 'recherche' parmi vos widgets, une loupe apparait en haut à droite de votre navigateur, il suffit de cliquer dessus pour laisser apparaitre le formulaire de recherche. Des effets d'accordéon sont définis sur toute la #sidebar, comme l'affichage des billets (seul le premier billet est déroulé). Dans le contexte du billet seul, il est possible de

masquer/afficher le corps du billet en cliquant sur le titre du billet
masquer/afficher l'ensemble des commentaires en cliquant sur le titre 'Commentaires'

Vilains bugs

IE n'affiche pas la loupe de recherche. La transparence du peu des images utilisées est mal gérée par IE

Licence :

GPL car c'est la plus courte à utiliser ;-)
Les pièces jointes sont lourdes du fait des différents éléments jQuery fourni. Je m'excuse auprès des heureux propriétaires de connexions bas-débit.

jQuery : plugin color

Osku — Tue, 13 Nov 2007 15:07:00 +0100

Bon, on continue dans la série des billets sur jQuery :-).
L'effet .animate permet de faire des trucs déjà sympas sauf de jouer sur les couleurs...
Je cherche et je découvre un plugin jQuery.color.js qui permet de jouer sur les couleurs des éléments css :

la couleur du text via 'color'
la couleur du fond via 'backgroundColor'
ou encore les différentes bordures via 'borderBottomColor', 'borderLeftColor', 'borderRightColor' et 'borderTopColor'

Le plugin semble uniquement compatible avec jQuery version 1.2 ou supérieure.

Exemple

$(document).ready(function(){
     $("#go").click(function(){
     $(".block").animate( { backgroundColor:'#008CFF', color:'#EFF8FF', borderLeftColor:'#000'}, 2000)
                       .animate( { backgroundColor:'#fff', color:'#444', borderLeftColor:'yellow'}, 2000);
     });
});

Ceci est un gros bloc qui change de couleurs si vous cliquez sur le bouton

Epatant, non ?

L'effet accordéon en jQuery (suite)

Osku — Fri, 09 Nov 2007 17:51:00 +0100

Afin d'éviter l'effet Accordéon sur le bloc (#div) sélectionné, la solution suivante m'a été donnée sur le groupe de discussion jQuery (merci Glen)

	$(document).ready(function(){
		$("#blogextra ul:not(:first)").hide();
		$("#blogextra h2").click(function(){
			var target = $(this).next('#blogextra ul')
			$("#blogextra ul:visible").not(target).slideUp();
			target.slideToggle();
	});
		$("#blogextra h2").mouseover(function () {
			$(this).css("cursor","pointer");
		});
	});

Le bloc se ferme mais ne se réouvre pas dans la foulée - c'est mieux.

Limites demeurantes :

Les widgets Liens et Liens de navigation fonctionnent pas : la magie jQuery fonctionnent seulement pour des widgets dont la structure est <div><h2></h2><ul></ul></div>
Le widget Texte ? bin ça dépend ! voir point précédent...
C'est tout (enfin je crois) ;-)

$("blog").addjQuery(function() {$("#blogextra").accordeon();});

Osku — Wed, 07 Nov 2007 10:47:00 +0100

Gni ?
Regardez sur le côté :-) J'ai ajouté un petit effet visuel pour l'affichage de la zone bandeau extra (#blogextra dans le squelette) : ça coulisse entre les widgets.

Et ce n'était vraiment pas compliqué à mettre en place vu qu'une documentation de qualité existe.

En jQuery, on met simplement en place le bazard avec :

	$(document).ready(function(){
		$("#blogextra ul:not(:first)").hide();
		$("#blogextra h2").click(function(){
			$("#blogextra ul:visible").slideUp("slow");
			$(this).next().slideDown("slow");
			return false;
		});
		$("#blogextra h2").mouseover(function () {
			$(this).css("cursor","pointer");
		});

Petites explications de code

au chargement de la page
caches moi (.hide) toutes les zones <ul> de la div #blogextra (#blogextra ul) sauf la première (:not(:first))
ajoutes moi une propriété "click" sur les titres <h2> de la div #blogextra
quand je clique sur un titre <h2>, caches moi avec un effet lent 'slideUp' (slideUp("slow")) la zone <ul> de la div #blogextra qui était visible (#blogextra ul:visible)
et aussi déroules moi lentement (.slideDown("slow")) la zone <ul> qui suit le titre <h2> cliqué.
le return false stoppe la propagation et annule l’action en cours. (plus d'infos)

Les trois dernières lignes nous permettent de changer l'aspect du curseur de la souris au survol des titres <h2> de la div #blogextra : tout devient intuitif ;-)