Un loup blessé

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

Mot-clé - Stockage

Fil des billets - Fil des commentaires

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-) )

vendredi 2 novembre 2007

ADrive

Ratiatum vient de publier un article sur ADrive, service permettant de stocker en ligne 50 Go.

A quoi cela peut bien servir ? Economiser la bande passante de son hébergeur par exemple ! (les comptes Free à 10Go, c'est bien mais c'est lent et réservé au Français)

Le plus simple, c'est quand même de le tester.

Voici donc un MP3 :

Gimme - Britney Spears (en flash)

puis une vidéo humoristique :

Vidéo : Les aventure de El God Miton (en flash)

Alors... vous... en tant que visiteurs, que pensez-vous des débits ? Est-ce acceptable/confortable d'écouter/visionner ? Pas trop d'attente ?

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 ?

dimanche 30 septembre 2007

Connaissez-vous Wixi

Logo de wixi

Un bureau virtuel permettant de stocker du multimédia (MP3, Vidéos, Photos), de le partager et de le streamer sur nos blogs !

Voir les articles sur Clubic, Tapahont et Webdeux. Encore en béta et accessible uniquement sur invitation, celle d'iProdWeb n'a pas fonctionnée, j'ai reussi à en avoir une via Tapahont qui en a eu 40.

En gratuit, nous avons un espace de 3 Go avec une limitation de 100 Mo par fichier, une bande passante de 500 Mo par jour, de la pub et l'impossibilité de downloader les fichiers des copains. Ces limitations sautent ou sont augmentées en payant.

(Du coup, maintenant étant inscrit, j'ai trois invitations à distribuer, Clawfire a déjà bénéficié de la sienne, il m'en reste deux.)

Jean-François Ruiz nous invite à republier sur nos blogs la vidéo de présentation qu'il a concocté et uploadé sur son Wixi :

Vidéo de présentation de wixi (en flash)

Je trouve l'ensemble pas mal du tout. Faire des playlists de MP3 ou diffuser des vidéos sans passer par YouTube/DailyMotion, cela peut être sympa, non ? A tester d'urgence :evil:

Si vous voulez devenir mon "friend" (voir le contenu de mon Wixi et me laisser voir le votre), mon Wixi c'est 1loup !

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

samedi 11 août 2007

Stage6 - Nude Models

Stage6, c'est un système un peu comme YouTube et DailyMotion mais au lieu d'être basé sur des vidéos au format flash, c'est ici du DivX.

Pour sauvegarder les vidéos sur son disque dur, un simple clic droit et "Save video as" m'a quelque peu surpris :hysterique:

Il est possible d'uploader jusqu'&agrave; 2Go par vidéo ! Il est évidemment nécessaire d'avoir le plugin DivX d'installé pour son navigateur.

Afin de vérifier la validité du code XHTML et savoir si cela fonctionne partout, j'aurais bien aimé des retours des personnes sous Mac et Linux. J'ai fait quelques tests sous Windows avec Opera, Firefox et Internet Explorer mais n'ayant pas tout exploré, n'hésitez pas &agrave; me dire, de façons détaillées, ce qui ne va pas, merci.

Suivant ce que vous me direz et les essais, je ferais peut être ensuite un "modèle" pour insertion (valide XHTML).

Attention, les personnes choquées par la présence d'hommes nus sont priés de ne pas cliquer sur "lire la suite" ni d'appuyer sur le bouton "marche" du player, il ne faudra pas ensuite venir vous plaindre :evil:

Voici donc 12 minutes de Miam-miam...

Lire la suite...

jeudi 9 août 2007

Les codes valides XHTML pour Blogmusik - Deezer

(Pour Fiuuu, entres autres... pour pas qu'il me dise qu'il ne sait pas faire, il n'a maintenant plus aucune excuse de ne pas passer à Blogmusik / Deezer :evil: )

Le plus simples étant de travailler sur des exemples :

  • Pour afficher le player de playlists, prendre ce code :

<div style="text-align: center;">
<object type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/widget.swf?path=xxx&amp;lang=fr&amp;autoplay=0&amp;id=yyy" width="180" height="236">
<param name="movie" value="http://www.deezer.com/embedded/widget.swf?path=xxx&amp;lang=fr&amp;autoplay=0&amp;id=yyy" />
<p>Texte de remplacement (courte description)</p>
</object>
</div>

Et remplacer les xxx et yyy, en regardant ce que fournit Blogmusik / Deezer comme path et id. Attention, il y a deux path=xxx et deux id=yyy à remplacer. Puis modifier le texte de remplacement, pour obtenir cela :

Eric Allaman - Dying to be with you - Theme from Dante's Cove (en flash)

  • Pour afficher le player monotitre, prendre ce code :

<div style="text-align: center;">
<object width="180" height="25" type="application/x-shockwave-flash" data="http://www.deezer.com/embedded/small-widget.swf?idSong=xxx&amp;lang=FR&amp;colorBackground=0xC3A758&amp;colorButtons=0x756435&amp;textColor1=0x000000&amp;autoplay=0">
<param name="movie" value="http://www.deezer.com/embedded/small-widget.swf?idSong=xxx&amp;lang=FR&amp;colorBackground=0xC3A758&amp;colorButtons=0x756435&amp;textColor1=0x000000&amp;autoplay=0" />
<param name="wmode" value="transparent" />
<p>Texte de remplacement (courte description)</p>
</object>
</div>
<div style="text-align: center;">
<a href="http://www.deezer.com/"><img src="http://www.deezer.com/embedded/footer.jpg" alt="free music" title="free music" style="border:none;margin:0;padding:0;" /></a>
</div>

Remplacer les xxx dans le idSong par celui fourni par Blogmusik.

Adapter colorBackground, colorButtons et textColor1 aux couleurs de son blog (couleur du texte, de la bordure et du bouton).

Attention, il y a deux idSong=xxx, deux colorBackground, deux colorButtons et deux textColor1 à remplacer.

Puis modifier le texte de remplacement, pour obtenir cela :

free music

jeudi 5 juillet 2007

Music...

J'voulais qu'tu portes mon nom, qu'on s'aime à not' façon... non, pas du tout
J'me voyais déjà, en haut de l'affiche... non plus

Je voulais parler de FreehostingNow et de l'offre gratuite qu'ils proposent :

  • un espace disque de 10 Go
  • une bande passante mensuelle de 10 Go
  • Php
  • 3 bases de données MySQL
  • la possibilité d'utiliser son nom de domaine (ou un sous-domaine en .freehostingnow.com)
  • un accès FTP
  • PAS de pub !

Je me voyais déjà apporter à Matoo et Pingui, entres autres, une solution à la chasse aux RBS que Free organise voire une solution de remplacement au pack premium de chez 1and1 pour Chtit Lolo (qui se termine fin 2008, il me semble).

J'imaginais commencer par tester un DotClear 1.2.6 puis un DotClear 2 et faire un super billet du feu de dieu...

Alors, j'ouvre un compte, tout est en anglais mais l'interface est plutôt bien faite et très compréhensible. Je tente une installation automatique de DotClear 1.2.6 qui échoue lamentablement. La procédure n'est donc pas acceptée par cette hébergeur. Qu'à cela ne tienne, je vais uploader le .zip par net2ftp : idem, le dézippage ne se passe pas bien, certains fichiers sont refusés. Bon, passons classiquement pas un FTP : déjà premier problème, je n'arrive pas à me connecter par FTP, il y a une limitation du nombre d'utilisateurs simultanés très basse. J'attends donc un peu et pareil, il y a toute une liste de fichiers qui ne sont pas autorisé à l'upload. Bon, je peux quand même tenter une installation, voir comment cela débute... non plus, dès la création des tables dans la base de donnée, cela plante !
Un petit détour par la FAQ et le forum : tout est en anglais mais je comprend qu'il y a pas mal de limitations sur les extensions de fichiers (sans que cela soit franchement "clair", pourquoi bloquer les fichiers .lang de DotClear ?), que l'installation en un clic pour WordPress se passe bien à condition ne pas vouloir changer de langue et que la solution à tout les maux semble le passage à une formule payante : Bye bye...

puis, je me suis souvenu que j'avais testé un truc, il y a quelques temps, qui ne m'avait pas convaincu mais je retournerais bien voir l'évolution... Blogmusik, avec un nom comme cela, non ?

Petite présentation :

Blogmusik.net est un site innovant et original permettant l'écoute à la demande de fichiers musicaux ainsi que l'hébergement gratuit de fichiers musicaux permettant à l'utilisateur, sous réserve de son inscription préalable, d'écouter à la demande tous les fichiers musicaux hébergés, de créer, de modifier, et de supprimer des playlists et d'héberger et partager des fichiers musicaux de leur choix(le "Site"). L'espace de stockage alloué par utilisateur est illimité (sauf notification contraire par courrier électronique), la taille de chaque fichier musical étant restreinte à 10 Mo aux fins de contrôle des coûts de la bande passante. Le Site n'étant pas conçu pour la sauvegarde de fichiers musicaux, il vous appartient de prendre les mesures nécessaires à cet effet. Enfin et conformément aux pratiques et usages de l'internet, de la publicité peut être insérée au sein du Site.

Et en fait, ouais, cela le fait, je trouve. Depuis, ils sont passé en V2 et c'est bien mieux ! On peut rechercher des titres comme dans RadioBlog, uploader sa musique, faire des playlists par glisser/déposer. Un regret, le code fourni pour intégration dans nos blogs n'est pas valide XHTML mais je commence à avoir l'habitude (et en suivant le modèle fourni pour les validations des vidéos YouTube et DailyMotion, cela fonctionne pareil). Qu'en pensez-vous ?

Test de playlist Blogmusik

Dis, Panama, cela ne serait pas une solution plus élégante de te créer des playlists sur Blogmusik ?

lundi 4 décembre 2006

1and1, le retour

Fin 2005, pour leur 10 ans, 1and1 offrait le pack premium. Cette année, c'est les 6 ans de 1and1 FRANCE et l'offre me parait aussi très avantageuse (elle ne concerne que les nouveaux clients) :

Le Pack Perso Confort, qui comporte un espace disque de 6 Go et une bande passante mensuelle de 750 Go est gratuit pendant 6 mois. C'est le Pack Perso Confort Test !

Une nuance, toutefois, le pack ne comprend pas les deux domaines qui sont compris dans le Pack Perso. Si j'ai bien compris, on ne les obtient que si on reste après les 6 mois gratuits. N'empêche que cela me parait bien intéressant et ceux qui possèdent déjà leur nom de domaine ailleurs doivent pouvoir en profiter, non ?

L'offre est valable jusqu'au 31/12/2006.

C'est le pack que je vais prendre dans peu de temps, puisque le pack Premium ne me suffit plus (bande passante explosée), il coute 5.97 Euros par mois.

Pour voir ce qui se fait d'autre, voici un tableau récapitulatif.

- page 1 de 2