Sunfox » standards du web

Bouton Paris Web 2008

Sunny — Fri, 24 Oct 2008 13:55:20 +0000

Parmi les boutons de promotion pour Paris Web 2008 il en manquait un.

Internet Locker

Sunny — Wed, 23 Jan 2008 00:26:46 +0000

Internet Explorer aura un système pour activer leur nouveau modèle de rendu dans sa version 8 sans pour autant que les sites précédents ne cessent d’être aussi « jolis » dessus. Il s’agit d’utiliser une balise meta qui contient la version d’IE que l’on souhaite cibler. Pour IE8 par exemple :

C’est une sorte de contrat. En utilisant cette balise on s’assure qu’IE9, IE10 et IE42 l’afficheront de la même façon qu’IE8. Un Doctype Switching sur le long terme. Et les oiseaux chantent.

Mais voilà. Ce serait une bonne idée si seulement ce n’était pas une très mauvaise idée. Toutes les pages écrites hier en suivant les standards du web seront pour l’éternité affichée dans le moteur de rendu par défaut. Celui d’IE7. Gulp. Et IE devra se trimballer son moteur de rendu d’IE7 pour l’éternité également. Ce qui implique un beau bordel pour le logiciel lui-même et sa sécurité.

Cette solution qui paraissait simple se complique encore lorsque l’on évoque le cas des fragments d’html, des pages MySpace, des aggrégateurs. Que se passe-t-il également lorsque des pages qui ciblent des versions différentes ou discutent entre elles dans des iframes aux niveaux différents de DOM ? Et devra-t-on suivre pour chaque chaque page la version de tous les navigateurs du marché dans laquelle elles fonctionnent ?

Le versionnement des fichiers en général n’est pas aussi simple. La meilleure solution à ce problème appliquée à Internet est encore le progressive enhancement : implémenter des fonctionnalités nouvelles en cassant le moins possible l’existant et accepter que quelques pages ne seront plus parfaitement égales au pixel près.

L’image du verrou provient de la libraire Tango et l’icône d’Internet Explorer est celle de Sam Ruby. Vous pouvez télécharger la source SVG.

Tout nu

Sunny — Thu, 05 Apr 2007 08:10:18 +0000

Aujourd’hui c’est le jour du CSS tout nu !

Robots.txt ou comment se couper du web

Sunny — Wed, 28 Feb 2007 19:08:49 +0000

Je rencontre de plus en plus un phénomène qui m’irrite beaucoup, celui de bloquer l’accès à tout son site à tous les robots, via son fichier robots.txt.

L’intérêt des règles de ce fichier est de bloquer l’accès à des ressources sensibles (personnelles, d’administration, de statistiques, que l’on ne souhaite indexer nulle part, etc.) par les robots qui suivent le protocole. On spécifie alors quel chemin bloquer pour quel robot.

User-agent: *
Disallow: /

Ces lignes-là en revanche bloquent l’ensemble du site à tous les robots. Y compris aux moteurs de recherche. Y compris aux pings, aux trackbacks. Y compris (en théorie seulement) aux lecteurs de fils de syndication. Y compris aux futures applications qui naîtront du web.

Il est agaçant de voir qu’on ne peut pas utiliser un moteur de recherche externe quand le moteur interne d’un site n’est pas assez performant, voire inexistant. Agaçant également de ne pas pouvoir revenir en arrière dans les versions précédentes du site. Agaçant enfin de voir sa conduite imposée par les créateurs du site. Par exemple, cela m’interdit de faire un script qui récupère tout seul les dernières versions du site pour les lire hors-ligne.

Karl par exemple, que j’admire énormément par ailleurs, interdit l’accès à tout son site par tous les robots. Il se justifie par « l’esclavage 2.0″ des données mais milite d’autre part pour que le web devienne sémantique, pour que le sens de ce qu’on publie sur internet soit lisible… par des robots.

Certes il faut se méfier des dérives, du vol d’informations, du partage sans retour, etc. Mais tout de même, sans Google, sans Archive.org, sans les services pour rechercher, archiver et simplifier nos vies, internet ne serait pas un aussi chouette endroit.

Today’s rant

Sunny — Wed, 28 Feb 2007 17:58:53 +0000

Regardez autour de vous : tous les sites d’actualité ont amoché leurs URIs pour qu’ils puissent figurer dans Google News, ce tyran qui force à avoir au moins 4 chiffres uniques à la suite dans l’URI de chaque article.

Gravatar sort de sa léthargie

Sunny — Mon, 19 Feb 2007 12:39:16 +0000

Gravatar vient enfin de sortir de sa léthargie. Après 6 mois d’attente on peut de nouveau uploader un avatar.

Ce si long blocage couplé aux anciens déboires et à la lenteur générale du site de Gravatar est bien la preuve qu’un système aussi centralisé n’est pas une bonne solution. J’en profite donc pour me créer un Pavatar et l’implémenter sur mon journal grâce au très bon plugin identikit pour WordPress.

« Pa~~s gra~~vatar »

Pour avoir un avatar sur sunfox vous pouvez désormais, et dans cet ordre :

Renvoyer sur votre site le header X-Pavatar: http://url-de-votre-avatar
Renvoyer dans le de votre site la balise :
Avoir à la base de l’url que vous avez donné un pavatar.png
Avoir à la racine de l’url que vous avez donné un pavatar.png
Avoir un compte Gravatar 2.0

Première semaine de piscine

Sunny — Mon, 02 Oct 2006 13:41:13 +0000

INSIA

Première semaine à l’INSIA, l’école d’ingénieur qui rokse tout. Les trois premières semaines sont des semaines de piscine, appellées ainsi pour nous mettre rapidement dans le bain, sans même passer par le pédiluve.

Au programme introduction à linux, scripting bash, bases de données, SQL, balisage sémantique. Que du bonheur. Les professeurs sont (presque) tous des cadors et l’on peut se délecter de chacun de leurs mots.

Vivement les rendus ! :]

Apéro Paris Web 2006

Sunny — Sun, 24 Sep 2006 14:05:59 +0000

La crème de la crème du web était réunie autour d’un verre Jeudi soir, après les conférences Paris Web 2006 du jour. La bonne ambiance qui y règnait me fait regretter de ne pas avoir pu assister aux conférences qui, aux dires de ceux qui y étaient étaient sensationnelles.

La prochaine fois je réserverais plus tôt et j’oserais aller dire bonjour à tout le monde, promis.

Les affreux liens mailto

Sunny — Thu, 24 Aug 2006 21:26:29 +0000

Une des choses qui me fait hurler quand je surfe c’est de cliquer sur un lien intitulé par exemple « Contact » ou « Jean Dupont » et de ne pas être renvoyé vers une page web mais de voir mon client d’emails se lancer à cause d’un lien mailto:.

Non seulement mon client de courrier électronique se mets par dessus mon navigateur en prennant une plombe à se charger, mais en plus il n’est même pas configuré pour envoyer des emails vu que j’utilise exclusivement un webmail. Que penser de ceux qui utilisent un ordinateur dans un cyber-café ?

Quand un utilisateur clique sur un lien il s’attend à se retrouver sur une autre page. Quand il clique sur le nom de quelqu’un il s’attends à voir sa biographie. Quand l’intéraction va à l’encontre des expectations de l’utilisateur, celui-ci se sent sans contrôle et perds de la confiance qu’il accordait au site.

Si vous faites un lien mailto, par pitié, faites le sous cette forme : jean.dupont@example.com.

Cela m’ammène à penser que je crois n’avoir jamais, de toute ma vie, directement cliqué sur un lien mailto pour envoyer un email. Même lorsque j’avais un lecteur de courrier. En faisant un copier/coller on sait à quoi on s’attend, l’on peut choisir l’application que l’on veut, où l’on veut insérer l’email et c’est universel. (Un clic simple ne mettra jamais le récipient dans un champ cc ou à la fin d’une liste de plusieures adresses par exemple).

Je me demande bien QUI se sert de ces satanés mailto ?

CSS oh oui CSS

Sunny — Thu, 11 May 2006 10:03:57 +0000

Si vous aussi vous voyez toute la beauté qui s’écoule des feuilles de style écoutez et téléchargez cet hymne aux feuilles de style CSS.

De belles paroles, une jolie mélodie, une jolie voix et un très bon style ;). Le tout sous une licence Creative Commons bien evidemment.

Choisir un doctype

Sunny — Mon, 20 Feb 2006 15:21:25 +0000

D’après les standards chaque fichier HTML doit obligatoirement déclarer tout en haut son type de document. Cela permet aux validateurs et aux navigateurs de savoir à quelle version d’HTML ou d’XHTML se référer pour comprendre et afficher le contenu.

HTML 4.01

Mon conseil est que si vous ne savez pas quoi prendre prenez :

Cette ligne définit votre document comme étant du HTML 4.01 strict. Cette version du HTML mets en avant la structure du document plutôt que sa présentation, donne de la sémantique aux éléments et permet une utilisation maximale des feuilles de style CSS.

En revanche si votre code inclut des éléments dépréciés d’HTML 4.01, des target sur les liens ou des balises de présentation vous pouvez utiliser la version transitionnelle de ce DTD :

Si votre site utilise des frames vous pouvez utiliser cette variante :

XHTML 1.0

L’XHTML 1.0 strict est une version en vrai XML du HTML. Voici le doctype à utiliser dans ce cas :

Il a aussi une version transitionnelle si vous utilisez les mêmes balises que l’HTML Transitionnel :

Même chose si vous utilisez des frames :

Autres Goûts

Vous pouvez utiliser des versions plus ancienne de l’HTML comme l’HTML 3.2 ou encore l’HTML 2.0. Ces versions bien que très bien supportées par le plus grand nombre des navigateurs ne supportent pas toutes les nouveautées du 4.01 comme les indispensables feuilles de style, les frames, etc.

Et si un de ces doctypes ne vous convient pas, que vous avez besoin d'autres éléments non reconnus comme par exemple la balise embed ou bgsound, vous pouvez toujours fabriquer votre propre DTD personnalisé.

Couleurs html !

Sunny — Mon, 19 Dec 2005 11:11:33 +0000

Retrouvez ci-dessous la liste de toutes les couleurs avec un nom en html, de quoi découvrir des noms sympas comme cornflowerblue ou encore lightgoldenrodyellow :)

Nom de la couleur		Aperçu
aliceblue	aliceblue
antiquewhite	antiquewhite
aqua	aqua
aquamarine	aquamarine
azure	azure
beige	beige
bisque	bisque
black	black
blanchedalmond	blanchedalmond
blue	blue
blueviolet	blueviolet
brown	brown
burlywood	burlywood
cadetblue	cadetblue
chartreuse	chartreuse
chocolate	chocolate
coral	coral
cornflowerblue	cornflowerblue
cornsilk	cornsilk
crimson	crimson
cyan	cyan
darkblue	darkblue
darkcyan	darkcyan
darkgoldenrod	darkgoldenrod
darkgray	darkgray
darkgreen	darkgreen
darkkhaki	darkkhaki
darkmagenta	darkmagenta
darkolivegreen	darkolivegreen
darkorange	darkorange
darkorchid	darkorchid
darkred	darkred
darksalmon	darksalmon
darkseagreen	darkseagreen
darkslateblue	darkslateblue
darkslategray	darkslategray
darkturquoise	darkturquoise
darkviolet	darkviolet
deeppink	deeppink
deepskyblue	deepskyblue
dimgray	dimgray
dodgerblue	dodgerblue
firebrick	firebrick
floralwhite	floralwhite
forestgreen	forestgreen
fuchsia	fuchsia
gainsboro	gainsboro
ghostwhite	ghostwhite
gold	gold
goldenrod	goldenrod
gray	gray
green	green
greenyellow	greenyellow
honeydew	honeydew
hotpink	hotpink
indianred	indianred
indigo	indigo
ivory	ivory
khaki	khaki
lavender	lavender
lavenderblush	lavenderblush
lawngreen	lawngreen
lemonchiffon	lemonchiffon
lightblue	lightblue
lightcoral	lightcoral
lightcyan	lightcyan
lightgoldenrodyellow	lightgoldenrodyellow
lightgreen	lightgreen
lightgrey	lightgrey
lightpink	lightpink
lightsalmon	lightsalmon
lightseagreen	lightseagreen
lightskyblue	lightskyblue
lightslategray	lightslategray
lightsteelblue	lightsteelblue
lightyellow	lightyellow
lime	lime
limegreen	limegreen
linen	linen
magenta	magenta
maroon	maroon
mediumaquamarine	mediumaquamarine
mediumblue	mediumblue
mediumorchid	mediumorchid
mediumpurple	mediumpurple
mediumseagreen	mediumseagreen
mediumslateblue	mediumslateblue
mediumspringgreen	mediumspringgreen
mediumturquoise	mediumturquoise
mediumvioletred	mediumvioletred
midnightblue	midnightblue
mintcream	mintcream
mistyrose	mistyrose
moccasin	moccasin
navajowhite	navajowhite
navy	navy
oldlace	oldlace
olive	olive
olivedrab	olivedrab
orange	orange
orangered	orangered
orchid	orchid
palegoldenrod	palegoldenrod
palegreen	palegreen
paleturquoise	paleturquoise
palevioletred	palevioletred
papayawhip	papayawhip
peachpuff	peachpuff
peru	peru
pink	pink
plum	plum
powderblue	powderblue
purple	purple
red	red
rosybrown	rosybrown
royalblue	royalblue
saddlebrown	saddlebrown
salmon	salmon
sandybrown	sandybrown
seagreen	seagreen
seashell	seashell
sienna	sienna
silver	silver
skyblue	skyblue
slateblue	slateblue
slategray	slategray
snow	snow
springgreen	springgreen
steelblue	steelblue
tan	tan
teal	teal
thistle	thistle
tomato	tomato
turquoise	turquoise
violet	violet
wheat	wheat
white	white
whitesmoke	whitesmoke
yellow	yellow
yellowgreen	yellowgreen

Interviewé dans SVM

Sunny — Thu, 20 Oct 2005 15:55:36 +0000

Courez dans un kiosque ! Le magazine SVM de novembre vient de sortir, et je suis interviewé dedans ! Avec photo en plus ! Wow ! Il faut que je reprenne mon souffle après tant d’émotions.

« Sunny Ripert, 20 ans, webcoder, étudiant en informatique, globe-trotter du Web »

SVM est un magazine sur la micro et les nouvelles technologies. Grand public, ça a toujours été mon magazine préféré avec SVM Mac à l’époque de mon Power PC.

Je suis interviewé à propos du Web 2.0, sa révolution et l’avenir du Web. Cette interview entre dans tout un dossier extrêmement intéressant qui porte sur le web caché, le web interdit et les nouvelles façons de surfer, etc. Je vous invite vivement à le feuilleter, on y apprends quelques trucs sympas.

Grand merci à Etienne Thierry pour s’être tourné vers moi pour toutes ses questions sur le Web de demain ;). Je suis ravi qu’on parle dans un magazine grand public de ce mouvement de fond qui s’opère et de la façon dont le web murit :).