feed.xml

<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[vitreene]]></title><description><![CDATA[vitreene]]></description><link>http://vitreene.com/</link><generator>RSS for Node</generator><lastBuildDate>Tue, 22 Aug 2017 07:40:47 GMT</lastBuildDate><atom:link href="http://vitreene.com/feed.xml" rel="self" type="application/rss+xml"/><item><title><![CDATA[Crop-manager, un composant React]]></title><description><![CDATA[<p>Crop-manager est un composant React dédié au recadrage d’images directement dans le navigateur.
Complet, il permet de traiter rapidement une image de façon intuitive.</p>
<p><a href="http://vitreene.com/crop-manager" class="post-boutonCta"> découvrez crop-manager </a></p>
<p><img src="../../assets/img/motif-logo-crop-manager.jpg" alt="recadrer rapidement des images avec crop-manager"></p>
<!--intro-->
<p>Son usage est très simple : l’image se manipule à la souris, la touche shift permet de passer du mode déplacement au mode échelle / rotation. Sur les appareils tactiles, ces memes opérations se font à un ou deux doigts.</p>
<h2 id="les-fonctionnalités">Les fonctionnalités</h2>
<ul>
<li>déplacement, mise à l’échelle et rotation libres,</li>
<li>symétrie horizontale et verticale, basculement,</li>
<li>cadrages prédéfinis.</li>
<li>rendu optimisé par accentuation de la netteté.</li>
<li>support tactile</li>
<li>éditeur responsive, l’image éditée utilise toute la surface disponible, indépendamment de ses dimensions propres.</li>
</ul>
<p>crop-manager opère entièrement dans le navigateur. Les données de cadrage sont disponibles pour un traitement coté serveur.</p>
<h2 id="limage-et-le-cadrage-sont-liés">L’image et le cadrage sont liés.</h2>
<p><strong>Le cadre</strong> est défini par une <strong>dimension</strong> et un <strong>ratio</strong>. Par convention, la dimension est établie comme la diagonale de l’image ; le ratio est une valeur fixée par l’utilisateur. Dimension et ratio donnent les proportions initiales du cadre. Le cadre et l’image sont alignés sur leur <strong>point central</strong>.</p>
<p><strong>Le cadrage</strong> est le résultat de la  transformation appliquée à l’image sur cette base : échelle, rotation et translation, exprimée en pourcentages. </p>
<p>Les dimensions relatives permettent d’utiliser des sources de différentes tailles, légères coté utilisateur, et complètes coté serveur. Seules les données de cadrage sont transmises.</p>
<p>Les valeurs du cadre données en pixels servent au rendu final. Seul le ratio largeur/hauteur est employé par le module. Cela autorise à générer simplement plusieurs rendus d’échelle différentes.</p>
<p><a href="http://vitreene.com/crop-manager">La demo de crop-manager</a></p>
<p><a href="https://github.com/vitreene/crop-manager">La source de l'app sur Github</a></p>
<p><strong>Vous avez des remarques ou des idées pour améliorer ce composant ?
<a href="../contact">N'hésitez pas à m'en parler.</a></strong></p>
]]></description><link>http://vitreene.com/articles/crop-manager-presntation/</link><guid isPermaLink="true">http://vitreene.com/articles/crop-manager-presntation/</guid><pubDate>Tue, 01 Aug 2017 00:00:00 GMT</pubDate></item><item><title><![CDATA[Arradv, un site consacré à la basse vision]]></title><description><![CDATA[<p>L’Arradv est une association qui réunit des professionnels de santé et propose des aides aux personnes victimes de déficience visuelle. </p>
<p>En faisant le constat d’une risque amplifié de désocialisation, un parcours medico-social a d’abord été mis en place pour rendre de l’autonomie et réinsérer ces personnes handicapées.
Récemment, un centre d’appel a été créé. De portée nationale, il est entièrement dédié aux questions touchant ce domaine.</p>
<p>Pour la refonte de leur site, il semblait évident de proposer une solution qui prenne en  compte l’accessibilité.</p>
<p><img src="../../assets/img/arradv_DSC_0116.jpg" alt="en une du site de l&#x27;Arradv" title="homme portant des lunettes à haut contraste"></p>
<!--intro-->
<h2 id="mettre-le-wai-partout">Mettre le WAI partout.</h2>
<p>Le <strong>Web Accessibility Initiative</strong><a href="#note01">1</a>  est une spécification officielle permettant d’améliorer l’usage pour les malvoyants des interfaces des sites modernes.</p>
<p>Wai-aria consiste à enrichir les contenus d’un site  par des indications sur son fonctionnement propre :</p>
<ul>
<li>les éléments sont décrits par leur rôle : comment distinguer, par exemple, une liste de liens en fin d’article, d’une autre  liste dans un menu ? Ce dernier se verra attribué un rôle : « navigation »</li>
<li>toute action qui modifie l’état de la page est signalé : ce bouton est-il cliqué,  ce menu déroulant est-il déplié ou replié ?</li>
<li>enfin, il faut aussi prévenir si du contenu a changé :  un utilisateur se connecte à son compte, il est prévenu que le menu principal s’est enrichi de nouvelles options.</li>
</ul>
<p>Wai-aria est compatible avec les principaux lecteurs d’écran du marché.</p>
<h2 id="laccessibilité-cest-aussi-visible">L'accessibilité, c'est aussi visible</h2>
<p>Le site est <strong>adaptatif</strong>. Pour améliorer le confort de lecture, le site adapte sa taille pour occuper toute la surface disponible.</p>
<p>Il est aussi <strong>responsif</strong> : les composants des pages sont réorganisés dynamiquement pour tenir compte des contraintes des petits écrans des smartphones. Sur ces appareils, le numéro de téléphone du centre d’appel est valorisé comme action principale.</p>
<p>L’aspect du site tient compte de l’accessibilité : la gamme de couleurs, le fort contraste des textes permet de passer les tests du site spécialisé <strong><a href="http://wave.webaim.org/">webaim.org</a></strong>.</p>
<p>Chaque pavé de contenu ne contient qu’un seul lien, et toute la surface est cliquable.
Testée en interne par l’association, la combinaison de ces dispositifs permet de proposer une expérience adaptée à son public. </p>
<p><a href="https://www.arradv.net">Le site de l'Arradv.</a></p>
<p><strong>Intéressé par un site accessible ? <a href="../contact">Etudions la question ensemble.</a></strong></p>
<aside class="notes">
<h3 id="technique--rendre-le-numéro-vert-accessible">Technique : rendre le Numéro vert accessible.</h3>
<p>Les numéros SVA<a href="#note02">2</a>  utilisent une charte signalétique et mettent à disposition un ensemble de fichiers graphiques. Cependant, un lecteur d’écran n’est pas en mesure de lire le contenu de ces images pour y interpreter un numéro de téléphone. </p>
<p>Un texte alternatif ne suffit pas non plus, ce numéro doit être reconnu sur un téléphone mobile. La solution proposée est la suivante :</p>
<ul>
<li>Le cadre et les indications secondaires sont sur en image de fond ;</li>
<li>le numéro de téléphone est textuel. </li>
<li>du texte complémentaire est caché visuellement, mais accessible aux lecteurs d’écran. </li>
</ul>
<p>Les navigateurs liés à un téléphone savent détecter automatiquement le format d’un numéro, et le transforme à la volée en lien vers l’application d’appel. L’apparence est modifiée, il convient d’ajouter dans ce cas des règles css.</p>
<div class="no-vert">
<span class="element-invisible">Téléphone : </span>
0800 013 010
<span class="element-invisible"> (Service et appel gratuit)</span>
</div>
<style>
.no-vert {
  <!--outline: 1px solid red;-->
  height: 4rem;
  line-height: 4rem;
  padding-left: 1rem;
  margin:2rem 0;
  color: #78B41E;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 1.9rem;
  letter-spacing: 0;
  background-image: url("../../assets/img/No-vert-fond.png");
  background-size: contain;
  background-repeat: no-repeat;
 }
.no-vert  a[href^=tel] {
    color: #78B41E;
    text-decoration: none;
  }
.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}
</style>
<p>le code html :</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-vert"</span>></span>
<span class="hljs-tag">&#x3C;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"element-invisible"</span>></span>Téléphone : <span class="hljs-tag">&#x3C;/<span class="hljs-name">span</span>></span>
0800 013 010
<span class="hljs-tag">&#x3C;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"element-invisible"</span>></span> (Service et appel gratuit)<span class="hljs-tag">&#x3C;/<span class="hljs-name">span</span>></span>
<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
</code></pre>
<p>et les styles : </p>
<pre><code class="hljs language-css"><span class="hljs-selector-class">.no-vert</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">4rem</span>;
  <span class="hljs-attribute">line-height</span>: <span class="hljs-number">4rem</span>;
  <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">1rem</span>;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#78B41E</span>;
  <span class="hljs-attribute">font-family</span>: Arial, sans-serif;
  <span class="hljs-attribute">font-weight</span>: bold;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">1.9rem</span>;
  <span class="hljs-attribute">letter-spacing</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">background-image</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">'No-vert-fond.png'</span>);
  <span class="hljs-attribute">background-size</span>: contain;
  <span class="hljs-attribute">background-position-x</span>: <span class="hljs-number">50%</span>;
  <span class="hljs-attribute">background-repeat</span>: no-repeat;
 }

<span class="hljs-selector-class">.no-vert</span>  <span class="hljs-selector-tag">a</span><span class="hljs-selector-attr">[href^=tel]</span>{
    <span class="hljs-attribute">color</span>: <span class="hljs-number">#78B41E</span>;
    <span class="hljs-attribute">text-decoration</span>: none;
  }

<span class="hljs-selector-class">.element-invisible</span> {
  <span class="hljs-attribute">position</span>: absolute <span class="hljs-meta">!important</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">1px</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">1px</span>;
  <span class="hljs-attribute">overflow</span>: hidden;
  <span class="hljs-attribute">clip</span>: <span class="hljs-built_in">rect</span>(1px 1px 1px 1px); <span class="hljs-comment">/* IE6, IE7 */</span>
  <span class="hljs-attribute">clip</span>: <span class="hljs-built_in">rect</span>(1px, 1px, 1px, 1px);
}</code></pre>
</aside>
<aside class="notes">
<h2>Notes</h2>
<ul>
<li id="note01">
<p><a href="https://www.w3.org/WAI/ARIA/faq">Les questions autour de Wai-aria</a></p>
</li>
<li id="note02">
<p><a href="http://www.svaplus.fr/actualites-et-travaux/la-charte-signaletique-des-numeros-sva-8493689-1049.html">La charte graphique du Numéro vert</a></p>
</li>
</ul>
</aside>
]]></description><link>http://vitreene.com/articles/arradv-basse-vision/</link><guid isPermaLink="true">http://vitreene.com/articles/arradv-basse-vision/</guid><pubDate>Sat, 15 Jul 2017 00:00:00 GMT</pubDate></item><item><title><![CDATA[Wordpress : protéger l’accès d’une page par mot de passe]]></title><description><![CDATA[<p>Pour la refonte du site d’un client, j’ai eu besoin de créer une page contenant un accès simplifié à ses activités. Il souhaitait en réserver l’accès à ses collaborateurs, aussi cette page n’est pas liée au reste du site. </p>
<p><img src="../../assets/img/WP-prtected_DSC_0079.jpg" alt="page protégée" title="page protégée"></p>
<!--intro-->
<p>La page ne contient pas d’informations sensibles, mais il n’est pas souhaitable que l’on puisse la consulter accidentellement. </p>
<p>Wordpress propose depuis très longtemps de protéger une page par mot de passe. Le niveau de sécurité n’est pas très élevé, mais largement suffisant pour ce cas.
Du coté de l’administration, dans les options de publication d’une page ou d’un post, l’option de visibilité doit être réglée à « protection par mot de passe » Au meme endroit, un champ renseigne le mot de passe.</p>
<p>Et cela fonctionne… en principe. Car si le mot de passe est bien demandé, la majeure partie du contenu de cette page apparait quand même. Que se passe-t-il ?</p>
<h2 id="protéger-les-contenus-personnalisés">Protéger les contenus personnalisés</h2>
<p>Le tableau de mon client est créé à partir d’un contenu personnalisé, ajouté en fin du template. La protection ne contrôle, par défaut, que les contenus standard de Wordpress : le titre, le contenu, et le résumé. </p>
<p>Il faut intervenir dans le template de la page et demander à Wordpress de vérifier si un mot de passe est requis pour cette page, c’est l’objet de la fonction <em>post_password_required()</em> qui retournera true ou false.
La page du codex<a href="#note01">1</a>. consacrée à cette fonction manque d’exemple sur l’emploi de la fonction.  </p>
<p>Après quelques tests, il suffit d’encadrer le contenu personnalisé par une condition, et demander d’afficher à la place le formulaire du mot de passe tant que la condition n’est pas remplie : </p>
<pre><code class="hljs language-php"><span class="hljs-meta">&#x3C;?php</span> 
<span class="hljs-keyword">if</span> ( post_password_required() ) :
    <span class="hljs-keyword">echo</span> get_the_password_form();
<span class="hljs-keyword">else</span> : <span class="hljs-meta">?></span>
  … contenu…
<span class="hljs-meta">&#x3C;?php</span> <span class="hljs-keyword">endif</span>; <span class="hljs-meta">?></span></code></pre>
<p>Plus simple encore : si la page utilise les fonctions, <em>the_title()</em> ou <em>the_content()</em>, elle vont déclencher automatiquement l’apparition du formulaire.
Sur la page du codex, se trouve les options permettant de personnaliser le formulaire et les messages d’avertissement.</p>
<p>Cette fonction ancienne et un peu oubliée garde de l’intérêt par sa simplicité de mise en oeuvre (pas de plugin, disponible par défaut) et se justifie si l’on a besoin d’un simple cadenas plutôt que d’un coffre-fort !</p>
<aside class="notes">
<h2>Notes</h2>
<ul>
<li id="note01">
<p>Codex Wordpress : <a href="https://codex.wordpress.org/Using_Password_Protection">using password protection</a></p>
</li>
</ul>
</aside>
]]></description><link>http://vitreene.com/articles/wp-page-protegee/</link><guid isPermaLink="true">http://vitreene.com/articles/wp-page-protegee/</guid><pubDate>Mon, 03 Jul 2017 00:00:00 GMT</pubDate></item><item><title><![CDATA[Linarès architectures, mise en lignes]]></title><description><![CDATA[<p>Linarès architectures est une agence de micro-projets, qui apporte  une réflexion contextuelle pour des architectures adaptées et sur-mesure.
Elle propose aussi, avec Carolina Garcia, du design d’intérieur et une spécialisation dans l’adaptation des locaux au handicap ou la vieillesse.</p>
<p>La création du site a été l’occasion de créer l’identité visuelle de l’agence.</p>
<p><img src="../../assets/img/cg-la.jpg" alt="logos combinés" title="logos combinés"></p>
<!--intro-->
<h2 id="un-duo-de-lignes-claires">Un duo de lignes claires</h2>
<p>Le monogramme reprend les initiales L-A et C-G., le « g » est le « a » inversé du premier pour créer cet effet de proximité.</p>
<p>Il est dessiné au trait, pour évoquer le plan d’architecte, le fait-main pour l’approche sur-mesure, et… pour une traduction approchante de lin(ar)es !</p>
<p>Selon l'utilsation prévue, le logo principal est décliné en plusieurs formats : le logo usuel pour la papeterie, le logo-signature sur les plans.</p>
<p><img src="../../assets/img/axio-logo-linares.jpg" alt="variantes du logo" title="lvariantes du logo"></p>
<h2 id="des-pictos-coordonnés">Des pictos coordonnés</h2>
<p>Le site internet reprend l'usage des lignes notament dans la série de pictos créés pour l’occasion. L’utilisation de seulement deux couleurs renforce l’effet de famille.
Ces pictos sont destinés à illustrer l'ensemble des services que propose l'agence.</p>
<div class="pictos-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="1.41" viewBox="0 0 129 155" clip-rule="evenodd" stroke-linejoin="round">   <g fill="none" stroke-width="5.02" stroke-linecap="round">    <path stroke="#5cc964" d="M38.68 64.24C22.3 67.72 9.38 80.32 5.53 96.62c-5.5 23.26 8.9 46.6 32.15 52.12 21.3 5.05 43.02-6.6 50.6-27.13"/>    <path stroke="#5cc964" d="M23.93 101.7c-2.36 8.62.46 17.84 7.25 23.66 9.7 8.3 24.3 7.2 32.62-2.5 7.62-8.87 7.4-22.03-.48-30.66"/>    <path stroke="#1397e1" d="M124.47 124.18l-15.45 6.62-22.08-41.1H44.98l-13.25-53 4.37-8.2m2.26 34.7h45.26"/>    <circle cx="44.43" cy="17.6" r="13.25" stroke="#1397e1"/>  </g></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="1.41" viewBox="0 0 162 151" clip-rule="evenodd" stroke-linejoin="round">  <g fill="none" stroke-width="5.02" stroke-linecap="round">    <path stroke="#5cc964" d="M102.94 96.74h13v15.6h-13zm0 25.98h13v23.38h-13z"/>    <path stroke="#5cc964" d="M102.94 122.72h13v23.38h-13zm-34.42 0h21.23v23.38H68.52zm-21.66 0H68.1v23.38H46.85z"/>    <path stroke="#5cc964" d="M128.18 87.36v58.73H27.98v-33.8m-5.56-15.58l40.13 3.2 76.76-26.58"/>    <path stroke="#1397e1" d="M4.35 53.7s18.15 36.14 57.3 28.6c39.15-7.56 95.72-59.75 95.72-59.75"/>    <path stroke="#1397e1" d="M19.23 38.12S32.88 75.54 55.36 71.9c22.48-3.66 85-62.35 85-62.35"/>    <path stroke="#1397e1" d="M34.1 28.74s5.6 30.22 19.13 27.56C66.77 53.65 108.5 4.35 108.5 4.35"/>    <path stroke="#1397e1" d="M46.86 19.94s.58 26.75 6.37 23.38c5.8-3.4 21.27-38.98 21.27-38.98"/>  </g></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="1.41" viewBox="0 0 146 152" clip-rule="evenodd" stroke-linejoin="round"> <g stroke-width="5.02" stroke-linecap="round">     <path fill="none" stroke="#5cc964" d="M42.04 4.35s6.63 32.53 56.02 53.08"/> <path fill="#fff" stroke="#1397e1" d="M42.04 26.6h44.73v12.07H42.04zm54.38 108.74h44.73v12.08H96.42zM58.24 48.98h28.52v12.08H58.24zm38.18 63.96h28.52v12.08H96.42zm-27-41.56h17.35v12.08H69.43zm27 19.16h17.34v12.08H96.42z"/> <path fill="#fff" stroke="#5cc964" d="M86.77 20.15h9.65V147.4h-9.65z"/>    <path fill="none" stroke="#5cc964" d="M98.06 57.43s31.34 14.17 43.1 42.55"/>
    <g fill="#fff">      <path stroke="#5cc964" d="M4.35 68.56h51.52v76.56H4.35z"/>      <path stroke="#5cc964" d="M4.35 68.56h17.48v34.76H4.35zm34.05 0h17.47v34.76H38.4z"/>      <path stroke="#1397e1" d="M21.34 68.56h17.48v34.76H21.34z"/>      <path stroke="#5cc964" d="M4.35 112.65h17.48v34.76H4.35zm34.05 0h17.47v34.76H38.4z"/>      <path stroke="#1397e1" d="M21.34 112.65h17.48v34.76H21.34z"/>      <path stroke="#5cc964" d="M18.64 95.8h22.9v22.08h-22.9z"/>      <path stroke="#1397e1" d="M25.5 102.43h9.46v9.12H25.5z"/>    </g>  </g></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="1.41" viewBox="0 0 128 134" clip-rule="evenodd" stroke-linejoin="round">  <g fill="none" stroke-width="5.02" stroke-linecap="round">    <path stroke="#5cc964" d="M25.94 81.8L7.7 80.68l2.6-41.5L20 30.6l8.55 9.7-2.6 41.5zm28.8 1.83L36.5 82.48l3.55-56.45 9.7-8.55 8.54 9.7-3.58 56.45zm28.8 1.8L65.3 84.3l4.5-71.4 9.7-8.55 8.54 9.7-4.5 71.4z"/>    <path stroke="#1397e1" d="M98.62 31.66l24.55 48.6-9.06 4.3-1.42 26.77L78 128.66 4.33 101.28"/>  </g></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-miterlimit="1.41" viewBox="0 0 148 162" clip-rule="evenodd" stroke-linejoin="round">  <g fill="none" stroke-width="5.02">    <g stroke="#1397e1">      <path d="M4.35 94.65l29.7-29.7c-1.18-1.93-2.2-3.96-3.13-6.02-1.6-3.55-2.87-7.24-4-10.96-1.18-3.97-2.16-8-3.03-12.05-1.3-5.82-2.2-11.7-3.1-17.58m55.3 72.5l4 3.08 2.5 1.96c2.5 2.04 5.1 4.1 7.5 6.36l.7.7c2.7-2.05 5.4-4.07 8.2-6.07l-8.7-9.42-14.3 3.4zm-45.4-74.7l.4 3.34c.7 4.8 1.5 9.6 2.5 14.35.7 3.27 1.5 6.5 2.4 9.72.9 3.06 1.9 6.1 3 9.04.3.8.7 1.7 1.1 2.5 0 0 22.3-9.7 22.7-9.7 1.6-.1 3 .9 4.2 2 6.55 5.8 13.86.7 15.06.1 1.4-.7 28.6-19.6 30.45-21.2"/>      <path d="M117.72 35.4c-3.33 2.7-30.33 21-32.7 22.1-3.6 1.67-10.16 3.96-16.94 2.2-2.38-.62-4.77-1.4-6.73-2.92l-15.74 7 1.5 1.65c2.1 2.37 14.8 14.07 19 17.48l25-5.9c.3 0 4.6 1.2 4.9 1.5l12.5 13.6c.1 0 5.3 0 6.5.3.9.3 1.7.6 2.4.9 2.7 1.3 5 3.3 6.8 5.6 1.1 1.4 16.9 30.4 18.8 34.2"/>      <path d="M133.77 137.53c-.75-1.48-18.18-33.1-18.35-33.3-.95-1.06-2.16-2.04-3.6-2.3-.24-.05-1.5-.05-1.9.04-.4.1-.8.22-1.2.4l-.07.04c-4.04 3.1-8.12 6.1-12.25 9.1.13.5.25 1 .34 1.5.35 1.9.57 3.9.47 5.8-1 18.8-5.3 34.7-6.3 39m-9.5-3.5c1.2-5.1 2.3-10.2 3.3-15.4.6-3.2 2.2-13.5 2.3-15.4.1-1.3 1.8-8.5-4.2-14.2-1.1-1-6.9-5.8-8.7-7.2-3-2.3-24.8-19.7-30.5-25.5-1.1-1.1-2.1-2.2-3.2-3.4L11.6 102"/>    </g>    <g stroke="#5cc964" stroke-linecap="round">      <path d="M48.1 90.67l-7.54 7.54-7.53-7.5 7.53-7.5 7.54 7.6zm8.55 6.53L51 103.45l-7.26-7.54-7.53 7.6 17.6 17.6 14.1-14.2-11.2-9.6zm56.77 18.94l4.6 8.67-10.4 5-4.95-14.8 10.75 1.2z"/>      <path d="M68.2 107.1l-9.46 8.73 20.4 15.82.87-14.74-11.8-9.8zm-27.64 1.37l-12.28 12.56 7.93 8.7 13.9-11.6-9.5-9.67zm38.18 23.18l-9.36 18.47-10.63-8.2 10.63-17.1 9.36 6.83zm28.65-1.9l-5.8 2.9 1.7 23.34 18.5-7.9-2.7-4.8 6.7-4-8-14.6-10.6 4.9zM85.1 71.6l-17.8 5.6 4.55-10.75 11.72-1.65 1.56 6.8z"/>      <path d="M98.42 58l1.97 13.6H85.2l-1.73-6.46L98.42 58zm2.14 14.2l10.35 12.4 17.6-1.47-2.5-15.36-9.8 1.07-5.8-18.25-12 7.4 2.2 14.2zm-.16-67.85L77.52 15.1l11 21.32L108.4 20.5l-8-16.15z"/> <path d="M72.8 42.82l-8.67-15.2L80.1 19.6l8.44 16.77-15.73 6.45z"/>    </g>  </g></svg>
</div>
<p>Les titres, quant à eux, sont composés en Raleway Light.
Le site est actuellement en construction, ce qui n’a jamais fait peur à un architecte.</p>
<h3 id="wwwlinares-architecturescom"><a href="http://www.linares-architectures.com">www.linares-architectures.com</a></h3>
<aside class="notes">
</aside>
]]></description><link>http://vitreene.com/articles/linares-architectures-mise-en-ligne/</link><guid isPermaLink="true">http://vitreene.com/articles/linares-architectures-mise-en-ligne/</guid><pubDate>Sat, 15 Oct 2016 00:00:00 GMT</pubDate></item><item><title><![CDATA[Un catalogue (papier) est un site (web) comme un autre]]></title><description><![CDATA[<p><em><em>« Write once, display everywhere. »</em></em> Intégrer une base de données dans un flux de publication, comme on le pratique pour le web, n’est pas évident à organiser quand il s'agit d'un catalogue papier<a href="#note01">1</a>.</p>
<p>Il existe aujourd'hui de nombreux services de web-to-print<a href="#note02">2-4</a>. En fonction de l’organisation de l’entreprise, de l’ampleur du projet, internaliser un studio maquette le temps de la production est un aussi choix à considérer. Il facilite l'accès aux ressources documentaires internes ainsi que le travail collaboratif.</p>
<p>Il s'agit alors d'élaborer des passerelles pour relier la base de données au logiciel de PAO.</p>
<div id="post-hero-video-wrapper" class="post-hero-video-wrapper"> <video id="post-hero-video" preload="auto" autoplay="true" loop poster="../../assets/img/pages-brochures.jpg" width="100%">  <img width="100%" src="../../assets/img/pages-brochures.jpg"> <source src="../../assets/img/pages-brochuresNB4.webm"  type="video/webm">  <source src="../../assets/img/pages-brochuresNB3.mp4"  type="video/mp4"> </video> <div class="gradient-filter"></div>
</div>
<!--intro-->
<h2 id="organiser-le-studio-interne">Organiser le studio interne</h2>
<p>L'équipe s'organise autour de deux fonctions :</p>
<ul>
<li>Un coordinateur est chargé de s'assurer de la disponibilité des données et gère le planning de production.</li>
<li>Le responsable du studio gère l'équipe de maquettistes, veille au respect de la charte graphique, et adapte au besoin les maquettes produites.</li>
</ul>
<h2 id="concevoir-le-design-de-la-brochure">Concevoir le design de la brochure</h2>
<p>Passer du web au papier pose la contrainte de l’espace limité de la feuille de papier. Pour garder un confort de lecture, il va falloir filtrer les informations essentielles pour repérer le produit, le comprendre et le comparer.  </p>
<p>La création graphique est testée avec des contenus réels, choisis selon les contraintes qu’ils représentent : notice longue, moyenne ou courte, nombreuses images, image unique ou absente…  Les résultats permettent de définir quel sera le résultat optimal. On en déduit les règles de compositions, les directives de rédaction, le calibrage des notices, ainsi que les éléments descriptifs finalement retenus.  </p>
<p>Le principe de maquette validé, il faut  préparer le modèle d’importation pour la brochure, et le cas échéant, mettre à jour la base de données pour refléter les décisions de publication.</p>
<p><img src="../../assets/img/conception-brochure.jpg" alt="conception de brochure" title="recherche de maquette, essais, croquis"></p>
<h2 id="créer-un-modèle-dimportation">Créer un modèle d’importation</h2>
<p>Le gabarit de maquette est adapté pour intégrer les balises XML. Les balises sont ordonnées et regroupées selon l’ordre de lecture. À chaque balise est associée une feuille de style.</p>
<p>Chaque balise est ensuite appliquée dans un bloc texte ou graphique dans la maquette. Plusieurs balises peuvent se suivre à l'intérieur d'un même bloc.</p>
<p>La plupart du temps, plusieurs produits seront présents sur une même page ; s'ils sont présentés de la même façon, ils peuvent etre importés en une seule fois, inDesign se charge de recopier le modèle à chaque fois.</p>
<p>Dans d'autres cas, il faut importer les produits un par un, et leur attribuer un gabarit propre. Dans ce cas, ces gabarits sont enregistrés dans une bibliothèque, et seront disponibles à tout moment. Des variantes peuvent être imaginées selon que l'on pose le gabarit sur une page paire ou impaire…</p>
<h2 id="préparer-la-base-de-données">Préparer la base de données</h2>
<p>La validation de la maquette entraîne parfois des adaptations de la base de données. C’est notamment le cas si le calibrage des notices impose une réécriture.</p>
<p>D’autres adaptations, comme le résultat d'un calcul, la représentation d'une valeur sous forme de pictogramme, sont réalisés dynamiquement au moment de l’importation des données.</p>
<p>Les données sont extraites sous forme de balisage XML. Les fonctions sont disponibles dans la plupart des frameworks ou cms, où il sont généralement utilisés pour gérer des flux RSS.</p>
<p>Si possible, préférer un balisage « plat », sans hiérarchiser les données.</p>
<p><img src="../../assets/img/balises-xml-dans-la-maquette.jpg" alt="préparer la base de données"></p>
<h2 id="adapter-le-format-dexportation">Adapter le format d’exportation</h2>
<p>Le fichier XML est destiné à être importé dans inDesign. La plupart du temps, le fichier produit n’est pas exploitable directement par la maquette : l'importation doit suivre l'ordre de présentation des informations. Par exemple, si, sur la maquette, le nom d’un produit est suivi de son prix, alors ce doit être aussi le cas dans le XML.</p>
<p>Pour cela, les transformations à appliquer sont décrites par un script rédigé en XSL. Ce script sera appliqué au moment de l’importation dans Indesign ; une préférence est prévue à cet effet.</p>
<p><strong>Voyons un exemple, avec un redressement :</strong> dans la base, le champ « points forts »  contient une liste ; la convention de rédaction consiste à placer un tiret en début de ligne pour chaque point. La transformation va retirer ce tiret pour placer la ligne dans une balise <code>&#x3C;Points_forts></code> , et le groupe est ensuite encadré par une balise <code>&#x3C;Les_Points_forts></code>.</p>
<p>le XML d'origine, issu de la base :</p>
<pre><code class="hljs language-xml">[ ... ]
<span class="hljs-tag">&#x3C;<span class="hljs-name">pts_forts</span>></span>
- La navigation sur un bateau tout confort sur le Nil et les balades sur les rives.
- Les sites pharaoniques incontournables d'Assouan à Louxor.
- Les scènes de vie quotidienne dans les champs.
<span class="hljs-tag">&#x3C;/<span class="hljs-name">pts_forts</span>></span>
[ ... ]</code></pre>
<p>le xsl contient les règles de transformation :</p>
<pre><code class="hljs language-xml"><span class="hljs-tag">&#x3C;<span class="hljs-name">xsl:variable</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"MarqueDeParagraphe"</span>></span>
	<span class="hljs-tag">&#x3C;<span class="hljs-name">xsl:text</span>></span>&#x26;#xa;<span class="hljs-tag">&#x3C;/<span class="hljs-name">xsl:text</span>></span>
<span class="hljs-tag">&#x3C;/<span class="hljs-name">xsl:variable</span>></span>

[ ... ]
<span class="hljs-tag">&#x3C;<span class="hljs-name">Les_Points_forts</span>></span>
	<span class="hljs-tag">&#x3C;<span class="hljs-name">xsl:for-each</span> <span class="hljs-attr">select</span>=<span class="hljs-string">"//Points_forts"</span>></span>
		<span class="hljs-tag">&#x3C;<span class="hljs-name">Points_forts</span>></span>

<span class="hljs-tag">&#x3C;<span class="hljs-name">!—-</span> <span class="hljs-attr">retirer</span> <span class="hljs-attr">le</span> <span class="hljs-attr">tiret</span> <span class="hljs-attr">en</span> <span class="hljs-attr">d</span>é<span class="hljs-attr">but</span> <span class="hljs-attr">de</span> <span class="hljs-attr">ligne</span> <span class="hljs-attr">-</span>—></span>
		<span class="hljs-tag">&#x3C;<span class="hljs-name">xsl:value-of</span> <span class="hljs-attr">select</span>=<span class="hljs-string">"substring-after (normalize-space(.), '- ')"</span>/></span>

<span class="hljs-tag">&#x3C;<span class="hljs-name">!—-</span> <span class="hljs-attr">retirer</span> <span class="hljs-attr">les</span> <span class="hljs-attr">espaces</span> <span class="hljs-attr">en</span> <span class="hljs-attr">exc</span>è<span class="hljs-attr">s</span> <span class="hljs-attr">-</span>—></span>
		<span class="hljs-tag">&#x3C;<span class="hljs-name">xsl:value-of</span> <span class="hljs-attr">select</span>=<span class="hljs-string">"normalize-space(.)"</span>/></span>

<span class="hljs-tag">&#x3C;<span class="hljs-name">!—-</span> <span class="hljs-attr">ajouter</span> <span class="hljs-attr">une</span> <span class="hljs-attr">marque</span> <span class="hljs-attr">de</span> <span class="hljs-attr">paragraphe</span> <span class="hljs-attr">en</span> <span class="hljs-attr">fin</span> <span class="hljs-attr">de</span> <span class="hljs-attr">ligne</span>, <span class="hljs-attr">-</span>—></span>
<span class="hljs-tag">&#x3C;<span class="hljs-name">!—-</span> <span class="hljs-attr">sauf</span> <span class="hljs-attr">sur</span> <span class="hljs-attr">le</span> <span class="hljs-attr">dernier</span> <span class="hljs-attr">-</span>—></span>
		<span class="hljs-tag">&#x3C;<span class="hljs-name">xsl:if</span> <span class="hljs-attr">test</span> =<span class="hljs-string">"position() != last()"</span>></span>
			<span class="hljs-tag">&#x3C;<span class="hljs-name">xsl:value-of</span> <span class="hljs-attr">select</span>=<span class="hljs-string">"$MarqueDeParagraphe"</span>/></span>
		<span class="hljs-tag">&#x3C;/<span class="hljs-name">xsl:if</span>></span>

		<span class="hljs-tag">&#x3C;/<span class="hljs-name">Points_forts</span>></span>
	<span class="hljs-tag">&#x3C;/<span class="hljs-name">xsl:for-each</span>></span>
<span class="hljs-tag">&#x3C;/<span class="hljs-name">Les_Points_forts</span>></span>
[ ... ]</code></pre>
<p>le  XML  transformé :</p>
<pre><code class="hljs language-xml">[ ... ]
<span class="hljs-tag">&#x3C;<span class="hljs-name">Les_Points_forts</span>></span>
	<span class="hljs-tag">&#x3C;<span class="hljs-name">Points_forts</span>></span> La navigation sur un bateau tout confort sur le Nil et les balades sur les rives.<span class="hljs-tag">&#x3C;/<span class="hljs-name">Points_forts</span>></span>
	<span class="hljs-tag">&#x3C;<span class="hljs-name">Points_forts</span>></span> Les sites pharaoniques incontournables d'Assouan à Louxor.<span class="hljs-tag">&#x3C;/<span class="hljs-name">Points_forts</span>></span>
	<span class="hljs-tag">&#x3C;<span class="hljs-name">Points_forts</span>></span>Les scènes de vie quotidienne dans les champs.<span class="hljs-tag">&#x3C;/<span class="hljs-name">Points_forts</span>></span>
<span class="hljs-tag">&#x3C;/<span class="hljs-name">Les_Points_forts</span>></span>
[ ... ]</code></pre>
<p>Le résultat, importé dans la maquette :</p>
<p><img src="../../assets/img/points-forts-maquette.jpg" alt="xml importé dans la maquette"></p>
<p>Le passage par une transformation XSL apporte une grande souplesse dans la mise au point de la maquette ; il n’est pas rare qu’une demande de dernière minute nécessite, par exemple, des modifications dans l’ordre des informations ; la source des données n’est pas touchée et la modification réalisée par le studio, rapide.</p>
<p>Il est possible, en gardant la même source, de créer des variantes de présentation, il suffit pour cela de créer un autre fichier XSL avec d'autres règles de transformation. On pourra aussi obtenir une fiche détaillée, une liste résumée, un index…</p>
<aside class="post-aparte">
<p>XSL<a href="#note05">5-6</a> est un langage assez peu connu et d'une logique assez complexe ; toutefois, les transformations à créer pour ce type d’usage sont triviales : il s’agit la plupart du temps de modifier le nom d’une balise, d’en changer l’ordre ou leur imbrication.</p>
</aside>
<h2 id="les-images">Les images</h2>
<p>Le meme principe : <em>write once…</em> s’applique aussi aux images. Si l’on part d’une base de données produit, il est probable que lui soit associée une base d’images. Il faut utiliser les fichiers sources, et éviter les versions optimisées pour l’affichage du site.</p>
<p>Pour être utilisables pour le web, elle sont en mode RVB. Il est tout à fait possible de garder les images dans ce format pour les exploiter dans inDesign dans un flux d’impression. Simplement, la conversion en CMJN n’aura lieu qu’au moment de la production des PDF destinés à l’imprimeur<a href="#note07">7</a>.</p>
<p>Le spectre des couleurs reproductible en impression étant sensiblement plus limité, il faut être vigilant en réglant l’aperçu des images simulant à l’écran l’impression papier, pour éviter les verts fluo flatteurs qui grisent à l’impression.</p>
<p><img src="../../assets/img/DSC_0329.jpg" alt="les images du rvb au cmjn"></p>
<h2 id="en-fin-de-compte-les-meilleures-pages-se-font-à-lusine">En fin de compte, les meilleures pages se font à l'usine.</h2>
<p>Tout ce qui est répétitif peut être automatisé<a href="#note06">8</a>. Le temps de préparation important réserve plutôt son emploi pour de gros projets. Ce type d’importation permet non seulement le formatage et l’application de styles à la volée, mais aussi le placement dans les divers éléments de la maquette. L’importation de photos est géré, et grâce aux scripts de transformation, des filtrages conditionnels peuvent être envisagés.</p>
<p>L’importation directe, sans manipulation par le maquettiste, réduit le cycle de corrections qui est un poste important en temps passé. Les corrections peuvent s’envisager en toute confiance en amont de la maquette, hors du temps de l’urgence, et donc de façon plus efficace.</p>
<p>Plus la maquette est complexe, plus le résultat comportera des défauts de composition qu’il faut régler : le maquettiste reste dans ce dispositif une partie essentielle pour le sens de la composition, l’équilibrage des contenus, le choix et le cadrage des photos. Avec l’expérience, il vaut mieux d’ailleurs ne pas chercher à tout régler d’avance, mais de créer les règles suffisantes pour la majorité des cas.</p>
<p>La touche finale revient de toute façon au maquettiste !</p>
<h3 id="sur-le-portfolio--les-magazines">Sur le portfolio : les magazines</h3>
<p>exemples de  catalogues :
clubaventure, femmes du monde, golf</p>
<aside class="notes">
<h2>Notes</h2>
<ul>
<li id="note01">
<p><a href="http://www.lemonde.fr/m-styles/article/2015/05/08/le-catalogue-papier-allie-surprenant-de-la-vente-en-ligne_4629601_4497319.html">Dépassé le papier ?</a> Ce n’est pas nécessairement l’avis de tous.</p>
</li>
<li id="note02">
<p><a href="http://automatisation.kerosine.fr/automatisation">Importation automatique</a> de bases de données dans Indesign.</p>
</li>
<li>
<p>Une solution <a href="http://www.nextpage.fr">collaborative</a> via une web app</p>
</li>
<li>
<p>Une autre <a href="http://fr.pageondemand.com">solution</a></p>
</li>
<li id="note05">
<p>initiation à  <a href="https://www.guillaumevoisin.fr/developpement/tutoriel-apprendre-les-feuilles-de-style-xslt">xslt</a>.</p>
</li>
<li>
<p>Une autre <a href="http://fsajous.free.fr/xml/xslt/xslt.html">dossier sur xslt</a> plus complet.</p>
</li>
<li id="note07">
<p>Travailler en <a href="http://https://www.video2brain.com/fr/tuto/travailler-avec-un-flux-rvb-pour-les-images-et-exporter-en-pdf">flux RVB</a>.</p>
</li>
<li id="note08">
<p>Pour tout savoir sur l'import XML dans inDesign : <a href="https://helpx.adobe.com/fr/indesign/using/importing-xml.html">lisez le manuel</a> !</p>
</li>
</ul>
</aside>
]]></description><link>http://vitreene.com/articles/un-catalogue-est-un-site-comme-un-autre/</link><guid isPermaLink="true">http://vitreene.com/articles/un-catalogue-est-un-site-comme-un-autre/</guid><pubDate>Fri, 15 Jan 2016 00:00:00 GMT</pubDate></item><item><title><![CDATA[Construire votre site, en trois grandes étapes]]></title><description><![CDATA[<p>Votre site ne vous donne plus entière satisfaction, vous envisagez une refonte ; ou au contraire, vous portez un tout nouveau projet ? Vous êtes accompagnés dans chaque étape.</p>
<p><img src="../assets/img/conception-web_DSC_0085.jpg" alt="étude graphique d’un site" title="étude graphique d’un site"></p>
<!--intro-->
<h2 id="avant-la-construction">Avant la construction</h2>
<p>Après exposition du projet et la définition des objectifs que vous aurez determiné, l’arborescence du site est produite.
Les contenus texte, video, photos, logo, sont recueillis ou créés au besoin.
Les composants fonctionnels sont identifiés : formulaires, cartes, carousel…
Nous en tirons les lignes conductrices pour construire le propos de la page d’accueil.</p>
<p>Vous avez réuni ces éléments, nous pouvons construire le site.</p>
<h2 id="la-réalisation-du-site">La réalisation du site</h2>
<p>Cette partie commence par la création d'un thème visuel unique qui sera ensuite codé. Dans certains cas, il sera possible d’utiliser un thème déjà réalisé qui sera personnalisé.
Les pages créées sont révisées et validées au fur et à mesure. Après d’ultimes révisions, le site est livré.</p>
<h2 id="améliorer-le-site">Améliorer le site</h2>
<p>Il est avantageux de penser l’optimisation du site dès sa conception Plusieurs types d’améliorations peuvent se combiner ensemble pour de meilleurs résultats :</p>
<ul>
<li>optimisation pour le référencement naturel (SEO),</li>
<li>optimisation pour l’accessibilité, prise en compte des handicaps… et des robots d’indexation.</li>
<li>optimisation du temps de chargement des pages (minification, AMP, cache, cdn…)</li>
<li>sécurisation avancée du site (https, htaccess).</li>
</ul>
<h2 id="entretien">Entretien</h2>
<p>Le suivi de correction des bugs, l’archivage et les mise à jours sont assurés trois mois après la publication du site. Au delà, un plan de maintenance est proposé ; une formation est possible si vous souhaitez vous en charger vous même.</p>
<p>Vous avez un projet ? <a href="../contact">Parlons-en ensemble !</a></p>
]]></description><link>http://vitreene.com/services/</link><guid isPermaLink="true">http://vitreene.com/services/</guid></item><item><title><![CDATA[Et pourtant elle tourne ! (ma roue en SVG)]]></title><description><![CDATA[<p>Au départ, ce simple exercice d’animatique aurait pu être réalisé avec Flash, mais Flash est mort. Les navigateurs qui s'appuyaient dessus ne pourront d'ailleurs pas lire cette version en SVG, une version dégradée est prévue dans ce  cas.</p>
<p>Quitte à faire tourner la roue, autant poursuivre en donnant la possibilité de la  personnaliser. Voici comment définir les lots anisi que le nombre de portions.</p>
<div id="cible2" ></div>
<!--intro-->
<h2 id="comment-utiliser-la-roue">Comment utiliser la roue</h2>
<p>Le  mode d'emploi est intuitif : tirer la targette plus ou moins fortement, et relâcher pour faire tourner la roue. Le lot gagnant est ensuite annoncé. Et on recommence !</p>
<p><strong>La liste de lots est personnalisable.</strong> Pour chaque lot, Il faut renseigner un label qui contient la valeur du lot, par exemple : « 500€ », « cadeau », « Trek 7j. ». Ils doivent être courts, pas plus d’une dizaine de caractères.</p>
<p>Il faut aussi renseigner une couleur à attribuer au fond de la portion, sous forme d’un nom css<a href="#note01">1</a>  ou d‘une couleur hexadécimale.</p>
<pre><code class="hljs language-javascript">    { <span class="hljs-attr">label</span>: <span class="hljs-string">"100€"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#5078ff"</span>}</code></pre>
<p> En option, d’autres infos peuvent être ajoutées, comme un message en cas de gain.</p>
<p>Il existe deux façons de transmettre cette liste : la  plus simple  étant de lister chaque lot un par un :</p>
<pre><code class="hljs language-javascript">  lot: [
    { <span class="hljs-attr">label</span>: <span class="hljs-string">"100€"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#5078ff"</span> },
    { <span class="hljs-attr">label</span>: <span class="hljs-string">"200€"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#6262be"</span> },
    <span class="hljs-comment">// etc</span>
    ]</code></pre>
<p>Cependant, il est courant dans ce type de jeu de multiplier un même lot, alors que le gros lot n’y sera qu’une seule fois. Plutôt que de dupliquer le même lot,  il suffit d’indiquer pour chacun la quantité voulue. La liste ressemble alors à ceci :</p>
<pre><code class="hljs language-javascript">  lot:[
    { <span class="hljs-attr">label</span>: <span class="hljs-string">"100€"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#5078ff"</span>, quantité:<span class="hljs-number">6</span> },
    { <span class="hljs-attr">label</span>: <span class="hljs-string">"200€"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#6262be"</span>, quantité:<span class="hljs-number">3</span> },
    { <span class="hljs-attr">label</span>: <span class="hljs-string">"500€"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#cc26a0"</span>, quantité:<span class="hljs-number">1</span> },
    <span class="hljs-comment">// etc</span>
    ] ;</code></pre>
<p>Il est possible de définir un nombre total de portions plus élevé ; dans ce cas, un élément supplémentaire est défini à part, qui sera utilisé comme remplissage par défaut :</p>
<pre><code class="hljs language-javascript">lots = {
  <span class="hljs-attr">portions</span>: <span class="hljs-number">20</span>,
  <span class="hljs-attr">defaut</span>: {<span class="hljs-attr">label</span>: <span class="hljs-string">"Perdu"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#87af1b"</span>},
  <span class="hljs-attr">lot</span>: [
    { <span class="hljs-attr">label</span>: <span class="hljs-string">"100€"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#5078ff"</span>, quantité:<span class="hljs-number">6</span> },
    <span class="hljs-comment">// etc</span>
   ]
}</code></pre>
<p>Dans cet exemple, la roue est divisée en 20 portions, les lots sont répartis selon la quantité demandée. Le restant de places est rempli par la valeur « défaut » de façon homogène et aléatoire.</p>
<h2 id="tricher--ou-pas">Tricher ? ou pas.</h2>
<p>Dans le cas où les lots en jeu sont en quantité limitée, il est nécessaire d’empêcher de sortir un lot déjà gagné dans un précédent tirage. La gestion des lots n’est pas le sujet de ce module, et devrait être traité coté serveur ; cependant, il est prévu une possibilité de bloquer la sortie d’un lot en ajoutant un drapeau :</p>
<pre><code class="hljs language-javascript">    { <span class="hljs-attr">label</span>: <span class="hljs-string">"100€"</span>, <span class="hljs-attr">couleur</span>: <span class="hljs-string">"#5078ff"</span>, quantité:<span class="hljs-number">6</span>, <span class="hljs-attr">gain</span>:<span class="hljs-number">0</span> }</code></pre>
<p>Dans cette logique, forcer tous les lots, sauf un, à « gain:0 » reviendra à désigner à l’avance un lot gagnant…
Plus simplement,  une option permet de passer un paramètre  pour désigner à l’avance le lot gagnant ; dans ce cas, le mécanisme de tirage au sort est effectué coté serveur, et ce module ne sert qu'à l’animation.</p>
<h2 id="comment-intégrer-ce-module">Comment intégrer ce module</h2>
<p>La fonction n’a pas de dépendances ; elle s’appelle par un constructeur :</p>
<pre><code class="hljs language-javascript"><span class="hljs-keyword">var</span> roue = <span class="hljs-keyword">new</span> roueFortune( id, listeLots, [ lotGagnant, callback  ]  ) ;</code></pre>
<ul>
<li>
<p>où « id » désigne la balise conteneur où sera créé la roue,
« listeLots » est soit un tableau listant les lots, soit un objet définissant la nature des lots et leur quantité.</p>
</li>
<li>
<p>« lotGagnant » est l’index du lot désigné comme gagnant dans la liste  ; il faut noter que cette valeur ne fonctionnera pas si la liste est passée comme un objet, car les lots y sont distribués aléatoirement. Il faut utiliser le parterre « gain » dans ce cas.</p>
</li>
<li>
<p>« callback » est une fonction qui récupère l’élément gagnant de la liste ; elle est destinée à générer, par exemple, une animation de victoire, ou de perte, c’est vous qui voyez. Elle est prioritaire sur l’animation par défaut.</p>
</li>
</ul>
<p>A noter, il est possible d’ajouter d’autres informations à la liste, qui seront utilisées par la callback :</p>
<pre><code class="hljs language-javascript">   {<span class="hljs-attr">label</span>:<span class="hljs-string">"500€"</span>, <span class="hljs-attr">description</span>:<span class="hljs-string">"Bravo !  vous avez gagné le gros lot."</span>, <span class="hljs-attr">quantite</span>:<span class="hljs-number">6</span>, <span class="hljs-attr">couleur</span>:<span class="hljs-string">"#5078ff"</span>, <span class="hljs-attr">gain</span>:<span class="hljs-number">1</span>}</code></pre>
<p>  « description » sera utilisé pour adresser un mot de félicitations.
La fonction crée pour chaque portion une classe CSS dédiée qui est ajoutée à l’objet lot ; cela permet, par exemple de faire clignoter le lot gagnant sur la roue.</p>
<h2 id="compatibilité">Compatibilité</h2>
<p>Le support est étendu aux navigateurs qui reconnaissent le svg, soit la plupart des navigateurs récents et mobiles, mais pas les anciens IE, pour lesquels ce type d’animation était généralement traité par Flash. Un fallback est prévu pour ces navigateurs. On peut forcer l'activation sur les autres en nommant l'id du conteneur "legacy".</p>
<h2 id="coté-technique">Coté technique</h2>
<ul>
<li>Conçu comme un module autonome : plusieurs roues peuvent être utilisées sur une même page. pas de dépendance à une librairie js.</li>
<li>Le rendu de la roue est personnalisable par css ;</li>
<li>On l’a vu, des données personnalisables.</li>
</ul>
<h1 id="quelques-remarques">Quelques remarques</h1>
<h2 id="firefox-capricieux-avec-svg">Firefox, capricieux avec SVG.</h2>
<p>L’implémentation du SVG n’est pas homogène et souffre de nombreux bugs. Pour ce qui concerne la simple rotation d’un objet, chaque navigateur propose sa propre solution… s’il en existe une !
Sur Firefox (&#x3C;43), la propriété transform-origin est ignorée : la roue ne tourne plus sur son axe <a href="#note02">2</a> !</p>
<p>Ce bug est connu<a href="#note3">3</a> et son contournement nécessite quelques astuces. La roue doit être incorporée dans une balise englobante, sur laquelle va être appliquée la propriété transform-origin, avec pour valeurs « 50% 50% », c’est à dire son point central. Par héritage, cet axe sera utilisé par l’objet englobé sur lequel sera appliquée la rotation.</p>
<pre><code class="hljs language-svg">&#x3C;g <span class="hljs-keyword">class</span>=<span class="hljs-string">"ff-correct"</span>> 	<span class="hljs-comment">//  -moz-transform: translate(100px, 100px) ;</span>
	&#x3C;g id=<span class="hljs-string">"cible-roue"</span> <span class="hljs-keyword">class</span>=<span class="hljs-string">"wheel"</span>>  <span class="hljs-comment">// transform-origin: center center;</span>
		&#x3C;g <span class="hljs-keyword">class</span>=<span class="hljs-string">"ff-c-correct"</span>>  <span class="hljs-comment">// -moz-transform: translate(-100px, -100px);</span>
			<span class="hljs-comment">// -moz-transform-origin: 0 0;</span>
		<span class="hljs-comment">// code de la roue</span>
		&#x3C;/g>
	&#x3C;/g>
&#x3C;/g></code></pre>
<p>Safari perd ses repères lorsque le zoom est actif, quant à IE, il ignore tout simplement les propriétés transform appliquées au SVG.</p>
<p>Quand ça fonctionne, les performances ne sont pas au rendez-vous : si les versions desktop donnent le change, l’affichage sur mobile est franchement poussif et se dégrade très vite si l’on augmente le nombre de portions.
<em>Et pourtant elle tourne…</em></p>
<p>La meilleure solution est finalement de créer une div qui contiendra le SVG. sur la quelle sera appliquée la rotation. Miracle, les performances sont retrouvées, les incompatibilités disparues !</p>
<h2 id="réinitialiser-une-transition">Réinitialiser une transition</h2>
<p>L’animation de la roue est une simple transition CSS, qui produit une rotation selon un angle calculé à partir du tirage au sort.</p>
<pre><code class="hljs language-css">  <span class="hljs-selector-tag">wheel</span> { <span class="hljs-attribute">transition</span>: transform <span class="hljs-number">4s</span> <span class="hljs-built_in">cubic-bezier</span>(.36, -0.09, .23, .99)  ; }</code></pre>
<p>La transition est déclenchée en ajoutant un style en-ligne :</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cible2-roue"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"transform: rotateZ(300deg);"</span>></span></code></pre>
<p> ce qui évite de modifier dynamiquement les déclarations css.</p>
<p>Le nombre de tours est calculé en multipliant ce nombre par 360 ; pour une valeur de 1600 degrés par exemple, cela représentera  4 x 360 plus 160°, soit 4 tours complets plus le déplacement vers le lot gagnant.</p>
<p>Si, au tirage suivant, la rotation fait seulement 3 tours par exemple, la roue va tourner… à reculons ! il est nécessaire de retirer les tours complets, mais tout changement de valeur re-enclenchera une animation. L’astuce va consister à modifier la durée de transition pour qu’elle soit extrêmement brève et imperceptible.</p>
<p>Cela fonctionne très bien la première fois, mais la transition doit être remise à zéro pour fonctionner les fois suivantes. Il ne suffit pas de supprimer et réattribuer la classe supportant la transition.</p>
<p>Le truc consiste à modifier la durée de transition, en la passant à une fraction de seconde, le temps de mettre une valeur de rotation débarrassée de ses tours superflus. Le mouvement est imperceptible.</p>
<h2 id="bilan-technique">Bilan technique</h2>
<p>Ce projet m’a fait découvrir quelques rouages de l’animation avec javascript, sans l’aide d’une librairie. J’ai passé beaucoup de temps à détecter et contourner les bugs d’une animation très simple, pour aboutir à utiliser un simple élément html pour le faire. Pour de prochains projets, le recours à une bibliothèque est quasi-obligatoire.</p>
<p>SVG est une norme très ancienne, qui devient populaire à mesure que les derniers navigateurs l’ignorant disparaissent. J’ai depuis longtemps préféré utiliser le vectoriel au pixel pour la création de maquettes, cette approche est désormais celle du web responsive. Malheureusement, la construction d’une animation basée sur SVG est freinée par des bugs non résolus, sur des opérations somme toute assez courantes.</p>
<p>La modification à la volée d’une animation css par javascript souffre de ne pas utiliser d’API. Celles ci commencent à peine à apparaitre, et ne seront sans doute pas finalisées avant quelque temps : il faut encore utiliser nombre de hacks et prefixes vendeurs pour modifier quoi que ce soit. Les transitions sont plus simples à gérer et convienne parfaitement pour ce projet.  </p>
<p>Le recours à une librairie spécialisée comme Velocity.js ou Greensock est nécessaire pour des projets plus complexes, sans pouvoir tout résoudre.</p>
<h2 id="connecter-le-module-à-un-gestionnaire-en-back-end">Connecter le module à un gestionnaire en back-end</h2>
<p>En cas d’usage comme un jeu-concours, la sécurité d'un tel module ne peut etre assurée que par un système en back-end. Ses principales fonctions seraient :</p>
<ul>
<li>authentifier l’utilisateur pour éviter un usage abusif du jeu ;</li>
<li>limiter l’usage à un nombre déterminé de tirages, ainsi qu’un délai avant de  tenter un nouvel essai ;</li>
<li>contrôler les lots mis en jeu : la liste peut être générée par le back-end, qui sera informé des stocks de lots disponibles.</li>
</ul>
<p>Par exemple, un seul gros lot est gagnable par jour ; il doit être visible dans le jeu, mais il ne peut être gagné qu’une seule fois ; le drapeau permet de gérer le cas. Sauf à forcer le gain, il reste soumis à un tirage au sort.</p>
<h2 id="dautres-usages">D'autres usages</h2>
<p>Comme ce module est personnalisable, il est possible de trouver un usage dans tout jeu qui utilise le tirage au sort.
En ajoutant une interface de saisie pour les lots, on pourra, par exemple, s’en servir pour des petits jeux de gages… pour prochain gouter d’anniversaire de ma fille !</p>
<aside class="notes">
<h2>Notes</h2>
<ul>
<li id="note01">
<p>Les noms de couleurs en <a href="https://fr.wikipedia.org/wiki/Couleur_du_Web">css</a>. Connaissez-vous l'histoire tragique de <a href="http://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/">rebeccapurple</a> ?</p>
</li>
<li id="note02">
<p>voir l’article <a href="https://css-tricks.com/svg-animation-on-css-transforms/">css-tricks</a>.</p>
</li>
<li id="note03">
<p>le bug de firefox sur <a href="http://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working-in-firefox">stackoverflow</a>.</p>
</li>
</ul>
</aside>
]]></description><link>http://vitreene.com/articles/et-pourtant-elle-tourne/</link><guid isPermaLink="true">http://vitreene.com/articles/et-pourtant-elle-tourne/</guid></item><item><title><![CDATA[Notes techniques]]></title><description><![CDATA[
]]></description><link>http://vitreene.com/articles/</link><guid isPermaLink="true">http://vitreene.com/articles/</guid></item><item><title><![CDATA[À propos]]></title><description><![CDATA[<div class="a-propos-card">
<img class="a-propos-portrait"  src="../assets/img/portrait_DSC_0153.jpg" alt="Hervé Saint-Macary, webdesign" />
<p>Hervé Saint-Macary est concepteur graphique et élabore des sites sur-mesure et accessibles.
<a class="a-propos-mail-to" href="mailto:contact@vitreene.com?&subject=Prendre%20contact%20avec%20Hervé">Contactez-moi</a>
</p>
</div>
<p>Les technologies employées sont principalement :</p>
<ul>
<li>pour l’intégration HTML/CSS : <strong>Sass</strong>, <strong>Knacss</strong>.</li>
<li>pour le développement front-end : javascript, <strong>React / Redux</strong>, Vue.js  </li>
<li>CMS, <strong>Wordpress</strong> : création de thèmes et types de contenus personnalisés.</li>
<li>générateur de site statique : Phenomic,  MetalSmith.</li>
</ul>
<p>Membre actif du <a href="https://www.meetup.com/fr-FR/Marseille-WordPress-Meetup/">Meetup Wordpress Marseille</a></p>
<h3 id="making-of">Making-of</h3>
<p>Ce site est construit grâce à <a href="http://phenomic.io">Phenomic</a>, un générateur de sites statiques basé sur des composants React.</p>
<!--intro-->
]]></description><link>http://vitreene.com/a-propos/</link><guid isPermaLink="true">http://vitreene.com/a-propos/</guid></item></channel></rss>