Open Time - Mot-clé - web<p>Open time, open mind, open eyes</p>2024-03-29T07:16:30+01:00Franck Paulurn:md5:61070eb8c883ae7581f861faefddecbfDotclearParallèleurn:md5:fc5ad59670eaff139dbcc3ff7bd686c52023-12-14T09:55:00+01:002023-12-23T10:29:55+01:00FranckBrèvesdotclearserveurweb <figure class="media-center">
<a href="https://open-time.net/public/screenshots/2023/open-time-http2-waterfall.jpg" title="Ouvrir le média"><img src="https://open-time.net/public/screenshots/2023/.open-time-http2-waterfall_w.jpg" alt="Waterfall sur l'accueil du blog" height="642" width="800"></a>
<figcaption>Waterfall sur l’accueil du blog, déc. 2023</figcaption>
</figure>
<p>L’ami <strong>Biou</strong> à changé récemment un chouia la config Apache sur le serveur et maintenant c’est servi en HTTP/2 si c’est accepté en face !</p>
<p>Trop bien, et la vitesse d’affichage est sensiblement améliorée, surtout côté administration d’ailleurs !</p>
https://open-time.net/post/2023/12/14/Parallele#comment-formhttps://open-time.net/feed/atom/comments/15928Contre toute attenteurn:md5:5fdd2ea7e29ca49103d2205ea35c4dfe2021-09-02T09:37:00+02:002021-09-06T11:14:14+02:00FranckBrèvesNextcloudserveurweb <p><img src="https://open-time.net/public/illustrations/2016/.raspberry_u.jpg" alt="" style="display:table; margin:0 auto;" height="600" width="600" /></p>
<p>Contre toute attente, disais-je, mon installation d’un petit proxy (haproxy) sur un Raspberry Pi 3+ fonctionne comme prévu, du premier coup, et ce jusqu’à plus ample informé !</p>
<p>Jusque et y compris le renouvellement d’un certificat (en mode test) sur l’un des deux serveurs qui se trouve derrière, <i lang="en">Incredible</i> :-)</p>
<p>Ma config <strong>haproxy</strong> (histoire de pouvoir m’y référer plus tard si besoin) :</p>
<pre><code class="language-plain">#---------------------------------------------------------------------
# Global settings
#---------------------------------------------------------------------
global
log /dev/log local0
log /dev/log local1 notice
chroot /var/lib/haproxy
stats socket /run/haproxy/admin.sock mode 660 level admin expose-fd listeners
stats timeout 30s
user haproxy
group haproxy
daemon
#---------------------------------------------------------------------
# common defaults that all the 'listen' and 'backend' sections will
# use if not designated in their block
#---------------------------------------------------------------------
defaults
mode tcp
option tcplog
log global
option dontlognull
timeout connect 5000
timeout client 50000
timeout server 50000
#---------------------------------------------------------------------
# dedicated stats page
#---------------------------------------------------------------------
listen stats
mode http
bind :22222
stats enable
stats uri /haproxy?stats
stats realm Haproxy\ Statistics
stats auth zeboss:passwordisfutile
stats refresh 30s
#---------------------------------------------------------------------
# main frontend which proxys to the backends
#---------------------------------------------------------------------
frontend main_http_listen
bind 192.168.42.40:80
mode http
acl acl_nextcloud_boulot_http hdr(host) -i nextcloud.boulot.fr
acl acl_boulot_http hdr(host) -i boulot.fr
use_backend backend_snc_http if acl_nextcloud_boulot_http
use_backend backend_sweb_http if acl_boulot_http
frontend main_https_listen
bind 192.168.42.40:443
mode tcp
option tcplog
log global
tcp-request inspect-delay 5s
tcp-request content accept if { req.ssl_hello_type 1 }
acl acl_nextcloud_boulot_https req.ssl_sni -i nextcloud.boulot.fr
acl acl_boulot_https req.ssl_sni -i boulot.fr
use_backend backend_snc_https if acl_nextcloud_boulot_https
use_backend backend_sweb_https if acl_boulot_https
#---------------------------------------------------------------------
# Backends
#---------------------------------------------------------------------
# Nextcloud server
backend backend_snc_http
description snc (HTTP)
mode http
server server_snc_http 192.168.42.13:80 check
backend backend_snc_https
description snc (HTTPS)
mode tcp
option ssl-hello-chk
server server_snc_https 192.168.42.13:443 check
# Web server
backend backend_sweb_http
description sweb (HTTP)
mode http
server server_sweb_http 192.168.42.16:80 check
backend backend_sweb_https
description sweb (HTTPS)
mode tcp
option ssl-hello-chk
server server_sweb_https 192.168.42.16:443 check</code></pre>
<p>Quelques explications :</p>
<p>Le proxy écoute sur les <strong>deux ports 80 et 443</strong> (redirigés depuis la box).</p>
<p>Pour le <strong>port 80</strong>, c’est du <strong>mode HTTP</strong> basique, utile en particulier pour laisser passer les quelques requêtes de mise en place des certificats sur les serveurs qui sont derrière. La distinction est faite sur le nom de domaine requis pour diriger vers le premier (serveur Nextcloud) ou le second (serveur web).</p>
<p>Pour le <strong>port 443</strong>, c’est le <strong>mode TCP</strong> qui est requis, pour faire la distinction.</p>
<p>Je laisse le soin aux serveurs qui sont derrière de rediriger le trafic <strong>HTTP vers HTTPS</strong> autant que de besoin.</p>
<p>Pas besoin non plus de mettre en place du <i lang="en">Load balancing</i> — ce que haproxy est capable de faire aussi — avec mes deux seuls petits serveurs.</p>
<p>Un <code>certbot renew --dry-run</code> fonctionne comme attendu, je verrai d’ici quelques jours si le renouvellement réel fonctionne comme prévu (demain a priori).</p>
<p>Jusqu’à présent <a href="https://open-time.net/post/2021/07/09/Petit-proxy-deviendra-grand">les stats</a> montent gentiment, on verra sur la durée comment le Raspberry tient la charge…</p>
<hr />
<p>Et un premier certificat renouvelé à travers le proxy, tout fonctionne comme attendu \o/</p>https://open-time.net/post/2021/09/02/Contre-toute-attente#comment-formhttps://open-time.net/feed/atom/comments/15087Madame Printurn:md5:e23c394c019416d972dbf37dd8584e682017-03-25T09:44:00+01:002017-03-25T11:09:42+01:00FranckInternetweb <blockquote><p>Cette Madame n’est ni pire ni meilleure qu’autrui, toutefois, elle est souvent source de frustration voire de colère extrême pour les intégrateurs et autres développeurs de tous poils. Sa potion magique est la suivante : le Web, c’est du print.</p>
<p>
Partant d’un tel postulat, il est aisé de comprendre que l’approche Web de Madame Print ne peut que faire des étincelles. En résumant très vulgairement, le print, c’est le domaine où l’on contrôle tout : la typo, la mise en page, etc. Le print, ce sont les cohortes de Jules César : parfaitement ordonnées, rien ne dépasse, tout est sous contrôle.</p>
<p>
<span class="signature">Nicolas <span class="author">Hoffmann</span>, <em><a href="https://www.nicolas-hoffmann.net/source/1578-Je-vous-presente-Madame-Print.html">Je vous présente Madame Print</a></em></span></p></blockquote>
<p>J’ai eu affaire à madame Print, encore hier, à propos d’un site en cours d’élaboration depuis déjà quelques mois et j’avoue que sa méconnaissance du web est assez surprenante quand on sait qu’elle est suffisamment jeune pour n’avoir pas connu le monde sans Internet et le web, et qu’elle s’en sert tous les jours ! J’ai appris qu’elle sortait tout juste d’une école de design.</p>
<p>Cette dame s’occupe de préparer et rédiger une charte graphique qui doit être suivie pour tous les <em>deliverables</em> à venir, qu’ils soient imprimés ou affichés sur écran. Seulement voilà, il n’est question <strong>que</strong> de points typographiques pour les tailles de police, d’interdits concernant les veuves et orphelines — concept quasi exclusif du print où la pagination peut provoquer ce genre de défaut —, ou encore, pour en revenir aux polices au choix d’une particulière, soi-disante disponible partout — sachant que <strong>son</strong> partout c’est <strong>Windows</strong> et a priori rien d’autre.</p>
<p>Donc, Calibri corps 10 pour le texte courant, … Ce à quoi j’ai rétorqué, chiffres à l’appui, que cette police ne serait pas utilisée sur mobile, quasiment pas sur Mac, et encore moins sur Linux. La réponse ? Alors on va utiliser Arial, soit une des polices sans empattements les plus difficiles à lire, de mon point de vue, lorsque les textes sont un peu touffus comme ça risque de l’être.</p>
<p>Ensuite j’ai reçu quelques médias, pour l’illustration, sous des formats divers : Une photo EPS pesant 16 Mo, 3 autres en haute résolution pesant chacune plus de 2 Mo, une série d’images vectorielles à utiliser comme « mascotte », chacune fournie dans un premier temps au format PDF, puis ai (Adobe Illustrator), et enfin en PNG, chacune faisant a minima 1000 pixels dans sa plus petite dimension. Je me suis un peu ému de la taille de tous ces médias et la réponse reçue quelques minutes plus tard m’a scotché :</p>
<blockquote><p>Je ne sais pas, je te laisse gérer pour les dimensions (sic)</p></blockquote>
<p>Ça va être cocasse les réductions de PNG alors que c’est si facile de faire ça avec les sources sous Adobe Illustrator !</p>
<p>Et je ne parle pas des deux ou trois photos détourées à la serpe, fournies au format PNG, qu’il va aussi falloir réduire sous peine d’avoir des pages pesant plusieurs méga-octets chacune. Ou encore des schémas reçus au format Photoshop, ou encore d’autres images, au bon format, mais d’une taille de timbre-poste !</p>
<p>Pas plus des logos qu’il faut préserver de toute « pollution » extérieure et prévoir en conséquence un « blanc tournant » autour d’iceux ! Pourquoi ne pas avoir intégrer cette marge dans les images, on se demande ? J’ai fini par obtenir ça, en leur expliquant que gérer les marges n’était pas toujours trivial sur certains supports…</p>
<p>Bref, je ne vais pas faire de miracle et je vais même botter en touche pour un certain nombre de pré-requis (famille et tailles de police entre autre) ; de toute façon ce site est la 5e roue du carrosse et ce qui a l’air de les préoccuper principalement est ce que seront les dépliants imprimés et la newsletter diffusée (au format PDF) régulièrement.</p>
<p>Ah oui, j’oubliais, je ne leur pas encore parlé de « responsive » ou des normes question contraste minimum ; la couleur choisie pour les titres sur le fond sélectionné ne passe aucun critère du RGAA — c’est un site qui est sous la responsabilité d’une collectivité territoriale.</p>
<p>Comme je suis coquin, je vais garder ça sous le coude pour plus tard ;-)</p>
<p><img src="https://open-time.net/public/illustrations/2017/headdesk.gif" alt="" style="display:table; margin:0 auto;" /></p>https://open-time.net/post/2017/03/25/Madame-Print#comment-formhttps://open-time.net/feed/atom/comments/13266Markdown vs Wiki Dotclearurn:md5:50d6a512501692e4a9b1a509cf1167e72014-01-09T11:16:00+01:002014-01-09T16:24:31+01:00FranckAir du tempssyntaxewebwiki <h3>Prologue</h3>
<blockquote>
<p>Il serait par exemple intéressant que je refasse ce billet en utilisant la syntaxe Markdown plutôt que le Wiki Dotclear, et que je vois si je peux “mieux” présenter cette comparaison qu’actuellement.</p>
<p><span class="signature">Franck <span class="author">Paul</span>, <em><a href="https://open-time.net/post/2013/12/23/Wiki-Dotclear-vs-Markdown">Wiki Dotclear vs Markdown</a></em></span></p>
</blockquote>
<p>C’est ce que j’entreprends avec ce billet qui reprend l’intégralité <a href="https://open-time.net/post/2013/12/23/Wiki-Dotclear-vs-Markdown">du billet</a> (initialement publié le 23 décembre 2013) cité ci-dessous, en utilisant a priori des tableaux là où ce sera pertinent.</p>
<hr />
<hr />
<h3>Wiki Dotclear vs Markdown</h3>
<p>Les deux syntaxes wiki, Dotclear et Markdown, sont disponibles pour écrire les billets (et les pages, commentaires, …). La <a href="https://open-time.net/post/2011/05/29/Memento-wiki-Dotclear">première syntaxe</a> est intégrée depuis quasiment le début de Dotclear 1, la seconde est utilisable en installant le <a href="https://open-time.net/post/2013/10/17/Plugin-formatting-markdown-12-pour-Dotclear">plugin idoine</a>.</p>
<p>Ça fait un moment déjà que j’envisage de basculer sur Markdown parce que certaines applications tierces proposent cette syntaxe et me permettrait ainsi de faire un simple copié-collé pour alimenter ce blog. Par contre, ce qui me retient encore est que je ne sais si toutes les possibilités offertes par la syntaxe Wiki Dotclear sont également proposées par Markdown.</p>
<p>Alors voilà une sorte de table de correspondance entre les deux<sup id="fnref:n1"><a href="https://open-time.net/post/2014/01/09/Markdown-vs-Wiki-Dotclear#fn:n1" rel="footnote">1</a></sup>. J’indiquerai <strong>(DC)</strong> quand il s’agira de la syntaxe Wiki Dotclear et <strong>(MD)</strong> pour Markdown (<strong>MDE</strong> quand ce sera uniquement dans l’extension <a href="http://michelf.ca/projects/php-markdown/extra/">Extra</a> de Michel Fortin implémentée dans le plugin). D’autre part, quand plusieurs syntaxes sont proposées par Markdown pour un balisage, j’indiquerai la syntaxe la plus proche de Dotclear.</p>
<h3>Marqueurs de début de ligne :</h3>
<h4>Titres :</h4>
<p>Les niveaux 1 et 2 sont historiquement réservés au titre du blog et au titre du billet.</p>
<table>
<thead>
<tr>
<th>Type</th>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>Niveau 3</td>
<td><code>!!!</code> + <em>Titre</em> (DC)</td>
<td><code>###</code> + <em>Titre</em> (MD)</td>
</tr>
<tr>
<td>Niveau 4</td>
<td><code>!!</code> + <em>Titre</em> (DC)</td>
<td><code>####</code> + <em>Titre</em> (MD)</td>
</tr>
<tr>
<td>Niveau 5</td>
<td><code>!</code> + <em>Titre</em> (DC)</td>
<td><code>#####</code> + <em>Titre</em> (MD)</td>
</tr>
</tbody>
</table>
<p>Vous noterez l’inversion du nombre de symboles utilisés (décroissant pour Dotclear, croissant pour Markdown).</p>
<h4>Listes :</h4>
<table>
<thead>
<tr>
<th>Type</th>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>Numérotées</td>
<td><code>#</code> + <em>élément de liste</em> (DC)</td>
<td><code>1.</code> + <em>élément de liste</em> (MD)</td>
</tr>
<tr>
<td>Non numérotées</td>
<td><code>*</code> + <em>élément de liste</em> (DC et MD)</td>
<td><em>idem</em></td>
</tr>
<tr>
<td><em>2e niveau</em></td>
<td><code>##</code>, <code>#*</code>, <code>*#</code> ou <code>**</code> + <em>élément de liste</em> (DC)</td>
<td><code><4 espaces ou une tabulation></code> + <code>1.</code> ou <code>*</code> (MD)</td>
</tr>
</tbody>
</table>
<h4>Divers :</h4>
<table>
<thead>
<tr>
<th>Type</th>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trait horizontal</td>
<td><code>----</code> (DC et MD)</td>
<td><em>idem</em></td>
</tr>
<tr>
<td>Texte pré-formatté</td>
<td><code><espace></code> + <em>texte</em> (DC)</td>
<td><code><4 espaces ou une tabulation></code> + <em>texte</em> (MD)</td>
</tr>
<tr>
<td>Bloc de citation</td>
<td><code>></code> + <em>texte</em> (DC et MD)</td>
<td><em>idem</em></td>
</tr>
</tbody>
</table>
<h4>Bloc HTML (sera interprété) :</h4>
<pre><code>///html
code HTML
///
</code></pre>
<p>(DC)</p>
<pre><code>code HTML
</code></pre>
<p>(MD)</p>
<h3>Marqueurs de fin de ligne :</h3>
<table>
<thead>
<tr>
<th>Type</th>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>Retour à la ligne</td>
<td><code>%%%</code> (DC)</td>
<td><code><2 espaces ou plus></code> (MD)</td>
</tr>
</tbody>
</table>
<p>Une ligne vide termine un bloc (paragraphe, liste, …), dans les deux syntaxes (DC et MD)</p>
<h3>Marqueurs indépendants de la position :</h3>
<table>
<thead>
<tr>
<th>Type</th>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>Emphase</td>
<td><code>''</code> + <em>texte</em> + <code>''</code> (DC)</td>
<td><code>*</code> + <em>texte</em> + <code>*</code> (MD)</td>
</tr>
<tr>
<td>Forte emphase</td>
<td><code>__</code> + <em>texte</em> + <code>__</code> (DC et MD)</td>
<td><em>idem</em></td>
</tr>
<tr>
<td>Insertion</td>
<td><code>++</code> + <em>texte</em> + <code>++</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
<tr>
<td>Suppression</td>
<td><code>--</code> + <em>texte</em> + <code>--</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
</tbody>
</table>
<p>Pour l’insertion et la suppression, Markdown impose l’usage des balises HTML <code><ins></code> et <code><del></code>.</p>
<h4>Liens :</h4>
<table>
<thead>
<tr>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[</code> + <em>url</em> + <code>]</code> (DC)</td>
<td><code><</code> + <em>url</em> + <code>></code> (MD)</td>
</tr>
<tr>
<td><code>[</code> + <em>nom</em> + <code>|</code> + <em>url</em> + <code>]</code> (DC)</td>
<td><code>[</code> + <em>nom</em> + <code>](</code> + <em>url</em> + <code>)</code> (MD)</td>
</tr>
<tr>
<td><code>[</code> + <em>nom</em> + <code>|</code> + <em>url</em> + <code>|</code> + <em>langue</em> + <code>]</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
<tr>
<td><code>[</code> + <em>nom</em> + <code>|</code> + <em>url</em> + <code>|</code> + <em>langue</em> + <code>|</code> + <em>titre</em> + <code>]</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
</tbody>
</table>
<p>La mention de la langue n’est pas possible avec Markdown sans passer par les balises HTML <code><a…/></code>. Par contre l’ajout d’un titre est possible : <code>[</code> + <em>nom</em> + <code>](</code> + <em>url</em> + <code>"</code> + <em>titre</em> + <code>")</code> <del>et n’a pas d’équivalence dans Dotclear sans ajouter également la langue</del> <ins>; dans Dotclear il suffit de ne pas préciser la langue entre les deux <code>|</code></ins> (<em>correction effectuée ce jour à 18h</em>).</p>
<h5>Images :</h5>
<table>
<thead>
<tr>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>((</code> + <em>url</em> + <code>|</code> + <em>texte alternatif</em> + <code>))</code> (DC)</td>
<td><code>![</code> + <em>texte alternatif</em> + <code>](</code> + <em>url</em> + <code>)</code> (MD)</td>
</tr>
<tr>
<td><code>((</code> + <em>url</em> + <code>|</code> + <em>texte alternatif</em> + <code>|</code> + <em>position (L/G,C,R/D)</em> + <code>))</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
<tr>
<td><code>((</code> + <em>url</em> + <code>|</code> + <em>texte alternatif</em> + <code>|</code> + <em>position</em> + <code>|</code> + <em>titre</em> + <code>))</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
</tbody>
</table>
<p>La mention de la position n’est pas possible avec Markdown sans passer par les balises HTML/CSS <code><img … /></code>. Par contre l’ajout d’un titre est possible : <code>![</code> + <em>nom</em> + <code>](</code> + <em>url</em> + <code>"</code> + <em>titre</em> + <code>")</code> <del>et n’a pas d’équivalence dans Dotclear sans ajouter également la position</del> <ins>; dans Dotclear il suffit de ne pas préciser la position entre les deux <code>|</code></ins> (<em>correction effectuée ce jour à 18h</em>).</p>
<h5>Ancres :</h5>
<table>
<thead>
<tr>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>~</code> + <em>ancre</em> + <code>~</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
</tbody>
</table>
<p>Markdown impose l’usage de la balise <code><a name="ancre"></a></code> pour l’insertion d’une ancre au sein du contenu.</p>
<h5>Acronymes :</h5>
<table>
<thead>
<tr>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>??</code> + <em>acronyme</em> + <code>|</code> + <em>titre</em> + <code>??</code> (DC)</td>
<td><code>*[</code> + <em>acronyme</em> + <code>]:</code> + <em>titre</em> (en fin de contenu, toutes les occurrences de l’acronyme seront remplacées dans le texte, MDE).</td>
</tr>
</tbody>
</table>
<h5>Citation :</h5>
<table>
<thead>
<tr>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>{{</code> + <em>citation</em> + <code>}}</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
<tr>
<td><code>{{</code> + <em>citation</em> + <code>|</code> + <em>langue</em> + <code>}}</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
<tr>
<td><code>{{</code> + <em>citation</em> + <code>|</code> + <em>langue</em> + <code>|</code> + <em>url</em> + <code>}}</code> (DC)</td>
<td><strong>pas d’équivalence</strong> (MD)</td>
</tr>
</tbody>
</table>
<p>Markdown impose l’usage de la balise <code><q></code> pour l’insertion de citation en ligne.</p>
<h5>Autres :</h5>
<table>
<thead>
<tr>
<th>Élément</th>
<th>Dotclear</th>
<th>Markdown</th>
</tr>
</thead>
<tbody>
<tr>
<td>Code</td>
<td><code>@@</code> + <em>code</em> + <code>@@</code> (DC)</td>
<td><code>\`` + *code* +</code>`` (MD)</td>
</tr>
<tr>
<td>Note</td>
<td><code>$$</code> + <em>corps de la note</em> + <code>$$</code> (DC)</td>
<td><code>[^</code> + <em>refnote</em> + <code>]</code> dans le texte et <code>[^</code> + <em>refnote</em> + <code>]:</code> + <em>corps de la note</em> (en fin de contenu, MDE)</td>
</tr>
<tr>
<td>Littéral</td>
<td><code>\</code> + <em>caractère</em> (DC et MD)</td>
<td><em>idem</em></td>
</tr>
<tr>
<td>Code HTML (sera interprété)</td>
<td><code><code></code> + code HTML + <code></code></code> (DC)</td>
<td><code>code HTML</code> (MD)</td>
</tr>
</tbody>
</table>
<h3>Conclusion</h3>
<p>De mon point de vue et sans tenir compte des possibilités supplémentaires de Markdown par rapport à la syntaxe Wiki Dotclear (tables, listes de définition, gestion des éléments indentés, listes dont les éléments peuvent contenir plusieurs paragraphes, …) le manque le plus flagrant est l’absence de prise en compte de la langue pour les liens, qui peut assez souvent être différente de la langue du contenu (je rédige en français et moult ressources liées sont en anglais), ce qui m’obligerait à basculer sur la représentation HTML de la balise.</p>
<p>Idem pour les citations en ligne, que j’utilise assez régulièrement, qui sont complètement absentes et imposent l’usage de la balise HTML correspondante.</p>
<p>Après avoir fait cette comparaison (certes incomplète du point de vue de Markdown et de son extension Extra) il apparaît que le choix de la syntaxe pourrait essentiellement dépendre du type de contenu à éditer. Markdown m’apparaît plus ”geek” à l’usage que le Wiki Dotclear, mais c’est peut-être qu’après plusieurs milliers de billets écrits avec cette dernière syntaxe, j’en connais parfaitement les possibilités et les limites.</p>
<p>Il serait par exemple intéressant que je refasse ce billet en utilisant la syntaxe Markdown plutôt que le Wiki Dotclear, et que je vois si je peux “mieux” présenter cette comparaison qu’actuellement.</p>
<hr />
<hr />
<h3>Épilogue</h3>
<p>Markdown apporte quelques raffinements qui peuvent être les bienvenus, comme la possibilité de concevoir rapidement et facilement des tableaux, ou des listes de définition ; et son avantage indéniable est la facilité avec laquelle vous intégrez du HTML, justement, au sein du contenu.</p>
<p>Je n’ai quasiment pas été gêné pendant la <em>conversion</em> du Wiki Dotclear vers Markdown pour transformer le contenu du billet original.</p>
<p>Comme je le précisais dans mon premier billet (voir la conclusion reproduite ci-dessus), le manque le plus flagrant, compte tenu évidemment de ce que je publie d’habitude, est l’impossibilité de préciser la langue d’une ressource sans passer par le balisage HTML.</p>
<p>Autre petit inconvénient, l’utilisateur est tenu de fournir des références de note unique avec Markdown alors que le Wiki Dotclear gère ça tout seul. Cela dit c’est à double-sens puisque une même note peut être utilisée à plusieurs endroits dans le texte sans être obligé de la dupliquer.</p>
<p>L’idéal, je pense, serait de compléter Markdown avec les deux trois bricoles que j’utilise (citation en ligne, langue pour les liens, insertion, suppression), on obtiendrait ainsi quelque chose d’assez proche de la perfection<sup id="fnref:n2"><a href="https://open-time.net/post/2014/01/09/Markdown-vs-Wiki-Dotclear#fn:n2" rel="footnote">2</a></sup>.</p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:n1">
<p>Je ne retiens ici que ce qui existe dans la syntaxe Wiki Dotclear. <a href="https://open-time.net/post/2014/01/09/Markdown-vs-Wiki-Dotclear#fnref:n1" rev="footnote">↩</a></p>
</li>
<li id="fn:n2">
<p>Je n’ai pas mentionné le positionnement des images, possible facilement avec Dotclear, parce qu’à mon sens on sort de la <em>sémantique</em> du contenu et je ne pense pas que la syntaxe wiki (quelle qu’elle soit) ait à se préoccuper de présentation, bien que ce soit fichtrement pratique. <a href="https://open-time.net/post/2014/01/09/Markdown-vs-Wiki-Dotclear#fnref:n2" rev="footnote">↩</a></p>
</li>
</ol>
</div>
https://open-time.net/post/2014/01/09/Markdown-vs-Wiki-Dotclear#comment-formhttps://open-time.net/feed/atom/comments/10311Flattrurn:md5:e04fb2543f7906e58da8d39a84ce78ec2014-01-08T16:28:00+01:002014-01-08T16:45:44+01:00FranckInternetsupportweb <p>Comme une envie de tester ce moyen de faire des petits coups de pouce, alors j’ai mis quelques <em>roros</em> sur <a href="https://flattr.com/profile/franckpaul">mon compte Flattr</a> et je commencer à « flatter » ici et là.</p>
<p><a href="https://open-time.net/public/screenshots/2014/flattr-profile.jpg" title="Copie d'écran de mon profil Flattr"><img src="https://open-time.net/public/screenshots/2014/.flattr-profile_u.jpg" alt="Copie d'écran de mon profil Flattr" style="display:block; margin:0 auto;" title="Copie d'écran de mon profil Flattr, janv. 2014" /></a></p>
<p>Du coup j’ai ajouté le petit bouton qui va bien, normalement en bas de la <em>sidebar</em><sup>[<a href="https://open-time.net/post/2014/01/08/Flattr#pnote-10308-1" id="rev-pnote-10308-1">1</a>]</sup>.</p>
<p><img src="https://open-time.net/public/screenshots/2014/flattr-button.jpg" alt="Bouton Flattr" style="display:block; margin:0 auto;" title="Bouton Flattr, janv. 2014" /></p>
<p>C’est sûrement une question d’ego, quoique les sommes en jeu soient assez minuscules, comme le précise Stéphane Bortzmeyer dans <a href="http://www.bortzmeyer.org/flattr.html">un de ces récents billets</a>.</p>
<p>Pas certain de prolonger longtemps l’expérience, surtout que ça génère du trafic en plus vers <a href="https://flattr.com/">Flattr</a><sup>[<a href="https://open-time.net/post/2014/01/08/Flattr#pnote-10308-2" id="rev-pnote-10308-2">2</a>]</sup>, je verrai à l’usage…</p>
<div class="footnotes"><h4 class="footnotes-title">Notes</h4>
<p>[<a href="https://open-time.net/post/2014/01/08/Flattr#rev-pnote-10308-1" id="pnote-10308-1">1</a>] Je ne sais pas trop si le cache statique empêche quoi que ce soit, je verrai à l’usage.</p>
<p>[<a href="https://open-time.net/post/2014/01/08/Flattr#rev-pnote-10308-2" id="pnote-10308-2">2</a>] Je remplacerai éventuellement le bouton par une version statique qui ne provoque du trafic que s’il est cliqué.</p></div>
https://open-time.net/post/2014/01/08/Flattr#comment-formhttps://open-time.net/feed/atom/comments/10308Wiki Dotclear vs Markdownurn:md5:6532501694a0cf1e45f1cea84f010c1d2013-12-23T14:27:00+01:002018-02-09T17:41:28+01:00FranckAir du tempssyntaxewebwiki <p>Les deux syntaxes wiki, Dotclear et Markdown, sont disponibles pour écrire les billets (et les pages, commentaires, …). La <a href="https://open-time.net/post/2011/05/29/Memento-wiki-Dotclear">première syntaxe</a> est intégrée depuis quasiment le début de Dotclear 1, la seconde est utilisable en installant le <a href="https://open-time.net/post/2013/10/17/Plugin-formatting-markdown-12-pour-Dotclear">plugin idoine</a>.</p>
<p>Ça fait un moment déjà que j’envisage de basculer sur Markdown parce que certaines applications tierces proposent cette syntaxe et me permettrait ainsi de faire un simple copié-collé pour alimenter ce blog. Par contre, ce qui me retient encore est que je ne sais si toutes les possibilités offertes par la syntaxe Wiki Dotclear sont également proposées par Markdown.</p>
<p>Alors voilà une sorte de table de correspondance entre les deux<sup>[<a href="https://open-time.net/post/2013/12/23/Wiki-Dotclear-vs-Markdown#wiki-footnote-1" id="rev-wiki-footnote-1">1</a>]</sup>. J’indiquerai <strong>(DC)</strong> quand il s’agira de la syntaxe Wiki Dotclear et <strong>(MD)</strong> pour Markdown (<strong>MDE</strong> quand ce sera uniquement dans l’extension <a href="http://michelf.ca/projects/php-markdown/extra/" hreflang="en">Extra</a> de Michel Fortin implémentée dans le plugin). D’autre part, quand plusieurs syntaxes sont proposées par Markdown pour un balisage, j’indiquerai la syntaxe la plus proche de Dotclear.</p>
<h3>Marqueurs de début de ligne :</h3>
<h4>Titres :</h4>
<p>Les niveaux 1 et 2 sont historiquement réservés au titre du blog et au titre du billet.</p>
<ul>
<li>Niveau 3 = <code>!!!</code> + <em>Titre</em> (DC), <code>###</code> + <em>Titre</em> (MD)</li>
<li>Niveau 4 = <code>!!</code> + <em>Titre</em> (DC), <code>####</code> + <em>Titre</em> (MD)</li>
<li>Niveau 5 = <code>!</code> + <em>Titre</em> (DC), <code>#####</code> + <em>Titre</em> (MD)</li>
</ul>
<p>Vous noterez l’inversion du nombre de symboles utilisés (décroissant pour Dotclear, croissant pour Markdown).</p>
<h4>Listes :</h4>
<ul>
<li>Numérotées = <code># </code> + <em>élément de liste</em> (DC), <code>1. </code> + <em>élément de liste</em> (MD)</li>
<li>Non numérotées = <code>* </code> + élément de liste” (DC et MD)</li>
</ul>
<ul>
<li>2e niveau = <code>## </code>, <code>#* </code>, <code>*# </code> ou <code>** </code> + ”élément de liste’” (DC), <code><4 espaces ou une tabulation></code> + <code>1. </code> ou <code>* </code> (MD)</li>
</ul>
<h4>Divers :</h4>
<ul>
<li>Trait horizontal : <code>----</code> (DC et MD)</li>
</ul>
<ul>
<li>Texte pré-formatté = <code><espace></code> + <em>texte</em> (DC), <code><4 espaces ou une tabulation></code> + <em>texte</em> (MD)</li>
</ul>
<ul>
<li>Bloc de citation = <code>> </code> + <em>texte</em> (DC et MD)</li>
</ul>
<h4>Bloc HTML (sera interprété) :</h4>
<pre>
///html
code HTML
</pre>
<p>(DC)</p>
<pre><em>code HTML</em></pre>
<p>(MD)</p>
<h3>Marqueurs de fin de ligne :</h3>
<ul>
<li>Retour à la ligne = <code>%%%</code> (DC), <code><2 espaces ou plus></code> (MD)</li>
</ul>
<ul>
<li>Une ligne vide termine un bloc (paragraphe, liste, …), dans les deux syntaxes (DC et MD)</li>
</ul>
<h3>Marqueurs indépendants de la position :</h3>
<ul>
<li>Emphase = <code>''</code> + <em>texte</em> + <code>''</code> (DC), <code>*</code> + <em>texte</em> + <code>*</code> (MD)</li>
<li>Forte emphase = <code>__</code> + <em>texte</em> + <code>__</code> (DC et MD)</li>
</ul>
<ul>
<li>Insertion = <code>++</code> + <em>texte</em> + <code>++</code> (DC), <strong>pas d’équivalence</strong> (MD)</li>
<li>Suppression = <code>--</code> + <em>texte</em> + <code>--</code> (DC), <strong>pas d’équivalence</strong> (MD)</li>
</ul>
<p>Pour l’insertion et la suppression, Markdown impose l’usage des balises HTML <code><ins></code> et <code><del></code>.</p>
<ul>
<li>Lien =
<ul>
<li><code>[</code> + <em>url</em> + <code>]</code> (DC), <code><</code> + <em>url</em> + <code>></code> (MD)</li>
<li><code>[</code> + <em>nom</em> + <code>|</code> + <em>url</em> + <code>]</code> (DC), <code>[</code> + <em>nom</em> + <code>](</code> + <em>url</em> + <code>)</code> (MD)</li>
<li><code>[</code> + <em>nom</em> + <code>|</code> + <em>url</em> + <code>|</code> + <em>langue</em> + <code>]</code> (DC), <strong>pas d’équivalence</strong> (MD)</li>
<li><code>[</code> + <em>nom</em> + <code>|</code> + <em>url</em> + <code>|</code> + <em>langue</em> + <code>|</code> + <em>titre</em> + <code>]</code> (DC), <strong>pas d’équivalence</strong> (MD)</li>
</ul></li>
</ul>
<p>La mention de la langue n’est pas possible avec Markdown sans passer par les balises HTML <code><a…/></code>. Par contre l’ajout d’un titre est possible : <code>[</code> + <em>nom</em> + <code>](</code> + <em>url</em> + <code>"</code> + <em>titre</em> + <code>")</code> <del>et n’a pas d’équivalence dans Dotclear sans ajouter également la langue</del> <ins>; dans Dotclear il suffit de ne pas préciser la langue entre les deux <code>|</code></ins> (<em>correction effectuée ce jour à 18h</em>).</p>
<ul>
<li>Image =
<ul>
<li><code>((</code> + <em>url</em> + <code>|</code> + <em>texte alternatif</em> + <code>))</code> (DC), <code>![</code> + <em>texte alternatif</em> + <code>](</code> + <em>url</em> + <code>)</code> (MD)</li>
<li><code>((</code> + <em>url</em> + <code>|</code> + <em>texte alternatif</em> + <code>|</code> + <em>position (L/G,C,R/D)</em> + <code>))</code> (DC), <strong>pas d’équivalence</strong> (MD)</li>
<li><code>((</code> + <em>url</em> + <code>|</code> + <em>texte alternatif</em> + <code>|</code> + <em>position</em> + <code>|</code> + <em>titre</em> + <code>))</code> (DC), <strong>pas d’équivalence</strong> (MD)</li>
</ul></li>
</ul>
<p>La mention de la position n’est pas possible avec Markdown sans passer par les balises HTML/CSS <code><img … /></code>. Par contre l’ajout d’un titre est possible : <code>![</code> + <em>nom</em> + <code>](</code> + <em>url</em> + <code>"</code> + <em>titre</em> + <code>")</code> <del>et n’a pas d’équivalence dans Dotclear sans ajouter également la position</del> <ins>; dans Dotclear il suffit de ne pas préciser la position entre les deux <code>|</code></ins> (<em>correction effectuée ce jour à 18h</em>).</p>
<ul>
<li>Ancre = <code>~</code> + <em>ancre</em> + <code>~</code> (DC), <strong>pas d’équivalence</strong> (MD)</li>
</ul>
<p>Markdown impose l’usage de la balise <code><a name="ancre"></a></code> pour l’insertion d’une ancre au sein du contenu.</p>
<ul>
<li>Acronyme = <code>??</code> + <em>acronyme</em> + <code>|</code> + <em>titre</em> + <code>??</code> (DC), <code>*[</code> + <em>acronyme</em> + <code>]: </code> + <em>titre</em> (en fin de contenu, toutes les occurrences de l’acronyme seront remplacées dans le texte, MDE).</li>
</ul>
<ul>
<li>Citation =
<ul>
<li><code>{{</code> + <em>citation</em> + <code>}}</code> (DC), <strong>pas d’équivalence</strong> (MD)</li>
<li><code>{{</code> + <em>citation</em> + <code>|</code> + <em>langue</em> + <code>}}</code> (DC) <strong>pas d’équivalence</strong> (MD)</li>
<li><code>{{</code> + <em>citation</em> + <code>|</code> + <em>langue</em> + <code>|</code> + <em>url</em> + <code>}}</code> (DC) <strong>pas d’équivalence</strong> (MD)</li>
</ul></li>
</ul>
<p>Markdown impose l’usage de la balise <code><q></code> pour l’insertion de citation en ligne.</p>
<ul>
<li>Code = <code>@@</code> + <em>code</em> + <code>@@</code> (DC), <code>`</code> + <em>code</em> + <code>`</code> (MD)</li>
</ul>
<ul>
<li>Note = <code>$$</code> + <em>corps de la note</em> + <code>$$</code> (DC), <code>[^</code> + <em>refnote</em> + <code>]</code> dans le texte et <code>[^</code> + <em>refnote</em> + <code>]: </code> + <em>corps de la note</em> (en fin de contenu, MDE)</li>
</ul>
<ul>
<li>Littéral = <code>\</code> + <em>caractère</em> (DC et MD)</li>
</ul>
<ul>
<li>Code HTML (sera interprété) = <code>``</code> + <em>code HTML</em> + <code>``</code> (DC), <em>code HTML</em> (MD)</li>
</ul>
<h3>Conclusion</h3>
<p>De mon point de vue et sans tenir compte des possibilités supplémentaires de Markdown par rapport à la syntaxe Wiki Dotclear (tables, listes de définition, gestion des éléments indentés, listes dont les éléments peuvent contenir plusieurs paragraphes, …) le manque le plus flagrant est l’absence de prise en compte de la langue pour les liens, qui peut assez souvent être différente de la langue du contenu (je rédige en français et moult ressources liées sont en anglais), ce qui m’obligerait à basculer sur la représentation HTML de la balise.</p>
<p>Idem pour les citations en ligne, que j’utilise assez régulièrement, qui sont complètement absentes et imposent l’usage de la balise HTML correspondante.</p>
<p>Après avoir fait cette comparaison (certes incomplète du point de vue de Markdown et de son extension Extra) il apparaît que le choix de la syntaxe pourrait essentiellement dépendre du type de contenu à éditer. Markdown m’apparaît plus <em>geek</em> à l’usage que le Wiki Dotclear, mais c’est peut-être qu’après plusieurs milliers de billets écrits avec cette dernière syntaxe, j’en connais parfaitement les possibilités et les limites.</p>
<p>Il serait par exemple intéressant que je refasse ce billet en utilisant la syntaxe Markdown plutôt que le Wiki Dotclear, et que je vois si je peux “mieux” présenter cette comparaison qu’actuellement.</p>
<div class="footnotes"><h4>Note</h4>
<p>[<a href="https://open-time.net/post/2013/12/23/Wiki-Dotclear-vs-Markdown#rev-wiki-footnote-1" id="wiki-footnote-1">1</a>] Je ne retiens ici que ce qui existe dans la syntaxe Wiki Dotclear.</p></div>
https://open-time.net/post/2013/12/23/Wiki-Dotclear-vs-Markdown#comment-formhttps://open-time.net/feed/atom/comments/10232Les gros mots du Weburn:md5:ec6063b5bd51b43c03180dd4386e1b172011-10-21T15:31:00+02:002011-10-28T14:16:55+02:00FranckInternetinternetlexiqueweb <p>Depuis quelque temps je suis des conversations, des conférences, je lis des papiers (ou des billets ou des articles, appelez ça comme vous voulez) dans lesquels il est fait mention d’un certain nombre de <em>gros-mots</em>, en tout cas pour moi qui ai un mal de chien à définir réellement ce qu’ils désignent. D’ailleurs j’ai dans l’idée que certains ne savent pas trop non plus ce qu’ils recouvrent.</p>
<p>Commençons par le premier, <em><strong>dev-front</strong></em>. J’imagine qu’il doit s’agir d’un développeur (pour <em>dev</em>) et qu’il s’occupe de la partie visible d’un site web (le <em>front</em>). Soit, il doit donc maitriser HTML, CSS, probablement pas mal de Javascript pour dynamiser un peu l’ensemble et puis c’est à peu près tout. J’ai entendu aussi qu’il pouvait être amené à s’occuper de performance ce que j’ai aussitôt traduit par optimiser la bande passante en réduisant le poids des fichiers chargés (images compressées, CSS minifiées, …). Mais dites-moi, qu’est-ce qu’un <strong>intégrateur</strong> fait de différent à part qu’il est capable de récupérer un découpage fourni par un <em>designer</em> pour en faire du HTML/CSS/Js ? Spa un peu pareil ?</p>
<p>Ensuite un second, <em><strong>back-end</strong></em>. Celui-là j’avoue avoir un peu de mal. S’agit-il de cette partie cachée que j’imagine être la partie d’administration d’un CMS, par exemple. Mais alors quelle différence avec le <em><strong>back-office</strong></em> ? <em>Back-office</em> me parle un peu plus lorsque je le traduis car il fait référence à une action à l’arrière (côté non visible pour le public) de la part de l’utilisateur. J’imagine que le formulaire dans lequel je suis en train de rédiger ce billet fait partie du <em>back-office</em> de mon installation Dotclear que j’utilise. Spa un peu pareil alors ?</p>
<p>Qui peut m’expliquer les subtiles ou complètes différences entre ces termes ?</p>https://open-time.net/post/2011/10/21/Les-gros-mots-du-Web#comment-formhttps://open-time.net/feed/atom/comments/7309Paris-Web 2011, j'en ai oublié !urn:md5:a4e9c96cbb4252141585da890dc1b1392011-10-20T15:12:00+02:002011-10-28T14:16:33+02:00FranckAir du tempsinternetrencontreweb <p>À peine avais-je publié le <a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-les-ateliers">dernier compte-rendu d’hier</a> que je me rendais compte que j’en avais oublié. Par exemple, le <em>halva-war</em> que j’ai brièvement évoqué et dont je n’ai quasiment pas reparlé, alors que ça :</p>
<p><a href="https://open-time.net/public/illustrations/2011/paris-web/halva_koska.jpg" title="halva_koska.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.halva_koska_m.jpg" alt="halva_koska.jpg" style="display:block; margin:0 auto;" title="halva_koska.jpg, , , oct. 2011" /></a></p>
<p>Eh oui, David Rault avait vu les choses en grand et il m’a avoué avoir parcouru quelques rues d’Istanbul où il réside habituellement afin de rapporter de quoi me scotcher. Mission réussie ! D’ailleurs, David, tu remarqueras qu’il n’y a pas de Halva au chocolat sur la photo, <em>because</em> y’en a plus, que le halva nature est en voie d’extinction avancée, je peine à empêcher les autres de me le piquer et j’en suis réduit à planquer le Floss halva pour pouvoir m’en délecter régulièrement. Fairplay, David m’a tout de même glissé que le petit échantillon que je lui avais apporté était pas mal du tout ! Si vous voulez, je vous dirai (peut-être) quel est mon revendeur et j’en rapporterai encore l’année prochaine (j’ai repéré un ou deux amateurs dans le public) ;-)</p>
<p>Sinon j’ai pu constater avec plaisir que citer Dotclear aidait à se faire identifier et du coup j’éprouve un peu de fierté d’en faire partie.</p>
<p>Suite à une demande d’Éric Daspet qui souhaitais (qui souhaite toujours d’ailleurs) qu’on se filme ou photographie en train de signer quelque chose en rapport avec le dernier Paris-Web, j’ai eu l’idée d’embaucher des désignés volontaires parmi les auditeurs de l’année prochaine pour les filmer en train de signer un mot ou une expression. Le résultat serait bien évidemment reversé en licence libre idoine pour être utilisée partout où ce serait possible. J’ai déjà des candidats acteurs/signeurs \o/</p>
<p>Élie Sloïm et Kozlika se sont mis en tête de créer une liste des bonnes pratiques pour la gestion d’événement comme Paris-Web. Un document partagé a été construit par quelques dizaines de personnes et dimanche soir on avait quelque chose de très abouti bien que les discussions continuent encore sur tel ou tel point. C’est surprenant de voir à quelle vitesse peut se constituer une équipe pour produire un résultat visible en peu de temps !</p>
<p><img src="http://farm7.static.flickr.com/6225/6250742143_c5800dfc77.jpg" alt="C'est fini fini !" style="display:block; margin:0 auto;" /></p>
<p>Voilà, cette fois je crois avoir fait le tour de ce qui m’a marqué, étonné, interloqué, surpris, enchanté… sauf que ma mémoire de poisson rouge aidant il n’est pas impossible que je revienne compléter ici ce vrac d’à côté ;-)</p>
<p>Et paf, ça n’a pas loupé, j’avais oublié que j’étais fier comme un pou de cet effet Paris-Web là :</p>
<p><a href="https://open-time.net/public/illustrations/2011/paris-web/flickr.jpg" title="Statistiques Flickr le mardi matin 18 octobre 2011"><img src="https://open-time.net/public/illustrations/2011/paris-web/.flickr_m.jpg" alt="Statistiques Flickr le mardi matin 18 octobre 2011" style="display:block; margin:0 auto;" title="Statistiques Flickr le mardi matin 18 octobre 2011, , , oct. 2011" /></a></p>
<p>Merci à tous !</p>
<hr />
<p><img src="https://open-time.net/public/illustrations/2011/banniere-paris-web-300x250-jy.png" alt="Paris-Web 2011, j’y étais ! (du 13 au 15 octobre)." style="display:block; margin:0 auto;" title="Paris-Web 2011, j’y étais ! (du 13 au 15 octobre)., oct. 2011" /></p>
<p>Pour finir et pour pouvoir les retrouver facilement, je mets ci-dessous la liste de tous mes autres billets concernant l’édition 2011 de Paris-Web :</p>
<ul>
<li><a href="https://open-time.net/post/2011/10/17/Paris-Web-2011">Paris-Web 2011</a></li>
<li><a href="https://open-time.net/post/2011/10/16/Paris-Web-2011-les-photos">Les photos</a></li>
<li><a href="https://open-time.net/post/2011/10/18/Paris-Web-2011-l-effet-Karl-Dubost">L’effet Karl Dubost</a></li>
<li><a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-premier-jour">Première journée des conférences</a></li>
<li><a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-deuxieme-jour">Seconde journée des conférences</a></li>
<li><a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-les-ateliers">Les ateliers</a></li>
</ul>https://open-time.net/post/2011/10/20/Paris-Web-2011-j-en-ai-oublie-#comment-formhttps://open-time.net/feed/atom/comments/7306Paris-Web 2011, les ateliersurn:md5:edd976781d9ee5100273b7134282b23f2011-10-19T22:10:00+02:002011-10-28T14:16:14+02:00FranckAir du tempsinternetpratiquerencontreweb <p>Pour cette troisième et dernière journée (les deux précédentes avaient déjà été <a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-deuxieme-jour">formidables</a>) j’avais remis le magnifique tee-shirt offert par mon registrar préféré, Gandi : Il m’allait à merveille, surtout que j’avais pris soin cette fois-ci d’arborer en plus mon magnifique bonnet marin qui me sert de couvre-chef quand il fait froid en haut du crâne. Certains d’ailleurs ont reconnu le bonnet dès qu’il m’ont aperçu et sont venus aussitôt me saluer. Voilà pour une fois positionné dans le rôle de quelqu’un de connu par des dont j’avais oublié le nom ! Bref, j’étais un peu stupéfait.</p>
<p><a href="https://open-time.net/public/illustrations/2011/paris-web/gandi-no-bullshit.jpg" title="gandi-no-bullshit.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.gandi-no-bullshit_m.jpg" alt="gandi-no-bullshit.jpg" style="display:block; margin:0 auto;" title="gandi-no-bullshit.jpg, , , oct. 2011" /></a></p>
<p>Je suis allé à ces ateliers l’année dernière déjà et c’est toujours avec une petite pointe de regret que je mets les pieds dans une grande école. Syndrome de l’imposteur aidant, je peine toujours à m’imaginer m’assoir sur les bancs d’une école de ce niveau moi qui ai laissé les études juste après mon Bac. Bref j’étais intimidé, un peu moins que l’année dernière, mais j’étais intimidé, si si intimidé j’vous dis ! Un petit déjeuner nous attendait sur place, fort appétissant si j’en juge par la mine réjouie de certains !</p>
<p><img src="http://farm7.static.flickr.com/6232/6250766167_fda042eece.jpg" alt="Buffet du petit déjeuner" style="display:block; margin:0 auto;" /></p>
<p>J’avais fait mon programme la veille au soir et l’avait relu le matin même avant de partir prendre le bus. À peine un quart d’heure plus tard j’étais sur place, j’habite en fait à quelques arrêts de bus de Télécom ParisTech où étaient organisés les ateliers de ce jour. Plein de jeunes étaient présents et quelques têtes connues et reconnues de la veille. Beaucoup plus de jeune que les deux jours précédents d’ailleurs et je crois savoir que c’est d’abord pour eux que sont organisés ces séances.</p>
<p>À ce sujet j’ai d’ailleurs quelques scrupules à <em>prendre</em> la place d’un étudiant et il faudrait peut-être que j’interroge les organisateurs pour savoir s’ils ont refusé beaucoup de monde cette année. Il n’est peut-être pas nécessaire que j’assiste aux trois journées et ma place pourrait être prise par un étudiant ou jeune dans le métier ? Bref, je n’ai pas de réponse pour l’instant et il est temps de ressortir mon appareil photo pour capter les différents moments de ce samedi studieux.</p>
<h3>Travaillons avec le Web — Karl Dubost</h3>
<p><img src="http://farm7.static.flickr.com/6049/6251311866_fb5d13b8bc.jpg" alt="karl Dubost" style="display:block; margin:0 auto;" /></p>
<p>J’avais chois l’atelier de Karl pour commencer, m’imaginant apprendre des choses nouvelles sur Git ou Mercurial, parce qu’il en avait parlé plusieurs fois sur twitter les jours précédant l’événement. Erreur de ma part car il s’agissait en fait de nous montrer et de nous expliquer comment, au W3C et ailleurs, ils travaillaient en commun, surtout au cours des réunions qu’ils faisaient régulièrement.</p>
<p>Autant les lieux sont assez neutres, autant l’amphi où nous étions réunis avait une atmosphère très particulière, au moins pour moi qui n’ai fréquenté ces lieux que pendant une heure ou deux l’année précédente. J’imaginais assez bien le vacarme des étudiants s’installant, discutant, ceux arrivant en retard, ceux qui continuait à consulter leurs messages sur leurs téléphones portables tandis que les plus studieux avaient déjà sorti cahiers et crayons et étaient prêts à prendre des notes.</p>
<div class="mosaique">
<p><img src="http://farm7.static.flickr.com/6236/6250786151_f18ac628b2.jpg" alt="François le scribe" />
<img src="http://farm7.static.flickr.com/6096/6251318936_1740603fd9.jpg" alt="Clochix" /></p>
</div>
<p>J’ai compris pendant cette heure d’atelier à quoi servait un scribe, qui malgré l’utilisation du clavier un peu particulier du mac de Karl (clavier Qwerty et japonais), a réussi à tenir sur la durée pour saisir les notes, comment devait se comporter le <em>chairman</em> de la réunion, même si par moment il pouvait prendre la place d’un simple participant, comment des outils simples et qui seront probablement disponibles rapidement pouvaient permettre de ressortir automagiquement les actions à entreprendre, les sujets sur lesquels il faudrait revenir, etc etc.</p>
<p>C’était très intéressant et nous avons passé trop rapidement cet atelier riche d’enseignement pour quelques projets à venir.</p>
<p>Ensuite j’ai pris la direction des hauts étages où nous avions rendez avec les CSS.</p>
<h3>Ces indices dans les CSS qui indiquent que votre projet web est mal parti — Olivier Gendrin</h3>
<p><img src="http://farm7.static.flickr.com/6094/6251325564_de9cef7e54.jpg" alt="Olivier Gendrin" style="display:block; margin:0 auto;" /></p>
<p>Olivier Gendrin est fan de Spip, comme c’est écrit sur son tee-shirt, que voulez-vous personne n’est parfait car chacun sait que Dotclear est le meilleur outil français développé depuis 2003 par Olivier Meunier. Peut-être d’ailleurs que le fait de s’appeler Olivier aide à être un meilleur geek. Dans une prochaine vie, peut-être que je m’appellerai Olivier, qui sait ? Bref, nous avions rendez-vous pour parler de feuille CSS et surtout de ces petits indices qui laissent penser que c’est tout moisi dans le projet.</p>
<p>Olivier, celui de Spip, avait préparé de jolis post-it de couleur et j’ai tout de suite pensé qu’on allait faire une post-it war. Que nenni, il a fallu qu’on bosse pendant qu’il faisait semblant de faire le surveillant très très méchant ! Ne me croyez pas, je crois bien que ce garçon est une crème, mais passons. Nous avons bossé comme des malades, d’autres aussi mais un peu moins, d’autres encore avaient carrément apporté une anti-sèche, ce qui fait qu’à la fin, comme à l’école des fans, on avait tous gagné \o/</p>
<div class="mosaique">
<p><img src="http://farm7.static.flickr.com/6172/6250802053_3783a1454f.jpg" alt="" />
<img src="http://farm7.static.flickr.com/6235/6250803103_3c850a18ec.jpg" alt="" /></p>
</div>
<p>J’ai beaucoup aimé la lumière présente dans cette salle haut perchée de l’école et je n’ai éprouvé aucune difficulté particulière à prendre les photos que je souhaitais. En ce qui concerne l’atelier j’ai juste regretté, le temps passant trop vite encore une fois, qu’on ait pas eu le temps de faire une synthèse des bons et des mauvais indices qu’on peut facilement trouver dans une CSS.</p>
<p>Nous sommes cependant arrivés en retard pour le déjeuner ou un buffet plutôt somptueux mais vide car tous les autres avait déjà tout baffré — mais non j’déconne il en restait deux… petits pains — et nous avons fait grouiller nos ventres respectifs pour inspirer de la pitié. Alors nous avons pu nous approcher des tables lourdement garnies pour baffrer aussi un tout petit peu ; des fois je me demande si j’en fais pas un peu trop, non ?</p>
<p>Après la pause post-prandiale, nous avions été discrètement boire un excellent café dans un café justement placé pas loin étonnamment. Une fois caféinés correctement nous voilà de retour pour le premier atelier de l’après-midi, de nouveau dans le grand amphi.</p>
<h3>Améliorer le confort d’utilisation des sites web — Stéphane Deschamps</h3>
<p><img src="http://farm7.static.flickr.com/6222/6250830061_febb1d429e.jpg" alt="Stéphane Deschamps" style="display:block; margin:0 auto;" /></p>
<p>Ce garçon est une crème. Des plus gentils je ne dois pas en connaître beaucoup, et pour l’avoir vu évoluer dans quelques endroits différents, j’ai pu le constater à chaque fois. Stéphane a un autre don. Il est capable d’alterner pendant une heure entre une phrase sérieuse et un calembour ou une blague et le temps passé de cette façon ne ressemble à aucun autre. En même temps il dit des choses sérieuses, et que, petit à petit, même dans un grand groupe plein d’inertie, il est possible de faire évoluer les pratiques et les mentalités. Chapeau bas car c’est probablement un sacerdoce !</p>
<p>Eh bien tous étaient attentifs, vraiment et j’ai pu immortaliser la concentration de ceux qui écoutaient Stéphane pendant son atelier. D’ailleurs, tout au long de ces journées, je n’étais pas le seul à déclencher ;-)</p>
<div class="mosaique">
<p><img src="http://farm7.static.flickr.com/6153/6250827523_fb89d74c2a.jpg" alt="" />
<img src="http://farm7.static.flickr.com/6040/6250824497_527a5c6976.jpg" alt="" /></p>
</div>
<p>L’atelier suivant, organisé et improvisé à la volée par Stéphane Deschamps et Denis Boudreau nous a de nouveau conduit dans une grande salle de classe.</p>
<h3>Auditer rapidement l’accessibilité d’un site web — Stéphane Deschamps et Denis Boudreau</h3>
<p><img src="http://farm7.static.flickr.com/6034/6251361188_afbf9f87a6.jpg" alt="Les ordis des deux compères" style="display:block; margin:0 auto;" /></p>
<p>Les deux compères nous ont montrés en temps réel comment ils utilisaient les outils disponibles dans un navigateur (de manière native ou via des extensions assez classiques) pour vérifier l’accessibilité d’une page web.</p>
<p>C’était captivant de les voir faire en quelques clics un état des lieux assez rapide d’une ou plusieurs page d’un site web. La pertinence des attributs <code>alt</code> sur les images, la structure hiérarchique des titres, <code>h1</code> à <code>h6</code>, etc etc. Deux ou trois sites ont été brièvement abordés pendant cet atelier impromptu. J’étais ravi de les voir faire, ayant un temps passé, passé beaucoup de temps justement à <em>auditer</em> — mais façon Opquast — un site web, et retrouvant ainsi quelques manipulations que j’avais pu effectuer à l’époque à l’aide d’une check-list bien ordonnée alors qu’ils le faisaient en direct, sans notes, sans parachutes mais avec quelques calembours tout de même.</p>
<p>Quelques questions-réponses plus tard nous voilà de retour dans le hall de l’école où certains avaient entamé une partie de go :</p>
<p><img src="http://farm7.static.flickr.com/6175/6250838899_132df9ab9b.jpg" alt="" style="display:block; margin:0 auto;" /></p>
<p>J’ai juste pris le temps de faire une photo et je suis parti aussitôt pour la présentation de Delphine Malassingne qui allait nous parler d’un métier particulier.</p>
<h3>Comment argumenter en faveur d’un poste de responsable qualité web — Delphine Malassingne</h3>
<p><img src="http://farm7.static.flickr.com/6180/6251367940_446de77668.jpg" alt="Delphine Malassingne" style="display:block; margin:0 auto;" /></p>
<p>J’aime beaucoup la photo que j’ai faite d’elle cette fin d’après-midi là, où elle est visiblement à des années lumières le temps d’un instant fugace, avant de revenir continuer ses propos.</p>
<p>J’envie le métier qu’elle fait, même si les conditions dans lesquelles elle l’applique ne sont pas les meilleures, d’après ce que j’ai compris de ses explications. Il faut tout de même une sacré confiance de la part de sa hiérarchie pour faire travailler un responsable de qualité web dont le bénéfice n’est pas immédiat ni direct. Au bout de quelques minutes je me suis rappelé ce que quelqu’un m’avait dit un jour à propos de mon travail d’alors (et toujours le même d’ailleurs) : « vous êtes un facilitateur ». C’est très exactement ce qu’elle a prononcé quelque moments plus tard en disant qu’elle était, dans le domaine qui se rapportait au développement web, une facilitatrice.</p>
<p>Son apport est indéniable mais pour moi c’est à mille lieues des pratiques usuelles dans l’univers du travail dans lequel je gravite étant donné que le web n’est qu’une infime partie de mes fonctions et des projets sur lesquels je suis amené à travailler. L’idée même d’un responsable qualité web ne serait tout simplement pas justifiable au regard du temps théoriquement passé sur ce genre de tâche.</p>
<p><img src="http://farm7.static.flickr.com/6045/6251371404_500a1aae53.jpg" alt="Une autre photographe, Ève la fée" style="display:block; margin:0 auto;" /></p>
<p>Pour conclure ici ce petit résumé un peu décalé de ces trois journées merveilleuses, je voudrais prendre le temps de remercier tout ceux qui se sont gentiment donnés en pâture à mon objectif, souvent avec un sourire, toujours avec bienveillance et bien que je regrette de ne pas avoir la facilité avec laquelle Thanh ou Izo sont capables de diriger leurs modèles, j’apprécie énormément que vous me laissiez l’occasion de m’adonner à une de mes passions.</p>
<p>Si vous le voulez bien je continuerai à faire quelques photos l’année prochaine !</p>https://open-time.net/post/2011/10/19/Paris-Web-2011-les-ateliers#comment-formhttps://open-time.net/feed/atom/comments/7302Paris-Web 2011, deuxième joururn:md5:990f65e3fffa1369854d4af8b8b9d9b72011-10-19T19:02:00+02:002011-10-28T14:15:55+02:00FranckAir du tempsinternetrencontreweb <p>C’est après avoir bien dormi — nous avons zappé volontairement la soirée organisée <a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-premier-jour">la veille</a>, bien que l’envie d’aller faire des photos dans cet endroit joliment décoré a longtemps fait hésiter la balance, ça sera pour une autre fois — que nous revenons ce nouveau matin pour la seconde journée de conférence. Je n’ai pas encore vidé la carte mémoire ni rechargé la batterie de l’appareil, celui-ci n’ayant finalement pas tellement consommé d’énergie malgré les dizaines de photos faites et la consommation nécessaire pour déplacer les lentilles de l’objectif que j’ai depuis peu (il faut dire que ce caillou pèse plus lourd que le boitier sur lequel il est monté).</p>
<p><img src="http://farm7.static.flickr.com/6060/6250614597_5ecf231a99.jpg" alt="Le panneau de direction vers Paris-Web" style="display:block; margin:0 auto;" /></p>
<p>Visiblement nous ne sommes pas les seuls à faire le trajet en train jusqu’à Bécon-les-Bruyères où nous descendons. On suit les panneaux placés aux endroits stratégiques par le staff et nous arrivons comme par enchantement au même endroit que la veille ! C’est rudement bien fichu, hein ?</p>
<div class="mosaique">
<p><a href="https://open-time.net/public/illustrations/2011/paris-web/2011-10-14-matin-1.jpg" title="2011-10-14-matin-1.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.2011-10-14-matin-1_t.jpg" alt="2011-10-14-matin-1.jpg" title="2011-10-14-matin-1.jpg, , , oct. 2011" /></a>
<a href="https://open-time.net/public/illustrations/2011/paris-web/2011-10-14-matin-2.jpg" title="2011-10-14-matin-2.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.2011-10-14-matin-2_t.jpg" alt="2011-10-14-matin-2.jpg" title="2011-10-14-matin-2.jpg, , , oct. 2011" /></a>
<a href="https://open-time.net/public/illustrations/2011/paris-web/2011-10-14-apres-midi-1.jpg" title="2011-10-14-apres-midi-1.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.2011-10-14-apres-midi-1_t.jpg" alt="2011-10-14-apres-midi-1.jpg" title="2011-10-14-apres-midi-1.jpg, , , oct. 2011" /></a>
<a href="https://open-time.net/public/illustrations/2011/paris-web/2011-10-14-apres-midi-2.jpg" title="2011-10-14-apres-midi-2.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.2011-10-14-apres-midi-2_t.jpg" alt="2011-10-14-apres-midi-2.jpg" title="2011-10-14-apres-midi-2.jpg, , , oct. 2011" /></a></p>
</div>
<p>Une pastille bleue sur le badge et quelques bonjours bonjours plus tard, nous voilà à nouveau dans l’antre de l’événement. Ça discute fermement ici et là et je décide d’aller rapidement m’installer dans le petit amphithéâtre pour le début des hostilités. Mais cette fois-ci, j’opte pour le côté droit, histoire de changer un peu d’angle de vue.</p>
<h3>Industrialisation de l’intégration Web : la révolution de l’artisan devenu ouvrier — Thomas Parisot</h3>
<p><img src="http://farm7.static.flickr.com/6166/6251148630_e6dde817ab.jpg" alt="Thomas Parisot" style="display:block; margin:0 auto;" /></p>
<p>Thomas Parisot est stressé, mais ça ne se voit pas. Thomas respire à fond mais ça ne s’entend pas. Il enchaîne les <em>slides</em> tranquillement et la salle attentive écoute. Thomas jette un œil à son retour vidéo de temps en temps, le temps d’avaler un peu d’eau pour hydrater sa gorge sèche mais ça parait très naturel. Bref, c’est très pro et c’est bien enlevé ! Ça parle de bonnes pratiques et il y aura beaucoup de questions et de réponses que je suis des deux oreilles pendant que mes yeux sont à l’affut de mes proies.</p>
<div class="mosaique">
<p><img src="http://farm7.static.flickr.com/6178/6251145002_0aa5dfee1d.jpg" alt="" />
<img src="http://farm7.static.flickr.com/6213/6251155518_d4b9c58949.jpg" alt="" /></p>
</div>
<p>Je commence à trouver mes marques et mes repères, je commence à connaître les presque bons réglages sur mon appareil bien que je sois parfois surpris par une ambiance lumineuse différente. Il n’y a pas de doute, photographier est tout un métier et j’apprends petit à petit à maîtriser mon boîtier. D’ailleurs je n’ai pas oublié le « ouvre à 2.0, à 2.8, tu seras sûr de ne rien rater avec ce caillou » que m’a glissé Thanh quand je lui ai montré ma configuration, lui qui connait cet objectif depuis déjà pas mal de temps.</p>
<p>Une fois cette conférence terminée je retourne aussitôt dans la grande salle pour y retrouver un des premiers rangs. Je vais alors assister à une conférence un peu particulière.</p>
<h3>Ga, Bu, Zo, Meu, ou pourquoi faire simple quand on peut faire compliqué ? — Patrick Chanezon</h3>
<p><img src="http://farm7.static.flickr.com/6228/6251161776_813e3cef02.jpg" alt="Patrick Chanezon" style="display:block; margin:0 auto;" /></p>
<p>Conférence particulière parce qu’il n’y aura qu’un <em>slide</em> affiché tout le long de la présentation. En fait, non, il y en a eu un premier avant le <em>permanent</em>, premier où était affiché la page d’accueil du site Apple, page où est affichée en grand une photo de Steve Jobs. Je n’ai pas très bien compris les raisons de cette absence de contenu visible, Patrick Chanezon se contentant de parler tout au long du temps qui lui était alloué, ni pourquoi son comparse n’était pas présent avec lui — ils devaient être en binôme pour cette conférence. Bref, ça a parlé de <em>cloud</em>, d’open-source, de cloud open-source et de toutes les merveilleuses choses qu’on peut faire avec… quand ça ne tombe pas en panne.</p>
<p>C’était l’heure de la pause du matin. Café et puis direction dehors pour profiter du soleil et d’un endroit que j’avais un peu exploré le matin en arrivant afin de faire quelques photos dans un environnement un peu moins <em>corporate</em>. C’était sans compter sur la vigilance d’un soldat armé jusqu’au dents d’un walkman que finalement j’ai laissé tombé et que je suis remonté sur le parvis pour faire des … photos :-)</p>
<p>Le temps venu je suis retourné dans le petit amphithéâtre aussitôt pour retrouver une salle comble. Visiblement la conférence à venir de Jérémie Patonnier avait suscité plus d’engouement que prévu.</p>
<h3>La typo, mon navigateur et moi — Jérémie Patonnier</h3>
<p><img src="http://farm7.static.flickr.com/6115/6251194078_7397c3cb19.jpg" alt="Jérémie Patonnier" style="display:block; margin:0 auto;" /></p>
<p>En droite ligne des conférences de 2010 de David Rault et d’Anne-Sophie Fradier sur les polices de caractères et sur celle d’Anthony Ricaud la veille sur le fonctionnement des navigateurs, nous voilà parti dans le fonctionnement de la typographie dans les navigateurs. Excellente explication de la façon qu’ont les navigateurs et les systèmes d’exploitation (on aura vu que c’est assez lié) de traiter nos plus belles polices de caractères.</p>
<p>Jérémie très inspiré et maitrisant visiblement son sujet, je crois même qu’il en a gardé sous le coude pour ne pas trop nous submerger, nous a conduit ainsi de version en version de navigateur jusqu’aux plus modernes moyens d’afficher des fontes — c’est pareil nous a-t-il dit, police et fonte. Certains, assis comme moi à même le sol, la salle était plus que comble, prenait frénétiquement des notes ou … twittait peut-être, essentiellement sur des Mac, comme j’ai pu le constater plus tard.</p>
<div class="mosaique">
<p><img src="http://farm7.static.flickr.com/6102/6250667957_fdb07a4f77.jpg" alt="" />
<img src="http://farm7.static.flickr.com/6047/6251205014_720748050a.jpg" alt="" /></p>
</div>
<p>La conférence s’est étendue un peu plus que prévue avec pas mal de questions, à la faveur d’une annulation de mini-conférence à suivre. Tant mieux (ou tant pis pour la conf. annulée) c’était très intéressant !</p>
<p>J’ai enchainé juste après le toujours aussi succulent buffet dans le grand amphi pour suivre une conférence sur javascript. J’ai commencé à toucher à javascript à l’époque où, pour un site professionnel, on m’avait demandé que l’affichage ne puisse se faire que dans une fenêtre complète de navigateur (il n’y avait pas encore d’onglet). J’ai donc étudié, expérimenté, pas fait de version objet de mes javascripts insérés dans mes headers de page HTML. C’était assez facile bien que son support soit assez inégal en fonction du navigateur utilisé.</p>
<h3>Javascript as a Programming Language — Marco Cedaro</h3>
<p><img src="http://farm7.static.flickr.com/6173/6250695617_0181ab91c8.jpg" alt="Marco Cedaro" style="display:block; margin:0 auto;" /></p>
<p>Un italien sur scène parlant un meilleur anglais que je ne saurais jamais faire et qui nous explique sa passion pour javascript — ce qui’il nous avouera en introduction. Fichtre, qu’est-ce qu’il bouge ! Pas facile de prendre une photo de lui et je suis obligé d’ouvrir quasiment à fond pour avoir suffisamment de vitesse de déclenchement.</p>
<p>Il terminera sa présentation par une désignation du gagnant du livre mis en jeu en tirant sur le public à boulet <del>rouge</del> jaune. Ces gens là sont de grands enfants parfois, toujours.</p>
<p>Cette conférence m’intéressait à plus d’un titre. D’une part parce que je commence à lorgner sérieusement à nouveau sur ce langage, devenu assez mature depuis les années où j’en avais pondu quelques lignes et parce l’idée qui avait un peu germé la veille nécessitait que je m’y colle sérieusement. Reste à trouver la volonté et surtout le temps de me plonger la dedans.</p>
<p>J’ai enchaîné sans bouger de place avec la conférence de Denis Boudreau, un grand habitué de la scène et qui, avec son accent de la lointaine province — que j’adore — nous a fait tous rire.</p>
<h3>SEO, mobilité et accessibilité : la sainte trinité d’un développement Web inclusif — Denis Boudreau</h3>
<p><img src="http://farm7.static.flickr.com/6042/6250700349_199df23aed.jpg" alt="Denis Boudreau" style="display:block; margin:0 auto;" /></p>
<p>Le dada de Denis c’est l’accessibilité et pour pouvoir en parler, nous a-t-il dit, il l’avait cette fois saupoudrée d’un peu de mobilité et de SEO. Quand j’entends SEO j’ai tendance à détourner le neurone. Je sais pas, c’est automagique. Par contre Denis à su captiver l’attention de tous en parlant beaucoup d’accessibilité et en nous expliquant que c’était bon pour tout le reste et vice et versa ! C’est magique, c’est comme la sainte trinité, ou quelque chose comme ça :-)</p>
<p>J’ai remarqué, en développant la photographie que j’ai faite de lui (affichée plus haut), qu’il avait des griffes blanches. Est-ce un avatar de Wolverine ? En tout cas, je trouve ça bizarre, pas vous ? En attendant il nous a montré sur un de ses <em>slides</em> une figure qui m’a aussitôt fait penser au symbole qui indique la présence de rayonnements ionisants. D’ailleurs il avait l’intention de nous en parler mais le temps passant il a oublié ou il n’était plus le moment. Peut-être répondra-t-il ici, qui sais ?</p>
<p>C’est à ce moment que j’ai fait la photo que je préfère parmi toutes celles que j’ai publiées :</p>
<p><img src="http://farm7.static.flickr.com/6059/6250703861_2084f808d1.jpg" alt="" style="display:block; margin:0 auto;" /></p>
<p>Je ne sais pas qui est cette dame sauf qu’elle avait un avion à prendre en fin d’après-midi à Roissy et était désolée de ne pouvoir assister à la table ronde qui allait clore cette journée. Ami lecteur, si tu sais, réponds-moi !</p>
<p>Place à la dernière conférence de la journée, de ce Paris-Web d’ailleurs, celle de Rudy Rigot qu’on avait déjà pu voir à l’œuvre pendant les lightning-talks de la veille ! J’avais adoré son bonhomme en hamac ;-)</p>
<h3>Maîtrisez l’imprévu et le facteur humain dans votre conduite de qualité : la charte CATEEA — Rudy Rigot</h3>
<p><img src="http://farm7.static.flickr.com/6212/6251244424_81422bb9d4.jpg" alt="Rudy Rigot" style="display:block; margin:0 auto;" /></p>
<p>Rudy Rigot a introduit l’idée d’une charte ce qui est une bonne chose, à condition que chacun s’engage, au moins dans la volonté, à la respecter. J’avoue être resté très circonspect en l’écoutant et ça me paraît toujours assez éloigné des réalités du terrain, en tout cas des miennes. Mais passons, là n’est pas le sujet de ce minuscule compte-rendu — je n’arrête pas de sabrer pour vous éviter une trop longue lecture, mais il y en a des choses à dire !</p>
<p>Pour tout dire je commençais à être vraiment fatigué, fatigué de l’attention portée tout au long des conférences car je ne voulais rien louper. Bien sûr j’en ai loupé la moitié, celle de l’autre amphi, bien sûr j’ai eu quelques coups de mou mais dans l’ensemble j’ai apprécié chacune des interventions, émerveillé de voir l’assurance, même si elle n’était que de circonstance ou feinte, de chacun des orateurs. Il m’arrivait d’observer pendant de longs moments la traduction en LSF, hypnotisé par le mouvement cadencé des mains et des bras et les expressions des visages. Je n’imagine certainement pas à quel point ça doit être éprouvant d’écouter et de traduire en temps réel les propos de quelqu’un, surtout lorsqu’ils comportent des termes spécialisés ou techniques.</p>
<p>Et puis l’heure est venue pour la table ronde de s’installer, au plein milieu de la grande scène.</p>
<h3>Table ronde des navigateurs — Dominique Hazael-Massieux, David Rousset, Karl Dubost, Paul Rouget et Sam Dutton</h3>
<p>Un membre du W3C, quatre représentant des fabricants de navigateur avec dans l’ordre, Microsoft, Opera, Mozilla et Google. Depuis bien des annes j’observe la lente progression des navigateurs, qui tend d’ailleurs vers une convergence bienvenue bien qu’il y ait encore pas mal de point de dissension parmi les équipes. Tout le monde peut parler de la compétition qui existe depuis longtemps, parce qu’il existe des enjeux financiers importants, mais Paul Rouget a eu raison je crois d’insister sur le fait qu’il y avait aussi pas mal de collaboration entre les compétiteurs et que ça ne se savait pas beaucoup.</p>
<p>Côté photo ça a été le moment le plus compliqué. J’étais assez loin du centre de la scène, ils étaient assis. L’écran derrière eux était blanc et brillant, bref une des pires conditions pour prendre un cliché correct.</p>
<p>À la fin cependant, tout le monde s’est levé et a montré au public médusé qu’ils s’aimaient :</p>
<p><img src="http://farm7.static.flickr.com/6100/6250740875_2a26e1cfa3.jpg" alt="" style="display:block; margin:0 auto;" /></p>
<p>Comme à l’accoutumée tout le staff est ensuite monté sur scène et le public tout entier présent leur a fait une <em>standing-ovation</em> bien méritée ! Chapeaux, vous étiez juste parfaits !</p>
<p><img src="https://open-time.net/public/illustrations/2011/paris-web/.anook-nooki-cocotte_m.jpg" alt="anook-nooki-cocotte.jpg" style="display:block; margin:0 auto;" title="anook-nooki-cocotte.jpg, , , oct. 2011" /></p>
<p>C’était le soir, j’étais fatigué, j’ai rentré à ma maison pour me reposer et pour être frais et vaguement dispo pour les ateliers du lendemain. Mais ceci est <a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-les-ateliers">une autre histoire</a> que je vous conterai plus tard…</p>https://open-time.net/post/2011/10/19/Paris-Web-2011-deuxieme-jour#comment-formhttps://open-time.net/feed/atom/comments/7301Paris-Web 2011, premier joururn:md5:e4e8bc88d8e982ce4a40c1cabfe147452011-10-19T16:14:00+02:002011-10-28T14:15:36+02:00FranckAir du tempsinternetrencontreweb <p>Après un <a href="https://open-time.net/post/2011/10/17/Paris-Web-2011">billet général</a> sur cet événement et <a href="https://open-time.net/post/2011/10/16/Paris-Web-2011-les-photos">les quelques photos</a>, voyons maintenant en détail ces trois journées particulières, en commençant par le premier jour de retrouvailles avec plein de têtes plus ou moins connues, déjà rencontrées <acronym title="In Real Life (dans la vie réelle)">IRL</acronym> comme on dit ou de manière virtuelle sur Twitter, les forums, et ailleurs.</p>
<p>Je suis arrivé sur place avec <a href="http://twitter.com/Kozlika">@Kozlika</a> et <a href="http://twitter.com/tomekmusic">@tomek</a> un peu en avance et nous nous sommes aussitôt dirigés vers l’accueil pour y récupérer nos badges. Trois files pour les auditeurs, déjà nombreux dans le hall — beaucoup sont déjà passés et dégustent un café un peu plus loin —, et une file réservée aux orateurs dans laquelle j’avise, après avoir rempli les formalités d’usage, <a href="http://twitter.com/davidrault">David Rault</a> avec qui nous avons prévu un petit <em>halva-war</em> depuis l’année dernière. Nous convenons de nous revoir très vite à une des pauses de la journée et je file vers l’entrée où un gentil cerbère contrôle d’un œil avisé nos badges flambant neuf.</p>
<p>Plus loin, <a href="http://twitter.com/hellgy">@hellgy</a>, <a href="http://twitter.com/biou">@biou</a> et d’autres membres du staff nous offrent gentiment un sac rempli de <em>goodies</em> et après avoir papoté 34 secondes 17 dixièmes nous filons nous recharger en caféine un peu plus loin. L’heure approche, la stress augmente, le trac des quelques orateurs que nous croisons est palpable, la tension est à son comble et épuisé je m’affale dans un large fauteuil au premier rang du petit amphithéâtre où je vais enfin assister à la première conférence de la journée.</p>
<div class="mosaique">
<p><a href="https://open-time.net/public/illustrations/2011/paris-web/2011-10-13-matin-1.jpg" title="2011-10-13-matin-1.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.2011-10-13-matin-1_t.jpg" alt="2011-10-13-matin-1.jpg" title="2011-10-13-matin-1.jpg, , , oct. 2011" /></a>
<a href="https://open-time.net/public/illustrations/2011/paris-web/2011-10-13-matin-2.jpg" title="2011-10-13-matin-2.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.2011-10-13-matin-2_t.jpg" alt="2011-10-13-matin-2.jpg" title="2011-10-13-matin-2.jpg, , , oct. 2011" /></a>
<a href="https://open-time.net/public/illustrations/2011/paris-web/2011-10-13-apres-midi-1.jpg" title="2011-10-13-apres-midi-1.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.2011-10-13-apres-midi-1_t.jpg" alt="2011-10-13-apres-midi-1.jpg" title="2011-10-13-apres-midi-1.jpg, , , oct. 2011" /></a>
<a href="https://open-time.net/public/illustrations/2011/paris-web/2011-10-13-apres-midi-2.jpg" title="2011-10-13-apres-midi-2.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.2011-10-13-apres-midi-2_t.jpg" alt="2011-10-13-apres-midi-2.jpg" title="2011-10-13-apres-midi-2.jpg, , , oct. 2011" /></a></p>
</div>
<p>Il est 9 heures, <a href="http://twitter.com/xibe">Xavier Borderie</a> s’avance vers la scène avec l’œil qui frise et arborant une taille de barbe assez particulière — <a href="http://twitter.com/embruns">Laurent Gloaguen</a> en est tombé <a href="http://embruns.net/logbook/2011/10/17.html#man-i-love">amoureux</a> dès qu’il a vu <a href="http://www.flickr.com/photos/franck-paul/6251022802/sizes/o/in/set-72157627783548707/">cette photo</a> — et nous ouvre alors le bal en introduisant le premier acte.</p>
<h3>Accessibilité : soyons agiles — Élie Sloïm et Laurent Denis</h3>
<p><img src="http://farm7.static.flickr.com/6240/6250963080_0e3524ef1e.jpg" alt="Élie Sloïm et Laurent Denis" style="display:block; margin:0 auto;" /></p>
<p>Que dire ? Eh bien j’ai pensé, pour changer un peu des dithyrambiques paroles que tout un chacun pourrait prononcer sur la qualité de toutes les conférences et ateliers organisés pendant ces journées, vous expliquer, un peu, comment j’ai abordé cela d’un œil de photographe tout amateur que je suis.</p>
<p>Laurent et Élie sont des bêtes de scène, ça se voit tout de suite et l’ensemble de la salle est concentrée sur les propos de l’un et de l’autre, se passant la parole à la façon des tennismen professionnels à Roland-Garros. Certes l’éclairage est parfois un poil juste pour prendre des photos sur le vif mais cette salle a des murs quasiment parfaits — ils sont bruns foncés mat — et m’offrent de quoi mettre en valeur les personnages que j’immortalise sur la pellicule.</p>
<p>J’ai parfois été gêné par la lumière assez vive dégagée par l’écran où étaient projetées les diapositives et mon boîtier a eu un peu de mal à faire des mesures de lumière me fournissant tantôt une photo sur-exposée tantôt sous-exposée. Placé où j’étais, au premier rang et à gauche de la salle, je n’avais aucun mal à capter Élie, par contre Laurent m’a souvent donné du fil à retordre, étant juste dans l’alignement de l’écran. Je n’ai quasiment que des ombres chinoises de sa prestation.</p>
<div class="mosaique">
<p><img src="http://farm7.static.flickr.com/6213/6250967430_bff77a8e3d.jpg" alt="" />
<img src="http://farm7.static.flickr.com/6173/6250970136_844e909d5a.jpg" alt="" /></p>
</div>
<p>J’en ai profité pour photographier une des traductrices LSF qui signait pour les quelques personnes sourdes ou mal-entendantes présentes dans la salle — je suppose que ça pourra aussi servir au moment du visionnage des vidéos qui seront publiées prochainement. À la fin de la conférence, où j’apprendrais qu’il faut être <em>agile</em> quand on fait de l’accessibilité, une des personnes sourdes s’est levée et s’est tournée vers le public pour poser une question. Ses mains ont commencé à bouger dans tous les sens et nous étions fort satisfaits d’avoir une traductrice capable de nous dire à vive voix ce qu’elle disait. Nous nous retrouvions handicapés, temporairement certes, mais suffisamment pour avoir besoin d’une aide afin de comprendre les propos énoncés.</p>
<p>L’heure est passé très vite et il fallu alors se diriger promptement vers le grand amphithéâtre pour profiter d’une place correcte — dans les tous premiers rangs — afin de suivre la conférence suivante proposée par David Rault.</p>
<h3>Les goûts et les couleurs — David Rault</h3>
<p><img src="http://farm7.static.flickr.com/6231/6250975342_8fa7111a07.jpg" alt="David Rault" style="display:block; margin:0 auto;" /></p>
<p>Ce grand amphithéâtre est particulier lorsqu’on est auditeur car, quand vous êtes installés à l’un des premiers rangs, vous vous situez sous le conférencier. Du coup les photos de la scène sont en permanence en contre-plongée, ce qui me gêne un peu je trouve car ça a tendance à éloigner le sujet de celui qui le regarde. Mais passons sur cet particularité de cette scène pour nous concentrer sur la conférence qui m’a posé le plus de problème ! Oui, oui, je n’invente rien. David nous a gratifié d’un feu d’artifice de couleur et j’ai eu le plus grand mal à trouver les bons (ou plutôt les moins mauvais) réglages. Quand vous passez d’un fond rouge à un fond jaune ou bleu vif eh bien ça change complètement la façon de shooter et j’avoue avoir eu pas mal de déchets quand j’ai développé mes photos.</p>
<p>David est un artiste sur scène et je pense qu’il serait capable de présenter à peu près n’importe quel sujet avec autant de maîtrise. Cela dit, il excelle surtout sur les domaines qu’il aborde régulièrement, j’ai encore le souvenir de sa magistrale conférence de l’année dernière sur les polices de caractère, et cette édition sur les couleurs était de même facture.</p>
<p>L’heure des questions-réponses est arrivée aussi vite qu’avec la conférence précédente et après un aller-retour <em>trollesque</em> qui en a fait rire pas mal, je suis retourné dans le petit amphi pour la suite des réjouissances. Mais avant cela, une petite pause m’a donné l’occasion de saluer de nouvelles têtes et d’aller faire quelques photos à l’extérieur où, malgré un temps plutôt maussade, je trouvais une lumière suffisante pour déclencher. Ça sera aussi l’occasion pour Kozlika d’initier avec Daniel Glazman l’idée d’une petite conférence sur l’histoire des CSS — j’y serai assurément, nous en reparlerons j’espère rapidement.</p>
<p>Il est bientôt l’heure et je reprend le chemin qui me ramène vers l’intérieur en en profitant pour témoigner de l’instabilité capillaire d’hellgy :</p>
<p><img src="http://farm7.static.flickr.com/6120/6250985266_52598ac742.jpg" alt="Hellgy" style="display:block; margin:0 auto;" /></p>
<h3>Tester l’ergonomie de son site même sans budget — Maurice Svay</h3>
<p>De retour dans ce petit amphi je me suis replacé à peu près au même endroit pour suivre cette conférence très économe où nous apprendrons qu’il ne faut pas un budget de ministre pour effectuer quelques tests utilisateurs — ce que d’ailleurs j’ai noté dans un coin de ma tête pour les prochaines <em>install-parties</em> de Dotclear.</p>
<p><img src="http://farm7.static.flickr.com/6101/6250986962_f02fc1d08e.jpg" alt="Maurice Svay" style="display:block; margin:0 auto;" /></p>
<p>Je retrouve avec plaisir cette petite salle et ses murs sombres et son éclairage particulier, beaucoup plus intime que le grand amphi dont les murs sont illuminés de couleurs claires et douces. Maurice navigue avec pas mal d’aisance, maitrisant visiblement bien son sujet et conquiert facilement l’auditoire. Le public est attentif et ne réagit quasiment pas à mes déclenchements. Cet appareil que j’ai depuis quelques mois est assez silencieux et c’est un régal de photographier avec.</p>
<p>C’est à cette conférence que je me suis aperçu de la jeunesse de l’auditoire. À part <a href="http://twitter.com/webatou">Monique Brunel</a> croisée un peu plus tôt le matin et ce monsieur aux cheveux blancs assistant à la présentation de Maurice je n’ai vu que des jeunes et très jeunes — en tout cas plus jeunes que moi. C’est sûrement une excellente chose pour les métiers du web.</p>
<div class="mosaique">
<p><img src="http://farm7.static.flickr.com/6098/6250454665_842dc237c8.jpg" alt="Monique Brunel" />
<img src="http://farm7.static.flickr.com/6232/6250474583_d146699b38.jpg" alt="" /></p>
</div>
<p>En repartant vers le grand amphi, à la fin de la conférence j’ai croisé David en discussion avec <a href="http://twitter.com/notabene">Stéphane Deschamps</a> et <a href="http://twitter.com/Nissone">Delphine Malassingne</a>, devant la grande salle et je lui ai glissé rapidement une munition de Halva — le meilleur qu’on puisse trouver dans le coin où j’habite, et il paraît l’un des meilleurs de beaucoup de coins de ce pays — et il m’a annoncé qu’il viendrait avec les siennes le lendemain et vous verrez, mais pas tout de suite, qu’il avait apporté de quoi tenir un (petit) siège — j’ai d’ailleurs quasiment tout dévoré à l’heure qu’il est.</p>
<h3>Je veux un VRAI sous-titrage ! — Sophie Drouvroy</h3>
<p><img src="http://farm7.static.flickr.com/6045/6251022082_9f29d32ba7.jpg" alt="Sophie Drouvroy" style="display:block; margin:0 auto;" /></p>
<p>J’attendais cette conférence avec un petit pincement au cœur parce que je savais que Sophie avec un trac immense avant de la faire et que quelques jours auparavant, quand je l’avais croisée, elle avait avoué avoir envie d’aller se cacher aux antipodes plutôt que de venir ici (j’exagère, mais pas beaucoup beaucoup). Il faut dire que le challenge était rudement élevé et elle e rempli la mission qu’elle s’était donnée de façon admirable.</p>
<p>Initialement prévue dans le grand amphithéâtre il avait fallu intervertir les deux conférences prévues pour que chacun puisse trouver une place assise. Cela dit je pense qu’il aurait aussi fallu un grand amphithéâtre pour cette conférence et rapidement les derniers arrivés ont été contraints de s’installer à même les marches d’escalier ou juste sur les côtés de la scène. Ce changement de dernière minute avait probablement mis à mal la concentration de Sophie et le démarrage a été un tout petit peu laborieux et je sentais la salle de plus en plus bienveillante, on devinait que les gens avaient envie de la porter pour l’aider à continuer.</p>
<p>C’était la première fois qu’une personne porteuse de handicap nous exposait ses besoins, ses préférences et ses coup de gueule parfois. J’ai appris ici et d’autres l’auront appris également qu’elle préférait avoir trop de sous-titres que pas assez. Qu’elle souhaitait avoir des couleurs pour différencier ce qui était inscrit en bas de l’écran, etc etc. Bref une belle leçon de vie et l’empathie de tous était palpable dans cette petite salle.</p>
<p>Nouveau dialogue de sourds — ce n’est absolument pas péjoratif de ma part — et nous voilà encore handicapés, nous les entendants, attendant la traduction légèrement décalée d’une traductrice LSF de cette question posée en langue des signes. De l’immersion totale !</p>
<p><img src="http://farm7.static.flickr.com/6032/6250497749_7053e90703.jpg" alt="" style="display:block; margin:0 auto;" /></p>
<p>Cette conférence est mon coup de cœur de ce Paris-Web 2011 ! (mon petit doigt me dit que je ne suis pas le seul à avoir fait ce choix).</p>
<p>Nous voilà arrivé au déjeuner où j’ai pu constaté que la qualité de celui-ci n’avait pas baissé par rapport à l’année dernière. Tout était bon, en quantité suffisante et sur une surface telle qu’il était assez commode d’aller se servir. Chapeau. Là je n’ai pas fait de photo, <em>because</em> j’avais un poil faim :-)</p>
<p>Ensuite, café terrasse sur le parvis où j’en profite pour capter quelques têtes connues et pas connues et un peu connues, en gros un peu tout le monde en fait. D’autres prennent eux aussi des photos, tout le monde se photographie, c’est le pays des bisounours ou tous sourient \o/ Je plaisante mais c’est un peu l’ambiance qu’il y a eu tout au long de ces journées ce qui rend d’ailleurs l’atterrissage de pas mal d’entre nous assez rude le lundi matin lorsque nous sommes de retour dans la vraie réalité réelle de nos quotidiens journaliers. Si j’en fait trop, dites-le, n’hésitez-pas, hein ?</p>
<p><img src="http://farm7.static.flickr.com/6039/6251062894_f6e3cdcf27.jpg" alt="" style="display:block; margin:0 auto;" /></p>
<p>L’heure de retourner à l’intérieur arrive vite et j’avise un facétieux <a href="http://twitter.com/karlpro">Karl Dubost</a> tentant de refaire la coupe de cheveux de <a href="http://twitter.com/izo">Mathieu Drouet</a>, un des photographes officiels de l’événement. J’avais décidé d’aller voir la conférence en anglais de Robert Nyman et je me suis alors installé, toujours au deuxième rang (le premier était réservé aux traductrices LSF, aux personnes sourdes et mal-entendantes, aux orateurs et au staff de Paris-Web).</p>
<h3>HTML5 APIs: Where no man has gone before — Robert Nyman</h3>
<p><a href="http://twitter.com/robertnyman">Robert Nyman</a> nous a dressé un inventaire assez exhaustif des API disponibles autour d’HTML5 et j’avoue humblement que ça m’est un peu passé au dessus de la tête. Sans préjuger de la qualité de cette présentation qui m’a cependant donné une idée au détour d’un mot prononcé dans un tout autre contexte — je vous en reparlerai peut-être si ça débouche sur quelque chose de concret — j’en ai surtout profité pour dérouiller un peu mon anglais. Eh bien ça va à peu près. C’est pas <em>fluent</em> mais ça va, je pourrais encore me débrouiller pour survivre dans un pays anglophone qui parlerait d’API de <em>browser</em>.</p>
<p><img src="http://farm7.static.flickr.com/6107/6250541801_4512894d44.jpg" alt="Robert Nyman" style="display:block; margin:0 auto;" /></p>
<p>Robert Nyman est très agréable à photographier car il <em>occupe</em> la scène, toute la scène. Se déplaçant de droite à gauche au gré de son discours et j’ai ainsi pu faire quelques photos intéressantes à ce moment. Au passage je me suis permis de prendre un ou deux clichés du caméraman présent à ce moment tout en me disant que la vidéo était vraiment un autre <em>monde</em>. Je sais que mon boîtier est capable de très belles choses en vidéo mais ça me m’attire pas du tout et je suis admiratif de ceux qui arrivent à en faire avec autant de constance. Rien que d’imaginer ensuite reprendre les <em>rushes</em> et faire le montage idoine… J’ai vraiment pas le temps de faire tout ça. Bref, laissons ça aux vidéastes et reprenons tranquillement mon <em>shooting</em> en règle.</p>
<p>Lorsque j’ai croisé les gens sortant du petit amphithéâtre où je me rendais pour suivre la conférence suivante, j’ai entendu fugacement un « la conf. où il fallait être » en parlant de celle concernant les neurosciences. J’avoue que ça m’a intrigué et que c’est surement une des vidéos que je visionnerai dès qu’elle sera disponible.</p>
<h3>Un navigateur, comment ça marche ? — Anthony Ricaud</h3>
<p><img src="http://farm7.static.flickr.com/6218/6251085978_3a02454feb.jpg" alt="Anthony Ricaud" style="display:block; margin:0 auto;" /></p>
<p>Vous savez comment fonctionne vraiment un navigateur vous ? Je veux dire, lorsque vous tapez une URL dans la barre d’adresse et qu’il vous affiche une très belle page — sauf quelquefois où c’est très moche, j’ai des noms —, avec de belles polices, de belles images et des belles couleurs ? Eh bien maintenant j’en sais un peu plus. C’est une sacré mécanique qui doit prendre en compte toute la syntaxe HTML, la mixer avec la ou les CSS qui vont bien, décider ce qu’il faut afficher ou pas, etc etc.</p>
<p><a href="http://twitter.com/rik24d">Anthony Ricaud</a> qui travaille chez Mozilla nous a expliqué ça dans le détail avec des mots compréhensibles et sous le regard bienveillant de <a href="http://twitter.com/glazou">Daniel Glazman</a> himself ce qui a du être un poil intimidant je pense ! L’heure allouée est passée aussi vite que pendant les autres conférences de la journée et nous sommes arrivés à pause de l’après-midi.</p>
<h3>Ouvrir le Web un bug à la fois — Karl Dubost</h3>
<p><img src="http://farm7.static.flickr.com/6223/6250562495_4f653764a3.jpg" alt="Karl Dubost" style="display:block; margin:0 auto;" /></p>
<p>C’est dans le grand amphithéâtre que je suis retourné pour terminer avec les deux dernières étapes de cette journée en commençant par celle de Karl Dubost sur ses préoccupations actuelles chez Opéra. Voilà encore une autre bête de scène avec qui j’ai finalement osé discuter un peu le midi à propos des photos qu’il prend et qu’il utilise pour illustrer ses articles. Il m’a avoué avoir son appareil en permanence avec lui, voire <em>ouvert</em> — ce que j’ai traduit aussitôt par prêt à déclencher et autour du cou — quand il se déplace dans la ville et ailleurs. Il m’a dit que l’important était là, de pouvoir déclencher sur l’instant, que l’occasion ne se représentait pas. Difficile à appliquer pour ma part quand je circule en scooter mais sinon je suis d’accord avec lui et j’ai souvent fait des photos remarquables — dans le sens qu’elles m’ont marqué — alors que j’avais comme ça mon appareil à portée de main !</p>
<p>J’aime beaucoup la photo que j’ai faite alors qu’il se concentrait avant sa conférence. J’imagine qu’il doit balayer ou repenser aux moments clés de son discours, aux idées fortes qu’il souhaite nous faire passer ou alors qu’il revoit en mémoire un paysage apaisant, qui sait ? J’ai beaucoup aimé également sa façon d’illustrer ses <em>slides</em>, avec des estampes japonaises je pense. C’était très zen, un peu à l’image de la façon qu’il a d’illustrer ses billets, toujours avec beaucoup d’à-propos.</p>
<p>Je suis resté pensif pendant que se mettait en place la dernière session de la journée, qui allait nous réveiller les neurones, nous faire papillonner les oreilles et briller les yeux…</p>
<h3>Lightning talks — Daniel Glazman et Robin Berjon</h3>
<p><img src="http://farm7.static.flickr.com/6171/6250574479_5d609b347b.jpg" alt="Daniel Glazman et Robin Berjon" style="display:block; margin:0 auto;" /></p>
<p>Ce fut un feu d’artifice. Un enchainement virevoltant de 10 orateurs pendant 4 minutes chacun. Une explosion de rigolade. L’occasion de faire des photos surprenantes — j’en ai déjà brièvement <a href="https://open-time.net/post/2011/10/18/Paris-Web-2011-l-effet-Karl-Dubost">parlé hier</a> — et ça a vraiment été un pari réussi par les deux compères et maîtres de cette mini cérémonie d’un peu moins d’une heure.</p>
<p>On se demande pourquoi ça n’a pas été fait avant. On n’imagine plus un Paris-Web futur sans cette idée magistrale et c’est avec un hommage marqué envers <a href="http://fr.wikipedia.org/wiki/Dennis_Ritchie">Dennis MacAlistair Ritchie</a><sup>[<a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-premier-jour#pnote-7300-1" id="rev-pnote-7300-1">1</a>]</sup> à l’instigation de Daniel que c’est terminé cette formidable journée. Pour moi c’était déjà un Paris-Web réussi.</p>
<p><a href="https://open-time.net/public/illustrations/2011/paris-web/anook-nooki-kiss.jpg" title="anook-nooki-kiss.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.anook-nooki-kiss_m.jpg" alt="anook-nooki-kiss.jpg" style="display:block; margin:0 auto;" title="anook-nooki-kiss.jpg, , , oct. 2011" /></a></p>
<p>Il est temps de faire une pause et je reviendrais un peu plus tard vous conter <a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-deuxieme-jour">la seconde journée de conférence</a>…</p>
<div class="footnotes"><h4>Notes</h4>
<p>[<a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-premier-jour#rev-pnote-7300-1" id="pnote-7300-1">1</a>] J’ai sous les yeux une des mes premières <em>bibles</em> : LE « Kernighan et Ritchie» tout noir et aux pages jaunies que j’ai tant parcouru quand j’ai appris le langage C, au début des années 80.</p></div>
https://open-time.net/post/2011/10/19/Paris-Web-2011-premier-jour#comment-formhttps://open-time.net/feed/atom/comments/7300Paris-Web 2011urn:md5:a93158df0e90c137ba4b788ed0834be52011-10-17T16:39:00+02:002011-10-28T14:14:49+02:00FranckAir du tempsinternetrencontreweb <p>Je me souviens de mon premier Paris-Web, du premier Paris-Web en fait, puisqu’en 2006, année où je m’y suis rendu la première fois était également une première pour cet événement devenu un best-of depuis ce temps ! J’ai même entendu, ou plutôt lu sur Twitter, que c’était la seule conférence au monde sur ce vaste sujet intégralement traduite en <acronym title="Langue des signes française">LSF</acronym> et donc accessible pour les sourds et mal-entendants !</p>
<p>Je me souviens de l’époque où, du côté de Montparnasse, j’avais croisé des déjà grands noms du web et je frôlais les murs en me demandant un peu ce que je fichais dans ce repère de designers-intégrateurs-développeurs moi qui n’avait fait du web qu’un petit moyen de publier deux-trois pages, que ce soit professionnellement ou personnellement. Certes je trainais déjà mes guêtres du côté de Dotclear, mais j’étais (et je suis toujours d’ailleurs) en phase d’apprentissage intensif. Certes mes premiers sites web dataient du milieu des années 90 (1994 ou 1995 je crois pour le tout premier) — je me souviens alors qu’ils n’intégraient aucune feuille de style et que toute la déco se faisait à l’aide de quelques images et d’attributs de balise HTML.</p>
<p><a href="https://open-time.net/public/illustrations/2011/paris-web/goodies.jpg" title="goodies.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.goodies_m.jpg" alt="goodies.jpg" style="display:block; margin:0 auto;" title="goodies.jpg, , , oct. 2011" /></a></p>
<p>J’avais été impressionné par l’ambiance déjà présente en j’en étais ressorti, deux jours plus tard (il n’y avait pas encore d’ateliers cette année là) avec la furieuse envie de m’intégrer dans ce microcosme si foisonnant ! C’était aussi la première fois depuis le début de ma carrière — j’avais déjà 23 ans de taf derrière moi — que j’assistais à un événement qui me concernait, ou plutôt qui me parlait d’un de mes métiers. Quelques mois auparavant cette première édition j’avais publié ici-même <a href="https://open-time.net/post/2006/04/23/523-mon-opquast-conclusion">une étude de bonnes pratiques Opquast vs Dotclear</a> qui avait été rudement bien accueillie — je crois même que certains s’en sont inspirés pour développer des outils — et c’était en cohérence quasi parfaite avec l’objet de <a href="http://www.paris-web.fr/2006/">cette conférence</a> et cela m’avait donné envie d’y participer :</p>
<blockquote><p>Accessibilité, qualité et design : comment concilier ces trois approches dans une optique de production de sites web, avec les contraintes et les exigences liées à des processus « industriels » ?</p></blockquote>
<p>Depuis j’y suis retourné à quelques reprises, en 2009, 2010, et la semaine dernière pour l’édition 2011 et je vous propose de vous résumer ce que j’ai retenu ce cette dernière édition, ce que j’en ai perçu et ce que ça aura pu m’inspirer. Je reviendrai plus en détail sur les conférences des deux journées et sur les ateliers qui ont suivi (j’ajouterai ci-dessous les liens vers les billets correspondants) :</p>
<ul>
<li><a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-premier-jour">Première journée de conférence</a></li>
<li><a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-deuxieme-jour">Seconde journée de conférence</a></li>
<li><a href="https://open-time.net/post/2011/10/19/Paris-Web-2011-les-ateliers">Les ateliers</a></li>
</ul>
<p>J’avoue avoir été un peu en décalage avec ce qui a été annoncé, présenté, que ce soit d’un point de vue purement technique ou méthodologique car ça me parait très éloigné des préoccupations immédiates de mon employeur qui ne souhaite qu’une chose : que ce qu’il demande soit fait vite et pour pas cher. Il m’impose sa façon de concevoir le design parfois en totale contradiction avec ce que j’ai pu apprendre ici (<a href="http://www.paris-web.fr/2011/conferences/les-gouts-et-les-couleurs.php" hreflang="fr">voir la conférence de David Rault sur les couleurs</a>) ou là (voir la <a href="http://www.paris-web.fr/2011/conferences/accessibilite-soyons-agiles.php" hreflang="fr">conférence d’Élie Sloïm et Laurent Denis sur l’accessibilité agile</a>), idem d’ailleurs pour la mise en page web qui doit refléter l’équivalent <em>print</em> et je ne parle pas d’imaginer leur causer deux minutes de « Qualité web », ils me prendraient, a minima pour un illuminé ! Pour vous donner un exemple je n’ai pas encore réussi à leur faire admettre qu’un fil RSS pouvait être plus pratique qu’aller voir chacun des sites en question. Bref, c’est parfois un peu bisounours, rempli de bons sentiments, et le lundi il faut reposer les pieds sur terre et constater que ça n’ira certainement pas aussi vite qu’on le voudrait.</p>
<p>En revanche j’imagine assez bien appliquer <a href="http://www.paris-web.fr/2011/conferences/tester-lutilisabilite-de-son-site-web-quand-on-na-pas-de-budget.php" hreflang="fr">les idées avancées par Maurice Svay</a>, sans d’ailleurs que je le mentionne spécifiquement dans mes projets, parce que c’est plutôt facile à mettre en œuvre et ne coûte pas grand chose. Également parce que ce serait une bonne idée d’appliquer ça au développement de Dotclear, éventuellement au cours des <em>install-parties</em> qu’on organise de temps en temps.</p>
<p>J’ai été très surpris de l’implication des auditeurs sourds ou mal-entendants (et oratrice pour l’une d’entre eux) pendant les conférences, n’hésitant jamais à prendre la parole par signe et nous rendant alors plus handicapés qu’eux car nous attendions du coup la traduction de ce qu’ils étaient en train de signer. Je pense que pas mal de personnes présentes dans le public ont compris ce que signifiait concrètement que de souffrir d’un handicap — je ne suis pas sûr que souffrir soit le terme exact, peut-être que « porteur de handicap » est plus exact. J’ai constaté ça, et avec beaucoup de plaisir, lorsque la plupart des gens présents à <a href="http://www.paris-web.fr/2011/conferences/je-veux-un-vrai-sous-titrage.php" hreflang="fr">la conférence de Sophie Drouvroy</a> l’a remerciée en agitant les mains à la façon de la LSF après l’avoir applaudie. j’imagine sans mal qu’elle a du être pour le moins émue de voir ça !</p>
<p>J’ai appris beaucoup, et pas que techniquement. Quelques idées ont germé, parfois pendant une conférence — idée qui d’ailleurs n’avait pas grand chose à voir avec le sujet, mais un mot, <em>offline</em>, a fait tilt… —, parfois à la faveur d’une discussion impromptue avec telle ou telle personne. J’ai pu parler un peu photo avec Karl Dubost, Thanh et d’autres qui font des photos que j’admire — j’avoue humblement ne pas avoir osé déranger Izo, qui avait installé un petit studio photo, mais je me suis promis d’essayer l’année prochaine, j’ai quelques questions à lui poser. J’ai beaucoup photographié même si ce n’est pas toujours facile de capter la scène, le moment important d’une conférence ou d’un atelier. J’ai tout de même une belle photo de Karl en train de nous prouver qu’on peut fabriquer un sac d’ordinateur portable avec son seul jean et une paire de ciseaux en moins de 30 secondes ! Et puis surtout j’ai rencontré en trois jours plus de personnes que je rencontre pendant tout le reste de l’année, en tout cas dans le domaine du web. Et c’est <em>Hubert-Cool</em> !</p>
<p>Scotché est le maître mot de cette session. Scotché par les <em>Lightning-talks</em> de Daniel Glazman et Robin Berjon, scotché par l’organisation impeccable du staff de Paris-Web, scotché par la maîtrise et l’adaptation des traductrices LSF présentes pendant les deux jours de conférence, scotché par l’ambiance qui n’a pas molli tout au long des trois jours, scotché par la bonne humeur et la gentillesse de tous, scotché par la facilité avec laquelle il est possible d’approcher les orateurs pour leur poser des questions, scotché de voir que tous sont prêts à y répondre, y compris aux plus débutants d’entre nous, y compris quand c’est à cent lieues de leurs préoccupations, scotché par le faible coût de cet événement, scotché aussi d’avoir été reconnu le samedi par des inconnus parce que je portais mon bonnet marin (celui que j’ai sur ma <a href="http://twitter.com/#!/franckpaul">photo d’avatar Twitter</a> et ailleurs), et enfin scotché pour tout ce que ne n’ai pas encore cité !</p>
<p>Pour finir je citerai une phrase de Karl Dubost, prononcée pendant son atelier du samedi matin :</p>
<blockquote><p>Construire des systèmes parfaits ça ne marche pas, construire des systèmes flexibles ça marche beaucoup mieux.</p>
<p>
<span class="signature">Karl <span class="author">Dubost</span>, <em>Atelier Paris-Web 2011</em></span></p></blockquote>
<p>Rendez-vous l’année prochaine où j’essaierai d’être ubique cette fois-là pour assister à toutes les conférences et tous les ateliers. Il paraît que j’en ai loupé que des biens et dire que j’avais choisi que des biens. Vivement les vidéos ;-)</p>
<p><a href="https://open-time.net/public/illustrations/2011/paris-web/avatar-ter-250.jpg" title="avatar-ter-250.jpg"><img src="https://open-time.net/public/illustrations/2011/paris-web/.avatar-ter-250_t.jpg" alt="avatar-ter-250.jpg" style="display:block; margin:0 auto;" title="avatar-ter-250.jpg, , , oct. 2011" /></a></p>
<p>PS : Si vous voulez jeter un œil aux photos que j’ai prises pendant Paris-Web 2011, allez voir <a href="http://www.flickr.com/photos/franck-paul/sets/72157627783548707/" hreflang="fr" title="Mes photos prises pendant Paris-Web 2011">cet album Flickr</a> (ou via <a href="http://www.fluidr.com/photos/franck-paul/sets/72157627783548707/" hreflang="en" title="Photos de Paris-Web 2011">Fluidr</a>) ou bien voyez le <a href="http://www.flickr.com/groups/1734345@N23/pool/" hreflang="fr" title="Groupe des photographes présents à Paris-Web 2011">groupe Flickr Paris-Web 2011</a>.</p>https://open-time.net/post/2011/10/17/Paris-Web-2011#comment-formhttps://open-time.net/feed/atom/comments/7299Paris-Web 2011, les photosurn:md5:d5b0a1653b4afdaa8eba413cb18317bf2011-10-16T23:03:00+02:002011-10-28T14:14:22+02:00FranckAir du tempsinternetrencontreweb <p>J’ai assisté à <a href="http://www.paris-web.fr/" hreflang="fr">Paris-Web 2011</a>, les 13, 14 et 15 octobre et comme vous vous en doutez j’ai pris quelques photos. Elles sont visibles sur <a href="http://www.flickr.com/photos/franck-paul/sets/72157627783548707/">mon compte Flickr</a> mais aussi <a href="http://www.fluidr.com/photos/franck-paul/sets/72157627783548707/">par ici</a>.</p>
<p><img src="http://farm7.static.flickr.com/6034/6250477465_a653cc76a2_o.jpg" alt="Thanh, un des photographes officiels de l'événement" style="display:block; margin:0 auto;" /></p>
<p>Prenez le temps de les regarder ainsi que celles des copains qui les auront eux aussi publié dans le <a href="http://www.flickr.com/groups/1734345@N23/pool/">groupe Flickr Paris Web 2011</a> en attendant que je revienne vous parler un peu de ces trois jours très particuliers.</p>
<p>J’ajoute que toutes ces photos sont publiées sous la licence Creative Commons (CC-BY-SA).</p>https://open-time.net/post/2011/10/16/Paris-Web-2011-les-photos#comment-formhttps://open-time.net/feed/atom/comments/7297Vrac du dimanche matinurn:md5:20c17ebe2086ab81b529f97b7423bea82011-10-09T09:29:00+02:002011-10-09T08:38:39+02:00FranckAir du tempsargentpolitiquerencontrevoyageweb <p>Question saugrenue de candide : l’État s’apprête à recapitaliser les banques, c’est-à-dire, d’après ce que j’ai compris, leur filer du pognon pour qu’elles puissent ensuite en filer à leurs actionnaires. J’ai bien compris qu’on se fait enfumer profond comme en 2008 ou bien ?</p>
<hr />
<p>Il pleut à Lyon, je répète, il pleut à Lyon. Ce qui tombe assez mal je l’avoue puisque j’y traîne mes guêtres depuis hier. Départ de la capitale pour un retour à la capitale ce soir (non non je n’ai pas fait d’erreur dans cette phrase).</p>
<hr />
<p>Jeudi, vendredi et samedi prochain je serai là, et franchement ça me fait rudement plaisir d’y rencontrer des gens que je côtoie virtuellement — et quelques-uns tout de même dans la vraie vie du dehors — pour la plupart tout au long de l’année :</p>
<p><a href="http://www.paris-web.fr/"><img src="https://open-time.net/public/illustrations/2011/banniere-paris-web-300x250-je.png" alt="Paris-Web 2011, j’y vais ! (du 13 au 15 octobre)." style="display:block; margin:0 auto;" title="Paris-Web 2011, j’y vais ! (du 13 au 15 octobre)., oct. 2011" /></a></p>
<p>Vous y serez ?</p>
<hr />
<p>Aujourd’hui les primaires socialistes où sera désignée — avec peut-être un second tour — la prochaine présidente de la République française. N’oubliez pas d’aller voter pour elle, bisous, merci.</p>
<p>PS : Ne votez pas Ségolène, on l’a déjà essayé à une élection précédente, ça n’a pas bien marché ;-)</p>https://open-time.net/post/2011/10/09/Vrac-du-dimanche-matin#comment-formhttps://open-time.net/feed/atom/comments/7291