À la une de SQLPAC en 2016

Google Analytics est un outil d’une puissance inégalée et simple à mettre en œuvre pour mesurer l’audience d'un site Web (visites, pages vues, vitesse des pages, localisation géographique des visiteurs, systèmes d'exploitation…). Mais les technologies et les API évoluent… les librairies ga.js et dc.js de Google Analytics deviennent obsolètes. Il faut migrer vers la nouvelle librairie analytics.js, aussi appelée Google Analytics Universal. La migration vers les API analytics.js est abordée ici avec toutes ses spécificités (mesure des téléchargements, événements…), et elle aboutit très souvent à une réflexion sur un mécanisme moins dépendant des changements éventuels des API de Google Analytics. Une automatisation des actions Google Analytics (tracking de téléchargements, événements…) avec une fonction javascript unique est proposée à travers un cas pratique en exploitant les attributs rel et data-% des balises des liens hypertextes <a>. Cette fonction rend le code beaucoup moins dépendant des futurs changements d’API de Google Analytics et la migration se résume alors à modifier la fonction en 2 minutes.

Un site Web en entier (fichiers html, php, css, javascript…) à migrer de l’encodage Latin 1 / ISO-8859-1 vers l’Unicode UTF-8 car au fil de l’évolution des technologies (PHP 5.4 et versions supérieures, services de partage AddThis…), des incompatibilités surgissent. Mais comment automatiser celle-ci quand plus de 500 fichiers sont concernés ? Le langage Python et son package io sont capables en quelques lignes d’automatiser la migration d’un site en entier vers UTF-8, programme python qui est proposé dans cet article. Le package chardet de Python est bien capable de détecter les encodages de fichiers toutefois il est plus fiable d’utiliser la commande file et de donner ses résultats au programme Python en charge de la migration. Dans un environnement Windows de développement, aucun souci pour utiliser la commande file, la plateforme légère MinGW (Minimalist GNU for Windows) propose tous les utilitaires indispensables dont l’utilitaire file. Après la migration des fichiers, quelques opérations post migration sont nécessaires, comme le remplacement dans les balises meta des pages HTML de l’encodage ISO-8859-1 par UTF-8, ce qui peut être également automatisé par un script shell sous MingW. La modification de l’encodage vers UTF-8 doit éventuellement être réalisée au niveau global pour PHP et les connexions aux bases de données (MySQL dans ce cas pratique).

Interroger et manipuler des données JSON avec Javascript et XMLHttpRequest est facile et séduisant. Lorsqu’il s’agit de requêtes de données au format JSON dans un contexte inter domaines (cross domains), la méthode est bien différente : JSONP (JSON Padding) doit être utilisé. Les données JSON sont chargées comme s’il s'agissait d’un script Javascript, l’adresse URL doit simplement contenir le paramètre callback indiquant la fonction de rappel lorsque les données sont reçues. Voici un cas pratique avec la récupération au format JSON de la liste des articles tendance (trending content) depuis le service AddThis.com.

Un exemple hypra basique avec une fonction appelée rebuild_href pour industrialiser l’ouverture de liens hypertextes externes dans un nouvel onglet grâce à Javascript et l’attribut natif rel="external". Plus aucun lien hypertexte ne pourra désormais échapper à la règle.

La lourdeur du langage XML n’a pas toujours convaincu (syntaxes et méthodes), en revanche essayer JSON (JavaScript Object Notation), c’est l’adopter. Les données d’un fichier JSON sont facilement lisibles et modifiables que ce soit humainement ou par des API (PHP, Python…). Une fonction générique en Javascript pour charger les données des fichiers JSON, wsys_load_json, est proposée ici. La problématique du cache des navigateurs pour les fichiers JSON est abordée avec 2 solutions : le module mod_expires d’Apache ou l’application d’une empreinte dans l’adresse URL du fichier JSON. Il est important aussi de prêter attention à l’exécution synchrone ou asynchrone du chargement des données JSON afin d’éviter certains pièges dans les développements. Un cas concret illustre ce sujet.

Le sujet n’est pas nouveau, et encore moins révolutionnaire : pour simplifier l’ajout dynamique de librairies javascript (Google +1, MathJax, HighlightJS…) avec des options très diverses pour chacune d’elles (attributs id async defer, fonctions de rappel ou fonctions callback, nœud texte…), une fonction générique en pur Javascript (sans jQuery) peut tout prendre en charge. En voici une, wsys_load_js, elle est loin d’être parfaite et ne respecte peut être pas l’excellence du codage en Javascript mais si ça peut aider, alors l’objectif est atteint. Internet Explorer 8 et ses incompatibilités avec les standards Javascript (addEventListener, appendChild d’un nœud texte sur un objet script) est encore supporté dans la fonction proposée car étrangement, malgré la fin de Windows XP, 5% des visiteurs sur ce site utilisent encore cette version en septembre 2016. En juin 2017, le support d’IE 8 devrait être retiré.

Sans avoir recours à des techniques comme Captcha, un formulaire peut être élaboré très simplement en HTML et Javascript afin d’être efficace contre les robots de spam (nos amis les spambots). Un simple champ avec des caractéristiques et attributs bien précis dans le formulaire permet de trahir les robots de spam en les invitant très fortement à saisir des données dans ce champ. La création dynamique du formulaire en javascript après le chargement de la page est également une solution pour le dissimuler aux robots. Des techniques simples mais le résultat est sans appel : plus aucun spam depuis leur mise en place !

MathML pour l’écriture d'expressions mathématiques en HTML n’est pas devenu un standard avec HTML 5. Google Chrome ne supporte pas ce langage avec l’argument de l’existence de puissantes librairies en Javascript pour répondre à ce besoin d’un public de scientifiques assez limité. Effectivement la librairie javascript MathJax couplée à AsciiMath est parfaite lorsqu’on désire écrire en HTML des expressions pour un rendu professionnel et ergonomique et afin de ne pas utiliser des images ou des expressions brutes de fonderie illisibles notamment lorsqu’il y a des fractions. Une présentation de cas très simples, il ne s’agit pas d'un tutoriel à propos de MathJax, mais surtout comment charger dynamiquement la librairie MathJax.js en cas de besoin dans un fichier HTML grâce aux classes CSS et Javascript. En bonus, quelques mots sur le caractère underscore dans les expressions AsciiMath, le changement de délimiteur (backtick par défaut) et le menu MathJax disponible sur les expressions pour réaliser rapidement un copier coller.

Nu HTML Checker (Nvu), un outil écrit en Java indispensable pour valider en masse des fichiers HTML afin de produire du code de qualité qui garantit les performances et ne perturbe pas Javascript si des balises sont mal formées. Son usage et surtout sa syntaxe sont simples. Les résultats sont facilement exploitables et en combinaison avec findstr, les erreurs dûes à la présence de code PHP ou au format HTML 4 du document sont écartées.