La tablette Acer Iconia 10 (modèle A3-A30) est une tablette sous Android Lolipop 5.0.2 de 10 pouces full-HD et avec un processeur Intel. Cette tablette peut-être rootée et c’est l’objet de ce tutoriel (qui est une version détaillée et en français ce cette procédure sur XDA). Pour mon avis sur la tablette, voir à la fin de cet article.

Comme d’habitude, je commence par dire ce que vous lirez sur tous les forums et blogs qui expliquent ce genre de chose :

• Le root permet de faire des choses avancées sur votre appareil. Ne faites pas n’importe quoi, sous risque de rendre votre appareil inopérant.
• Je (l’auteur du présent article) ne peut être tenu responsable des conséquences quelles-qu’elles soient des manipulations que vous allez faire. Ceci inclut (mais n’est pas limité à ça) le fait que votre tablette devienne inutilisable ou ne veuille plus redémarrer.

La méthode qui suit a fonctionné pour moi.
La tablette est sous Android 5.0.2. Le numéro de built est Acer_AV0L0_A3-A30_1.132.00_WW_CUS1.
Cette manip nécessite un ordinateur sous Windows (ou OS-X, mais les fichiers que je fournis ne marcheront pas). J’ai utilisé un ordinateur sous Windows 7, mais ça devrait marcher sous n’importe quelle version de Windows (les machines virtuelles ne fonctionneront pas forcément).

Vous aurez besoin de divers fichiers à télécharger ou installer, sur votre ordinateur (Windows) ou sur Android. Leur liens sont donnés en bas de cet article.

Prérequis

Sur Android :

— Il faut activer les options développeurs. Pour ça, allez dans les Paramètres > À propos de la tablette, scrollez tout en bas et trouvez Numéro de built. Cliquez 7 fois de suite dessus et ça va activer les options de dév, qui seront alors visible dans les paramètres, en bas.
— Dans les options pour les dév : activez « débogage USB », désactivez « Vérifier les applis via USB ».
— Dans les options de sécurité, activez les « Sources inconnues ». Ceci permet d’installer des paquets non validés par Google.

Sur une carte µSD, copiez le fichier SuperSu.zip, directement à la racine. Il est d’ailleurs mieux qu’il n’y ait que ce fichier dessus : ça sera plus simple (autrement ce n’est pas grave).
Mettez la carte SD dans la tablette et assurez-vous qu’Android la reconnaisse.

Sous Windows :
— Installez le programme AcerDrivers. Ça vous permet de faire reconnaître votre tablette à votre ordinateur.
— Installez le programme ADB-Setup.
— Copiez dans un dossier le programme IntelAndroid-FBRL. C’est lui qui va permettre le root, grâce à ADB.

Le Root

— Connectez la tablette à l’ordinateur. Sur le téléphone un popup surgit : autorisez l’ordi à accéder au débogage USB et n’oubliez pas de cocher la case pour mémoriser l’autorisation.
— Sur l’ordinateur, allez dans le dossier IntelAndroid-FBRL et lancez le fichier launcher.bat.

— ce dernier demande de taper ACCEPT (en majuscules). Faites-le puis validez par la touche Entrée.
- ensuite il faut choisir une méthode pour le Root. Pour cette tablette, il faut prendre la 5e, nommée « cwm.zip ». Pour faire ça, tapez simplement « 5 » puis validez par la touche Entrée.

Ensuite :
— S’il affiche du texte en rouge avec, ça n’est pas bon. Si il affiche « UNKNOWN », alors la connexion entre le PC et la tablette ne se fait pas. Vérifiez le câble, vérifiez les branchements, vérifiez que le PC a le droit d’accéder au débogage et revalidez par la touche Entrée.
— Si tout est bon, le texte est en vert et il affiche ceci :

DEVICE STATUS: ADB-ONLINE
DEVICE STATUS: FASTBOOT-ONLINE 

—Il vous demande de faire un choix : pour cette tablette, choisissez la méthode T4 : tapez simplement « T4 » et validez par la touche Entrée.

— la tablette va redémarrer et une partie de la procédure va se faire toute seul, à la fois sur l’ordi et sur la tablette.
— à un moment, sur la tablette vous serez dans le programme « Vampirefo Venue ». Il faut utiliser les touches de volume pour monter ou descendre et la touche On/Off de la tablette pour valider.
— naviguez jusqu’à « Install zip » puis validez.
— naviguez ensuite jusqu’à « Choose zip from external sdcard ».
— naviguez ensuite jusqu’à votre fichier SuperSu.zip. Puis validez. Ensuite, vous devez confirmer ce choix : naviguez jusqu’à la ligne « Yes ‑ Install SuperZu.zip », puis validez.
— l’installation du zip se fait toute seule.
— une fois que c’est fini, naviguez jusqu’à « +++++ Go Back +++++ » plusieurs fois de suite jusqu’à vous retrouver au menu principal. Naviguez sur « reboot system now » et validez.
— là il dit que l’accès root n’est pas possible. Ignorez, naviguez sur un des « No » et validez.

La tablette redémarre.

Une fois que le système est chargé, vous avez terminé : votre tablette est rootée.
Il ne vous reste qu’à installer le logiciel SuperSu depuis le PlayStore (ou depuis ailleurs) et c’est bon.

Sur le PC, vous pouvez supprimer tous les fichiers téléchargés ou installés.
Sur la carte SD dans la tablette, vous pouvez supprimer SuperSu.zip.
Sur la tablette, vous pouvez aussi désactiver le déboguage USB.

Les fichiers à télécharger

• ADB-Setup.exe (9,6 Mo - sha1 eae637085255a1c7d903a880374b20d108a3c38b)
• AcerDrivers.exe (5.5 Mo - sha1 2a0c16d835e516a18b4382fc47dcc06e08c37992)
• IntelAndroid-FBRL.zip (35.2 Mo - sha1 18ac61b5eb1b1eadcf70ea7af17d9b4dd8cefef3)
• SuperSU.zip (4.1 Mo - sha1 61a0e2b92b4f447b8df35292cc65540a48fd8772)

Quelques liens

• Supprimer les bloatwares d’Android
• Quelques astuces pour l’autonomie
• Bon Android : sélection de quelques applications qui valent le coup.

---

Autrement, cette tablette : je recherchais une tablette depuis peu, pour éventuellement remplacer mon petit Dell XPS pour le nomade.
Mes besoins en terme de config étaient listées ici, et c’est sur conseil du Croc-Mignon sur Twitter que je l’ai prise (elle avait tout ce que je voulais).

La tablette n’est pas mal du tout pour son prix de 300 € : pas trop lourde, l’écran est très bon (full-HD, forcément…), Wifi/BT/GPS (et Glonass!)/NFC…), et le CPU Intel semble faire des merveilles. J’avais déjà pu comparer du Qualcomm, généralement plus puissants que du MediaTEK, mais Intel s’en tire très bien aussi : la navigation entre les app et les sites web est fluide et je n’ai aucun "lag" à noter. Je n’ai pas testé de gros jeux dessus (je n’en ferais probablement jamais).
Il possède 32 Go de mémoire (disque SSD) mais dispose d’un emplacement pour Micro-SDXC, supportant donc les cartes de 64 Go et même au delà normalement. Bonne surprise également : il n’y a pas trop de bloatwares (logiciels pré-installés) : à part 2 applications de Acer, un navigateur de fichier tieres, et les applications de Google (Gmail, Youtube, Maps…), on ne trouve rien. On a vu bien pire ailleurs.

Niveau connectique, il n’a pas de sortie HDMI et la sortie USB (pour la charge) ne fait pas MHL (c’était pas prévu, mais ça aurait été un petit plus).

Je n’ai pas encore eu à l’utiliser en nomade, donc je n’ai pas pu trop tester son autonomie.

En revanche j’ai pu tester l’appareil photo et il est merdique : 5 MPx c’est déjà pas génial, mais la netteté des photos est mauvaise : même pas capable de décoder un QRCode. Clairement, ne l’achetez pas pour son appareil photo.
Heureusement je ne comptais pas m’en servir pour ça (prendre des photos avec sa tablette faut être un peu dérangé) mais le fait qu’il peine même pour les QRCode c’est quand même lamentable (mais ça vient peut-être d’Android 5 aussi).

Mais pour le reste, comme j’ai dit, l’appareil dans son ensemble a l’air plus que correct pour ce prix là.

Un truc à savoir : par défaut, comme tout appareil sous Android 5.x normalement, les partitions de données sont chiffrées. En soit c’est bien, mais pour le root ça m’a empêché d’accéder aux données avec les outils de root (ce qui était problématique pour trouver le fichier Zip du root), c’est pour ça que j’ai dû passer par une carte µSD.
Certains sites disent qu’il faut faire une réinitialisation de sortie d’usine pour virer le chiffrement : ça n’a pas marché chez moi. Comme je ne m’en fiche un peu je n’ai pas cherché plus loin mais pour le désactiver quand même il faut flasher la Rom et/ou le Bios ce que je n’ai pas cherché à faire.

Malgré la récente polémique de la réforme pas du tout récente de l’orthographe, voici un article sur l’orthographe. Afin de réduire le nombre de fautes à l’écrit en français, je me suis constitué une petite liste d’astuces et de moyens mnémotechniques. En voici la plupart.
Je précise que je suis ne suis pas un expert littéraire, et certaines justifications peuvent contenir des erreurs malgré le fait d’avoir pris soin de faire pas mal de recherches… J’attache cependant une certaine importance aux langues quand-même, et cette liste est justement là pour m’aider à mieux la respecter et si elle peut vous servir aussi, tant mieux.

Soit / soient

« Soit » dans le sens de « ou bien » est invariable. Exemple : « soit je mange une pomme, soit je mange un biscuit ».
« Soient » est le subjonctif du verbe être à la troisième personne du pluriel : « qu’ils soient maudits ».

Quand on l’utilise dans le sens de « voici » ou « supposons », il devrait être invariant, même si la tournure « soient » est plus ou moins acceptée en maths. Exemple : « soit deux droites perpendiculaires » dont l’écriture « soient deux droites perpendiculaires » est également acceptée.

Tache / tâche

Sans accent, il désigne une salissure : « j’ai une tache sur ma chemise ».
Avec accent, il désigne une besogne, un travail à accomplir : « j’ai pour tâche de ranger les dossiers », « le gestionnaire des tâches ».

Une façon de s’en rappeler est de se souvenir que l’accent circonflexe marque très souvent un ancien « s » qui a fini par disparaître au fil des siècles. Pour le « â », ça aurait donné un « as ». Or le mot anglais pour « tâche » contient encore cette lettre : task. La traduction de task est donc « tâche » et non pas « tache ».

Le circonflexe qui remplace un ancien « s » est parfois visible dans les mots de la même racine : forêt/forestier, hôpital/hospitalier, arrêter/arrestation, fête/festival, château/castel, bête/bestial, île/insulaire, maître/master, connaître/connaissance, ancêtre/ancestral. Ce n’est pas systématique, mais on peut trouver un grand nombre d’exemples comme ça.

Les majuscules accentuées

Parlant d’accents, les lettres majuscules doivent être accentuées (ÉÀÙËÂÊÖ…) et il en va de même pour les ligatures et la cédille (njƅ). Ne pas le faire constitue une faute de français.
Il est néanmoins toléré de ne pas le faire si c’est impossible : les machines à écrire ne le permettaient pas, par exemple, alors que les claviers… c’est un autre débat, avec sa propre polémique :D.

Les capitales doivent également être accentuées, et suivent la même règle.

Où / ou

« Où » avec l’accent grave désigne un lieu : « où es-tu ? », « il doit être là où je l’ai laissé ».
Sans accent, « ou » traduit une alternative, un choix : « fromage ou dessert », « tu viens ou pas ? ».

Pour info, « où » est le seul mot en français comportant un « ù ». La touche du clavier qui le porte ne sert qu’à ça.

Là / la

Pareil que pour le « où/ou » : « là » avec un accent désigne un lieu : « il est là », « c’est là où je vais ».
Le « la » est simplement un déterminant ajouté devant un nom : « la voiture », « la maison ».

Dés / dès

Avec l’accent aigu, « dés » représente le pluriel de « dé », l’objet que l’on jette au jeu de l’oie : « deux dés à six faces ».
Dans les autres cas il prend un accent grave : « dès » : « dès que tu as fini », « dès lors ».

Dû / du / dus

Quelque soit son sens, on n’utilise l’accent circonflexe que lorsque le mot est non-accordé. Les formes « dûe », « dûes », « dûs » n’existent pas. On écrit « due », « dues », « dus » respectivement.
La forme « du » (sans accent) désigne une quantité indéfinie : « du chocolat », « du fromage ».
Dans les autres cas, on met un accent : « un retard dû à la neige », « mon dû s’élève à 20 € », « j’ai dû me dépêcher ».

Votre / vôtre (et notre / nôtre)

Quand il s’agit d’un déterminant (placé devant un nom), il ne prend pas d’accent circonflexe : « votre voiture ».
Dans les autres cas, il en prend un. C’est assez simple à se souvenir : si on a « le(s)/la » ou « du » devant ou si on peut mettre un de ces mots sans que ça change le sens, il prend un accent : « c’est le vôtre », « il faut y mettre du vôtre », « la clé est vôtre », « restez donc avec les vôtres (les gens de votre famille) ».

Majuscules des dates

Les noms des mois, des jours, sont communs : ils ne prennent pas de majuscules : « […] vendredi 1er décembre […] », « le 23 juillet ».

Ils prennent évidemment une majuscule quand ils sont en début de phrase : « Juillet est mon mois préféré ». L’autre cas de la majuscule, c’est quand on parle d’une date historique, d’une fête : « le 14 Juillet », « Le 11 Novembre »…

Appeler / apeller / appeller

Une seule de ces orthographes existe : appeler.

Pour se souvenir de l’orthographe, rappelez vous ceci : le « e » sans accent suivi de deux consonne identiques (ou pas) se prononce généralement « è » ou « é » (comme dans terre, cassette ou vert). S’il est suivi d’une seule consonne, il se dit « e » (comme dans retenir ou jeter).

Appeler s’écrit avec un seul « l » pour que le e se prononce e (et non pas é ou è).
Or, je sais qu’il y a une double consonne quelque part dans le mot et ce n’est pas le « L » : c’est donc le « P » : « appeler ». On a le même raisonnement pour le mot « enveloppe ».

Par contre, dans la phrase « j’appelle la police », on met bien deux « l » pour avoir le son è.

Quand / quant

Celui-ci est également bizarre mais assez simple à comprendre : ce mot peut prendre deux sens.
Le premier est celui référent à un moment dans le temps. Il est alors synonyme de « lorsque » et il s’écrit « quand » : « Quand il fait beau, je me promène. », « J’aime quand il neige. », « Quand viendras-tu ? ».
Le second est celui où il a le sens de « concernant » ou « en ce qui concerne ». Dans ce cas, il s’écrit « quant » : « Quant à moi, je mange une pizza. », « Quant au père Noël, je n’y crois pas. ».

Il est préférable de retenir cette astuce plutôt que celle du « quant » suivi de « à/au/aux », car elle ne marche pas à tous les coups, comme le montre ce contre-exemple : « Quand à Noël il neige, les enfants sont contents. » (source), où il faut bien un « d », car il a le sens de « lorsque ».

Ceci sera tout pour mes astuces aujourd’hui. Je ne parlerai pas des fautes de l’accord des verbes du premier groupe (« j’ai manger » ou « il faut marché »), ou le « sa/ça » qui sont assez lourdes.
Si vous avez d’autres astuces, publiez-les ! Plus elles sont ridicules, plus elles fonctionnent, donc n’hésitez pas \o/.

Hors / or

« Hors » a le sens de « dehors » ou « en dehors ». On le retrouve dans l’expression « hors de ma vue ! ».
« Or » est une conjonction de coordination qui permet de lier deux parties d’une phrase ou lier deux phrases entre elles : « il était là, or je ne le vois plus ». On peut le remplacer par « mais » ou « donc » sans trop changer le sens de la phrase.

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 :

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 Affichage → Add New Button (appuyez sur Alt pour afficher le menu et aller dans Affichage).
Une nouvelle fenêtre s’ouvre alors :

• 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 :

• Remove telemetry updates for Windows 7 and 8.1
• Comment désactiver la mise à jour automatique vers Windows 10
• La mise à jour KB2952664 veut vous faire passer à Windows 10
• I don't want Windows 10 - I've even deliberately not installed the KB3035583 yet I've still got the notification

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 :

#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 :


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 :

#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 :


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 » :


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 :


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