Tag

HTML5

Browsing

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 photoEt 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" qui brisent la navigation en fenêtres/onglets supplémentaires, supprimant 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.


Le problème : pas d'attribut property pour les feuilles de styles du corps de page

HTML5-logoSi, lors de la validation HTML5 de vos pages, vous obtenez le message d'erreur de validation suivant :

"Element link is missing required attribute property"

... alors il y a fort à parier qu'une feuille de style (CSS) est appelée via une balise link dans le corps de votre page (body) au lieu d'être insérée dans l'entête (header) comme à l'accoutumée.

Sous WordPress par exemple, cela peut être dû à un plugin qui appelle ses fichiers trop tard dans la construction de la page pour pouvoir insérer sa feuille de style dans l'entête.


...

...

La solution : ajouter property="stylesheet"

Il suffit d'éditer le code source de votre page ou fichiers afin d'ajouter l'attribut property, comme ceci : property="stylesheet".

Le problème : l'attribut HTML frameborder

HTML5-logoSi 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 :

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

Voici une petite liste des derniers ajouts, modifications et améliorations du site ces derniers mois :

  1. [*] PHP : déplacement de mes bouts de code du fichier functions.php pour les organiser dans un fichier-plugin.
  2. [*] HTML : ajout des meta Dublin Core sur la page d'accueil, passage des balises H2 en H1 pour les titres des articles, correction du code HTML5 parce que le validateur W3C a changé ses recommandations.
  3. [*] CSS : nettoyage du code CSS. J'ai remplacé les images et les sprites par des gradients CSS et utilisé les dashicons de WordPress au lieu d'images. Ajout de code non-valide sur les gradients pour prendre en charge Internet Explorer. Amélioration du menu.
  4. [+] Serveur : passage du serveur en IPv6.
  5. [+] Serveur : WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod.
  6. [+] Serveur : WordPress : héberger les images sur un sous-domaine.
  7. [+] WordPress : remplacement de mon ancien plugin de colorisation de syntaxe par Crayon Syntax Highlighter. Ajout d'Advanced Code Editor pour éditer les fichiers avec un véritable éditeur de code.
  8. [+] WordPress : les membres peuvent désormais ajouterune photo/avatar dans leur profil. Il est possible de supprimer son compte.
  9. [+] PHP / WordPress : remplacement du plugin de pagination et du plugin qui permet d'afficher des nombres différents d'article selon le type de page par des fonctions natives à WordPress, les liens des articles deviennent cliquables automatiquement, suppression des cookies de commentaires pour améliorer le cache.
  10. [+] CSS : création d'une feuille de style dédiée à l'impression des articles. On imprime uniquement les sections importantes de l'article et l'avatar de l'auteur est remplacé par le QR code qui renvoie vers l'article. Je suis content d'avoir fini de mettre cela en place!

J'ai travaillé sur pas mal de choses invisibles à l'oeil nu mais au final, je suis satisfait du résultat. Je vais bientôt m'atteler au chiffrement SSL et à la sécurisation du serveur mail.

Voici les quelques mises à jour du serveur et du site depuis quelques mois :

J'ai encore pas mal de projets dans les cartons mais actuellement, je manque cruellement de temps :/

Wordpress iconPour les besoins du CKYF, 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 :

Cet exemple exécute le shortcode .

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-logoLa 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éez un fichier avec l'option faststart nativement, lancez l'encodage FFmpeg avec l'option :

-movflags +faststart 

Et voilà! Les vidéos streament proprement.

Voici les derniers ajouts au site depuis le début de l'année:

  • [+] vous pouvez désormais poster des vidéos en commentaire juste en donnant le lien texte de la vidéo (merci Anne-Gaëlle pour la sugggestion).
  • [+] le javascript est désormais chargé de manière asynchrone grâce à la librairie head.js. En pratique, la page (HTML, CSS, images) se charge et l'utilisateur peut interagir avec immédiatement, le code javascript est lui chargé après. Cela règle le problème que j'avais évoqué en novembre 2012.
  • [+] les gravatars sont désormais chargés depuis le site (et mis en cache par le serveur) au lieu d'être appelés depuis le site gravatar.com, cela limite le nombre de requêtes extérieures. Plugin : GravatarLocalCache.
  • [+] BASH : création d'un script qui répare toutes les tables et bases de données MySQL d'un serveur en cas de crash.
  • [*] réorganisation du fichier sitemap : j'ai retiré les pages archives, tags et catégories du fichier pour ne laisser que les articles et les pages, c'est-à-dire le contenu réel du site. Cela permet d'avoir une idée plus précise de ce qui est réellement indexé par Google : dans Google Webmaster Tools, j'ai maintenant 2,626 pages trouvées dont 2,606 indexées. Le reste ne l'était pas de toute manière.
  • [*] le bug des images corrigé cet hiver ne l'était en fait pas et pour cause : le fichier attachment.php contenait la même routine de vérification que le fichier single.php - celle qui me permet de rediriger quelqu'un qui appelle une page sans contenu (généralement un petit malin). Corrigé cette fois!
  • [*] correction d'un autre bug exotique affectant les images : perte du chemin des images.
  • [*] correction de 1500+ redirections de liens. Avec le temps, les sites changent de structure et les liens aussi. C'est là que l'on se rend compte que beaucoup de sites ferment au fil du temps. Merci Broken Link Checker.
  • [*] le site est intégralement validé en HTML5.
  • [+] Serveur : mise à jour des paquets LAMP avec les dépôts Dotdeb.
  • [*] Serveur : mise à jour vers Debian 7 Wheezy.

Prochaines idées d'optimisations sur lesquelles travailler :

  • soumettre les tablatures dans un fichier sitemap
  • héberger les images et le javascript sur un sous-domaine
  • activer le multisite pour héberger d'autres personnes sur le serveur ?

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

Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

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

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

  1. éditez le fichier functions.php de votre thème
  2. ajoutez-y cette fonction :
  3. enregistrez le fichier.

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 maitenant être valides.

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 :

Google+

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 :

Google+

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

Source.

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :