Plus efficace qu’un long tutoriel, des exemples d’équations MathJax / Tex mettant en œuvre les situations les plus courantes.

• Matrices
• Fractions
• Fonctions par morceaux
• Tableaux
• Centrer des équations sur le signe =
• Numéroter des équations, appliquer des signets
• Styles
• Et plus à venir au fil du temps…

Lors de la conception d’un site, éviter les rechargements des pages pour mettre à jour des données ou des styles est souvent un prérequis. Les variables CSS sont très utiles pour changer un style de page sans recharger la page. Pour développer un bouton bascule (toggle) qui permet de passer du style "jour" au style "nuit" sans recharger la page : une variable cookie, un peu de Javascript et principalement des variables CSS.

Lors du développement d’un site Web, des écouteurs d’événements, appelés event listeners par abus de langage en français, sont implémentés soit par des librairies tierces, soit par soi même. Dans certaines circonstances, lors du démarrage des tâches d'améliorations des performances ou lors du debug de problèmes de comportement avec les event listeners à cause d’une librairie tierce, il s’avère utile d’obtenir une cartographie de tous les event listeners. Comment obtenir cette liste complète : les événements définis avec addEventListener et ceux définis avec l’attribut correspondant ? Ce n'est pas aussi trivial que cela pourrait l’être.

Si il n’y avait jusqu’à maintenant aucune justification pour migrer un site Web du protocole HTTP vers le protocole sécurisé HTTPS avec SSL (Secure Socket Layer), ce n’est désormais plus le cas. Même si un site web ne délivre que du contenu (pas de e-commerce, de sessions…), Google et son moteur de recherche adoptent désormais la position du "HTTPS everywhere by default !". Les conséquences peuvent être très pénalisantes sur l’indexation d’un site en conservant le protocole HTTP. Au cours de la migration d’un site en HTTPS, divers aspects à aborder : l’environnement de développement en local avec HTTPS/SSL, les outils de développement pour détecter et corriger les "Mixed Content", les redirections des adresses HTTP vers les adresses HTTPS ainsi que la "check list" des actions à mener post migration (Google Analytics, Google Search Console, sitemaps, liens canoniques…).

C’est à présent incontournable, bien au delà des gains en performances possibles et des nouvelles fonctionnalités avec le protocole HTTP 2, exploitable uniquement en HTTPS/SSL (Secure Socket Layer), Google l’a annoncé : HTTPS Everywhere ! Les robots de Google, Google Analytics… délaisseront petit à petit les sites Web qui tournent encore avec le protocole non sécurisé HTTP. Comment simuler la mécanique HTTPS / SSL avec certificats en local sur son PC pour ses domaines virtuels afin de réaliser la migration ? Avec OpenSSL (Open Secure Socket Layer) et les certificats auto-signés (self signed certificates), le module des macros d’Apache 2.4 apporte une souplesse appréciable pour automatiser la définition de ses hôtes virtuels en HTTPS/SSL. Et c’est parti pour le debug et la chasse au "Mixed Content" grâce aux outils de développement des navigateurs afin de finaliser le 100% HTTPS /SSL de son site.

Pour administrer les serveurs Apache version 2.2, des scripts shell, awk… ont été d’un grand secours pour générer les fichiers de configurations nécessaires à la définition de multiples hôtes virtuels (virtual hosts…). Avec Apache 2.4 et son nouveau module mod_macro, les virtual hosts peuvent être définis de façon bien plus industrielle d’un point de vue administration. Cas pratique : 3 hôtes virtuels sont définis par macro et pour chacun d’eux la version de PHP diffère.

Pour des raisons diverses et variées, il est souvent nécessaire de disposer en local de plusieurs environnements de développement avec Apache. Par exemple un environnement dédié par version de PHP pour des contextes de migration, un environnement uniquement pour du debug à l’image de l’environnement de production afin de reproduire un incident… La configuration de tels environnements est aisée avec les hôtes virtuels (virtual hosts) d’Apache 2.2 et le module fcgid (Fast CGI).

Microsoft a largement modifié son concept d'installation de Visual Studio 2017 par rapport aux versions précédentes, versions qui étaient livrées sous formes d’images ISO et installaient discrètement un trop grand nombre de composants. Avec Visual Studio 2017, les composants sont désormais regroupés en "charges de travail" (workloads) et les installations sont devenues plus personnalisables pour chaque module avec l’introduction des notions de composants obligatoires, recommandés et optionnels. Après avoir rapatrié en local une image complète de Visual Studio 2017 Community Edition, le déploiement des modules souhaités est lancé avec le binaire vs_community.exe, déploiement qui peut être en mode silencieux. Une image complète en local présente un intérêt majeur dans les environnements pour lesquels les accès internet ne sont pas fiables ou à bas débit mais également pour le déploiement ultérieur sur d’autres postes de travail ou une réinstallation.

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.

L’ajout dynamique de code javascript est réalisé tout naturellement avec les méthodes createElement, createTextNode et appendChild. Une fois de plus malheureusement Internet Explorer se comporte différemment. Dans le contexte de l’implémentation du bouton +1 de Google, une syntaxe multi navigateurs est développée pour ajouter dynamiquement du code Javascript en testant l’existence de la propriété canHaveChildren spécifique à Microsoft Internet Explorer.

Le site SQLPAC (SQL Pour Administrateurs et Concepteurs) expérimente et intègre depuis le début du mois de mai 2011 des forums pour francophones autour de son cœur de métier, à savoir les moteurs de bases de données transactionnels et décisionnels. L’incorporation des forums PHPBB au sein de son propre site ainsi que l’encapsulation de quelques fonctionnalités comme Google Analytics sont loin d'être aussi complexes qu’il n’y paraît car au final il suffit de modifier deux ou trois fichiers modèles (overall_header.html, overall_footer.html, stylesheet.css).

L’homogénéité et la cohérence ergonomiques dans un site sont essentielles. SQLPAC associe des vignettes aux parutions d’articles ou de nouvelles, vignettes créées avec l’outil de manipulation d'images GIMP 2.6. Un tutoriel pour les néophytes du graphisme avec GIMP qui souhaitent homogénéiser ergonomiquement leurs sites avec des vignettes. La création du calque d’arrière plan des vignettes est l’étape clé. Le plus gros du travail est fait lorsque ce calque est défini, adopté et réalisé.

Quel travail fastidieux pour respecter les normes et standards W3C et DOM dans un contexte de support multi navigateurs et multi versions ! Les fonctions Javascript compatibles DOM/W3C pour ajouter et supprimer dynamiquement des éléments HTML/XML avec createElement, createAttribute, appendChild, removeChild, insertBefore… sont relativement simples pour éradiquer la méthode document.write non recommandée et 100% incompatible avec le standard XHTML. Si ces fonctions Javascript sont simples en théorie, certains écueils sont rencontrés avec Microsoft Internet Explorer 6 et 7 (toujours le même navigateur !). Leur résolution est bonne à savoir afin de s’épargner des heures de débogage. Internet Explorer 6 et 7 sont encore très présents dans les statistiques Web et ne doivent surtout pas être négligés lors de la conception. Ce constat alarmant démontre la difficulté de migrer les plateformes Windows qui incorporent Internet Explorer dans son noyau, contrairement à FireFox ou Google Chrome sous Windows qui sont mis à jour régulièrement.

Qu’il s’agisse de la compilation de SQLite, OpenLDAP ou encore BerkeleyDB sous Windows pour des études ou des développements, MinGW for Windows (Minimalist Gui for Windows) est une excellente solution technique autonome et légère qui évite l’installation de la suite Microsoft Visual Studio avec ses composants annexes multiples. MinGW n’est pas intrusif dans la plateforme Windows (mise à jour de la base de registres…) et offre par ailleurs, en plus des compilateurs C, C++, gcc, Ada, Fortran…, la plupart des utilitaires Unix vitaux dans un environnement bourne shell comme gawk, awk, sort, comm, sed, grep, find… utilitaires qui manquent cruellement sous Windows. Ce tutoriel présente l’installation manuelle rapide en lignes de commandes de MinGW/MSYS for Windows ainsi que quelques éléments de paramétrages comme le montage de répertoires Windows dans MSYS.

À travers un cas pratique, toutes les étapes nécessaires dans la manipulation des calques pour supprimer une couleur de fond dans une image sans perdre en qualité avec le logiciel GIMP 2.6.10. Aide mémo technique pour les néophytes et un public qui ne pratique GIMP que très ponctuellement.

Guide pratique de référence en une page du module mod_rewrite d’Apache, module très puissant pour structurer et construire des sites en conformité avec les règles du SEO (Search Engine Optimization). Ce guide pratique vient compléter l’article à propos de l’optimisation SEO d’un site grâce au module mod_rewrite d’Apache : Le module mod_rewrite de réécriture des URL d’Apache 2 appliqué à l’optimisation de l’indexation (SEO) En plus du domaine du SEO, ce module d’Apache offre de multiples autres fonctionnalités comme bloquer l’accès à un site sous certaines conditions, changer de domaine…

Présentation générale du protocole SOAP (Simple Object Access Protocol) pour la mise en œuvre de Web Services. Les cas pratiques proposent la construction de services Web avec Java. Les chapitres fondamentaux abordés sont :

• Présentation du protocole SOAP
• SOAP Messaging
• SOAP RPC Remote Procedure Call

Tutoriel pour une prise en main rapide de la programmation orientée objet avec Java : classes, méthodes, constructeurs, héritage, polymorphisme, encapsulation… Les opérateurs et blocs d'instruction du langage Java ainsi que les packages sont également abordés. L'utilisation de javac pour compiler des classes java et l'exécution des classes avec java est proposée à la fin de l'article avec le classique programme Hello World.

Procédure technique pour graver et créer des CD ROM auto exécutables (autorun) à l'aide des fichiers autorun.inf. Le fichier autorun.inf permet d'attribuer une icône au CD à partir d'un fichier .ico ou d'une icône contenue dans un exécutable ou une librairie DLL. L'ouverture automatique d'un exécutable avec ou sans paramètres est également paramétrable dans le fichier autorun.inf.

La mise en service d'un serveur Web local Apache 1.3.12 sous Windows pour les développements PHP est proposée dans cette note technique. Parmi les points techniques et les principes fondamentaux abordés qui sont les plus importants : démarrage et arrêt du serveur, création d'Alias, implémentation de PHP 4, utilisation des fichiers .htaccess pour protéger et paramétrer les répertoires.