Je vous ait montré comment rooter cette tablette d’Acer et comment virer les applications pré-installées grâce au root, voici désormais comment installer Xposed, qui permet à son tour d’installer des centaines de petits modules intéressants pour customiser un Android rooté.

Note importante : les mêmes avertissements que pour le rootage s’applique ici, à savoir que faire n’importe quoi peut tuer votre appareil. Si vous suivez ce que j’écris ici, vous vous en sortirez bien. Dans tous les cas, vous prenez l’entière responsabilité de tout ce que vous faites.

Xposed pour Lolipop et Marshmallow est une application framework qui offre de nouvelles possibilités pour d’autres applications, non permises par Google. Seule, l’application Xposed ne sert à rien, mais il permet de faire tourner d’autres applications.

La procédure est très similaire au root : en plus d’installer une application sous la forme d’un APK, il faut connecter la tablette à son PC, lancer une commande et redémarrer la tablette, installer manuellement un fichier Zip depuis la carte SD et redémarrer.

Prérequis

Premièrement, il faut télécharger deux fichiers donnés en bas de ce tuto ou sur cette page officielle.
Le fichier XposedInstaller doit être installé sur la tablette. L’installation d’applications tierces doit être autorisée et il est conseillé à ce stade d’activer les options des développeurs et le débogage USB (il y en aura besoin par la suite de toute façon).
Le fichier xposed-*-sdk-*.zip doit être placé sur votre carte SD externe (pas dans la mémoire interne du téléphone : chiffrée, on ne peut y accéder depuis le recovery).

Deuxièmement, sous Windows, assurez-vous d’avoir installé les 3 programmes qu’on avait déjà eu à installer/dézipper pour le root : ADB-Setup.exe, AcerDrivers.exe, IntelAndroid-FBRL.zip (liens sur cette page).

Procédure

Branchez votre tablette avec le débogage USB activé à votre ordinateur et sur ce dernier, lancez le fichier launcher.bat dans le dossier IntelAndroid-FBRL.

Si tout va bien, l’affichage sera en bleu-turquoise (et pas en rouge).
Tapez « ACCEPT », puis pour le choix de la méthode du root, choisissez « cwm.zip » en tapant « 5 », puis pour le second choix, prenez « T4 » en tapant « T4 » et en validant.

La procédure de root recommence. Le but étant d’utiliser CWM pour installer le framework Xposed.
Une fois dans le recovery, faites comme lors du root, mais choisissez votre fichier xposed-v80-sdk21-x86.zip et installez-le.

Quand c’est fait, sortez des menus, redémarrez et c’est bon. Maintenant vous pouvez ouvrir l’application Xposed Installer.

En cliquant sur la ligne « Framework », vous pouvez lire en vert « Xposed framework version 80 is active » ce qui est signe que le framework est installé.
Pour installer un module sous Xposed, allez dans la ligne « Téléchargements » et recherchez un paquet.

Personnellement je recommande les paquets suivants :

  • BootManager (3.7.1), pour bloquer le démarrage automatique des applications qu’on ne souhaite pas voir lancé au démarrage ;
  • GravityBox [LP] (5.3.8) (LP=Lolipop), un must-have qui permet de tweaker beaucoup de choses dans l’interface d’Android, comme ajouter le redémarrage ou la capture d’écran dans le menu d’extinction, ou centrer l’heure sur la barre des tâches, etc.
  • XPrivacy (3.6.19), pour restreindre les informations auxquelles les applications ont accès.

Il suffit de faire une recherche dans la liste, de les sélectionner, puis d’installer la dernière version depuis l’onglet « versions ». Ensuite, revenez dans la page principale de Xposed, allez sur Modules et cochez les cases des modules à activer et enfin redémarrez la tablette pour prendre en compte l’activation. Ceci étant fait, les modules sont maintenant opérationnels.

Les fichiers à télécharger

Dans mon article expliquant comment désactiver facilement les applications Android, je donnais aussi une liste des APK système qu’on peut désactiver, et avec elle leur fonction au sein d’Android. L’article a presque 3 ans et était faite pour Android 4.1, voici venu le moment pour une mise à jour.
Je prends ici comme base la tablette Acer Iconia 10, sous Android 5.0.2 qui est rootée.

La tablette n’ayant pas beaucoup d’applications tierces (ce qui est une bonne chose), la liste suivante contient surtout des composants d’Android qui peuvent être désactivés.

Quelques notes avant de commencer, par rapport à l’article pour Android 4.1 :

  • sous Android 4.x, les APK se trouvaient dans le dossier /system/app. Sous Lolipop, il y a deux dossiers : /system/app et /system/priv-app. Les deux fonctionnent de la même manière.
  • un autre changement est que ces dossiers ne contiennent plus les APK et les .odex, mais des dossiers qui eux contiennent les APK et les .odex. La méthode reste la même, mais il faut « chmoder » le dossier entier à 000.

N’oubliez pas : si vous voulez désactiver une application système, il faut d’abord aller dans les préférences > applications, puis réinitialiser votre application en supprimant les mises à jours.
De plus, si vous désactivez par exemple Google Chrome, il sera tout à fait possible d’aller sur le play Store et d’installer Chrome. Ceci est donc également une méthode de transformer les bloatwares en applications « normales ».

À vous de voir si vous avez besoin des applications en question, en ce qui me concerne, les APK à désactiver dans /system/app sont :

  • AcerFreehandCapture : un utilitaire pour réveiller la tablette en utilisant la caméra.
  • AcerGallery : un gestionnaire d’images d’Acer.
  • AcerNidus : un gestionnaire de rapport de bugs pour Acer. Un mouchard qui récolte des informations sur votre téléphone.
  • BasicDreams : un fond d’écran animé.
  • Books : Google Play Livres
  • Chrome : Google Chrome. J’utilise Firefox.
  • CloudPrint : Un outil pour imprimer un document en passant par le Wifi.
  • Drive : Google Drive.
  • Email : Le client Email par défaut d’Android (j’utilise K9-Mail)
  • Exchange2 : Le client Exchange, pour utiliser la messagerie de Microsoft.
  • FaceLock : L’outil pour déverouiller l’écran à coup de grimaces.
  • FloatCalculator : ↓
  • FloatCalendar : ↓
  • FloatGadget : ↓
  • FloatText : → Ces 4 applications sont des méta-paquets qui permettent d’avoir la calculatrice, le calendrier, etc. en mode « flottant », c’est à dire en tant que que widget par dessus les autres applis.
  • Gmail2 : Gmail (pas besoin)
  • GoogleKorean : ↓
  • GooglePinyin : → des paquets pour le coréen et le chinois (?) dans le clavier Google.
  • GoogleTTS : Le outil de reconnaissance vocal.
  • GoogleTranslate : Google Traductions.
  • Hangouts : Hangouts (ça va, c’est pas trop dur à deviner)
  • HoloSpiralWallpaper : Un autre fond d’écran animé.
  • LiveWallpapers : → Le gestionnaire de fond d’écrans animés. Je désactive ça car je n’utilise pas. Même si c’est joli, ça consomme pas mal de batterie.
  • LiveWallpapersPicker : ↑
  • Maps : Google Maps.
  • Music2 : Google Play Musique
  • Newsstand : Google Kiosque (pour les magasines et les journaux via Google Play)
  • NoiseField : Un autre fond d’écran.
  • PartnerBookmarksProvider : Des outils marketing/partenaires de Google
  • PhaseBeam : Un autre fond d’écran.
  • PhotoTable : Un gestionnaire d’images, pour utiliser la tablette comme écran à photos
  • PlayGames : Google Play Jeux
  • PlusOne : Google Plus
  • PrintSpooler : Un autre outil pour l’impression depuis la tablette.
  • ScreenGrabber : Un outil pour faire des captures d’écran.
  • TouchWakeAppSettings : un utilitaire pour réveiller la tablette depuis l’écran
  • Videos : Le gestionnaire de vidéos. J’utilise VLC.
  • VisualizationWallpapers : Un autre fond d’écran.
  • YouTube : Youtube (je préfère le désactiver ici et l’installer depuis le Play).
  • talkback : Le moteur de synthèse vocal de Google.

Les APK à désactiver dans /system/priv-app sont :

  • AcerBlueLightFilter : un filtre à lumière bleue (style "Redshift"). Je préfère l’application CF-Lumen.
  • AcerClock2 : Un widget d’Acer, celui de la pendule.
  • AcerOOBE3 : Un outil d’Acer qu’on a quand on allume la tablette pour la première fois.
  • AndroidForWork : Un outil pour utiliser la tablette pour travailler (je ne sais pas trop ce que ça fait).
  • DemoVideo : Une vidéo de démo (faut vraiment un APK pour ça ?)
  • EZNote : Une application de prise de notes. Je préfère color-notes.
  • GooglePartnerSetup : encore des trucs de google et ses partenaires
  • Tag : Le truc pour faire du NFC.
  • Velvet : La barre Google en haut (j’utilise pas ça).
  • astro : Un gestionnaire de fichiers pré-installé.

Désactiver tout ça à la main dans Root Explorer peut être assez chiant.
Je préfère donc faire ça en ligne de commandes depuis mon l’ordi (sous Linux Mint).
Il suffit d’activer les outils de développeurs et de brancher votre tablette en USB à votre ordinateur. Sous Linux Mint, il faut installer le paquet android-tools-adb. Ensuite, lancez les commandes suivantes dans un terminal :

adb shell

Si votre ordinateur reconnaît la tablette, cette dernière vous demande de confirmer l’accès.
Le shell d’Android est maintenant disponible sur l’ordinateur. Ne faîtes rien sans savoir ce que vous faîtes : vous pourriez rendre la tablette inopérante.

Mettez-vous en super-utilisateur :

su root

(Validez l’accès root avec super-su)

Pour faire les modifs de chmod dans les dossiers, la partition système doit être remontée en mode lecture-écriture :

mount -o rw,remount /system

Allez dans le dossier /system/app :

cd /system/app

Et là vous chmodez les applications que vous voulez d’un seul coup (la commande suivante les chmode tous, à vous de faire le tri — de toute façon rien n’est perdu si vous vous trompez) :

chmod -R 000 AcerFreehandCapture AcerGallery AcerNidus BasicDreams Books Chrome CloudPrint Drive Email Exchange2 FaceLock FloatCalculator FloatCalendar FloatGadget FloatText Gmail2 GoogleKorean GooglePinyin GoogleTTS GoogleTranslate Hangouts HoloSpiralWallpaper LiveWallpapers LiveWallpapersPicker Maps Music2 Newsstand NoiseField PartnerBookmarksProvider PhaseBeam PhotoTable PlayGames PlusOne PrintSpooler ScreenGrabber TouchWakeAppSettings Videos VisualizationWallpapers YouTube talkback

Et dans le dossier /system/priv-app :

cd /system/priv-app
chmod -R 000 AcerBlueLightFilter AcerClock2 AcerOOBE3 AndroidForWork DemoVideo EZNote GooglePartnerSetup Tag Velvet astro

Et c’est bon.
Plus qu’à redémarrer :

reboot

La tablette va redémarrer, votre session shell va être déconnectée et tout est bon : au démarrage, les applications seront supprimées.

Après mon premier article sur les astuces en CSS, puis le second, une autre astuce pour des menus responsives (incluse sur cette page), un autre post sur les choses à éviter ainsi que sur les préfixes devenues inutiles, quelques idées comme les couleurs relatives et quelques autres, voici le temps d’un autre article sur le sujet.

Cacher un élément avec une animation

Le but ici est d’avoir un élément HTML (un popup par exemple) et de le cacher après quelques instants en l’animant. Le principal problème étant que les propriétés « display: none » et « visibility: hidden » sont impossibles à animer, et il faut donc contourner tout ça. Mon astuce est inspirée de cette page.

On va se servir de l’opacité de l’élément. Le problème, c’est que si on n’utilise que ça, l’élément sera toujours là mais juste invisible : il occupera toujours de la place et masquera ce qui se trouve dessous (si c’est un formulaire ou un lien qui se trouve en dessous, ils seront inaccessible). On va donc réduire la hauteur de l’élément à zéro et masquer tout ce qui dépasse : l’élément ne mesurera plus rien.

L’élément à cacher est ici le « #popup ». Il se cachera après 3 secondes et l’animation durera 1 seconde.

Code CSS :

#popup {
    animation: disapear 1s 3s;
    animation-fill-mode: forwards;
    height: 100px;
    opacity: 1;
    overflow: hidden;
}

@keyframes disapear {  
    100% {
        height: 0;
        opacity: 0;
    }
}

Le fonctionnement des animations est simple : on dit qu’un élément HTML doit être animée avec une animation bien précise, et plus loin dans le code on va déclarer ladite animation : c’est le rôle du « @keyframes disapear », où on décrit l’avancement de l’animation. Ici, seul l’avancement à 100% est déclarée : l’état à 0% correspond au CSS déclaré « normalement », mais il est possible de déclarer des états intermédiaires pour chaque pourcentage.

La ligne « animation-fill-mode: forwards; » est très importante : sans elle, l’animation une fois terminée replacera l’élément dans son état initial. Ne pas mettre cette ligne permet de faire des animations dont les effets ne durent pas.

Les démos de codes sont ici :

Mettre une ligne de texte sur une seule ligne et masquer ce qui dépasse

Ici, on veut qu’une ligne de texte ne retourne pas à la ligne. On souhaite également masquer ce qui dépasse. Bien-sûr, on connaît la méthode classique avec seulement deux propriétés :

#element {
    white-space: nowrap;
    overflow: hidden;
}

Sauf que la coupure n’est pas belle. L’astuce ici est d’ajouter la propriété CSS3 « text-overflow », qui permet de choisir ce qui se passe à la coupure. Je choisis toujours « ellipsis », qui va ajouter des points de suspensions avant de couper la ligne.

Notez qu’il faut appliquer le « overflow: hidden » à un élément qui possède une taille définie (ici, je l’applique au bloc parent, dans lequel on met un bloc enfant).

On obtient alors :

#parent-block {
    overflow: hidden;
    text-overflow: ellipsis;
}

#block {
    white-space: nowrap;
}

Par ailleurs, pour que ça marche également sur les éléments <pre> et <code> et dans Firefox, ajoutez ceci : pre, code { white-space: pre-wrap; }.
Aussi, faites attention car cet effet masque du texte. Si c’est un résumé suivi d’un lien « lire la suite » ce n’est pas grave. Mais si c’est une ligne de code à copier, ça devient embêtant.

Ceci peut devenir très intéressant avec les flexbox, où les éléments ont une taille variable, et si l'on veut par exemple que les éléments (de liste par exemple) restent sur une seule ligne.

(source & liens)

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.

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 !

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…