idolum.info - code zone

LightZone 3.3 sous Linux. En essai.

fabien — Fri, 11 Jan 2008 17:47:00 +0000

Après une très très longuuuuue attente de la part des utilisateurs, LightZone sort enfin sous Linux en version 3.3. C'est actuellement une version beta, possiblement bugguée, et sans support de la part de LightCraft.

Boulevard Jean Pain, Grenoble. Novembre 2007. En plus grand sur 'poulpattack !'

La dernière version disponible sous Linux était la 2.4. La version 3.3 Linux reprend toutes les améliorations apportées aux versions 3.x Windows et Mac (avec en particulier les filtres pré-définis, l'outil "ToneMapper" transformé en outil "Relight" ...)

Le bémol pour l'instant, c'est que cette versionest uniquement une version d'essai, fonctionnelle jusque fin Janvier. Ensuite, mystère et boule de gomme. Au pire abandon du projet sous Linux, ou alors possiblement une version payante.

A suivre.

dc:photobloug

fabien — Thu, 14 Jun 2007 21:29:00 +0000

Je travaille depuis quelques jours (ça finit par faire des semaines) sur un plugin pour Dotclear2, qui permet de le transformer à peu près proprement en outil de photoblog.

Ci dessous, des explications, la liste des fonctions accessibles, et le package.

Site de démonstration.

Principe

Le principe est le suivant: je veux afficher de grandes photos, en donnant la priorité aux photos vis à vis du texte. Je veux garder le moteur de Dotclear 2, avec son système de commentaires et de trackbacks, les liens d'abonnement, la mise en page par templates, les archives ... bref, tout le sale boulot déjà réalisé.

La meilleure solution, c'est donc de créer un plugin, qui va me permettre d'avoir quelques templates supplémentaires.

Ce plugin est compatible avec la version 2 beta 6 de Dotclear.

Fonctions disponibles

Liste des templates disponibles:

tpl:GetPostImage
tpl:GetPostImageThumb
tpl:GetPostText

et ... c'est tout ! Ah, si, j'ai ajouté une extension pour les URL disponibles, qui est le about.

Explications

tpl:GetPostImage

Ce template renvoie l'ensemble des images présentes dans un article, sous la forme:

<img src="mon_fichier_image" alt="texte alternatif" style="mise en page DC"  />

Ces images peuvent être présentes dans le chapô ou dans le corps du texte. Si il y a plusieurs images, elles seront renvoyées les unes à la suite de autres.

tpl:GetPostImageThumb

Cette fonction renvoie les vignettes correspondant aux images d'un article: l'utilisation standard de cette fonction est d'afficher une vignette dans la page des archives.

On peut passer comme argument la variable 'type' positionnée sur les valeurs suivantes:

m: medium image
s: small image
t: thumbnail image
sq: square image

Par défaut, c'est sq.

Deux autres variables sont accessibles : 'lien' et 'liste':

si 'lien' est positionné à 1, chaque vignette sera un lien vers le post correspondant.
si 'liste' est positionné à 1, les vignettes seront renvoyées sous forme de liste (utile pour plusieurs images par post).

Exemple:

{{tpl:GetPostImageThumb type="t" liste="1" lien="1"}}

tpl:GetPostText

Cette fonction renvoie le texte du billet purgé des ses images (post-chapo et post-content). Pas d'option disponible.

L'url about

J'ai rajouté une extension à l'ensemble des url disponibles par défaut. Avec ce plugun, un fichier about.html dans le thème sera interprété par DC. Son url est

{{tpl:BlogURL}}about

Limitations

Les fonctions d'extraction d'image procèdent par recherche de motif. Donc toute image trouvée dans le contenu va être renvoyée, en particulier si il y a des "smileys".

Téléchargement & installation

Télécharger:

le plugin en version 0.1;
un theme de démo.

Le thème n'a pas (encore) été testé sous IE (aïe).

Installer:

le plugin doit être décompressé dans le répertoire /plugins/
le thème doit être décompressé dans le répertoire de thème, et personnalisé (en particulier la page about.html).

Une photo au hasard: suite.

fabien — Sun, 06 May 2007 12:30:00 +0000

J'ai repris un peu le code du widget "Une photo dans la sidebar", que j'avais commencé avec ce billet. Voilà la version 0.3

La principale modification, c'est la possibilité de choisir le format de l'image affichée dans la sidebar, en se basant sur la nomenclature DotClear2. Ce plugin ne fait pas de redimmensionnement, il faut lui fournir les images.

La bonne nouvelle, c'est que si on indique un répertoire de média DC2, tout le sale boulot (de redimmensionner et de renommer les images) a été fait par DC2.

Bref, il y a deux utilisations possibles:

avec son propre répertoire d'images, directement à la bonne taille;
avec un répertoire de média de DC2, dans lequel il y a des images, et pour lequel il est possible de choisir un format square, ou thumbnail ...

C'est expliqué dans le README.

Télécharger sidephoto-0.3.tar.gz.

A décompacter dans le répertoire inc/plugins de votre Dotclear2 préféré. Ca ne fonctionnera pas du tout avec les versions 1.x de Dotclear.

Une photo au hasard

fabien — Mon, 26 Feb 2007 19:28:00 +0000

Ce week-end, j'ai bricolé un bout de code pour afficher une photo au hasard dans la sidebar de mon bloug.

Ce code est un widget dans la terminologie Dotclear, c'est à dire un petit bout de code simple, permettant d'ajouter des informations (ou dans ce cas une image) dans la sidebar.

Il faut télécharger le fichier ci-dessous, et le décompacter dans le répertoire inc/plugins de votre Dotclear2 préféré. Puis, dans l'interface d'administration, il suffit de le faire glisser dans la sidebar. Comme paramètre, il faut lui indiquer un répertoire avec des images (et oué, sinon, comment ki va faire pour afficher des images ?)

Et voilà.

Disclaimer: ce code est fait avec les pieds, on peut dire qu'il est grouik. En cas de mauvaise utilisation, il peut faire imploser votre bloug, laisser brûler les pâtes, ou commander à votre insu une jolie balayeuse sur chassis. Mais je refuse d'être tenu responsable de tout ça.

Télécharger sidephoto.tar.gz

A décompacter dans le répertoire inc/plugins de votre Dotclear2 préféré. Ca ne fonctionnera pas du tout avec les versions 1.x de Dotclear.

Note: version 0.3 disponible dans ce billet

woutch !

fabien — Sun, 18 Feb 2007 15:30:00 +0000

Je profite d'une après-midi tranquille (il fait gris, je récupère d'une grosse semaine de boulot, et Elise dort) pour tester quelques bricoles sur Dotclear: des menus glissants/déroulants dans la barre à droite. Trop classe.

Qu'est qu'il faut ? quelques lignes de javascript (tirées de ce tutoriel), deux lignes de CSS, et quelques modifications dans le code source de Dotclear (parce que je n'ai pas trouvé comment faire autrement, il y a peut-être plus propre).

Chargement du script jquery (ce code doit être présent dans l'entête de la page):

<script type="text/javascript" src="/dotclear2/themes/default/js/jquery.js">
</script>

	<script>
	$(document).ready(function() {
        $('#sidebar').find('dd').hide().end().find('dt').click(function() {
        var answer = $(this).next();
        if (answer.is(':visible')) {
            answer.slideUp("slow")
        } else {
            answer.slideDown("slow");
        }
    });
	});
	</script>

Modification CSS:

#sidebar dt {
	background: #F5F5F5 url(img/down.png) no-repeat 3px 4px;
	padding: 5px 8px 5px 23px;
}

La partie la plus douteuse est d'aller modifier le code correspondant dans le répertoire plugins/widgets pour que l'exécution des widgets renvoie des balises <dd> et <dt>.

mises à jour

fabien — Sat, 23 Dec 2006 16:29:00 +0000

Après une coupure internet d'une petite quinzaine de jours (merci Free, au revoir Free), c'est officiel, idolum est à nouveau actif. J'en profite pour passer à la version 2 de Dotclear. Pour pas tout faire en même temps, j'ai récupéré le thème par défaut. Exit le thème orange, il reviendra quand j'aurai le temps.

Il y a encore des problèmes d'adresses: http://idolum.info/dotclear2/fabien/index.php/ devrait être http://idolum.info/fabien/

Vraisemblablement, aucune des images insérées dans le billets précédents ne sera correctement liées. Pareil, au fur et à mesure.

Alors pourquoi ce passage ? La version 2 de Dotclear est un multiblog, ce qui permet de gérer la partie d'Elise et la mienne via une seule interface. Ca me simplifie la tâche, en particulier pour la gestion des thèmes. De plus, récement j'étais submergé par des messages de spam. Dans la version 2, il y a un antispam intégré, on va voir ce qu'il vaut.

Dans l'immédiat, je m'attaque au problème de gestion des adresses.

Edit: Voilà, les règles sont modifiées:

AddType x-mapp-php5 .php

#Activation
RewriteEngine On

RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^fabien/(.*) dotclear2/fabien/index.php/$1
RewriteRule ^elise/(.*) dotclear2/elise/index.php/$1

La 1ère, c'est pour utiliser du PHP5 (obligatoire pour DC2). Ensuite on indique qu'on utilise la ré-écriture d'adresses. Deux conditions successives: le fichier demandé n'est ni un répertoire ni un fichier (il n'existe pas). Alors on applique les règles de ré-écriture:

si l'adresse demandée commence par fabien/ alors on remplace fabien/ par dotclear2/fabien/index.php/
pareil pour elise/

La syntaxe utilisée est la syntaxe des REGEXP (regular expressions), qu'on retrouve dans sed, vi, le PERL ...

^ : début de ligne
. : n'importe quel caractère
* : l'occurence précédente a lieu 0 ou plusieurs fois
( ) : regroupement
$1 : contenu du regroupement

Traduction :
^fabien/(.*) : au début de la ligne
^fabien/(.*) : on trouve fabien/
^fabien/(.*) : et des caractères après, que l'on met dans $1

Facile !

koukou

fabien — Mon, 06 Nov 2006 22:51:42 +0000

Je viens d'installer Kubuntu sur mon ordi, pour diverses raisons: pour tester une distribution dont beaucoup de monde dit beaucoup de bien (ce qui fait beaucoup), par curiosité, et puis parce que je n'avais plus trop le temps de maintenir ma Gentoo.

Gentoo est une distribution linux ou toutes les applications (grosso-modo) sont compilées à partir des sources, ce qui accorde une flexibilité et une souplesse de configuration incroyable. C'est une distribution qui permet d'apprendre beaucoup sur l'architecture et l'administration d'un système linux. Le revers de la médaille, c'est qu'il faut y consacrer beaucoup de temps, et se tenir au courant des évolutions régulièrement.

Donc voilà, je me suis dit que j'allais tester Kubuntu. Au contraire de Gentoo, les packages sont compilés, et il y a une auto-configuration qui a l'air efficace. Donc moins de temps à bidouiller, plus de temps en dehors de l'ordi.

L'installation s'est déroulée de manière relativement correcte: je veux conserver toute ma distribution Gentoo, et en réutiliser certaines partitions (mon /home, mon /home/photos et mon /home/music). Donc je veux installer sans effacer. La première tentative s'est soldée par un échec: une boîte de dialogue qui me dit "veuillez patienter", et puis bloqué, pas de terminal accessible, clavier mort ... Deuxième essai : ça fonctionne, je me retrouve avec une installation de base, et c'est beaucoup plus rapide à installer qu'une Gentoo. Par contre le bidule d'installation en interface graphique a touché à ma table de partition sur un disque, et sous Gentoo j'ai un montage qui déconne. Rhaaa.

Reste à faire les réglages: pour installer des softs, c'est enfantin, 2 clics de souris et le logiciel (et ses dépendances) est installé. Là ou je trouve que ça pêche, c'est sur la documentation, et en particulier la documentation sur la configuration. Quelques exemples:

j'ai une souris optique USB, avec un fil, simple, Logitech. Cette souris est reconnue comme sans fil, et je ne trouve pas comment régler ça. Je sais dans quel fichier il faut aller pour le changer à la main, grâce à l'expérience Gentoo, mais quelle est la bonne manière de le faire sous kubuntu ? Pas trouvé dans la doc.
J'ai changé les drivers de la carte vidéo. Du coup, l'écran de connexion s'affiche en 640x480 (bouh), et mon espace de travail en 1280x1024 (normal). Je suppose qu'en allant régler le fichier /etc/X11/xorg.conf je vais m'en sortir, mais pourquoi Xorg a-t-il ce comportement ?
Je n'ai pas réussi à trouver comment on peut installer le système en RAID, je me suis contenté de monter les /home en RAID.

C'est donc un sentiment mitigé: un outil de très bonne qualité, facile à utiliser, ce qui est excellent pour rassurer le néophyte. Par contre, pour aller plus loin, trouver des réponses sur des points précis, ou faire une installation vraiment personnalisée, ça manque d'une bonne base documentaire.

A suivre: il faut que je m'installe un serveur web (vraisemblablement Apache), PHP5 et MySQL, et que je configure tout ça. Puis Unison pour le backup des données d'Elise.

projet Beryl: un bureau 3D facile à installer

fabien — Tue, 24 Oct 2006 21:51:38 +0000

J'en avais déjà un peu parlé, j'avais abandonné (problèmes de stabilité), et ça ressort, en plus propre, plus stable, assagi, quasiment maitrisé : le bureau 3D. La dernière mouture se nomme Beryl, et ça s'installe maintenant (sur un linux) sans difficultés(*).

Concrètement, qu'est-ce que ça apporte ?

Sous les différentes interfaces graphiques disponibles avec Linux (KDE, Gnome, E17 ... et tous ceux que j'oublie, dont les *box, fvwm ...) il y a la notion de bureaux virtuels. C'est à dire que l'espace de travail est multiplié, avec la possibilité de ranger les fenêtres comme on le souhaite: à la différence de Windows ou Mac, tous n'est pas sur le même bureau(**). Jusqu'ici, tout était à plat, les bureaux les uns à côté des autres. Maintenant, c'est sur un cube, qui tourne sur chacun de ses axes, par le flèches du clavier ou la souris. Gadget ? oui. Ça reste encore du domaine de la démonstration.

On rajoute toute une foule d'effets aux fenêtres: ce ne sont plus des rectangles figé, elle deviennent élastiques pendant les déplacement. Celle qui n'ont pas le focus peuvent devenir semi-transparentes. Une touche ou un mouvement de souris permet de faire apparaître un ensemble de miniatures représentant les fenêtres ouvertes un peu partout, rafraîchies en temps réel.

Pour le moment, le gain immédiat est de faire rougir de honte les windowsien et les mac-eux. Ensuite, l'émergence de la 3D va peut-être faire émerger de nouvelle forme d'ergonomie. Est-ce qu'une souris (déplacement 2D) est suffisante ? Peut on envisager l'utilisation de dispositifs à boules (type trackball) pour interagir ?

Pour rêver un peut, j'aimerai bien avoir la possibilité de structurer les données autrement. Actuellement, on a une arborescence des fichiers, et tout ça peut être vu sous forme d'un plan: des répertoires les uns en dessous des autres, avec des fichiers qui appartiennent à un répertoire. Mais par exemple, au boulot, on manipule beaucoup de données, avec des liens dans tous les sens de fichiers qui pointent sur d'autres (pour limiter la place prise, facilité les opérations de modifications ...), bref, c'est un joyeux bordel. Donc ce que je me dis (mais j'ai peut-être abusé du gateau au chocolat ce soir), c'est qu'on pourrait réfléchir à une autre manière de structurer les données. Et comme des outils de visualisation 3D sont là, ça pourrait nous aider à changer cette vision planaire (parce que je suis persuadé que pour manipuler des données efficacement il faut avoir une idée de leur structure, et que les outils utilisés conditionnent la structure).

Pour résumer, les étapes pour devenir maître de l'univers:

créer une interface de gestion de données (pour remplacer les gestionnaires de fichiers) avec forme et structure liées (arborescence verticale, ~~synergies~~ structures transversales (métadata ? relations ? ) ...)
réorganiser les synapses du cerveaux pour apprendre à structurer 3D
pendant cette phase introspective, faire rougir de honte les mac-eux et les windowsiens à cause de leur interface du XXième siècle
...
profiter pleinement de son statut de "maître de l'univers"

Ca suffit les bêtises. La prochaine fois, on parle des loutres (et de Socrate).

(*) par exemple pour Gentoo, il suffit de faire un emerge beryl, et d'ajuster la config de Xorg en mettant Option "AddARGBGLXVisuals" "true" dans la section screen, et Option "Composite" "Enable" dans la section Extensions. Et c'est tout, un redémarrage du serveur X plus tard, la 3D et les effets mous sont à portée de clic.

(**) oui, je sais, on peux rajouter des extensions sous pour avoir ce comportement. Mais c'est pas le comportement "normal", ni natif.

en ce moment ...

fabien — Fri, 07 Jul 2006 22:58:46 +0000

je teste la version bêta de Dotclear, et ça se passe ici.

spam attack

fabien — Sat, 08 Apr 2006 15:53:46 +0000

Attaque de spam ce week-end. Fermeture des trackbacks, nettoyage du spam. Fermeture des trackbacks sur le blog d'Elise itou.

changement de moteur

fabien — Mon, 20 Feb 2006 16:46:43 +0000

Ou plutôt, introduction d'un moteur de templates, pour me faciliter la tâche lors de la construction de nouveaux thèmes.

En effet, pour faire un thème, je dois à la fois modifier les fichiers de styles CSS, mais souvent, je modifie aussi la structure des la page. Par exemple, je place un bloc avant un autre.

Avec juste deux thèmes différents, c'est jouable en jonglant un peu avec des variables PHP. Mais je suis en train de construire un autre thème, et je me rend compte que cette manière de faire n'est pas efficace. Pour résumer, dans un page web, il y a:

le contenu;
la structure (c'est à dire l'ordre dans lequel est présenté le contenu);
la forme (couleurs, polices ...).

Jusqu'ici, j'avais confondu forme et structure. Les deux étaient réalisées au moyen de bidouilles conjointes dans le code PHP et dans le CSS. J'ai donc décidé de tout séparer, et pour ça je me suis interressé au couple XML / XSLT.

Le XML est un format de structuration de données (pour les anciens thésards, une analogie est possible avec LaTeX, qui n'est pas du XML), ce qui permet de décrire des données en leur donnant une structure rigoureuse. Un exemple pour la clarté:


<chapitre>

  <titre1>Un titre de niveau 1</titre1>

    <p>Ici un paragraphe, plein de texte.</p>

    <p>Un autre paragraphe.</p>

  <titre1>Un autre titre</titre1>

    <p>Un dernier paragraphe.</p>

</chapitre>

Voilà, c'est tout simple, on n'a qu'a s'inventer des balises pour structurer nos données, et à respecter des règles d'ouvertures et de fermetures des balises. Ensuite, pour travailler la dessus, on peut appliquer des transformations à l'arbre XML: selectionner un bloc, ou son contenu, ou un ensemble de blocs, ou tous les blocs enfants de chapitre qui correspondent à une règle spécifique ... On peut donc extraire des informations, et modifier la structure de l'information.

C'est donc ce que j'ai fait avec l'ensemble de ce site (hors blogs): les données ont été mises sous forme de fichier XML, la structure de chaque thème est créer par une transformation XSLT, et la mise en page par CSS. Ce qui donne le shéma suivant:

Pour détailler: le navigateur appelle le fichier index.php. Ce fichier charge le contenu (fichier XML) et la transformation à appliquer (fichier XSL, en fonction du thème). La transformation est appliquée, il en résulte un document XHTML (c'est à dire un document XML qui respecte certains standards, et qui peut être interprété par un navigateur). Ce document XHTML contiend l'adresse du fichier de style CSS, pour le rendu visuel. Le tout est renvoyé au navigateur. Facile !

geek geek geek !

fabien — Wed, 15 Feb 2006 11:48:47 +0000

Linux is good !

Repeat after me : Linux is good !

Je viens d'installer la toute dernière extension du serveur X (le programme qui sert à afficher les fenêtres, les bureaux, toussa). Cette extension s'appelle XGL, c'est un serveur X qui utilise l'openGL, c'est à dire toute la puissance disponible dans les processeurs des cartes video (au lieu d'utiliser le processeur principal). Gros bonus, y'a tout plein d'instructions 3D.

Bref, on arrive à des effets de 3D, de transparence réelle, et le tout est très fluide. (film de démo par Novell)

J'ai pas encore fait de capture vidéo des transitions, mais en attendant, 2 petits screenshots (les deux images du bas), qui montrent:

la transparence réelle des fenêtres (en statique, en dynamique) réglable à la molette
les 4 bureaux virtuels qui sont organisés sur 4 des 6 faces d'un cube. On voie la transition entre 2 faces sur le dernier screenshot

Plein d'autres effets rigolos/utiles/inutiles : zoom à la souris, miniatures dynamiques (quand on fait un Alt+Tab on a des miniatures des fenêtres, avec un contenu temps réel), changement d'opacité au focus ...

Bon, c'est encore bien instable, pas très évident à mettre en place, mais c'est très prometteur.

Repeat after me : Linux is good !

idolum.galerie : version 1.6

fabien — Sun, 22 Jan 2006 11:42:28 +0000

Quelques nouveautés dans cette version, un petit bug corrigé aussi.

La version 1.6 de idolum.galerie est disponible. Liste des changements par rapport à la version 1.5:

centrage vertical de la zone d'affichage dans la fenêtre du navigateur
réduction de la hauteur maximale des photos à 480 pixels, ce qui permet d'aérer un peu le titre
centrage de la photo dans sa zone d'affichage, quelle que soit sa taille, pourvu que ça reste en dessous de 480 pixels
correction d'un bug dans l'affichage des légendes, qui rendait le XHTML invalide

Un petit screenshot:

La version 1.5 a été modifiée pour prendre en compte la correction de bug.

Les packages à télécharger sont disponibles ici, et comme toujours, ne pas oublier de lire la doc!

idolum.galerie : script et explications

fabien — Thu, 15 Dec 2005 19:56:32 +0000

Voili voilou, j'ai repris mon script d'affichage de galerie photos, je l'ai re-manié, re-simplifié ... bref, il est mieux. Pour un aperçu, il est visible ici. En apparence, pas grand chose n'a changé par rapport aux versions précédentes, hormis les icones de navigations.

Mais surtout, j'ai mis en ligne des explications pour se faire une galerie à partir de ce script. Mon bla-bla est plutôt long, mais faut pas se laisser impressioner, c'est simple.

Tout ça est distribué sous license GPL, donc copie, modifications et redistributions encouragées !

Edition: dans mes liens je rajoute une rubrique vers des applications web de galeries en ligne.

c'est la fête

fabien — Wed, 30 Nov 2005 09:31:22 +0000

Et oui, la nouvelle version du panda de feu vient de sortir, elle est toute chaude comme la braise ...

Et comme une bonne nouvelle n'arrive pas seule, la version finale de KDE 3.5 sort aussi aujourd'hui !

Ca va chauffer !

idolum !

fabien — Mon, 07 Nov 2005 20:06:21 +0000

Et voilà , la grande migration est faite. On est passée d'un hébergement par notre fournisseur d'accès à un hébergement pro, en profitant d'une offre gratuite sur les noms de domaine. Donc http://idolum.info ou http://www.idolum.info, les deux fonctionnent tout aussi bien.

J'en ai profité pour ré-arranger un peu la structure du site, virer du superflu, rationaliser le code (c'est devenu beaucoup moins compliqué), et ça va encore s'améliorer. Forcément, avec tout le temps libre imposé dont je dispose ...

Et puis, aussi, un nouveau thème trop classe, connoté années 70 plutôt sage, coloré. Comme d'hab, une grande réussite 8-)

Et tout de suite, les réactions de nos lecteurs assidus:

B. Gates, de Redmond, USA:

It's absolutely wonderfull, so cool, I like the colors. Are the colors patented ?

Josette, de Bourg les deux églises, France:

Beh, pour sur, ça me rappelle ma jeunesse, toute ces couleurs ! Et pis j'aime bien toute ces pitites fleurs, partout.

Nicolas S., de Neuilly, France:

Ca fait très jeune, mais si on pouvait l'avoir en bleu-blanc-rouge ...

S. Jobs, de Silicon Valley, USA:

OMG ! why did I put a white apple on the powerbooks ? it could have been some colored flowers !

Des nouvelles du code

fabien — Tue, 04 Oct 2005 20:03:46 +0000

Thème clean

J'ai fait une mise à jour sévère du thème clean, pas encore testée sous IE6. Ca passe sous Opera et Firefox.

A ce propos, Opera est un très bon navigateur, moderne, et il vient de passer gratuit. Il est donc librement téléchargeable à cette adresse, et il existe en version française. Gestion des tabulations, implémentation correcte des standards, gestion des pubs et des pop-up, disponible sur plusierus plateformes ... du niveau de Firefox. La différence c'est qu'il n'est pas libre (gratuit, mais pas libre). A tester.

Dotclear et les commentaires

Je viens de trouver comment autoriser l'usage de la syntaxe wiki dans les commentaires. Donc voilà un résumé des possibilités:

__gras__ : gras
''italique'' (deux apostrophes, pas une double quote) : italique
++souligné++ : souligné
--barré-- : ~~barré~~
{{citation en ligne}} : citation en ligne
@@code@@ : code

Pour les listes non numérotées, il faut mettre une étoile devant chaque item, et pour les listes numérotées un dièse.

* liste
* non
* numérotée

ouala ... un peu plus de confort pour ceusse qui mettent des commentaires (essentiellement Denis, les autres n'osent pas ...)

Mise à jour

fabien — Tue, 27 Sep 2005 19:39:11 +0000

Le billet sur les différentes mise en page de galeries de photos a été mis à jour

En particulier, j'ai fait une explication de code détaillée, à la fois pour la page d'accueil et pour la boucle d'affichage. Enjoy !

Pour cette explication détaillée, j'ai pris comme exemple la tentative1.3. J'en ai profité pour ajouter les scripts et feuille de style correspondant aux packages. Re-enjoy !

Plume Power !

fabien — Sun, 25 Sep 2005 18:15:34 +0000

Ou l'on cause de CMS, CSS, d'Antoine, de choses et d'autres. Mais surtout de la maquette d'un site en cours de test. De couleurs. De fenouil, carottes, et autres aubergines.

J'ai quasiment fini le site la structure et la virtualisation (!) du web d'Antoine. La maquette - si je peux m'exprimer ainsi - est en ligne, et j'ai même fait un petit screenshot:

Pour faire ce site, j'ai utilisé un CMS nommé Plume. Ce logiciel fournit une interface web pour l'utilisateur, qui sert à poster des articles ou des brèves, sans se préoccuper de l'aspect code du problème: l'utilisateur remplit des cases (titre, description de l'article, contenu, ...), choisit dans quelle catégorie sera publié l'article, et en quelques "clics" l'article se retrouve publié.

Mais ceci suppose d'avoir au préalable établi une structure pour le site, et des gabarits pour chaque type de ressource (une ressource peut être un article, une brève, une page à part). J'ai donc réalisé pour Antoine l'ensemble de ces templates (gabarits en langue locale) grâce à la documentation de Plume, et en allant pêcher quelques infos sur leur forum. Le tout est codé en PHP.

Et puis j'ai réalisé les feuilles de style CSS, avec une couleur princpale par page. Le principe est simple, il faut appeler une feuille spécifique (par exemple style-bleu.css) qui appelle une feuille principale, et puis qui définit les couleurs spécifiques des éléments. Hum, je suis pas hyper clair. Un peu de code ...

Supposons qu'on s'intéresse à l'élément #footer, et que cet élément doit avoir une bordure dont la couleur varie en fonction de la page. On définit dans la CSS principale le comportement de cet élément:

#footer{

width:100%;

clear:both;

text-align:center;

font-size:1.1em;

letter-spacing: 0.2em;

font-weight:bold;

word-spacing: 0.3em;

border-style:solid;

border-width: 5px 0 0 0;

}

Avec ça, on a la largeur, le type de bordure, et la police. Maintenant, en fonction de la page, on appelle la CSS spécifique:

@import "principal.css"; /*ici, on appelle l'ensemble des propriétés communes à toutes les pages*/

#footer  {

border-color: #2828a0;

}

Et voilà. Y'a plus qu'à mettre au point un petit script PHP qui détermine quelle est la catégorie de la page actuelle, pour savoir quelle feuille de style il faut charger.

Bon, encore quelques peaufinages liés à la présence massivement dominante sur le web d'un pseudo-browser (dont le nom commence par I, finit par 6, et comporte un E) incapable de rendre correctement une page web, et puis ce sera bon. Yapuka attendre l'ouverture du resto d'Antoine ...

Galerie de photos

fabien — Tue, 13 Sep 2005 08:22:00 +0000

Les scripts d'affichage des photos sont à peu près stabilisés, et je fais ici un petit récapitulatif du comment-ça-marche.

Je mets aussi à disposition des packages tout faits, avec des vrais morceaux d'exemples à l'intérieur

Mise à jour : 28/09/05

Ce billet servira de documentation pour l'utilisation des galeries.

Le choix du script

Il y a actuellement 4 type de galeries différentes:

le script classique (fond noir);
le script expérimental 1.0 (fond gris, barre d'icônes);
le script expérimental 1.1 (fond gris, barre d'icônes centrée);
le script expérimental 1.2 (fond photo, barre d'icônes centrée).
le script expérimental 1.3 (fond noir, barre d'icone classieuse et police distinguée, vignette de 50x50 pixels à faire soit-même avant).

Le choix d'un script ou d'un autre est purement esthétique, il n'y a pas de différence fondamentale de fonctionnement. Le script classique demande un petit peu plus de travail, car il faut créer les miniatures à l'avance et les placer dans un répertoire[1]. Mais bon, ça reste raisonnable.

Structure générale d'une galerie (utilisateur)

Pour faire une galerie photo dans la vraie vie, il faut des photos, un synopsis, et des légendes. Et bien ici c'est pareil.

Pour simplifier, on va supposer qu'on veut une page expos, qui rassemble les différentes galeries, et que dedans on veut faire une galerie de photos de vacances, donc on va appeler notre répertoire qui va tout contenir expos et notre sous répertoire qui va contenir la galerie vacances (c'est original, non ?). Dans ce répertoire vacances, on place:

un fichier index.php, qui se charge d'afficher la première page de l'expo;
un fichier loop.php, qui se charge de la navigation dans l'expo;
un fichier legende.txt, qui contient le synopsis, le titre et les légendes de l'expo;
et un sous répertoire appelé photos qui va contenir les photos que l'on veut montrer fièrement sur le ouèbe (qui l'eut crû, une telle débauche d'originalité ...). Ces photos peuvent être en .jpg, .jpeg, .png ou .gif.

Pour le style, voir la note [2]

Une fois les fichiers installés à la bonne place, l'utilisateur a juste besoin de remplir le fichier legende.txt, en respectant la syntaxe. Le titre de l'expo se déclare par:

titre_expo;Ma galerie de photos de vacances;

Les point-virgules ";" sont absolument nécessaires. L'oubli d'un point-virgule sera sanctionné par le plantage du script, une bonne migraine et deux poignées de cheveux en moins. L'oubli de 2 point-virgules sera sanctionné par la lecture complète de l'executive email from S. Ballmer and B. Gates (et ça rigole pas).

Le synopsis se déclare de la même manière (toujours avec les ";"):

synopsis_expo;Le pourquoi du comment de cette expo, avec la possibilité de mettre plein de texte. Pour effectuer un retour à la ligne, il faut inclure <br /> 
et pour sauter une ligne <br /> <br /> 
 
 Voilà;

Et les légendes se déclarent individuellement:

nom_du_fichier_01.png;La légende qui correspond à nom_du_fichier_01.png.;

nom_du_fichier_02.jpg;La légende qui correspond à nom_du_fichier_02.jpg.;

Une fois que les fichiers sont copiés au bon endroit (scripts, photos) et que le fichier legende.txt est rempli, la galerie vacances est prête !

Résumé de la structure:

Packages et installation

Le package complet de toutes les versions (voir ci dessus pour le choix) peut être télécharger, soit en archive .tar.gz soit en .zip:

Anciennes versions[3]:

En le décompressant, ça crée un répertoire expos/ et l'arborescence visible ci-dessus. (dans la version 1.02, ça rajoute aussi la tentative 1.3).

Explications du code

Allez, un petit tour dans le code ? On va décortiquer la tentative 1.3 (parce que c'est la plus récente).

Il y a deux fichiers importants : index.php et loop.php. Le premier va être chargé lorsque le navigateur demande le répertoire de l'expo, il va donc afficher la page d'accueil avec le synopsis, et gérer l'ensemble des liens vers les photos. Ces photos sont affichées en appelant loop.php avec les varaibles adéquates. Une fois qu'on est dans loop.php, pour aller à une autre photo, ce script s'appelle lui-même en modifiant ses variables. Simple, non ?

Indexation des images

Bon, déjà, on a besoin d'un fonction d'indexation des répertoires, pour trouver les noms des fichiers images, et les mettre dans un tableau. On déclare cette fonction dans un fichier fonction.php (créatif, hein ?) et de cette manière, on a accès à cette fonction de manière simple ou qu'on soit dans le site.

<?php

function scandirimages($dir) {

$files = array();

$ext = array("jpg", "png", "jpeg", "gif");

$dh = @opendir($dir);

if ($dh!=False) {

while (false !== ($filename = readdir($dh))) {

for($i=0;$i

if(strpos($filename,".".$ext[$i]))

$files[] = $filename;

}

}

sort($files);

return($files);

}

?>

Explications: on a un paramètre, qui est le nom du répertoire dans lequel sont les images ($dir). On ouvre un tableau $files (vide) qui va contenir les noms des fichiers. On déclare les extensions valides (jpg, png, jpeg, gif) dans le tableau $ext. On ouvre le répertoire $dir, et puis on fait une boucle pour l'ensemble des fichiers contenus dans ce répertoire. Pour chaque fichier, on compare son extension avec les extensions déclarées dans $ext. Si il y a une correspondance, on ajoute le nom du fichier à $files. Ensuite on continue sur le fichier suivant.

Donc lorsqu'on appelle scandirimages($dir), il renvoie un tableau contenant l'ensemble des noms de fichiers images dans $dir, et les fichiers sont triés dans l'ordre alphabétique. Facile, non ?

Page principale

On va voir ici comment est réalisé l'affichage de la page de synopsis, grâce au script PHP. L'idée sous-jascente, c'est que tout doit être automatique: une fois que les images sont dans le répertoire kivabien, et que legende.txt est rempli, aucune autre intervention n'est requise.

Première partie du code: lire le synopsis, trouver les images.

<?php

require('../fonctions.php');

$dir = 'photos';

$files = scandirimages($dir);

$index = 0;

$fichier_legende = explode(";",file_get_contents('legende.txt'));

foreach ($fichier_legende as $key => $value) {

	if (ltrim($value) == 'synopsis_expo') {

		$synopsis = $fichier_legende[$key + 1];

		}

	if (ltrim($value) == 'titre_expo') {

		$titre = $fichier_legende[$key + 1];

		}

	if (ltrim($value) == 'lien_expo') {

		$lien_expo = $fichier_legende[$key + 1];

		}

	}

?>

Dans cette partie, on inclue les fonctions contenues dans le fichier fonction.php, on déclare que le répertoire dans lequel sont les photos est /photos (toujours aussi créatif ...), puis on rempli $files avec les noms des fichiers images. Ensuite on initalise l'index, (on est sur la page d'accueil), et on s'occupe du fichier legende.txt. On commence par l'exploser en suivant les points-virgules, qui marquent les séparations, puis on teste les valeurs: par exemple, si on trouve synopsis_expo alors la valeur correspondante est mise dans la variable $synopsis. De même pour le titre et les légendes de chaque fichier.

La suite, c'est la déclaration des headers html, pas de commentaires:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<head>

	<title>rue gerin :: <?php echo $titre; ?></title>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

	<meta http-equiv="Content-Style-Type" content="text/css"/>

	<meta http-equiv="Content-language" content="fr"/>

	<link rel="stylesheet" type="text/css" href="../xp13.css" />

	<link rel="author" title="Auteur" href="Fabien"/>

	<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />