troll

Haha !

Ça fait un petit moment que je voulais faire un billet à propos de ce quote du Bashfr :
<Silver>: Purée. J'peux trouver presque n'importe quelle image, render, film, série, animé en streaming, la version MSN sans SP2 de merde, CS sans steam ( qui déconne mébon ), etc... MAIS. Je pige QUE DALLE au site de l'université.

Je ressent la même chose, que ce soit avec le site de mon université, ou celui d'autres pages officielles (site de ma banque, etc.) : c'est mal foutu. Les menus sont énormes avec 500 liens dans tous les sens, aucune description : bah.

Ce soir j'ai découvert woorank, (via champlywood). Ils arrivent à donner un « niveau de lisibilité » des sites : c'est le niveau qu'il faut avoir pour arriver à naviguer sur le site :

Exemples :
  • celui de Skyrock : Universitaire ;
  • celui de mon université : Universitaire ;
  • CCM : Adolescent ;

Je suis ravi de voir que mon site est de niveau « Enfant ».

Ok, ça ne veut rien dire dans l'absolu, mais ça donne une idée quand même, je pense.

Perso, les sites bordéliques ou « sapin de Noël », c'est comme les sites avec 3 Mo de scripts externes ou des textes en Comic Sans MS : je les zappe.

image de joseestepa

mpaa

Hadopi 3 n'a encore une fois rien compris.

La Hadopi 3 s'attaque au streaming et au téléchargement direct. Bah, fallait que ça arrive : le bittorent a été tué en France, et tout le monde connait MU ou RapidShare et les centaines d'autres qui sont nés depuis deux ou trois ans (hasard ?).

Mais ils veulent faire quoi avec ces sites ?
Ça :
L'ouverture d'un dialogue intensif avec les sites et plateformes concernés ainsi que tous les intermédiaires qui contribuent à leur fonctionnement, dont notamment les établissements bancaires, intermédiaires de paiement ou de micro-paiement, et régies publicitaires, afin d'évaluer la situation et les moyens qu'ils pourraient mettre en œuvre pour y remédier.

En somme : faire pression sur ceux qui les permettent de vivre (régies de pub, banques), comme ils ont fait avec WikiLeaks.
Alors ça c'est fort.

Et ils pensent que les banques situées aux Caraïbes ou en Irlande vont coopérer avec la France ? Ou que Megaupload va gentiment écouter la France et fermer tous les comptes sur simple suspicion ?
Sachant qu'en plus, ils n'ont rien compris au net : fermez un compte et c'en sont dix nouveaux qui rouvrent… Sans compter qu'il existe des moyens de ré-uploader un fichier de façon automatisé sur tous les sites de partages dès qu'il est supprimé.

Vous savez ce que je ferais si j'étais MU ou un autre site de partage ? Je bloquerais l'accès à mon site depuis la France, juste pour ne plus avoir d'ennuis avec ces abrutis de l'Hadopi.
S'ils le font, alors la France et l'Hadopi plutôt que promouvoir la créativité et la culture sur le net seront en train de foutre dehors tous les sites et l'industrie numérique (bon ok, peut-être pas à ce point). Merci Hadopi, merci Sarko.

Il y a pourtant une solution très simple pour que les gens payent pour de la musique et des films : proposer des offres au prix juste et des offres VOD entrant dans le bon sens : il est hors de question que j'achète la moindre VOD qui ne soit pas un bon vieux .avi en HD sans DRM. C'est pourtant pas compliqué, si ?
Mais je peux toujours rêver…

Shira Golding

robot-css Encore quelques astuces HTML/CSS…


Faciliter la navigation dans les formulaires

On m'a fait remarquer qu'avec l'apparition des boutons de formatage dans Blogotext, c'était la misère pour changer de champ avec la touche de tabulation. Et c'est vrai, mais à défaut je ne savais pas quoi faire.
Et j'ai découvert l'attribut tabindex, à placer sur un élément de formulaire, comme les <input> par exemple :

<input type="text" name="id" value="" size="25"  tabindex="12"/>

En ajoutant ça sur plusieurs input, la touche de tabulation naviguera du champ de l'index le plus bas au champ de l'index le plus haut, sans se soucier de l'ordre des champs dans le code source. Les champs qui n'ont pas d'index sont passés en derniers.
J'ai illico mis ça dans Blogotext, bien sûr :-)

J'ose également vous rappeler les attributs required (indique d'un champ est obligatoire), placeholder="lorem" (texte qui se montre si le champ est vide) et type (qui peut être mis comme « email », « url » ou autres choses pour la navigation sur smartphones tactiles avec un clavier limité).

CSS3 pseudo-classe : target

Peut-être avez-vous remarqué sur Wikipédia : quand on clique sur une note de bas de page, on est envoyé en bas bien sûr, mais le lien en question est surligné ! C'est grâce à la pseudo classe target, qui cible l'ancre courante : par exemple dans l'url monsite.com/page.html#ipsum, l'élément qui est l'ancre courante, c'est celui dont l'id est ipsum.

Ok, surligner les liens, c'est utile, mais pas fun. Faire des spoiler et des lightbox en pure CSS, ça c'est fun ! Mais bon… c'est moins utile.
Actuellement, j'ai ajouté ce truc sur les ancres des commentaires de mon site. Ciblez un commentaire, et il ombrée de jaune :-).
Le code, tout simplement :

#ancre:target {
/* style lorsque #ancre est ciblé */
}

Oh, et à propos des ancres HTML : pour les commentaires ici, j'ai placé le lien dans le bloc d'un commentaire, et l'ID avec l'ancre je l'ai attribué au bloc. Cela ciblera le bloc et non le lien. Côté esthétique, c'est mieux : le bloc n'est pas coupé en haut. C'est également plus lisible quand les ancres pointent vers des chapitres ou des sous-parties de la page, de pointer sur un élément légèrement au dessus du titre de la partie : le titre ne sera ainsi pas collé au bord de l'écran, mais quelque peu espacé.

Pour les styles d'impression

Il est possible de faire des feuilles CSS pour les imprimantes : quand on imprime, on s'abstiendra d'imprimer les images de fond, mais on imprimera seulement le texte, en noir sur fond blanc, pour éviter d'utiliser trop d'encre (et parce que blanc sur noir c'est illisible sur papier).
Quand on imprime une page, les liens ne marchent plus (bien dommage, hein ?). Alors pourquoi ne pas afficher l'url à côté du lien ? Parce qu'on peut le faire en CSS, avec les sélecteurs et content et attr en CSS :
Un élément HTML peut avoir plusieurs attributs, par exemple un id et un href pour ce lien :
<a href="http://foo.com" id="lien">
Ce qu'on va faire, c'est récupérer le contenu du href, et l'afficher avec un :after

a[href^='http']:after {
content:" (" attr(href) ")";
}

Ce qu'on cible : les liens (<a>) qui ont un attribut href ([href]) débutant (^) par http (http), donc uniquement les liens externes. Ce qu'on fait : on place après ces liens (:after) le contenu (content) de l'attribut href.
Si ça avait été une image, on aurait pu afficher la source avec :
content:" (" attr(src) ")";
Magique non ?

On peut même le coupler avec :hover (pas pour l'impression cette fois), pour afficher le l'url au survol du lien, et pourquoi pas après un certain délai et avec un fondu ? CSS3 Inside ? Petit exemple ici. Quand je vous disais que personne n'utilise plus de 20% de la puissance des CSS.
On peut même cibler les liens se terminant par « pdf » ou « jpg » pour afficher une petite icone appropriée, ou même un lien commençant par « https », et afficher un petit cadenas (c'est ce que fait Wikipedia non ?).

Mettre un caractère spécial dans un « content »

Ce que j'appelle improprement « caractère spécial », ce sont les caractères unicode non-alphanumériques. Par exemple un petit atome : ⚛, un cœur : ♥ ou un flocon de neige : ❄.
Dans le content CSS il n'est pas possible de mettre l'entité HTML « &#9883; » sinon ça affiche littéralement le code avec le « & » et tout. Il faut utiliser le code Unicode échappé, à savoir (pour l'atome ci-dessus) : « 269B ».

Dans les tables de caractères (ceux de Gnome sous GNU/Linux ou ceux de Windows), c'est le code après le « U », par exemple, vous voyez ceci : « U+269B ». Il faut donc prendre 269B et ajouter un anti-slash devant, puis le mettre dans le CSS :

#element:after {
content:"\269B";
}

(on peut aussi mettre directement le caractère unicode, mais c'est pas recommandé, à moins que vous mettiez l'encodage de caractères dans le fichier CSS).

Éviter que les images dépassent des blocs quand on rétréci la page

Quand on a une image de 1000px dans une fenêtre de 900px, l'image sort de l'écran et on peut pas la voir. C'est relativement ennuyeux. Heureusement j'ai songé à : il suffit de faire en sorte que la taille de l'image ne soit pas plus grande que son conteneur :

img {
max-width: 100%;
}

C'est tout !
En largeur, l'image ne dépassera plus de son conteneur. Vous pouvez essayer sur cet article avec l'image qui s'y trouve : redimensionnez la fenêtre et constatez qu'elle se compresse en fonction.
Le souci, c'est que l'image n'est pas redimensionnée en hauteur. Qu'importe, on peut faire ça avec du JavaScript (il n'est à ma connaissance pas faisable de recalculer dynamiquement des dimensions en CSS).
Le code JS suivant recalculera et appliquera les hauteurs aux images de classe « autoresize » qui sont déformées de manière à ce que l'image ait un ratio hauteur/largeur qui ne la déforme pas (il faut recharger la page pour le redimensionnement en hauteur par contre) :

function get_size() {
var className = "autoresize";
var elmts = document.getElementById("midle").getElementsByTagName("img");
var regex = new RegExp("\\b" + className + "\\b");
for (var i=0; i<elmts.length; i++) {
if(regex.test(elmts[i].className)) {
var height = parseInt(elmts[i].style.height);
var width = parseInt(elmts[i].style.width);
var computedWidth = elmts[i].width;
if (width != computedWidth && computedWidth * width != 0) {
elmts[i].style.height = Math.floor(height*computedWidth / width)+"px";
}
}
}
}
get_size();


Voilà, c'est tout pour le moment !

image de 邪恶的正太