Je donne une conf\u00e9rence, qui vous en dira un peu plus sur comment j’ai cr\u00e9\u00e9 ce site web, en particulier du c\u00f4t\u00e9 des images, aux Rencontres Mondiales du Logiciel Libre \u00e0 Montpellier le 9 juillet, \u00e0 16h30, dans le B\u00e2timent 6 de l’Universit\u00e9 Montpellier II…<\/p>\n

Pour avoir tous les d\u00e9tails, je vous invite \u00e0 lire la description de la conf\u00e9rence sur le site web des RMLL<\/a>.<\/p>\n

https:\/\/nylnook.art\/\/fr\/wp-content\/uploads\/sites\/2\/image-responsives-nouveaux-traiteme_low.mp4<\/a><\/video><\/div>\n

Vous pouvez aussi voir la vid\u00e9o sur le site web des RMLL<\/a>.<\/p>\n

Le pitch<\/em> :
\nAujourd\u2019hui, la plupart des images sont vues sur des \u00e9crans… qui ont toute sortes de tailles, de d\u00e9finitions, de ratios et m\u00eame de formes : comme le design se fluidifie via le web, les images commencent \u00e0 apprendre \u00e0 s\u2019adapter, \u00e0 \u00ab\u00a0s\u2019\u00e9lastifier\u00a0\u00bb, \u00e0 se recadrer, \u00e0 se d\u00e9former…<\/p>\n

Le Responsive Images Community Group (des membres de Google, d\u2019Opera et de Mozilla ) vient de publier (le 11 avril 2014) un brouillon de sp\u00e9cification pour l\u2019\u00e9l\u00e9ment HTML . Cet \u00e9l\u00e9ment, en bonne voie d\u2019adoption, nous permettra d\u2019afficher la bonne image pour le bon \u00e9cran sur le web.
\nCela veut aussi dire qu\u2019au lieu d\u2019une image, il faudra en pr\u00e9parer plusieurs pour les yeux de nos visiteurs interconnect\u00e9s. Mais… nous n\u2019avons pas vraiment les outils pour produire ces images !<\/p>\n

Une premi\u00e8re solution serait d\u2019utiliser des images vectorielles (g\u00e9om\u00e9triques), qui n\u2019ont pas de r\u00e9solution et s\u2019adaptent \u00e0 toutes les tailles. C\u2019est tr\u00e8s bien pour des ic\u00f4nes par exemple. Mais pour les photos et les illustrations (les images matricielles) ?
\nOk, on pourrait patiemment utiliser notre Gimp ou Photoshop favori pour recadrer chaque image pour chaque dimension dont nous avons besoin… et multiplier \u00e7a par les 30 images de notre site web, pour y passer 2 jours… !
\nSinon, on apprend un peu de programmation, on se fait un joli script, et on traite toutes nos images d\u2019un coup … mais en aveugle ! Ainsi on se retrouve avec des portraits cadr\u00e9s \u00e0 cot\u00e9 du visage, ou des paysages entiers de 280 pixels de large.<\/p>\n

En fait il y a une autre solution, qui vient du monde de la vid\u00e9o : utiliser un logiciel de traitement d\u2019image \u00ab\u00a0par n\u0153uds\u00a0\u00bb, ou \u00ab\u00a0par n\u0153uds et graphs\u00a0\u00bb ou \u00ab\u00a0bas\u00e9 sur le flux\u00a0\u00bb (flow-based programming). Des logiciels libres bas\u00e9s sur ce concept commencent \u00e0 appara\u00eetre (Blender, ButtleOFX, imgflo).
\nIl y a beaucoup d\u2019autres avantages aux syst\u00e8mes de n\u0153uds :
\n– c\u2019est tr\u00e8s souple (plusieurs entr\u00e9es\/sorties, mise \u00e0 jour en temps r\u00e9el)
\n– \u00e9dition non destructive
\n– l\u2019historique des op\u00e9rations est sous nos yeux (plus besoin d\u2019annuler\/refaire)
\n– on d\u00e9finit le flux de travail une seule fois, et on le r\u00e9utilise \u00e0 l\u2019infini
\n– on peut s\u2019en servir pour une seule image ou pour en traiter des milliers \u00e0 la fois
\n– pas besoin de savoir programmer ou scripter
\nmais :
\n– ce n\u2019est pas tr\u00e8s habituel, il faut un peu de temps pour apprendre \u00e0 s\u2019en servir<\/p>\n

Pour expliquer la m\u00e9canique, j\u2019utiliserai l\u2019exemple de mon cas concert : un site web \u00ab\u00a0responsive\u00a0\u00bb d\u2019illustrations et de fonds d\u2019\u00e9cran (nylnook.com).<\/p>\n","protected":false},"excerpt":{"rendered":"

Je donne une conf\u00e9rence, qui vous en dira un peu plus sur comment j’ai cr\u00e9\u00e9 ce site web, en particulier du c\u00f4t\u00e9 des images, aux Rencontres Mondiales du Logiciel Libre \u00e0 Montpellier le 9 juillet, \u00e0 16h30, dans le B\u00e2timent 6 de l’Universit\u00e9 Montpellier II… Pour avoir tous les d\u00e9tails, je vous invite \u00e0 lire […]<\/p>\n","protected":false},"author":1,"featured_media":661,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"godot_game_meta":[],"pulp_press_meta":[],"pulp_comic_meta":[],"inline_featured_image":false,"nylnook_wp_meta":[null],"footnotes":""},"categories":[1],"tags":[21,27,50,53],"class_list":["post-93","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-formation","tag-geek","tag-tutoriels","tag-video"],"_links":{"self":[{"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":4,"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"predecessor-version":[{"id":663,"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/posts\/93\/revisions\/663"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/media\/661"}],"wp:attachment":[{"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nylnook.art\/fr\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}