En CSS, on a à faire à des classes, des ID, des éléments… Parfois on rencontre aussi ce que l’on appelle des pseudo-classes et des pseudo-éléments.
Il ne faut pas confondre les deux : la différence est tout à fait logique mais je vais la réexpliquer ici.

Quand on a le code HTML suivant :

<p class="auth-date">
    Écrit par <span class="author">Moi</span>, <span>Aujourd’hui</span>.
</p>

Qui affiche :

Écrit par Moi, Aujourd’hui.

On a trois éléments :

  • p
  • span
  • span

Ce sont des éléments HTML. On les appelait parfois « balises » ou « tag », mais ce sont des éléments. Selon l’élément, la disposition peut varier (un <table> organisera les données sous la forme d’un tableau, par exemple), mais globalement ce sont les éléments qui contiennent les données affichées à l’écran.

En plus des éléments HTML, on a des classes CSS. Ici on en a deux :

  • .auth-date
  • .author

Les classes seules servent à rien : elles ne modifient pas ce qui est affiché à l’écran, ne sont pas visibles, etc. C’est en CSS qu’elles sont utiles : elles permettent de modifier le comportement des éléments.
Le CSS permet par exemple d’afficher tous les éléments de classe "author" en rouge. Dans ce cas là, le « Moi » sera en rouge.

Tout ce qui précède est tout à fait basique, mais ça va servir pour comprendre les pseudo-classes et les pseudo-éléments.

Il faut retenir deux choses :

  • les éléments contiennent le texte ou les données affichées à l’écran ;
  • les classes modifient le comportement du texte ou des données qui sont dans les éléments.

À partir de là, on peut trier les pseudo-classes et les pseudo-éléments en CSS:

  •  ::before et ::after permettent d’afficher du contenu supplémentaire dans la page, à côté d’un élément déjà existant.
  •  :hover, :active, :visited, etc. permettent de modifier le comportement d’un élément lors d’une action ou d’une situation (respectivement au survol, au clic, et dans la situation où un lien a déjà été visité) ;

Vous le comprenez donc, je présume :

  •  ::before et ::after sont des pseudo-éléments (ajoutent du contenu à la page, notamment avec la propriété « content » propre aux pseudo-éléments).
  •  :hover, :active, :visited, etc. sont des pseudo-classes (modifient le comportement d’un élément);

Avant le CSS3, on notait les pseudo-classes et les pseudo éléments de la même façon, avec les deux-points « : ». Depuis le CSS3, il a été introduit le fait de noter les pseudo-classes avec les deux-points « : » et les pseudo-éléments avec deux fois deux-points « :: ».

Les pseudo-éléments sont au nombre de quatre depuis bien longtemps, ::before, ::after, ::first-letter et ::first-line.
Les pseduo-classes sont plus nombreuses : on avait déjà les :hover, :focus, :active, :link ou :visited, maintenant on a plein d’autres, en particulier pour les formulaires, comme :valid, :invalid, :checked, :not(), etc.

Et… on peut très bien combiner tout ça : un élément peut avoir une classe ? Et bien un pseudo-élément peut avoir une pseudo-classe ! On peut très bien faire un des exemples ci-dessous :

element::after:hover {
    // ici le CSS pour modifier le ::after lors du survol du ::after
}
element:hover::after {
    // ici le CSS pour modifier le ::after lors du survol de l’élément auquel est attaché le le ::after
}
element:not(:hover) {
    // ici le CSS pour modifier l’élément quand il n’est pas survolé (utile dans certains cas).
}

Ou encore, plus compliqué :

element:invalid:hover::after {
    // le CSS pour un ::after attaché à un formulaire invalide lors du survol
}

Enfin un petit mot concernant la spécificité des pseudo-classes et pseudo-sélecteurs (voir la spécificité des sélecteurs CSS : là c’est très simple car les pseudo-classes ont la même spécificité que les classes normales et les pseudo-éléments ont la même spécificité que les éléments normaux.

Autrement, les possibilités apportées par ces choses sont énormes, c’est à vous d’étudier ça maintenant !

Il y a quelques temps, je vous montrais une petite astuce pour faire des icônes « propres » sur mobile et desktop, puis une astuce pour faire un formulaire avec des icônes pouvant bénéficier de la première méthode

Depuis j’ai essayé de voir les autres techniques pour faire des icônes dans une page web.
Aujourd’hui, principalement 3 méthodes sont possibles :

  • prendre une image PNG (comme celle-ci) avec plein d’icônes dedans et utiliser la méthode des fenêtres coulissantes.
  • prendre la même image, mais au format SVG, donc vectorielle
  • utiliser les icon-fonts, des polices d’écriture avec des icônes dedans

Les PNG

La première technique avec les images de fond en PNG, tout le monde la connaît : c’est la plus utilisée, la plus supportée par les navigateurs, la plus simple… mais c’est aussi la moins malléable !
En effet, si ont veut afficher une icône plus grande, on peut le faire, mais l’image sera floue et pixelisée. Même chose si on veut afficher les icônes sur un écran où la densité de pixels est plus grande (écrans « Retina® », par exemple, mais Apple et ses Mac Book sont loin d’être un cas isolé aujourd’hui).
On peut créer plusieurs images avec différentes résolutions pour plusieurs types d’écran, mais ce n’est pas pratique.

Le second problème c’est si on veut changer la couleur de son thème graphique : les icônes doivent être adaptées aussi. Or pour ça, on ne peut pas faire grand chose : pour changer la couleur des icônes, il faut modifier l’image, ou là encore créer des images différentes pour chaque thème…

Les SVG

Les SVG permettent d’avoir des images nettes quelque soit la taille : c’est très pratique lors du zoom, ou lorsque votre site est susceptible d’être affiché sur un mobile (où la densité de pixels est bien plus grande que sur un écran d’ordinateur).
On peut obtenir le même effet avec du PNG, mais il faut pour cela partir d’icônes à haute résolution, et donc d’images très lourdes, ce qui va poser problème lors du chargement de la page, particulièrement sur mobile et surtout avec des connexions pourries. Le SVG, lui, reste précis avec le même fichier.

Le seul problème ici c’est que si on a toujours besoin de faire plusieurs images si on veut changer la couleur du thème. On peut faire ça en JavaScript (je fais cela dans cet exemple), mais pour le thème en CSS, ce n’est pas pratique.

Les Icon-fonts

Alors ici on conserve la netteté du SVG lors de la mise à l’échelle, mais on a en plus l’avantage très important de pouvoir colorier les icônes comme on veut !

En effet, tout se fait en simple CSS : on dit que l’on veut afficher tel ou tel caractère contenu dans la webfont et ensuite c’est du simple texte : on peut l’agrandir (avec font-size), la colorier (avec color), ajouter une ombre CSS (avec text-shadow), etc. C’est la méthode la plus pratique pour le designer final.

Pour créer un fichier de police avec les icônes dedans, il faut disposer d’icônes initiales (PNG ou SVG) et utiliser un programme pour transformer ça en une police. Je n’ai pas trouvé d’outil facile pour faire ça en local, mais cet outil en ligne fonctionne bien : IcoMoon.io.
Ensuite il suffit d’utiliser la police d’écriture comme c’est fait dans le fichier demo.html fourni au téléchargement.

Il y a quand même quelques inconvénients. J’en ai noté deux principaux :

  • une fois qu’on a généré notre police, il est difficile de la modifier : pour ajouter une icône, il faut régénérer la police (comme si on la recompilait à partir des icônes initiales), ce qui peut éventuellement changer les codes des icônes (chaque icône est accessible avec un code à utiliser dans le CSS).
  • le fonctionnement de l’usage des Icon-fonts fait qu’il ne sont utilisables que dans la propriété content de CSS. Or content ne peut être utilisée que sur les pseudo-éléments (::after et ::before), qui elles-mêmes ne sont utilisables que sur les éléments HTML non-autofermantes (donc toutes sauf les input, img, br, hr…). On peut donc utiliser les Icon-fonts partout sauf sur les input, les images…

Si vous voulez quand-même utiliser une icône sur un input, il faut ruser, et l’appliquer par exemple sur un label qui est rendu invisible.

L’usage des Icon-fonts est assez simple. Comme je l’ai dit, on utilise un code pour accéder à un caractère en particulier dans la police. Le CSS se charge d’afficher ce caractère à l’écran grâce à la propriété content :

.icon::before {
    content: "\1a02";
}

Ce que l’on fait parfois, c’est qu’on place ce code directement dans un attribut de l’élément HTML, puis le CSS affiche le contenu de cet attribut dans le content (oui, on peut faire tout ça :D) :

<span data-icon="&#x1a02;">Text</span>
[
@font-face {
    font-family: "icons";
    src: url("icons.woff") format("woff");
}

data-icon]::before {
    font-family: icons;
    content: attr(data-icon);
}

Et on peut changer la couleur, etc :

[data-icon]::before {
   [ …]
    color: red;
    font-size: 3em;
}

Bref, une fois qu’on a créé notre fichier d’icônes, l’usage est très simple, les possibilités sont énormes (couleurs, taille, ombres, animations — y compris sur la couleur, donc pour faire des couleurs arc-en-ciel \o/ — etc.), c’est supporté par les bon navigateurs récents (y compris mobiles).

Et concernant la lourdeur et le poids, je trouve que ça va tranquillement : mon fichier d’Icon-fonts fait 48 ko et contient 400 icônes différentes. Mon fichier PNG avant contenait environ 60 icônes pour 25 ko (certaines étaient en doubles pour pouvoir avoir des couleurs différentes).

Je viens de découvrir un module pour Firefox : Custom Buttons.
Ça permet de créer ses propres boutons pour l’interface de Firefox, directement en JS et dans l’interface (donc mieux que les simples bookmarklets). Le module ne semble plus mis à jour depuis quelques années, mais il fonctionne encore très bien.

Je me suis pour le moment simplement attardé à transformer 3 bookmarklets en boutons Firefox :

firefox new buttons

Forcer le mode lecture

Le premier, le petit « livre », c’est pour forcer le mode lecture. Parfois, le mode lecture ne fonctionne pas dans Firefox. J’ai trouvé d’où ça vient, c’est un comportement compréhensible et à chier, mais on peut l’outrepasser : il suffit d’ajouter le texte « about:reader?url= » devant l’URL. Ce bouton fait ça en un clic (notez que certaines pages ne rendent pas bien en mode lecture).

Pour ajouter ce bouton, il faut commencer par ajouter un bouton. Dans Firefox allez dans AffichageAdd New Button (appuyez sur Alt pour afficher le menu et aller dans Affichage).
Une nouvelle fenêtre s’ouvre alors :

ajouter un nouveau bouton à Firefox avec Custom Buttons

  • Dans Name donnez-lui le nom que vous voulez, par exemple « Mode Lecture »
  • Dans Image, choisissez une icône. En cliquant sur Browse, vous pouvez choisir une icône à vous. Si vous faites ça, choisissez votre icône puis cliquez sur le bouton « ⇒ base64 » pour transformer l’image en code intégré au bouton.
  • Dans le grand champ Code, il faut mettre le code JS que vous voulez exécuter au clic sur le bouton. Dans le cas présent, on veut se mettre en mode lecture. Il faut y mettre ça :
loadURI("about:reader?url="+encodeURIComponent(content.document.location))

Faites ensuite « OK », en bas : le bouton est créé.

Maintenant il faut l’ajouter à l’interface : allez dans le menu de Firefox puis « Personnaliser ». Vous voyez alors votre icône et vous pouvez la déplacer où vous voulez dans l’interface. Une fois que c’est fait, quittez la personnalisation et cliquez sur votre bouton pour passer en mode lecture (même si le mode lecture n’était pas activé par défaut).

Afficher un clavier virtuel JS

Le deuxième bouton, il affiche un petit clavier alternatif pour taper en Russe, Japonais ou en Grec dans les formulaires. C’est le petit clavier en JS que j’avais créé il y a 2 ans.
Pour l’avoir aussi, il faut ajouter un autre bouton.
Faites la même manip que tout à l’heure, mais changez juste le Code en ça :

loadURI("javascript:s=document.createElement('script');s.id='r6109_vkbsgp';s.type='text/javascript';s.src='http://lehollandaisvolant.net/tout/dl/virtual-kb/keyboard.js?french';document.head.appendChild(s);void(null);")

(La doc du clavier est sur mon article dédié et sur Github)

Un bouton pour Shaarli

Le troisième, c’est pour partager un lien sur mon blog, façon Shaarli. Pour Shaarli, le code à faire serait dans ce genre là :

loadURI("http://example.com/shaarli/?post="+encodeURIComponent(content.document.location)+"&title="+encodeURIComponent(content.document.title))

En remplaçant example.com/shaarli/ par l’adresse de votre Shaarli.
Notez que ce code diffère du contenu du bookmarklet de Shaarli : en effet, si le code du bookmarklet fonctionnerait parfaitement, ce code est plus natif à Firefox et donc plus rapide. En plus, il fonctionne même là où les bookmarklets normaux ne marchent pas (quand le JS du bookmarklet est bloqué sur le site, comme sur Github).

Vous pouvez transformer n’importe quel bookmarklet en bouton dans Firefox en plaçant le code JS du bookmarklet entre « loadURI(" » et « ") ».

Le module permet de faire quelques autres choses, comme lancer le script automatiquement au démarrage de Firefox. Je vous laisse voir le site du module pour plus d’information. Il y a aussi un forum, avec un partage de plein de scripts.

Microsoft nous emmerde encore pour forcer le passer vers Windows 10. Ça fait des mois que ça dure mais ils ne semblent pas s’en lasser.

Avant de bloquer totalement les mises à jours pour éviter W10, voici un récapitulatif des mises à jours Windows qui sont à bloquer pour le moment :

  • Sous Windows 7 : KB3035583, KB2952664, KB3021917, KB2990214, KB2977759,
  • Sous Windows 8 : KB3035583, KB2976978, KB3044374, KB3112336

Je vous conseille de vérifier les mises à jour de façon automatique, mais de ne les installer que manuellement et de les vérifier une par une : mêmes masquées et désactivées, ces mises à jours réapparaissent régulièrement.

Pour les supprimer, ouvrez le bloc-note (notepad.exe), copiez-collez ceci :

echo Uninstalling KB3035583
start /w wusa.exe /uninstall /kb:3035583 /quiet /norestart
echo Uninstalling KB2952664
start /w wusa.exe /uninstall /kb:2952664 /quiet /norestart
echo Uninstalling KB3021917
start /w wusa.exe /uninstall /kb:3021917 /quiet /norestart
echo Uninstalling KB2990214
start /w wusa.exe /uninstall /kb:2990214 /quiet /norestart
echo Uninstalling KB2977759
start /w wusa.exe /uninstall /kb:2977759 /quiet /norestart
echo Uninstalling KB2976978
start /w wusa.exe /uninstall /kb:2976978 /quiet /norestart
echo Uninstalling KB3044374
start /w wusa.exe /uninstall /kb:3044374 /quiet /norestart
echo Uninstalling KB3112336
start /w wusa.exe /uninstall /kb:3112336 /quiet /norestart
echo Uninstalling KB3123862
start /w wusa.exe /uninstall /kb:3123862 /quiet /norestart
echo Uninstalling KB3035583
start /w wusa.exe /uninstall /kb:3035583 /quiet /norestart
echo Disabling GWX in Registry
reg add HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\Gwx /v DisableGwx /t REG_DWORD /d 1

enregistrez le fichier sur le bureau sous le nom w10fix.bat (n’oubliez pas de changer le type du fichier à « *.* tous les fichiers »), double-cliquez dessus et attendez que ça se passe : la fenêtre se fermera une fois que tout sera supprimé.

En plus des mises à jour, ce script ajoute une clé du registre qui bloque GWX. Pour le moment, ceci a suffit pour repousser le passage à Windows 10. Mais pour combien de temps encore, je ne sais pas.

J’essayerai de maintenir cette page à jour au fur et à mesure que Microsoft voudra forcer ces mises à jours stupides.

Sources :

Le titre n’est pas très clair, je sais.
Vous vous souvenez qu’il faut utiliser des tailles de polices relatives (em, %, en…) plutôt qu’absolues (px, pt, pc…) ? Ceci permet de conserver les échelles de taille de police quand on zoom (deux polices de taille différentes conserveront leur différence de taille quelque soit le zoom).

Ici il s’agit de faire pareil pour les couleurs. Cette astuce va permettre de modifier la couleur principale d’un thème beaucoup plus rapidement.

Imaginons que l’on ait un menu au fond blanc et au texte gris foncé, avec un effet de survol. Au survol, un élément devient gris. Le problème, c’est que le gris rend le texte (déjà grisé) moins lisible :

the font is barely readable on hover
#menu {
	background: white;
}
#menu li {
	color: #888;
}

#menu li:hover {
	background-color: #aaa;
}

Vous me direz qu’on n’a qu’à ajouter une couleur de texte au survol, aussi, ça résoudrait le problème :

#menu li:hover {
	background-color: #aaa;
	color: #333;
}

Oui, ça marche bien.
Mais que se passe t-il si je veux changer la couleur du menu, par exemple passer d’un thème blanc et clair à quelque chose de plus coloré comme du bleu :

changing the background alone is not enough
Ici, je n’ai modifié que la couleur de fond du menu, mais le hover reste gris et ça fait moche. Pour bien faire, il faudrait modifier 4 couleurs : la couleur de fond du menu, la couleur de fond lors du survol, la couleur de la police et la couleur de la police lors du survol.
On a donc 4 choses à modifier simplement pour changer la couleur principale du thème : ce n’est pas pratique.

Il y a pourtant un moyen de gagner du temps : on peut faire en sorte de modifier seulement la couleur de fond pour répercuter le changement de couleur et de contraste sur toute la chaîne des couleurs.
L’idée c’est d’utiliser des polices et des couleurs non pas grises, mais noires semi-transparentes. Comme ça, si le fond change et devient plus foncé, alors une partie de ce changement sera également répercuté sur la couleur de la police, qui deviendra également plus foncée :

hover enhanced lisibility
#menu {
	background: white;
}
#menu li {
	color: rgba(0, 0, 0, .4);
}

#menu li:hover {
	background-color: rgba(0, 0, 0, .3);
}

Et maintenant, il ne suffit de changer que la couleur de fond du menu, et l’ensemble restera toujours lisible et la couleur du hover sera toujours la même que celle du fond, mais en plus foncée. L’ensemble reste donc cohérent :

hover with good colors
On a donc des couleurs qui ne font que changer de luminosité, en conservant la teinte ainsi que la différence de luminosité. Les couleurs de la police et du hover sont donc relatives à la couleur principale.
Tout ceci fonctionne très bien avec les couleurs pas trop saturées (typiques du material design ou du flat design) et claires.

Si vous préférez un thème sombre, et un effet de survol qui éclaircit au lieu d’assombrir, vous pouvez utiliser des non pas du noir semi-transparent, mais du blanc semi-opaque.

Le même principe peut être appliqué aux ombres portées, dégradés, bordures…

Il peut être pratique d’avoir un réseau Wifi ouvert à proximité. On en trouve d’ailleurs de plus en plus : gares, cafés, terrasses, centres commerciaux…
C’est cool…

… et risqué…
… sur plusieurs plans.


Déjà, qui dit « réseau Wifi ouvert » dit « réseau Wifi non sécurisé », et donc pas non plus chiffré : du coup, toutes vos données transitent en clair dans les air. Et croyez-moi, capter tout ce qui transite en Wifi est très simple : certains programmes, y compris sur mobile, le font automatiquement.
Une fois captées, les données peuvent être exploitées : on peut y rechercher les mots de passe, les adresses emails, les URL visités et même les photos partagées ou les fichiers téléchargés.

Heureusement, de plus en plus de sites web se mettent au HTTPS, c’est à dire qu’ils incluent un protocole de chiffrement directement entre le navigateur et le site. Ceci empêche une personne de lire vos mots de passes ou les URL visitées, même si le réseau Wifi n’est pas chiffré.

Sauf que j’ai dit que les sites web se mettaient au HTTPS. Pas forcément les applications : un grand nombre d’applications sont mal sécurisées et toutes les données sont toujours envoyées en clair. Dans le pire des cas, un pirate peut même modifier les requêtes qu’il capte et vous renvoyer une réponse également modifié. Vous pensez alors télécharger une mise à jour pour votre téléphone alors qu’en fait vous téléchargez une application malveillante.

Ceci est le premier problème des réseaux Wifi ouverts : la sécurité des données.


Ensuite, un autre problème c’est la gratuité : « si c’est gratuit, vous-êtes le produit », vous vous souvenez ?
Vous pensez peut-être que le centre commercial ou le restaurant qui met en place le réseau Wifi se fiche que vous visitiez telle ou telle URL, et bien détrompez-vous : aussi bien le site visité que le propriétaire de la borne Wifi trouvent leur comptes dans ces informations, qui sont très utiles pour les mesures d’audiences et de préférence.

N’oubliez pas que votre téléphone possède une adresse unique (adresse Mac) et que le propriétaire du routeur peut ainsi savoir exactement par quels réseaux Wifi vous êtes passés et donc savoir quels restaurants vous préférez et dans quels centre commerciaux vous faites vos courses.
Pour le propriétaire du routeur, qui peut aussi afficher de la publicité sur ses pages de connexion, ceci est une aubaine : la publicité fonctionnera très bien s’il affiche des promotions pour votre restaurant ou votre centre commercial en particulier. Alors oui, vous direz que ça vous fait des économies… Mais réfléchissez-y : avez-vous vraiment prévu d’aller dépenser 50€ au restau avant la date d’expiration du code promo ? Pas sûr. Au final vous dépensez d’avantage.
Et bien sachez que c’est de cette façon que fonctionne le business des réseaux Wifi gratuit et ouvert. L’avantage du réseau ouvert ici c’est que tous les téléphones qui passent à proximité se connectent automatiquement et ça fait donc d’autant plus de données captées sur d’autant plus de clients potentiels (un passant qui passe tous les jours devant un restaurant sera plus susceptible de s’y arrêter pour manger s’il se retrouvait avec un code promo trouvé sur un site web).

C’est là le second problème des réseaux Wifi ouverts : l’intrusion dans la vie privée des gens pour les besoins de la publicité.

Enfin, et beaucoup plus fourbe : certains magasins mettent des points d’accès Wifi un peu partout. C’est discret, ça semble utile pour vous mais ça permet de vous traquer quand même. Le magasin sait alors exactement où vous vous trouvez, devant quel produit vous hésitez et sait comment vous traversez le magasin. Dans un but d’optimisation des ventes et le placement des produits sur les rayons, c’est une aubaine. Et en plus vous les remerciez pour le Wifi.

Mais rassurez-vous, si le tracking par Wifi est une réalité, de plus en plus de magasins passent désormais par la reconnaissance faciale avec des caméras planqués dans les rayons, pour trouver qui achète quoi, quand et où.

Et ça, c’est le 3e problème des réseaux Wifi ouverts : le tracking des gens.


Il y a évidemment des solutions simples à tout ça.

Si vous voulez utiliser un réseau Wifi quand vous n’êtes pas chez vous, privilégiez les hotspot des FAI (comme FreeWifi pour les abonnés Free) : au moins ceux-ci sont chiffrés et vous protègent des intrusions.

Pour les données, les mots de passes qui transitent et vos liens visités qui fuitent, utilisez un VPN sur votre téléphone : de cette façon toutes les données sont chiffrées à partir de votre téléphone jusqu’au serveur VPN. Le propriétaire du réseau Wifi (ou un pirate) ne peut pas capter vos données.

Concernant le tracking et les données qui fuitent directement de votre téléphone sans l’aide d’une borne Wifi, il suffit de couper les communications quand vous ne vous en servez pas. De façon générale même, je vous conseille de couper le Wifi, le GPS et le Bluetooth quand vous ne vous en servez pas. En plus de protéger votre vie privée, ça sera bon pour l’autonomie de la batterie (très bon, même).

(Merci Nicolas, alias Ede42 pour l’idée d’article)

Les forfaits FreeMobile, que ce soit celui à 2€ ou celui à 19€ intègrent (depuis toujours) la possibilité de se connecter gratuitement à tous les hotspot wifi de Free depuis votre smartphone.

En quelques mots, il s’agit en fait d’un réseau constitué de toutes les freebox de tous les abonnés Free. Ça donne ainsi aux abonnés Free (mobile ou fixe) la possibilité d’utiliser le Wifi n’importe où. Si vous avez vous-même une freebox, sachez que le propriétaire de la freebox reste prioritaire en terme de débit internet. Aucun risque donc de voir sa connexion vidée par les clients Free qui passent par là.

Orange, Bouygues et les autres ont aussi un réseau similaire, fonctionnant différemment (je trouve dommage que les opérateurs n’unifient pas tous leurs hotspots pour un réseau Wifi plus étendu pour tous).

Si vous êtes sur FreeMobile et que vous voulez vous connecter au réseau FreeWifi, il faut partir à la recherche des réseaux wifi « FreeWifi_secure » :

cliquez sur le réseau « FreeWifi_secure »
Pour s’y connecter, commencez par cliquer dessus.
Ici, il n’y a pas de mot de passe à taper car la connexion se fait au moyen de votre carte sim, qui constitue votre méthode d’identification. Il faut tout de même sélectionner soi-même cette méthode :

Affichez les options avancées, choisissez la méthode « sim » puis votre carte sim Free
Commencez par afficher les « options avancées ». Parmi les options de « Méthode EAP », choisissez « SIM ». Ensuite, cliquez sur « Fente SIM », puis sélectionnez la fente sim correspondant à votre carte FreeMobile (dans le cas où votre téléphone est multi-sim).

Il ne vous reste plus qu’à vous connecter en cliquant sur « Connecter ».
Vous voilà connecté au réseau FreeWifi :

vous êtes connectés
Vous pouvez maintenant surfer en illimité et gratuitement.
La connexion se fera de façon automatique toutes les prochaines fois où vous passez à côté d’un hotspot FreeWifi.

Quand on inclut un fichier de police en CSS dans sa page web (par exemple la police "roboto"), on fait quelque chose comme ça pour la déclarer :

@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 400;
  src: url("roboto.woff") format("woff");
}

Puis ceci pour l’utiliser :

p {
  font-family: roboto, sans-serif;
}

C’est bien comme ça qu’il faut faire.
Mais qu’en est t-il du cas où la police du même nom est présente sur l’ordinateur de l’internaute ? Il se passe quoi ?

Le navigateur doit choisir entre télécharger la police "roboto" du web ou utiliser la police "roboto" sur l’ordinateur.
Dans les faits, il se trouve que le navigateur télécharge la police du web : la déclaration de la police avec le nom "roboto" remplace en fait le nom "roboto" dans la liste des polices sur l’ordinateur.

Autrement dit, à chaque fois que l’internaute qui a déjà la police d’installée arrive sur votre site, il doit télécharger la police en question. Ce n’est pas optimal.

La solution ? Déclarer le nom possible qu’aurait la police sur l’ordinateur avec « local() » :

@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 400;
  src: local("roboto"), local("roboto-regular"), url("roboto.woff") format("woff");
}

Notez que si vous aviez ses variantes, comme celui en « font-weight: 300 » ou « 700 », vous devez spécifier la noms de polices spécifiques, dans ce cas précis « roboto-light » et « roboto bold ».

De cette façon, si la police Roboto est installée sur l’ordinateur, elle se utilisée et ça s’arrête là. Si elle n’est pas installée, alors la police va être chargée par le navigateur.
On peut donc gagner pas mal en temps de chargement pour une partie des visiteurs.

Dans le cas de Roboto, c’est une police faite par Google et utilisée dans le cadre du material-design. Elle est également intégrée nativement sur Android. Si votre site utilise cette police et que vous utilisez la méthode écrite ci-dessus, alors il sera rapide sur n’importe quel appareil Android (ce qui n’est pas non plus sans importances, vu que de plus en plus de requêtes sont faites depuis des appareils mobiles, majoritairement sous Android).

Enfin, si la police Roboto est installée sur l’ordinateur de votre visiteur sous un autre nom, ça ne fonctionnera pas et elle sera téléchargée quand même.
Je conseille donc, que ce soit lors de l’usage d’une police sur le web ou de l’installation sur votre ordinateur, de toujours utiliser le nom original de la police : vous accélérez alors potentiellement la navigation de vos lecteurs ainsi que la votre, tout en hiérarchisant au mieux la gestion des polices d’écritures : ceux du système avant ceux du web.

Je suis fan des jeux qui ont quelques années : je joue encore régulièrement à Half-Life, UT2004 ou Portal.
Il y a quelques mois j’ai acquis le DVD de Halo 2 PC pour Windows Vista (sorti en 2007).

Ce jeu fonctionne avec Windows Live et avec un compte Microsoft, mais on peut s’en passer pour le mode solo.

Il se trouve que ce jeu tourne très bien (en mode campagne solo) sous Windows 8.1 aussi (l’installation se fait sur Windows 10 mais je n’ai pas pu tester le lancer du jeu). Il y a juste quelques bidouilles à effectuer.

Pour installer le jeu depuis le DVD, il faut avoir installé deux composants liés à Games for Windows Live (lien en bas de l’article) : il faut les installer dans l’ordre (1 puis 2), puis lancer l’installation depuis le DVD.

Lors de l’installation, faites Customize Game Install et choisissez l’installation seule :

installation halo2
Puis :

installation halo2
Notez que durant l’installation il peut vouloir installer le Framework.Net 2.0 ou 3.0 : il faut les installer.
Il demandera aussi d’entrer la clé d’activation qui se trouve dans la boîte du jeu (il faut une connexion internet pour ça).

Lors de la première ouverture, si vous voulez simplement jouer en local (comme moi), il n’y a pas besoin de compte Windows Live/MSN/XBox : quand il demande de faire un nouveau profil, acceptez mais, ne faites pas « suivant », il faut scroller en bas et cliquer sur le lien pour faire un simple profil local :

i
Vous pourrez ici faire un profil de jeu local (pas besoin de compte XBox-Live ou Hotmail) et vous connecter avec ça. Ceci sera votre compte Windows Live Games (partagé par les autres jeux Windows Live), car il faut ensuite faire un profil de joueur pour Halo (qui lui est un simple profil pour sauvegarder ses différentes parties).

Après ça, vous pourrez jouer tranquillement à ce jeu qui a bientôt 10 ans :D.



Les fichiers à télécharger et à installer (dans cet ordre) :
  1. gfwlivesetup.exe (Games For Windows Live Setup)
  2. xliveredist.msi (Client XBox Windows Live)

Si jamais les fichiers deviennent introuvables, je les rend disponible sur mon site.

(source de l’astuce)

ligature S et I Quand on parle de ligatures en typographie, on parle de deux caractères qui sont collés pour n’en former plus qu’un : « oe » devient « œ », par exemple dans « œuf » et dans « cœur ».

Œ est sûrement la ligature la plus connue en français. On trouve ensuite « æ » que l’on retrouve dans ex æquo ou curriculum vitæ et représentant la ligature entre les lettres « a » et « e » ; ou encore le « & », qui représente historiquement la ligature entre un « e » et un « t » (d’où sa signification).

En allemand, on rencontre beaucoup le « ß », (à ne pas confondre avec le « β » (bêta) du grec), et qui représente la ligature entre un « ſ » (s long, utilisé en math pour les intégrales) et d’un « s ».

Le œ, le æ ou le ß sont assez courants, mais connaissez vous les autres ligature, beaucoup plus rares, voire presque disparues de l’usage ?

L’une des lettres qui présente pas mal de ligatures, c’est le « f » : cette lettre a en effet tendance à avoir la partie haute (la hampe) dépasser sur la droite, ce qui fait qu’il recouvre la lettre suivante et qui peut donner un résultat illisible. Par exemple, la hampe du f peut recouvrir le point du i qui le suite, ou heurter la barre du l ou du t, ou même la hampe d’un autre f. Dans certains cas, trois lettres sont ligaturées : par exemple quand on se retrouve avec deux f et un i.
Dans ces cas, les lettres sont ligaturées ainsi : «  », «  », «  », «  »…

L’origine d’une ligature pour deux caractères peut être technique : c’est le cas pour les ligatures avec le « f », pour éviter les collisions entre les lettres lorsque l’on utilisait les caractères en plomb dans l’imprimerie ; étymologique : la ligature représente alors un son unique en deux lettres ligaturées, comme « œ », qui représente un son unique (par exemple dans les mots « cœur » ou « fœtus », mais pas dans le mot « moelleux » qui ne présente donc pas de ligature) ; ou purement esthétique.

Ce dernier cas de ligatures esthétiques sont les plus rares et les moins utilisées, principalement parce qu’elles sont optionnelles. On découvre ainsi qu’il existe des ligatures comme « st » qui devient « st », simplement pour ajouter un peu de style. Elle reflète, parfois, la trace laissée par la plume dans une écriture manuscrite lorsqu’on passait d’une lettre à l’autre sans la lever du papier.

Enfin, dans les ligatures en langue française, on peut noter le statut de la vingt-troisième lettre de l’alphabet : « W » qui, historiquement, est une ligature entre deux « V », d’où son nom de « double V » (ou « double U » en anglais).
Cette ligature a fini par devenir une lettre à part entière.

Dans le même alphabet mais dans d’autres langues, on trouve d’autres ligatures, par exemple le « dz » (dz) en polonais ou le « lj » (lj) en slovaque. Le néerlandais utilise aussi parfois la ligature « ij » : « ij ».

L’alphabet phonétique international, présente d’autres ligatures qui lui sont propres : ȸ (db), ȹ (qp)…

Les autres alphabets disposent également de leur ligatures, apparues pour les mêmes raisons (techniques, étymologiques ou esthétiques).

Ressources :

image de Daniel Ullrich