Un loup blessé

Aller au contenu | Aller au menu | Aller à la recherche

Mot-clé - DotClear 2

Fil des billets - Fil des commentaires

lundi 11 août 2014

Deux tips complètement indispensables pour DotClear 2

De façon à retrouver les 2 boutons (prévisualiser et envoyer) comme sous DotClear 1 :

Dans le post.html changer le


<fieldset>
   <p class="buttons"><input type="submit" class="preview" name="preview" value="{{tpl:lang preview}}" />
   <tpl:IfCommentPreview><input type="submit" class="submit" value="{{tpl:lang send}}" /></tpl:IfCommentPreview></p>
</fieldset>

par


<fieldset>
   <p class="buttons"><input type="submit" class="preview" name="preview" value="{{tpl:lang preview}}" />
   <input type="submit" class="submit" value="{{tpl:lang send}}" /></p>
</fieldset>

Afin de retrouver la fonctionnalité que j'avais faite sous DotClear 1, modifier les fichiers rss2.xml et atom.xml :

Dans rss2.xml, changer :


<description>{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}
{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}</description>

par


<description>
     <tpl:EntryIf extended="1">{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}&lt;p&gt;&lt;a href="{{tpl:EntryURL}}"
       title="{{tpl:lang Continue reading}} {{tpl:EntryTitle encode_html="1"}}"&gt; {{tpl:lang Continue
       reading}}&lt;/a&gt;...&lt;/p&gt;
     </tpl:EntryIf>
     <tpl:EntryIf extended="0">{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}</tpl:EntryIf>
</description>

puis dans atom.xml, changer :


<content type="html">{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}
{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}</content>

par


<content type="html">
     <tpl:EntryIf extended="1">{{tpl:EntryExcerpt absolute_urls="1" encode_xml="1"}}&lt;p&gt;&lt;a href="{{tpl:EntryURL}}"
       title="{{tpl:lang Continue reading}} {{tpl:EntryTitle encode_html="1"}}"&gt; {{tpl:lang Continue
       reading}}&lt;/a&gt;...&lt;/p&gt;
     </tpl:EntryIf>
     <tpl:EntryIf extended="0">{{tpl:EntryContent absolute_urls="1" encode_xml="1"}}</tpl:EntryIf>
 </content>

Merci à Kozlika et Mirovinben

vendredi 6 mars 2009

Comment mobloguer sur DotClear via flickr

Les essais d'hier sont concluants. J'arrive à "moblogguer" en passant par flickr. Mais... c'est comment qu'on fait ?

J'ai plus ou moins suivi un tutoriel bien fait, je vous explique ce que j'ai fait :

  • J'ai rajouté une catégorie : Moblogging (Pour la différencier du reste)
  • J'ai créé un nouveau rédacteur dans DotClear :

- Identifiant : mob1loup
- Nom : 1loup mobile
- Niveau : Rédacteur avancé
- Format : HTML
- Statut de publication par défaut : En ligne
- Catégorie préférée : Moblogging
- Mot de passe : différent de mon compte principal

Comme cela, s'il y a une faille chez flickr, personne n'obtient le mot de passe d'administrateur du blog.

  • Ayant un compte Yahoo, je me suis logué sur flickr, j'ai suivi le tutoriel, j'ai rajouté mon blog, obtenu le mail permettant de publier et fait quelques paramétrages.

(L'important est de retenir que le type est MetaWeblogAPI et que pour DotClear 1, on a accès via http://url-du-blog/ecrire/xmlrpc.php tandis que pour DotClear 2, il faut d'abord activer l'interface XML/RPC dans les paramètres du blog pour obtenir l'url.)

Attention : Il y a 2 mails pour les envois. L'un juste pour uploader ses photos sur flickr et l'autre pour publier sur son blog !

  • J'ai testé l'envoi via mon téléphone mobile d'une photo avec un court texte. Erreur. Marche pas.
  • J'ai alors testé l'envoi via MMS. Cela fonctionne mais le texte du mail est remplacé par "Vous avez reçu un MMS provenant d'un abonné Orange" comme vous pouvez le voir sur ce billet. La présentation est du coup aussi à revoir dans flickr sinon mon blog n'est plus valide XHTML.
  • J'ai fouiné dans le paramétrage de mon téléphone, je croyais que les mails avaient été paramétré correctement et non, le mail d'envoi d'expédition était resté à "mail@orange.fr" alors qu'il fallait le mettre à "mon-numéro-de-tel@orange.fr".
  • Test d'envoi d'un mail contenant en objet le titre du billet, comme destinataire le mail fourni par flickr, l'image jointe et le corps du mail contenant le billet à publier. Cela fonctionne, j'ai peaufiné le paramétrage et adopté celui là :

<div style="text-align:center; margin-bottom: 1em;">
<a href="{photo_url}" title="Photo Moblogging via flickr"><img src="{photo_src_m}" alt="Photo flickr - Moblogging - {photo_title}" style="border: solid 2px #C3A758;" /></a>
<br />
<span style="font-size: 0.8em; font-style : italic; margin-top: 0px;">
<a href="{photo_url}">{photo_title}</a> (par mail)
</span>
</div>
<div class="moblog">
{description}
<br style="clear:both;" />
</div>

J'obtiens ainsi un billet valide avec un résultat visible sur ce billet.

C'est pas mal, non ?

jeudi 8 mai 2008

Clearbox et Shadowbox en remplacement de Lightbox2

Cela fait plusieurs semaines que je travaille sur ce billet, testant beaucoup de chose afin d'essayer de faire quelque chose d'exhaustif. Attention, ce billet est très long, très lourd, limite insipide par endroit. Aussi, un petit sommaire ne fera pas de mal :

01 Pourquoi abandonner Lightbox2, la référence ?

02 Quels sont les autres possibilités ?

03 Pourquoi avoir choisi Clearbox et Shadowbox ?

04 Tests de ClearBox et ShadowBox

05 Résultats des tests

06 Conclusions ?

07 Comment installer ShadowBox et ClearBox (DotClear 1&2, WordPress) ?

08 Remplacement du plugin LightBox pour DotClear 1

09 Utilisation de ClearBox et ShadowBox

10 Et vous...

Cela vous permettra de lire ce billet en plusieurs fois si vous en avez envie, chaque numéro de "chapitre" est cliquable.

  • Pourquoi abandonner Lightbox2, la référence ?

Parce qu'il est un peu lourd par rapport à ce qu'il fait (Plus de 200Ko tous javascripts confondus). Il est vraiment très bien puisqu'il passe partout (tous les navigateurs de tous les OS) mais ne faire QUE les images, c'est maintenant insuffisant !

  • Quels sont les autres possibilités ?

Il y en a une quantité phénoménale. Après pas mal d'heures à les tester, j'ai retenu Shadowbox et Clearbox. Petit tour rapide sur l'exclusion des autres :

(Cliquez ici si vous n'êtes pas intéressé par cette liste et passer à la suite.)

Lightbox Slideshow : Dérivé de Lightbox, ajout de la fonction slideshow. Toujours avec Prototype, ne fait que les photos.

Extrait Lightbox Slideshow

LightBox 2 de DrMickey utilisant LightBox2 et LightView donne un sildeshow aux coins arrondis, très joli mais toujours sous Prototype.

Extrait LightBox 2 de DrMickey

Un LightBox personnalisé : Avec Moo.Fx mais ne faisant que les photos.

Extrait Lightbox personnalisé

Videobox : Un lightbox pour les vidéos mais sous Mac OS X dans Firefox, aucune vidéo de visible (celle de Google) alors qu'elle est bien visionable si je l'ouvre dans un nouvel onglet.

Extrait Videobox

Lightview : Découvert pour MarcelDugomier sous WordPress, qui n'arrivait pas à installer "simplement" LightBox, le plugin pour WordPress est facile d'utilisation mais depuis, après quelques essais, il s'avère décevant ! En faisant un test sur une vidéo mov en H264, celle-ci est toute aplatie malgré les tailles transmises. De plus, la licence "sans modification possible du script" est gênante. Le summum de l'impossible pour moi : le CSS est INVALIDE et l'auteur ne comprend pas ce que cela veux dire :ouhla:

Extrait Lightview

Lightwindows : L'un des plus intéressant sur le plan des fonctionnalité mais sous prototype et pas de slideshow. Hihihi, les mov ne fonctionnent pas sous Internet Explorer 6 !

Extrait Lightwindows

Moodalbox : Contenu mixte, avec Mootools, pas de slideshow

Extrait Moodalbox

Slightbox : Ne fait apparemment que les photos et pas de slideshow. (Au moment où j'écris, le serveur ne répond plus, je ne peux pas mettre d'extrait :( mais je laisse une place en espérant que le site réponde à nouveau)

Extrait Slightbox

mooSlideBox 3 : Pas convaincu du tout par l'aspect, utilise mootools. L'animation qui surgit par le bas, c'est une bonne idée mais j'ai comme l'impression que mon écran n'est pas utilisé au maximum de ses capacités (et devoir cliquer sur le "close" :( )

Extrait mooSlideBox 3

Slimbox : Clone de Lightbox mais avec Mootools donc plus léger mais ne fait que les images.

Extrait Slimbox

Multibox : Multiformats. Utilise Mootools. Gèle la fenêtre de Firefox sous Mac OS X.

Extrait Multibox

Multifaceted Lightbox : Ne fais pas que les photos mais pas très "multi" non plus. Bouton close obligatoire. Bof !

Extrait Multifaceted Lightbox

Leightbox : Lien close obligatoire. Assez moche selon mes gouts.

Extrait Leightbox

Glassbox : Trop compliqué à utiliser à mon gout.

Extrait Glassbox

SqueezeBox : Si j'ai bien compris, c'est encore en béta, il n'y a pas assez d'explications sur le site pour que je juge le truc. Fonctionne avec Mootools.

Extrait SqueezeBox

MediaBox : Utilise Mootools, multiformat, ne fait pas les images mais possibilité de le coupler avec Slimbox.

Extrait MediaBox

LITbox : L'utilisation ne me convient pas.

Extrait LITbox

LighboxXL : Multiformat. Comme Lightbox, fonctionne avec Prototype.

Extrait LightboxXL

Lighbox++ : Multiformat. Comme Lightbox, fonctionne avec Prototype.

Extrait Lightbox++

PrettyPhoto : N'est pas très beau selon mes gouts et ne fait que les photos. Par contre, jQuery ET le javascript est très petit.

Extrait PrettyPhoto

iBox : Multiformat. Pas de galerie ni de slideshow.

Extrait iBox

SmoothBox : Comme Thickbox mais avec Mootools. Multiformat.

Extrait SmoothBox

jQuery Lightbox : Lightbox en jQuery mais ne fait que les photos, pas de slideshow.

Extrait jQuery Lightbox

HighSlide JS : Très joli mais me parait beaucoup trop compliqué à utiliser ! Multiformat. Bouton close obligatoire.

Extrait HighSlide JS

FrogJS Javascript Gallery : Fonctionne avec Prototype. Uniquement les photos.

Extrait FrogJS Javascript Gallery

GreyBox : Ne me convient pas du tout, j'ai trouvé cela vraiment moche, les boutons de navigation tout en haut ne me plaisent pas non plus. (multiformat)

Extrait GreyBox

GreyBox Redux : Pas très intéressant en dehors de la taille réduite par rapport à l'original.

Extrait GreyBox Redux

Suckerfish Hoverlightbox et Suckerfish Hoverlightbox Redux : Ne me plaisent pas visuellement.

Extrait Suckerfish Hoverlightbox

FrontBox : Ne me plait pas du tout visuellement. (multiformat)

Extrait FrontBox

Slightly ThickerBox : Evolution de ThickBox, sous jQuery. Je trouve cela moche.

Extrait Slightly ThickerBox

Lytebox : Multiformat. J'ai longtemps testé car le slideshow est vraiment très bien mais les lyteframes posent vraiment trop de problèmes suivant les navigateurs utilisés.

Extrait Lytebox

GmapsOverlay : Un lightbox pour les Google Maps, utilisant Mootools.

Extrait GmapsOverlay

SlimBox Extended version : Bof, encore avec Mootools. (multiformat)

Extrait SlimBox Extended version

Bumpbox : Encore avec Mootools, me semblait bien sympa avec l'animation qui "tombe" mais ni le flash ni les pdf ne fonctionne sur ma config !

Extrait Bumpbox

PopBox : Je n'ai pas franchement approfondi le sujet.

Extrait PopBox

FancyBox : Seulement images, en jQuery, pas de Slideshow.

Extrait FancyBox

FancyZoom : Kif Kif et en plus je n'aime pas trop.

Extrait FancyZoom

nyroModal : Très sobre, je n'ai pas vu s'il était possible de faire des slideshows et j'avoue ne pas avoir tout compris. (Utilise jQuery) A étudier ?

Extrait nyroModal

Control.Modal : Pas tout compris non plus. Utilise Prototype.

Extrait Control.Modal

TinyBox : Utilise prototype. Ne semble faire que les photos. Bouton close obligatoire.

Extrait TinyBox

Milkbox : Utilise Mootools, seulement photos, pas de slideshow.

Extrait MilkBox

RoeBox : Combinaison de LightBox et SlimBox, seulement les photos, pas de slideshow.

Extrait RoeBox

Awesome Box : Ne fait que les photos, pas de slideshow.

Extrait Awesome Box

Splash : Je n'aime pas trop les couleurs utilisées pour les boutons mais je note qu'il y a un slideshow. Dommage que les grandes images ne soient pas redimensionnées à la taille de l'écran.

Extrait Splash

Thickbox : Contenu mixte, avec jQuery donc plus léger mais ne fait pas de slideshow. Visuellement, je n'aime pas.

Extrait Thickbox

Facebox : Utilise jQuery mais ne me plait pas visuellement. Possède un slideshow.

Extrait Facebox

  • Pourquoi avoir choisi Clearbox et Shadowbox ?

Shadowbox est compatible avec Lightbox et je n'ai donc pas besoin de changer les codes de mes très nombreuses images, il prend le relai. On peut l'utiliser avec le couple Prototype-Scriptaculous, avec jQuery, avec Mootools... j'ai choisi jQuery car mes essais avec Mootools n'ont pas été satisfaisants et jQuery est plus léger que Prototype-Scriptaculous.

J'ai même essayé avec le Protoculous effect packer gzippé disponible dans le Protopack (28Ko seulement), tout est Ok sur un hébergement 1and1 mais ne marche pas avec un hébergement Free par exemple, donc jQuery est plus à même de convenir à plus de monde.

Clearbox fait de très jolis slideshow et permet d'ouvrir des frames simplement au survol de la souris (choix "click" ou "over").

On retrouve dans un slideshow, la flèche gauche pour reculer d'une image, en haut à gauche le bouton play pour lancer le slideshow, en haut à droite le bouton "close" :

Extrait Slideshow Clearbox 1

Voici la flèche vers la droite pour avancer d'une image et le bouton play qui est devenu un bouton "pause" une fois le slideshow lancé, une barre de défilement avançant au rythme du temps qui reste avant de passer à l'image suivante :

Extrait Slideshow Clearbox 1

En se déplaçant dans la partie inférieure de l'image, les miniatures qui composent la galerie s'affichent avec la possibilité de cliquer pour passer directement à l'image en question :

Extrait Slideshow Clearbox 1

Pour voir le slideshow en action, cliquez sur ce lien, attendez que toute la page soit affichée puis cliquez sur une image de cette galerie.

Clearbox et Shadowbox retaillent les très grandes images qui ne peuvent s'afficher dans votre écran et vous les présentent dans un format compatible avec la résolution de votre écran.

Les frames sur les pages web distantes sont plus sympa avec Shadowbox, les grandes images qui ne doivent pas être retaillées aussi.

Les CSS des deux sont valides W3C et l'ensemble des javascripts Shadowbox+Clearbox ne fait (en Ko) que moins de la moitié de mon Lightbox d'origine.

J'ai rencontré de nombreux scripts où il fallait impérativement cliquer sur le bouton "close" pour quitter alors que ClearBox et ShadowBox (comme beaucoup d'autres) se ferment aussi en cliquant à l'extérieur (dans la zone sombre).

Attention, tout n'est pas parfait non plus avec Shadowbox, les ascenseurs obtenu avec les codes <pre></pre> sont bien masqués (le contenu des box passent au dessus) mais non grisé sous Firefox/Mac OS X. Je positionne donc un ascenseur entre la série des Clearbox et celle des Shadowbox afin de voir. Le problème semble résolu avec Firefox 3 béta 5, à suivre.

  • Tests de ClearBox et ShadowBox

Le plus simple est donc de tester en direct live une certaine quantité de contenu sur différents navigateurs d'OS différents, GO GO GO :

(Cliquez ici si ces tests ne vous intéressent pas et passer à la suite.)

Le flv "seul" (14) n'est pas géré par Clearbox, il est juste là pour vérifier que le navigateur propose de télécharger le fichier. Tandis qu'une des fonctionnalité intéressante de Shadowbox est d'utiliser un FLVplayer intégré.

Je teste sur plusieurs type de vidéos (Youtube, Google...) car lors de mes tests avec LyteBox, j'ai constaté que cela fonctionnait avec YouTube mais pas Google alors que les deux sont pourtant des animations flash.

La page Web de ClearBox est très longue à obtenir car en Hongrie.

Si vous souhaitez multiplier les tests, voire que je teste autre chose comme les pdf transformés en swf, je vous conseille plutôt d'aller sur une page de test où vous n'aurez pas besoin d'attendre l'affichage complet de mon thème qui contient pas mal de "parasites" (au sens long à afficher) dans les sidebarres. (Les effets de type Lightbox ne pouvant se déclencher qu'une fois la page complètement chargée)

Avec Clearbox :

Contenu Web2.0 :
(01) Une vidéo YouTube - (02) Une vidéo Google - (03) Une vidéo DailyMotion - (04) Une vidéo wat.tv - (05) Une bande annonce trouvé sur le net - (06) La page web de Clearbox

Photos, Gallerie, Slideshow
(07) Une photo trop grande retaillée par défaut - (08) La même photo trop grande en taille normale, scrollable
(09) Une galerie Jake1 - Une galerie Jake2 - Une galerie Jake3
(10) Une galerie avec Preview et "start" - -

Flash et dérivés
(11) Un MP3 lu par NeoLao - (12) Une vidéo flv avec le neoplayer - (13) Une animation flash simple - (14) Une vidéo flv

Formats divers
(15) Une video wmv - (16) Une vidéo mov H264 - (17) Une vidéo mpg


Texte de test compris dans des balises pour obtenir l'affichage d'ascenceurs et voir ce que cela donne avec les effets Shadowbox et Clearbox...

Avec Shadowbox :

Contenu Web2.0 :
(18) Une vidéo YouTube - (19) Une vidéo Google - (20) Une vidéo DailyMotion - (21) Une vidéo wat.tv - (22) Une bande annonce trouvé sur le net - (23) La page Web de Shadowbox

Photos, Gallerie, Slideshow
(24) Une photo trop grande retaillée par défaut - (25) La même photo trop grande en taille normale, déplaçable, à la manière des "GoogleMaps"
(26) Une galerie Jake1 - Une galerie Jake2 - Une galerie Jake3

Flash et dérivés
(27) Un MP3 lu par NeoLao - (28) Une vidéo flv avec le neoplayer - (29) Une animation flash simple - (30) Une vidéo flv

Formats divers
(31) Une video wmv - (32) Une vidéo mov H264 - (33) Une vidéo mpg

Vous pouvez bien entendu me rapporter des configurations sous lequel cela ne fonctionne pas ou pas bien. Merci de me transmettre l'O.S., le navigateur et leurs versions. Si cela ne fonctionne pas du tout ou si c'est légèrement dégradé. Attention, avant de mettre en cause l'effet Shadowbox ou Clearbox, vérifiez que le contenu s'affiche lorsque vous ouvrez le lien dans un nouvel onglet ou une nouvelle fenêtre, et donc qu'il ne vous manque pas un codec ou que le site de partage de vidéo n'est pas en carafe !

  • Résultats des tests :

(Pour aller directement aux conclusions : ↓ )

1 - Sous WINDOWS XP SP2

a - Internet Explorer 6 :

(15) Téléchargement proposé du fichier WMV, pas de lecture, alerte de sécurité

Légère dégradation de l'effet Shadowbox (fondu au noir / bordure basse de l'iframe) sur tous les tests

(33) Les boutons du player mpg ne sont pas présents.

b - Firefox 3 béta 5

(15) No video apparait pendant le chargement de la vidéo WMV et après sa diffusion, les boutons du player ne sont pas présents.

(31) Comme (15)

c - Opera 9.26

Aucune des animations ClearBox (01)(17) ne s'arrêtent avec le bouton "close", le son continue et si on relance une autre vidéo à la suite, pendant le chargement de la suivante, on revoit les images de la précédente.

L'effet Clearbox est comme "au ralenti" avec un P4 à 2,4GhZ et un P4 à 3GhZ.

d - Internet Explorer 7

(15) Téléchargement proposé du fichier WMV, pas de lecture, alerte de sécurité

(16)(17) Pas d'autoplay des vidéos mov et mpg.

(32)(33) Mov et Mpeg continuent de jouer le son après le "close", les boutons des players ne sont pas présents.

e - Firefox 2.0.014

(15) La vidéo WMV s'ouvre en externe dans le Windows Media Player (c'est peut être un paramétrage chez moi)

(16)(17) Pas d'autoplay des mov et mpg.

f - Safari 3.1

(15) Ouvre le WMV dans Windows Media Player et retourne en page d'accueil pour le navigateur.

(16)(17) Pas d'autostart des mov et mpg.

(31) WMV non lu, le symbole Windows Media apparait dans la frame mais rien ne se passe.

2 - Sous Windows 2000 SP2

Résultats sous réserve, le PC de test ne possède pas de carte son. J'ai considéré le test comme Ok si l'animation/la vidéo se charge et est visionable.

a -Internet Explorer 5 : Pas d'effet Clearbox ni Showbox.

b - Firefox 2.0.0.6 :

(01) à (14) Ok

(15) à (17) non testés, les codecs ne sont pas installés

(18) à (30) Ok

(31) à (33) non testés, les codecs ne sont pas installés

3 - Sous Mac OS X 10.4.11 (Tiger)

a - Firefox 3 béta 5

(15) Ecran noir sur le WMV

(25) Le déplacement est "bizarre"

(31) Parfois l'écran reste noir au lieu d'avoir le WMV et comme (32)(33)

(32)(33) Les vidéo MOV et MPG restent en surimpression après le "close" et il faut un clic supplémentaire pour les faire disparaitre.

Mais bon, ce n'est qu'une béta et la très bonne nouvelle, c'est que les ascenseurs (overflow:auto des <pre></pre>) ne restent plus visible comme sous les versions 2.

b - Opera 9.50 beta

Le 1/4 inférieur bas de l'écran n'est pas assombri avec les clearbox comme si la taille de la fenêtre n'était pas transmise au script correctement.

Il arrive parfois qu'en lançant une animation, on voit la précédente pendant le chargement.

(14) Ne propose pas de télécharger le flv mais présente une erreur

(15) Les boutons du player WMV apparaissent en haut avant de reprendre leurs places.

c - Safari 3.1.1

(14) Le contenu "hexa" du flv est présenté dans la frame.

(15) Pas d'autostart sur le WMV.

d - Firefox 2.0.0.14

Les overflow:auto des balises <pre></pre> font que les ascenseurs restent visibles (ne sont pas assombris).

(13) Légère dégradation de l'animation au lancement, peut être due à l'ascenseur juste en dessous.

(15) Pas d'autostart, les boutons du player apparaissent en haut avant de reprendre leurs places en bas.

(15)(16)(17) Manque une zone grise sur le côté droit des player.

(33) La lecture du MPG provoque l'apparition d'artefacts colorés en dessous (sur la page web qui a été assombrie).

  • Conclusions ?

Je pense faire une mise à jour de ce tableau récapitulatif dès que j'aurais un peu plus de tests et en particulier un sous Linux et l'autre avec Internet Explorer 8 ou en fonction des retours d'utilisateurs...

Une zone blanche est "Configuration non testée", une zone verte pour "Tout est Ok", une zone jaune pour "Légère dégradation acceptable", une zone rouge pour "Ne fonctionne pas correctement ou pas du tout". J'ai encadré de bleu la zone systématique à problème qui concerne les MOV, MPEG et WMV aussi bien avec ClearBox (15,16,17) qu'avec ShadowBox (31,32,32).

Tableau récapitulatif des tests effectués

Shadowbox et Clearbox sont donc les deux qui me conviennent le mieux : Plus léger que Lightbox, compatible Lighbox, plus complet que Lightbox.

Le slideshow de la ClearBox me botte grave. C'est probablement uniquement pour lui que j'ai intégré le script. Faire des liens qui s'ouvrent sur des domaines externes rien qu'au survol, c'est sympa aussi. Pour tout le reste (et surtout pour l'affichage de flash et dérivés), ShadowBox est pas mal du tout. Evitons d'intégrer des vidéos WMV et MPG, le rendu est vraiment trop variable. Attention avec les MOV aussi. Opera a encore du mal avec les effets de type LightBox. Internet Explorer 5 sous Windows 2000 est "tout rouge" mais c'est normal, il n'est pas prévu pour, le test était là surtout pour montrer qu'en restant avec un vieil OS (W2000) mais avec un navigateur récent et soucieux des standards (Firefox), on pouvait obtenir quelque chose de tout à fait acceptable.

  • Comment installer ShadowBox et ClearBox (DotClear 1&2, WordPress) ?

- Pour la ClearBox, les modifications que j'ai effectuées sont principalement de la traduction de Hongrois (que nous parlons tous depuis le berceau, n'est-ce pas ?), les chemins des images et la suppression de l'url du fichier "ClearBoxé". En effet, lorsque l'url est assez longue, la box était bien centrée mais l'url provoquait un agrandissement sur la droite inesthétique :

Aspect d'une ClearBox avec une url longue

Si vous souhaitez retrouver ce texte, dans le fichier clearbox.css, cherchez :


CB_Text {
text-align: center;
display:none;
}

et supprimez la ligne avec "display:none;"

J'ai aussi modifié les images : Bouton précédent d'origine et Bouton suivant d'origine originales en Bouton précédent modifié et Bouton suivant modifié, plus parlant, non ?

- Pour la ShadowBox, les modifications que j'ai effectuées sont principalement les chemins des images.

Je vous propose donc un pack sous forme de fichier archive au format zip. Après téléchargement, dézippez le, uploadez à la racine de votre blog le dossier "clearshadow".

Si vous ne positionnez pas ce dossier à la racine ou que vous changez son nom, il vous faudra changer les chemins des fichiers .js et .css en recherchant les occurrences de /clearshadow/ dans les codes qui suivent en partie A et dans les fichiers : clearbox.css, clearbox.js et shadowbox.js.

Les morceaux de code à rajouter sont :

Partie A, après la balise <head> et avant la balise </head> de votre thème, rajoutez ceci :

Pour un fonctionnement avec jQuery (conseillé) :

(Les 4 premières lignes sont pour la ShadowBox, les 2 dernières pour la ClearBox)


<link rel="stylesheet" type="text/css" href="/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="/clearshadow/clear/clearbox.css" />
<script src="/clearshadow/clear/clearbox.js" type="text/javascript"></script>

Pour un fonctionnement avec le Protoculous effect packer gzippé (à vous de vérifier la compatibilité de votre hébergement) :


<link rel="stylesheet" type="text/css" href="/clearshadow/shadow/shadowbox.css" />
<script type="text/javascript" src="/clearshadow/protoculous.js.gz"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox-prototype.js"></script>
<script type="text/javascript" src="/clearshadow/shadow/shadowbox.js"></script>
<link type="text/css" rel="stylesheet" href="/clearshadow/clear/clearbox.css" />
<script src="/clearshadow/clear/clearbox.js" type="text/javascript"></script>

Pour un fonctionnement avec Mootools, Yahoo! User Interface Library, Ext ou Dojo Toolkit, consultez le site de l'auteur pour obtenir les fichiers "adapters".

Partie B, ensuite, juste après la balise <body>, rajoutez sur la ligne suivante :

(Pour la ShadowBox)

<script type="text/javascript">window.onload = Shadowbox.init;</script>

Pour DotClear 1, partie A et B se font dans le fichier template.php

Pour DotClear 2, j'ai mis la partie A dans _head.html et la partie B dans _top.html mais attention, les thèmes DotClear 2 peuvent déjà avoir jQuery d'inséré donc vérifiez. Si dans le thème au niveau du _head.html, vous trouvez un code du genre :

<script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.js"></script>

alors il ne faut pas insérer dans le partie A, cette portion de code :

<script type="text/javascript" src="/clearshadow/jquery-1.2.3.pack.js"></script>

Il faut, par contre, laisser cette portion de code :

<script type="text/javascript" src="/clearshadow/shadow/shadowbox-jquery.js"></script>

Pour WordPress, partie A et B sont à mettre dans header.php mais en faisant attention car votre thème utilise peut être déjà jQuery ou Prototype/Scriptaculous. Il faut donc choisir l'adapter en fonction de votre thème et supprimer dans le code que je vous donne la librairie déjà incluse par votre thème.

Il existe aussi deux plugins ShadowBox pour WordPress : Shadowbox JS et Shadowbox mais rien pour ClearBox.

Et voilà ! Si vous aviez précédemment installé une lightbox, il faut bien évidemment supprimer le code qui la concernait.

  • Remplacement du plugin pour DotClear 1

Pour ceux ayant installé le plugin LightBox JS 2.0 d'Alconis sous DotClear 1, il faut supprimer ces lignes comprises entre <head> et <head> :


<link rel="stylesheet" href="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="<?php echo dc_app_url; ?>/ecrire/tools/lightbox/js/lightbox.js"></script>

mais pas besoin d'enlever le plugin

Si vous utilisiez les balises rel="lightbox", pas besoin d'y toucher, Shadowbox les reconnait.

Toujours pour ceux ayant installé le plugin LightBox JS 2.0 d'Alconis sous DotClear 1, vous aviez peut-être patché le fichier class.wikixhtml.basic.php afin d'insérer les ligthbox en wiki. Je vous propose alors de le patcher à nouveau, pour DotClear 1.2.1 à 1.2.8, remplacez votre fichier par celui-çi (une fois décompacté, bien entendu, pour remplacer celui dans /inc/classes/ que vous aurez au préalable sauvegardé - A vos risques et périls).

Comme avant, vous pourrez obtenir l'effet lightbox avec cette syntaxe wiki : [lien|url||titre||LIGHT] ou un album avec [lien|url||titre||album].

Pour le paramétrage des ShadowBox et ClearBox, il suffit de rajouter le contenu du "rel" comme celà (en wiki) : [lien|url||titre|||rel] avec rel=clearbox ou rel=shadowbox, exemple : [lien|url||titre|||shadowbox; width=320; height=240;] rajoutera un effet shadowbox avec une taille de 320 par 240.

Et comme moyen mnémotechnique, j'utilise "1-2-3" : il y a 1 signe "|" entre le lien et l'url, 2 signes "|" entre l'url et le titre et enfin 3 signes "|" entre le titre et le paramètre "rel".

Plugin Gallery : Sous DotClear 1, j'avais modifié le fichier /share/gallery/themes/default/galleryGal.php en transformant cette ligne :


<a href="<?php dcGallery::imageURL(); ?>#gallery" title="<?php dcGallery::imageName(); ?>">

en :


<a href="<?php echo $galleryImage->getImageURL(); ?>" rel="lightbox[<?php dcGallery::galTitle(); ?>]" title="<?php dcGallery::imageName(); ?>">

afin d'obtenir l'effet lightbox sur mes galeries. Si j'avais conservé cela, c'est l'effet ShadowBox qui aurait été pris en compte. Comme j'adore le slideshow ClearBox, j'ai remplacé par :


<a href="<?php echo $galleryImage->getImageURL(); ?>" rel="clearbox[<?php dcGallery::galTitle(); ?>,6,start]" title="<?php dcGallery::imageName(); ?>">

et j'obtiens un slideshow qui démarre automatiquement au clic d'une image avec un timer de 6 secondes entre chaque image.

ClearBox et ShadowBox s'utilisent avec le paramètre rel="..." à indiquer dans le lien (href). En regardant le code source de la page de test "http://1loup.net/testclear.html", vous avez pas mal d'exemples à suivre.

Ce n'est pas un plugin, c'est donc à vous de rajouter des morceaux de code dans vos billets. Je ne trouve pas cela intéressant d'insérer systématiquement une shadowbox ou clearbox à chaque insertion d'image à partir des gestionnaires de média comme le font certains plugins. Ce n'est pas franchement pertinent, surtout sur les images de tailles moyennes. Je trouve que c'est plutôt à conserver pour les grandes images ou les galeries, les vidéos... Du coup cela nécessite de mettre un chouilla les doigts dans le code. Personnellement, j'utilise le wiki de DotClear 1, cela ne pose donc pas de problème. Sous DotClear 2, le wiki doit être "patchable" de la même façon mais je n'ai pas encore testé. Il suffit de regarder la fonction "__parseLink" dans le fichier que je fourni, elle comporte deux rajouts qui ne sont pas indentés comme le reste du code et sont entourés de commentaires. Sous WordPress, après avoir inséré votre image, il suffit de passer en mode HTML (ou code) et de rajouter le "rel" au niveau du lien :

Remplacer <a href="... par <a rel="shadowbox" href="... par exemple, au niveau du code de votre image.

  • Utilisation de ClearBox :

- Pour une image, un rel="clearbox" suffira

- Pour une galerie, un rel="clearbox[nomdelagalerie]"

- Pour un slideshow, un rel="clearbox[nomdelagalerie,nombredesecondesentre2images,start]"

- Pour une image non réduite à la taille de l'écran, un rel="clearbox(width,height,click)" (avec width et height les largeur et hauteur de l'image) et en remplaçant click par over, l'ouverture de la clearbox se fera au survol de la souris au lieu du click.

- Pour une animation flash (swf, youtube, dailymotion...) ou la page d'un site web, un rel="clearbox(width,height,click)" aussi.

Je crois que vous ne trouverez pas beaucoup plus d'information sur la page de l'auteur car elle est écrite en Hongrois mais si vous êtes à l'aise avec cette langue et que vous trouvez des infos que j'ai passé sous silence, je vous serais reconnaissant de m'en faire part.

  • Utilisation de ShadowBox :

- Pour une image, un rel="shadowbox" ou rel="lightbox" suffira

- Pour une galerie, un rel="shadowbox[nomdelagalerie]" ou rel="lightbox[nomdelagalerie]"

- Pour une image non réduite à la taille de l'écran, un rel="shadowbox;options={handleLgImages:'drag'}"

- Pour une animation flash (swf, youtube, dailymotion...) ou la page d'un site web, un rel="shadowbox; width=largeur; height=hauteur;" en remplaçant largeur et hauteur par leur valeurs respectives

Vous trouverez, bien entendu, plus de paramétrage et d'options sur la page de l'auteur (en anglais).

  • Et vous...

Vous avez eu bien du courage d'arriver jusqu'ici :ange:

Mais, vous, qu'en pensez-vous ?

Connaissez-vous des scripts de ce genre que je n'ai pas testé ?

Si vous voulez un coup de main pour l'installation et/ou l'utilisation, n'hésitez pas à demander de l'aide dans les commentaires. J'ai écris tellement de trucs et je suis quand même assez geek que je peux trouver cela facile alors que cela peut vous sembler "nébuleux" !

Je préfère ClearBox et ShadowBox, j'ai essayé de vous expliquer pourquoi mais c'est aussi une histoire de goûts et de couleurs, hein... Je ne vais pas me facher si vous trouvez cela immonde et que vous préférez les solutions que j'ai rejeté :pasbien:

Voilà comment un geek fait une incursion dans les Lightbox-like :hysterique:

Rappels des pièces jointes : Le pack ClearBox-ShadowBox et le fichier class.wikixhtml.basic.php pour DotClear 1.

samedi 15 septembre 2007

Liens déroulants en Javascript

En septembre 2005, j'installais ici des liens déroulant dans la sidebarre afin de l'alléger. Je suivais les indications trouvées sur Brindilles, un code valide XHTML offert par Borgo à Lithium. Depuis, le billet a disparu et comme Arkane m'a réclamé le code javascript, je me permet d'en faire un billet afin qu'il puisse servir à d'autres.

Il faut d'abord inclure ce script à l'intérieur des balises <head> et </head> (pour DotClear 1, c'est dans le fichier template.php du thème qu'il faut l'insérer. Sous Dotlear 2, c'est dans le fichier _head.html du thème)


<script type="text/javascript">
function showMoreAnything(blocknum, isOpen) {
hid = ('hide' + (blocknum));
unhid = ('click' + (blocknum));
if( document.getElementById ) {
if( document.getElementById(hid).style.display ) {
if( isOpen != 0 ) {
document.getElementById(hid).style.display = "block";
document.getElementById(unhid).style.display = "none";
} else {
document.getElementById(hid).style.display = "none";
document.getElementById(unhid).style.display = "block";
}
} else {
location.href = isOpen;
return true;
}
} else {
location.href = isOpen;
return true;
}
}
</script>

Ensuite, à l'endroit où doit apparaitre un lien déroulant, insérer ce code :


<span id="click111">
   <a href="#?jsenabled=no" onclick="showMoreAnything(111,'#?jsenabled=no');return false;">
   LIEN1</a>
</span>

<div id="hide111" style="display: none" >
   <a href="#" onclick="showMoreAnything(111,0);return false;">
   LIEN2</a>

   insérer ici les fonctions (php), textes, images apparaissant après avoir cliqué

</div>

Le LIEN1 est le texte du lien ou image apparaissant initialement et permettant de "dérouler" la suite
Le LIEN2 est le texte du lien ou image apparaissant après avoir cliqué et permettant "d'enrouler" = revenir à l'état initial

Il est possible bien évidemment d'utiliser des <ul><li> ... </li></ul> pour englober ce code afin d'améliorer la présentation.

En cas d'utilisation multiple de cette astuce, il faut changer le blocknum. Ici, dans l'exemple, c'est le nombre 111. Changer donc chaque occurrence de 111 par 112 pour le suivant puis éventuellement 113 etc... lors de l'utilisation dans une sidebarre. Dans une utilisation dans une liste de billets, vous pouvez aussi utiliser à la place une fonction php. Par exemple, pour obtenir le déroulement des commentaires sur ce blog dans la présentation "Commentaires par enroulement", j'ai remplacé 111 par <php dcPostID(); ?>, permettant d'avoir un numéro unique pour chacun des billets.

Pour voir un exemple, vous pouvez regarder la sidebarre de droite du blog de Mekbrun : ses liens, galeries, catégories et archives se déroulent en cliquant sur une image. Vous pouvez aussi regarder la présentation de ce blog en passant, dans la sidebarre, en "Commentaires par enroulement" au lieu des "Commentaires inclus" et voir qu'après chaque billet ayant des commentaires, vous pouvez les dérouler en cliquant sur le signe "+" à l'intérieur de la bulle de commentaire.

Amusez-vous bien :evil:

dimanche 19 août 2007

SVN de DotClear2, la suite

Et c'est quoi la nouveauté récente que je vous présente aujourd'hui ?

Une petite icone apparue dans le formulaire de saisie des billets, regardez comme elle est toute mimi (celle du centre) :

Bouton Media externe dans DotClear 2

Et au survol, on obtient quoi comme informations ? Media externe !

Et qu'est qu'ça fait quand on clique dessus ?

Cela ouvre une fenêtre, la voici :

Sélecteur de Media externe de DotClear 2

Mais pour faire quoi, donc ? Insérer des vidéos YouTube et DailyMotion rien qu'avec l'URL !

Après avoir donné l'adresse, on obtient une autre fenêtre permettant de choisir si la vidéo va être centrée, à gauche, etc...

Positionnement du Media externe dans DotClear 2

Elle est pas belle la vie ? Je sens qu'il y en a pas mal qui vont être ravi avec ce chti bouton d'insertion :pompom:

Mais, euh... à quoi je vais servir, moi, si Olivier, il intègre tout dans DotClear 2 ? :ouhla:

C'était la nouveauté de la Rev 1501 !

vendredi 17 août 2007

Au secours - J'ai besoin de Safari sous Mac OS X et d'un Linuxien avec le mplayerplug-in

Après les quelques tests précédents dans la diffusion de DivX via un navigateur, plutôt que de faire de l'imbrication avec les <object>, je tente des commentaires conditionnels.

(Oui, il était possible de combiner les deux mais finalement, je trouve cela aussi simple de séparer)

Bref, voici l'utilisation d'un code valide XHTML pour diffuser une vidéo au format DivX, mais je ne l'ai pas testé partout, je vais donc avoir besoin de votre aide.

Ce code fonctionne avec les vidéos hébergés sur Stage6 mais également pour les DivX hébergés sur vos propres serveurs.

J'ai testé ce code avec succès sous :

  • Windows XP
    • Firefox 1.0
    • Firefox 1.5
    • Internet Explorer 6
    • Internet Explorer 7
    • Opera 9

Clawfire a testé ce code sous :

  • Vista
    • Firefox 2.0

(qui m'a fait remarquer qu'il fallait préciser que le plugin désactive Aero)

J'aurais sans doute accès dimanche à un PC sous Windows 2000 avec Internet Explorer 5.5.

Donc, normalement, pour les personnes sous Windows, il ne devrait plus y avoir de problème si vous avez le plugin DivX.

J'ai besoin par contre de testeurs sous Mac et Linux.

Il fut un temps Thanos, RougeCerise, XIII et Garfieldd me lisaient mais je ne vois plus trop de commentaires d'eux. J'aurais bien aimé un retour de personnes surfants sous Safari. Voici le plugin DivX pour Mac. Merci de me signaler si cela fonctionne ou pas chez vous en me précisant la version de votre Safari et OS.

Idem pour Linux, j'ai cru comprendre qu'il était possible de lire un DivX dans un navigateur à l'aide du mplayerplug-in pour Mozilla. Est-ce qu'un Linuxien pourrait me faire cela ?

La communauté DotClear est en attente d'un code valide XHTML multiplateforme, merci d'avance à tous pour vos retours d'informations.

Attention, c'est toujours la même vidéo, elle comprend donc des hommes nus, c'est une vidéo avec un homme nu, ne pas cliquer sur play si vous êtes choqué par la nudité masculine.

Vidéo Stage6 - Braden Bacha Dantes cove - DivX

mercredi 15 août 2007

Les versions SVN de DotClear 2

Il y a quelques jours, j'ai installé la dernière version de DotClear qui était disponible à ce moment là sur Bricolanddrive, il me semble que cela devait être la Version 2.0-beta7 (Rev 1498).

Je n'ai pas exploré à fond les évolutions mais j'ai retenu surtout deux choses que l'on a sur DotClear 1 et qui me manquait...

Un lien permettant de transformer les billets wiki en XHTML :

Liens de conversion du wiki en XHTML dans DotClear 2

Un lien permettant de valider son code XHTML à l'intérieur des billets :

Lien de validation XHTML dans DotClear 2

Enjoy :hysterique:

vendredi 10 août 2007

Comment insérer MyBlogLog dans les commentaires sous DotClear 2 (valide XHTML)

Le code utilisé pour insérer le MyBlogLog de l'auteur d'un commentaire n'est pas valide XHTML et j'avais été obligé de le modifier pour qu'il passe la validation.

Sous DotClear 2, certains comme Guillaume ne savent pas comment l'insérer, je vous propose ma solution.

Dans le post.html du thème, rechercher la zone des commentaires et entre <tpl:Comments> et </tpl:Comments>, insérer ce code :


<a href="http://www.mybloglog.com/buzz/co_redir.php?t=&amp;href={{tpl:CommentAuthorURL}}" >
<img class="mybloglog" src="http://pub.mybloglog.com/coiserv.php?href={{tpl:CommentAuthorURL}}" alt="MyBlogLog" title="Voir mon profil sur MyBlogLog.com !" />
</a>

(Pour passer la validation, il faut respecter l'imbrication des balises <dd> <dt> <dl> ! )

Ensuite, il ne reste plus qu'à gérer son positionnement par CSS et son "style", j'ai rajouté pour ma part dans le style.css de mon thème :


.mybloglog { 
float : right;
margin: -1em -1.5em 0 0;
border: 1px solid #000;
}

afin d'obtenir une image flottante à droite et le "style MyBlogLog".

(Voir ce billet pour MyBlogLog et DotClear 1)

vendredi 6 juillet 2007

Petits rappels pour ceux qui veulent installer DotClear 2 chez 1and1


  • avoir une base de données MySQL en version 5
  • le domaine ou sous-domaine qui pointe vers l'installation de DotClear 2 doit avoir un .htaccess comportant ces instructions :

AddType x-mapp-php5 .php
DirectoryIndex index.php/

La première instruction est pour passer en PHP 5. La seconde instruction est pour éviter quelques erreurs 404 :ange:

  • Après avoir téléchargé et dézippé DotClear 2 chez vous, recherchez le fichier config.php.in :

Il est dans dotclear/inc, renommez le en config.php et ouvrez-le pour l'éditer.

Vous allez obtenir la plupart des informations nécessaires dans votre interface d'administration de 1and1 (http://admin.1and1.fr puis Administration de MySQL) :

Le "Database driver", c'est MySQL, vous remplacez donc la ligne define('DC_DBDRIVER',''); par define('DC_DBDRIVER','mysql'); !

Le "Database hostname", c'est "Nom du serveur de la base de données".

Le "Database user", c'est "Nom d'utilisateur".

Le "Database password", c'est "Mot de passe".

Le "Database name", c'est "Nom de la base de données".

Le "Tables prefix", vous n'y touchez pas s'il n'y a rien d'autre sur votre base de données. Si, sur la même base de données, vous faites une installation à la fois de DotClear 1.2.6 et DotClear 2, je vous conseille de remplacer dc_ par dc2_ ou alors cela va être le souk, hein :evil:

Le "Crypt key", vous y mettez la phrase que vous voulez mais ensuite, il ne faut plus y toucher !

Le "Admin URL", c'est le chemin vers l'administration, donc exemple, si votre installation de DC2 est à http://dc2.votredomaine.com, il faut inscrire http://dc2.votredomaine.com/admin/index.php Ok ?

Il y a ensuite trois zones que vous ne touchez pas (Cookie, Plugin et Cache).

La dernière zone est impérativement à décommenter chez 1and1, donc transformez :

// If you have PATH_INFO issue, uncomment following lines
//if (!isset($_SERVER['ORIG_PATH_INFO'])) {
// $_SERVER['ORIG_PATH_INFO'] = '';
//}
//$_SERVER['PATH_INFO'] = $_SERVER['ORIG_PATH_INFO'];
?>

en

// If you have PATH_INFO issue, uncomment following lines
if (!isset($_SERVER['ORIG_PATH_INFO'])) {
$_SERVER['ORIG_PATH_INFO'] = '';
}
$_SERVER['PATH_INFO'] = $_SERVER['ORIG_PATH_INFO'];
?>

par suppression des // en début de lignes.

Les modifications faites, vous pouvez sauvegarder votre fichier.

  • Uploadez chez 1and1 les fichiers de DotClear 2 dans le répertoire que vous lui avez réservé (exemple : dc2.votredomaine.com pointant vers un répertoire DC2)
  • Lancez l'installation de DotClear 2 en allant à admin/install (soit dc2.votredomaine.com/admin/install, par exemple).
  • N'oubliez pas que si vous passez en PATH_INFO (dans les Paramètres du blog), il faut aussi modifier la ligne qui précède (URL du blog) en remplaçant le ? final par un / !