Open Time - Mot-clé - responsive<p>Open time, open mind, open eyes</p>2024-03-29T07:16:30+01:00Franck Paulurn:md5:61070eb8c883ae7581f861faefddecbfDotclearPlutôt plus tardurn:md5:a28b436a89319a7617789264ee20bec72018-02-17T08:52:00+01:002018-02-17T10:13:44+01:00FranckDotclearaccessibilitédotcleardéveloppementresponsive <p><a href="https://open-time.net/public/screenshots/2018/rwd-table-large.jpg"><img src="https://open-time.net/public/screenshots/2018/.rwd-table-large_u.jpg" alt="" style="display:table; margin:0 auto;" /></a></p>
<p>Toujours pas satisfait de la gestion des tables dans l’admin de Dotclear, spécialement sur petit écran, et pour trouver une solution générique, qui soit à la fois accessible et <em>responsive</em> c’est pas gagné du tout !</p>
<p><a href="https://open-time.net/public/screenshots/2018/rwd-table-small.jpg"><img src="https://open-time.net/public/screenshots/2018/.rwd-table-small_u.jpg" alt="" style="display:table; margin:0 auto;" /></a></p>
<p>Ce que j’ai trouvé de mieux, pour l’instant, c’est une librairie de Filament Group : <a href="https://github.com/filamentgroup/tablesaw" hreflang="en">tablesaw</a> (cliquez sur l’image ci-dessous pour voir l’animation).</p>
<p><a href="https://open-time.net/public/illustrations/2018/tablesaw-stack.gif"><img src="https://open-time.net/public/illustrations/2018/.tablesaw-stack_u.jpg" alt="" style="display:table; margin:0 auto;" /></a></p>
<p>D’ailleurs ça m’intéresserait que vous regardiez sur vos (petits) écrans et/ou vos mobiles ce que donne <a href="http://filamentgroup.github.io/tablesaw/demo/toggle.html" hreflang="en">leur démo</a> et que vous me disiez comment ça fonctionne chez vous !</p>
<p>C’est pas parfait, entre autre avec Safari sur iOS, mais on s’approche de quelque chose d’utilisable. Restera à voir comment ça s’organise, spécialement quand on a en plus un drag’n’drop pour trier les lignes…</p>
<p>Quoi qu’il en soit, ce chantier sera repris plutôt plus tard vu qu’en ce moment c’est plutôt un nettoyage/formatage de Clearbricks avec reprise correspondante dans Dotclear.</p>https://open-time.net/post/2018/02/17/Plutot-plus-tard#comment-formhttps://open-time.net/feed/atom/comments/13697Plugin adaptiveImages 0.6 pour Dotclearurn:md5:c25c127a4ab3e6a58dd852b2829a0c5e2013-12-17T09:59:00+01:002013-12-17T12:18:02+01:00FranckPluginsdotclearimagespluginresponsive <p>Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, résolution et qualité des images utilisées dans le contenu éditorial d’une page web en fonction de l’utilisateur.</p>
<p>Les images adaptatives sont nécessaires pour les sites <em>Responsive</em> qui vont adapter leur affichage au périphérique de consultation : sur un site <em>Responsive</em> la même page est rendue de manière différente selon la taille de l’écran.</p>
<h3>Configuration</h3>
<p>Le plugin s’installe comme tous les autres et se configure dans les <strong>Paramètres du blog</strong>.</p>
<h4>Options</h4>
<p>Trois options sont disponibles :</p>
<ol>
<li>La première permet d’indiquer la largeur maximale des images qui seront affichées sur votre blog. Par défaut celle-ci est positionnée à 640 pixels. Sur un photo-blog il est probable qu’il faille augmenter cette valeur à 800 voire 1024 pixels ou plus.</li>
<li>La deuxième permet d’indiquer la largeur minimale des images qui devront être adaptées. Par défaut celle-ci est positionnée à 320 pixels. Les images de tailles inférieures resteront inchangées.</li>
<li>La troisième permet de préciser la couleur de fond à utiliser lorsque le plugin génèrera des images JPG à partir d’images possédant un fond transparent. Par défaut la couleur de fond est blanche (<code>#ffffff</code>).</li>
</ol>
<h4>Qualités de compression JPEG</h4>
<p>Quatre qualités sont paramétrables (de 0, plus forte compression et plus basse qualité, à 100 pour la meilleure qualité au détriment de la taille de l’image générée) :</p>
<ol>
<li>Celle utilisée pour les images de prévisualisation, affichées pendant le chargement des images complètes. Il vaut mieux utiliser une valeur faible afin de limiter autant que possible la taille de ces images. La valeur par défaut est <strong>10</strong>.</li>
<li>Celle utilisée pour les images standards. La valeur par défaut est <strong>75</strong>.</li>
<li>Celle utilisée pour les images 1,5 fois plus denses. La valeur par défaut est <strong>65</strong>.</li>
<li>Celle utilisée pour les images 2 fois plus denses (utilisées sur les écrans rétina par exemple). La valeur par défaut est <strong>45</strong>.</li>
</ol>
<h4>Options avancées</h4>
<ol>
<li>La première permet d’activer le chargement <q>à la volée</q> des images. Ce mode permet de ne créer les images requises qu’au moment où elles sont réellement requises. Dans le cas contraire, toutes les variantes nécessaires sont créées au chargement de la page, si les images n’existent pas déjà, évidemment.</li>
<li>La seconde permet de préciser les seuils de génération des images. Ces seuils sont un compromis entre les seuils utilisés par les <q>mediaqueries</q> du thème de votre blog et les résolutions et densités des écrans utilisés pour le visualiser. Par défaut ces seuils sont paramétrés à <strong>160</strong>, <strong>320</strong>, <strong>480</strong>, <strong>640</strong>, <strong>960</strong> et <strong>1440</strong> pixels.</li>
</ol>
<p>Si vous activez la première option vous devrez alors configurer un fichier <code>.htaccess</code> contenant, pour une installation standard de Dotclear (installée dans un répertoire nommé <strong>dotclear</strong> à la racine de votre hébergement), ceci :</p>
<pre class="brush: plain">RewriteEngine On
RewriteBase /dotclear/
# If file or directory exists deliver it and ignore others rewrite rules
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule "." - [skip=100]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule "." - [skip=100]
# On demand adaptive image
RewriteRule public/.adapt-img/(.+)$ index.php?adapt-img/$1 [QSA,L]</pre>
<p>Cela permettra au plugin de générer les images nécessaires à la volée, lors de leur premier affichage.</p>
<h3>Divers</h3>
<p>Si vous modifiez un ou plusieurs paramètres de ce plugin il sera peut-être utile de vider le cache existant. Une tâche d’entretien est disponible à cet effet et accessible avec l’option <strong>Maintenance</strong> (menu <strong>Plugins</strong>), elle est intitulée « Vider le cache des images adaptatives ».</p>
<h3>Personnalisation</h3>
<p>Plusieurs classes sont utilisées par ce plugin :</p>
<p>Les images adaptées ont une classe <code>adapt-img</code> et sont encapsulées dans un <em>wrapper</em> avec la classe <code>adapt-img-wrapper</code>. Si par exemple vous voulez mettre des coins arrondis sur vos images, il faudra aussi les appliquer sur .adapt-img-wrapper :</p>
<pre class="brush: css">img,.adapt-img-wrapper { border-radius:5px; }</pre>
<p>Notez que le <em>wrapper</em> est un <code><span></code> ou une <code><div></code>. La seconde forme est utilisée dès lors que l’image est flottante ou centrée.</p>
<p>Les images fournies à Internet Explorer < 10 ont aussi une classe spécifique <code>adapt-img-ie</code>.</p>
<p>Pour empêcher le plugin d’adapter certaines images que vous voulez conserver intactes, il suffit de leur ajouter une classe <code>no-adapt-img</code>.</p>
<hr />
<p>Ce billet servira de support pour cette version du plugin.</p>https://open-time.net/post/2013/12/17/Plugin-adaptiveImages-06-pour-Dotclear#comment-formhttps://open-time.net/feed/atom/comments/10203Plugin adaptiveImages 0.5 pour Dotclearurn:md5:65a568d02313a3bd7e07769904ca40f02013-12-10T12:02:00+01:002013-12-17T10:30:01+01:00FranckPluginsdotclearimagespluginresponsive <p><span class="attention">Attention : <a href="https://open-time.net/post/2013/12/17/Plugin-adaptiveImages-06-pour-Dotclear">Une version plus récente du plugin a été publiée</a>.</span></p>
<p>Extrait de <a href="http://blog.nursit.net/Adaptive-Images-et-Responsive-Web.html">l’article sur les images adaptatives et de la solution proposée</a> par Cédric Morin (Nursit) :</p>
<blockquote><p>Une solution prête à l’emploi pour résoudre le casse-tête des Adaptive Images, adaptée aux sites dynamiques (une de plus, oui)</p>
<p>
Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, résolution et qualité des images utilisées dans le contenu éditorial d’une page web en fonction de l’utilisateur.</p>
<p>
Les images adaptatives sont nécessaires pour les sites Responsive qui vont adapter leur affichage au périphérique de consultation : sur un site Responsive la même page est rendue de manière différente selon la taille de l’écran.</p>
<p>
Adapter les images vise avant tout à améliorer l’expérience utilisateur, en délivrant l’image qui convient le mieux : inutile d’envoyer une image trop grande et trop lourde si l’utilisateur consulte la page sur un smartphone avec un petit écran et une mauvaise connexion internet !</p>
<p>
<span class="signature">Cédric <span class="author">Morin</span> (Nursit), <em><a href="http://blog.nursit.net/Adaptive-Images-et-Responsive-Web.html">Adaptive Images et Responsive Web Design</a></em></span></p></blockquote>
<p>De cette réflexion est issue une librairie PHP utilisable par les sites web pour offrir ce système <q>automagiquement</q>.</p>
<p>Un <a href="http://contrib.spip.net/4458">plugin SPIP</a> a été développé qui la met en œuvre et j’ai songé qu’une adaptation pouvait être faite pour Dotclear, surtout que des <a href="http://twitter.com/nhoizey/status/407923840044789760">appels pressants</a> en ce sens s’étaient manifestés sur Twitter.</p>
<p>Alors voilà.</p>
<p>Il aura fallu de nombreux aller-retours pendant ces derniers jours entre Cédric et moi pour adapter sa librairie, qui avait été conçue à l’origine pour servir avec Spip, car Dotclear permet des schémas d’installation qui divergent un peu, essentiellement parce qu’il est multi-blog et que le dossier des médias de chacun des blogs peut-être déporté de l’application Dotclear elle-même<sup>[<a href="https://open-time.net/post/2013/12/10/Plugin-adaptiveImages-05-pour-Dotclear#pnote-10174-1" id="rev-pnote-10174-1">1</a>]</sup>.</p>
<p>Cédric s’est converti à Dotclear avec brio pour tester, modifier et corriger le plugin que j’avais codé et finalement voilà le résultat qui viendra s’ajouter à la liste des mises en œuvre de sa librairie.</p>
<h3>Configuration</h3>
<p>Le plugin s’installe comme tous les autres et se configure dans les <strong>Paramètres du blog</strong>.</p>
<p>Deux options sont disponibles :</p>
<ol>
<li>La première permet d’indiquer la largeur maximale des images qui seront affichées sur votre blog. Par défaut celle-ci est positionnée à 640 pixels. Sur un photo-blog il est probable qu’il faille augmenter cette valeur à 800 voire 1024 pixels ou plus.</li>
<li>La seconde permet d’activer le chargement <q>à la volée</q> des images. Ce mode permet de ne créer les images requises qu’au moment où elles sont réellement requises. Dans le cas contraire, toutes les variantes nécessaires sont créées au chargement de la page, si les images n’existent pas déjà, évidemment.</li>
</ol>
<p>Si vous activez la seconde option vous devrez alors configurer un fichier <code>.htaccess</code> contenant, pour une installation standard de Dotclear (installée dans un répertoire nommé <strong>dotclear</strong> à la racine de votre hébergement), ceci :</p>
<pre class="brush: plain">RewriteEngine On
RewriteBase /dotclear/
# If file or directory exists deliver it and ignore others rewrite rules
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule "." - [skip=100]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule "." - [skip=100]
# On demand adaptive image
RewriteRule public/.adapt-img/(.+)$ index.php?adapt-img/$1 [QSA,L]</pre>
<p>Cela permettra au plugin de générer les images nécessaires à la volée, lors de leur premier affichage.</p>
<h3>Roadmap</h3>
<p>Il reste encore pas mal de travail pour produire un plugin finalisé, entre autre parce que d’autres réglages plus avancés sont offerts par la librairie, et que des cas d’usage n’ont pas encore été testés et éventuellement pris en compte. Je pense entre autres aux images présentes dans les bandeaux de certains thèmes.</p>
<p>À suivre donc…</p>
<h3>Remerciements</h3>
<p>Je tiens à remercier <a href="https://twitter.com/GusLeLapin">Cédric</a> qui a passé beaucoup de temps à répondre à mes questions, à adapter son code en fonction des spécificités de Dotclear et même à mettre les mains dans le cambouis de mon plugin pour effectuer tests et corrections.</p>
<hr />
<p>Ce billet servira de support pour cette version du plugin.</p>
<div class="footnotes"><h4 class="footnotes-title">Note</h4>
<p>[<a href="https://open-time.net/post/2013/12/10/Plugin-adaptiveImages-05-pour-Dotclear#rev-pnote-10174-1" id="pnote-10174-1">1</a>] J’en explique les réglages nécessaires dans ce <a href="https://open-time.net/post/2011/08/05/Path-et-URL-sont-dans-un-bateau-nomme-Dotclear">tuto</a></p></div>
https://open-time.net/post/2013/12/10/Plugin-adaptiveImages-05-pour-Dotclear#comment-formhttps://open-time.net/feed/atom/comments/10174