Pokémon 20 years
Je ne pouvais pas ne rien dire, ce week-end, pour les 20 ans de pokémon, donc voilà : bon anniversaire Pokémon \o.

Il y a tout juste 20 ans que ça a commencé, au Japon, que les premiers jeux sur Game Boy sont sortis. Ils sont sortis un peu plus tard dans le reste du monde. Puis il y a eu la série, les jeux et tout le reste.

En ce qui me concerne, pokémon c’est à peu près toute mon enfance (donc ça l’est encore aujourd’hui^^).

pokémon stuff
J’ai ressorti les cartes, l’album, les jeux vidéos, le poster, les peluches, les badges. Et je ne parle pas de tous les films (surtout le premier) et les épisodes (certains sont d’ailleurs disponibles sur mobile sur pokémon-TV)^^.

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.

fastboot windows 7 for android 5
— 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

Quelques liens


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.

Ici, une très bonne question de Gilles : il se demande s’il doit ou pas accepter les articles sponsorisés (payés, quoi) sur son site.
C’est une question où il y a pas mal à discuter.

Je reprends ici mon commentaire laissé sur son article en l’étoffant.

Déjà, pour commencer, je ne vois absolument aucun problème à gagner de l’argent. Même avec son blog ou site.
Ce n’est pas mal : tout le monde a besoin de payer son pain à un moment et vu le temps passé à bloguer, à raison d’une ou deux heures par article (en ce qui me concerne, et pour les articles rapides), merde, ça serait le comble si on n’en avait pas le droit.

Je sais qu’en France il est maaaal de gagner de l’argent, et encore plus maaaaaaal de gagner de l’argent avec une activité qu’on aime.
Mais je m’en tape, franchement. Si y en a qui ont un problème avec ça, c’est justement leur problème et pas le miens.

Les seules conditions que je vois aux articles sponsorisés, sont :

  • que le reste du blog n’en devienne pas auto-censuré (être parrainé par une entreprise XYZ ne doit pas m’empêcher de les démonter quand l’actu s’y prête). Je ne veux pas de pression de la part d’un groupe (au hasard, Google, qui oppresse les blogs et les force à rester dans le droit chemin). Je re-salue au passage l’ami Korben pour sa position sur le sujet et ses actions courageuses vis à vis de ça.
  • que ça soit annoncé : un article sponsorisé, c’est un article qui ne vient pas du blogueur. Je ne veux pas que le lecteur croit que ça vient de moi alors que c’est faux. C’est une question de respect du lecteur, tout simplement. Le contenu d’un tel article n’importe pas : il peut être très intéressant et le produit vanté également, mais si le lecteur est pris pour un con de A à Z, c’est pas la peine. Un bon article sponsorisé reste un bon article, voilà ce que je pense.
  • plus largement, pas juste les articles sponso, pour la pub : que ça ne gêne pas, ni visuellement (popup, vidéo sonore) ni concernant la vie privée (d’où ma revendication au droit d’utiliser un bloqueur).

… et je pense que c’est tout.
Si je lis un blog pour son blogueur, alors je lui fait confiance pour choisir les sujets qui l’intéressent et pour garder une certaine intégrité dans la rédaction des articles. Je ne peux pas exiger d’un blogueur de ne pas faire d’articles sponsorisés, tout comme lui ne peut pas me forcer à lire l’intégralité de ce qu’il écrit. Je lis surtout des articles et pas spécialement des blogueurs. Les idées, pas les personnes.

Enfin, chacun est libre de faire ce qu’il veut sur son site. Il n’a rien à redevoir à qui que ce soit (sinon de la Loi).
La seule chose importante est de prendre ses responsabilités : si on est trop avare avec la pub par exemple, les gens vont fuir ou mettre des bloqueurs de pub. Ça n’est pas leur faute mais de la vôtre. Savoir où s’arrêter est crucial, beaucoup de sites n’ont pas su le faire et en payent aujourd’hui les conséquences avec les bloqueurs de nuisances publicitaire (et veulent nous en faire porter le chapeau, en plus).

Sur ce blog

Ce qui suit concerne mon cas, sur mes blogs. Ce n’est plus la réponse à l’article de Gilles.

Pour commencer, mes blogs ne me rapportent (plus) rien. Je n’ai plus de compte Flattr (qui me rapportait ~10 € par mois) et je n’utilise plus de publicité depuis très longtemps. Je n’exclue pas ces possibilités, mais pour le moment je n’en ai pas l’utilité : j’ai déjà un emploi payé. Je serais heureux de pouvoir vivre de mon blog, y compris couleur-science.eu, je ne dis pas le contraire, mais je n’en suis pas encore là (il ne tient qu’à mois de travailler sur ça, et c’est en cours).

Ensuite, je n’ai encore jamais accepté d’articles payés non plus*. Déjà parce que ce dont j’aurais été supposé parler ne m’intéressait pas plus que ça et aussi parce que si je ne veux pas vous prendre pour des cons, je ne veux pas non plus que les annonceurs ne me prennent pour un con avec des contreparties risibles. Nous sommes des blogueurs, pas de la publicité à bas coût, merci d’en tenir compte quand vous nous contactez (et accessoirement, c’est vous qui me contactez : moi je n’ai rien demandé, alors sachez être un minimum convainquant et attractif… ce qui n’est pas simple quand ma page de contact indique de ne pas me contacter pour de la pub, mais bon, forcez-vous quand même, vous aurez l’air moins ridicule).

En revanche, des lecteurs m’ont parfois offert des choses (en plus des innombrables lectures, partages, commentaires ou emails de remerciement (ou pas) ou d’encouragement que vous m’envoyez) :

  • des livres ;
  • un t-shirt ;
  • des jeux vidéo sur Steam ;
  • on m’a également déjà invité à des conférence (avec prise en charge du déplacement) ;

J’accepte ce genre de choses sans aucun problème, sur la forme, et avec un immense plaisir.

En revanche, les dons en espèce j’ai du mal à les accepter : un don en France est taxé à hauteur de 60%. Je doute qu’en donnant 10 € à un blogueur vous souhaitez financer la prochaine campagne de François Hollande ou les branquignolles de l’hémicycle à hauteur de 6 € (les 4 € restants sont ensuite imposés, j’imagine). Donc si vous souhaitez investir de l’argent, je conseille généralement de le faire dans une association (Framasoft, LQDN, Mozilla, EFF…).

ÉDIT : Petite précision : oui, j’avais fait un article contre lequel on m’avait offert un compte premium et une série de codes promo pour vous : ici. Le service présenté n’existe plus aujourd’hui (et c’est bien dommage, il était intéressant).
On peut le considérer comme un article sponsorisé (c’était d’ailleurs annoncé comme tel dès le départ), même si ce que je veux dire est que je n’ai pas été payé (en argent) pour ça.

Aussi, en bas de cette page, il y a le lien vers Webou-pro, l’hébergeur du site. C’est aussi un lien affilié, qui me fait une remise quand quelqu’un commande un hébergeur Web chez eux en passant par mon site. Ce système ne peut que servir à couvrir le prix de l’hébergement Web et ne me rapportera donc pas d’argent en tant que tel.

Bref, mon site ne me permet pas de manger, et encore moins d’acheter un palace au Caraïbes, comme certains continuent à penser de « l’argent sur Internet »…

Purée, à quoi ça sert d’avoir des écrans qui affichent 16 millions de couleurs si les logiciels ne comportent jamais plus de 16 couleurs, aucun dégradé, aucune ombre, aucun arrondi ?

Et depuis quand, ceci :

new ccleaner interface
Est-il d’aspect plus moderne que ceci :

old ccleaner interface
C’est une plaisanterie à l’échelle mondiale, c’est ça ?
Voyez les icônes de fermeture, en haut à droite : justement, ils ne sont pas à droite car il reste une marge. Et les tailles sont disproportionnées o_O.

Honnêtement, avec le flat design chez Microsoft j’ai l’impression d’être revenu à ça :

windows 95 screenshot
C'est d'un moche : Windows, Edge, les sites de Microsoft (dont Outlook).

Mais je sais, les goûts et les couleurs, tout ça… C'est personnel est on aime ou on n’aime pas.
Bah moi je n’aime pas.

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 : «  es-tu ? », « il doit être là 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 s’élève à 20 € », « j’ai 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 !

Ah non, ce n’est pas un truc du genre « revenu de base » qui serait quelque chose égalitaire et une avancée sociale majeure.
La « compensation équitable » c’est, pour quelques députés, de la novlangue pour désigner la rémunération copie privée. C’est tout de suite moins cool, hein ?

Selon la loi actuelle, quand on achète un CD (ou un DVD, ou n’importe quelle œuvre audio, vidéo…), nous [consommateurs] avons le droit d’en faire des copies à des fin d’archive personnelles et de sauvegarde : si le CD acheté se casse, la musique ou les données ne sont alors pas perdues et on peut continuer à l’écouter. La loi autorise ça, et c’est bien.

Après on a les éditeurs qui sont venus avec des protections anti-copie sur les disques ou les fichiers. Ceci nous empêche donc de faire des copies, et nous empêche de jouir de notre droit à la copie privée. Ça, c’est un problème.

Ensuite, même si les éditeurs nous empêchent de copier le CD qu’on a acheté, ils considèrent qu’on le fait quand-même (paye ta logique, là, hein). Du coup ils ont fait passer une loi pour taxer les appareils électroniques.
Cette taxe serait justifiée car ces appareils peuvent faire tourner des musiques ou des vidéos. Les appareils concernés sont les téléphones, les cartes mémoires, les clé USB, les ordinateurs, les CD vierges, les GPS (!), les autoradios (!) et à peu près tout ce qui est électronique.
Cette taxe est est donc un racket qui considère qu’on achète un support pour y copier des données illégales. En gros, on est coupable avant même d’avoir commis une faute, qui n’en n’est d’ailleurs pas une puisque le droit à la copie privée est prévue par la loi. C’est un autre problème.

C’est cette taxe qui se nomme « rémunération pour la copie privée ».

Si je résume, toutes ces choses s’apparentent :

  1. à une double peine : on paye la taxe de copie, mais en plus cette copie est illégale et réprimandée ;
  2. à la présomption de culpabilité : taxe est payée avant l’acte de copie, et avant même de savoir si elle va être comise ;
  3. à du racket : on paye cette taxe pour quelque chose qu’on a le droit mais plus la possibilité de faire, à cause des protections anti-copie.

Triple enfoncement dans le derrière pour l’acheteur par le CopyReich.

Donc finalement, vous le voyez aussi : ça n’a rien d’équitable du tout.

Une solution serait de payer la taxe et d’accepter de la payer, mais dans ce cas qu’ils nous fichent la paix avec le partage (Hadopi & co) : on paye la taxe, on paye notre « crime » par avance, ça suffit.
Ça se nomme la licence globale : un abonnement mensuel et on peut télécharger et partager un peu ce qu’on veut. Mais pour l’industrie du disque en plastique, ça ne peut pas marcher (alors que Google, Amazon, Netflix, Apple… sont la preuve que ça marche très bien) :

la licence globale
La licence globale, par Commit-Strip

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

Le navigateur Google Chrome a une fonction pour enregistrer vos mots de passe et les envoyer en ligne pour vous connecter facilement à tous vos comptes sur tous vos appareils connectés (ordinateur, tablette, téléphone…).

Ça peut sembler séduisant comme idée.
Perso je trouve l’idée terrifiante.

Vous donneriez vos clés de maison/voiture/garage/moto/vélo/boîte aux lettres à une personne qui dit « désormais, j’ouvrirais les portes pour vous, vous n’avez qu’à m’appeler. » ?

Ici pourtant vous donnez les clés de votre vie numérique à une entreprise a but lucrative dont vous ne connaissez que le nom.

Alors oui, je sais : « vie numérique », ce n’est rien. Ce n’est pas votre vie.

Ben en fait si, figurez vous.

Votre vie numérique, c’est tout ce que vous faites sur les sites web, sur votre ordinateur, sur votre téléphone, votre tablette ou votre console de jeu.
Cela englobe donc toutes vos photos, vos posts, vos commits (pour ceux qui codent), vos vidéos, votre bibliothèque (y compris musicale et vidéo), vos discussions, vos emails, vos SMS, vos abonnements, votre historique d’achat en ligne, l’accès à votre compte en banque en ligne, votre numéro de carte de crédit (enregistré sur tous les sites où vous achetez). Et bien plus de choses encore.

Si votre vie numérique ne compte pas, laissez-moi effacer tous vos disques durs, vos comptes en ligne, vos favoris et tout le reste et dites-moi si ça vous manque. Si la réponse est oui (je suis sûr que c’est oui, sinon vous n’auriez pas d’ordinateur), alors votre vie numérique compte pour vous et vous devriez la protéger.

Utiliser un service comme Google Password Manager, c’est donner tout ça à Google pour qu’ils en fassent ce qu’ils veulent (et par ça je veux dire vraiment ce qu’ils veulent).

Et ceci compte pour Google, mais également Firefox ou Opera, qui proposent la même chose (mais c’est pas activé par défaut, ceci dit). En règle général, ne laissez pas jamais un programme — quel qu’il soit — retenir vos mots de passe.

À vous de voir, mais soyez prévenu.
Personnellement je ne ferais jamais ça.