Chez Jérémie - Mot-clé - paris-web

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

Paris-Web 2010 : CSS3 Aujourd'hui

Jeremie — Wed, 16 Feb 2011 13:00:00 +0100

Maintenant, que les vidéos sont en ligne, voici un petit retour sur Paris-Web 2010 ou j’ai animé un atelier sur le thème “CSS3 Aujourd’hui”.

Depuis maintenant 5 ans, Paris-Web, c’est un peu le rendez-vous annuel des faiseurs de Web français. Cette année fut assez exceptionnelle, et tous les participants (visiteurs, orateurs et organisateurs) sont tous à peu près d’accord pour dire que c’était un excellent millésime (si ce n’est le meilleur pour l’instant). Les conférences étaient d’un niveau exceptionnel, l’organisation sans tache et le hashtag #sharethelove a été largement employé sur Twitter pour qualifier l’ambiance générale (bon, on n’a pas pu éviter tous les trolls, mais ça s’est bien passé).

Sur les conférences, j’ai noté en particulier celle de Anne-Sophie Fradier sur la macro-typographie (qui a subtilement servi de tremplin au projet que j’ai monté avec elle et d’autres d’un site dédié à la typographie sur le Web) et celle de Paul Rouget sur les nouvelles API issu de HTML5. Paul était super content car d’une part tout a marché et les démos montrées étaient franchement bluffantes (faire un sondage en live grâce aux Web Sockets, c’est un peu la classe quand même).

De mon coté, j’ai animé un atelier sur le thème “CSS3 Aujourd’hui”. J’y ai passé en revue ce qu’il est possible de faire dès à présent avec CSS3 en commençant quand même sur quelques rappels importants liés à CSS2. En effet, CSS3 n’est jamais qu’une “amélioration” de CSS2. L’atelier s’est bien passé mais il a duré 1h30, là ou j’avais du matériel pour 3h. Ceci dit, grâce à la vidéo, je me rends compte que ça ne s’est pas trop vu (sauf vers la fin), même si je n’ai pas pu entrer dans le code autant que je le voulais. Ceci dit, il a été possible de bien discuter avec la salle (c’était le but, mais dans la vidéo c’est un peu frustrant car il n’y avait pas de prise de son d’ambiance) et les principaux thèmes ont pu être vu.

Si vous y étiez ou si vous voulez voir les exemples en même temps que vous regardez la vidéo, toutes mes slides sont disponibles :

http://jeremie.patonnier.net/experiences/parisweb2010/

Ainsi que tous les exemples de code :

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

Et donc, la vidéo de l’atelier car cette année pour la première fois, certains ateliers ont été filmés (merci aux étudiants de Cifacom et à l’équipe Paris-Web pour le boulot réalisé) :

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