Et si Google fermait mon compte (v2015)

Il y a deux ans, j’écrivais cet article : et si Google fermait mon compte ?
Ça faisait suite, dans une certaine mesure, à l’annonce d’Opera de fermer quelques mois plus tard leur service mail : je m’étais demandé quel impact pour moi aurait la fermeture d’autres services web que j’utilisais à l’époque, principalement Google.

Depuis la fermeture de My-Opera, j’ai effectivement pris quelques mesures. Je pense être devenu moins dépendant de services externes. Il faut dire que la fermeture de mon compte email principal m’a beaucoup fait chier, mais d’un autre côté ça m’a permis d’apprendre beaucoup de choses.

Voici mon retour d’analyse, deux ans après cet « incident », et la mise aupoint concernant ma dépendance vis à vis des autres « grands sites ».
Toujours la même notation : 0/5 correspond à « je m’en fous totalement » et 5/5 à « je suis vraiment dans la merde ».

Si Google fermait mon compte, en 2015 :

  • Gmail. Je n’utilise plus GMail. Mes comptes utilisateurs sur les autres sites sont sur une adresse email chez moi. Note : 0/5.
  • Google Plus. Note : 2/5. J’utilise G+ pour trouver des infos intéressantes plus qu’autre choses. Je pourrais m’en passer, même si ce serait dommage.
  • Google Documents. Note : 0/5. J’utilise exclusivement Libre Office et je partage les fichiers qui sont à partager via mon site ou via email.
  • Youtube. Mon compte Youtube est fermé depuis quelques temps. Je n’ai plus de compte Youtube. Note : 0/5.
  • Android. Note : 1/5. Il faut un compte Google pour télécharger des applications sur Google Play et utiliser diverses fonctionnalités d’Android. J’ai appris à utiliser Android sans compte Google. Si mon compte était fermé, je mettrais ces connaissances à exécution (ce n’est pas le cas actuellement). Je ne sais pas en revanche ce que Google peut encore faire si on n’est pas connecté à son compte. D’où l’intérêt d’utiliser un téléphone avec un OS Libre, mais ce n’est pas gagné. Je pense que je verrais le moment venu, en espérant que ça arrive le plus tard possible. Mais quand ça arrivera je ne serais pas paniqué, c’est déjà ça.
  • Google Maps, Google Search, Google Traduction : tout ça j’utilise parfois aussi. Mais il n’y a pas (encore) besoin de compte pour utiliser.


C’est tout pour Google.

Pour les autres sites :
Paypal, eBay, Amazon, ça me ferait un peu chier parce que j’achète régulièrement en ligne, mais je peux m’en passer : il y a d’autres sites et d’autres moyens.
Microsoft/Skype, Facebook, Yahoo : totalement rien à faire. Je n’utilise pas de XBox, et Facebook me sert un peu à rien. Mon compte Yahoo, je ne sais même plus ce que c’est…
Twitter : je l’utilise de temps à autre en version web pour interagir avec ceux qui suivent mon blog via Twitter (le RSS de mon blog est reposté sur Twitter). Ça serait dommage si ça vienne à être supprimé, mais bon, tant pis : ça m’empêchera pas de poster et ça n’empêchera personne de lire mon site quand même si elle le souhaite vraiment.
Tumblr : j’aime bien Tumblr, le site est sympa et on trouve pas mal de monde. Mon site n’est plus dupliqué sur Tumblr depuis un moment car je l’utilise pour d’autres raisons maintenant, plus orienté jeux-vidéos, manga, pokémon… Là aussi, ça m’embêterait que le site ferme où que mon compte soit fermé, mais ça ne sera pas la fin du monde non plus.

Je n’ai autrement pas de compte « Cloud » grand public, ni de compte d’écoute de musique en ligne (SoundCloud, LastFM, Deezer…).

Bref, je suis un peu partout sur Internet, mais mon point central c’est mon site, mes noms de domaines. Je n’ai pas encore de quoi m’auto-héberger (ou même devenir mon propre FAI) pour garantir une bonne et vraie indépendance, mais si ça venait à arriver pour des raisons politiques, je suppose que le web ne sera plus un lieu digne d’intérêt pour partager quoi que ce soit. Je serais alors passé sous Tor ou Freenet depuis longtemps.

Ce ne sont pas la fermeture de mes comptes sur les réseaux sociaux qui me font peur en tout cas.

Le streaming 4K menacé par les royalties sur les codecs

Netflix, entre autres, qui utilise le codec H265 pour diffuser de la vidéo en Ultra-HD (4K), est ciblé par HEVC Advanced, pour leur faire payer des droits d’utilisation du codec.

Je me marre.


Bah comment dire : c’est bien fait et ça leur apprendra d’utiliser des technologies non libres ?

Parce que ça fait des années, même des décennies, qu’il existe de très bon codecs et conteneurs libres d’usage et de droits pour l’audio et la vidéo : Vorbis, Theora, WebM (reprise du Matroska, lui aussi libre), VP8/9, Opus.

Les formats ne sont pas ce qui manque. Et s’ils peuvent très bien ne pas être aussi bon que le H265, je pense que ça coûtera bien moins cher à Netflix et les autres d’investir dans l’évolution de ces codecs libres que de payer pour avoir le droit de se servir du H265. Et en prime, ces évolutions profiteront à tout le monde, comme ces codecs pourront profiter à eux, gratuitement.

Il faut croire que personne n’apprend jamais : ça fait des années que les ayants droits du H265/H264 et même aussi ceux du MP3 et avant cela ceux du format GIF font ce qu’ils peuvent pour imposer des royalties quand on utilise leur codecs.

[CSS] La spécificité des sélecteurs

En CSS, il y a les sélecteurs. Avec le CSS v3, il y a maintenant beaucoup de sélecteurs, et vous trouverez pas mal de ressources à ce sujet. En revanche, ce dont on n’entend pratiquement jamais parler, c’est la spécificité des sélecteurs. Même les sites de référence comme OpenClassRooms ne semble pas en parler dans son tutoriel sur le HTML/CSS.

La spécificité est pourtant importante, car elle intervient au moment où le navigateur doit appliquer les CSS à un élément de la page.


Spécificité ?


Considérons ce code :

HTML :
<body>
Mon texte
</body>

CSS:
body { color: red; }
body { color: green; }

Quelle sera la couleur de la page ?
La page sera évidemment verte, car le navigateur va prendre en compte la dernière déclaration effectuée.

Maintenant, plaçons des paragraphes dans la page avec un lien :

<body>
Mon texte
<p>Mon paragraphe</p>
<p>Mon paragraphe avec <a>un lien</a></p>
</body>

Avec le code ci-dessus, les paragraphes et le lien seront également en vert (en fait non pour les liens : les styles internes du navigateur font qu’ils sont bleus si on ne dit rien ; voir plus bas) : la couleur est en effet héritée de l’élément parent de <p> et de <a>.
Si on veut donner une couleur particulière aux éléments on fait ceci :

CSS:
body { color: red; }
p { color: green; }
a { color: blue; }


Ici, le texte sera bleu dans le lien, en vert dans le paragraphe et en rouge partout ailleurs dans le corps du document.
La couleur est bien héritée, mais elle est écrasée si on la déclare de nouveau dans un élement qui est plus proche (p est plus proche de a que le body).

Simple non ? Bien.


Maintenant, prenons le code CSS suivant :

CSS:
body p { color: red; }
p { color: green; }

Quelle sera la couleur du paragraphe ? Indice : ça n’est pas vert !
Ici, la première déclaration veut dire « tous les paragraphes dans le corps du document doivent être en rouge » et la seconde déclaration « tous les paragraphes doivent être en vert ».

Alors pourquoi le paragraphe est rouge et pas vert ?

Le paragraphe est rouge parce que le sélecteur « body p » est plus spécifique que le sélecteur « p » tout seul. Il est en effet plus précis de dire « tous les paragraphes dans le corps du document » que « tous les paragraphes ».
Or, pour le navigateur qui va afficher la page, la spécificité est prioritaire sur l’ordre des déclarations dans le code.


Sachant ceci, vous pouvez prédire quelle sera la couleur du paragraphe quand on lui applique ce code :

CSS:
body p { color: red; }
body p { color: blue; }
p { color: green; }
p { color: orange; }
p { color: fuchsia; }

Le paragraphe sera en bleu.
Les deux premiers sélecteurs sont plus spécifiques que les trois suivantes : elles sont donc prioritaires. La seconde est située après la première : c’est donc elle qui est retenue.


Spécificité de chaque sélecteur


Si on reprend ce CSS :
body p { color: red; }
p { color: green; }

Je vous ait dit que la première déclaration est plus spécifique. En fait, il y a deux sélecteurs d’éléments (body et p). La spécificité d’éléments est donc de 2. La seconde déclaration possède un seul sélecteur d’élément : sa spécificité d’éléments est 1 : la première est bien prioritaire.

Maintenant, donnons des classes à nos éléments :

<body>
Mon texte
<p class="in-blue">Mon paragraphe</p>
</body>

Et ajoutons le CSS suivant :
body p { color: red; }
p { color: green; }
p.in-blue { color: blue; }

Quelle sera la couleur du paragraphe ? Bleue, encore !

En CSS, le sélecteur de classe l’emporte sur les sélecteur d’éléments, même s’il y en a plusieurs ! Vous pouvez bien faire « html body div p span a { … } », si votre lien <a> possède une classe « foo », alors le code « .foo { … } » sera prioritaire.

C’est une question de hiérarchie : les classes sont plus fortes que les éléments, même si les éléments sont au nombre 315 et que la classe est toute seule : un sélecteur plus haut dans la hiérarchie sera toujours prioritaire pour imposer ses styles.

Comme les éléments et les classes, chaque type de sélecteur (ID, attributs…) possède sa place dans la hiérarchie.


Calcul de la spécificité


On a vu que la classe est prioritaire sur les éléments. Mais les ID sont prioritaires sur les classes. Et le CSS « inline » (attaché dans l’attribut style="…" d’un élément) est prioritaire sur les ID. Enfin, le flag « !important » est prioritaire sur tous les autres, quelque que soit sa place.

On a donc quelque chose comme ça :

Y-X-C-B-A


Avec :

  • Y : la présence du « !important »
  • X : le CSS est Inline
  • C : le sélecteur d’ID
  • B : le sélecteur de classe (les pseudo-classe telles que « :nth-of-type() », ou « :hover » et d’attributs comme « [href=""] » vont également ici)
  • A : le sélecteur d’élément (les sélecteurs de pseudo-éléments telles que « ::before » ou « ::first-line » vont ici)

Chaque lettre A, B, C, X, Y représente un nombre, où 0 est le défaut.

Voici quelques exemples :

* { color: green; }
Ceci donne un style vert à tous les éléments. Sa spécificité est cependant nulle : 0-0-0-0-0. Elle est supplantée par tous les autres sélecteurs, mais elle permet quand même d’être plus forte que les styles « par défaut » du navigateur (j’y reviendrai plus tard).

p { color: green; }
Pas de !important, ni de style en ligne, ni d’ID, ni de classe, mais un sélecteur d’élément : la spécificité est 0-0-0-0-1.

body p { color: red; }
Pas de !important, ni de style en ligne, ni d’ID, ni de classe, mais deux sélecteurs d’élément : la spécificité est 0-0-0-0-2.

p.in-blue { color: blue; }
Ici, on a une classe et un élément : la spécificité est 0-0-0-1-1.

body p.in-gray { color: gray; }
On a un élément (body), un autre élément (p) et une classe : la spécificité est 0-0-0-1-2.

body.home p.in-black { color: black; }
Ici, au total on deux éléments et deux classes : la spécificité est 0-0-0-2-2.

p.in-black.in-bold { color: black; font-weight: bold; }
Ici, au total on un élément et deux classes (sur le même élément, certes) : la spécificité est 0-0-0-2-1.

body#home p.in-black .link span { color: black; }
On a 3 éléments, 1 ID et deux classes : 0-0-1-3-2.

body#home table#data tbody tr td a .cool { color: black; }
6 éléments, deux ID et une classe : 0-0-2-1-6.

C’est assez simple non ?

Pour le « !important », il faut faire attention : ce dernier ne s’applique qu’à une seule propriété :

#home p {
    color: black;
    font-weight: bold;
}
p {
    color: red!important;
    font-weight: normal;
}

Ici, la couleur est mise en !important dans la seconde déclaration : la spécificité de la couleur est donc :
  • 0-0-1-0-1 dans la première déclaration
  • 1-0-0-0-1 dans la seconde

Mais la spécificité pour la graisse (texte en gras) est de :
  • 0-0-1-0-1 dans la première déclaration
  • 0-0-0-0-1 dans la seconde

Le paragraphe a donc une couleur rouge (grâce au !important) mais un texte en gras, à cause de spécificité du sélecteur dans la première déclaration.

Vous arrivez à suivre ?
Continuons.

p.foo a[href] {…}
La spécificité du sélecteur d’attribut est la même que celle des classes. On a donc l’équivalent de deux classes et deux éléments : 0-0-0-2-2.

p.foo > a{…}
p.foo a{…}
Ici, les liens a ont la même spécificité : les combinateurs comme >, ~, + n’ont pas de spécificité particulière et ne sont pas prioritaires.

Ce qui suit est plus tordu :
HTML:
<body id="home><p><a>coucou!</a></p></body>

#home p { color: red!important }  /* 1-0-1-0-1 */
a{ color: green }  /* 0-0-0-0-1 */

Le lien sera… Vert !
En effet, bien que la spécificité de la première déclaration l’emporte sur la seconde, la couleur de la première s’applique au paragraphe et non au lien !
L’héritage existe, mais la seconde déclaration s’applique directement aux liens : elle est donc plus forte que l’héritage. L’ordre n’aurait pas non plus importé et le lien aurait été vert même dans le cas suivant :

a{ color: green }
#home p { color: red }

Si on avait voulu forcer la couleur rouge des liens, il aurait fallu faire ça :
#home p a { color: red }  /* 0-0-1-0-1 */
a{ color: green }  /* 0-0-0-0-1 */

Ici alors les deux sélecteurs s’adressent aux liens directement, et c’est la spécificité qu’il faut regarder.

La même remarque compte pour les pseudo-éléments :
#home a::before{ color: green }  /* 0-0-1-0-2 */
#home p a { color: red }  /* 0-0-1-0-2 */

La spécificité de la couleur est de 0-0-1-0-2 dans les deux cas, mais la première s’applique directement au ::before du lien, qui est un pseudo-élement : il est donc prioritaire sur l’héritage ainsi que sur l’ordre de la déclaration.

En revanche, les pseudo-classes restent des classes (ce ne sont pas des éléments particuliers) et ont la même spécificités que les classes.
Du coup, le code suivant :
#top a { color: red; } /* 0-0-1-0-1 */
a:hover {color: green} /* 0-0-0-1-1 */

Donnera un lien rouge même quand on passera la souris dessus ! Les deux sélecteurs s’appliquent directement au lien (pas de problème d’héritage) mais le « #top » de la première déclaration est plus spécifique que le « :hover », qui ne compte que pour une classe.

Pour faire passer l’effet lors du passage de la souris, il faut utiliser une des méthodes suivantes :
#top a:hover {color: green} /* 0-0-1-1-1 */
a:hover {color: green!important} /* 1-0-0-1-1 */
Ou bien utiliser JavaScript, dans ce genre là :
<a onmouseover="this.style.color='green'">
(Les styles ajoutées en JS avec onmouseover/onblur équivalent à ajouter des styles directement sur l’élément, et la spécificité sera de 0-1-0-0-0, bien au dessus d’un sélecteur d’ID ou de classe.

Enfin, un petit mot sur la pseudo-classe « :not() » : elle n’ajoute pas de spécificité particulière, mais il faut quand même compter tout ce qui se trouve à l’intérieur :

#top a:not(.links) {color: green} /* 0-0-1-1-1 */
On se retrouve avec un ID, un élément ainsi qu’une classe : elle se trouve dans le :not(), il faut la compter comme une classe. Si le :not() contenait un ID, il faudrait le compter comme un ID.


Styles navigateur, auteur, utilisateur


On a vu tout ce qui concerne la spécificité des sélecteurs, mais il reste un dernier point à aborder.
Pour le moment, on a parlé du CSS dans une page web. Ce ne sont pourtant pas les seules styles qui sont utilisées sur une page.

Par exemple, quelle est le style d’un lien sur une page qui n’a aucun CSS ? Le lien est bleu dans pratiquement tous les navigateurs (il est même violet quand le lien est visité). Pareil, certains éléments sont stylisés de façon particulières : les formulaires ont des bordures et tous les éléments sont blancs.
Les styles ici sont produites par le navigateur lui-même : ce sont les styles navigateur.

Parallèlement, un utilisateur peut forcer l’application de styles : il veut par exemple mettre tous les liens en orange, et toute la page en Comic Sans MS. Les navigateurs disposent d’une feuille de style utilisateur prévu pour que l’utilisateur puisse ajouter ce qu’il veut. Ceci inclut les styles introduites par les modules complémentaires, comme les bloqueurs de publicité.

On se retrouve donc avec 3 sources de CSS :

  • le style navigateur : appliqué par défaut si la page ne prévoit aucun code CSS ;
  • le style utilisateur : inclus par l’utilisateur.
  • le style auteur : inclus dans la page par l’auteur de la page ou du site ;

En général, les navigateurs appliquent les styles dans l’ordre ci-dessus. C’est donc l’auteur de la page qui a le dernier mot.

Il y a une exception cependant : le « !important » dans les styles utilisateur. Ce sélecteur, le plus puissant de tous, devient encore plus puissant quand il est utilisé dans les styles utilisateurs.
Les navigateurs laissent donc le dernier mot à l’utilisateur et c’est bien normal.

Pour Firefox, le fichier des styles utilisateurs se trouve dans le dossier chrome du profil de Firefox : ~/.mozilla/firefox/
  • .default/chrome/userContent.css (sous GNU/Linux).
Vous pouvez essayer dans ce fichier : ajoutez simplement ceci :
a { color: green!important; }

Enregistrez, puis redémarrez Firefox et vous verrez que tous les liens seront en vert, même si l’auteur a utilisé un sélecteur beaucoup plus puissant, avec à la fois !important et un ID, par exemple.

(Pour remettre les liens normalement, supprimez le ligne du fichier userContent.css, enregistrez, puis relancez Firefox.)

Les autres navigateurs doivent également proposer des styles utilisateurs quelque part.
Ceci est essentiel pour les personnes malvoyantes ou dyslexiques, qui ont besoin de polices de caractères spéciales, en grand et avec un contraste élevé.


Ressources


Comme j’ai dit en intro, il y a peu de documentation à propos de la spécificité en CSS, mais on trouve quand même ceci :


Pour conclure, je pense avoir fait le tour de la question, et j’espère que ça vous permettra de déboguer votre CSS un peu plus facilement.
Je dirais une nouvelle fois que ça me surprends de ne pas trouver plus de documentation à propos de la spécificité, alors que si on regarde d’autres choses, comme les nouveaux sélecteurs CSS3 ou les couleurs HTML, tout le monde en parle et les connaît.

La vie privée n’existe plus !

Le conseil constitutionnel a validé la loi du renseignement, qui légalise une « NSA » made in France.
Allez, dites merci à Cazeneuve, Valls et tonton Hollande : grâce à ces compères, tous les français sont maintenant sur écoute h24 : les SMS, les appels, les emails, les comptes en banque, les achats en ligne et toute votre activité en ligne : tout est enregistré, logué et analysé.

Il faut bien ça pour nous protéger des terroristes.
Ouais… Et il faut bien un VPN aussi pour nous protéger du gouvernement.


Je rappelle que le terrorisme c’est faire usage de la peur pour faire passer des lois et des mesures liberticides et disproportionnées.
Quand on se rend compte qu’en plus, aux USA la police tue plus de citoyens américains que ne le fait la guerre en Irak (src) et qu’en France en 2014 au moins 10 personnes sont tuées par la police (src — environ une centaine depuis 2005), on se demande qui sont les vrai terroristes.


Bref, je fais court. Korben en écrit plus ici si vous voulez : Big Cazeneuve est maintenant une réalité, et la Quadrature aussi.

Comment faire la maintenance de son site web et des URL ?

Aujourd’hui, Google me notifie d’une hausse énorme des erreurs 404 (introuvable) sur mon site :


erreurs 404 de mon site

Google me signale ça au moyen de son outil Google Webmaster Tools, qui permet de garder un œil sur l’état du référencement, mais également qui pointe où, l’état du site (up/down), le nombre d’erreurs rencontrés, la vitesse d’exploration, le temps de chargement des pages. C’est un outil assez pratique, et on y trouve parfois des surprises.

Concernant tous les 404, on dirait que Google fait remonter toutes les erreurs, y compris anciennes, qu’il a en mémoire : quand je regarde les pages 404 et les pages qui pointent vers les fichiers 404, beaucoup sont des erreurs de la part de Google : les liens sont bien corrects, aucun soucis donc… Pas plus que d’habitude en fait.


Ceci est tout de même l’occasion de donner quelques astuces sur la maintenance d’un site web au fil du temps.


Astuce de base : une bonne URL ne change pas


Une bonne URL ne change pas. Quand vous créez une page, quelqu’un sera emmené à la partager sur un site ou un forum. À partir de ce moment là, il sera trop tard : si vous voulez modifier l’emplacement du fichier, le lien sur l’autre site ne fonctionnera plus.

Évidemment, ne pas changer de place des fichiers, ce n’est pas toujours possible : un site évolue, c’est normal.
Dans ce cas là, on peut s’en sortir avec une redirection, mais c’est seulement en dernier recourt.


Corriger avec .htaccess

f

Une page web, par exemple « http://lehollandaisvolant.net/tuto/index.php » est accessible depuis plusieurs adresses différentes :


Tôt ou tard, ce genre de liens finiront par se retrouver dans la nature, et dans certains cas, ça créera des problèmes, dont des erreurs 404. Pour ça, on peut utiliser la réécriture d’URL avec le fichier « .htaccess » qui se trouve à la racine de votre site.

Perso, j’utilise plusieurs formes de réécritures. Parmi toutes les URL ci-dessus, celle que je veux pour mon site et mes pages, c’est la plus courte :


Pas de « www », pas de multiples slashs, pas de « index.php » (ce dernier est implicitement utilisé par le serveur, mais ça dépend de votre configuration et le mieux est de tester sur votre site).

Voilà les codes à placer dans le fichier .htaccess (après chaque ajout, testez votre site : une erreur 500 indique une erreur dans le .htaccess, et il faudra annuler la dernière opération effectuée dans ce fichier).

Déjà, placez ceci tout en haut et s’il n’y est pas, pour activer la réécriture :

RewriteEngine on
RewriteBase /


Pour supprimer le « www. » :

RewriteCond %{HTTP_HOST} ^www.lehollandaisvolant.net [NC]
RewriteRule ^(.*)$ http://lehollandaisvolant.net/$1 [R=301,L]

Pour supprimer les « index.php » inutiles :

RewriteCond %{THE_REQUEST} ^GET.*index\.php [NC]
RewriteRule (.*?)index\.php/*(.*) /$1$2 [R=301,NE,L]

Pour supprimer les multiples slashs :

RewriteCond %{REQUEST_URI} ^(.*)//+(.*)$
RewriteRule . %1/%2 [R=301,L]

Pour supprimer le slash final sur un lien en « .php ».
Il faut savoir que sur Linux, Unix et d’autres, un dossier est un fichier, et l’ouvrir constitue une « exécution » du fichier. Son adresse se termine par un slash « / ».
Donc si au lieu de faire « dossier/fichier.php » vous mettez « dossier/fichier.php/ », l’ordinateur pensera que « fichier.php » est un dossier (avec les problèmes de liens relatifs/absolus que ça entraîne : ça fait un sous-niveau supplémentaire) et en exécutant le contenu du fichier quand même. Perso je préfère éviter cela, car ça peut donner des erreur 404.
Je supprime dont le slash final quand il suit un « .php ». Mais attention à ce qu’aucun dossier sur votre site comporte « .php » à la fin, sinon il sera inaccessible aussi.

RewriteCond %{REQUEST_URI} ^(.*)\.php/$
RewriteRule . %1.php [R=301,L]


Le fichier .htaccess permet de faire plein de choses, mais ne le rendez pas trop obèse parce que ce fichier est appelé à chaque requête sur votre site.


Le fichier robots.txt


Google m’indique toutes ces erreurs parce qu’il analyse mon site. Il est possible de lui bloquer l’accès à certaines pages. Du moins, les pages bloquées ne seront pas retournés dans les résultats de recherche : visiblement, Google les explore quand même (certains 404 ne sont issues que de pages bloquées).

Le fichier robots.txt est un fichier à la racine du site, et c’est là dedans qu’on va indiquer quels sont les dossiers et fichiers que les robots ne doivent pas indexer.

Pour interdire l’indexation du dossier « /dossier/ » à tous les robots, utilisez ça :

User-agent: *
Disallow: /dossier/

Vous pouvez mettre plusieurs dossiers, chacun sur une ligne !

User-agent: *
Disallow: /dossier1/
Disallow: /dossier2/

Vous pouvez aussi bloquer juste un moteur de recherche avec son nom :

User-agent: nsa
Disallow: /

Ce code à l’efficacité que je pense fortement douteuse va bloquer l’indexation de tout mon site par la NSA. Le nom des différents moteurs de recherche sont donnés ici : robots-txt.com/ressources.


Le fichier humans.txt


En plus du fichier robots.txt, une initiative a été lancée pour faire un fichier à destination des humains : le fichier « humans.txt ».
Il s’agit un peu d’une page « à propos » de votre site, qui s’affiche en texte simple et dans lequel vous pouvez mettre des infos sur le site, l’auteur…

Selon moi c’est un peu inutile, plutôt humoristique, mais ça peut être sympa si assez de monde le fait : ça ne coûte rien du tout, c’est totalement gratuit et ça ajoute comme les erreurs « 404 » personnalisées, une touche de finesse et de détails à votre site.

J’en ai un sur mon site aussi, je vous laisse le trouver à la racine du site.

Émission StarTalk sur les OGM

du maïs sur un grill Je suis plusieurs émissions scientifiques, en radio et en séries TV, principalement américaines (pour pas dire tous).
L’une de mes préférées est StarTalk Radio, avec Neil deGrasse Tyson (le même qui présente Cosmos). On y rencontre aussi régulièrement Bill Nye, un vulgarisateur, éducateur et communicateur scientifique et beaucoup d’invités dans tous les domaines : Elon Musk (fondateur de Space X et Tesla Motors), Morgan Freeman (acteur), Michiou Kaku (physicien), Mike Massamino (astronaute), Josh Groban (chanteur), et plein d’autres : auteurs, artistes, politiques, scientifiques, entrepreneurs, comédiens…

Aujourd’hui deux épisodes d’environ 50 minutes sur les OGM :


Bill Nye y répond aux questions sur les OGM posées par les internautes. Il explique également pourquoi il a changé d’avis sur les OGM (il était totalement contre au début).


Si je vous partage ça, c’est parce qu’on écoute beaucoup de choses sur ce sujet, avec beaucoup plus de voix d’un côté que l’autre, et sûrement beaucoup de faux aussi.
Il y a pourtant du bon et du mauvais dans les OGM.


Pour ma part, je ne sais pas trop quoi penser des OGM, en eux-mêmes (je ne parle pas de tout ce qui est brevetage du vivant, et pression économique ; voir le premier commentaire sous l’article).

Déjà, il faut savoir que la sélection artificielle, que ce soit des chevaux, des chiens, du blé ou des pommes, c’est de la manipulation génétique aussi.
Même quand on se reproduit, dans l’espèce humaine : en choisissant sa/son partenaire, on choisit indirectement avec quelles gènes on va se reproduire afin de donner à la descendance des caractéristiques que l’on aime voir perdurer (on espère que la descendance les aura, étant donnée qu’il reste une composante aléatoire).

Pour les espèces de céréales ou des animaux, il peut arriver que ce processus, opéré depuis des milliers d’années, donne naissance à une espèce toxique pour l’homme. Je n’ai pas d’exemples, mais la génétique fonctionne ainsi et la sélection artificielle n’est pas à l’abri de ça : certains gènes inhibent la production de toxines, d’autres la codent. Par ailleurs, une toxine pour une espèce ne l’est pas forcément pour d’autres (le chocolat c’est toxique pour un chien, pas pour vous, non ?). La sélection naturelle génère également des effets, d’ailleurs.


Les OGM permettent de manipuler des gènes directement, donc sans le caractère aléatoire du croisement par reproduction. C’est tout.
Là également, il y a des risques qu’une plante OGM produise quelque chose de toxique en plus de produire plus de blé comme on a voulu faire. Mais d’un point de vu technique, les OGM n’ont pas plus de risque que la sélection que tout le monde effectue depuis toujours : le but est le même dans les deux cas (donner à un être vivant des caractéristiques particulières) et le support de travail également (le code génétique, qui est manipulé à notre avantage) et la seule chose qui change c’est la méthode opérée.


Comme l’avait dit Matronix dans son article sur le sujet (en Français, cette fois) : Les OGM, ça a bon goût, il y a beaucoup de désinformation au sujet des OGM. Et je pense que les deux épisodes de StarTalk donne déjà quelques points intéressants, et ensuite mettent un peu de poids dans la balance du côté « pour ». Si l’anglais vous rebute, lisez l’article de Matronix, il résume bien la situation aussi.

Pour le reste, ben, informez-vous et pensez par vous même.

image de Mike


[CSS] Un effet label/input avec icône et flexbox

Dans ce tutoriel, je vous montre comment faire des champs de saisie avec une icône de façon plutôt simple :

form
L’avantage du code qui suit, c’est qu’il est relativement propre, pure-CSS, accessible, très simple à comprendre et totalement flexible : l’ensemble reste manipulable avec vos propres styles sans tout foutre en l’air.
À ce jour, il est également très bien supporté par la majorité des navigateurs récents.

Commençons !

En HTML, un champ <input> devrait toujours être accompagnée de son étiquette <label> :

<label for="pseudo">Votre pseudo :</label>
<input id="pseudo" />

Plaçons l’ensemble dans un conteneur :

<div class="input-container">
    <label for="pseudo">Votre pseudo :</label>
    <input id="pseudo" />
</div>

Maintenant, il suffit d’utiliser les flex box pour les aligner côte à côte et de donner une hauteur au conteneur :

.input-container {
    display: flex;
    height: 24px;
}

input-container > input {
    flex: 1;
}

On veut une icône à la place du label. Très bien : on va placer en fond sur ce dernier.
Pour ne pas afficher le texte qu’il contient, on va également lui donner une largeur définie (celle de l’icône), masquer ce qui se dépasse (avec overflow) et faire en sorte que le texte soit entièrement sorti du champ de vision du label (avec box-sizing et padding).

Le CSS devient alors :

.input-container {
    display: flex;
}

input-container > input {
    flex: 1;
}

input-container > label {
    width: 24px;
    padding-left: 24px;
    box-sizing: border-box;
    overflow: hidden;
    background: url(icone.png);
}


Et c’est tout !
Vous n’avez pas besoin de vous occuper du centrage vertical (flex le fait pour vous), ni de la taille relative du champ et de son label (flex le fait tout seul aussi).
Vous n’avez pas non plus à souffrir en manipulant les ::before, le positionnement ou les flottants.

En plus de ça, vous pouvez évidemment ajouter vos propres styles, y compris des bordures et des marges : ça restera centré et aligné (merci flex !).
Cerise sur le gâteau : non seulement votre icône est cliquable comme doit l’être un bon label, mais si vous désactivez le CSS le formulaire reste entièrement accessible : le texte du label redevient alors visible :

formulaire sans css

(Inspiré de l’astuce ici)

Le merdier des prises électriques

Quoi de plus banale qu’une prise électrique, murale ou avec une multiprise ? Rien.
Pourtant j’ai rarement vu un truc qui soit autant le merdier, alors qu’à la base, c’est censé être un truc simple.

Déjà, dans le monde, il existe 14 types de prises différentes, nommées A, B, C, D, E, F, G, H, I, J, K, L, M et N. Tout du moins, il en existe 14 si on compte les types principaux, parce que sinon, il y en a au moins 27, variant en fonction du nombre de broches, de la présence de la fiche de terre, de la disposition des fiches et la forme des fiches :

plein de prises électriques différentes
Vous savez d’où vient cette image ? De cet article sur ce site. Non je n’ai pas été sponsorisé par eux, je veux juste vous faire réaliser qu’il existe des sites entiers dédiés aux prises électriques, y compris des guides dans Wikipédia, traduits en plus de 40 langues.



Tout ça pour des @%µ*#$ de prises électriques de £×!ø@ censées être standardisées, simples à utiliser et qui font pas chier leur monde. Car oui, certaines prises électriques font chier leur monde.


Il faut par exemple que la prise soit de la bonne taille et qu’elle entre dans la prise femelle :

une prise qui n’entre pas
C’est trop dur à vérifier lors de la conception ? SolidWorks® ne permet pas de faire ça, où vous n’êtes pas assez payés pour ça ?

Et si ça rentre (ce qui est un exploit, vu ce qui précède) il faut que la prise mâle soit conçue de telle sorte que les autres prises puissent rentrer dans les emplacements d’à côté :

prise, vous ne passerez pas
À quoi ça sert de faire des blocs si gros qu’ils prennent l’espace de 3 prises de courant ? Il n’est pas possible de faire un bloc un petit peu moins large mais plus haut ? Ou alors de faire comme les ordinateurs, et de déporter tout ce bousin dans un boîtier ?

En parlant de câbles d’ordi (et d’autres) : à quoi ça sert d’avoir des branchements qui soient droites et d’autres angulaires :

prises angulaires et droites
Putain, mettez-vous d’accord !
Là c’est juste super chiant votre truc : les câbles sans angle font ressortir le câble du mur de telle sorte qu’il est impossible de pousser un meuble contre le mur sans casser le fil.

Et si l’angle du câble est la solution pour éviter que les gens tirent sur les câbles, vous êtes des enfoirés car vous auriez pu utiliser un système qui empêche les gens de s’électrocuter ET qui facilite la vie quotidienne de tout le monde, en même temps (si si !) :

une prise facile à débrancher
Enfin, j’emmerde celui qui a fait ça :

prise à l’envers
Quoi, c’est pour brancher une télé plus haut que la prise ? Bah alors pourquoi c’est pas la prise de TV (le câble) qui est retourné ?!
Et pourquoi vous faites pas des prises européennes, basée sur les câbles allemands : ils sont réversibles, EUX, y’a pas de putain de prise de terre qui fait chier, ça passe sur les côtés sans sens.

Et y a pas moyen de faire une prise qui puisse s’orienter comme on veut ?


Sérieux arrêtez ces conneries !

On est en 2015 : on fait des fusées qui prennent des photos à 3 milliards de kilomètres, on fait des voitures qui roulent toutes seules, on fait revivre des espèces vivantes éteintes depuis 20000 ans, mais on ne sait pas se mettre d’accord pour simplifier le seul truc sans quoi le XXe siècle n’aurait pas eu lieu ?

#PlutoFlyby

Ca ne marche qu'en Anglais, cette blague, mais je me devais de la faire. Here is Pluto :

pluto le chien
Plus sérieusement, après 9 ans 1/2 de voyage pour faire quelques 4 828 000 000 kilomètres (voyageant quand même à 14 km par secondes), la sonde New Horizons a permis de passer d'une image floue (prise par Hubble, le puissant télescope en orbite de la Terre) à quelque chose de net prise par la sonde New Horizons :


Les photos qui sont prises en grand nombre en ce moment vont être beaucoup plus nettes, d'une résolution de 100 mètres par pixels.

Après, il faudra néanmoins attendre un peu pour que toutes ces images soient envoyées jusqu'à la Terre : le débit de transfert se fait à 125 octets par seconde, ce qui est très faible, mais il est impossible de faire autrement vu l'éloignement de la sonde à la Terre et la taille de la sonde (équivalent à celle d'un piano à queue). Il faudra donc attendre environ 9 mois pour tout recevoir.

Durant ce temps, New Horizons continuera de s'éloigner de nous, du Soleil et même de Pluton, en direction d'autres astres, comme 1110113Y, qu'elle devrait survoler en 2019.

Démocratie : Que faire quand…

Question : que faire quand vous dites être en charge d’une démocratie et que :

  • les citoyens ne veulent pas de votre loi ;
  • les élus ne veulent pas de votre loi ;
  • demander l’avis des citoyens et des élus du peuple constitue donc une contrainte plus qu’autre chose ?

Réponse : ben on passe la loi en force, sans demander l’avis de personne. Trois fois de suite.


Pour rappel : dans une démocratie, c’est le peuple qui est au pouvoir.
Quand c’est une seule personne qui est au pouvoir et qui fait un peu ce qu’il veut, ça porte un autre nom.