Un billet de minigeek, ça faisait longtemps…  à l’attention de ceux qui veulent un peu personnaliser leur blog mais qui ne sont absolument pas développeurs web…

Je voulais vous parler de cette fonction intégrée à Chrome, qui n’est pas sans rappeler Firebug sur Firefox.

Dans mon billet « Customiser le thème Picture Perfect« , je m’en sers sans cesse pour donner des coups de main à mes lecteurs.

Alors Clic droit > inspecter l’élément nous fait apparaître une console :

Vous avez le code html qui apparaît à gauche, et la css à droite.

L’onglet Elements :

Alors si je veux modifier un truc concernant le bloc content par exemple, je vais sur la petite loupe en bas, et je clique sur le bloc. Ses attributs css apparaissent alors.

On est bien contents de voir alors quelle partie de la css modifier pour changer un truc. Mais plutôt que tâtonner alors que du monde est peut-être en train de visiter votre site, l’outil possède un deuxième intérêt majeur : la possibilité de modifier la page « en live » sur votre navigateur, sans changer les fichiers, donc vos visiteurs ne voient pas que vous bidouillez.

Vous double cliquez sur l’attribut à modifier et entrez de nouvelles données, votre page se modifie au fur et à mesure :

Vous pouvez aussi ajouter de nouvelles données de css en cliquant près du } de fin, et en tapant le début de l’attribut, il vous propose différentes choses par autocomplétion :

Tapez sur entrée, et vous pourrez entrer la valeur que vous voulez donner à l’attribut.

Si comme moi vous avez tendance à faire des sottises parce que vous n’êtes pas un pro du code, il va vous dire de suite si c’est valide ou non, comme là ou j’ai tapé un padding de -20px :

Avec les petites cases sur la droite, il est possible de désactiver un attribut, en visualisant tout de suite l’effet sur la page.

Vous avez aussi la possibilité de modifier le code html en faisant clic droit > edit as HTML. Je me sers peu de cette fonction parce que le code diffère beaucoup entre ce que vous avez dans les fichiers php et le code final. Si j’ai de grosses modifications à faire dans le code, je préfère les tester en local sur mon pc (sur wampserver, que je trouve leeeeeeeent en ce moment)

L’onglet Resources :

Vous pouvez accéder à tout ce qui est utilisé sur votre site : code HTML bien sur, mais aussi les images qui se chargent avec la page (on découvre ainsi comme je viens de le faire que certaines images se chargent, de la pub contenue dans le thème, ralentissent donc le chargement de votre page, mais ne s’affichent pas, inutile donc de les garder, j’ai tout viré…)

Et le point sympa, c’est que vous accédez à toutes les CSS qu’utilise votre thème. Quand je dis toutes, c’est que certains plugins ont leur propre CSS. Je constate ainsi que 5 fichiers de css sont nécessaires pour afficher ma page. Je vais donc essayer de les regrouper dans mon fichier css de base, cela accélèrera un peu le chargement.

L’onglet Page Speed : c’est un onglet que j’ai du rajouter.

Il va vous permettre d’identifier ce qui ralentit le chargement de votre page. J’en ai déjà parlé ici. Il vous guide bien pour accélérer votre chargement.

Je m’en sers régulièrement, au fur et à mesure de l’évolution de mon blog, je reteste régulièrement pour voir ce qui coince. Je suis assez contente, j’ai réussi à descendre le chargement de ma page à 3,8s sur chrome (j’ai d’ailleurs viré l’extension skype qui me ralentissait partout……)

Petit outil qui m’est devenu indispensable

Bonjour,

Alors, j’avais préparé cela il y a quelques temps déjà, avec l’aide précieuse de mon ami @fetard. On m’a quelques fois reproché un manque de lisibilité de mes articles écrits. C’est vrai que le violet clair sur le noir, c’est pas extraordinaire pour la lisibilité. Par contre, la couleur sombre du fond, c’est top pour faire ressortir les photos. Cruel dilemme. Je publie 95% de photos, donc je sacrifiais mes quelques articles écrits au profits de mes photos.

Puis, j’ai eu une idée, ce doit pas être si compliqué à mettre en place, une css qui ne s’applique qu’à certaines catégories. Je sais qu’il existe des tags spécifiques dans le code pour s’appliquer juste sur une catégorie, donc je cherche un plugin, rien ne correspond. Puis je tombe sur cet article (en anglais) : Change CSS Styles with Different Categories in WordPress. Je suis pas très douée en anglais, mais c’est exactement ce qu’il me faut ^^

Alors, petite différence avec ce bout de code, je ne veux pas mettre en place plusieurs css correspondant chacune à une catégorie, mais une seule css différente de celle de base pour toutes les catégories où je cause beaucoup.

Hop, @fetard a le malheur de traîner sur twitter et il est réquisitionné pour coder ^^

Donc voilà ce que je vais ajouter dans mon header.php :

<?php
if(in_category(array(‘humeur’,'pour-la-nature’,'humour’,'mode-minigeek’,'contes-et-legendes’)))
{
?>
<link rel= »stylesheet » href= »<?php bloginfo(‘template_url’)?>/cat.css » type= »text/css » media= »screen » />

<?php } ?>

Petit souci, déjà, je pense que wampserver, dont je me sers en local pour faire mes tests, doit avoir un genre de système de cache, des moments, les modifications n’apparaissent pas de suite. Des moments tout marche bien quand j’éteins le pc le soir, et quand je rallume le lendemain, j’ai un gros plantage.

Donc mon principal problème est venu de ma page d’accueil, qui prenait la css modifiée, alors que non, je la trouve très bien comme elle est !

-Hop, allo fetard ?
-Yep, remplace la première ligne par ça :

<?php
if((in_category(array(‘humeur’,'pour-la-nature’,'humour’,'mode-minigeek’,'contes-et-legendes’)))&&(!is_home()) )
{
?>

Et ça marche ! Donc normalement, vous lisez cette page avec des couleurs beaucoup plus claires, je vais sans doute faire d’autres modifs, mais pour l’instant ça me plait comme ça ^^

J’ai changé d’autres bricoles, à vous de voir, mais c’est pas grand chose

Bonjour,

Quand on possède un vieux PC comme moi, même quand il a été boosté, il a besoin parfois d’un coup de nettoyage. Pour cela, mon principal allié reste CCleaner, il permet de choisir sélectivement ce que vous voulez nettoyer par application ou dans votre OS (Operating Système, genre windows ), permet de nettoyer le registre, et  de désinstaller tout ce qui vous plait pas, beaucoup plus rapide d’ailleurs que d’aller dans tableau de configuration blablablaa…

Un petit plus qui me plait bien, la possibilité de désactiver des clés au démarrage… Vous avez remarqué que quand vous achetez votre pc, il se lance en 7secondes chrono, puis, au fur et à mesure que vous installez des trucs dessus, met de plus en plus de temps. C’est que les programmes s’installent au démarrage de votre machine… Sales bêtes… alors si comme moi, vous ne voulez pas que msn se lance systématiquement quand vous allumez le pc (ce qui ne vous empêche pas de le lancer plus tard, il mettra juste 3secondes de plus), ainsi que votre gestionnaire Tomtom parce que votre GPS vous le connectez pas tous les jours à votre PC, enfin bref, toutes ces petites choses qui rajoutent des secondes au démarrage, pas beaucoup, mais 1+2+1+… ça finit par mettre 3 plombes pour démarrer… Hop, vous désactivez les clés qui ne vous intéressent pas, et ça va beaucoup plus vite !

Voilà, mais je commence aussi à manquer de place niveau mémoire disque. Lorsque j’ai grillé ma carte mère il y a deux ans, le réparateur m’a mis un deuxième DD, à la double capacité du premier. Dessus il a transféré tout mon dossier photo, qui était déjà énorme. Mais en plus, lorsque j’ai voulu aller y jeter un oeil, j’ai découvert qu’un des dossiers, le plus gros évidemment, avait été doublé, mais pas dans son intégralité… Bon, bref, pas bien grave, mais ayant peur de perdre des photos, je n’y ai pas touché depuis.

Aujourd’hui, je décide donc de transférer un dossier de « Mes images » sur ce DD de sauvegarde, histoire de faire de la place (j’étais à plus de 90% de remplissage). Mais depuis deux ans, j’en avais déjà mis là bas, et copié collé ou coupé collé, pas toujours fait bien attention (mea culpa)… Donc bon, je me suis demandé sil existait des logiciels capables de traquer les doublons. Mais attention, les vrais doublons, je retouche beaucoup mes photos et j’aime bien garder mes originaux, en grande taille, non retouchés, et je veux pas que la retouche et l’original soient supprimés.

Sur twitter (♥) j’ai eu trois réponses rapides (et gratuites):

Picasa3 Beta : logiciel de retouche d’image de Google, sympa, mais je le trouve lourd, et j’arrive à obtenir les mêmes résultats avec Gimp, ce pourquoi je ne l’ai jamais gardé dans mon pc… Mais cette version intègre donc la chasse aux doublons. D’après ce que je lis, on supprime les doublons d’un clic.

Glaries Utilities : logiciel d’optimisation, tout à fait dans le genre de CCleaner, qui intègre aussi une fonction de détection de doublon. Intéressant certes, mais j’ai déjà ce qu’il faut pour 80% des fonctions de ce logiciel. Et la version gratuite fait tout de même 8Mo.

Double Killer : hyperléger (392Ko compressé), ne nécessite pas d’installation, juste dézipper et hop. vous pouvez même le mettre sur une clé USB ! et il fait juste ce que je demandais : traquer les fichiers en double. Bon, l’interface est en anglais, mais ce n’est pas insurmontable ! Vous allez dans Options, vous désignez le dossier à scanner avec « folder », et ensuite Run ! je suis sure que vous avez tout compris jusque là ! J’ai carrément scanné mon dossier utilisateur perso, alors ça a pris un peu de temps, mais bon, en tout et pour tout, j’ai libéré un peu moins de 20Go…. J’avais vraiment un problème avec mes doublons ^^ Bon, je vous avoue qu’avant de lancer la suppression des « last dupes » (allez pas tout supprimer en faisant « check all files », hein, c’est définitif !) j’ai quand même créé un point de restauration Windows !

Voilà, je suis bien contente, tout roule, et c’est bien plus net maintenant

Bonjour !

Alors mes lecteurs, je vais vous apprendre un truc, le geek est susceptible ET pointilleux…

Je vous parlais hier de mon changement de navigateur, j’avais abandonné le renard… Et là, on me fait remarquer (sur google +, jouet typiquement geek) que Firefox n’est pas un renard mais un panda ???

Alors pour moi, un panda, c’est ça, l’emblème du wwf :

Et je m’excuse, mais « FireFox », ça fait en français « renard de feu », et franchement, ça a pas une gueule de panda :

Vous trouvez pas que ça ressemble franchement plus à un renard qu’à un panda vous ?? Et ben figurez vous que le mot Firefox fait partie de ces faux amis en langue étrangère, et en fait il s’agit du petit nom donné par les chinois au panda roux…

Pour bien affirmer son identité visuelle, la fondation Mozilla a adopté deux pandas roux, et si vous allez sur Firefoxlive, vous pourrez voir une webcam des deux peluches vivantes (enfin, pas à l’heure où je tape ces lignes parce que figurez vous qu’il fait nuit en Amérique…)

Enfin voilà, donc en fait, vous qui naviguez sur firefox, vous utilisez donc bien un panda et non un renard…

Mais le geek va plus loin…

Il existe donc des faux-amis dans les langues étrangères, j’en ai fait l’expérience lors de vacances en Espagne, je parle l’espagnol comme une vache roumaine perdue en Oklahoma… Et si je chante Ska-P à tue tête, ça doit être un beau charabia… Donc, pendant toutes mes vacances, si on m’adressait la parole, je répondais inlassablement « no comprenn’do, soy francesse », ce qui signifie littéralement « je ne vous entends pas, je suis française »… no entiendo aurait voulu dire ce que je voulais, « je ne comprends pas » et non pas que j’étais sourde…
Dans le même genre, vous avez un petit animal symbole de toute un génération de geeks, le manchot… Traduit en anglais par penguin… Encore un terme pour vous enduire avec de l’erreur, et un linuxien peut tenter de vous arracher les yeux avec une petite cuillère pour ça, parce que « non non et non, Tux n’est pas un pingouin, ça va pas non, vous avez jamais vu de pingouin ou quoi ? en plus ils font même pas partie de la même famille, le manchot fait partie des sphéniscidés , et le pingouin des alcidés et vivent pas sur le même hémisphère, alors viens plus le traiter de pingouin mon Tux ! « 

Alors, vous allez sur wikipédia, et vous vous dites que c’est quand même pas trop de votre faute, manchot se traduit comme pinguïn en néerlandais, pingüino en espagnol, Pinguin en allemand, pinguino en italien, penguin en anglais, пингвин (pingvin) en russe, ou encore pingüim en portugais. :rolleyes:

Ah oui, autre chose, le pingouin vole, et pas le manchot…

Pointilleux le geek je vous dis, surtout que ceci ne change strictement rien, puisqu’il ne s’agit que du logo d’un logiciel, hein ? Mais vous êtes prévenus maintenant !

Alors à quand « Apple n’est pas une pomme » ?

Je navigue depuis très longtemps avec le renard, comprenez Mozilla Firefox, mais là, ça ne devenait plus possible entre nous. Depuis la dernière MAJ, non seulement il avait vraiment perdu de la vitesse, mais en plus, j’avais droit à facile 4ou 5 plantages par heure. Même s’il restaurait la session, rien n’est plus agaçant que ce genre de plantages intempestifs…

Alors j’ai pris la décision, unilatérale je l’accorde, de le quitter.

Et comme remplaçant, évidemment, le seul qui me venait en tête, c’était Google Chrome…

Je l’avais essayé lors de ses débuts. Manquaient en fait ce qui faisait tout le charme de Firefox, les extensions.. Il en existait quelques unes, mais bon, largement insuffisant pour moi. J’avais souvent vu passer des tweets qui disaient que c’était devenu nickel, mais bon, je n’avais pas lieu de le charger, FF, bien qu’un peu lent, me convenait parfaitement. Mais là…

Donc go, je charge la bestiole, je lance et ça va vite dis donc, je m’étais fait la réflexion à l’époque, mais bon, sans extension, FF va vite aussi, je ne me laisse pas impressionner.

Ah, déjà, un lien vers les extensions dispo. Voilà ce qui va déterminer si Chrome devient mon navigateur par défaut ou non. C’est peut-être bête, mais j’aime mon petit confort.

Donc, L’Indispensable, la première que j’ai chargé : LastPass. J’ai tellement de sites différents, de mot de passes biscornus, que je ne pourrais plus m’en passer. Faudra que je regarde d’ailleurs un jour si on peut imprimer ça, ce serait très utile…

Ensuite, en deuz’, ABP, bloque les publicités sur internet, la navigation est tellement plus fluide. Sérieusement, je sais que certains vivent grâce aux pubs, mais on en bouffe en permanence de la pub, on est littéralement agressés sur certains sites. Sur mon Blackberry, il faut savoir que certaines pages plantent uniquement à cause de ces pop-ups, gifs clignotants et autres joyeusetés qui ornent vos sites. Résultat, je n’ai pas lu la page. Je ne suis pas sûre que le fondateur du site aie vraiment voulu ça, mais voilà le résultat.

Puis, mon reader, ça devrait être facile, je me sers de Google Reader, et en effet, nous avons une extension pour cela !

Ensuite, mon côté mini-geek me dit que sans Firebug, je ne vais pas m’en sortir sur mon blog… Surtout que j’ai en prévision un autre site pour bientôt… Et Firebug, ça fait très Firefox, vous trouvez pas ? eh bien non, ça existe ! Bon, il doit exister d’autres extensions propres à Chrome qui doivent aussi bien faire le boulot mais bon, les habitudes…

Pour finir, Twitter. J’ai un peu plus galéré là, parce que je cherchais un truc genre Echofon, et qu’en fait, Tweetdeck fait très bien l’affaire. En fait au lieu d’une petite case ouverte en bas, vous ouvrez un onglet (d’ailleurs, je l’ai rajouté à ma barre de favoris). Mais bon, bien configuré,  Tweetdeck est très sympathique, il me permet entre autres de suivre mon actualité sur Facebook (nouveaux messages sur mon mur par exemple qui apparaissent dans ma colonne « moi », mais je peux aussi ajouter une colonne FB, le seul truc c’est que des colonnes, j’en ai déjà 4, et ça tient pas en largeur, alors FB… ) (non non, ce n’est pas de la mauvaise foi ^^ )

Voilà, il y a quelques bricoles auxquelles je ne suis pas encore habituée, le fait que tweetdeck ne poste pas en appuyant sur entrée par exemple, tous mes tweets comprennent une ligne vide si je fais pas attention !

Un truc aussi qui m’a joué un méchant tour… Sur Firefox, si je surligne avec la souris, puis déplace, cela fait un copié collé. Sur Chrome, ça coupe et colle… Et je me sers pour ce blog d’un champ personnalisé pour la miniature en page d’accueil. J’ai l’habitude de surligner l’adresse de la photo que je mets, et de la déplacer jusqu’à la case du champ personnalisé pour que la miniature se mette en place… et bien sûr, premier jour, je fais ça, sauf que la photo n’apparaissait plus dans le billet… Ma demoiselle était bien moins attirante en noir !

Et sinon, ça va tellement plus vite que c’est très confortable…

Bonne journée