PHP : script pour retirer les attributs des tags HTML photo

PHP : script pour supprimer certains attributs de tags HTML

J’ai eu besoin récemment de pouvoir contrôler les attributs des liens qui s’affichaient sur le blog et plus spécialement ceux qui sont fournis par des sites tiers (sponsors etc).

PHP : script pour retirer les attributs des tags HTML photo

Et bien figurez-vous que certains liens ne sont pas du tout valides : leurs liens ont des attributs obsolètes ou inadaptés avec comme des target="_blank".

Tout cela brise la navigation en fenêtres/onglets supplémentaires, et supprime la fonctionnalité du bouton back pour revenir à la page précédente.

Du coup, j’ai retroussé un peu mes manches pour remédier à ce problème.

Cela m’a donné ce script, qui me permet de dresser la liste des attributs à filtrer dans un code source donné.

Sky Cleanup Attributes

Voici la fonction principale, sobrement appelée Sky Cleanup Attributes : elle permet de filtrer des attributs définis dans une liste. Il suffit de passer le code dans une variable et la fonction filtre et retourne le code final, sans les attributs gênants.

Lire la suite

HTML5 : corriger l'erreur

HTML5 : corriger l’erreur “The frameborder attribute on the iframe element is obsolete. Use CSS instead.”

Le problème : l’attribut HTML frameborder

HTML5-logo

Si vous obtenez l’erreur :
“The frameborder attribute on the iframe element is obsolete. Use CSS instead.”

sur le validateur HTML5 du W3C, c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut frameborder comme dans l’exemple suivant :

<iframe frameborder="0" />

Solution CSS: la propriété border

Comme l’attribut frameborder n’est plus présent dans HTML5, il faut utiliser la propriété CSS border en CSS à la place de l’attribut HTML frameborder:

<iframe style="border: 0;" />

Solution HTML : l’attribut seamless

Avec HTML5, il est possible de résoudre le problème en ajoutant l’attribut seamless à l’iframe:

<iframe seamless />

L’apparence du texte et des éléments de présentation de la page doivent être gérés par CSS et non par le code HTML, c’est plus propre et surtout plus simple à gérer.

HTML5 : corriger l'erreur

HTML5 : corriger l’erreur “The scrolling attribute on the iframe element is obsolete. Use CSS instead.”

Le problème : l’attribut HTML scrolling

HTML5-logo

Si, au détour d’une validation du code HTML5 de votre page, vous obtenez l’erreur suivante:

“The scrolling attribute on the iframe element is obsolete. Use CSS instead”

… c’est que le code de votre page HTML5 contient un élément <iframe> avec un attribut scrolling comme dans le code suivant :

<iframe scrolling="no" />

La solution CSS : la propriété overflow

Comme l’attribut scrolling ne fait plus partie des spécifications HTML5, il faut utiliser CSS à la place et utiliser la propriété overflow:

<iframe style="overflow: hidden;" />

L’apparence du texte et des éléments de présentation de la page doivent être gérés par CSS et non par le code HTML.

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare photo

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare

Allez, je continue ma petite série sur la gestion de l’intégration oEmbed sous WordPress.

WordPress gère nativement plusieurs services : copiez-collez l’adresse d’une vidéo YouTube dans un article et hop, vous obtenez une vidéo entièrement intégrée, avec un code plutôt propre mais pas entièrement valide.

oembed-all-service

Je vous propose donc de valider le code généré par WordPress lorsqu’il vient de sites tiers comme YouTube, DailyMotion, Vimeo ou SlideShare.

Valider le code oEmbed de YouTube

Il suffit de lancer les quatre requêtes SQL suivantes :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");

Valider le code oEmbed de Dailymotion

Pour le code de Dailymotion, ces deux requêtes suffisent :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');

Valider le code oEmbed de Vimeo

Quatre requêtes pour Vimeo :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');

Valider le code oEmbed de SlideShare

Et deux requêtes pour SlideShare :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');

Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.

WordPress : récupérer la liste emails des membres et commentateurs photo

WordPress : retourner et exécuter un shortcode dans une fonction

Wordpress icon

Pour les besoins du Centre de Kriya Yoga France, j’ai écrit une fonction qui doit afficher une vidéo automatiquement.

Or je voulais juste renvoyer un shortcode vidéo qui prendrait en charge toute la partie code du lecteur vidéo.

On ne peut pas juste renvoyer la valeur, il faut utiliser la fonction do_shortcode() de WordPress.

Cas 1 : exécuter un shortcode dans une fonction

La solution réside dans l’utilisation de la fonction do_shortcode(). Voici un petit exemple :

<?php
/*
|-----------------------------------------------------------------------
| Sky Show Video by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns shortcode to be executed in WordPress.
|
*/
function sky_show_video($content) {
   // do stuff
   // return video
   return do_shortcode("[video src='$vid_url' width='600' height='480' type='video/mp4' preload='true']");
}

Cet exemple exécute le shortcode [video].

Lire la suite

Encoder une vidéo H.264 : utiliser qt-faststart pour la lecture progressive photo

Encoder une vidéo H.264 : utiliser qt-faststart pour la lecture progressive

Dernièrement, j’ai eu l’occasion de jouer avec l’intégration d’un lecteur vidéo en HTML5 pour jouer des vidéos encodées en H.264 (format .MP4) pour un client.

Il se trouve qu’aucune vidéo ne se lançait directement : le lecteur chargeait le fichier entièrement (plus de 60 Mo) avant de daigner jouer la vidéo.

h264-logo

La solution est toute simple : de la même manière que l’on peut créer un fichier JPG progressif (qui se charge de haut en bas, sans attendre le chargement total du fichier), il est possible de commencer à lire une vidéo sans que cette dernière soit totalement chargée, grâce à qt-faststart.

qt-faststart

qt-faststart  est un outil inclus avec FFmpeg qui ré-arrange un fichier H.264 de manière à ce que le “moov atom” soit devant les données, ce qui facilite la lecture sans attendre le chargement complet.

Si votre fichier MP4 est déjà créé, lancez la commande ainsi :

qt-faststart source_file.mp4 destination_file.mp4

Si vous souhaitez créer un fichier avec l’option faststart nativement, lancez l’encodage FFmpeg avec l’option :

-movflags +faststart 

Et voilà! Les vidéos streament proprement, avec une lecture progressive, sans attendre que le fichier complet soit téléchargé.

HTML5 : corriger l'erreur

WordPress : valider le code oEmbed Youtube en HTML5

Le problème : le code des vidéos n’est pas valide en HTML5

Maintenant que nous avons mis à jour le code des oEmbed Youtube, nous allons rendre le code de l’iframe valide. Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

<iframe src="https://www.youtube.com/embed/Gvh2Zo7UL6E?fs=1&feature=oembed" width="660" height="371" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Résultat:

Or le petit problème, c’est que tout cela n’est pas vraiment valide au niveau W3C et je commence à me lasser de voir ces erreurs de validation sur toutes les pages du site avec des vidéos :

Erreur 1 : Attribute allowfullscreen not allowed on element iframe at this point.
Erreur 2 : The frameborder attribute on the iframe element is obsolete. Use CSS instead.

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

HTML5 logo

Voici donc la solution que j’ai mise en place sur le site : je filtre le code oEmbed de WordPress de manière à retirer le tag allowfullscreen qui n’a rien à faire là et à supprimer l’attribut frameborder, que je remplace par un style="border: none".

Éditez le fichier functions.php de votre thème et ajoutez-y cette fonction:

<?php
/*
|-----------------------------------------------------------------------
| Sky oEmbed Filter by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| The sky_oembed_filter() function attempts to validate WordPress 
| video oEmbeds for HTML5.
| $return is the normal HTML that the oEmbed process would return. 
| $data is the data received from the oEmbed call, in an object format. 
| $url is the original URL being queried for oEmbed info. 
|
*/
add_filter('oembed_dataparse', 'sky_oembed_filter', 90, 3 );
function sky_oembed_filter( $return, $data, $url ) {
 	$return = str_replace('frameborder="0" allowfullscreen', 'style="border: none"', $return);
	return $return;
}

Notez que WordPress cache les résultats oEmbed dans la table postmeta donc après avoir installé ce code et si vous voulez vérifier que cela fonctionne, éditez un article pour que le postmeta se mette à jour.

Voilà, vos pages avec vidéos YouTube devraient maintenant être valides.

HTML5 : corriger l'erreur

HTML5 : résoudre l’erreur “keyword publisher is not registered” (validateur W3C)

HTML5 logo

Sur votre site ou blog, vous avez peut-être ajouté le widget ou bouton +1 de Google+, le réseau social de Google. Or le petit problème, c’est que le code fourni empêche la bonne validation du document.

Voici le code fourni par Google :

<a title="Google+" href="https://plus.google.com/114535411372700844744" rel="publisher nofollow">Google+</a>

et voici l’erreur renvoyée par le validateur W3C :

Keyword publisher is not registered

HTML5 étant toujours en cours de réalisation, les valeurs de la balise rel sont assez restreintes et on ne peut pas mettre tout ce que l’on veut sans déclencher l’erreur.

La solution est toute simple : il faut ajouter la valeur du rel en argument dans le lien, comme ceci :

<a title="Google+" href="https://plus.google.com/114535411372700844744?rel=publisher" rel="nofollow">Google+</a>

Et voilà, plus d’erreur lors de la validation.