PROJET AUTOBLOG


le hollandais volant

Site original : le hollandais volant

⇐ retour index

[JS] Katex, pour faire des équations mathématiques dans les pages web

samedi 18 juin 2016 à 19:22

Sur mon blog scientifique Couleur-Science il m’arrive d’avoir besoin d’afficher des équations ou des expressions mathématiques, avec des fractions ou des lettres grecques.

Il existe plusieurs bibliothèques en JavaScript pour faire ça, l’une d’elles, la plus populaire en fait, est MathJAX, que vous connaissez peut-être et que j’utilisais avant. MathJAX est compatible avec pratiquement tous les navigateurs (jusqu’à IE6) et gère le SVG, le MML,, les images, elle permet de générer des codes d’intégration… Sauf que ceci vient avec un coût : l’archive pèse plus de 100 Mo, contient des milliers de fichiers et surtout le rendu est très lent.

Puis j’ai découvert Katex : un outil qui permet d’afficher des équations, comme MathJAX, mais bien plus rapidement : en fait, l’affichage est pratiquement instantané même sur les ordinateurs moins puissants ! Il n’y a pas cinquante mille options, du coup l’archive est beaucoup plus légère (2 Mo seulement, dont les 3/4 ne seront jamais chargés que sur les vieux navigateurs).

Je l’utilise depuis quelques mois sur Couleur-Science et c’est nickel. Vous pouvez en voir le résultat sur ces articles : 1, 2, 3.

Pour l’usage, ça se fait avec la syntaxe LaTeX (tuto et commandes supportées).
Dans votre page Web, incluez les fichiers katex.min.css et katex.min.js, ainsi que la bibliothèque auto-render, qui permet de faire le rendu automatique des équations quand elles sont en LaTeX dans le code source.

Pour retrouver la syntaxe de MathJAX, ajoutez ceci dans votre JavaScript :

renderMathInElement(
	document.body,
	{
		delimiters: [
			{left: "$$", right: "$$", display: true},
			{left: "$", right: "$", display: false},
		]
	}
);

Pour faire une équation dans une ligne de texte, mettez tout simplement le code LaTeX de l’équation entre deux « $ » (comme ceci : « $equation$ »)
Pour faire une équation sous la forme d’un bloc, centré, entre deux paragraphes de texte, mettez le code entre « $$ » (comme ceci : « $$equation$$ »).

KaTeX est créé par la Khan Academy, une association à but non-lucrative pour promouvoir l’éducation (en sciences, en programmation, en arts, en économie…) à travers des milliers de cours en ligne et des vidéos.

Enfin, ni MathJAX ni KaTeX ne permettent de tracer des graphiques. Pour cela, il y a JSXGraph, qui est très complète (donc forcément un peu lourde aussi). Un exemple d’utilisation ici.

[CSS] Écriture italique et oblique

mardi 7 juin 2016 à 17:34

En CSS, quand on veut mettre une portion de texte en italique, on utilise l’une des deux méthodes ci-dessous :

font-style: italic
font-style: oblique

Et ça met le texte en italique… Ou pas ! Car ce qu’on appelle italique est en réalité… oblique !
Il est en fait assez rare que les programmes utilisent l’italique à la place de l’oblique. La raison à ça est simple, mais pour la comprendre, il faut constater quelles sont les différences entre italique et oblique.

En fait, que le graphie soit romain (normale), italique, ou oblique, ce qui change est la forme des lettres (indépendamment de la police d’écriture elle-même).

oblique VS romane VS italic
Comme vous le voyez, à la fois l’italique et l’oblique sont inclinée. Cependant, les caractères romains et oblique sont identiques (à part l’inclinaison), mais les caractères italiques ont des tracés différents (en particulier le a et le f).

L’italique est donc bien une fonte en plus, et celle-ci doit être installée sur l’ordinateur pour que les logiciels puissent l’utiliser (ce qui n’est que rarement le cas) :

oblique VS romane VS italic
Dans la création de sites web, quand vous voulez inclure une police d’écriture, vous avez généralement le choix de la police « normal » et des variantes « italiques » (par exemple sur Google Fonts), et ceci pour les différentes graisses (« font-weight »).

En revanche, le comportement des navigateurs n’est pas celui que l’on espérerait : de ce que j’ai pu tester, si vous décidez d’inclure les polices italiques dans vos feuilles de style, alors à la fois oblique et italic vous donneront les caractères en italique. Si vous ne les incluez pas, les deux seront oblique (les caractères sont ceux de la police de base mais obliqués).

Je n’ai pas pu avoir un seul navigateur qui applique les trois polices de façon attendue, mais je n’ai pas pu tester Safari, le navigateur d’Apple, qui est connu pour faire très attention à ce type de détails.

Enfin, pour la culture générale, sachez que la police normale se nomme « romaine », étant donnée qu’elle prend son origine dans l’empire romain, comme l’alphabet (Latin) que l’on utilise. La police italique a la même racine que le mot Italie, le pays : en effet, l’écriture italique serait née au XVe siècle à Venise, en Italie.

Ressources :

Copyreich : sites fermés et auteurs arrêtés

vendredi 27 mai 2016 à 15:27

Le site Planet-Series a été fermé et les auteurs arrêtés. Ils risquent la prison et jusqu’à 500 000 € d’amende.

Quand il s’agit de protéger les intérêts privés des magnats du Copyreich, il y a du monde : police, justice, associations d’ayant-droits, coopération internationale… Tout ça marche bien pour fermer les sites définitivement et mettre les auteurs derrière les barreaux.

Par contre, pour protéger physiquement les citoyens du terrorisme on préfère fliquer tout le monde, instaurer un blocage DNS foireux et extensible administrativement (lire : sans juge et sans preuves), mettre tout le monde sur écoute. Par contre on n’entend toujours pas parler de raids policiers contre ceux qui tiennent le site ou contre les serveurs histoire de les mettre hors ligne une bonne fois pour toute.

J’en ai déjà parlé, je sais, mais c’est lassant.
D’autant plus que les sites de téléchargement illégaux disparaîtraient rapidement s’il y avait une offre légal potable… Mais non, investir n’est pas leur but. Attaquer tout ce qui bouge et bouffer le fric sur le dos des gens, y compris des innocents (taxe copie privée), voilà ce qu’ils font.

Code des pirates

mardi 24 mai 2016 à 18:29

Les pirates, dans le sens des collègues de Jack Sparrow Capitaine Jack Sparrow (pas ceux qui partagent des films sur le net) avaient également un « code » de conduite, appelé le « Code des Pirates ».
Ils sont mentionnés à plusieurs reprises dans les films Pirates des Caraïbes. À un moment on voit le gardien du code apporter un énorme livre censé représenter le code.

En vrai, le code des pirates est bien plus succins : une dizaine de règles tenant en une dizaine de phrases.
En fait, on devrait dire « les codes des Pirates », car selon Wiki chaque capitaine avait un peu son propre code.

On peut les lire et on y note certaines choses intéressantes.

Voici par exemple le code des Pirates de Bartholomew :

  1. Chaque pirate pourra donner sa voix dans les affaires d'importances et aura un pouvoir de se servir quand il voudra des provisions et des liqueurs fortes nouvellement prises, à moins que la disette n'oblige le public d'en disposer autrement, la décision étant prise par vote.
  2. Les pirates iront tour à tour, suivant la liste qui en sera faite, à bord des prises et recevront pour récompense, outre leur portion ordinaire de butin : une chemise de toile. Mais, s'ils cherchent à dérober à la compagnie de l'argenterie, des bijoux ou de l'argent d'une valeur d'un dollar, ils seront abandonnés sur une île déserte. Si un homme en vole un autre, on lui coupera le nez et les oreilles et on le déposera à terre en quelques endroits inhabités et déserts.
  3. Il est interdit de jouer de l'argent aux dés ou aux cartes.
  4. Les lumières et les chandelles doivent être éteintes à huit heures du soir. Ceux qui veulent boire, passé cette heure, doivent rester sur le pont sans lumière.
  5. Les hommes doivent avoir leur fusil, leur sabre et leurs pistolets toujours propres et en état de marche.
  6. La présence de jeunes garçons ou de femmes est interdite. Celui que l'on trouvera en train de séduire une personne de l'autre sexe et de la faire naviguer déguisée sera puni de mort.
  7. Quiconque déserterait le navire ou son poste d'équipage pendant un combat serait puni de mort ou abandonné sur une île déserte.
  8. Personne ne doit frapper quelqu'un d'autre à bord du navire ; les querelles seront vidées à terre de la manière qui suit, à l'épée ou au pistolet. Les hommes étant préalablement placés dos à dos feront volte-face au commandement du quartier-maître et feront feu aussitôt. Si l'un d'eux ne tire pas, le quartier-maître fera tomber son arme. Si tous deux manquent leur cible, ils prendront leur sabre et celui qui fait couler le sang le premier sera déclaré vainqueur.
  9. Nul ne parlera de changer de vie avant que la part de chacun ait atteint 1000 livres. Celui qui devient infirme ou perd un membre en service recevra 800 pièces de huit sur la caisse commune et, en cas de blessure moins grave, touchera une somme proportionnelle.
  10. Le capitaine et le quartier-maître recevront chacun deux parts de butin, le canonnier et le maître d'équipage, une part et demie, les autres officiers une part et un quart, les flibustiers une part chacun.
  11. Les musiciens auront le droit de se reposer le jour du sabbat. Les autres jours de repos ne leur seront accordés que par faveur.

Voyons quelques règles. L’avant dernière, pour commencer :

Le capitaine et le quartier-maître recevront chacun deux parts de butin, le canonnier et le maître d'équipage, une part et demie, les autres officiers une part et un quart, les flibustiers une part chacun.

C’est assez intéressant, alors que beaucoup de monde aujourd’hui réclame un plafonnement des salaires, c’est à dire que l’écart entre le salaire le plus bas et le plus haut ne peut excéder un certain facteur, comme 20 ou 100. Augmenter le salaire le plus haut contraindrait l’employeur à augmenter aussi les salaires les plus bas, ce qui me semble une bonne idée en soi quand-même.
Ceci est à mettre en perspective avec le fait qu’aujourd’hui les salaires les plus haut sont autour de 100 fois (France) et 300 fois (USA) plus gros que les salaires les plus bas…

À noter qu’on retrouve cette règle dans les codes des autres capitaines également, variant parfois légèrement.
Celui de Morgan mentionne que le coût des expéditions (nourriture, entretient des bateau) sont pris sur le butin collectif ; sous entendu avant le partage..

D’autres textes, comme le code du Capitaine John Phillips mentionne ça :

Si un homme perd une articulation alors qu’il est en service, il recevra 400 pièces de huit. Pour un membre, 800.

Ça paraît assez grossier, mais ce n’est pas différent d’un système d’assurances maladie, financé sur le pot commun.
On peut alors supposer que pour se retrouver avec une part plus importante du butin, il vaut mieux se protéger les uns les autres pour éviter de se retrouver à payer une compensation pour l’équipier qu’on aurait laissé tomber.

D’une façon générale, une chose intéressante est à voir ici que même les crapules ont un code de conduite avec un minimum d’éthique. Certes, c’est destiné à avoir un peu d’ordre dans le déroulement d’opérations criminelles, mais c’est tout de même à noter (et certaines règles, comme le plafonnement des salaires manquent cruellement au code du travail à mon goût).

Tout ça rejoint vaguement mon avis à propos du sabre-laser : même si une arme à feu est plus efficace sur tous les plans, il y aura toujours l‘honneur et le fait de se battre « comme un homme », c’est à dire à mains nues en duel.
Je pense qu’on s’accordera à dire que bon nombre de films auraient un scénario bien plus pauvre si les héros commençaient par abattre froidement à distance les antagonistes et à ne plus se poser de questions, alors que Hollywood préfère plutôt mettre les armes de côté et prévoir une demi-heure de baston dans le film (un exemple récent pour moi serait les Expendables 2, où c’est exactement ce qui se passe à la fin).

Ces icônes qui vieillissent

jeudi 19 mai 2016 à 22:04

L’apparition des interfaces graphiques sur les ordinateurs et leur utilisation à la place des interfaces textuelles a eu une conséquence : l’usage d’icônes au lieu de mots pour représenter une action sur un écran. On clique en effet sur l’icône d’un haut-parleur pour gérer le son, et non pas sur un bouton inscrit de « gestion du son ».

Choisir une icône relève d’un important travail : comment faire en sorte que le dessin d’une icône soit bien représentative de l’action qui lui est associée ?
Pour l’icône du son, par exemple : ce que l’icône représente n’est en fait qu’une partie généralement cachée d’une enceinte, le haut-parleur, justement. Pourtant il est communément accepté aujourd’hui.

Ce travail n’est pas simple du tout, mais ici je vais parler d’un autre problème : les icônes qui vieillissent.

Par exemple, l’icône aujourd’hui très répandue pour l’action « enregistrer » est une disquette :

i
Questions :

Je pense que la majorité d’entre vous répondront « oui » aux deux premières questions (quoi que : si vous avez moins de 15-20 ans, ce n’est peut-être même pas sûr). Je suis même persuadé qu’une partie en a chez lui (c’est également mon cas). En revanche, je suis sûr qu’une vaste majorité n’utilise plus de disquettes du tout depuis au moins plusieurs années.

Alors comment se fait-il que tout le monde connaisse cette icône, alors qu’une portion grandissante des utilisateurs n’ont jamais utilisé de disquettes et même jamais vu ?
J’ai bien une idée de la réponse : c’est parce que « c’est comme ça ». On vous a dit que c’était le bouton pour sauver votre travail et depuis vous savez que c’est ça, que ce soit sur un jeu vidéo, sur l’ordi, la tablette, le téléphone…

Juste pour info, voilà une photo de quelques disquettes 3½ pouces :

des disquettes 3½ pouces
Comme c’est inscrit dessus, la capacité des disquettes est de 1,44 Mo. Oui, méga-octets. Leur taux de transfert maximal est de 62,5 ko/s. Et celles là sont des disquettes « hautes capacité », les dernières produites (avant il y en avait d’autres : plus grandes, plus lentes, moins capacitives).

L’icône de la disquette était très explicite il y a 25 ans : la disquette était le support de stockage communément utilisé (comme la clé USB aujourd’hui, ou même le cloud), et signifiait qu’on fixait son travail sur un support physique pour pouvoir la conserver pour plus tard ou pour le partager avec quelqu’un d’autre.

Aujourd’hui, l’enregistrement d’un fichier a toujours le même but, mais à aucun moment n’intervient la disquette. Aussi les applications ont-elle ajoutés des boutons pour être en phase : enregistrement PDF, envoie par e-mail, partage direct sur les réseaux sociaux. Mais le symbole de la disquette est toujours là.

Voici quelques autres icônes qui se retrouvent dans le même cas, à des degrés plus ou moins poussés :

quelques autres icônes
Première ligne :

Seconde ligne :

Certaines icônes tirent leur origines d’objets pratiquement disparus aujourd’hui : le répondeur ou le combiné téléphonique par exemple. Les icônes continuent pourtant d’être très répandus, et même d’être l’icône « standard » pour leur applications propres.
D’autres sont plus faciles à identifier même pour les plus jeunes (email, par exemple) mais là encore, on a tendance à oublier que l’usage de ces objets s’est dévié : le courrier ne sert plus trop pour communiquer entre particuliers (pas dans ma génération en tout cas, et très certainement pas non plus celles à venir).

Et des icônes comme ça, il y en a plein d’autres : une carte routière (pliable), une disque vinyle, une loupe, un poste radio, un carnet de contact… ou même tout simple un dossier pour les fichiers.

Il est probable qu’un jour viendra où tout le monde utilisera encore ces icônes sans avoir la moindre idée de l’existence d’objets matériels à leur effigie.

Plus comique, viendra t-il un jour où on entendra « pourquoi t’as une icône “enregistrer sous” sur ton bureau ? » ou « Bonjour, je cherche des icônes Gmail en papier, vous avez ça ? » ? Ça serait amusant, je trouve.