L’esthétique vers l’interactivité

Le livre de Didier Goutman

J’ai le plai­sir de vous annon­cer une évo­lu­tion visuelle des pages “Hexa­gramme” impor­tante pour la suite de nos pro­jets !

Plu­sieurs d’entre vous ont en effet répon­du favo­ra­ble­ment à notre inten­tion de conju­guer les atouts du papier et du numé­rique. La pro­chaine étape « papier » sera la pos­si­bi­li­té d’imprimer le conte­nu des pages « Hexa­gramme ». Mais l’ancienne image en bas de page n’était plus en adé­qua­tion avec notre charte gra­phique…

Pierre Lau­tier, notre gra­phiste pré­fé­ré, vient donc d’en défi­nir une nou­velle. Je viens d’en construire les 64 variantes, et j’espère que cette évo­lu­tion esthé­tique vous plai­ra autant qu’à moi.

Afin de garan­tir une qua­li­té d’af­fi­chage opti­male, quelle que soit la taille de votre écran, ces images sont en mode vec­to­riel. Pour­quoi est-ce impor­tant ? Que vous consul­tiez l’En­cy­clo­pé­die du Yi Jing sur votre smart­phone, votre tablette ou votre ordi­na­teur, les images res­te­ront tou­jours nettes et pré­cises. Mais ce sont sur­tout de véri­tables pro­grammes : leurs mises en page et leurs conte­nus sont en fait du code infor­ma­tique. Pour vous don­ner un exemple, le léger flou autour de l’hexagramme prin­ci­pal se défi­nit ain­si :

   <fil­ter id=“shadow” x=”-20%” y=”-20%” width=“140%” height=“140%”>

      <feCo­lor­Ma­trix in=“SourceAlpha” type=“matrix”

         values=“0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 1 0” result=“lightGrayShadow”/>

      <feGaus­sian­Blur in=“lightGrayShadow” stdDeviation=“2” result=“blur”/>

      <feCom­po­nent­Trans­fer in=“blur” result=“softBlur”>

         <feFun­cA type=“linear” slope=“0.3”/>

      </feComponentTransfer>

      <feCom­po­site in=“softBlur” in2=“SourceAlpha” operator=“arithmetic” k2=“1” k3=“-1” result=“shadowDiff”/>

      <feFlood flood-color=”#F4F1ED” result=“backgroundColour”/>

      <feCom­po­site in=“shadowDiff” in2=“backgroundColour” operator=“in” result=“shadowOnBackground”/>

      <feBlend in=“SourceGraphic” in2=“shadowOnBackground” mode=“normal”/>

   </filter>

L’intérêt est que ces images, qui sont actuel­le­ment sta­tiques, devien­dront pro­chai­ne­ment inter­ac­tives. Vous pour­rez alors sur­vo­ler ou cli­quer sur les hexa­grammes, les tri­grammes ou les carac­tères chi­nois pour obte­nir des infor­ma­tions com­plé­men­taires. Il ne s’agit donc pas seule­ment d’une amé­lio­ra­tion esthé­tique, mais d’un pas de plus vers l’hyper­texte et une façon plus ludique et intui­tive d’appro­fon­dir votre connais­sance du Yi Jing.

Pierre Lau­tier n’est pas seule­ment gra­phiste et pho­to­graphe : il est éga­le­ment l’un de nos prin­ci­paux auteurs. Décou­vrez sa bio­gra­phie et tous ses articles sur cette page : 

Vous y trou­ve­rez éga­le­ment des liens vers ses deux sites per­son­nels, où vous pour­rez vous ins­crire à des consul­ta­tions ou des for­ma­tions de Yi Jing.

Nous sommes, comme tou­jours, impa­tients de connaître vos réac­tions. Ces amé­lio­ra­tions gra­phiques vous plaisent-elles ? Avez-vous hâte de pou­voir inter­agir avec les images ? N’hé­si­tez pas à nous faire part de vos …impres­sions !