Chez Jérémie - Mot-clé - typographie

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

Alors s'en vient le temps du changement.

Jeremie — Wed, 13 Apr 2011 11:59:00 +0200

Je sais que je blogue assez peu en ce moment. Ne m’en veuillez pas, c’est qu’il se passe pas mal de choses actuellement pour moi avec peux de temps pour venir écrire ici.

D’abord, si vraiment vous voulez lire des trucs que j’ai écrit moi-même comme un grand, allez faire un tour sur typographisme.net, mon dernier billet en date parlant des ligatures dans les navigateurs.

En suite, je suis en train de préparer ma présentation pour SudWeb 2011. Comme je vais y parler de SVG, je ne peux bien sur pas faire autrement que de préparer un support de présentation lui aussi en SVG (il sera en ligne après la conf). Ça se passe le 27 mai à Nîmes, le programme est alléchant et le prix raisonnable, n’hésitez pas à venir y faire un tour.

Enfin, je change de travail Après 5 ans passé au sein de Cetelem (organisme de crédit pour les particulier du groupe BNP Paribas) en temps que responsable d’équipe de développement web, je vais rejoindre CleverAge où je serais consultant web (ou chef de projet ça dépendra des clients et des missions ). C’est prévu pour le 2 mai et en attendant, c’est un peu “je cours dans tous les sens pour plier les questions administratives”.

Sur ce… qu’un millier de colombes constipées illuminent votre journée.
A bientôt

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)