mine de rien, cela commence à faire son chemin...

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 :

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" :

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 :

• 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 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 Je l'ai fait

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

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

• 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

• 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 :

Un peu à la manière du plugin Auto Scroller pour WordPress, mais sans plugin ni javascript, juste deux lignes d'HTML (des ancres, quoi !), je vous ai rajouté une petite navigation améliorée autour des commentaires en page d'accueil.

Si vous naviguez avec le thème "Com. par enroulement", vous ne verrez aucun changement. Les changements ont lieu pour les deux autres thèmes : "Com. inclus" et "eeePC et iPhone", ceux qui ont les commentaires par défaut en page d'accueil.

Tout à droite, au niveau de "Commentaires et trackbacks" apparait maintenant une discrète flèche vers le bas permettant d'aller à la "Fin des commentaires".

A l'inverse, toujours tout à droite, au niveau de "Rajouter un commentaire" apparait une discrète flèche vers le haut permettant d'aller au "Premier commentaire".

(et bien entendu, uniquement sur les billets ayant des commentaires)

Qu'en pensez-vous ?

Je n'ai pas rajouté toutes les fonctions possibles et imaginables car n'en voyant pas trop l'utilité mais auriez-vous besoin d'autres choses pour naviguer plus confortablement sur mon blog ?

Il y a 42 jours, j'avais migré mon WordPress de test vers la version 2.3.3 sorti la veille.

Quelques temps plus tard, j'avais annoncé à différentes personnes que j'allais porter sous WordPress mon plugin PlayVidZik codé pour DotClear.

Ayant appris que la version 2.5 de WordPress devait avoir des fonctions audio/vidéo, j'ai alors décidé d'attendre un peu pour voir, afin de ne pas réinventer le fil à couper le beurre.

La sortie de WordPress 2.5 a été reporté mais hier a été présenté une release candidate. Je n'ai pas touché à mon blog de test mais j'ai fait une installation de cette RC1 sur un autre hébergement.

(Ne criez pas) Et ben, plus cela va, plus c'est moche, mon dieu...

Et oui, je vais me remettre au travail pour essayer de porter PlayVidZik sous WordPress car cette version ne fait absolument pas ce à quoi je m'attendais.

Savoir si je passerais mon blog de test sous WP2.5 ? Je ne sais pas encore... En tout cas, il est peu probable que je le fasse le lendemain de l'annonce de sa sortie comme la version précédente.

Un des fichiers sur lequel je compte intervenir n'évolue pas entre les deux versions, il faut encore que je regarde comment mon précédent plugin réagit !

Je suis bientôt en vacances, j'espère pouvoir consacrer un peu de temps à ce projet.

Aussitôt dit, aussitôt fait...

Pour ceux qui me suivent depuis déjà un certain temps, vous savez que ce blog possédait jusqu'ici deux thèmes.

Pour les autres qui n'ont encore rien vu, regardez dans la sidebarre de droite : il est possible de choisir l'apparence des commentaires. Le thème avec les commentaires inclus ou celui avec les commentaires par enroulement (les commentaires apparaissent en cliquant sur un signe + dans une bulle et disparaissent en cliquant sur le signe - dans cette même bulle).

Et voici un troisième thème...

C'est un thème que j'ai nommé "eeePC et iPhone" !

Attention, ce n'est pas un thème spécialement développé pour iPhone, c'est plutôt un thème pour les résolutions inférieures à 1024 et donc, qui devrait faciliter la navigation sous eeePC, sous iPhone etc...

Ses particularités sont :

• basé sur le thème avec commentaires intégrés

• une seule sidebarre, à droite

• une bannière plus petite (611x71 au lieu de 894x105)

• Pas d'horloge

• Pas d'indication des visiteurs BUMPzee et Pijoo

Les pages ne seront pas moins longues à charger, il y a presque toujours autant dans la sidebarre mais l'espace réservé aux billets devient plus importants.

Pour allez plus vite, en allant directement à l'adresse eee.1loup.net, vous tomberez sur la page d'accueil du blog avec le thème eeePC et iPhone par défaut tandis que 1loup.net est toujours réservé pour la page d'accueil avec les commentaires intégrés. Les commentaires par enroulement se choisissent uniquement dans la sidebarre.

Sous eeePC, je trouve cela beaucoup mieux et vous, quel est votre avis ?

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

Commencez par installer le plugin soit avec l'installeur soit avec l'archive. Voir dans les commentaires la version 0.7.3 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).

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

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

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

de quoi ? de mon plugin PlayVidZik permettant d'insérer des vidéos et des playlists musicales directement dans l'interface de saisie des billets sous DotClear 1.2, tiens !

Voici un aperçu de ce que devrait donner l'aide du plugin :

(Cliquez pour agrandir)

Encore un peu de patience, il arrive, il arrive...

dans mon Plugin Vidéos et Playlists pour DotClear 1.2

Les béta-testeurs ne disent pratiquement rien sur le code que je leur ai laissé sur le blog de test alors je me demande s'ils foutent quelque chose ou si je suis un génie

Cette nuit, je me suis lancé dans la "suite" et en première exclusivité, voici à quoi ressemble le premier jet de la page d'administration :

(cliquez pour agrandir)

avec un peu de chance, la nuit prochaine j'attaque l'aide en ligne.

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.