Sunfox


Articles mot-clétés standards du web

Bouton Paris Web 2008

octobre 24th, 2008 , 6 commentaires.

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

Paris-Web 2008, 13, 14 et 15 novembre : J'y serai pas mais allez-y quand même

Internet Locker

janvier 23rd, 2008 , 4 commentaires.

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 :

<meta http-equiv="X-UA-Compatible" content="IE=8" />

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.

Gouttes

Robots.txt ou comment se couper du web

février 28th, 2007 , 8 commentaires.

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.

[Photo d'un robot rouge]

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.

Gouttes

Gravatar sort de sa léthargie

février 19th, 2007 , 4 commentaires.

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.

"Pavatar : Reckognise Me" Logo
« Pas gravatar »

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

  1. Renvoyer sur votre site le header X-Pavatar: http://url-de-votre-avatar
  2. Renvoyer dans le <head> de votre site la balise : <link rel="pavatar" href="http://url-de-votre-avatar" />
  3. Avoir à la base de l’url que vous avez donné un pavatar.png
  4. Avoir à la racine de l’url que vous avez donné un pavatar.png
  5. Avoir un compte Gravatar 2.0

Première semaine de piscine

octobre 2nd, 2006 , 8 commentaires.

Logo de l'INSIA : Institut Supérieur d'Informatique Appliquée
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

septembre 24th, 2006 , 3 commentaires.

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

août 24th, 2006 , 5 commentaires.

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

mai 11th, 2006 , 2 commentaires.

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

février 20th, 2006 , 4 commentaires.

[Image HTML 4 Valide !] 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.
Suite de l’article…

Couleurs html !

décembre 19th, 2005 .

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 :)
Suite de l’article…

Interviewé dans SVM

octobre 20th, 2005 , 1 commentaire.

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 »

[Scan de l'interview]

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 :).

Web 2.0

octobre 19th, 2005 , 1 commentaire.

Nous entrons dans le Web 2.0 ! Mais euh quand est ce qu’on etait dans le Web 1.0 alors ?

Changements dans l’air…

Vous avez remarqué les changements sur la toile ces derniers temps ?

Flickr débarque avec son interface épurée, ses nouvelles façons de trier (les « tags ») c’est une vraie révolution ! Si on peut modifier nos photos avec seulement deux trois clics et sans même recharger la page, c’est grâce au fameux XmlHttpRequest ou AJAX, qui existe depuis belle lurette sans jamais être aussi bien exploité.

Puis c’est au tour de Gmail le webmail de Google de nous époustoufler avec son interface qui défie toute logique d’html. Le javascript est utilisé comme jamais il ne l’a été et l’on fait face à une vraie application, on classe les choses différement pour mieux les retrouver (les tags).

Le phénomène des blogs s’étend toujours plus et les sites commencent à dialoguer entre eux ! À travers le réseau on voit passer des pings, des trackbacks, des fils de syndication. Les « tags » pour classer de l’information fleurissent sur le web en même temps que les termes folksonomie et taxonomie pour définir cette nouvelle classification collaborative.

Web 0, 1 et 2

Le pas vers le Web 1.0 est pour moi le passage des pages html toutes simples crées une par une vers les des pages dynamiques crées grâce à des bases de données et des languages (PHP, CGI, etc.). C’est l’avènement des moteurs de recherche et des sites marchands.

0. HTML
1. HTML + PHP
2. HTML + PHP + WWW

Le Web 2.0 c’est un peu le passage du HTML vers le XML, c’est à dire un language tout d’abord d’affichage vers un language de stockage et de partage de données. L’info est brute et partagée avec de nombreux sites.

Ce sont en fait les mentalités qui changent. On s’ouvre dorénavant vers l’utilisateur. Les machines communiquent entre elles, pour faire arriver à l’utilisateur l’information que lui-même choisit. D’un kiosque où sont affichées des infos le web devient une application à part entière avec une place à chaque l’utilisateur.

Un site du Web 2.0 c’est quoi ?

  • des beaux URLs dès que possible (sans avoir tous les &= comme ça et pas ça)
  • un API pour entrer et sortir des informations du site
  • syndication des informations sous formats RSS, Atom, etc
  • récupération des informations d’autres sites
  • importante accessibilité (notemment avec du code respectant les standard du web)
  • interfaces claires, des plus minimales possibles
  • facile à mettre à jour sans connaitre de css ou d’html par exemple
  • mettre en commun des infos, du « social networking », de la classification collaborative

Exemples : flickr, delicious, gmail, examples, wikipedia, technorati, netvibes, , etc.

Pas de liens sur les images

mars 19th, 2005 , 5 commentaires.

Voici le grand principe html du jour : ne pas faire de liens hypertexte sur les images. Je m’explique.

Suite de l’article…

Coulisses du Roi Arthur

janvier 29th, 2005 , 4 commentaires.

Ça y est, le site du Roi Arthur est né, et c’est moi qui l’ai fait !

Chez Dualnet mon dernier projet a été de construire de A à z le site du DVD du Roi Arthur le film, pour Disney. C’est la première fois que je fais ce genre de site, et j’ai dû le faire entièrement tout seul.

Je suis assez fier du résultat, surtout en ce qui concerne l’html valide, léger et sémantique et le sacré usage des feuilles de style.

Croyez moi, ce respect des standards et cette accessibilité est une révolution dans ce genre de sites. Les sites commerciaux, de films, de DVDs et plus largement de publicité sont tous sauvagement crées pour ne fonctionner que chez la grosse partie des utilisateurs, en oubliant le reste.

C’est sans doute le seul site de film qui puisse être visité proprement à partir d’un PDA. Ou bien encore visité par un téléphone portable, un moteur de recherche ou encore un aveugle. (Si si, les aveugles aussi ont le droit de tout savoir sur le DVD du Roi Arthur… :p)

La balise <big>

janvier 26th, 2005 , 3 commentaires.

La sémantique HTML veut que l’on utilise les balises dont le nom décrit le contenu et non la forme. Par exemple, même si à-priori les deux balises suivantes donnent par défaut du texte en gras, <b> signifie « bold » (gras) et ne donne aucune information sur le contenu alors que balise <strong> signifie « texte plus important », et accorde un sens au contenu de la balise.

Les balises dépréciées en faveur de styles CSS sont donc <b>, <i> italique, <u> souligné, <strike> barré, <center>, <big>, <small>, …

Quoique… Les balises big et small sont des styles de texte certes, mais elles ont aussi un sens !

<big> a une dimension de hauteur, de mise au premier plan. Il se distingue de strong par son importance plus élevée, sa hauteur. C’est comme un header mais sans hiérarchie. Un lecteur vocal pourait, par exemple, le parler plus fort.

De même pour <small>. Il n’y a d’ailleurs aucune autre balise que celle-ci pour qualifier un texte qui est moins important que le reste !

Alors faut-il utiliser big et small ou utiliser des strong et des span stylés en CSS à la place ? Je pense que cette dernière solution serait une erreur, et qu’il faut utiliser ces deux balises oubliées pour leur donner le sens qu’elles aimeraient tant porter.

Vnunet relooké

janvier 10th, 2005 , 6 commentaires.

Je dois être le premier au monde à dire que vnunet.fr vient à l’instant de changer de look :D.

Reste quelques bugs à supprimer, mais sinon chapeau VNU, ça m’a tout l’air d’être réussi :). Le site semble être plus en adéquation avec les looks d’aujourd’hui. Construit sans tableaux, utilise un maximum de css, du XHTML 1.0, de la sémantique HTML, des accesskey, de l’url rewriting…

Par contre c’est un peu le bordel dans le code, l’utilisation des header laisser à désirer, c’est plein de javascript (apparemment inutile), liens visités non apparents, et caetera.

Mais un bon pas est un bon pas, et c’est très bien. Bravo.

Video de Zeldman

janvier 2nd, 2005 .

Voici une courte video de Jeffrey Zeldman sur les standards du web, pour les Web Essentials 04

Cette video retrace l’histoire de la récente montée des standards du web.

Ce qui est aussi intéressant –mis à part l’humour de Zeldman– c’est l’utilisation des sous-titres quicktime SMIL.

Gouttes


:D Sunny Ripert

est un développeur web vivant à Paris. Contact


Textes et contenus sous licence Creative Commons. Site propulsé par WordPres