Nicolas Guilhou

Discussion sur l'icône de sous-titrage

Fri, 19 Oct 2012 12:20:45 +0200

Ceci est un article sur ces icônes et cette icône.

#xaviermd, toujours à la pointe du capillo-tractage et autres pratiques associées me parlait d'une icône de sous-titrage présente sur certains (anciens ?) postes de télévision de marque Philips. Parle ensuite des icônes présentes sur sa télécommande. Moi aussi j'ai une télécommande.

Et pour sous-titrage, je peux considérer que j'ai trois choix (en réalité non). J'ai donc à ma disposition AD (audio description) et SUBT (subtitles). Je vois pas l'universalité. Audio description ET sous-titres relèvent du même procédé, sous-titrer une vidéo. L'un étant beaucoup plus descriptif que l'autre.

Il n'y a, à mon avis, pas qu'un problème d'icône. Il y a un problème d'interface. JE vais pas aller en profondeur sur ce sujet, mais si j'appuie sur un bouton unique je devrais avoir à l'écran une possibilité de bascule entre l'un et l'autre. Mieux que de multiplier les boutons sur un pauvre truc qui commence à ressembler à une batte de base-ball (par la taille).

Là je parle de télévision, mais la transposition marche sur nos écrans d'ordinateur.

Discutons.

Le retour de l'icône de sous-titrage (certainement pas le dernier)

Fri, 19 Oct 2012 12:03:56 +0200

Rappel des faits : #CSA qui fait la demande d'une icône pour le sous-titrage. Moi je comprends #CSA = France. Donc je ponds un draft ici. On me dit dans le poste, essentiellement sur Twitter et Gtalk, oui d'accord, #CSA, mais on veut un truc UNIVERSEL, que même un castor lapon pourra comprendre. Ou un journaliste :D.

Bref.

On fait un deuxième essai ? J''essaie d'être universel hein.

Je suis SÛR que je vais faire une tétra chiée de drafts

Icône de sous-titrage

Fri, 19 Oct 2012 11:17:47 +0200

Après une nuit presque blanche pour cause de tempête, repartir "de bon matin" sur mon interface d'administration en flex-box est un peu dur pour la marmelade velouté qui me tient lieu de cerveau. Manque de bol, levé trop tard pour suivre la conf matinale de #ParisWeb sur les icônes.

J'ai juste capté que le CSA a besoin d'une icône de sous-titrage. Qu'à cela ne tienne. Allez, on dit qu'on fait vraiment dans le symbolique; et j'ai comme l'impression que personne ne va comprendre d'emblée, à moins de faire une campagne de matraquage digne d'Universal.

Mouais, ça peut se travailler, faut voir.

Disons qu'on cherche à être plus direct. Perso, ça fait des années qu'à la télé quand des sous-titres sont dispos je vois ce sigle : "S/T" . Et j'ai tendance à comprendre ce qu'il dit. Alors pourquoi ne pas s'en servir.

C'est un premier jet, je suis sûr qu'on peut le retravailler. Mais ne rêvons pas, dans le domaine des icônes on ne peut pas tout le temps se servir d'abstractions. Il faut parfois être direct.

Bonne nuit les p'tis loups

La Maison du Pastis

Thu, 23 Aug 2012 14:44:59 +0200

Quand je suis content d’un truc je le dis, autant quand c’est de la merde je me gêne pas non plus. Aujourd’hui mes petits amis je vais vous parler de La maison du Pastis.
Soyons clair je ne vais même pas m’attarder sur la qualité des produits vendus, pour qui aime le pastis elle est tout bonnement exceptionnelle. J’ai découvert cette boisson grâce à eux, jusque là je trouvais que les Pastis 51 et consors relevaient de la pire torture gustative. Mes petits amis, le pastis de “La maison du Pastis” c’est du bonheur en bouteille, à déguster aux heures chaudes, bien glacé et surtout bien dosé, pas question de faire un “misérable”.

Bref.

Je suis fan.

Si vous visitez ce superbe (sic) site, vous remarquerez que point n’est besoin de se déplacer à Marseille pour profiter de ces douceurs, il y a “Catalogue et vente sécurisée” à votre disposition. J’ai pas de bol, à l’heure où j’écris cet article la boutique sécurisée (huhu) est en carafe complet.
À ce sujet ma douce et tendre me dit en régie que cette boutique semble plus souvent tomber en marche qu’autre chose.

Bref.

Si vous avez la chance de tomber sur le créneau horaire où la boutique tombe en marche, vous pouvez commander du pastis. Avec l’assurance d’être livré en 48h. Putain con, je commande. Vite. Avant que la boutique retourne à son état initial.

15 jours plus tard (48h en marseillais) ma factrice toque à ma porte. Quand elle toque à ma porte c’est que c’est LRAR ou colis. Et vu que côté recos j’ai ce qu’il faut merci, je me suis dit que j’ai bien fait de patienter 48h avant de tout péter.
Las, en guise de colis je vois ma factrice un sac poubelle fermé à sa main. Je vous passe les détails. Bouteille en mille morceaux. Je pense que dans l’urgence, 48h c’est court, les joyeux et diligents employés de “La maison du Pastis” ont oublié de mettre du rembourrage dans un colis inadapté au transport des bouteille. Je peux les comprendre, le rush tout ça.

Je plains surtout ma factrice qui déteste l’anis et qui se trimballe aujourd’hui avec une bagnole qui pue le taga à 20 mètres avec 34° dehors.

Je pense que d’ici 48h je devrais avoir des nouvelles. C’est con que Noël se prête moyennement à la conso de boissons glacées. J’ai mes habitudes.

Nota
Comme c’est mon métier, j’ai jeté un coup d’œil sur le code source du site. Tout s’éclaire maintenant.

Styler les checkboxes sans monoculture… ou presque

Wed, 22 Aug 2012 15:01:19 +0200

Comme vous l’avez sans doute remarqué, habiller des éléments de formulaire en CSS peut vite virer au cauchemar, même si on s’enlève une épine du pied en éliminant Internet Explorer.
On peut passer par des plugins JQuery ou autres, c’est bien mais pas top, surtout pour quelques malheureux éléments de formulaire.

Donc, stylons des checkbox. HTML, simple :

<div class="test">
  <p><input type="checkbox" checked name="yaka" value="" id="yaka"><label for="yaka">Activer les propulseurs supraluminiques</label></p>
  <p><input type="checkbox" name="yapuka" value="" id="yapuka"><label for="yapuka">Voir le hanneton glouton de Tron</label></p>
  <p><input type="checkbox" disabled name="ifokon" value="" id="ifokon"><label for="ifokon">Oui, mais en fait non</label></p>
</div>

Moi je suis un garçon bien élevé, je suis les règles, et comme des fois elles sont floues ben je me trompe. Par exemple, qui de Webkit et de Gecko a raison en autorisant/interdisant les pseudo éléments :before et :after sur les éléments de formulaires. Je ne sais ni. Je suis designer et ce que je constate c’est que Webkit les autorise, pas Gecko. Point. Mais vous pouvez m’éclairer dans les commentaires hein.
Donc on ne peut pas écrire input:before ou input:after pour Gecko. Ça le laisse de marbre.

Si on y réfléchit bien, les checkbox se baladent pas comme ça sur une page, elles sont souvent – que dis-je, toujours – accompagnées d’un label. Et puisque cette satanée checbox ne veut rien entendre sur Gecko ben je vais causer à son copain le label.

Discussion CSS intégrale :

.test input {
  position: relative;
  vertical-align: middle;
  margin-left: 8px;
  display: none;
}

.test label {
  margin-left: 40px;
  position: relative;
}

.test p {
  height: 32px;
}

.test input:checked+label:before {
  background-color: hsl(119, 23%, 57%);
}

.test input:checked+label:after {
  left: -20px;
}

.test label:before {
  content: "";
  position: absolute;
  top: 0;
  left: -28px;
  display: block;
  width: 28px;
  height: 16px;
  background-color: #e6703a;
  border-radius: 10px;
  margin-top: 0;
  margin-left: -6px;
  border: 2px solid hsl(0, 0%, 77%);
  box-shadow: inset 0 1px 3px hsla(0, 0%, 26%, 0.65);
}

.test label:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 14px;
  background-color: #f5f5f5;
  box-shadow: 0 1px 5px #444;
  position: absolute;
  top: 2px;
  left: -32px;
  -webkit-transition: left .3s ease-in-out;
  -moz-transition: left .3s ease-in-out;
  -o-transition: left .3s ease-in-out;
  transition: left .3s ease-in-out;
}

.test input[disabled]+label:after {
  display: none;
}

.test input[disabled]+label:before {
  background-color: #fafaf8;
  box-shadow: inset 0 0 3px hsla(0, 0%, 26%, 0.65);
  opacity: .6;
}

Et on obtient ça, sur Gecko et Webkit :

Alors, c’est qui le patron, hein ?

En guise de conclusion, je dirai que c’est fastoche on prend pas en compte Internet Explorer, mais libre à vous d’essayer sur cette base moi j’ai pas ce navigateur sur ma machine et je veux pas devenir fou. Pour Opera ça presque marche, si les spécialistes veulent s’y coller et contribuer à cet article vous êtes les bienvenus.

Allez je vous laisse je vais peindre une girafe.

UPDATE : La même chose en live

Voir input et mourir

Wed, 07 Dec 2011 08:38:47 +0100

HTML5 c’est bien. CSS3 aussi.
Bon ok faut pas vouloir faire un dégradé rapidement qui soit compatible Gecko/Webkit, ni faire en une ou deux lignes une boîte avec des coins arrondis.
En plus on a de nouveaux jouets, comme les input type=‘search’. Justement en parlant de ça, il se trouve que pour un client je me suis retrouvé devant une maquette où se trouve un champs de recherche habituel, celui-ci étant habillé de gris entre autres choses… À charge pour moi de faire une intégration HTML5/CSS3 de la chose.

Comme je passe pas mes journées à intégrer des inputs j’ai commencé par des tests. Et là, c’est le drame.
Voici une page html standard pour mon test :

<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="utf-8" />
   <title>input[type="search"]</title>
   <meta http-equiv="X-UA-Compatible" content="chrome=1">
</head>
<body>
   <form id="search">
      <input type="search" placeholder="Rechercher…" name="q" autocomplete="off">
   </form>
</body>
</html>

On peut constater d’emblée une différence fondamentale de rendu entre Gecko et Webkit

Différences de rendu entre Gecko et Webkit pour <input type="search">

Qu’importe me dis-je, je m’en vais y mettre un coup de CSS dans sa face et on verra bien qui est le maître du monde. Dont acte :

	#search input[type="search"] {
		display: block;
		background-color: #666;
		color: #fff;
		border: 1px solid #666;
		border-top-color: #454545;
		border-left-color: #454545;
		padding: 10px;
		font-size: 16px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		width: 190px;
	}

Et quand on vérifie le rendu dans Gecko et Webkit on se rend compte qu’on a pas le cul sorti des ronces

Les CSS c’est beau… quand ça marche

Diantre, normalement ça marche. Et pas là… Après avoir vérifié et revérifié le html et la css — les coquilles ça arrive — j’ai ouvert ma page dans Safari et en vérifiant la page avec l’inspecteur web j’ai découvert avec horreur que Webkit utilise ses propres règles CSS pour afficher un input type="search".

Là où Gecko se borne — pour l’instant — à afficher un input tout à fait classique, Webkit utilise des règles CSS très propriétaires pour singulariser ce type d’élément de formulaire. Si on scrute avec l’inspecteur voilà ce que nous dit Webkit :

input[type="search"] {
	-webkit-appearance: searchfield;
	box-sizing: border-box;
}

Donc, si on court-circuite la façon dont Webkit gère l’affichage il y a de fortes chances que notre super CSS s’applique aussi correctement. Après avoir cherché un peu voilà ce qu’il faut déclarer pour Webkit :

#search input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

Voilà, court-circuit de -webkit-appearance et -webkit-box-sizing et avec le code css complet on a enfin un affichage identique d’un navigateur à l’autre.

La CSS finale :

#search input[type="search"] {
	display: block;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	background-color: #666;
	color: #fff;
	border: 1px solid #666;
	border-top-color: #454545;
	border-left-color: #454545;
	padding: 10px;
	font-size: 16px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	width: 190px;
}

On vient de quitter une époque ou la simple évocation de “compatibilité IE6” provoquait des vomissements et des crises d’eczéma chez les webdesigners pour se retrouver dans une ère où il faut être encore plus prudent, très au courant des derniers développements, et aussi très malin pour ne pas avoir à ré-écrire dans 18 mois tout ou partie de nos CSS. Je ne sais pas si on y a gagné en flexibilité, au moins on y a gagné en possibilités nouvelles… on verra dans quelques mois ce qu’il en coûte. Ou pas.

Où l’on s’aperçoit qu’on s’est fait chier pour pas grand-chose