Un loup blessé

Le blog, sous DotClear, d'un Geek Gay DVDvore. Naïf paranoïaque, utopiste désabusé.

Contenu | Menu | Sidebarre | Extra | Recherche | Bas de page

dimanche 18 mai 2008

Connaissez-vous ces séries

Chez Glowria, mon loueur "principal" de DVD par Internet, il y a plusieurs séries TV dont je n'ai jamais entendu parlé et pour lesquelles les résumés ne sont pas suffisant pour me faire une idée.

  • Les Frères Scott
  • That 70's Show
  • Mon oncle Charlie
  • Plus belle la vie
  • Les Soprano
  • MI-5
  • R.I.S. Police scientifique
  • The Shield

Que vous aimiez ou que vous détestiez, pouvez-vous m'en dire plus ? A quoi cela ressemble ? Dois-je les louer pour me faire une idée ou dois-je laisser tomber ?

Tag(s) :  - 

mercredi 14 mai 2008

Un choupinou dans Bones - Comparaison de YouTube, DailyMotion et Vimeo

Connaissez-vous la série TV Bones ? Non ? Petit résumé :

Le docteur Temperance Brennan, brillante anthropologue, possède le don de déchiffrer les indices laissés sur les os des victimes. Sa mission : aider le FBI sur des affaires criminelles trop complexes pour leurs méthodes. Pour cela, elle fait équipe avec l'agent spécial Seeley Booth, ancien sniper de l'armée qui, lui, se méfie de la science et des scientifiques et préfère suivre son intuition. (Glowria)

Mais je ne voulais pas parler des deux acteurs principaux mais d'un "second rôle", un assistant du Dr Brennan, tenu par T.J. Thyne jouant le rôle du Dr Jack Hodgins :

Jack est entomologue, c'est à dire spécialiste des insectes. Lorsqu'un cadavre est décomposé et que des insectes grouillent dessus, il les dissèque pour découvrir quelle substance ils ont avalée, et ainsi déterminer où la victime a été assassinée. Son passe-temps favori est de réfléchir aux complots qui auraient pu mener au meurtre. Membre d'une riche famille, il est l'un des principaux donateurs de l'Institut Jefferson, mais ne veut que personne ne le sache. (AlloCiné)

Et je trouve qu'il est très choupinou ce monsieur :banane:

Regardez-le, celui qui est tout à gauche :

Photo de groupe avec T.J.Thyne à gauche

Mais si, regardez donc ses yeux :

Les yeux de T.J.Thyne

Ah mais si je vous dis... regardez quand il sort de la douche là :

T.J.Thyne sortant de la douche

Non ? (Cliquez sur les photos pour les agrandir)

Vous le voulez en mouvement peut-être ? L'occasion de diffuser un extrait de l'épisode 9 de la saison 1 et de comparer en même temps, le rendu de 3 services : YouTube, DailyMotion et Vimeo :

J'ai donc extrait d'un DVD un petit morceau, transformé cela en mp4 (H264) et uploadé sur ces hébergeur de vidéos.

  • Avec YouTube, j'ai obtenu rapidement une vidéo en 320 x 240, d'une taille de 5.21Mo, pas de gestion du 16/9 (barres noires), fortes dégradations, surtout en début de vidéo :

Extrait de Bones (Saison 1 Episode 9) - Sortie de douche du choupinou T.J. Thyne (en flash)

  • Avec DailyMotion, j'ai obtenu une vidéo en 320 x 180, d'une taille de 7.47Mo, meilleure gestion du 16/9 (barres noires), fortes dégradations, surtout en début de vidéo :

Extrait de Bones (Saison 1 Episode 9) - Sortie de douche du choupinou T.J. Thyne (en flash)

Un choupinou dans Bones
envoyé par UnLoupBlesse

  • Et avec Vimeo, j'ai obtenu (mais en plus de 2H30, le temps que leur serveur traite ma vidéo) une vidéo en 504 x 284, d'une taille de 10.93Mo, respect du format 16/9 ET disponible en téléchargement au format d'origine MP4 (H264) en 1024x576 (19Mo) si vous avez un compte Vimeo !

J'ai mis la vidéo Vimeo en état "Private", le code secret est : ucdb

Extrait de Bones (Saison 1 Episode 9) - Sortie de douche du choupinou T.J. Thyne (en flash)


Un choupinou dans Bones from Un loup Blessé on Vimeo.

Conclusions ?

DailyMotion, c'est quand même mieux que YouTube mais c'est rien comparé à Vimeo.

Pour la qualité, Vimeo, c'est le top ! Mais il faut quand même un download supérieur à 2048 kbit/s sinon le streaming saccade un chouilla (ou mettre en pause et attendre un peu).

Qu'en pensez-vous ? (Du choupinou et de Vimeo ?)

Tag(s) :  - ,  - ,  - ,  - 

dimanche 11 mai 2008

Vuit HD

En remplacement de Stage6, en attendant l'ouverture de VREEL, vous pouvez toujours tester Vuit HD :

Avec cette URL,

http://www.vuithd.com/video/MADONNA_-_Frozen_640x480

vous avez ce code <embed>,


<div><object classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" codebase="http://go.divx.com/plugin/DivXBrowserPlugin.cab" width="620" height="510" align="middle"><param name="custommode" value="Stage6"><param name="autoPlay" value="false"><param name="src" value="http://www.vuithd.com/media/files_flv/user6/2267a44b08.divx"><embed type="video/divx" src="http://www.vuithd.com/media/files_flv/user6/2267a44b08.divx" custommode="Stage6" width="620" height="510" autoPlay="false"  pluginspage="http://go.divx.com/plugin/download/"></embed></object></div>

transformable en XHTML strict de cette façon, sur le même modèle que Stage6,


<!--[if IE]>
<div style="text-align:center;">
<object type="video/divx" classid="clsid:67DABFBF-D0AB-41fa-9C46-CC0F21721616" codebase="http://download.divx.com/player/DivXBrowserPlugin.cab" width="640" height="480"  >
<param name="src" value="http://www.vuithd.com/media/files_flv/user6/2267a44b08.divx" />
<param name="autoplay" value="false" />
<param name="custommode" value="Stage6" />
<param name="showpostplaybackad" value="false" />
<param name="wmode" value="transparent" />
<param name="loop" value="false" />
<param name="pluginspage" value="http://go.divx.com/plugin/download/" />
<p>Madonna - Frozen (en divx)</p>
</object>
</div>
<![endif]-->
<!--[if !IE]><-->
<div style="text-align:center;">
<object type="video/divx" data="http://www.vuithd.com/media/files_flv/user6/2267a44b08.divx" codebase="http://download.divx.com/player/DivXBrowserPlugin.cab" width="640" height="480">
<param name="src" value="http://www.vuithd.com/media/files_flv/user6/2267a44b08.divx" />
<param name="autoplay" value="false" />
<param name="custommode" value="Stage6" />
<param name="showpostplaybackad" value="false" />
<param name="wmode" value="transparent" />
<param name="loop" value="false" />
<param name="pluginspage" value="http://go.divx.com/plugin/download/" />
<p>Madonna - Frozen (en divx)</p>
</object>
</div>
<!--><![endif]-->

pour obtenir ceci :

Madonna - Frozen (en divx)

Tag(s) :  - ,  - ,  - 

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.

Tag(s) :  - ,  - ,  - ,  - 

mercredi 7 mai 2008

Petit intermède musical

parce que le prochain billet risque d'être lourd, mais lourd...

Playlist Jiwa (en Flash)

Test4

Tag(s) :  - 

dimanche 4 mai 2008

Pour XIII, MarcelD et SLB

...juste une petite dédicace en vidéo (de préférence sur mon blog pour avoir l'effet).

Tag(s) :  - ,  - 

Que meure le blu-ray...

Il y a une dizaine d'année, le Super Audio CD et le DVD-Audio devaient se battre pour soit-disant remplacer le CD.

Dix ans plus tard, où trouve-t-on des Super Audio CD et des DVD-Audio ? Qui qu'en a ?

Le CD est toujours présent sur le marché lui, malgré ses difficultés tandis que la plupart des gens se sont dirigés vers le MP3...

Le HD-DVD et le Blu-Ray ont voulu se battre pour remplacer le DVD, le HD-DVD est mort, qu'attends le Blu-Ray pour le rejoindre ?

Avec mon vidéo-projecteur, je suis très content de ma collection de DVD, il n'est pour l'instant pas question que je migre vers le Blu-Ray.

Les internautes sont très content avec le DivX, le FLV (YouTube, DailyMotion), le MP4 (Apple)... et voilà maintenant que le DivX s'invite sur les téléviseurs numériques HD !

Allez... qu'il crève donc le Blu-Ray.

Moi aussi, je peux faire mon vieux con, nanmého :banane:

vendredi 2 mai 2008

Insertion de PDF - Transformation en SWF - Paper Flash versus SWFTools

Diffuser des pdf sur son site, ce n'est pas hyper facile : on ne sait pas quel navigateur est en face et si l'internaute a, ou non, un plugin pour ouvrir le pdf directement dans le navigateur. Quand en plus on sait que selon les navigateurs, cela fonctionne plus ou moins bien, ralenti le surf, voire ne marche pas, on reste songeur...

Un moyen pour le diffuser est de le transformer au format flash ".swf". Un logiciel sous licence GPL permet de faire cela : SWFTools. Il existe sous Linux, sous Windows et il y a des explications pour l'installation sous Mac OS X (non testé).

Media Convert, site de conversion en ligne permet également de le faire sans installation de logiciel.

J'ai donc testé cela sous Windows, c'est pas mal du tout, même si les flèches de navigation dans le document sont un peu grosses à mon gout.

Adobe possède aussi un logiciel, Macromedia FlashPaper 2, payant (genre 100 euros) et il y a une version d'évaluation gratuite. J'ai donc aussi testé cette possibilité et là, j'ai été mort de rire.

J'ai donc pris un document pdf composé de plusieurs pages, sous Windows, j'ai fait la transformation du pdf vers le swf et j'ai chronométré les manipulations :

  • Avec SWFTools :

Je copie/colle mon document pdf dans le répertoire de SWFTools. Je fais "Démarrer / Exécuter / cmd (et Enter)". Je change de répertoire pour aller dans celui de SWFTools. Je tape la ligne de commande pour lancer la conversion :

pdf2swf -b -l nomdemonfichier.pdf

Résultat : 1 minute et 5 secondes, document de 1 424 218 octets.

  • Avec FlashPaper :

J'ouvre FlashPaper, je glisse mon document pdf sur sa fenêtre. Cela devient très long, j'entends le disque qui travaille, Adobe Acrobat s'ouvre, une imprimante apparait dans la systray et puis enfin un message sur la réception et le traitement en cours des pages. J'enregistre le document au format swf.

Résultat : 3 minutes et trente secondes, document de 5 744 548 octets.

Conclusions : En dehors du temps de perdu (3 fois plus de temps), de l'argent de perdu, je constate que le document généré par FlashPaper est énorme par rapport à celui généré par SWFTools (4 fois plus gros). Cela fait donc aussi perdre de l'espace disque et de la bande passante.

Navigation par SWFTools

Navigation par FlashPaper

A l'ouverture, il est vrai que la navigation dans le document généré par FlashPaper est "plus mieux" mais dès que j'arrive à la page 3 et que je vois qu'il ne s'est pas aperçu que les pages étaient dans l'autre sens et que tout le reste de mon document est illisible pour quelqu'un de normalement constitué, je me dis que SWFTools est quand même vachement mieux !

J'avoue aussi que l'impression du swf par SWFTools n'est pas prévu mais devant les très nombreux défauts de FlashPaper, je ne peux que le conseiller et, à la limite, proposez votre document pdf au téléchargement, les rares personnes souhaitant l'imprimer le téléchargeront et vous aurez encore gagné de l'espace et de la bande passante, des sous et du temps. Cela sera bien suffisant pour un simple blog !

Il existe autrement des solutions "online" pour transformer des pdf en livres virtuels mais dans le domaine gratuit, on devient dépendant du prestataire (un lien ou un embed/javascript vers le prestataire), on n'obtient pas le résultat physiquement chez soi et j'avoue ne pas avoir exploré les formules payantes.

Tag(s) :  - 

jeudi 1 mai 2008

Elle commence à faire la tournée des blogs...

et il n'y a rien à dire, autant j'adore mon Mac Mini, autant je trouve le Mac Book Air assez nul :

J'adooore cette contre-pub :bond:

C'est vraiment dommage que le ThinkPad X300 soit sous Windows. Mon rêve, c'est une machine aussi bien fourni que l'X300 mais sous Mac OS X. Et la finesse, le look, le prix, je m'en tamponne !

QUoi ?

Bah, un blog... c'est un avis personnel qui n'engage QUE moi (et encore!), purement subjectif etc...

Abonnez-vous à mon fil RSS

Quelques infos sur mon Twitter

Derniers blablas

Images aléatoires

Le choupinou Jake Gyllenhall
43bd155d73c69.jpg
Photos Persos
A05.jpg
Des choupinous sexy
I55-02.jpg
Fractales
cospiral.jpg

Syndication / Autres

Logo Free Hugs - Câlins gratuits

Logo Blog sans Pub

Logo Mon blog se nourrit de vos commentaires

Début | Contenu | Menu | Sidebarre | Extra | Recherche
Trombinoscopes