More efficient than a long tutorial, examples of MathJax / Tex equations in the most common situations.

• Matrices
• Fractions
• Piecewise functions
• Arrays
• Centering equations on the sign =
• Numbering equations, bookmarks and hyperlinks
• Styles
• And more to come by the time…

When designing a site, avoiding page reloads to update data or styles is often a prerequisite. CSS variables are very useful for changing a page style without reloading the page. To develop a toggle button which allows you to switch from the "day" style to the "night" style without reloading the page : a cookie variable, some JavaScript code and mainly CSS variables.

MathML for writing mathematical expressions in HTML has not become a standard in HTML 5. Google Chrome does not support MathML, Google argued that powerful libraries in Javascript already exist and cover the needs for a very limited audience of scientists. Indeed, the MathJax javascript library coupled with AsciiMath is perfect when you want to write expressions in HTML pages with a professional and ergonomic rendering supported on all platforms. This article is not a MathJax tutorial, it introduces simple examples and especially how to dynamically load the MathJax.js library on demand using CSS classe names. A few words about the underscore character in AsciiMath syntaxes, the delimiter, the styles and the MathJax menu to quickly copy/paste.

When developing a Web site, event listeners are implemented, by third party libraries or by your own. In some circumstances, when starting performance improvements tasks or when debugging behavior issues in event listeners due to a third party library, we may need to get an overview of all event listeners. How to get the full list : the events defined with addEventListener and the ones defined with the corresponding attribute ? It's not so trivial.

Without techniques like Captcha, a form can be created very simply in HTML and Javascript in order to be effective against spam bots (our friends the spambots). In the form, a simple field with specific characteristics and attributes betray spam robots by strongly asking them to input data in this field. The dynamic creation of the form in javascript after the page has loaded is also a solution to hide it from robots. Easy effective techniques : no more spam since their implementation !

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

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.