Chez Jérémie - Mot-clé - conférence

Des kiwis sans pépins

Jeremie — Sun, 06 May 2012 22:52:00 +0200

J’ai eu la chance de participer à la Kiwi Party organisé le 4 mai 2012 par l’agence Alsacréations. En toute simplicité, j’ai envie de dire : « c’était vachement bien ! ».

Avant toute chose, un grand bravo au staff qui a assuré grave pour faire de cette journée un franche réussite et un remerciement tout spécial à Mme. Goetter qui a passé 15 jours en cuisine pour nous offrir un goutaÿ™ épique

En suite, un grand merci également a tous ceux qui sont venu à Strasbourg pour assister à l’événement. votre enthousiasme, votre plaisir manifeste à être là ont fait de ce moment un moment exceptionnel.

Au niveau des conférences, nous avons eu droit à un panel de très bon orateurs avec des sujets allant du référencement au développement en passant par l’accessibilité et la conception. Une partie des conférences ayant eu lieu en parallèle les unes des autres, je n’ai pas pu voir tout ce que je voulais, mais heureusement, elles ont toutes été filmées. Vivement que ces vidéos soient diffusées car j’ai hâte de voir les conférences de Vincent de Oliveira sur les effets graphiques avancés et celle de Frédéric Kayser sur la gestion des images pour le Web.

Parmi celles que j’ai pu voir, deux ont plus particulièrement retenu mon attention :

« Le développement HTML5 au sein de Windows 8 » présenté par David Rousset. Il s’est agit d’une excellente introduction aux principes de développement d’applications HTML5 pour Windows 8. Ce fut vraiment l’occasion de voir à qu’elle point Microsoft a décidé de jouer le jeu des standards du Web. Et même si toute la couche d’accès au système (appelée WindowsRT) reste encore une API JavaScript propriétaire, je suis persuadé que le développement des Web API standards permettra à Microsoft de d’offrir toujours plus d’interopérabilité.
« Conquérir l’internet des objets avec les technologies web » présenté par Steren Giannini. Si j’ai malheureusement raté le début de la conférence, ce que j’en ai vu m’a passionné. En particulier, il est vraiment intéressant de voir à quel point le Web sort de plus en plus des navigateurs traditionnels pour aller se nicher là ou on ne l’attend pas. C’est également très instructif de réaliser à quel point la diversité des supports rend toute forme de prédiction sur l’usage, l’interactivité ou le rendu visuel complètement hasardeuse.

De mon coté, j’ai eu la lourde tache de clôturer la journée en proposant une introduction aux transitions et animations CSS3. Je suis bien sur très mal placé pour juger ma performance, mais le nombre de retours extrêmement positifs que l’on m’a fait laisse penser que ça s’est plutôt bien passé (J’ai même eu droit à une tape sur l’épaule et à un « super » de la part de Karl Dubost… je croie que désormais, je peux mourir l’esprit en paix :P). Les slides de cette présentation sont bien sur disponible en ligne :

Voila encore merci à tous. Vivement l’année prochaine

Paris Web 2011 : SVG et Typographie

Jeremie — Tue, 18 Oct 2011 16:58:00 +0200

Paris Web 2011 s’est tenu les 13, 14 et 15 octobre dernier. Cette année encore j’y étais et force et de reconnaitre qu’une fois de plus, l’équipe a sué sang et eau pour en faire un évènement de qualité inégalé. Bravos à tous, vous avez assuré grave

Le programme était vraiment d’excellente facture, et je retiendrai en particulier deux conférences : D’une part, celle d’Antony Ricaud qui a pris le temps d’expliquer et de détailler comment fonctionne un navigateur (chose que peu de web designer connaissent mais qui explique beaucoup de choses, comme par exemple “pourquoi les sélecteurs CSS sont lus de droite à gauche”) ; D’autre part, celle de celinecelines qui a fait la démonstration d’une énergie incroyable et d’un enthousiasme peu commun, mais ô combien communicatif et stimulant. Merci Céline.

De mon coté, ça a été un peu le grand schelem. En effet, l’équipe d’organisation à accepter toutes mes propositions (‘^_^) je me suis donc retrouvé à présenter un lightning talk, une conférence et un atelier… argle !

Lightning talk

Le challenge consistait à parler d’un sujet pendant seulement 4 minutes. Ça demande d’aller droit à l’essentiel et d’être percutant. Vu que je traitai déjà de sujet assez sérieux pour ma conférence et mon atelier, j’ai proposé un “truc rigolo”. J’ai donc fait une animation SVG pour illustrer la lutte permanente des standards du Web pour un Internet meilleur. J’ai demandé l’aide de ma collègue Corinne Massacry pour réaliser tout le “Character Design” et j’ai réalisé toute les animations à la main (il n’y a pas d’éditeur d’animation SVG connu à ce jour, donc, tout à la mimine… ce qui prend un temps infinie, j’ai terminé l’animation la veille de la conf en y passant la nuit :-/)

Voila le résultat :

Vous pouvez télécharger le fichier SVG ici : http://jeremie.patonnier.net/experiences/parisweb2011/animation.svg

Pour la petite histoire, l’ensemble des éléments graphiques ont été réalisés avec Adobe Illustrator. Pour ce qui est de la réalisation de l’animation, dans le mesure où, lorsqu’on code à la main, c’est très difficile de se déplacer d’un point à l’autre de l’animation, je l’ai animée à l’envers. Concrètement, j’ai animé la dernière scène, puis l’avant dernière scène, etc. De cette manière, à chaque fois que je rafraichissais l’animation, je voyais immédiatement ce que je venais d’animer sans avoir à attendre que le début de l’animation soit joué (plusieurs minutes) pour pouvoir vérifier ce que je venais de faire (parfois moins d’une seconde d’animation)

Conférence : “La typographie, mon navigateur et moi”

Lors de cette conférence, j’ai eu l’occasion d’expliquer comment les polices typographiques sont miraculeusement affichées par les navigateurs Le coté sympa, c’est qu’à l’origine, cette conférence devait durée 30 minutes et que suite au désistement de dernière minute d’un orateur, elle a finalement pu durée 1 heure avec plein de questions et réponses. Je vous met les slides ici, mais la vidéo sera sans doute beaucoup plus intéressante. Je vous tiens au courant dès qu’elle est disponible.

Atelier : “SVG et le web design moderne”

1h30 à la découverte de SVG. Je ne cache pas que pendant l’atelier j’ai un peu angoissé en voyant les nombreux visages extrêmement sérieux et concentré en face de moi. Heureusement, il semblerai que l’atelier ait bien plus à tout le monde. Je vous met ici les slides, les exemples et les différents liens que j’ai eu l’occasion d’évoquer.

Les slides : http://jeremie.patonnier.net/experiences/parisweb2011/atelier/presentation.odp
Les exemples :
- Exemple d’un fichier SVG basic : http://jeremie.patonnier.net/experiences/parisweb2011/atelier/basic.svg
- Les différentes manière d’inclure du SVG dans du HTML : http://jeremie.patonnier.net/experiences/parisweb2011/atelier/inclusion.html
- Comparaison entre SVG, RaphaelJS et Canvas : http://jeremie.patonnier.net/experiences/parisweb2011/atelier/svg-raphael-canvas.htm
- Exemple d’usage avancé avec CSS3 : http://jeremie.patonnier.net/experiences/parisweb2011/atelier/monsieur-ou-madame-1.htm
Les liens à voir (en vrac) :
- http://raphaeljs.com
- https://github.com/wout/raphael-svg-import
- http://mbostock.github.com/d3/
- http://jvectormap.owl-hollow.net
- http://rickardsund.com
- http://discover.store.sony.com//piiq/
- http://evolutionofweb.appspot.com
- http://vlog.it
- http://type.method.ac
- http://www.goodreads.com (l’icone de “rating” est en SVG et reprend les données réelles de vote sur chaque livre)
- http://www.drawastickman.com
- http://www.nissanusa.com/leaf-electric-car/index
- https://developer.mozilla.org/en/SVG

Là aussi, la vidéo sera bien plus parlante, je vous la mettrai dès qu’elle sera là

Voila, comme d’habitude, c’était bien chouette, encore un gros merci aux organisateurs et vivement l’année prochaine (mais je proposerai moins de choses parce que là, c’était vraiment trop dur de préparer tout ça).

Mais qu'est-ce que c'est donc qu'il se passe ?

Jeremie — Tue, 26 Oct 2010 11:08:00 +0200

Certains auront peut être remarqué que je n'ai rien posté ici depuis un moment. Il faut bien avouer que les 3 derniers mois ont été un peu chargés.

Premièrement, J'ai été bien accaparé par la préparation de l'atelier que j'ai donnée à Paris-Web 2010 sur le thème "CSS 3 Aujourd'hui". Je vous en reparlerai prochainement, car cette année, quelques ateliers ont été filmés, dont celui-ci :D En attendant, pour ceux que ça intéresse, vous pouvez retrouver les slides et les exemples que j'ai utilisé. Mon seul regret, c'est que l'atelier durait 1h30 alors que j'avais de la matière pour faire un atelier de 3h. Promis, l'année prochaine j'essayerai de faire mieux (si le staff me laisse encore animer un atelier ).

Les slides : http://jeremie.patonnier.net/experiences/parisweb2010/
Les exemples : http://jeremie.patonnier.net/experiences/parisweb2010/exemples/

Deuxièmement, Je travaillais sur un nouveau site qui vient tout juste d'être lancé. En collaboration avec Anne-Sophie et Virginie, nous sommes heureux de vous annoncer la sortie du site Typographisme.net. Je ne vais pas vous remettre ici le billet d'ouverture, mais pour faire simple, on aime le Web design, on aime la typographie... on trouvait dommage que personne ne parle pas plus des deux à la fois.

Ceci étant, je devrais vite retrouver une activité plus normal (pour ce que ça vaux) car j'ai pas mal de truc à raconter sur SVG et sur CSS (et un peu aussi sur HTML)

@media London 2010 : Day 4

Jeremie — Fri, 11 Jun 2010 21:28:00 +0200

Quatrième et dernier jour à Londres. Programme toujours aussi intense pour cette dernière journée avec encore six conférences de prévus. Heureusement, cette fois-ci les choix ont été un peu moins dure à faire.

La conférence d'ouverture est assuré par Andy Clark (« Hardboiled web design »). Andy est un vraie show-man et il joue sur un parallèle entre le web design et le roman noir pour expliquer que les web designers sont comme des détectives inflexibles : il doivent faire face à des conventions et des idées préconçus pour atteindre leur but : ex. « CSS3 n'est pas encore disponible dans IE » ce à quoi il répond « Oui, et alors ? ». Assez ironiquement, ce n'est pas un problème nouveau dans le web design. En effet, les théories de l'enrichissement progressif et de la dégradation harmonieuse date du début des années 2000 avec l'arrivée de CSS 2... étonnement les discourt étaient les mêmes à l'époque. Pour moi qui travail dans le Web depuis plus de 10 ans, ce n'est pas nouveau, mais c'est quelques choses qui doit être répéter encore et encore, surtout pour tous les jeune qui ne connaissent le Web que depuis quelques années (moins de 5 ans environ). Andy est un fervent partisan (pour ne pas dire un fanatique) de la logique de dégradation harmonieuse. C'est d'autant plus important que chaque navigateur à des capacité différentes et qu'il est impossible de fournir un design ou une expérience utilisateur exactement identique avec tous les navigateurs... il faut savoir lâcher prise pour ce concentrer sur l'important : l'utilisateur et l'accès qu'on lui donne à un service.

Au delà des différences entre navigateurs, le mode de construction de CSS3 est très particulier. En effet, CSS3 est composé de modules et rien ne garantie que les constructeurs de navigateurs acceptent de les implémenter tous, même si tous étaient à l'état de recommandation validé (ce qui en soit n'a rien de sur, après tout, CSS 2.1 n'est pas encore une recommandation du W3C, mais seulement un recommandation « proposée »). Globalement, cette présentation est une version concentré de l'atelier du premier jours.

Pour la deuxième conférence, il y avait le choix entre Matt Biddulph (« Mobile social location ») et Sandi Wassmer (« Inclusive design is for everyone »). Les deux sujets ne m'inspire pas plus que ça... bon, j'irai voir Sandi.

Avant de rentrer dans le vif du sujet, Sandi commence par faire le distinguo entre Design et Art. La différence principale résidant dans l'aspect « utile/utilisable » explicite du Design. Un bon design a des objectif claire et suit un certain nombres de principes dont elle détaillera quelques uns mais sans trop insister. Plus spécifiquement, les designs inclusifs sont des designs qui sont prévus pour tenir compte de tous les utilisateurs, quelque soit les capacités et handicaps de chacun... et ce n'est pas seulement une question d'accessibilité. Globalement, cette conférence insiste sur le fait qu'un bon Design est avant tout orienté utilisateur (c'est un peu le leitmotive de toutes les conférences : pensez à l'utilisateur avant tout, c'est tout bénéfice pour vous), que ce soit au niveau du look & feel ou au niveau de l'architecture de l'information... rien de vraiment neuf sous le soleil. C'est peut être parce que ce sont de notions que je connais déjà, mais ça me donne l'impression d'enfoncer des portes ouverte. J'en ressort vaguement dessus.

Troisième conférence, cette fois avec au choix : Hannah Donovan (« Telling Stories through design ») ou Patrick H. Lauke (« Brave New World of HTML5 ») en remplacement de Bruce Lawson. C'est mon coté geek qui l'emporte, en avant pour HTML 5.

Cette conférence est une revue de détail de ce qu'il est possible d'utiliser aujourd'hui en provenance de la future norme HTML5. Avant toute chose, Patrick commence par débroussailler tous le bruit qu'il y a autour du mot « HTML 5 » qui a tendance à devenir un « buzz word ». Il fait un petit passage historique avec l'initiative WHAT-WG, l'abandon de XHTML 2.0 et la réintroduction du projet WebForms au sein du W3C qui donnera le HTML 5.

A bien des égards HTML5 entre en compétition avec Flash et Silverlight, mais essentiellement à un niveau peu perceptible par les utilisateurs et n'a pas vocation à les remplacer mais plutôt à les compléter en donnant aux développeurs la possibilité de choisir la technologie qu'ils veulent selon le contexte d'utilisation. Fondamentalement HTML5 est une simple évolution de HTML4 qui standardise un grand nombre de comportement liée au fonctionnement interne des navigateurs. Cela fait de HTML un langage à la fois plus strict (le comportement de tous les navigateurs sera unifié) et plus permissif (la syntaxe reste très, très souple... trop dirons certains). HTML5 rajoute également un certains nombre de nouvelles balises et un certains nombre de nouvelles API pour Javascript. Une des fonctionnalités les plus attendu est sans doute tout ce qui touche à la gestion des formulaires et en particulier à la validation du contenue de formulaire sans avoir recourt à Javascript. Patrick parle aussi évidement de la gestion de la video et de l'audio (LA fonctionnalité qui fait le buzz autour de HTML5 !), de la balise canvas (une zone de dessin accessible directement via Javascript mais attention au problèmes d'accessibilités, il insistera sur ce dernier point). La encore, je n'ai rien appris de neuf, mais Patrick est un excellent orateur qui sait communiquer son enthousiasme (il n'est pas Tech Evangeliste chez Opera pour rien ).

Pendant la pause déjeuner, une discussion s'improvise entre Andy Clark est une cinquantaine (!?) de personnes sur la difficulté qu'il y a à expliquer aux clients que le rendu d'un site web peut être parfois très, très différent d'un navigateur à l'autre. Gros débat qui ne trouvera pas sa conclusion aujourd'hui, mais va très certainement se continuer en ligne dans les semaines qui arrivent (à suivre sur @malarkey)

L'après midi-débute avec la quatrième conférence. Tant pis pour Relly Annett-Baker (« All the small things »), mais je vais voir Remy Sharp (« Browser with wings: HTML 5 API ») histoire de compléter la conférence du matin.

Comme lors de la conférence de Patrick Lauke, Remy commence par démonter le hype autour de HTML 5, pour ensuite s'attacher au cœur du sujet : les nouvelles API introduites par HTML5 pour Javascript :

D'abords les médias avec la gestion de la video et de l'audio. Les API associés permettent de contrôler le fonctionnement de ces éléments ce qui permet de créer des contrôles personnalisés.
Canvas qui est une zone de dessin vierge qui n'a de sens qu'avec son API de dessin. Elle permet de dessiner n'importe quoi dans un contexte 2D (le dessin dans un contexte 3D est encore hyper expérimental, en particulier au travers de l'API WebGL, mais devrait voir le jour très prochainement, Chrome et Firefox y travail dure) et d'exporter le résultat.
Les API de stockage qui permettent de stocker des données localement sous forme de paire clé / valeur. Ce stockage peut être permanent ou limité dans le temps (pour la durée de la session utilisateur par exemple). Il est aussi possible d'aller plus loin avec les API SQL qui repose sur l'utilisation d'une base de données SQL dans le navigateur, en l'occurrence IndexDB.
L'API de géolocalisation permet elle d'accéder à la position géographique de l'utilisateur (s'il le souhaite).
Les Web Socket permet de gérer un flux de donnée binaire permanent, montant et descendant entre le navigateur et le serveur (cette API, en dehors de son support dans les navigateurs à aussi besoin de bénéficier de serveurs capables de gérer de tels flux) ce qui permet d'implémenter à peut près n'importe quel protocole de haut niveau (XMPP par exemple) en Javascript.
La gestion de la mise Offline permet de savoir quand un navigateur est déconnecté et de proposer des actions dont le résultat ne sera réellement exécuté qu'une fois le navigateur reconnecté (par exemple avec un webmail). Il est également possible de gérer assez finement le cache des éléments nécessaires à l'application grâce au manifeste de cache.
Enfin, L'API de fichiers permet d'accéder au système de fichier local du navigateur.

Bien que HTML5 soit encore en cours de normalisation (tous les navigateurs n'ont pas encore implémenté toutes ces API ou pas forcement exactement de la même façon) on peut déjà commencer à utiliser ce qui existe. Certes avec prudence, mais c'est possible, en particulier avec toutes les solution de substitution et de contournement qui existent.

L'avant dernière conférence (déjà !?) offre le choix entre Aral Balkan (« The art of emotional design ») et Steve Souders (« Even faster web sites »). Depuis le temps que j'entends parler de Steve, impossible de manquer ça. Aller hop !

Steve revient sur la question des performances coté client. Il ne s'étend pas trop sur les méthodes et l'outillage, il se contente de nous montrer rapidement les différences et points communs existant entre Yslow et PageSpeed. En effet, l'essentiel de sa présentation tourne autour de tests réalisés par Google (Steve travail pour Google) qui permettent de mettre en évidence les amélioration de performances mises en œuvre par les différents éditeurs de services en lignes. On voit bien à quel point les développeurs ont pris conscience de l'importance des performances au sein du navigateur (tout ce qui touche au chargement et à l'exécution du code par les navigateurs). Il nous parle d'ailleurs de l'émergence d'un nouveau métier : le WPO (Web Performance Optimisation) qui est au développement ce que le SEO est au marketing web.

La conférence de clôture sera assuré par Scott Berkun (« The myths of innovation, remixed and remastered »). Cette conférence assez théorique nous fait rentrer dans les mécanismes qui président à l'innovation et comment celle-ci est possible... on pourrait résumé sa pensé par l'expression « 100 fois sur le métier tu remettras ton ouvrage ».

Ce fut dense et de très haut niveau. Globalement les orateurs sont excellents et même si je n'ai pas appris grand chose sur HTML 5, les rencontres faites sur place ont été particulièrement enrichissante. L'organisation était au top. Si vous hésitez, je vous invite vivement à assister à la prochaine édition et entre temps, Paris-Web vous tend les bras au mois d'octobre

@media London 2010 : Day 3

Jeremie — Fri, 11 Jun 2010 01:03:00 +0200

Troisième jour à Londres. Aujourd'hui, fini les ateliers, c'est le débuts des conférences. Le programmes est dense et le choix de chaque conférence a été difficile. L'évènement à lieu au Hall Queen Elizabeth à proximité de la gare de Waterloo. Le lieu est bien choisi, et malgré la présence d'au moins 300 participants, on ne se sent ni à l'étroit ni perdu au milieu du vide. La qualité de l'accueil est impeccable, mais ce qui compte vraiment ce sont les conférences

Démarrage à l'américaine à 9h avec une courte introduction par john Allsopp qui plaisante un peu sur les australiens pour expliquer que @media est maintenant organisé par Web Direction qui est une entreprise australienne.

On enchaine directement par la première conférence : Brendan Eich (directeur technique de Mozilla Corporation) sur l'évolution de Javascript, langage dont il est à l'origine. Une session ultra technique (au réveil, ça fait mal), mais passionnante sur les prochaines évolutions de Javascript. Javascript est un langage à la fois très simple et très complexe avec beaucoup de subtilité. De gros travaux sont actuellement fait pour le rendre plus structuré et plus fiable, on à droit à une revue de détail, code à l'appuie.

Pour la deuxième conférence on à le choix entre il faut choisir entre Christian Crumlish (« Designing for play ») et Doug Schepers (« SVG today and tomorrow »). Dans la mesure ou j'ai déjà passé une journée avec Christian, je choisie d'aller voir Doug (et puis j'adore SVG, je suis en train de vous préparer un petit article sur le sujet).

La conférence démarre sur les chapeaux de roues, en effet, tous ses slides sont en SVG et on commence directement par une demo tiré du site SVG Wow! Plus prosaïquement, Doug nous présente tous ce qu'il est possible de faire avec SVG (découpes, filtres, animations, etc... je suis en train de préparer un article sur la question). C'est un grand tour d'horizon du sujet, exemple à l'appuis. Franchement je suis certain qu'avec la sortie de IE9, cette technologie va décoller de manière intensive. Pour mémoire, SVG est un format d'image vectoriel. D'ailleurs, Doug fait également le parallèle avec l'élément Canevas en montrant les différences entre ces deux technologie et comment elles se complètent. Il conclus en évoquant rapidement les outils qui permettent de créer des document SVG... et c'est sans doute là que se jouera l'avenir de ce format car pour l'instant, ce n'est pas très reluisant.

La troisième conférence met en compétition Rachel Andrew (« Core CSS3 ») et John "jQuery" Resig (« Testing mobile web apps »). Comme je maitrise déjà bien le sujet CSS3, pas d'hésitation, direction la conférence de John.

Le développement d'application web utilisant Javacript est de plus en plus communs, mais l'univers des mobiles est extrêmement hétérogène. John nous présente la démarche qu'il a suivit pour tester la prochaine version de jQuery sur les plateforme mobile. En effet, en temps que principal développeur de jQuery, il fait en sorte de s'assurer que ce Framework peut fonctionner sur les plateforme mobile les plus importantes. Une des principales difficultés et d'arriver à trouver des statistiques pertinentes pour savoir quoi faire et à qu'elle plateforme s'intéresser (en l'occurance : Symbian, iPhone OS, RIM et Androïd). Basiquement la stratégie de test à avoir est la même que pour les environnements de bureau (via une logique de qualification tel que celle utilisé par Yahoo!), mais la différence tiens au nombre de plateformes et de navigateurs bien plus important. Pour pouvoir faire des tests, les simulateurs (parfois difficiles à se procurer) sont un bon début pour réaliser un certain nombre de test automatique, mais il est toujours nécessaire de faire un test sur un support physique pour valider les partis-pris mis en œuvre. Au final on reste un peu sur sa faim car on ne découvre pas grand choses sur les résultats concret de ce travail. Par contre on ressort avec une vision assez claire de l'état de l'art des environnements mobiles, ce qui n'est pas rien.

Quatrième conférence de la journée, et cette fois ci, il faut choisir entre Tom Hughes-Croucher (« Introduction to server-side Javascript ») et Simon Willison (« Building crowdsourcing applications »). L'utilisation de Javascript coté serveur, même si c'est un sujet passionnant, n'est pas exactement ma tasse de thé. Je préfère donc aller voir Simon pour comprendre ce qu'il entend exactement quand il parle de « crowdsourcing ».

Simon commence donc par essayer de définir le termes « crowsourcing ». C'est essentiellement un buzz word comme a put l'être l'expression « Web 2.0 ». Il s'agit d'ailleurs de notions assez proches. L'expression « Intelligence collective » ne traine pas loin, mais n'est finalement pas utilisé. En fait, plutot que de s'essayer à une définition hasardeuse, il préfère utiliser des exemples pour définir le terme : wikipedia, openStreetMap, Google Image Labeler, Mapumental, XKCD.

Il rentre ensuite dans le détaille de ce qu'il à fait pour le site Internet du Guardian. Ils ont proposés aux visiteurs d'analyser, trier et voter pour les documents liés aux dépenses des parlementaires Anglais pour savoir sur quels sujets il fallait aller investiguer. Cette expérience a été faite deux fois ce qui à permis de l'améliorer à chaque fois en se reposant à la fois sur les mesures d'utilisation et sur les retour d'utilisateurs. Une conclusion intéressante fut de dire que finalement, peut importe qu'une expérience de crowdsourcing fonctionne ou non, il y a toujours quelque chose à en tirer.

On arrive à l'avant dernière conférence, et il faut encore choisir. Soit Mark Boulton (« Designing grid systems ») soit Jonathan Stark (« Building mobile apps »). Je préfère finalement aller voir Mark qui propose une conférence un peu plus généraliste sur un sujet assez chaud dans le milieu du webdesign : l'utilisation des grilles de mise en page.

Ça démarre assez lentement sur des considérations très théoriques, on pare de très loin, avec un passage historique par le gestion des container de fret maritime jusqu'au théorie canon de l'impression papier pour enfin commencer à arriver à parler de web (enfin bon, plus 20 minute pour en arriver là... ce fut très, très long pour pas grand chose). Enfin dans le vif du sujet, on en revient à la question essentielle : le web est un média à part entière avec ses propre règles graphiques. Il faut arriver à se détacher des maquettes Photoshop fixe pour arriver capturer l'essence du Web : la flexibilité. 3 notions sont en jeux : la notion de grille de mise en page flexible (pas de largeur ni de hauteur prédéterminé), la notion de taille d'image flexible et la notion d'espace visible (« viewport » en anglais). Le problème des supports physiques, c'est qu'ils mélangent la gestion du contenu et sa mise en forme. Le web sépare les deux, ce qui demande un gymnastique intellectuelle complètement nouvelle. Mark finira par détaillé explicitement les type de grilles possibles, mais comme cela arrive en fin de conférence, c'est survolé assez rapidement et on est finalement un peu frustré malgré la qualité de la prestation et de la démarche intellectuel, c'est un peu dommage.

La dernière conférence est une table ronde avec Jeremy Keith, Christian Crumlish, Hannah Donovan, John Allsopp et Simon Willison. Cette dernière partie est un peu décevante dans le sens où l'interaction avec la salle fut réduite à la portion congrue, ce qui donnait la sensation d'assister à une discussion d'expert sans vraiment y participer... sans doute le gros fail de la journée.

En conclusion, ce fut un journée dense avec des orateurs de haut niveau. Et même si la fin de journée fut un peut moins enthousiasmante (la fatigue aidant peut-être aussi), cela n'enlève rien au niveau global de cet événement qui permet de côtoyer certain des meilleurs web designer de la planète. Vivement demain pour la suite.

@media London 2010 : Day 2

Jeremie — Wed, 09 Jun 2010 19:41:00 +0200

Deuxième jours à Londres. Cette fois-ci, j'assiste à l'atelier « Designing Social Interface » conduit par Christian Crumlish (et toujours des photos sur Flickr)

Pour s'échauffer, Christian commence par nous faire un peu de théorie sociale et en particulier de ce que l'on met derrière le mot « Social »... il y a beaucoup plus de choses qu'on ne l'imagine mais basiquement cela revient à avoir des gens qui communiquent entre eux (ne rigolez pas, j'ai dit "basiquement"). Ensuite, Christian rentre dans la différence qu'il peut y avoir entre un utilisateur solitaire et un utilisateur qui interagie avec d'autres utilisateurs. Il définie 3 espaces sociaux : L'espace de l'utilisateur (centré sur lui même), l'espace de ses activités (centrés sur un objet externe), l'espace de ses interactions sociales (centré sur un ou plusieurs autres utilisateurs). La suite de la conférence ne fera que détailler concrètement ces 3 espaces.

On entre à présent dans des choses un peu plus concrètes. Les grandes lignes du design sociale suivent un certain nombre de points connus :

Travailler au service de l'utilisateur, par exemple en fournissant systématiquement des messages humainement compréhensible (en particulier les erreurs)... comme si le site avait une conversation humaine avec l'utilisateur (sans sombrer non plus dans une fausse idée de « robot parlant ») et de manière général en écoutant ses utilisateurs (en balisant les chemins de traverse... « paving the cow path » en anglais, j'adore cette expression).
Le deuxième point reprend un axiome connu des développeurs informatiques : « ne pas réinventer la roue ». Dans la logique social, c'est la même choses. Il est inutile de réinventer Facebook ou Twitter, utilisez les. A tout le moins utilisez des interfaces techniques interopérables avec ce type de services.
s'inspirer de la logique des jeux en en reprenant les grands points : la logique de notation, la logique de feedback, la possibilité d'interaction et de personnalisation
Le respect de la dimension éthique du service

Pour terminer ce premier échange, Christian nous propose un petit exercice pratique en nous demandant de choisir un sujet (un objet social) et de construire une proposition de site autour des principes vus pendant la matinée. Bon c'est un peu brouillon mais rigolo

Pour terminer cette première partie Christian approfondie la question de l'espace utilisateur. Cet espace comprend tous ce qui touche à son activité et son interaction avec le site : Inscription, Identification, Page d'accueil personnalisé, personnalisation du site (carte d'identité, avatar, gestion du profil utilisateur complet), gestion de la visibilité des données personnelles, accès au offres personnalisées, etc. Christian détail aussi la logique de réutilisation et la façon dont les usages d'un utilisateur évolues selon son degrés d'adhésion au service.

On enchaine sur nouvel exercice qui fait le lien avec le précédent. Cette fois, il s'agit de proposer et discuter des meilleurs actions à mener pour offrir un espace utilisateur adapté à l'objet social que nous avions sélectionné précédemment.

La deuxième partie de matinée est consacré à la présence en ligne : microblogging, liste d'amis, etc. Il enchaine sur la question de la réputation qui est un corolaire de la présence en ligne. La réputation se construit au travers des actions que l'on mène au sein d'une communauté. Il existe certains leviers de motivation pour agir et construire sa réputation. Leur mise en scène est souvent très inspiré des techniques ludiques (les jeux quoi :-p) : la collecte de bonus, le gains de points, les classements...

A nouveau on enchaine avec un exercice qui nous permet d'approfondir les différentes techniques sur des cas (quasi) réels.

On termine la matinée et on redémarre l'après-midi sur la question de l'espace des activités sociales. En effet, un site à vocation sociale doit proposer des outils qui permettent d'atteindre ses objectifs : Système d'expression (commentaire, feedback, blog, wiki), de notation, de discussion (chat, forum, murs de discussion), de socialisation (statuts, humeur, flux d'action), de partage (Sauvegarde, Favoris, Tags, recommandations)... un utilisateur doit pouvoir être actif. C'est l'occasion de faire un petit détour par le notion d'intelligence collective, mais pour une fois de manière assez réaliste. En effet, Christian détail bien les différents profil d'utilisateurs, certains très passif (les plus nombreux) et d'autres très actifs (les plus impliqués dans une communauté) avec une possibilité de progression d'un profil à l'autre mais sans garantie.

Et comme le matin, on passe à un exercice pratique de mise en situation.

Suite à cela, on passe à la question de l'espace des interactions sociales. Le cœur d'un système sociale passe par la gestion de la communauté qui le compose. Christian détaille les méthodes permettant à un utilisateur de gérer sa communauté de connaissance (non, pas forcément des amis ) :

La capacité de trouver des gens.
La capacité d'ajouter des gens à sa communauté.
La capacité de catégoriser ses relations avec les membres de sa communauté et de définir ce que l'on partage avec chacun.
La capacité de filtrer les contenus de sa communauté.
La capacité de signaler les abus.
La capacité de créer des liens en dehors du média (organiser des rencontres, se geolocaliser, se retrouver via mobile) et réconcilier le tout (importer/exporter ces informations pour un usage déconnecté).

Au final, la communauté interagie et trouve son propre mode de fonctionnement (définition de normes communes). Les outils mis à sa disposition doivent être là pour faciliter et encourager son développement et celle de l'utilisateur.

Et oui, vous l'aurez deviné, on passe à une mise en pratique de ce point.

Pour finir la journée Christian s'attaque au « Anti-Patterns » sociale, ce qu'on pourrait résumé par : ce qu'il ne faut pas faire.

Imiter quelque chose qu'on n'a pas compris ce qui le rend inutile.
Casser le principe de fonctionnement des e-mail (et plus généralement des différents services d'Internet).
Demander les identifiants d'un services à votre utilisateurs.
Ne pas gérer la fin d'une relation au sein du réseau.
Se donner des grands airs en proposant trop de choses inutiles.

Exercices ? Oui, oui : comment lutter contre les anti-patterns.

En conclusion, même si je pense que cet atelier aurait du s'intituler « Designing Social Websites » à la place de « Design Social Interface », ce fut une excellente journée, très enrichissante. L'équilibre entre théorie et pratique était bon et Christian est un excellent orateur. La matière de cette atelier était tiré de son livre « Designing Social Interfaces » dont le contenu est intégralement disponible en ligne sur le site http://www.designingsocialinterfaces.com

Les slides de l'atelier sont disponibles à cette adresse : http://mediajunkie.com/presos/wdx/DSI-wdx-@media.pdf

@media London 2010 : Day 1

Jeremie — Tue, 08 Jun 2010 22:17:00 +0200

Cette année j'ai pu me rendre à @media (c'est comme Paris Web, mais à Londres et en plus chère ). Ce cycle de conférences comprend 2 jours d'ateliers (1 atelier = 1 journée... autant dire qu'on rentre sérieusement dans le détail) et 2 jours de conférences. Choisir entre les différents ateliers fut une vraie torture, mais finalement, pour le premier jours, j'ai opté pour l'atelier de Andy Clark sur le thème « Advanced CSS styling ».

Les ateliers se tiennent au Goodenough College. Le lieu est superbe et « so british »... une quasi collection de clichés sur ce qu'est une école d'enseignement supérieur anglaise (quelques photo sur Flickr). Un écrin parfait pour un atelier de haut niveau.

En guise d'introduction, Andy commence par nous présenter le processus de standardisation et le jeu permanent qu'il existe entre le W3C et les fabricants de navigateurs. Il en profite pour démystifier le sujet en insistant sur un point clé : la normalisation est faite pour les constructeurs par les constructeurs. Le point de vue des designer est très peu représenté (il n'y a que 2 experts invités dans le groupe de travail CSS) et chaque constructeur suie ses propres contraintes liées à son business model. Pour conclure ce premier round d'échauffement, on a eu droit a un excellent mini débat sur le thème « Un site doit-il être exactement semblable d'un navigateur à l'autre ? »... Je parle d'échauffement car la réponse est évidente et les objections toujours les mêmes. Andy en profite ici pour mettre un coup de griffe aux graphistes qui persistent à présenter des maquettes de sites sous forme d'images figées et encourage tout le monde à présenter des maquettes HTML, même si ce ne sont que de simple « point d'étape » tout en démontrant les bénéfices à travailler dans une logique de dégradation harmonieuse. Il estime que les maquettes fixes sont un problème car elles ne permettent pas d'anticiper certaines contraintes propre au média (par exemple, que ce passe-t-il quand un titre prévus sur une ligne est trop long et passe sur deux ligne ?) et le client étant incapable de faire cette gymnastique mental, il ne comprendra pas pourquoi le design peut évoluer d'un navigateur à l'autre.

Suite à cela, on entre dans le vif du sujet avec une présentation en règles des nouveautés qu'apporte CSS3 en termes de Webdesign. Les principaux points abordés sont :

La gestion de la couleur avec en particulier la syntaxe rgba ;
La gestion des arrières plans avec en particulier les images d'arrière plan multiples (et plus généralement l'utilisation de valeurs multiples sur un certains nombre de propriétés) et la possibilité de gérer finement le positionnement et la taille de ces images ;
Les bordures avec une revue de détail des bords arrondis ;
Les ombres sur le texte et sur les boites de contenu (qui permettent de faire bien plus que de simples ombres portées);
La gestion de la mise en page avec un focus sur le colonage ;
Les transformations 2D et 3D ;
Les transitions.

Toutes ces nouveautés ne sont bien sur pas disponibles avec IE (on en reparlera lorsque IE9 sera là) mais Andy à une position très claire sur la question : Il design pour le navigateur le plus avancé en termes de support de CSS3 (Safari ?) et ensuite il s'assure que la dégradation se fait correctement, quitte à prévoir un design alternatif pour certains navigateurs quand la dégradation est trop importante. Ce qui est important, ce n'est pas le design, mais l'expérience utilisateur. C'est cette expérience qui doit être préservée, pas le design. Et pour Andy, qui est un excellent designer, le design n'est clairement pas l'alpha et l'oméga de l'expérience utilisateur. En particulier, il insiste sur le fait qu'un site peut être vue sur différents navigateurs dans des situations très différentes (un macbook, un iPad et un iPhone n'offrent pas les même conditions d'utilisation... oui, c'est un fan d'Apple ).

Après nous avoir bien alléché avec toute ses possibilités, se pose la question de les mettre en œuvre. Comme on a pris un peu de retard sur le programme, il se contentera d'évoquer quelques scripts permettant de contourner quelques limitation clé de certains navigateurs (par exemple ie-css3.js de Keith Clark) et surtout « Modernizr ». A titre personnel, je suis assez réticent à utiliser ce petit bout de Javascript mais Andy le vend très bien. Ceci-dit, il l'intègre dans une logique de travail incluant un savoir-faire de haut niveau qui en fait un vrai plus à utiliser et de fait, je reste persuadé que c'est un outil qu'il ne faut pas mettre dans les mains d'un débutant. En effet, Andy maitrise à la perfection les questions de dégradation harmonieuse et d'enrichissement progressif, en conséquence il sait parfaitement quand utiliser un facilitateur comme « Modernizr » et quand ne pas l'utiliser, ce qui n'est pas nécessairement le cas du webdesigner moyen (en admettant que la notion de webdesigner moyen ait un sens)

En guise de dessert, nous terminons l'après-midi avec la gestion des polices typographiques \o/. La quasi totalité des navigateurs actuels supporte la gestion des polices typographiques. Néanmoins, chacun utilise des formats différents (eot, ttf, woff...). On commence donc par débroussailler ce sujet en ayant droit à une petite visite des utilitaires du site fontsquirrel.com. Néanmoins, actuellement la question des droits d'utilisation des polices sur le web est un problème délicat. Andy nous présente alors typekit.com en détail (Disclaimer : typekit sponsorise Andy Clark pour son intervention, mais ça n'enlève rien à la qualité de l'outil). Ce site propose un système qui permet de résoudre efficacement la question des droits d'utilisation et un ensemble d'outil permettant de se customiser ses polices aux petits oignons. Enfin, on fait un petit coucou aux Google Font API qui présente une alternative gratuite à typekit mais dont le catalogue est encore assez pauvre. Objectivement, il n'y a aujourd'hui aucun frein technique à l'utilisation des polices typographiques embarquées dans les page HTML (sauf pour des questions de performances, mais c'est un autre débat).

Voila pour cette première journée. Ce fut un plaisir de rencontrer Andy. C'est un webdesigner extrêmement talentueux à la fois enthousiaste et réaliste. Son prochain livre sort en Septembre, autant dire que je l'attend impatiemment :D

Paris Web 2009 is on my mind

Jeremie — Thu, 10 Dec 2009 23:09:00 +0100

Paris Web 2009 s'est tenu les 8, 9 et 10 Octobre derniers. Pour tout ceux qui n'ont pas pu venir ou pour ceux qui n'ont pas pu assister à toutes les conférences (c'est à dire tout le monde puisqu'il y avait à chaque fois deux conférences simultanées), les vidéos sont en ligne sur DailyMotion. Enjoy Si vous voulez faire du rattrapage, il y a aussi les vidéos de l'édition 2008.

Les thèmes abordés sont extrêmement variés, de l'ultra technique au marketing pure, en conséquence je ne me risquerai pas à vous faire une recommandation de ce qu'il faut absolument voir. Je vais juste me contenter d'un peu d'auto-promo (ah ben oui hein)

Lors de cette édition, les organisateurs m'ont gentiment laisser discourir (merci à tout le staff qui à fait un travail de titan : bravo à vous). J'ai choisi d'aborder le sujet du Webdesign orienté business en essayant de montrer en quoi les contraintes des entreprises et des webdesigners peuvent êtres complémentaire et se nourrir les unes des autres. Voila le résultat :

Le Webdesign orienté business - Jeremie Patonnier