Un loup blessé

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

lundi 4 février 2008

Le manège

free music

dimanche 27 janvier 2008

MediaMaster - pour vous faire patienter

Je suis toujours à fond dans mon plugin DotClear alors je vous fait patienter en musique :

Enya - Sumiregusa (en flash)

Sympa, non ?

lundi 24 décembre 2007

Une playlist spéciale pour Gossbeau

Playlist Deezer pour Gossbeau (en flash)

J'en rigole mais qu'est-ce que cela doit être désagréable...

mercredi 12 décembre 2007

Deezer / Blogmusik valide XHTML dans WordPress malgré l'éditeur visuel

Je vais essayer de vous montrer qu'il est possible d'intégrer un player Deezer / Blogmusik dans un billet de WordPress, malgré la présence de l'éditeur visuel qui casse la code et le tout passant la validation XHTML.

1 - Prérequis :

- Je ne suis pas un pro de WordPress, je fais cela pour aider, alors attention aux commentaires. Si vous êtes un pro de WordPress et que vous savez mieux faire que moi, commencez déjà par vous poser la question comment cela se fait que c'est à moi qu'on vienne demander de l'aide et pas à vous... Par contre, tout commentaire venant apporter sa pierre à l'édifice est le bienvenu.

- Dans Options / Ecriture (de votre WordPress), assurez-vous d'avoir décoché l'option "WordPress doit automatiquement corriger les balises XHTML non valides". Parce que si vous ne savez pas mettre vos "simples" balises XHTML valides et que vous comptez sur WordPress pour le faire à votre place, on n'est pas sortie de l'auberge ! D'ailleurs, dans ce cas, je ne sais même pas ce que vous faites ici à lire ce tutoriel, c'est pour vous du chinois, ne vous infligez pas ce supplice :pasbien:

2 - Afin de travailler sur du concret, je vais résoudre le problème de Jérôme du blog Playmobils Estropiés & Associés : intégration d'une playlist Deezer dont il m'a donné le code fourni par Deezer.

Le code non valide :


<div style="width:180px;height:236px;">
<object width="180" height="236">
<param name="movie" value=" http://www.deezer.com/embedded/widget.swf?path=2548914&lang=fr&autoplay=0&id=328169"></param>
<embed src=" http://www.deezer.com/embedded/widget.swf?path=2548914&lang=fr&autoplay=0&id=328169" type="application/x-shockwave-flash" width="180" height="220">
</embed>
</object>
</div>

En suivant le protocole que j'avais donné pour rendre un code Blogmusik valide XHTML, cela ne fonctionne pas, pourquoi ? (alors que cela fonctionne très bien avec DotClear 1 et DotClear 2)

Le code obtenu est pourtant valide XHTML :


<div style="text-align: center;">
<object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" width="180" height="220">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" />
<p>Editors - BestOf (en flash)</p>
</object>
</div>

Parce que l'éditeur visuel de WordPress tente de modifier le code et le "casse" ! Je vais donc vous proposer plusieurs façon de faire et vous laisser choisir celle qui vous plait le mieux :

  • a) Utiliser les propriétés du Doctype transitionnel - Intégration à l'aide d'une iframe

La plupart des thèmes sous WordPress ont un Doctype XHTML transitionnel et permettent donc l'utilisation des "iframe" (qu'il n'est pas possible d'utiliser lorsque l'on code en XHTML strict). En intégrant le code du player Deezer par iframe, l'éditeur visuel ne verra pas le code du player, n'y mettra pas son nez et ne le cassera pas, nananère !

Commencez donc par vérifier que votre Doctype est bien un transitionnel en vous positionnant sur l'une des pages de votre blog et en demandant à votre navigateur d'afficher le code source. La première ligne se doit d'être le Doctype, si cette ligne contient le mot "Transitional", c'est gagné, vous pouvez utiliser les "iframe". (Si vous préférez regarder les fichiers de votre thème, jetez un oeil du côté du header.php)

La manipulation que je vous propose est donc toute simple, copiez le code valide XHTML utilisé juste au-dessus dans un fichier que vous nommez par exemple "Deezer1.html". Uploadez-le dans un répertoire précis sur votre hébergement (je l'ai mis dans un répertoire /share/ de mon répertoire wordpress) et utilisez ce code que vous mettez dans votre billet :


<p style="text-align: center"><iframe src="http://votrenomdedomaine/share/Deezer1.html" class="deezer" align="middle" frameborder="0" width="220" height="270" ></iframe></p>

Il faut bien évidemment adapter le chemin du src selon votre paramétrage.
Si vous avez envie de personnaliser la présentation par CSS, rajouter une classe "deezer" dans votre "style.css".
Attention, le player ayant width="180" et height="220", il faut que l'iframe soit plus grande que lui si vous ne voulez pas voir apparaitre de disgracieux ascenseurs ! Après plusieurs essais avec différents navigateurs, il semblerait que width="220" et height="270" soient les meilleurs paramètres pour l'iframe.

Lorsque vous voudrez intégrer une autre playlist, il suffira de recopiez le fichier Deezer1.html dans par exemple un Deezer2.html, de modifiez les DEUX "path", les DEUX "id" et le texte alternatif (compris entre <p> et </p>) puis de mettre dans votre billet, le même code de l'iframe en remplaçant Deezer1.html par Deezer2.html etc...

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer dans une iframe" sur mon blog de test WordPress.

  • b) Méthode "à l'arrache"

Enfin, pas tout à fait car même en forçant, l'éditeur fait des siennes mais enfin bon, on en est pas très loin...

Reprenez le code valide XHTML du dessus. Positionnez votre curseur sur le début de la dernière ligne (le </div>) et faite un "backspace" pour la coller à la ligne précédente. Recommencez la même chose avec la ligne précédente (le </a> que vous collez à l'<img...> du dessus) et encore et encore jusqu'au <div style et obtenir un bloc supprimé de ses retours à la ligne. Faites la même chose avec le deuxième </div> et supprimer les deux balises <p> et </p> du texte alternatif pour obtenir quelque chose de ce genre :


<div style="text-align: center;"><object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" width="180" height="236"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" />Editors - BestOf (en flash)</object></div>

Ecrivez votre billet sous WordPress comme d'habitude mais sans insérer le code du player. Allez désactiver l'éditeur visuel (Utilisateurs / Modifier / décochez "Utiliser l'éditeur visuel pour écrire" puis cliquez sur le bouton "Mettre à jour l'utilisateur"). Retournez dans votre billet, insérer le bloc de code modifié (supprimé de ses retours charriots) et publier directement. Vous pouvez ensuite réactiver l'éditeur visuel mais si vous le réactivez, si vous retournez voir votre billet, surtout ne le modifiez pas, le code serait "cassé" ! Pour modifiez votre billet, il faut IMPERATIVEMENT penser à désactiver l'éditeur visuel avant de retourner sur le billet.

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer à l'arrache" sur mon blog de test WordPress.

  • c) Méthode "Je veux modifier le billet après coup avec l'éditeur visuel actif mais pas utiliser d'iframe", alors il va falloir plus de deux neurones en marche" - Not blonde inside - Brun très foncé exigé :evil:

Je vais modifier le code utilisé dans le point (b) afin qu'il dérange le moins possible l'éditeur visuel. Il le dérangera quand même donc il faudra faire attention avant de publier ou de modifier votre billet de le remodifier légèrement à chaque fois.

Insérer donc ce code à la place :


<p style="text-align: center"><object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169" height="236" width="180"><param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=2548914&amp;lang=fr&amp;autoplay=0&amp;id=328169"></param>Editors - BestOf (en flash)</object></p>

D'une fois sur l'autre, quand vous changez de playlist, il faut changer les DEUX "path", les deux "id" et le texte alternatif compris entre la balise </param> et la balise </object> (dans cette exemple, j'ai mis "Editors - BestOf (en flash)" comme texte alternatif).

Vous intégrez ce code dans votre billet au dernier moment, juste avant la publication, comme indiqué au point (b) précédent.

Lorsque vous voulez modifier votre billet, juste avant d'enregistrer, retournez sur le code du player. Vous constaterez que l'éditeur a rajouté un saut de ligne derrière le width="180"> soit juste avant le <param name="movie" . Il suffit de se positionner devant le <param name="movie" et de faire un backspace pour le recollez au width="180">. Si vous ne le faites pas, la fois suivante, il déplacera carrément le </object></p> derrière le width="180"> et le code sera complètement inutilisable, non seulement vous perdrez la validité XHTML mais aussi le player ne fonctionnera plus correctement. Et oui, c'est cela que d'avoir un éditeur visuel qui se mêle de ce qui ne le regarde pas :ange:

Pour voir le rendu ou vérifier la validité XHTML de cet exemple, je vous invite à lire "Deezer" sur mon blog de test WordPress.

AMUSEZ VOUS BIEN...

(Vous pouvez poser des questions s'il y a des choses qui ne vous semble pas claires, je ne mords pas, enfin, pas souvent 8-) )

jeudi 1 novembre 2007

Après Radiohead, Saul Williams

Je pense que tout le monde a entendu parlé du dernier album de Radiohead, disponible au téléchargement, au prix que l'on souhaite mettre (et donc, gratuit, si l'on veut). C'est au tour de Saul Williams de faire un truc comparable :

Depuis aujourd'hui, l'album est disponible, contre 5$ ou gratuit (il était en prévente jusqu'à hier).

Pour 5$, il est possible d'obtenir l'album en MP3 192Kbps ou 320Kbps ou au format FLAC.

Pour 0$, le seul format est le MP3 192Kbps.

Dans les deux cas, l'album est fourni avec un PDF contenant paroles et photos.

PUB The Inevitable Rise and Liberation of NiggyTardust - Saul Williams (en flash)

Cela change du n'importe quoi des Majors, non ?

mercredi 31 octobre 2007

Connaissez-vous imeem...

Pour faire simple, on va dire que c'est comme Deezer (ou presque) sauf qu'il y a plus d'options (comme des vidéos).

La grande différence, c'est quand même que le système semble fonctionner alors que Deezer, il n'y a personne pour dire ce qui se passe exactement. Le site fonctionne mais les problèmes récurrents sur les players embarqués commencent à m'agacer :ouhla:

L'upload est aussi possible, à condition de détenir les droits (système différent de Deezer).

Les players sont moins bien, par contre...

Des exemples ?

Une chanson "single" :

Zazie - Je suis un homme (en flash)

Une playlist :

Pardonne moi (Mylène Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)

Le site s'appelle donc imeem :banane:

Qu'en pensez-vous ?

vendredi 26 octobre 2007

Wixi ou Deezer

James Blunt - All the lost soul (en flash)

James Blunt - All the lost soul (en flash)

mardi 23 octobre 2007

Quelques nouvelles

  • J'ai bien reçu mon nouvel écran 24 pouces : J'ai réussi à l'avoir pour moins cher finalement (489 euros) mais il n'est pas "blanc" mais plutôt une légère teinte "crème". Pas grave. Par contre, le confort, c'est génial, cela m'a donné envie de me remettre dans le code et faire enfin les commentaires intégrés chez Fiuuu. Aujourd'hui, j'ai rallumé mon PC : Beurk, il est lent et l'écran est tout petit. Comment voulez-vous que je quitte mon Mac, moi, maintenant ? :banane:
  • J'ai demandé la modification de mon abonnement chez Orange (mobile). A la date anniversaire (2 novembre), j'abandonne le forfait Click pour passer sur un "M6 Mobile". J'ai pesé le pour et le contre, les avantages et inconvénients dans les deux cas. Mon engagement de 24 mois n'étant pas terminé, j'ai une pénalité de 30 euros que j'accepte sans problème. J'en ai profité aussi pour faire désimlocker mon Nokia N70. :bond:
  • Seulement deux points ? Bon, juste une playlist avec deux morceaux alors :

Mylène Farmer/Peut etre toi - Najoua Belyzel/Gabriel (en flash)

samedi 15 septembre 2007

(...)

The flying pickets/Only you, Axel Bauer & Zazie/A ma place, Genesis/Mama (en flash)

- page 2 de 7 -