Un loup blessé

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

samedi 3 mars 2012

Quelques petits changements en attendant plus grand

Je n'ai vraiment pas le temps de me replonger dans la structure de ce blog (oui, je triche en ayant des billets d'avances en attente de publication, comme les livres que je lis, afin de publier régulièrement). Je souhaiterais refaire le thème afin d'avoir une seule présentation compatible avec les téléphones mobiles et les tablettes. En attendant, j'ai donc fait quelques modifications mineures :

  • Partage

Copie d'écran des boutons Twitter et Share

Le bouton Share/Save Lockerz est déplacé vers la droite afin de laisser la place à gauche au bouton Twitter.

Je me suis inspiré de "Mettre le Bouton Twitter sur son Site", de "Ajoutez le bouton « Follow » de Twitter en 5 étapes : paramètres, intégration, etc..." et de la création de Boutons Twitter pour faire un truc compatible XHTML comme à mon habitude, à savoir :

<div>
<a href="https://twitter.com/share?via=1loup&amp;lang=fr&amp;size=large&amp;count=none" class="twitter-share-button">Tweeter</a>
</div>
<script type="text/javascript">
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)0;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

Vous pouvez ainsi tweetter l'un de mes billets si cela vous chante plus facilement. Je ne fais pas de concours de bites, j'ai donc supprimé le compteur de tweets. Ceci n'est PAS une incitation à le faire.

  • Suppression des versions WAP

J'ai supprimé les versions WAP du blog car l'un dépendait d'un service qui a disparu et l'autre de Google. Si vous en avez vraiment besoin, il suffit d'aller sur Google et de demander à obtenir la version WAP !

  • Thème par défaut (présentation)

Copie d'écran de la zone du choix du thème

Le thème par défaut était jusqu'ici celui avec les commentaires inclus. Si c'est votre thème préféré (comme moi), normalement les cookies devraient vous le laisser. Idem pour ceux qui préféraient le thème avec avec les commentaires qui apparaissent en un clic sans rentrer dans le billet sur la page d'accueil.

Par défaut maintenant, c'est le thème adapté à l'eeePC/Ultraportables qui apparait. Il n'est pas parfait du tout mais je n'ai pas le temps de le retravailler profondément et il est peut être moins déstabilisant pour les nouveaux arrivants.

Le thème pour iPhone et Smartphone n'a pas changé.

  • Flux RSS

Copie d'écran du choix du flux RSS

Les flux RSS sont plus différenciés. Avant je ne mettais en avant que le flux RSS qui comprend la totalité (billets et commentaires du blog), les trois sont maintenant directement proposés. Seul le gros bouton RSS dans la sidebarre est resté sur le flux total.




Des questions ?

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)

dimanche 30 mars 2008

Plugin PlayVidZik pour WordPress

Billet remanié le 31/03/08 après une journée complète de travail pour refaire le plugin afin de conserver la validité XHTML malgré l'éditeur visuel - Les 5 premiers commentaires de ce billet font référence à la version précédente du plugin (0.7.3b1)

Je viens de terminer le développement/adaptation de PlayVidZik pour WordPress...

C'est un plugin d'insertion de vidéos (Stage6, YouTube, Koreus, Google, DailyMotion) et de playlists (Deezer et Imeem) spécialement prévu pour fonctionner avec WordPress en version 2.5 mais fonctionnant (en mode +/- dégradé) sous les versions >2.0 fonctionnant normalement sur les WordPress de la version 2 à la version 2.5. Personnellement, je ne l'ai testé que sur WP2.0.4en, WP2.3.3fr et WP2.5fr !

Si vous souhaitez essayer ce plugin, je vous invite à le télécharger ici.

Si vous n'avez pas encore migré sous WordPress en version 2.5, je vous invite à le faire le plus rapidement possible car en dehors des différentes nouveautés, il y a enfin une fonctionnalité plus que très intéressante : l'éditeur visuel ne touche plus touche moins au code HTML inséré ! Comme l'éditeur visuel s'amuse encore à toucher au code et casse la validité XHTML, j'ai adapté le plugin pour que le système de filtre de mes anciens plugins s'adapte aux boutons d'insertion.

Si vous utilisez l'un de mes précédents plugins pour WordPress, il faudra les désactiver avant d'activer PlayVidZik MAIS ne touchez pas aux codes dans vos billets, PlayVidZik prend le relais, le code est compatible avec eux.

L'installation est simple : Dézippez le plugin, uploadez le dossier PlayVidZik dans le dossier /wp-content/plugins de votre WordPress.

Ensuite sauvegardez le fichier quicktags.js que vous trouverez dans /wp-includes/js/ de votre WordPress et remplacez le par l'un fourni dans le dossier quicktags-js du plugin.

J'ai patché deux quicktags.js : L'un pour les versions 2.0 à 2.1.3, l'autre pour les versions 2.2 à 2.5. Si votre WordPress n'est pas dans la liste, vous pouvez le patcher manuellement à l'aide du protocole explicatif (situé à la fin du fichier readme.html).

Activez ensuite le plugin PlayVidZik dans votre menu Plugins (qui s'appelle "Extensions" dans WP2.5), sortez de votre interface d'administration (Se déconnecter ou Déconnexion), videz le cache de votre navigateur et c'est tout.

  • Sous WordPress (ici un exemple en version 2.5), dans l'interface de saisie de billet, passez en mode HTML pour voir apparaitre deux boutons supplémentaires :

Quicktags sous WP2.5 1 - Pv : Bouton pour l'insertion des vidéos
2 - Pz : Bouton pour l'insertion des playlists musicales

Sous WordPress 2.3.3, vous aurez cet aspect, en cliquant sur le bouton "Code" :
Quicktags sous WP2.3.3

Sur les vieilles versions (genre 2.0), le seul moyen d'obtenir la barre "Quicktags" est de désactiver l'éditeur visuel (dans "Utilisateur") alors que l'on passe instantanément de l'une à l'autre en cliquant sur Visuel/Code ou Visuel/HTML sur les versions récentes. C'est une bonne raison supplémentaire de migrer rapidement.

Après avoir cliqué sur le bouton Pv ou Pz, répondez aux questions posées par le plugin en copiant/collant directement l'url des vidéos ou l'embed des playlists musicales.

Pour les codes couleurs, vous pouvez vous aider de ces snapshoots :

Pour YouTube :

Couleurs YouTube

Pour Imeem :

Couleurs Imeem

Pour Deezer :

Couleurs Deezer

  • Si vous ne souhaitez pas patcher le fichier quicktags.js, il ne vous reste plus qu'à utiliser le filtre, comme dans les plugins précédents (voir le mode d'emploi intégré) avec des codes du genre [Mdeezer + id + texte alternatif] ou [YT + id + largeur + hauteur + texte alternatif]. Le filtre n'insère pas les vidéos Koreus, les paramétrages sont très réduits et je stoppe son développement.
  • Mais pourquoi n'ai-je pas fait une adaptation des codes pour une utilisation des boutons avec un WordPress <2.5 ET l'éditeur visuel ? C'est simple, je suis une grosse feignasse :evil: et là, le code est une transcription directe du code de DotClear et est ainsi facilement adaptable. Dès que je fais une modification dans PlayVidZik pour DotClear, je peux faire la même modification dans PlayVidZik pour WordPress alors que sinon, non, il me faudrait de nombreuses heures de travail... et puis, il va bien falloir passer un jour ou l'autre à WordPress 2.5, nanmého :ange: Je l'ai fait :ange:

J'ai fait très peu de test sous WordPress et n'ai pas lancé de béta-test privé, aussi, je suis intéressé par vos critiques, retours etc... sur cette version 0.7.3b1 0.7.3b2 0.7.3b3 0.7.3b4 ! Je tenterais de répondre à vos questions, si vous en avez...

J'espère qu'il n'y a pas trop de bugs :hysterique:

N.B. : En cas de demande d'aide, précisez-moi impérativement quelle version du plugin vous utilisez et sous quelle version de WordPress vous l'avez installé.

RAJOUTS du 01/04/2008 - Questions / Réponses

  • Q: Comment personnaliser les couleurs des players ?

R: Si les choix proposés ne vous conviennent pas, vous pouvez ponctuellement modifier les codes couleurs après insertion (directement dans le code compris entre parenthèse) mais si vous souhaitez faire une personnalisation aux couleurs de votre thème et la retrouver rapidement à chaque fois, je vous propose plutôt de modifier le plugin :

- Pour modifier le player de playlist d'Imeem, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ1 puis la ligne commençant par case "999", adaptez alors le backColor, primaryColor, secondaryColor et le linkColor.

- Pour modifier le player monotitre d'Imeem, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ2 puis la ligne commençant par case "999", adaptez alors le backColor, primaryColor, secondaryColor et le linkColor.

- Pour modifier le player de playlist de Deezer, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ3 puis la ligne commençant par case "999", adaptez alors le colorBackground, colorButtons, textColor1 et le textColor2.

- Pour modifier le player monotitre de Deezer, ouvrez le fichier PlayVidZik.php, cherchez la fonction PVZ4 puis la ligne commençant par case "999", adaptez alors le colorBackground, colorButtons, textColor1 et le textColor2.

- Pour modifier le player YouTube, ouvrez le fichier quicktags.js, cherchez la ligne commençant par case "999", adaptez alors le color1 et le color2.

Ensuite, lorsque le plugin vous demande la couleur, répondez 999 et vous aurez des players avec les couleurs que vous aurez défini :banane:

  • Q: Comment personnaliser la présentation des players par CSS (exemple, avec mon thème, les players sont collés au texte qui précède et qui suit) ?

R: Rajouter dans la feuille de style de votre thème (style.css), cette instruction :

.videos-playlists { }

puis inscrivez dedans vos "règles".

Voici un exemple permettant d'obtenir un espace d'1em avant et après le player qui lui est centré dans le billet :


.videos-playlists {
	margin: 1em auto;
	text-align: center;
}

Ensuite, lorsque le plugin vous pose la question de la position, choisissez "1=rien/nothing" (remplacez le chiffre 0 par défaut par le chiffre 1), ce qui indique que le positionnement va s'effectuer par CSS :bond:

  • Q: Comment faire pour que les players démarrent tout seul (autoplay) ?

R: Alors là, si vous me permettez d'abord une petite remarque, c'est une très mauvaise idée. Ce n'est pas à vous de décidez de démarrer le player mais à vos visiteurs qui sinon risquent de considérer cela comme une nuisance au lieu d'une fonctionnalité ! Si je vous donne comme exemple que je navigue avec 20 à 30 onglets ouverts sur différents blogs tout en écoutant ma propre musique, il suffit qu'un ou deux blogs diffusent en autoplay pour que cela devienne la cacophonie ! Il me faut alors chercher dans les 30 onglets quels sont les perturbateurs de mon univers sonore et de rage, je ferme les onglets fautifs et ne reviendrais plus sur ces blogs là. Tandis que pour les blogs me proposant des playlists musicales, suivant mes envies, je coupe alors ma propre musique et lance ensuite l'écoute des playlists qui me plaisent.

Si vous persistez à vouloir mettre de l'autoplay dans vos playlists musicales, vous pouvez le faire directement dans le code, c'est le dernier paramètre, juste avant le signe "]". Pour les Imeem, remplacez "false" par "true" et pour les Deezer, remplacez "0" par "1".

  • Q: Pourquoi encore un plugin de plus ?

R: Parce que je suis plus strict sur certains points !

Exemple 1 : L'excellent Viper's Video Quicktags - C'est un plugin en anglais, j'ai du mal avec l'anglais, et je ne suis pas le seul, loin de là. Le plugin est rempli de javascript et si vos visiteurs ont désactivés le javascript, ils ne verront pas vos vidéos, ce qui n'est pas le cas avec PlayVidZik. Et ce plugin est aussi très dépendant de l'éditeur visuel, que se passe-t-il lorsque WordPress change d'éditeur, mmmh ? Alors que les boutons de PlayVidZik fonctionnant avec quicktags.js, il suffit de patcher ce fichier d'une version à l'autre. Même si WordPress évolue, vous pouvez vous même patcher votre fichier sans attendre que je fasse une mise à jour du plugin.

Exemple 2 : Le très complet WordPress Video Plugin d'Oliver Wunder - C'est mon inspiration au niveau du filtre mais cependant, plusieurs de ses codes ne passent pas la validation XHTML, il n'y a rien de prévu pour les contenus alternatifs, et certains paramétrages sont bien maigres (possibilité de personnaliser les tailles ou les couleurs...). Cependant, je m'arrange pour que mon code reste compatible avec le sien et ne provoque pas d'interférence.

Je ne tiens pas à rivaliser avec des grands noms de WordPress mais répondre correctement à certains besoins : Accessibilité, validité XHTML, personnalisation poussée.

Je ne vais pas chercher à TOUT mettre dans ce plugin, il correspond actuellement à une demande. Je peux le faire évoluer sur demande justifiée. Je réfléchis à intégrer en vidéo les Vimeo et en musique les playlists JIWA. Si vous avez des demandes, expliquez moi pourquoi cela vous arrangerait que je rajoute telle ou telle fonctionnalité, les commentaires sont fait pour cela aussi.

  • Q: C'est quoi tous ces code "cabalistiques" ? Il y a des codes d'expliqués dans l'aide du plugin, mais pas tous ? Tu caches des trucs ?

R: Les codes qui sont expliqués proviennent des précédents plugins, il n'y avait pas de boutons d'insertion, il fallait apprendre la syntaxe... J'ai conservé ces codes afin d'assurer la compatibilité avec ce nouveau plugin et que vous n'ayez rien à changer des codes que vous avez déjà dans vos billets. Les autres codes sont générés par les boutons d'insertions et utilise une syntaxe afin que je m'y retrouve entre PlayVidZik pour DotClear et PlayVidZik pour WordPress mais si vous voulez tout savoir (voire écrire vos codes vous même sans cliquer sur les boutons), voici les explications :

TypesCodes
Vidéo YouTube[PV1Z + ID de la vidéo + largeur + hauteur + code de position + inclusion + couleurs + bordure + contenu alternatif]
Vidéo DailyMotion[PV2Z + ID de la vidéo + largeur + hauteur + code de position + contenu alternatif + origine]
Vidéo Google[PV3Z + ID de la vidéo + largeur + hauteur + code de position + contenu alternatif]
Vidéo Stage6[PV4Z + ID de la vidéo + largeur + hauteur + code de position + contenu alternatif]
Vidéo Koreus[PV5Z + ID de la vidéo + largeur + hauteur + code de position + contenu alternatif]
Playlist Imeem[PVZ1 + ID de la playlist + code de position + code couleur + contenu alternatif + autoplay]
Monotitre Imeem[PVZ2 + ID du titre + code de position + code couleur + contenu alternatif + autoplay]
Playlist Deezer[PVZ3 + Path de la playlist + ID de la playlist + code de position + code couleur + contenu alternatif + autoplay]
Monotitre Deezer[PVZ4 + ID du titre + code de position + code couleur + contenu alternatif + autoplay]

dimanche 3 février 2008

PlayVidZik 0.7.1 - Plugin pour DotClear 1.2 - Insertion de Vidéos et Playlists musicales

Voici donc enfin mon plugin d'insertion de Vidéos et Playlists musicales : PlayVidZik

Il permet d'insérer directement dans l'interface de saisie des billets de DotClear 1.2 des vidéos YouTube, DailyMotion, Google, Stage6, Koreus mais aussi les playlists Deezer et Imeem ainsi que les singles (monotitres) Deezer et Imeem.

Mon but était d'obtenir un code valide XHTML rapidement. Vous l'obtenez maintenant grâce à quelques invites Javascript. Les codes sont normalement compatible tout systèmes (Windows, Mac OS X, Linux) et multi-navigateurs (Firefox, Internet Explorer, Safari, Opera).

Plugin PlayVidZik Commencez par installer le plugin soit avec l'installeur soit avec l'archive. Voir dans les commentaires la version 0.7.5 plus récente

Cette étape passé, il reste une installation manuelle à effectuer : Installation des icônes par clic sur un lien, puis modification du fichier toolbar.js et d'un autre fichier (cela dépends si votre DotClear est 1.2.6 et inférieur ou 1.2.7 et supérieur).

A moins que vous ne préfériez l'installation automatique !

Ensuite, vous aurez deux icônes supplémentaires lors de la rédaction de vos billets.

Bouton d'insertion video La première pour les vidéos. Il suffit de rentrer l'url de la page de la vidéo et si vous ne désirez pas de paramètres supplémentaire de faire Enter sur la question suivante. Lors de l'insertion de vidéos Stage6, il vous sera demandé les tailles (largeur et hauteur) car elles ne sont pas standardisées.

Les paramètres supplémentaires permettent de choisir :

  • le positionnement (droite, gauche, centrée, ou même par CSS)
  • le texte alternatif
  • l'origine des vidéos DailyMotion
  • la présence d'une bordure, l'inclusion de vidéo similaires, les couleurs du player des videos YouTube


Bouton d'insertion audio La seconde pour les playlists musicales. Il suffit de rentrer le code embed fourni par Deezer ou Imeem puis de répondre à deux questions (Positionnement et Couleurs).

Si après coup vous souhaitez changer les tailles par défaut, vous les trouverez en début de code au niveau des width et height - Le texte alternatif est lui compris entre un <p> et un </p> et se repère donc aussi facilement.

Toutes ces étapes sont décrites dans le plugin : L'installation sur la page d'accueil, le mode d'emploi en cliquant sur les points d'interrogations dans des cercles à côté des mots clefs.

Voici la page d'accueil du plugin et le mode d'emploi (aide) :

Si vous avez des questions ou si vous trouvez un bug, les commentaires sont fait pour cela...

mardi 15 janvier 2008

Plugin Vidéos et Playlists pour WordPress

Attention : Un plugin plus évolué - PlayVidZik est disponible !

J'ai donc repris le plugin des Playlists Deezer et Imeem pour rajouter les vidéos YouTube, DailyMotion, Google et Stage6. Ce plugin remplace le précédent (vous ne pouvez pas avoir les deux tournant en même temps car le code de l'un est repris dans l'autre). Cependant, si vous utilisiez déjà le plugin précédent, vous n'avez pas besoin de toucher à vos billets car le code, lui, est compatible.

Vous pouvez télécharger l'archive zip, décompactez là, uploadez le dossier 1loup dans le dossier wordpress/wp-content/plugins, ensuite activez-le dans votre menu Plugins et c'est tout.
Si vous aviez le précédent plugin d'installé, commencez d'abord par le désactiver avant d'installer celui-là.

C'est un premier jet, je n'ai pas tenu compte de pas mal de paramètres (par exemple, les couleurs de player pour YouTube) et je n'ai pas non plus tenu compte des évolutions de Deezer avec sa version 2 pour de bonnes raisons : Deezer V2 est encore en développement, un widget monotitre doit sortir ainsi qu'un player avec le retour des playlists dans le genre de la V1 pour nos MP3 perso. Il faut dire aussi que je me consacre plus pour l'instant à mon plugin pour DotClear.

Nouveau : Monotitre Deezer INCLUS (mise à jour du 25/03/2008)

Ce plugin pour WordPress présente pour l'instant ces avantages :

  • valide XHTML
  • accessible (texte alternatif)
  • tailles paramétrables pour les vidéos
  • compatible multiplateformes (normalement, il fonctionne aussi bien avec Mac, Windows, Linux et quelque soit le navigateur Internet Explorer, Firefox, Safari, Opera mais je n'ai pas tout testé "à fond").

Je n'ai pas testé ce plugin ailleurs que sur le WordPress français 2.3.1 2.3.3 que j'ai installé.

Le mode d'emploi est maintenant intégré, même s'il reste pour l'instant "basique".

Vous pouvez allez voir sur mon blog de test WordPress, un billet contenant les 4 codes supplémentaires et leur rendu.

Des retours si vous l'utilisez et/ou que vous souhaiteriez des améliorations seraient les bienvenus.

samedi 15 décembre 2007

Plugin Deezer / imeem valide XHTML pour WordPress

Attention : Un plugin plus évolué - PlayVidZik est disponible !

Voici mon premier "plugin" pour WordPress, enfin, plugin, c'est un bien grand mot, tout au plus un "filtre" mais comme tout le monde à l'air d'appeler cela un plugin...

Je me suis inspiré du WordPress Video Plugin d'Olivier Wunder.

Ce filtre intègre donc une playlist Deezer, une playlist imeem (ou un titre) dans WordPress, de façon simple, avec un code valide XHTML et accessible.

La syntaxe est la suivante :

- Pour une playlist Deezer [deezer + path + id + texte alternatif],
par exemple [deezer + 2548914 + 328169 + BestOf Editors (en flash)] affichera la playlist Deezer ayant un path=2548914, un id=328169 et rajoutera le texte alternatif "BestOf Editors (en flash)".

- Pour une playlist imeem [Pimeem + id + texte alternatif],
par exemple [Pimeem + VHIDyftK8k + Pardonne moi (Mylene Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)] affichera la playlist imeem ayant un id=VHIDyftK8k et rajoutera le texte alternatif "Pardonne moi (Mylene Farmer/Benny Benassi)-Crazy (Seal)-The world is mine (David Guetta) (en flash)".

- Pour un titre unique imeem [Mimeem + id + texte alternatif],
par exemple [Mimeem + akKQVny8q2 + Zazie - Je suis un homme (en flash)] affichera le titre ayant un id=akKQVny8q2 et rajoutera le texte alternatif "Zazie - Je suis un homme (en flash)".

Le code est donc à mettre entre crochet et chaque paramètre est séparé du suivant par un espace, le signe plus et un autre espace.

Le premier paramètre est le type de playlist (deezer, Pimeem, Mimeem avec P pour playlist, M pour monotitre).

Le dernier paramètre, le texte alternatif, ne doit pas contenir de caractères accentués (é, è, à, ...), il sert aux personnes n'ayant pas le plugin flash d'installé, aux aveugles, aux moteurs de recherches et devrait contenir une très courte description du contenu.

Vous pouvez allez voir sur mon blog de test WordPress, un billet contenant les 3 codes et leur rendu.

Je n'ai pas testé ce plugin ailleurs que sur le WordPress français 2.3.1 que j'ai installé, je ne sais donc pas s'il fonctionne avec d'autres configurations, il est livré tel quel, point !

Vous pouvez télécharger l'archive zip, décompactez là, uploadez le fichier di.php dans le dossier wordpress/wp-content/plugins, ensuite activez-le dans votre menu Plugins et c'est tout.

Suis-je clair ?

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 7 décembre 2007

1loup sous WordPress

... non, pas mon blog, je reste sous DotClear mais je me suis installé un blog sous WordPress pour aider les copains et les copines qui galèrent grave avec WordPress. Cela sera tout de suite plus facile pour tester les modifications et pour mieux les guider.

C'est un WordPress en version 2.3.1 et français que j'ai installé.

J'espère que les changements que j'ai proposé cette nuit à MarcelDugomier sont bien ceux qu'il attendait (et sinon, je me replongerais dans le code).

Je m'attaque très prochainement aux soucis des Playmobils Estropiés & Associés.

Alors, ne soyez pas trop étonnés si débarquent bientôt des tutoriels pour WordPress, je ne peux délibérément pas les laisser se débrouiller tout seul :bond:

Je ne vous présenterais pas WordPress, je ne suis pas là pour cela mais par exemple, revoir les validités XHTML pour WordPress des tutoriels que j'ai présenté pour DotClear (Vidéos YouTube/Dailymotion, Deezer/Blogmusik) alors que l'éditeur visuel de WordPress est actif, si, cela visiblement il y a des demandes !

L'éditeur visuel de WordPress, tout comme celui de DotClear 2, c'est de la merde (purement subjectif comme constatation) et avec l'un, comme avec l'autre, pour ne pas avoir de transformation arbitraire du code, il est préférable de les désactiver. Sous DotClear 2, la présence d'une syntaxe Wiki relativise le problème, ce n'est pas le cas sous WordPress.

Beaucoup ne peuvent pas coder en XHTML instinctivement et ne peuvent donc pas se passer de ces éditeurs. L'insertion de codes de type flash (comme YouTube et autres) pose alors problème, surtout pour ceux qui veulent rester valide XHTML. Je vais tacher de les aider...

jeudi 22 novembre 2007

Widget Symbol Caddy - Les symboles HTML pour Mac OS X

Je ne sais pas pour vous mais perso, les symboles HTML, j'ai un peu de mal à les retenir. Je connais "&eacute;" (é) et "&nbsp;" (l'espace insécable) mais pour le reste, pfff...

or j'ai trouvé récemment un widget pour Mac OS X qui me les présente rapidement (avec bien évidemment un clic qui colle dans le presse papier), plus besoin d'ouvrir un bouquin d'HTML ou de faire une recherche sur le net, il s'agit de Symbol Caddy.

Attention, sur la page d'accueil, c'est la version pour Leopard (10.5) qui est mise en avant, la version pour Tiger (10.4) est juste un peu plus bas sur le lien "Download old version for Tiger.".

C'est pas sympa ?

- page 1 de 3