Le Carnet de Thierry

Les aventures de Thierry Régagnon sur le Web et au Japon.


Paris Web ’09, J’y serais !

Je sors mon blog de sa torpeur pour vous informer que je serais présent à l’édition 2009 de Paris Web, qui aura lieu du 8 octobre au 10 octobre. Et contrairement aux éditions précédentes, cette fois-ci, je serais présent en tant qu’orateur avec une conférence et un atelier.

Paris Web 2009 : J'y serais!

Conférence

Je présenterai ma conférence vendredi matin. Elle s’intitule Référencement & Standards Web : la même destination.

Je vais profiter du temps qui m’est alloué pour montrer que le référencement naturel et les standards web ont des intérêts communs, en particulier sur le terrain du web sémantique (ou web des données) avec les langages Microformat et RDFa qui commencent à être pris en compte par les moteurs de recherche.

Atelier

Samedi après-midi, j’animerai avec Marie Alhomme, un atelier présentant les outils qu’ont maintenant les intégrateurs à leur disposition pour accélérer leur travail, ainsi qu’identifier et corriger efficacement les bugs. L’atelier s’appelle Le kit du parfait petit intégrateur . Si vous connaissez HTML/CSS et cherchez à découvrir les outils ou méthodologies pour passer à la vitesse supérieure, ne manquez pas notre atelier !

Rendez-vous à Paris Web

J’espère donc vous voir la semaine prochaine à Paris Web. La conférence avec le meilleur rapport qualité/prix pour les professionnels intéressés par la qualité web. N’hésitez pas à venir me parler, une conférence se définit aussi par les discussions qui y ont lieu.

Contrat de freelance : un exemple

L’une des erreurs les plus graves que doit pouvoir faire un créateur de site web qui se lance à son propre compte, est d’oublier de faire signer un contrat à ses clients. Ne pas se mettre d’accord sur certaines règles de bases avec ses clients, c’est chercher les problèmes et risquer se faire mener par le bout du nez par certains clients indélicats.

L’une des bonnes surprises du calendrier de l’avent pour professionnel du web 24 ways, fût l’article d’Andy Clarke : Contract Killer. Andy Clarke dirige depuis maintenant 10 ans l’agence web Stuff and Nonsense. Dans cet article, il présente le contrat qu’il a écrit et utilisé ces dernières années. J’ai trouvé l’intiative très sympa, et j’ai donc choisi de le traduire.

Lire ‘Contrat de freelance : un exemple’

Coup de pouce aux Validateurs W3C

En ces temps d’annonces de la publication du WCAG 2, une autre information risque malheureusement de passer à la trappe : le W3C lance un appel au don pour aider l’évolution logistique et le développement des validateurs.

Si vous vous souciez de la qualité de vos pages HTML, vous êtes sûrement un habitué du validateur HTML ou CSS du W3C. Il s’agit sans nulle doute des pages les plus consultées du W3C. Ces outils ont besoins de serveurs, de bande passante et de temps de développement pour assurer leur pertinence.

Vous pouvez donner aux validateurs un petit coups de pouce en faisant un don, en devenant sponsor ou en vous impliquant dans leur développement. (les applications du W3C sont en Open Source)

I heart validator

Je profite de l’occasion pour rappeler aux utilisateurs de Mac OS X, qu’il existe une application vous permettant de tester vos pages localement selon le validateur HTML du W3C : Validator S.A.C.. Très simple à mettre en place (c’est une application comme les autres), on peut glisser les fichiers sur l’icône pour valider, et il est possible de la faire fonctionner en tant que service web. A garder précieusement sur son disque dur.

Les favicons de l’iPhone : les Apple Touch Icons

Les possesseurs d’iPhone ou d’iPod Touch sont des utilisateurs un peu à part. Ils ont leur propre format de favicon. Les favicons « classiques » ne sont pas affichées par Safari Mobile. Mais il est par contre possible de définir une icône à afficher sur l’écran d’accueil (utilisée comme raccourci). Je vous conseille fortement de prendre le temps de créer une icône pour ses utilisateurs. Si aucune icône n’a été définie pour le site web, Safari Mobile réalise une capture d’écran de la partie visible de la page afin de l’utiliser pour icône. En pratique, à moins d’avoir un site comportant des couleurs vives et uniques, à partir de la deuxième icône de ce style, il devient très difficile d’identifier le raccourci.

Capture d'écran d'un iPhone montrant les deux types d'icones (capture du site et personnalisée)

Comme vous pouvez le voir avec cette capture d’écran de mon iPhone, l’icône générée automatiquement est totalement inutile car il est quasiment impossible d’identifier le site web (pour cette exemple, mon blog) et en plus elle est moche! Par contre, l’icône personnalisée a l’air d’être native à l’iPhone et attire le regard, ce qui est idéal pour les utilisateurs exigeant que sont les consommateurs des produits Apple.

Comment fait on pour personnaliser ces icônes?

Premièrement, ce n’est applicable que sur les iPhones avec au moins la mise à jour 1.1.3 comportant la fonctionnalité Web Clip. Je pense que tous les iPhones sont à jours, mais on ne sait jamais…

Il faut savoir que l’iPhone applique 3 effets avant de rajouter l’icône sur l’écran d’accueil :

  • des bords arrondis,
  • une ombre sous l’icône,
  • un aspect brillant.

Une icône avant et après l'ajout des effets visuel par l'iPhone

Ne donnez donc pas un aspect brillant ou des bords arrondis à votre image. Cela ferait double emploi… L’iPhone attend une image au format PNG de 57 par 57 pixels, dans le cas contraire l’image est redimensionnée à la bonne taille.
Mise à jour du 28 juin 2010 : Avec la sortie de l’iPhone 4, la taille maximale des icônes est passée à 114 par 114 pixels pour tenir compte du nouvel écran.

Le plus simple pour appliquer l’icône sur tout un site web, est de la mettre à la racine avec le nom : apple-touch-icon.png. Depuis la version 2.0 du firmware de l’iPhone, il est possible d’indiquer par le nom du fichier, que l’on ne veut pas des effets visuels supplémentaires. Pour cela le fichier doit s’appeler : apple-touch-icon-precomposed.png.

Mais si on ne veut appliquer l’icône que sur sur une page, ou un ensemble de pages? Dans ce cas-là, il vous faut la définir directement dans le section head de votre document HTML par ce bout de code :

<link rel="apple-touch-icon" href="/nom-icone-personalisee.png" />

L’effort n’est pas monstrueux et c’est beaucoup plus confortable pour les utilisateurs d’iPhone et d’iPod Touch. Vos internautes pourront alors être fiers d’arborer le raccourci de votre site sur leur écran d’accueil.

Voici 2 articles de l’Apple Developer Connection sur le sujet :

Paris Web 2008

Si vous lisez mon flux Twitter, vous savez sûrement que je suis revenu du Japon mardi dernier. L’une des raisons de ce retour, est que je voulais assister à la 3e édition de Paris Web. Il s’agit de l’événement français à ne pas louper pour toutes personnes s’intéressant aux standards web, à l’accessibilité et à la qualité web.

Paris Web 2008

L’association Paris Web aura réussi à faire venir une belle palette d’orateurs. On notera en particulier la présence d’au moins une personne représentant chacun des navigateurs principaux (IE, Firefox, Opera et Webkit). Dont Chris Wilson qui est aussi co-chair du groupe de travail W3C sur HTML5 et Daniel Glazman co-chair du groupe de travail W3C sur les CSS.

Cela nous a offert une belle table ronde à la fin de la journée de vendredi.

Table ronde rassemblant des représentants des principaux navigateurs web

Les présentations et les ateliers étaient dans l’ensemble vraiment intéressants. Le clou du spectable (en dehors de la présentation de Christian Heilmann qui sait vraiment assurer un show) fut la présentation de Stéphane Deschamps et Aurélien Levy sur l’accessibilité. Simple, avec des mises en situation, elle a permis de donner des indices sur ce qu’est le quotidien de nombreuses personnes et ce qu’il est possible de faire pour leur simplifier la vie.

Une mise en situation de deux personnes les yeux bandées pour comprendre l'accessibilité

Les moyens étaient aussi au rendez-vous. Comme l’année précédente, il a été possible de bénéficier de l’IBM Forum Paris. Et les ateliers ont eu lieu à l’EFREI, école plus spacieuse par rapport à celle de l’année dernière.

La cerise sur la gâteau qui méritent vraiment d’être signalée, était la présence lors de la première journée de traducteurs en langue des signes française.

Quand vous ajoutez à tout cela, les rencontres et les discussions intéressantes qui ont lieu en ce genre d’occasion. On réalise qu’il s’agit de l’un des meilleurs évènements du milieu.

Vous trouverez le reste de mes photos dans mon album Flickr de l’événement. Il y a aussi un groupe Flickr qui rassemble toutes les photos prises.

Les vidéos des présentations seront rendues disponibles dans quelques temps. Rappel, il est toujours possible de voir celles de 2007. Quand aux présentations, elles arrivent petit à petit sur Slideshare. Vous les trouverez en jonglant entre les tags pw2008 et parisweb2008.

Il est maintenant temps de retourner au travail, inspiré par ces 3 journées riches en information. Merci beaucoup aux organisateurs et aux orateurs. On se donne rendez-vous pour Paris Web 2009.

Distribution de mouchoirs

À Tokyo, vous êtes en permanence soumis à des affiches, des vidéos, des opérations de promotion dans la rue, des employés de magasin qui vous proposent de jeter un œil à leurs produits, etc. Et bien sûr, en plus de tout ça, on vous distribue dans la rue du matériel publicitaire. Cela ne se limite pas qu’aux prospectus. En été, vous aurez droit à des éventails en plastique. Mais le grand classique pendant toute l’année, est le mouchoir en papier.

Voici 3 paquets de mouchoirs publicitaires que j’ai ramené un jour après m’être baladé rapidement à Shinjuku. Et encore, je n’ai pas accepté tout ce que l’on me proposait.

Trois paquets de mouchoirs publicitaires mis en éventail

Ainsi, vous pouvez vous rassurer, aucun risque de tomber à court de mouchoirs si vous êtes enrhumé au Japon. Dommage par contre qu’il soit malpoli de se moucher en publique.

Trois paquets de mouchoirs publicitaires côte à côte

(Mention spéciale pour les mouchoirs en papier noir qui ne doivent pas être donnés)

L’Accessibilité au quotidien au Japon

Mon intérêt pour ce qui touche à l’accessibilité sur le web, m’a amené à avoir un regard différent dans les lieux publiques. J’ai maintenant un œil beaucoup plus critique sur l’ergonomie et l’accessibilité des lieux publiques. Le Japon, c’est révélé très intéressant sur le sujet. Je vous propose vous montrer rapidement ce qui a été mis en place dans les gares japonaises.

Plan pour aveugles équipé d'un haut-parleur pour attirer l'attention

La borne prise en photo au dessus, possède un plan en relief et en braille de l’intérieur de la gare. En dessous se trouve un haut-parleur qui produit à intervalles réguliers le même son afin d’attirer l’attention. Même si l’accent a été mis pour les personnes aveugles, ce plan est utilisable par tout le monde.

Lire ‘L’Accessibilité au quotidien au Japon’

Le Daibutsu de Kamakura

Kamakura, ancienne capitale japonaise, est célèbre pour son grand nombre de sanctuaires shintoïstes et de temples bouddhistes. L’un des temples bouddhiste les plus connus est le Kōtoku-in car on y trouve un daibutsu (un grand Bouddha).

Le Daibutsu

Le daibutsu a été achevé en 1252. Il était autrefois à l’intérieur d’un énorme hall, mais le bâtiment qui l’abritait a été détruit par un tsunami en 1495. Il siège donc depuis à l’extérieur.

Le daibutsu est fait de bronze. Il mesure 11,4 mètres (Wikipedia rapporte 13,35 mètres, mais ils comptent peut-être le piédestal) et pèse 850 tonnes. Cette statue est basé sur une plus grande située à Nara (ancienne capitale). N’étant jamais aller à Nara, je n’ai pas pu le constater, mais l’opinion générale est que le daibutsu de Kamakura est plus esthétique.

Lire ‘Le Daibutsu de Kamakura’

Boissons chaudes au Japon

On s’approche de plus en plus de l’hiver et cela se sent dans les températures. Il a fait 17°c aujourd’hui sur Tokyo! Heureusement demain il fera 20°c. Fini le temps des manches courtes… Mais cela annonce aussi le retour des boissons chaudes.

Ainsi depuis quelques temps, on trouve dans les distributeurs et les combini des canettes de café ou de thé chaudes.

Distributeur de canettes proposant des boissons chaudes et froides

Sur cette photo d’un distributeur, la rangée bleu indique les boissons froides et la rangée rouge, les boissons chaudes.

Les canettes sortent très chaudes des distributeurs. C’est limite si je ne me suis pas brulé en prenant les photos de ces deux canettes. Mais vaut mieux ça qu’avoir un café froid!

Une canette de café Roots :

Cannette chaude de café Roots

Il y a beaucoup de publicité dans les gares pour cette boisson.

J’adore la phrase en bas de la canette… Real technology brings you an aromatic coffee break and a fine life.

J’attends que l’on m’explique ce qu’est la véritable technologie. Surtout cela peut m’apporter une pause café aromatique et une bonne vie!

The Royal chaud (avec du lait) par Lipton :

Canette chaude de The Royal

Cela ne vaut pas un vrai café ou un vrai thé. Mais en déplacement, il est parfois bien agréable d’avoir une boisson chaude.

The Typing of the Dead

Le Japon est l’un des rares pays à avoir ses salles d’arcade, appelés Game Center, toujours aussi populaires et nombreuses. Plusieurs raisons peuvent expliquer l’engouement continue des japonais pour ces lieux de loisirs. J’en distingue en tout cas 2 principales :

  • Les machines acceptent les pièces de 100 yen et n’imposent pas, comme en France, de transformer sa monnaie en jeton. Ainsi, si vous avez quelques pièces de 100 yen dans votre poche et que vous passez devant un Game Center, vous êtes plus facilement tenté de faire une partie.
  • Les jeux sont variés, originaux et il y a toujours des nouveautés. Même si on peut trouver la borne d’un jeu dans sa 5e évolution, de nouveaux concepts sont en permanence inventés. Le concept de jouer avec une guitare virtuel comme dans Guitar Hero, a été inventé au Japon en 1998 avec Guitar Freaks.

Et les sociétés productrices de jeux vidéos vont parfois très loin. Je vous présente par exemple, cette borne de Sega : The Typing of the Dead

The Typing of the Dead

Avec un nom comme ça, quel peut bien être le contrôleur de cette borne?

Le clavier qui contrôle la borne d'arcade : The Typing of the Dead

Un clavier bien-sûr! (vous noterez le petit logo Dreamcast sur le clavier)

La borne d'arcade : The Typing of the Dead

Le principe du jeu est simple, il vous suffit de taper les mots qui apparaissent sur les zombies (« DORU » sur le photo). Une fois le mot complété, la balle est tirée.

Oh je sais, ce jeu est loin d’être récent. Presque 10 ans… Mais de voir cette vieille borne d’arcade dans un coin d’un Game Center, j’ai trouvé qu’il s’agissait d’une bonne illustration de la diversité de ce que l’on peut y trouver.

Je vais essayer de vous ramener quelques photos des bornes que l’on trouve la plupart du temps dans les Game Center. Mais pour ça, il va falloir que je me la joue furtif…