
<p>Pour une communication moderne et responsable de vos résultats financiers et d’opérations, l’élaboration de <strong>rapports d’activité numériques</strong> représente une solution innovante en termes de technologie, d’expérience et d’impact:</p>



<ol>
<li><strong>Navigation Facilitée :</strong> Un sommaire cliquable et des liens internes permettent aux lecteurs de naviguer facilement entre les sections du rapport.</li>



<li><strong>Médias riches et interactifs :</strong> Intégration de vidéos, animations, graphiques interactifs et infographies qui rendent les données engageantes et compréhensibles.</li>



<li><strong>Image de marque :</strong> Renforce l’image de l’entreprise comme étant moderne et innovante avec une expérience plus immersive.</li>



<li><strong>Partage facilité :</strong> Le rapport peut être facilement partagé à l’aide de simples liens, des réseaux sociaux, ou par e-mail, augmentant ainsi sa portée.</li>



<li><strong>Liens : </strong>Intégration de liens vers les profils des membres de l’équipe, des courriels, et liens sortants divers, offrant un potentiel commercial inédit.</li>



<li><strong>Réduction du papier :</strong> Contribue à la durabilité en réduisant l’empreinte écologique de l’impression et de la distribution de documents papier.</li>



<li><strong>Analyses des visites : </strong>Outils d’analyse intégrés pour suivre le comportement des lecteurs (pages vues, temps passé sur chaque section, etc.),</li>



<li><strong>Multilingues :</strong> Facilité de proposer le rapport en plusieurs langues.</li>



<li><strong>Réduction des coûts :</strong> Économies sur les coûts d’impression et de distribution. Une version pdf est disponible en téléchargement.</li>
</ol>



<p>Un <strong>rapport d’activité numérique</strong> augmente l’engagement de vos lecteurs, offre une flexibilité et une accessibilité optimisées, et favorise une communication plus efficace et durable.</p>



<p class="is-style-lead">Nous sommes à votre disposition pour en discuter et réaliser <strong>votre futur rapport d&#8217;activité numérique</strong>, contactez-nous: <a href="mailto:alberto@antistatique.net?bcc=hello@antistatique.net&amp;subject=Rapport%20d'activit%C3%A9%20num%C3%A9rique%20-%20on%20en%20parle%20%3F&amp;body=Bonjour%20Alberto%20!%0A">alberto@antistatique.net</a> ou par téléphone au <a href="tel:+41216236303">021 623 63 03</a> / <a href="tel:+41225526363">022 552 63 63</a></p>


Votre prochain rapport d’activité sera numérique


<p><strong>En tous les cas, c’est la plateforme incontournable, que tout le monde utilise – ou presque – et ça, on ne peut pas l’ignorer.</strong></p>



<p>Cette année, la marque qui a récemment fait l’acquisition d’Affinity – le concurrent direct d’Adobe Creative Cloud – pour la somme rondelette de <strong>380 millions de dollars,</strong> annonce des chiffres à donner le tournis. Nous serions plus de <strong>180 millions d’utilisateur·ices</strong> à travailler avec cette application en ligne, en version gratuite ou payante.</p>



<p>Mais pourquoi un tel engouement? En tant que professionnel·les de la création graphique – digitale et analogique – nous nous sommes posé la question chez Antistatique de ce qui génère un tel succès. Nous l’avons donc testée et avons cherché à savoir ce qu’elle a dans le ventre et surtout quel est le potentiel impact sur les agences de création.</p>



<p>Le résultat est sans appel, <strong>Canva c’est un super outil,</strong> dans un champ d’application très varié. Accessible, simple, rapide, l&#8217;outil permet à quiconque, même sans compétences en design, de créer en 2-2 tout un tas de supports: visuels réseaux sociaux, présentations, flyers, papeterie et bien plus encore. Tout ça, grâce à une interface intuitive et des modèles prédéfinis. Ces derniers – à utiliser tels quels – ou personnalisables – sont déjà aux bonnes dimensions (reste plus qu’à choisir), imaginez donc le gain de temps, c’est con-si-dé-ra-ble!</p>



<p>Récemment, des fonctionnalités d’intelligence artificielle ont même été ajoutées pour aider l’utilisateur·ice à créer des designs encore plus professionnels. A cela s’ajoute encore la mise à disposition de bibliothèques d’images et pictos/icônes gratuites. Et le prix alors, comparé aux logiciels professionnels qui ont le monopole – Adobe Creative Cloud – pour ne pas les citer, Canva propose des options gratuites et des abonnements payants à moindre coût, rendant aisée une fois de plus, la création graphique au plus grand nombre. Ça fait beaucoup d’arguments pour, non?&nbsp;</p>



<p>Ok, ok, vous êtes déjà en train de penser, alors à quoi bon continuer de travailler avec des professionnel·les qui coûtent cher et qui mettent de plombes à exécuter les créations?&nbsp;</p>



<p>Premièrement, <strong>la standardisation et les limitations créatives.</strong> En effet, les modèles prédéfinis de Canva peuvent entraîner une uniformité dans les créations, limitant l’unicité et l’originalité que les professionnel·les peuvent offrir. Deuxièmement, le manque de profondeur fonctionnelle. Canva, bien que puissant pour des tâches simples, ne possède pas les capacités avancées de logiciels comme Adobe Photoshop ou Illustrator, ce qui peut limiter la complexité et la qualité des projets. Et finalement, la valeur perçue. La facilité et le faible coût de Canva peuvent amener certain·es client·es à sous-estimer le travail et les compétences des designers, mettant potentiellement en péril leur revenu.</p>



<p>Ceci étant dit, chez Antistatique, nous avons pris le parti d’exploiter et de considérer l’existence de cette application tout en la renvoyant clairement à sa fonction de base – <strong>un outil.</strong> En effet, ce dernier ne représente pas une menace directe, il change simplement la nature de notre travail. Nous avons donc décidé de nous concentrer sur des projets plus complexes et sur mesure – en combinaison avec d’autres outils de création – qui ne peuvent être produits sur Canva qu’avec la compréhension d’une identité visuelle, ou d’une marque, mettant ainsi en avant notre expertise et notre capacité à répondre à des besoins spécifiques. Une fois les créations réalisées, nous offrons surtout un service de conseil pour aider et accompagner les utilisateur·ices et client·es à améliorer leurs créations – nos créations en vrai – sur Canva.</p>



<p>Nos client·es peuvent donc continuer à éditer et à modifier les designs seul·es après la livraison initiale, ce qui est particulièrement attrayant pour les petites entreprises qui ont besoin de flexibilité et souhaitent limiter leur investissement dans ce type de projets. Et finalement – soyons réalistes – c’est souvent les collaborateur·ices – non designers – qui sont sollicité·es pour faire les déclinaisons et/ou les nouvelles créations. <strong>Est-ce que finalement tout le monde n’y trouverait pas son compte?!</strong> </p>



<p>Canva c’est bien, mais une bonne agence qui l’utilise à bon escient c’est encore mieux.</p>


Canva – un outil qui fait mal aux professionnel·les du monde de la création?


<p>Quelques questions de <a href="https://antistatique.net/blog/11-questions-pour-re-decouvrir-marc">Marc</a> pour découvrir Elliot qui nous a rejoint il y a quelques semaines. Il effectue son CFC d’informaticien en développement (un apprentissage via la fondation <a href="https://jobtrek.ch/" data-type="link" data-id="https://jobtrek.ch/">Jobtrek</a>). Son truc c’est la programmation.</p>



<h2 class="wp-block-heading">Comment as-tu choisi le métier de développeur ?</h2>



<p>Pendant le confinement, j&#8217;avais plus de temps libre. M&#8217;ennuyant un peu durant mes études au gymnase, et voulant faire quelque chose d&#8217;intéressant et lié aux jeux vidéo que je jouais avec mon frère depuis tout petit, j&#8217;ai voulu comprendre comment on crée un jeu. J&#8217;ai alors commencé à développer un jeu en Python grâce à un tutoriel YouTube, qui consistait à détruire des astéroïdes.</p>



<h2 class="wp-block-heading">Un passage par l’école 42, tu veux nous en dire plus ?</h2>



<p>Toujours pendant le confinement, j&#8217;ai envisagé d&#8217;arrêter le gymnase pour me lancer dans une formation en informatique. Un proche m&#8217;a parlé de l&#8217;école 42 à Lausanne, qui allait ouvrir. Gratuite et basée sur l&#8217;auto-apprentissage, sans professeur, l’école existe déjà dans d&#8217;autres pays. Après avoir réussi les tests en ligne, j&#8217;ai été sélectionné pour participer à la &#8220;piscine&#8221;, un mois de formation intensif. J’ai été sélectionné et ensuite j’ai suivi le cursus pendant un an et demi. Ce que j&#8217;ai préféré, c&#8217;était la piscine, car c&#8217;était motivant et passionnant, et j&#8217;y trouvais une véritable finalité. L&#8217;esprit d&#8217;équipe était également extraordinaire.</p>



<h2 class="wp-block-heading">Aujourd’hui tu as choisi de faire un apprentissage, pourquoi avoir changé ?</h2>



<p>J&#8217;ai choisi de faire un apprentissage parce que le diplôme est reconnu, mais ce n&#8217;était pas la première raison. Je cherchais un cadre de travail, je n&#8217;étais pas assez mature pour être suffisamment discipliné. Mon expérience à <a href="https://42lausanne.ch/">l&#8217;école 42</a> m&#8217;a permis de me rendre compte de ce manque. Aujourd&#8217;hui, ces 18 mois ajoutent de la valeur à mon CV. Entre l&#8217;ETML, l’EPSIC et l&#8217;école 42, c&#8217;est très différent, j&#8217;apprécie le fait de pouvoir m&#8217;auto-former, et c&#8217;est parfois mieux qu&#8217;un enseignement plus traditionnel. Le fait de devoir chercher les informations, partir de rien et arriver au produit fini seul est plus proche de la réalité du travail. Aujourd&#8217;hui chez Antistatique, j&#8217;ai la même liberté qu&#8217;à l&#8217;école 42, les défis mais avec le cadre dont j&#8217;avais besoin.</p>



<h2 class="wp-block-heading">Quelque chose que tu aimes faire dans la vie ?</h2>



<p>Ça va faire un peu geek, mais j&#8217;aime vraiment programmer. C&#8217;est l’une des choses qui me fait perdre la notion du temps.</p>



<h2 class="wp-block-heading">Ça fait quelques semaines que tu es arrivé chez Antistatique, qu’est-ce qui t’a le plus surpris et pourquoi ?</h2>



<p>Bonne question 🙂 Plein de choses m&#8217;ont surpris. N&#8217;ayant pas eu de cadre de travail jusque-là, il est difficile de comparer. Mais les rendez-vous d&#8217;équipe comme le Dev coffee, les Team meetings, les Dailys, les Standups sont quelque chose que j&#8217;ai découvert. Je trouve que c&#8217;est bien, cela permet beaucoup de cohésion. Le partage des informations est également important.</p>



<h2 class="wp-block-heading">Quelle est ta vision du web et comment tu imagines y contribuer ?</h2>



<p>J&#8217;ai toujours vu Internet comme un océan. Il y a tellement de choses, mais on ne connaît presque rien. Il y a une profondeur encore inexplorée, comme des étapes auxquelles on accède. Plus on y travaille, plus on découvre. Comment y contribuer ? C&#8217;est une bonne question. En allant chercher là où peu de gens sont allés. J&#8217;aspire à ne pas rester sur les acquis actuels et à motiver les gens à aller chercher plus loin que les premiers résultats.</p>



<h2 class="wp-block-heading">Pourquoi un océan et pas l’espace ?</h2>



<p>Il y a plus de gens qui explorent les océans que l&#8217;espace. On peut aller se baigner pieds-nus. C&#8217;est beaucoup plus accessible.</p>



<h2 class="wp-block-heading">Plutôt plage ou plutôt montagne ?</h2>



<p>Plutôt la plage au bord d&#8217;un lac de montagne 😛</p>



<h2 class="wp-block-heading">L’intelligence artificielle, tu l&#8217;utilises ? Tu vois ça comment ?</h2>



<p>Oui, je l&#8217;utilise. J&#8217;apprends encore à l&#8217;utiliser correctement pour lui faire faire ce dont j&#8217;ai besoin. Les gens ont peur de l&#8217;IA car ils ne comprennent&nbsp; pas comment l&#8217;utiliser ou dans quel but l’utiliser. Plus tard, je pense que ces compétences seront importantes pour automatiser son travail. C&#8217;est important de l&#8217;utiliser et d&#8217;apprendre à l&#8217;utiliser maintenant pour rester compétitif à l&#8217;avenir. Nous l&#8217;utiliserons pour optimiser et améliorer plus que pour nous remplacer complètement. Les promesses des technologies n&#8217;ont jamais été totalement atteintes.</p>



<h2 class="wp-block-heading">Comment se passe une journée type pour toi chez Antistatique ?</h2>



<p>J&#8217;arrive le matin à 8h15. À 8h50, il y a le standup où tout le monde se dit bonjour et nous avons les informations de la journée. Ensuite, c&#8217;est le daily avec l&#8217;équipe dev où nous partageons nos tâches de la journée et les accomplissements de la journée précédente. Puis je fais mes tâches, effectue des reviews de code avec les différents spécialistes. En ce moment, je développe sur l’application Citadel, qui est l’outil de pilotage et de gestion de tous les projets qui sont maintenus par l’agence. Je réalise un système de rappel concernant les projets ou des tâches communes. Je mange à midi et je reprends la suite de mes tâches.</p>



<h2 class="wp-block-heading">Qu’est-ce qui te rend optimiste ?</h2>



<p>Plein de choses, ça dépend des sujets. Dans la vie de tous les jours, j&#8217;essaie de voir le bon côté des choses. Trouver un but dans tout pour avoir une motivation et trouver du sens à mes actions. Se lever le matin en ayant un but, c&#8217;est la meilleure recette.</p>



<h2 class="wp-block-heading">D’ailleurs, quelle est ta meilleure recette ?</h2>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1104" height="714" src="https://content.antistatique.net/app/uploads/2024/06/Screenshot-2024-06-04-at-21.11.25.png" alt="" class="wp-image-14466" title="Source : https://www.saengskitchen.com/laorecipes/laopapayasalad" srcset="https://content-staging.antistatique.net/app/uploads/2024/06/Screenshot-2024-06-04-at-21.11.25.png 1104w, https://content-staging.antistatique.net/app/uploads/2024/06/Screenshot-2024-06-04-at-21.11.25-300x194.png 300w, https://content-staging.antistatique.net/app/uploads/2024/06/Screenshot-2024-06-04-at-21.11.25-768x497.png 768w" sizes="(max-width: 1104px) 100vw, 1104px" /></figure>



<p>Il y a beaucoup de plats que j&#8217;aime faire. Difficile de choisir. Mais récemment, je dirais la salade de Papaye thaï (Som Tam Lao).</p>



<ul>
<li>1 papaye verte</li>



<li>10 piments thaï</li>



<li>6 tomates cerises (coupées en deux)</li>



<li>2 gousses d&#8217;ail</li>



<li>1 citron vert</li>



<li>1 à 2 cuillère à soupe de sauce de poisson</li>



<li>2 à 3 cuillères à soupe de padaek de Luang Prabang (une sauce de poisson fermentée)</li>



<li>1 cuillère à café de sel</li>



<li>1 cuillère à café de sucre</li>
</ul>


12 questions pour Elliot, notre nouvel apprenti !


<p class="is-style-lead">La semaine passée, nous étions à Paris pour cette édition&nbsp;2024 de la SymfonyLive. Très heureux de rencontrer la communauté française de Symfony pour 2&nbsp;jours de conférence 🏰</p>



<p>Au programme cette année, des talks sur des sujets aussi divers que variés :</p>



<ul>
<li>Un Serializer sous stéroïde,</li>



<li>La prochaine révolution est en marche avec Symfony UX</li>



<li>La hantise des Flaky Tests,</li>



<li>Les PHP Attributes,</li>



<li>Piqûre de rappel sur l’importance des Logs,</li>



<li>Du Profiling en veux-tu en voilà,</li>



<li>Les nouveautés Symfony&nbsp;7.1</li>
</ul>



<p><a href="https://live.symfony.com/2024-paris/">Voir le programme complet de la conférence</a></p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="2600" height="2600" src="https://content.antistatique.net/app/uploads/2024/04/1000003799-1-1-2600x2600.jpg" alt="" class="wp-image-14118" srcset="https://content-staging.antistatique.net/app/uploads/2024/04/1000003799-1-1-2600x2600.jpg 2600w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003799-1-1-300x300.jpg 300w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003799-1-1-150x150.jpg 150w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003799-1-1-768x768.jpg 768w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003799-1-1-1536x1536.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003799-1-1-2048x2048.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<h2 class="wp-block-heading">Jour 1</h2>



<p>La conférence a débuté par une présentation de<a href="https://twitter.com/fabpot"> Fabien Potencier</a> qui nous a parlé de<a href="https://github.com/splitsh/lite"> Splitter Git</a> utilisé lors du packaging des releases de Symfony (et ses nombreux composants). Il a ensuite continué avec une présentation du fonctionnement interne de Git, un sujet qui a particulièrement intéressé note Backend développeuse <a href="https://antistatique.net/agence/justine-gasche">Justine</a>, qui en a dédié une section complète, à lire ci-dessous.&nbsp;</p>



<p>Pour la suite de la matinée, approfondissement des architectures découplées et monolithiques avec<a href="https://github.com/dunglas"> Kévin Dunglas</a>. Nous avons fini la matinée avec la présentation de<a href="https://twitter.com/lyrixx"> Grégoire Pineau</a> qui nous rappelle l’importance des Logs et comment mieux travailler avec ceux-ci. Une réelle révélation pour<a href="https://antistatique.net/agence/kevin-wenger"> Kevin</a> qui dédie à son tour un pan de cet article <a href="#kevin-favory" data-type="internal" data-id="#kevin-favory">à découvrir quelques lignes plus bas</a>.</p>



<p>Après cette belle première matinée, nous avons continué notre après-midi en parlant de rôles et permissions avec<a href="https://twitter.com/chalas_r"> Robin Chalas</a>. Nous enchainons avec la présentation de<a href="https://twitter.com/korbeil_"> Baptiste Leduc</a> et<a href="https://twitter.com/matarld"> Mathias Arlaud</a> sur les limites du Serializer Symfony et les peut-être futurs composants le remplaçant. Enfin, on termine cette première journée avec une présentation des VCRs par<a href="https://twitter.com/imenezzine1"> Ezzine Imen</a> et une démonstration des Live Component par<a href="https://twitter.com/simonandre"> Simon André</a>.</p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="2600" height="1462" src="https://content.antistatique.net/app/uploads/2024/04/1000003805-1-2600x1462.jpg" alt="" class="wp-image-14120" srcset="https://content-staging.antistatique.net/app/uploads/2024/04/1000003805-1-2600x1462.jpg 2600w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003805-1-300x169.jpg 300w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003805-1-768x432.jpg 768w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003805-1-1536x864.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003805-1-2048x1152.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<h2 class="wp-block-heading">Jour 2</h2>



<p>Après une bonne nuit de repos, nous commençons par prendre un croissant servi par un robot chat qui se baladait dans le hall. C’est parti pour la 2e&nbsp;journée !</p>



<p><a href="https://connect.symfony.com/profile/nicolas-grekas" target="_blank" rel="noreferrer noopener">Nicolas Grekas</a> a commencé par nous faire une petite introduction sur comment contribuer à Symfony, il nous a ensuite présenté les nouveautés de Symfony&nbsp;7.1.&nbsp;</p>



<p><a rel="noreferrer noopener" href="https://connect.symfony.com/profile/mathdns" target="_blank">Matheo Daninos</a>, est venu nous apprendre à aimer le frontend. Et pour nous, dev backend, ce n’est pas gagné d’avance^^ Grande nouveauté de cette année, il nous a parlé de Symfony UX et comment nous pouvions rendre notre site interactif sans écrire une seule ligne de JavaScript avec des composants Twig et Symfony UX. Si si c’est possible !</p>



<p>Un talk très intéressant de <a href="https://connect.symfony.com/profile/soflesc" target="_blank" rel="noreferrer noopener">Sofia Lescano</a> sur l’instabilité de nos tests et comment ceux-ci nous empêchent de délivrer. Qui n’a jamais relancé un test&nbsp;1x, 2x, 6x jusqu’à ce que ceux-ci passent. Inutile de vous cacher, on vous voit. Ces tests qui fail aléatoirement sont appelés des flacky tests et sont vraiment une plaie dans votre application. Sofia nous a expliqué comment construire des tests pertinents et éviter qu’il devienne flacky. Elle nous a aussi donné des pistes pour les résoudre sans perturber le processus de release de nos app. </p>



<p>Avec l’introduction au Continuous Profiling de <a href="https://connect.symfony.com/profile/thomasdiluccio" target="_blank" rel="noreferrer noopener">Thomas di Luccio</a>, nous avons découvert la notion d’Observability et les services proposés par plateform.sh. Des choses très intéressantes que nous pourrons mettre en place dans nos prochains développements.</p>



<p>Faites plus avec moins de code grâce aux attributs PHP de <a rel="noreferrer noopener" href="https://connect.symfony.com/profile/gromnan" target="_blank">Jérôme Tamarelle</a>. Les attributs, venus avec PHP 8, apportent une nouvelle manière de développer. Jérome nous a présenté les différents attributs de PHP et symfony et comment les utiliser. Un particulièrement intéressant qui devrait arriver dans les prochaines versions de PHP et qui a retenu notre attention est l’attribut <em>#[deprecated]</em>. Cela permettra une bien meilleure intégration à l’avenir.</p>



<h2 class="wp-block-heading">Justine : Git Splitter</h2>



<p><a href="https://twitter.com/fabpot">Fabien Potencier</a> nous a donné une conférence très intéressante sur le Splitter Git et<a href="https://github.com/splitsh/lite"> Splitsh</a>. </p>



<p>En tant que dev, nous utilisons Git tous les jours. Mais est-ce que vous vous êtes déjà intéressé à son fonctionnement interne ? J’ai particulièrement apprécié que Fabien nous explique en détail le fonctionnement de Git et nous montre concrètement la manière dont Git stock nos modifications dans le système de fichier.</p>



<p>Le projet Symfony est structuré sous la forme d’un mono-repo. Pour les personnes qui participent au projet, ça présente l’avantage de simplifier le processus de contribution, les PR, la review, les tests, etc. Les nouvelles personnes peuvent également tout trouver au même endroit et cela facilite l’onboarding si vous souhaitez participer à ce projet open source.&nbsp;</p>



<p>Mais quand vous démarrez votre projet Symfony, vous n’avez pas besoin de l’ensemble des modules développé par la communauté. Vous souhaitez uniquement ceux qui sont pertinents pour votre projet. C’est pour cela que vous installez chacune des dépendances avec composer. Mais comment faire pour publier chacun des modules séparément sur packagist ? Car celui-ci demande un dépôt unique par module.</p>



<p>Et c’est là que <strong>splitsh-lite </strong>intervient ! splitsh-lite est une implémentation plus performante de <strong>git subtree split.&nbsp;</strong></p>



<p><strong>Git subtree</strong> est une extension de Git qui permet d’extraire un sous-répertoire d’un dépôt existant et d’en faire un nouveau dépôt Git indépendant. Lorsqu’on extrait un sous-répertoire, Git conserve l’historique des commits et des branches relatifs à ce sous-répertoire. Cela permet de garder la traçabilité et l’historique du code dans le nouveau dépôt.</p>



<p>Un sujet très dense qui m’a donné envie de creuser le sujet. Et qui nous permettra certainement d’améliorer la gestion de certains de nos projets mono-repo</p>



<h2 class="wp-block-heading" id="kevin-favory">Kevin : Vos logs méritent mieux que la config par défaut</h2>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1200" height="675" src="https://content.antistatique.net/app/uploads/2024/04/GJw8Fu1XIAAQcQH.jpg" alt="" class="wp-image-14122" srcset="https://content-staging.antistatique.net/app/uploads/2024/04/GJw8Fu1XIAAQcQH.jpg 1200w, https://content-staging.antistatique.net/app/uploads/2024/04/GJw8Fu1XIAAQcQH-300x169.jpg 300w, https://content-staging.antistatique.net/app/uploads/2024/04/GJw8Fu1XIAAQcQH-768x432.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure>



<p>Petite pépite de cette édition&nbsp;2024 selon<a href="https://antistatique.net/agence/kevin-wenger"> Kevin</a>, la présentation de<a href="https://twitter.com/lyrixx"> Grégoire Pineau</a> à faire office d’électrochoc sur la manière d’aborder les Logs et l’importance d’implémenter ceux-ci dans toutes applications Symfony.</p>



<p>Que ce soit pour réagir à des comportements erratiques en production ou tout simplement pour garder une trace des bons fonctionnements, les Logs sont essentiels au bon déroulement d’un projet Symfony.&nbsp;</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Une application avec trop de logs, à mon sens ça n’existe pas</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                    <img decoding="async" src="https://content-staging.antistatique.net/app/uploads/2024/03/408368.jpeg" style="height: 80px; width: 80px; border-radius: 50px;" />
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">Grégoire Pineau</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">SymfonyLive 2024</p>
                      </div>
            </div>
</div>



<p>Mais évidemment des logs seuls, ça ne servirait pas à grand-chose. C’est pourquoi Grégoire nous a également sensibilisés à l’importance de gérer ses logs et les notifications de ceux-ci. Il faut impérativement mettre en place une architecture qui permet aux développeurs d’être alertés lorsque des erreurs se produisent, mais également de fournir des outils de visualisation rapide des Logs.</p>



  <a href="https://speakerdeck.com/lyrixx/vos-logs-meritent-mieux-que-la-config-par-defaut" role="button" style="border: 2px solid #FF0099; padding: 5px 20px 5px 20px; border-radius: 50px;"> 📽️  Les Slides </a>



  <a href="https://live.symfony.com/2024-paris/schedule/vos-logs-meritent-mieux-que-la-config-par-defaut" role="button" style="border: 2px solid #FF0099; padding: 5px 20px 5px 20px; border-radius: 50px;">💬  Le Talk</a>



<h2 class="wp-block-heading">Unconference</h2>



<p>Ce qui est bien aussi dans ce type de conférence, c’est la place donnée à des « Lighting Talks » de 10 ou 15&nbsp;min. L’une d’elles a particulièrement retenu notre attention. Il s’agit d’une présentation donnée par <a href="https://twitter.com/lyrixx">Grégoire Pineau</a> et le Task Runner<a href="https://castor.jolicode.com/"> Castor</a>. Projet très intéressant puisque l’écosystème PHP possède désormais un Task Runner à proprement parler.</p>



<h2 class="wp-block-heading">Les à-côtés</h2>



<p>SymfonyLive ce n’est pas qu’une conférence, c’est aussi beaucoup plus ! On gardera longtemps en mémoire :</p>



<ul class="is-style-default">
<li>Le service de haute qualité pendant la conférence (cafés, catering, repas variés)</li>



<li>Une ville magnifique à explorer</li>



<li>La cuisine française, riche, variée et haute en saveurs !</li>
</ul>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped is-style-columns-6-6 wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2600" height="2600" data-id="14126" src="https://content.antistatique.net/app/uploads/2024/04/1000003827-1-2600x2600.jpg" alt="" class="wp-image-14126" srcset="https://content-staging.antistatique.net/app/uploads/2024/04/1000003827-1-2600x2600.jpg 2600w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003827-1-300x300.jpg 300w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003827-1-150x150.jpg 150w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003827-1-768x768.jpg 768w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003827-1-1536x1536.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003827-1-2048x2048.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2600" height="2600" data-id="14130" src="https://content.antistatique.net/app/uploads/2024/04/1000003802-1-2600x2600.jpg" alt="" class="wp-image-14130" srcset="https://content-staging.antistatique.net/app/uploads/2024/04/1000003802-1-2600x2600.jpg 2600w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003802-1-300x300.jpg 300w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003802-1-150x150.jpg 150w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003802-1-768x768.jpg 768w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003802-1-1536x1536.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003802-1-2048x2048.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<figure class="wp-block-image size-large is-style-large"><img decoding="async" loading="lazy" width="2600" height="2600" data-id="14124" src="https://content.antistatique.net/app/uploads/2024/04/1000003831-1-2600x2600.jpg" alt="" class="wp-image-14124" srcset="https://content-staging.antistatique.net/app/uploads/2024/04/1000003831-1-2600x2600.jpg 2600w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003831-1-300x300.jpg 300w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003831-1-150x150.jpg 150w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003831-1-768x768.jpg 768w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003831-1-1536x1536.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003831-1-2048x2048.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="2600" height="2600" data-id="14128" src="https://content.antistatique.net/app/uploads/2024/04/1000003800-1-2600x2600.jpg" alt="" class="wp-image-14128" srcset="https://content-staging.antistatique.net/app/uploads/2024/04/1000003800-1-2600x2600.jpg 2600w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003800-1-300x300.jpg 300w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003800-1-150x150.jpg 150w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003800-1-768x768.jpg 768w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003800-1-1536x1536.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2024/04/1000003800-1-2048x2048.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>
</figure>


SymfonyLive 2024 dans la Ville Lumière


<p>La plupart du temps, les projets commencent de deux manières : soit il s&#8217;agit d&#8217;une refonte et il y a déjà une base existante et peut-être des objectifs définis. Dans l&#8217;autre cas, il y a une idée ou un concept.</p>



<p>Pour chaque projet, notre but est de résoudre un vrai problème. Pour cela, il faut identifier ce qui fait la réussite de celui-ci. Comment se rendre compte qu&#8217;il est réellement utile ?</p>



<p><em>Le pire qui puisse arriver, c&#8217;est qu&#8217;on nous dise que le site mérite juste &#8220;un petit refresh&#8221; ou &#8220;d&#8217;être rajeunit&#8221;</em>.</p>



<p>Non seulement, on doit déterminer <strong>pourquoi</strong> on réalise ce projet : quel problème doit être résolu, <strong>pour qui</strong>, pour quel public, dans quelles conditions d&#8217;utilisation mais aussi <strong>comment déterminer si notre solution fonctionne</strong> ?</p>



<h2 class="wp-block-heading">Comment est-ce qu&#8217;on détermine les objectifs ?</h2>



<p>Avant de commencer à évaluer votre site web ou votre application, il est essentiel de <strong>définir des objectifs spécifiques</strong>. Par exemple, souhaite-on augmenter les ventes en ligne, générer des prospects, améliorer la notoriété de sa marque, fournir des informations aux personnes qui visitent le site, etc. ? </p>



<p>Ces objectifs doivent être spécifiques, mesurables, atteignables, réalistes et temporels, dans la mesure du possible. (<em>L&#8217;acronyme &#8220;SMART&#8221;, ça vous dit quelque chose ?</em>)</p>



<p>On commence donc par définir ces objectifs, puis on conçoit et réalise le projet en fonction de ceux-ci.</p>



<h3 class="wp-block-heading">Un atelier pour définir les indicateurs clé de performance</h3>



<p>En début de projet, nous réunissons les parties prenantes du projet pour un atelier KPI (“<em>Key Performance Indicators</em>”, &#8220;indicateurs clé de performance&#8221; en français).</p>



<p>Effectivement, qui de mieux placer que les client·es pour déterminer ce qui fera que leur projet est une réussite ?</p>



<p>Les besoins des utilisateur·rices finaux·les doivent bien entendu être pris en compte. Et nous le vérifierons tout au long de la conception.</p>



<p>Nous utilisons des post-its ou un outil collaboratif (<em>en ce moment, c&#8217;est Miro qui a notre faveur</em>) et nous listons chacun et chacune les objectifs que nous imaginons.</p>



<p>Très rapidement plusieurs axes se dessinent, par exemple : la notoriété de la marque, le business ou la vente, la communication, etc. Ils permettent de regrouper et de synthétiser les objectifs.</p>



<h3 class="wp-block-heading">Et une fois les objectifs identifiés ? Déterminer les éléments à mesurer</h3>



<p>Il va s&#8217;agir de décider comment mesurer leur réussite. Qu&#8217;est-ce qui permet de déterminer qu&#8217;ils sont atteints ?</p>



<p>Par exemple, si pour un site de vente en ligne, l&#8217;objectif le plus logique est d&#8217;augmenter les ventes, on pourrait imaginer que pour mesurer ceci, on va regarder le nombre de paniers validés ou d&#8217;achats complétés.</p>



<p>Pour un site qui propose des services, on pourrait mesurer la prise de contact : combien de formulaires soumis ou de clics sur l&#8217;adresse email.</p>



<h3 class="wp-block-heading">Se fixer un but à atteindre</h3>



<p>Nous demandons à notre clientèle de définir également un chiffre à atteindre. Par exemple, 10 paniers validés par jour, ou 300 prises de contact par mois. S&#8217;il s&#8217;agit d&#8217;une refonte, ils ont potentiellement leurs chiffres actuels et le but de la refonte est de les dépasser ou de les rendre plus qualitatifs. </p>



<h3 class="wp-block-heading">Comment mesurer ?</h3>



<p>Une fois les objectifs, leurs indicateurs et le seuil à atteindre déterminé, il est nécessaire de choisir un outil pour collecter ses statistiques. Les plus courants étant Matomo et Google Analytics. Nous avons un avis très clair là-dessus et ce sujet mérite un article à lui-seul.</p>



<h2 class="wp-block-heading">En résumé</h2>



<p>Il est primordial de définir des objectifs très tôt dans le projet. Cela permet de vérifier l&#8217;utilité et la réussite du projet. </p>



<p>Ces objectifs sont pris en compte tout au long de la réalisation, au même titre que les besoins des utilisateur·rices.</p>



<p>Identifier les indicateurs de performances permet aussi de mesurer uniquement ce qui est nécessaire pour vérifier l&#8217;utilisabilité du projet et potentiellement l&#8217;améliorer. En faisant cela et en limitant le suivi, nous sommes plus en accord avec notre éthique et le respect de la vie privée des personnes qui vont utiliser nos créations.</p>


Comment savoir si votre site sert à quelque chose ?


<p>Cet article vous explique comment nous envisageons la récolte des statistiques, les outils que nous utilisons et pourquoi.</p>



<h2 class="wp-block-heading">Pourquoi avons-nous besoin de statistiques d’utilisation d’un site internet ?</h2>



<p>La récolte des données sur les visites des utilisateur·trices d’un site internet nous permet d’étudier les visites à travers plusieurs prismes :</p>



<ol>
<li><strong>Les sources du trafic</strong> : par quel moyen les personnes arrivent sur le site (moteurs de recherche, sites référants, publicité, campagne de newsletter, réseaux sociaux).</li>



<li><strong>Les informations sur ces personnes</strong> dans la mesure où l’on peut garantir leur anonymat. Le pays, la ville, le type de navigateur, le type d’appareil, la langue, etc.</li>



<li><strong>Le comportement</strong> : quel chemin les personnes ont pris sur le site, quelles actions elles ont réalisées, sur quelle page elles sont arrivées puis reparties, et combien de temps elles ont passé sur chaque page.</li>
</ol>



<p>Ces données nous permettent, par exemple, d’améliorer la navigation, de prendre de meilleures décisions sur l’agencement des pages d’atterrissage ou encore d’optimiser la façon dont fonctionne le moteur de recherche interne du site.</p>



<h2 class="wp-block-heading">Pourquoi vous parler de ce sujet ?</h2>



<p>Depuis toujours, nous mettons en place des outils d’analyse pour mesurer l’efficacité de notre travail. Nous l’avons toujours fait dans le but de comprendre comment se comporte notre travail une fois publié et pour en améliorer l’expérience. Nous soutenons et respectons les lois sur la protection des données et sommes conscient·es de notre responsabilité en la matière. Ces changements sont l’occasion de remettre en cause les outils et les pratiques.</p>



<h2 class="wp-block-heading">Les Cookies et Leur Origine</h2>



<p>Les cookies sont la pointe de l’iceberg dans ces questions de respect de la vie privée. Le cookie est une fonctionnalité du navigateur. Il permet à un site (celui-ci par exemple) de stocker sur votre navigateur une information (par exemple, que vous souhaitez notre site en français). Nous pouvons définir combien de temps le cookie est valide (par exemple, 3 semaines). Ainsi, pendant les 3 prochaines semaines, toutes les fois que vous chargerez une page de notre site, vous nous enverrez votre langue préférée. Cela nous permet de vous éviter notre site en allemand. Cette technologie a été inventée dans le but de garantir un meilleur respect de la vie privée. Ironique, quand on pense à ce que les cookies sont devenus pour nous aujourd&#8217;hui. Il faut comprendre qu’au moment où ils ont été proposés, d’autres solutions d’identification moins temporaires étaient envisagées. <a href="https://hiddenheroes.netguru.com/lou-montulli">Cet excellent article sur le sujet</a> vous permettra de revenir sur le contexte de l’invention des cookies.</p>



<h2 class="wp-block-heading">Problématique des Cookies Tiers</h2>



<p>Aujourd’hui, le cookie de notre exemple pour stocker la langue préférée n’est pas la raison de la mise en place des bannières de cookies. Ce qui entrave au respect de la vie privée est le fait que l’on vous suive de site en site avec l’aide d’un cookie provenant d’un site tiers, comme par exemple celui de Google Analytics. Google peut ainsi vous identifier et, en analysant votre comportement, peut monétiser vos données en vendant votre profil et vous afficher de la publicité ciblée.</p>



<h2 class="wp-block-heading">Quel Outil Choisir ?</h2>



<p>En tant qu’agence web, nous proposons plusieurs outils de suivi de statistiques web à nos client·es. Cela dépend principalement de leurs besoins. Si par le passé, nous installions directement Google Analytics, cela a bien changé. Voici les étapes pour choisir l’outil :</p>



<ul class="is-style-objectives">
<li>Nous nous concentrons d&#8217;abord sur les KPI (les indicateurs clés de performance) ; l&#8217;outil doit permettre de les mesurer.</li>



<li>Quelle est la priorité au respect de la vie privée pour les utilisateur·trices du site Internet.</li>



<li>Quelle est la priorité à l’impact des performances et de l’expérience globale (bannière de cookie, temps de chargement).</li>



<li>Est-ce que du SEA (Publicité sur les moteurs de recherche) est présent et quel besoin de liaison y a-t-il avec l’outil de statistique.</li>
</ul>



<h2 class="wp-block-heading">Google Analytics, Matomo et Plausible</h2>



<p>Nous travaillons aujourd’hui avec ces trois solutions en fonction des réponses aux points ci-dessus. <a href="https://marketingplatform.google.com/intl/de/about/analytics/">Google Analytics</a> va être préféré si le site est un eCommerce avec des campagnes de publicité et tous les outils de marketing. <a href="https://plausible.io/">Plausible</a> sera choisi pour les sites dont les KPI ne demandent pas une complexité de tracking, sa solution n&#8217;utilise pas de cookies et garantit un meilleur respect de la vie privée. Enfin, <a href="https://matomo.org/">Matomo</a> sera choisi comme alternative aussi complète que Google Analytics, mais garantissant que les données ne seront pas exploitées ailleurs.</p>


Statistiques, Suivi des Visites, Analyses, Cookies et Responsabilité des Données


<p>Chez Antistatique, nous avons rencontré un défi commun à de nombreux projets : la gestion efficace du consentement pour les cookies. Pour y répondre, nous avons développé &#8220;Leckerli&#8221;, une solution unifiée s&#8217;appuyant sur Google Tag Manager. Voici les raisons de ce choix et les avantages de notre approche.</p>



<h2 class="wp-block-heading">Balise Personnalisée avec Google Tag Manager</h2>



<p>Nous avons conçu notre propre balise, entièrement configurable, pour gérer les bannières de consentement. En exploitant la fonctionnalité des &#8220;modèles personnalisés&#8221; dans Google Tag Manager, cette balise offre flexibilité et facilité de partage entre projets. Plus de détails sur les modèles ici : <a href="https://developers.google.com/tag-platform/tag-manager/templates">Google Tag Manager Custom Templates</a>.</p>



<h2 class="wp-block-heading">Paramétrage dans GTM</h2>



<p>Pour chaque balise dans Google Tag Manager, il est essentiel de paramétrer le consentement nécessaire, rendant le processus transparent et intuitif. Voyez comment cela fonctionne ici : <a href="https://support.google.com/tagmanager/answer/10718549?hl=fr#consent-overview">Google Tag Manager Consent Overview</a>.</p>



<h2 class="wp-block-heading">Configuration avancée</h2>



<p>Notre balise est configurable tant au niveau de son contenu que de son fonctionnement. Cela offre la possibilité d&#8217;ajouter des comportements avancés sur votre site via des événements JavaScript prédéfinis. L’objectif est de pouvoir s’adapter à chaque site et de donner la meilleure maîtrise sur le processus de consentement.</p>



<h2 class="wp-block-heading">Un Projet Open Source &#8211; Leckerli Cookie Banner</h2>



<p>Dans un esprit de collaboration et de partage, nous avons décidé de rendre notre balise &#8220;Leckerli Cookie Banner&#8221; accessible à tous. Ce projet est disponible en open source et peut être trouvé sur la Galerie de modèles de la communauté de Google Tag Manager. Pour accéder au code et contribuer, rendez-vous sur <a href="https://github.com/antistatique/leckerli">Leckerli GitHub Repository</a>.</p>



<h2 class="wp-block-heading">Pourquoi Cette Démarche ?</h2>



<p>En nous immergeant dans le Google Consent Mode, nous avons clarifié des questions récurrentes : comment fonctionnent les balises avec consentements intégrés et quand les conditions de consentement sont réévaluées. Grâce à cette exploration, nous bénéficions aujourd&#8217;hui d&#8217;une vision plus claire sur ces sujets.</p>


Leckerli – Notre Solution Open Source pour la Gestion du Consentement


<h2 class="wp-block-heading">Le numérique responsable et la fracture numérique sont des sujets qui nous tiennent particulièrement à cœur. Nous nous efforçons de sensibiliser nos client·es sur ces thèmes et sommes conscients de notre rôle. Cet article vous propose un résumé de cet événement organisé à Genève par les hautes écoles, l&#8217;université, l&#8217;État et la ville de Genève.</h2>



<h2 class="wp-block-heading">Panser et non penser la fracture numérique</h2>



<p>Ce n&#8217;est pas une faute, mais bien un jeu de mots intentionnel de la part des organisateurs et organisatrices de <a href="https://www.ge.ch/evenement/conference-panser-fracture-numerique">cet événement</a>. Il est question de trouver des solutions pour réduire les inégalités face au numérique. Cette table ronde a permis de mettre en commun plusieurs problématiques exacerbant cette fracture. Le <em>digital divide</em> et les problèmes de <em>digital literacy</em> préoccupent effectivement les pouvoirs publics.</p>



<h2 class="wp-block-heading">Une table ronde avec des professeur·es</h2>



<p>Lors de la table ronde, des professeur·es ont échangé sur les défis, les risques, les perspectives et des exemples concrets réalisés pour limiter et réduire la fracture numérique. Il a été question de personnes en réinsertion, en recherche d&#8217;emploi, de places d&#8217;apprentissage, mais également du problème fondamental de genre dans les métiers de l&#8217;IT. De nombreuses discussions ont porté sur l&#8217;intelligence artificielle et comment une avancée technologique peut creuser davantage cette fracture numérique.</p>



<h2 class="wp-block-heading">Intervenant·es et positions importantes</h2>



<p>Le panel des intervenant·es était composé de 4 expert·es du domaine. </p>



<ul>
<li>Noria Foukia &#8211; professeure HES HEPIA, a insisté sur la mécompréhension des compétences techniques des jeunes. Ces derniers possèdent certes d&#8217;importantes compétences intuitives avec les outils techniques, mais manquent souvent de compréhension des fonctionnements sous-jacents et des enjeux associés. </li>



<li>Isabelle Collet &#8211; professeure UNIGE, a abordé le problème systémique de la sur-représentation masculine blanche dans le monde de la tech. </li>



<li>Daniele Beltrametti &#8211; chargé d&#8217;enseignement FAPSE UNIGE, a souligné l&#8217;aggravation de la fracture numérique chez les personnes illettrées. </li>



<li>Jérôme Duberry &#8211; managing director Tech Hub et senior researcher IHEID, a insisté sur le fait que toute technologie est politique et que nous devons absolument réfléchir aux impacts sociétaux, encourageant les jeunes à avoir un impact sur le futur et à s&#8217;exprimer sur le rôle des technologies dans notre société.</li>
</ul>



<h2 class="wp-block-heading">Repenser les espaces pour accéder aux services</h2>



<p>Le numérique est souvent considéré comme un facteur d&#8217;augmentation des disparités, et c&#8217;est malheureusement bien le cas. La transformation numérique, opposée aux services physiques, est une réalité aujourd&#8217;hui. Toutefois, un accompagnement adéquat ne devrait jamais être remis en question. Si une ville gère déjà toutes ses données et démarches de manière numérique, elle a et aura toujours le devoir de rester accessible à toute la population. Ainsi, les services doivent être proposés via un·e employé·e au guichet ou dans un espace qui n&#8217;est ni stigmatisant ni décourageant, pour toutes les personnes qui n&#8217;ont pas les capacités ou l&#8217;envie de passer par une plateforme self-service en ligne.</p>



<h2 class="wp-block-heading">Et pour Antistatique, cela signifie quoi ?</h2>



<p>Depuis nos débuts, nous concevons des interfaces qui simplifient la vie des utilisateurs. Nous créons des outils qui améliorent la communication. La fracture numérique est toujours présente dans nos esprits lors de la conception et du développement de nos projets. Nous pensons à l&#8217;accessibilité, à l&#8217;utilisabilité et à la simplification des interfaces. Cependant, nous pouvons encore nous améliorer dans l&#8217;accompagnement de nos client·es pour sensibiliser et prendre en compte toutes ces personnes.</p>


Journée du numérique responsable – Table ronde pour clôturer la journée : Panser la fracture numérique


<p>Quelques mois après la <a href="https://antistatique.net/projets/cinematheque-suisse">refonte du site web</a> de la <strong>Cinémathèque suisse</strong>, notre équipe de designers UX s’est fait une joie de réaliser des tests d’utilisabilité en vue de peaufiner ce site web qui attire en moyenne <strong>800 visiteur·x·euses par jour</strong> !</p>



<p>Pour rappel, la Cinémathèque suisse préserve le patrimoine cinématographique et audiovisuel suisse et international. Elle le <strong>valorisation au quotidien</strong>, notamment avec des projections publiques destinées à toutes les personnes qui s’intéressent de près ou de loin au 7ᵉ art.</p>



<p></p>



<h2 class="wp-block-heading">Un test d’utilisabilité, qu’est-ce que c’est au juste ?</h2>



<p>Un <strong>test d’utilisabilité</strong>, c’est ce qui est plus communément appelé <em><a href="https://antistatique.net/blog/les-tests-utilisateurs">user test</a> </em>en anglais ou même test utilisateur·trice. Cette formulation encore peu répandue a le mérite d’être un <strong>terme épicène</strong>, c’est-à-dire sans connotation de genre. Un test d’utilisabilité consiste à <strong>interviewer et observer</strong> individuellement des personnes en train d’utiliser un produit ou un service. Par exemple : un site Internet, un logiciel ou une application mobile. C’est en comprenant comment ces personnes interagissent avec une interface que des difficultés d’utilisation peuvent être relevées. Les informations récoltées sont ensuite synthétisées, et des <strong>recommandations</strong> sont formulées dans le but de proposer des améliorations.</p>



<p></p>



<h2 class="wp-block-heading">Qu’est-ce que ça t’évoque, la Cinémathèque suisse ?</h2>



<p>Certaines personnes interviewées ont spontanément fait par de leur <strong>enthousiasme</strong> vis-à-vis de la Cinémathèque suisse, car elles connaissaient déjà l’institution. D’autres n’en avaient pas entendu parler jusqu’à ce jour, et ont découvert l’étendue et la variété des collections préservées. Dans tous les cas, son <strong>utilité publique</strong> a été mentionnée.</p>



<p></p>



<h2 class="wp-block-heading">Qu’as-tu vu sur ce site web ?</h2>



<h3 class="wp-block-heading">De l’interactivité en toute fluidité</h3>



<p>La <strong>galerie d’images dynamique</strong> a été très appréciée. En cliquant sur le groupement d’images présenté de manière compacte, une galerie complète s’ouvre avec fluidité. Les photographies sont alors visibles pour les personnes désirant les parcourir dans leur ensemble. Chaque image peut être visualisée individuellement et agrandie en pleine page pour plus de détails.</p>



<p>L’interaction avec la galerie d’images permet de découvrir 3 états d’information complémentaires :</p>



<ul>
<li>un format compact précisant le nombre total d’images, avec une animation au survol du groupe de photos</li>



<li>un aperçu pour la découverte respectant les différents formats des illustrations</li>



<li>une visualisation détaillée avec une navigation double pour une recherche précise</li>
</ul>



<p>Son aspect <strong>élégant, pratique et original</strong> a été souligné. Voilà <a href="https://www.cinematheque.ch/actualites/toutes-les-actualites/soiree-travelling-adventures-priscilla-queen-desert-de-stephan">un exemple d’actualité</a> qui intègre à merveille cette fonctionnalité de galerie dynamique.</p>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1102" height="789" src="https://content.antistatique.net/app/uploads/2023/10/cinematheque-suisse-actualites-galerie-images.png" alt="" class="wp-image-13132" srcset="https://content-staging.antistatique.net/app/uploads/2023/10/cinematheque-suisse-actualites-galerie-images.png 1102w, https://content-staging.antistatique.net/app/uploads/2023/10/cinematheque-suisse-actualites-galerie-images-300x215.png 300w, https://content-staging.antistatique.net/app/uploads/2023/10/cinematheque-suisse-actualites-galerie-images-768x550.png 768w" sizes="(max-width: 1102px) 100vw, 1102px" /><figcaption class="wp-element-caption">Retour en images sur un <em>afterwork</em> queer et une représentation de <em>drags queens</em> avant la projection du film culte <em>The Adventures of Priscilla, Queen of the Desert</em>&nbsp;de Stephan Elliott (1994) à la salle Paderewski de Lausanne. <a href="https://www.cinematheque.ch/actualites/toutes-les-actualites/soiree-travelling-adventures-priscilla-queen-desert-de-stephan">Lien vers l’actualité mentionnée</a>.</figcaption></figure>



<h3 class="wp-block-heading">Des informations inédites qui retiennent l’attention</h3>



<p>Les personnes présentes lors des tests ont systématiquement parcouru les informations sous forme de <strong>chiffres clefs</strong> lorsqu’elles apparaissaient sur les pages. Dans un laps de temps très bref et avec un minimum d’effort de lecture, un contexte peut être saisi d’un <strong>simple scan visuel</strong>. Ces données brutes ont été <strong>fortement</strong> <strong>appréciées</strong> car elles présentent des faits précis, instructifs et mémorables.</p>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="817" height="430" src="https://content.antistatique.net/app/uploads/2023/10/cinematheque-suisse-accueil-chiffres-clefs.png" alt="" class="wp-image-13134" srcset="https://content-staging.antistatique.net/app/uploads/2023/10/cinematheque-suisse-accueil-chiffres-clefs.png 817w, https://content-staging.antistatique.net/app/uploads/2023/10/cinematheque-suisse-accueil-chiffres-clefs-300x158.png 300w, https://content-staging.antistatique.net/app/uploads/2023/10/cinematheque-suisse-accueil-chiffres-clefs-768x404.png 768w" sizes="(max-width: 817px) 100vw, 817px" /><figcaption class="wp-element-caption">Les personnes présentes lors des tests ont systématiquement parcouru les informations sous forme de <strong>chiffres clefs</strong> lorsqu’elles apparaissaient sur les pages. Dans un laps de temps très bref et avec un minimum d’effort de lecture, un contexte peut être saisi d’un <strong>simple scan visuel</strong>. Ces données brutes ont été <strong>fortement appréciées</strong> car elles présentent des faits précis, instructifs et mémorables.</figcaption></figure>



<h3 class="wp-block-heading">Un système de liaisons pointu</h3>



<p>La Cinémathèque suisse propose un <strong>riche programme</strong> minutieusement travaillé et réfléchi, semaine après semaine. Ce programme se compose d’actualités, d’événements, de projections et de cycles de films. Ces 4 éléments sont interreliés entre eux par des <strong>chemins de navigation prédéfinis</strong>. Pour bien comprendre de quoi il s’agit, voilà un aperçu de la structure existante :</p>



<ul>
<li>Une actualité est liée à une catégorie : collaborations, expositions, objets, événements, etc.</li>



<li>Une actualité paraît généralement lorsqu’un événement a lieu</li>



<li>Des événements tels que des avant-premières ou des événements spéciaux peuvent avoir lieu lors de projections</li>



<li>Les projections sont des diffusions de films dans les salles de cinéma de la Cinémathèque suisse</li>



<li>Les cycles permettent de grouper plusieurs projections d’une même thématique</li>
</ul>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="894" height="317" src="https://content.antistatique.net/app/uploads/2023/10/projections-cycles.jpg" alt="" class="wp-image-13136" srcset="https://content-staging.antistatique.net/app/uploads/2023/10/projections-cycles.jpg 894w, https://content-staging.antistatique.net/app/uploads/2023/10/projections-cycles-300x106.jpg 300w, https://content-staging.antistatique.net/app/uploads/2023/10/projections-cycles-768x272.jpg 768w" sizes="(max-width: 894px) 100vw, 894px" /><figcaption class="wp-element-caption">Les cycles de projections permettent de grouper plusieurs films d’une même thématique.</figcaption></figure>



<p>L’utilisation de ce système de liaisons a été questionné et vérifié. Les participant·es du test n’ont rencontré aucun point bloquant. Par contre, <strong>un point de friction</strong> a été décelé. Un point de friction est une situation &#8211; ou une action &#8211; qui se transforme en obstacle lors de l’interaction avec l’interface. L&#8217;utilisation d’une des 4 catégories &#8211; actualités, événements, projections et cycles de films &#8211; pour aller en explorer une autre n’a que rarement eu lieu. </p>



<p>Fluidifier la jonction de ces différentes catégories permettraient aux utilisateur·x·trices de bénéficier d’une expérience enrichie. Ce constat UX souligne que chaque élément d’une interface ainsi que son utilisation doit être parlant. D’autant plus s’il est <strong>spécifique à l’offre proposée</strong> et que l’utilisation de l’interface diffère des <strong>standards existants</strong>.</p>



<h2 class="wp-block-heading">Un secret révélé en guise de conclusion</h2>



<p>Faire tester les interfaces numériques permet de répondre au mieux aux <strong>besoins et aux attentes des utilisateur·x·trices</strong>. Qu’il s’agisse d’une refonte ou de la création d’une nouvelle plateforme : <strong>tester, tester, et encore tester</strong>. Voilà un des secrets révélé pour des interfaces efficaces et réussies !</p>


(Re)découvrir la Cinémathèque suisse avec le test d’utilisabilité


<h2 class="wp-block-heading">Marc fait partie des 3 fondateurs d&#8217;Antistatique. Vous le connaissez sûrement déjà. Mais  re-découvrez le avec les questions pertinentes de <a href="https://antistatique.net/blog/10-questions-pour-decouvrir-laurent" data-type="link" data-id="https://antistatique.net/blog/10-questions-pour-decouvrir-laurent">Laurent</a></h2>



<p class="is-style-lead">Si tu ne devais manger qu’une seule chose pour le restant de ta vie ça serait quoi?</p>



<p>Ce serait beaucoup trop triste de ne pas pouvoir continuer à explorer toutes les richesses de la gastronomie. Elle est tellement riche, tellement extraordinaire. Je vis pour manger, je ne mange pas pour vivre. Si je devais choisir une seule chose, alors ce serait le jeûne.</p>



<p class="is-style-lead">Est-ce que tu es engagé vis-à-vis de la crise climatique, est-ce que tu te sens concerné et si oui quel est ton engagement?</p>



<p>Mon engagement est encore trop timide. J’ai passé beaucoup de temps à me documenter, j’en passe encore beaucoup à comprendre comment on en est arrivé là. Aujourd’hui je suis plus actif politiquement. Je me sens absolument concerné, nous le sommes tous et toutes. Nous le sommes encore plus en faisant partie des pays les plus responsables des émissions. Avoir un enfant me rend d&#8217;autant plus conscient de la responsabilité <a href="https://interaction18.ixda.org/program/keynote--alan-cooper/">d&#8217;être un meilleur ancêtre</a>.  </p>



<p class="is-style-lead">Tu aimes toujours ton métier depuis toutes ces années?</p>



<p>Mon métier a changé tous les 2-3 ans depuis que nous avons commencé l’aventure Antistatique. Ce changement est une dimension de mon métier que j’aime particulièrement. </p>



<p>Ma passion c’est le partage des connaissances et la puissance supplémentaire qu’apporte le web. La simplicité de son concept permettant de se téléporter d’une page à l’autre. </p>



<p>Au final, mon métier c’est d’enrichir le web avec plus de sites internet de qualité. Soit en conception, soit en design, soit en développant, soit en imaginant, soit en conduisant une équipe ou soit encore en enseignant. Donc oui, j’aime toujours mon métier et je continue à trouver le web fascinant. J’en ai même dédié un talk au webmardi il y a quelques années (<a href="https://zufrieden.io/writing/a-love-letter-to-the-web/">version texte</a> et <a href="https://www.youtube.com/embed/IIBVvtNwkcY">version vidéo</a>).</p>



<p class="is-style-lead">Comment imagines-tu l’évolution de ce dernier dans le futur?</p>



<p>Je pense que beaucoup de choses vont changer. J’espère que le changement va nous amener vers une rationalisation et un vrai questionnement de l’avancée technologique. L’évolution <a href="https://www.vox.com/the-highlight/2019/10/1/20887003/tech-technology-evolution-natural-inevitable-ethics">n’est pas synonyme de progrès</a>. J’imagine aussi que l’on va réellement se recentrer sur les besoins des utilisateur·trices et moins sur ceux de la technique. J’imagine une totale prise de conscience des enjeux climatiques avec un web plus léger et plus orienté vers l’essentiel. J’imagine l’intelligence artificielle réglementée et avec un coût qui correspond à la réalité de ses impacts. J’imagine aussi une meilleure accessibilité, inclusivité et une réduction de la fracture numérique.</p>



<p>Mais cette évolution ne se fera pas toute seule. Nous devons y travailler. Il y a cette phrase de Zeynep Tüfekçi qui m&#8217;inspire “Si nous avons un bien commun aussi précieux, il faut le défendre, sinon nous allons le perdre”.</p>



<p>L’évolution de notre domaine amène déjà des changements fondamentaux dans mon métier. Finalement, les outils n’évoluent pas aussi vite qu’on ne le pense. Et l’important c’est la recherche du sens et l’utilité de notre mission sinon tout s&#8217;écroule.</p>



<p class="is-style-lead">Tu vas faire quoi quand on arrivera au crash du numérique, si on y arrive :)?</p>



<p>Je pense qu&#8217;on peut encore l&#8217;éviter. Je ne sais pas ce que je ferai, mais le partage des connaissances continuera à être clé dans notre survie. Dans un effondrement de notre société moderne, je garderai mes valeurs d’entraide et essayerai de rejoindre une communauté. Se rapprocher de la nature ne m’a jamais fait de mal et j&#8217;apprécie la <a href="https://solar.lowtechmagazine.com/">low tech</a> et éplucher les couches d&#8217;abstraction.</p>



<p class="is-style-lead">Si tu étais un personnage de fictif tu serais qui?</p>


<div class="wp-block-image float-left">
<figure class="alignright size-medium"><img decoding="async" loading="lazy" width="300" height="225" src="https://content.antistatique.net/app/uploads/2023/12/Nuuskamuikkunen-002-300x225.webp" alt="" class="wp-image-13254" style="aspect-ratio:1;object-fit:cover" srcset="https://content-staging.antistatique.net/app/uploads/2023/12/Nuuskamuikkunen-002-300x225.webp 300w, https://content-staging.antistatique.net/app/uploads/2023/12/Nuuskamuikkunen-002.webp 736w" sizes="(max-width: 300px) 100vw, 300px" /></figure></div>


<p>Si j’étais un personnage fictif, j’aimerai être Nuuskamuikkunen. C’est le garçon avec le chapeau vert et son harmonica dans les livres de Moomin. J’en suis très loin, mais c’est un esprit tellement libre qu’il m’inspire. C’est un personnage très finlandais qui représente le courage et la sagesse. Une incarnation de la ténacité, la résilience, la lucidité et la rationalité que les finlandais appelle &#8220;<a href="https://en.wikipedia.org/wiki/Sisu">Sisu</a>&#8220;. Encore un mot qui ne trouve pas de traduction dans les autres langues mais qui gagne à être connu.</p>



<p class="is-style-lead">Quel est ton plus beau souvenir d’enfance?</p>



<figure class="wp-block-image size-full is-style-large"><img decoding="async" loading="lazy" width="1457" height="1655" src="https://content.antistatique.net/app/uploads/2023/12/marc-dans_le_bain_86.jpg" alt="" class="wp-image-13279" srcset="https://content-staging.antistatique.net/app/uploads/2023/12/marc-dans_le_bain_86.jpg 1457w, https://content-staging.antistatique.net/app/uploads/2023/12/marc-dans_le_bain_86-264x300.jpg 264w, https://content-staging.antistatique.net/app/uploads/2023/12/marc-dans_le_bain_86-768x872.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/12/marc-dans_le_bain_86-1352x1536.jpg 1352w" sizes="(max-width: 1457px) 100vw, 1457px" /></figure>



<p>J’ai l’immense chance d’avoir eu une enfance formidable, je n’ai que des bons souvenirs. J&#8217;ai beaucoup voyagé dans le monde tout en étant bien intégré dans une vie de village riche en partage. En plus, mon papa est un grand amateur de film. Avec sa caméra Super8, il a filmé toute notre enfance. Je peux bien m’imaginer ce que les générations actuelles (filmé par les smartphones) vivrons plus tard en visionnant les vidéo de leurs premières années. Chacun de mes souvenirs sont liés à ses films qui les rendent encore plus vrais. Comme par exemple, <a href="https://notrehistoire.ch/entries/0wBe7KarWmZ">mon premier jour d&#8217;école</a> et surtout <a href="https://notrehistoire.ch/entries/xwB6L4ZzW21">mes premières échappées à vélo</a> comme ci-dessous sur l&#8217;autoroute.<br></p>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="770" height="494" src="https://content.antistatique.net/app/uploads/2023/12/3lcBdvr9kJ2ejX71wsPUWnmp00ijRNSBAgMy9eyZ.jpeg" alt="Marc petit, à vélo sur l'autoroute encore en construction" class="wp-image-13252" srcset="https://content-staging.antistatique.net/app/uploads/2023/12/3lcBdvr9kJ2ejX71wsPUWnmp00ijRNSBAgMy9eyZ.jpeg 770w, https://content-staging.antistatique.net/app/uploads/2023/12/3lcBdvr9kJ2ejX71wsPUWnmp00ijRNSBAgMy9eyZ-300x192.jpeg 300w, https://content-staging.antistatique.net/app/uploads/2023/12/3lcBdvr9kJ2ejX71wsPUWnmp00ijRNSBAgMy9eyZ-768x493.jpeg 768w" sizes="(max-width: 770px) 100vw, 770px" /></figure>



<p class="is-style-lead">Voiture ou vélo?</p>



<p>Vélo, sans aucune hésitation. Je l’utilise quotidiennement avec beaucoup de joie. Et pour aller plus loin, le train évidemment !</p>



<p class="is-style-lead">Est-ce que tu es mauvais perdant?</p>



<p>Je suis un très bon perdant. Par contre, le jeu c’est sérieux. Je ne supporte pas que l’on triche ou que l’on ne prenne pas les règles au sérieux.</p>



<p class="is-style-lead">C’est quoi ton plaisir coupable musical?</p>



<p>La musique n&#8217;est jamais un plaisir coupable, je peux écouter la musique électronique (celle de <a href="https://open.spotify.com/artist/3tSvlEzeDnVbQJBTkIA6nO?si=870a6d08a33340d6">Christian Löffler</a> par exemple) pendant des heures sans me lasser. J’écoute aussi beaucoup de musique blues-folk (celle de <a href="https://open.spotify.com/track/6QXtKi4TVe1458QNodE3cs?si=72ed3d6c47df419d">Townes Van Zandt</a> par exemple), c’est peut être celui-là mon plaisir coupable, j&#8217;ai l&#8217;impression de m&#8217;échapper dans des paysages immenses et majestueux.</p>



<figure class="wp-block-image size-large is-style-large"><img decoding="async" loading="lazy" width="2600" height="2600" src="https://content.antistatique.net/app/uploads/2023/12/IMG_1683-2600x2600.jpg" alt="" class="wp-image-13276" srcset="https://content-staging.antistatique.net/app/uploads/2023/12/IMG_1683-2600x2600.jpg 2600w, https://content-staging.antistatique.net/app/uploads/2023/12/IMG_1683-300x300.jpg 300w, https://content-staging.antistatique.net/app/uploads/2023/12/IMG_1683-150x150.jpg 150w, https://content-staging.antistatique.net/app/uploads/2023/12/IMG_1683-768x768.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/12/IMG_1683-1536x1536.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2023/12/IMG_1683-2048x2048.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<p class="is-style-lead">Est-ce que tu utilises toujours le même mot de passe partout?</p>



<p>Je ne peux pas répondre à cette question pour des raisons évidentes de sécurité. Mais j’utilise des gestionnaires de mot de passe depuis 2005 et vous devriez tous et toutes en faire autant.</p>



<p class="is-style-lead">T’as l’impression d’être un bon patron?</p>



<p>Si je répondais oui, ce ne serait pas le cas. Je n’aime déjà pas ce terme, je le range avec <a href="https://antistatique.net/blog/nappelez-pas-les-gens-des-ressources">le mot ressources</a>. Pour moi, le rôle de direction c’est avant tout de tout faire pour que toutes les personnes dans l’organisation se sentent bien et aient tout ce dont elles ont besoin pour comprendre et accomplir leurs missions. Voilà une phrase avec beaucoup de “tout”. </p>



<p>Dans tout les cas, je suis encore loin d’être un patron et ce n’est pas un objectif pour moi. En revanche, j’espère devenir meilleur.</p>


11 questions pour re-découvrir Marc


<p class="is-style-lead">Face au défi constant de surveiller la santé et la disponibilité de nos sites et applications web, notre agence a dû trouver une solution efficace. La diversité et l&#8217;ampleur de notre &#8216;parc&#8217; de sites nous ont poussés à chercher une méthode systématique pour surveiller leur état, que ce soit pour un site Drupal en maintenance active ou pour un site statique plus ancien nécessitant peu de maintenance.</p>



<p>Il existe un multitude d&#8217;outil de monitoring de site web. Nous avons établi nos critères de sélection pour le parfait outil de monitoring :</p>



<ol>
<li>Abordable avec un modèle de prix non exponentiel, adapté à la surveillance de plus de 100 sites.</li>



<li>Capacité à monitorer HTTP / HTTPS, incluant l&#8217;envoi de headers personnalisés.</li>



<li>Simplicité d&#8217;utilisation et efficacité.</li>



<li>Disponibilité d&#8217;une API pour des besoins futurs.</li>
</ol>



<p>Notre choix s&#8217;est porté sur <strong>Updown.io</strong>, qui a excellemment répondu à nos attentes après un an d&#8217;utilisation.</p>



<p>Créé en 2012 par <a href="https://twitter.com/adrienjarthon" data-type="link" data-id="https://twitter.com/adrienjarthon">Adrien Rey-Jarthon</a> à Paris, France, comme un side-project, cela a immédiatement suscité l&#8217;intérêt de Gilles. Nous apprécions les side-projects!</p>



<p>Le modèle de prix basé sur des crédits (1 crédit = 1 requête) nous a séduits. Cela nous permet de surveiller un grand nombre de sites tout en respectant notre budget. Nous avons également réalisé que des alertes minutieuses n&#8217;étaient pas nécessaires pour tous nos projets. Certains sont vérifiés toutes les heures, tandis que pour d&#8217;autres, un intervalle de 10 minutes est suffisant.</p>



<p>L&#8217;interface utilisateur d&#8217;Updown.io est un modèle de simplicité et d&#8217;efficacité.</p>



<p></p>



<p>👉 Découvrez <a href="https://updown.io/r/5oNNY">Updown.io</a> (via notre lien referral, vous avez 100K crédits d&#8217;offert; nous aussi).</p>



<h2 class="wp-block-heading">Page de Health checks</h2>



<p>Vous pouvez très bien surveiller la page d&#8217;accueil ou un autre page clé de votre site web, mais il serait idéal que chaque application/site web possède une URL dédiée pour les &#8216;health checks&#8217;, permettant de tester la fonctionnalité globale de l&#8217;application (base de données, service d&#8217;indexation, workers, etc.).</p>



<h2 class="wp-block-heading">Alternative gratuite: Upptime</h2>



<p>Une alternative découverte plus tard est le projet <a href="https://upptime.js.org/">Upptime</a>. L&#8217;idée est ingénieuse et se repose uniquement sur les Github Actions, les Github Pages et les Github Issues pour la gestion des incidents et alertes. Rien que pour cette idée, cela vaut le détour</p>



<h2 class="wp-block-heading">Surveillance des tâches récurrentes :</h2>



<p>Nous envisageons d&#8217;améliorer la surveillance de nos tâches programmées ou récurrentes (cronjobs). Nous évaluons actuellement le projet open source <a href="https://github.com/healthchecks/healthchecks">Healthchecks</a>, en alternative à des services comme <a href="https://ohdear.app/">Oh Dear</a>, trop onéreux pour une utilisation étendue</p>



<p></p>



<p><br>En conclusion, les solutions les plus simples sont souvent les meilleures. Un monitoring constant à la seconde près n&#8217;est pas toujours nécessaire. Centraliser notre monitoring nous a permis de gagner en efficacité et en tranquillité d&#8217;esprit.</p>



<p></p>



<p></p>



<p><em>Vous souhaitez réagir ou laisser un commentaire ? <a href="https://www.linkedin.com/feed/update/urn:li:activity:7135172370062823424" data-type="link" data-id="https://www.linkedin.com/feed/update/urn:li:activity:7135172370062823424">Faites le sous le post LinkedIn</a>.</em></p>


Quel outil pour le monitoring de vos sites web?


<p>Dans ce vaste monde du web, chaque interaction, que ce soit l&#8217;ouverture d&#8217;une page web, la soumission d&#8217;un formulaire ou le visionnage d&#8217;une vidéo, tout repose sur un protocole appelé HTTP (HyperText Transfer Protocol). Dans cet article je vais partager les bases qui selon moi sont importantes à connaître pour une ou un développeur frontend.</p>



<p>Le rôle de HTTP est d&#8217;agir comme le messager entre <strong>le client</strong> (le navigateur de l&#8217;utilisateur) et <strong>le serveur</strong>.</p>



<p>Lorsque vous saisissez une URL ou cliquez simplement sur un lien, vous envoyez une requête HTTP. Le serveur reconnaît (ou non) la demande et renvoie une réponse avec le contenu que vous avez demandé.</p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1475" height="622" src="https://content.antistatique.net/app/uploads/2023/11/http-request.webp" alt="" class="wp-image-13187" srcset="https://content-staging.antistatique.net/app/uploads/2023/11/http-request.webp 1475w, https://content-staging.antistatique.net/app/uploads/2023/11/http-request-300x127.webp 300w, https://content-staging.antistatique.net/app/uploads/2023/11/http-request-768x324.webp 768w" sizes="(max-width: 1475px) 100vw, 1475px" /></figure>



<p>On pourrait faire une analogie avec par exemple un restaurant. Vous (le navigateur / client) passez votre commande (requete HTTP). La commande est emmenée à la cuisine (le serveur web), la commande est ensuite préparée et vous est ramenée (réponse HTTP).</p>



<h2 class="wp-block-heading"><strong>Pourquoi est-il important pour un développeur frontend de comprendre le protocole HTTP ?</strong></h2>



<p>En tant que développeur frontend, vous devez fréquemment interagir avec les services provenant du backend. Le fait de connaître le protocole HTTP va vous permettre de communiquer efficacement avec ces services afin de traiter des données de la manière la plus optimale pour votre site.</p>



<p>Vous avez probablement déjà entendu le terme CORS, ou bien vous vous êtes déjà pris une erreur 404. C’est dans ce genre de cas ou des connaissances du protocole HTTP vous aides a comprendre ce qui vous arrive.</p>



<p>Ça pourra aussi éveiller votre curiosité et vous permettre de développer des compétences pour utiliser des techniques comme le lazy loading, le caching, etc. Tout ça pour offrir de meilleures performances à vos utilisateurs.</p>



<h2 class="wp-block-heading">Au-delà de GET et POST</h2>



<p>Les verbes HTTP, souvent appelés méthodes HTTP, définissent l&#8217;action que nous avons l&#8217;intention d&#8217;effectuer sur une ressource donnée.</p>



<p>Ces méthodes offrent bien plus que la simple capacité de récupérer des pages web avec <strong><code>GET</code></strong> ou de soumettre des données avec <strong><code>POST</code>.</strong></p>



<p>Voici des méthodes qui pourraient vous être utiles (continuons avec des analogies culinaires) :</p>



<h3 class="wp-block-heading"><strong>GET</strong></h3>



<ul>
<li><strong>Analogie</strong> : Prendre le lait du frigo.</li>



<li><strong>Cas concret</strong> : Récupérer des données. Lorsque vous chargez une page web, votre navigateur utilise une requête <strong><code>GET</code></strong> pour récupérer le contenu.</li>
</ul>



<h3 class="wp-block-heading"><strong>POST</strong></h3>



<ul>
<li><strong>Analogie</strong> : Ajouter une nouvelle bouteille de soda dans votre frigo.</li>



<li><strong>Cas concret</strong> : Soumettre des données. Lorsque vous remplissez un formulaire d&#8217;inscription sur un site web, les données que vous saisissez sont envoyées au serveur à l&#8217;aide d&#8217;une requête <strong><code>POST</code></strong>.</li>
</ul>



<h3 class="wp-block-heading"><strong>PUT</strong></h3>



<ul>
<li><strong>Analogie</strong> : Remplacer votre mayonnaise périmée par un nouveau tube tout frais.</li>



<li><strong>Cas concret</strong> : Mettre à jour des données existantes ou les créer si elles n&#8217;existent pas. Si un utilisateur souhaite mettre à jour les informations de son profil, une application frontend pourrait utiliser une requête <strong><code>PUT</code></strong>.</li>
</ul>



<h3 class="wp-block-heading"><strong>PATCH</strong></h3>



<ul>
<li><strong>Analogie</strong> : Ajouter une tranche supplémentaire de fromage dans votre sandwich.</li>



<li><strong>Cas concret</strong> : Mettre à jour partiellement une ressource. Par exemple, si un utilisateur souhaite changer uniquement son adresse e-mail sur un profil, <strong><code>PATCH</code></strong> le permet sans affecter les autres données.</li>
</ul>



<h3 class="wp-block-heading"><strong>DELETE</strong></h3>



<ul>
<li><strong>Analogie</strong> : Composter votre salade toute fanée.</li>



<li><strong>Cas concret</strong> : Supprimer une ressource. Si un utilisateur décide de supprimer son compte, une requête <strong><code>DELETE</code></strong> serait initiée.</li>
</ul>



<p>Vous pouvez trouver la liste complète un peut partout en ligne, par exemple <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">sur la doc de mozilla</a>.</p>



<p>ㅤ</p>



<p>Utiliser uniquement <strong><code>GET</code></strong> et <strong><code>POST</code></strong> peut entraîner des transferts de données inutiles, menant à des applications moins rapides. En revanche, l&#8217;utilisation appropriée de verbes tels que <strong><code>PATCH</code></strong> peut optimiser le transfert de données, économisant ainsi du temps et de la bande passante, ce qui est un vrai point positif pour une optique durable du développement.</p>



<h2 class="wp-block-heading"><strong>418 je suis une théière</strong></h2>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="750" height="600" src="https://content.antistatique.net/app/uploads/2023/11/418.jpg" alt="" class="wp-image-13189" srcset="https://content-staging.antistatique.net/app/uploads/2023/11/418.jpg 750w, https://content-staging.antistatique.net/app/uploads/2023/11/418-300x240.jpg 300w" sizes="(max-width: 750px) 100vw, 750px" /></figure>



<p>Il est bon de savoir ce qu&#8217;est un <code>Status Code</code>, ou en tout cas ce que représente les différentes catégories de ces statuts. Cela facilitera le débuging et pourra par conséquent vous éviter des migraines aiguës.</p>



<p>Les statuts HTTP sont regroupés en cinq catégories représentées par le premier chiffre du code. Chaque catégorie indique le résultat général de la demande. Si vous aimez les chats, n’hésitez pas à visiter <a href="https://http.cat/">https://http.cat/</a> pour des exemples bien sympas.</p>



<ol>
<li><strong><code>1xx</code> (Informatif)</strong> : Ces codes indiquent généralement une réponse provisoire. La réponse finale réelle suivra la réponse informative.</li>



<li><strong><code>2xx</code> (Réussite)</strong> : Cette catégorie indique que la demande du client a été reçue, comprise et acceptée avec succès.</li>



<li><strong><code>3xx</code> (Redirection)</strong> : Ces codes indiquent qu&#8217;une action supplémentaire est nécessaire pour compléter la demande, souvent sous la forme d&#8217;une redirection.</li>



<li><strong><code>4xx</code> (Erreurs du client)</strong> : Ces codes indiquent que le client semble avoir commis une erreur. Ils sont utilisés lorsque la demande contient par exemple une syntaxe incorrecte ou ne peut pas être satisfaite.</li>



<li><strong><code>5xx</code> (Erreurs du serveur)</strong> : Ces codes indiquent que le serveur n&#8217;a pas pu satisfaire une demande valide. Le serveur lui-même est conscient qu&#8217;il a une erreur ou est incapable d&#8217;effectuer la demande.</li>
</ol>



<h2 class="wp-block-heading"><strong>Les headers</strong></h2>



<p>Ça sonne à votre porte, c&#8217;est le facteur qui vient vous déposer votre colis commandé la veille chez <em>[insérez votre e-commerce favori commençant par la lettre G]</em>. </p>



<p>Avant même d’ouvrir la boîte, l&#8217;étiquette collée sur le carton vous fournit des informations précieuses : l&#8217;expéditeur, la destination, potentiellement des instructions spéciales, la valeur marchande, etc.</p>



<p>De la même manière, les headers (en-têtes) HTTP fournissent des informations cruciales sur la demande ou la réponse, indiquant comment elle doit être traitée, quel est son contenu, comment elle doit être mise en cache, qui a les autorisations.</p>



<p>Voici une liste non exhaustive de headers qui je pense sont important à connaître :</p>



<h3 class="wp-block-heading"><strong>Accept</strong></h3>



<p>Spécifie les types de médias qu&#8217;il est possible de traiter. Les serveurs peuvent ainsi adapter leurs réponses en fonction des capacités du client. Par exemple, un en-tête <strong><code>Accept</code></strong> peut indiquer que le client accepte les réponses au format JSON (<strong><code>application/json</code></strong>) ou XML (<strong><code>application/xml</code></strong>).</p>



<p><code>Accept: application/json</code></p>



<h3 class="wp-block-heading"><strong>User-Agent</strong></h3>



<p>Identifie le navigateur, le système d&#8217;exploitation et d&#8217;autres caractéristiques du navigateur. Cela permet au serveur de fournir une réponse optimisée en fonction des capacités du client. Les développeurs frontend peuvent parfois utiliser cet en-tête pour effectuer des ajustements spécifiques à un navigateur / OS.</p>



<p><code>User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36</code></p>



<h3 class="wp-block-heading"><strong>Authorization (avec Bearer)</strong></h3>



<p>Ce header est crucial pour les requêtes sécurisées. Lorsqu&#8217;un utilisateur est authentifié, le serveur attend généralement un token d&#8217;accès. Le schéma le plus courant est le schéma &#8220;Bearer&#8221;, utilisé avec les token JWT.</p>



<p><code>Authorization: Bearer eyJhbGciOiJ-IUzI1NiIhssInR5cCI6IkpX-VCJ9.eyJzddWIiOqiIxMjM-0NTY3ODkwIdiwibmg-FtZSI6Ikpv-aG4gRG9lIiwi-aWF0IjoxNTsdfE2MjM5M-DIyfQ.SflKxwRJSMeKK-F2QT4fwpMeJf36POk-6ymjJV-adQssw5c</code></p>



<h3 class="wp-block-heading"><strong>Content-Type</strong></h3>



<p>Indique le type de média du <code>body</code> de la requête ou de la réponse. Pour les requêtes, cela informe le serveur sur le format des données envoyées, tandis que pour les réponses, cela indique au client comment interpréter le contenu.</p>



<p><code>Content-Type: application/json</code></p>



<h3 class="wp-block-heading"><strong>Cookie</strong></h3>



<p>Ce header contient les cookies qui doivent être inclus dans la requête. Les cookies servent par exemple à maintenir l&#8217;état de la session entre le client et le serveur.</p>



<p><code>Cookie: sessionId=123456; userId=9876</code></p>



<h3 class="wp-block-heading"><strong>Cache-Control</strong></h3>



<p>Spécifie les directives de mise en cache dans les requêtes et les réponses. Les développeurs frontend peuvent utiliser cet en-tête pour contrôler le comportement du cache du navigateur.</p>



<p><code>Cache-Control: no-cache, no-store, must-revalidate</code></p>



<p>ㅤ</p>



<p>En comprenant ces quelques headers fréquemment utilisés, les développeurs frontend peuvent améliorer la gestion des requêtes, la sécurité et l&#8217;efficacité globale du site web.</p>



<h2 class="wp-block-heading">Payloads</h2>



<h3 class="wp-block-heading"><strong>Qu&#8217;est-ce qu&#8217;un </strong>payload<strong> ?</strong></h3>



<p>Dans le contexte de HTTP, un payload fait référence aux données transmises dans une requête ou une réponse. Ces données peuvent prendre diverses formes, telles que du texte, du JSON, du XML, voire même des données binaires. Etant donné que ça influe directement sur les données que vos applications envoient et reçoivent, je pense qu’il est important d’en parler dans cet article.</p>



<h3 class="wp-block-heading"><strong>Types de Payloads</strong></h3>



<p>Voici quelques exemples classiques de type de contenu utilisé par nous autres frontends:</p>



<p><strong>Text-Based Payloads (basés sur du texte) :</strong></p>



<ul>
<li><code>HTML</code> : Le plus courant sur le web, le HTML contient la structure et le contenu d&#8217;une page.</li>



<li><code>JSON</code> : largement utilisé pour des données, le JSON est un format léger, facilement lisible et que les développeurs frontend manipulent souvent lors de l’intérraction avec des API.</li>
</ul>



<p><strong>Binary Payloads (basés sur du binaires) :</strong></p>



<ul>
<li><code>Images</code> : Les données d&#8217;image, telles que les fichiers JPEG ou PNG, sont souvent transmises en tant que charges binaires dans les requêtes et réponses HTTP.</li>



<li><code>Fichiers</code> : Lorsque les utilisateurs téléchargent des fichiers, la charge utile binaire est utilisée pour transmettre les données du fichier.</li>
</ul>



<p><strong>Structured Payloads :</strong></p>



<ul>
<li><code>XML</code> (eXtensible Markup Language) : Bien moins courant que le JSON, XML est un autre format pour structurer les données de manière lisible par l&#8217;homme et compréhensible par la machine.</li>
</ul>



<figure class="wp-block-image size-full"><img decoding="async" loading="lazy" width="1920" height="1080" src="https://content.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited.jpg" alt="" class="wp-image-13218" srcset="https://content-staging.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited.jpg 1920w, https://content-staging.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited-300x169.jpg 300w, https://content-staging.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited-768x432.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/11/mike-petrucci-c9FQyqIECds-unsplash-1-edited-1536x864.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px" /></figure>



<h3 class="wp-block-heading">Prenons l’exemple d’un site de e-commerce</h3>



<p>Vous avez comme objectif d&#8217;implémenter une fonctionnalité qui permet aux utilisateur·ices d&#8217;ajouter des produits à leur panier sans devoir actualiser l&#8217;ensemble de la page.</p>



<p><strong>Mises à jour asynchrones du panier :</strong></p>



<p>Sans une compréhension des payloads, le développeur frontend pourrait avoir du mal à communiquer efficacement avec le backend lorsqu&#8217;un utilisateur ajoute un article à son panier. Ici, le payload contiendrait les informations sur le produit (ID, nom, quantité, etc.) qui doivent être envoyées au serveur.</p>



<p><strong>Mises à jour dynamiques de l&#8217;interface utilisateur :</strong></p>



<p>Une fois que le serveur traite le payload et met à jour le statut du panier, le payload de réponse (par exemple au format JSON) devient important. Il faut l’interpréter pour mettre à jour dynamiquement l&#8217;interface utilisateur. Grâce à ça, son panier mit à jour sans devoir recharger la page.</p>



<p><strong>Gestion des erreurs :</strong></p>



<p>Si, pour une raison quelconque, le serveur rencontre un problème, le payload d&#8217;erreur devient essentiel. Les devs frontend peuvent utiliser cette réponse pour afficher un message d&#8217;erreur utile à l&#8217;utilisateur.</p>


Introduction à HTTP pour le développement frontend


<p>Une PWA (<strong>progressive web app</strong>) c’est une fusion entre un site web et une application mobile native. <em>C&#8217;est un peu comme si un site web revêtait les atouts et les fonctionnalités d&#8217;une application mobile sans nécessiter d&#8217;installation.</em></p>



<p>Il est possible de les installer sur votre écran d&#8217;accueil directement depuis le navigateur sans passer par un store. Elles sont rapides, offrent des possibilités de <strong>caching</strong>, de <strong>notifications</strong> <strong>PUSH</strong> et même des <strong>pages hors-ligne</strong> si jamais votre connexion internet venait à faire des caprices.</p>



<h2 class="wp-block-heading">Fruit défendu<strong> 🍎</strong></h2>



<p>Tandis que les PWA sont plutôt bien ancrées sur les navigateurs Chromium (<a href="https://gs.statcounter.com/browser-market-share">qui dominent le marché des navigateurs d’une majorité écrasante</a>), on ne peut pas en dire de même concernant <strong>Safari</strong>, le navigateur de la marque à la pomme, Apple.</p>



<p>Sur les navigateurs Chromium et si le site web est bien configuré pour supporter les PWA, il est possible grâce au <code>beforeInstallPrompt</code> de fournir une expérience d&#8217;installation simple et intuitive.</p>



<p>Ce n&#8217;est malheureusement pas la même chose sur Safari qui ne fournit pas de moyens simples d&#8217;installer une application Web. Il faut donc soi-même faire toutes les démarches, ce qui freine l&#8217;adoption de celles-ci sur iOS.</p>



<p><s>On pourrait presque croire qu’Apple fait exprès de rendre ça difficile pour encourager les développeurs et développeuses à publier leurs applications sur l’AppStore</s> 👀</p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1004" height="705" src="https://content.antistatique.net/app/uploads/2023/07/IOSPWAINSTALL-1.jpg" alt="" class="wp-image-12231" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/IOSPWAINSTALL-1.jpg 1004w, https://content-staging.antistatique.net/app/uploads/2023/07/IOSPWAINSTALL-1-300x211.jpg 300w, https://content-staging.antistatique.net/app/uploads/2023/07/IOSPWAINSTALL-1-768x539.jpg 768w" sizes="(max-width: 1004px) 100vw, 1004px" /><figcaption class="wp-element-caption">Processus d&#8217;installation d&#8217;une PWA sur un iPhone</figcaption></figure>



<h2 class="wp-block-heading">Une lueur d’espoir 🌥️</h2>



<p>Peu connue des consommateur·trices de l’écosystème d’Apple (et à juste titre), leur adoption stagne depuis plus de 10 ans malgré les avantages qu’elles peuvent apporter&#8230; Mais, attendez, que vois-je là ?</p>



<p>Et oui, promesse faite promesse tenue, c’est avec la sortie d’<strong>iOS 16.4</strong> que les notifications push font enfin partie intégrante des PWA sur iOS.</p>



<p>Il est donc maintenant possible, par exemple, d’installer l’application web de WhatsApp sur son iPad et recevoir des notifications (il n’existe pas de version native de WhatsApp sur iPad).</p>



<p>Ce pas en avant de la part d’Apple donne l’espoir de peut-être un jour voir arriver un processus d’installation simplifié comme sur Android.</p>



<h2 class="wp-block-heading">Quel futur pour les PWA ?</h2>



<p>Malgré un taux d’adoption stable voire à la baisse, les PWA sont un bon moyen de lancer un produit rapidement et à moindre coût. Elles offrent une expérience proche des applications natives.</p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="779" height="652" src="https://content.antistatique.net/app/uploads/2023/07/pwa-usage-statistics.webp" alt="Graphique montrant le taux d'utilisation des PWA" class="wp-image-12233" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/pwa-usage-statistics.webp 779w, https://content-staging.antistatique.net/app/uploads/2023/07/pwa-usage-statistics-300x251.webp 300w, https://content-staging.antistatique.net/app/uploads/2023/07/pwa-usage-statistics-768x643.webp 768w" sizes="(max-width: 779px) 100vw, 779px" /></figure>



<p>Les PWA continuent d&#8217;être une option intéressante pour les entreprises souhaitant fournir une expérience mobile sans avoir à développer des applications natives distinctes pour chaque plate-forme.</p>



<p>Elles ont démontré leur capacité à <strong>améliorer l&#8217;engagemen</strong>t des utilisateurs et utilisatrices et à <strong>réduire les taux d&#8217;abandon (bounce rate)</strong>, ce qui en fait une solution viable pour de nombreux cas d&#8217;utilisation.</p>



<h2 class="wp-block-heading"><s>P</s> TWA</h2>



<p>Parce qu’utiliser un seul acronyme ça serait trop simple, voici les TWA !</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Trusted Web Activities</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                    </div>
</div>



<p>Pour résumer, c’est une évolution des PWA afin d&#8217;intégrer des contenus Web sécurisés dans une <strong>application Android native</strong>. En suivant la <a href="https://developer.chrome.com/docs/android/trusted-web-activity/#establish_an_association_from_the_website_to_the_app">doc de Google</a>, il est possible de transformer sa PWA en TWA et de pouvoir finalement la publier sur le PlayStore.</p>



<p>Contrairement aux PWA, les TWA offrent une intégration plus profonde avec le système d&#8217;exploitation Android, permettant aux utilisateurs et utilisatrices d&#8217;interagir à travers une expérience native, comme s&#8217;il s&#8217;agissait d&#8217;une application traditionnelle tout en gardant les avantages d’une application web. Les mises à jour faites sur votre site seront par conséquent directement accessibles depuis votre PWA !</p>



<p>En plus de bénéficier de tous les avantages des PWA, les TWA offrent également une intégration avec les fonctionnalités Android telles que les “Shared Action” pour partager des données avec d’autres applications, l&#8217;authentification unique et l&#8217;accès aux API natives du système.</p>



<p>Il convient cependant de noter que les TWA sont spécifiques à <strong>Android</strong> et ne sont pas disponibles sur les autres plateformes mobiles telles qu&#8217;iOS.</p>



<h2 class="wp-block-heading">En conclusion</h2>



<p>Malgré un taux d’adoption plutôt lent, les PWA offrent une expérience proche des applications natives à moindre coût, et peuvent même être publiées sur le PlayStore grâce aux Trusted Web Activities.</p>



<p>Les PWA sont idéales pour :</p>



<ul>
<li>Une disponibilité multiplateforme immédiate</li>



<li>Des phases de développement intense où des mises à jour peuvent être publiées sans que l&#8217;utilisateur et utilisatrices ait besoin de mettre à jour son application.</li>



<li>Des cas simples tels que des sites e-commerce, des blogs, sites éditoriaux et dashboards. </li>
</ul>



<p>Tandis qu&#8217;une application mobile native est plus avantageuse quand il faut utiliser des fonctions plus avancées telles que :</p>



<ul>
<li>De l&#8217;image processing</li>



<li>Des tâches exigeantes au niveau du hardware</li>



<li>De l&#8217;AR et des jeux vidéo</li>
</ul>


PWA, toujours d’actualité ?


<p class="is-style-default">C’est la question de fond et le fil rouge de la seconde édition des Assises nationales genre et numérique 2023. J’ai eu la possibilité d’assister à ces deux jours riches en partage et échanges autour des enjeux de l’égalité de genre en transformation numérique (EGTN). Cet événement a eu lieu le 7 et 8 septembre 2023 à l’Université de Lausanne (UNIL).</p>



<p>Les sujets abordés et approfondis étaient les suivants :</p>



<ul>
<li>l’inclusion des femmes dans les métiers du numérique (et les enjeux pour les y maintenir)</li>
</ul>



<ul>
<li>les défis de l’intégration du numérique dans la formation&nbsp;sous l’angle du genre</li>
</ul>



<ul>
<li>les biais de genre dans les technologies telles que l’intelligence artificielle (IA)</li>
</ul>



<ul>
<li>l’usage d’outils numériques pour lutter contre les violences faites aux femmes</li>
</ul>



<p>Source : <a href="https://wp.unil.ch/genre-numerique/" data-type="link" data-id="https://wp.unil.ch/genre-numerique/">UNIL</a></p>



<p> </p>



<h3 class="wp-block-heading">Quels sont les 3 chiffres qui m’ont le plus interpellé ?</h3>



<ul>
<li>moins de 9% du corps estudiantin en informatique en Suisse sont des femmes (<a href="https://www.ictjournal.ch/etudes/2021-03-08/la-proportion-de-femmes-dans-lit-ne-progresse-presque-pas">HES-SO</a>, statistiques pour la période 2016 à 2021)</li>



<li>88% des algorithmes sont conçus par des hommes (<a href="https://www.laboratoiredelegalite.org/2220-2/" data-type="link" data-id="https://www.laboratoiredelegalite.org/2220-2/">L’Intelligence artificielle, pas sans elles !</a>, Aude Bernheim, édition Belin, 2019)</li>



<li>14’604 pages Wikipédia permettant de compléter l’histoire universelle grâce à une meilleure représentation intersectionnelle et de genre ont été créées et améliorées par les personnes du projet Les sans pagEs (<a href="https://fr.wikipedia.org/wiki/Projet:Les_sans_pagEs" data-type="link" data-id="https://fr.wikipedia.org/wiki/Projet:Les_sans_pagEs">Les sans pagEs</a>, 7 septembre 2023)</li>
</ul>



<p> </p>



<h3 class="wp-block-heading">Quel était le programme de ces Assises ?</h3>



<p>Une multitude d’informations précises et précieuses ont été transmises par plus de 30 professionnel·x·les et spécialistes impliqué·x·es, d’horizons complémentaires, suisses et internationaux. Le programme était composé de 6 conférences, 5 tables rondes, 9 ateliers et plusieurs événements annexes.</p>



<p> </p>



<h3 class="wp-block-heading">Qu’est-ce que je savais déjà ?</h3>



<p>Les savoirs sont très souvent sexués et une grande partie des interactions sociales sont imprégnées par le genre. Il en va de même avec l’éducation, la formation et les représentations en général. Le numérique reflète ces faits, voire les décuple dans certains cas.</p>



<p> </p>



<h3 class="wp-block-heading">Qu’est-ce que l’on peut faire, de façon individuelle et factuelle ?</h3>



<p>S’informer, prendre ses responsabilité, et s’investir en faveur de l’égalité et de l’équité de genre. En tant que :</p>



<ul>
<li>citoyen·x·ne : face aux actes et aux habitudes sexistes qui habitent le quotidien, aux mots utilisés, aux représentations mises en avant, aux contenus partagés sur les réseaux sociaux</li>



<li>parent·x·e : vis-à-vis des stéréotypes autour des jouets, des jeux vidéos, de l’utilisation faite de l’ordinateur et du smartphone, des biais de genre présents dans les modèles et représentations pour les jeunes</li>



<li>professionnel·x·le : par rapport aux stéréotypes dans l’éducation et la formation, aux critères de recrutement et aux politiques internes, à la place est faite à la pluridisciplinarité des équipes</li>



<li>collègue·x : concernant les blagues verbalisées, le vocabulaire utilisé, le rapport à l’autre dans les échanges professionnels</li>
</ul>



<p> </p>



<h3 class="wp-block-heading">Et l’intelligence collective dans tout ça ?</h3>



<p>Il y a encore du chemin à faire pour changer les biais de genre. Qu’il s’agisse de réduire les <a href="https://www.excellence-decisionnelle.com/tag/bruit-cognitif/">biais et le bruit</a> de l’intelligence artificielle, de proposer des solutions numériques plus inclusives, et de parvenir à l’<a href="https://sdgs.un.org/fr/goals">égalité des sexes et autonomiser toutes les femmes et les filles</a>, qui est l’objectif 5 mentionné par les Objectifs de Développement Durable (ODD) universels de l’Agenda 2030 des Nations Unies. Et ce chemin est à créer et emprunter ensemble : femmes, hommes, et personnes non binaires.</p>


Vers une égalité de genre dans le numérique ?


<h2 class="wp-block-heading">Laurent nous a rejoint il y a bientôt une année, c&#8217;est donc plus que le moment d&#8217;en apprendre davantage sur lui! </h2>



<p>Co-fondateur du Bureau Duplex, il vient renforcer notre équipe avec son savoir-faire en direction artistique, conception et développement de marques, création de concepts de communication.</p>



<p>Grâce à lui, l&#8217;agence compte un sportif de plus et il nous sensibilise à la cause animale et écologique.</p>



<h2 class="wp-block-heading">Prêt·e à découvrir un peu mieux Laurent ?</h2>



<h3 class="wp-block-heading">1. <strong>Quelques mots-clés pour te définir ?</strong></h3>



<p>Enthousiaste, déterminé, simple, sensible, têtu, un peu maladroit aussi.</p>



<h3 class="wp-block-heading">2. Une cause qui te tient à cœur ?</h3>



<p><meta charset="utf-8"></meta>Je suis très sensible à la lutte pour le climat, la cause animale et aux inégalités de manière générale.</p>



<p>Du coup, j&#8217;ai décidé de mettre la souffrance animale avant mon propre confort: je suis donc vegan depuis plus d&#8217;une année, après avoir été végétarien pendant plus de 5 ans.</p>



<p>Aussi, j&#8217;aimerais m&#8217;investir et être plus actif: en attendant je fais des dons, je suis les médias qui en parlent et j&#8217;essaie de relayer leurs messages. Je suis convaincu qu&#8217;expliquer et encourager permet aux gens de mieux appréhender les idées du changement. J&#8217;essaie de ne jamais être dans le jugement et je me documente le plus possible pour déconstruire les idées reçues.</p>



<h3 class="wp-block-heading">3. Une recette fétiche à nous partager ?</h3>



<p>Un bon petit curry de légumes tout simple, vite fait bien fait. </p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/Vegan-confort-food-1950x2600.jpg" alt="Vegan confort food - cette photo n'est pas le curry de la recette, mais un autre plat vegan appétissant." class="wp-image-12255" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/Vegan-confort-food-1950x2600.jpg 1950w, https://content-staging.antistatique.net/app/uploads/2023/07/Vegan-confort-food-225x300.jpg 225w, https://content-staging.antistatique.net/app/uploads/2023/07/Vegan-confort-food-768x1024.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/07/Vegan-confort-food-1152x1536.jpg 1152w, https://content-staging.antistatique.net/app/uploads/2023/07/Vegan-confort-food-1536x2048.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2023/07/Vegan-confort-food-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



<p><em>Photo : Vegan confort food</em> &#8211; cette photo n&#8217;est pas le curry de la recette, mais un autre plat vegan appétissant.</p>



<p>Allez, je vous liste les ingrédients: ail, échalote, légumes variés (patate douce, courgette, aubergine, carotte, par exemple), pâte de curry rouge ou vert (ça pique plus ou moins), concentré de tomates, cumin, lait de coco, poivre/sel et jus de citron, un peu de basilic haché et un peu de piment, c&#8217;est toujours une bonne idée le piment. Parfois j&#8217;ajoute même du tofu et/ou quelques champignons.</p>



<p>Tout ça servi avec un riz au jasmin, une tombée de lait de coco et quelques feuilles de coriandre.</p>



<p>C&#8217;est fait en 20 min, ça se garde plusieurs jours et ça ne fait du mal à personne. </p>



<h3 class="wp-block-heading">4. Un voyage marquant ?</h3>



<p>Il est tout récent: un mois à vélo à travers l&#8217;Espagne et la France </p>



<p>La plupart du voyage s&#8217;est faite en autonomie (préparer sa nourriture, dormir sous tente). Il y a évidement des moments ou j&#8217;ai dormi au camping et même à l&#8217;hôtel, surtout dans les grandes villes.</p>



<p>Je me suis rendu compte que le vrai confort c&#8217;est d&#8217;avoir un lit et une salle de bains, donc même les hôtels qu&#8217;on pourrait qualifier de miteux, avaient un petit goût de palace. Il faut dire qu&#8217;après une bonne grosse journée (entre 150 et 200 km) sous le cagnard ou le déluge espagnol, c&#8217;est royal se laver et dormir au sec. </p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/Cote-méditerranée-1950x2600.jpg" alt="Côte méditerranéenne " class="wp-image-12265" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/Cote-méditerranée-1950x2600.jpg 1950w, https://content-staging.antistatique.net/app/uploads/2023/07/Cote-méditerranée-225x300.jpg 225w, https://content-staging.antistatique.net/app/uploads/2023/07/Cote-méditerranée-768x1024.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/07/Cote-méditerranée-1152x1536.jpg 1152w, https://content-staging.antistatique.net/app/uploads/2023/07/Cote-méditerranée-1536x2048.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2023/07/Cote-méditerranée-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



<p><em>Photo : Côte méditerranéenne</em></p>



<p>Je suis donc parti de Lausanne en train pour rejoindre Perpignan, mon point de départ. Depuis là, direction la côte, en traversant successivement la Catalogne, la région de Valence puis la région de Murcie, l&#8217;Andalousie pour arriver à finalement à Gibraltar. Le détroit, un lieu magique et magnétique, je l&#8217;avoue, a marqué la fin de cette surprenante et sublime côte méditerranéenne. </p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/Gibraltar-1950x2600.jpg" alt="Gibraltar" class="wp-image-12261" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/Gibraltar-1950x2600.jpg 1950w, https://content-staging.antistatique.net/app/uploads/2023/07/Gibraltar-225x300.jpg 225w, https://content-staging.antistatique.net/app/uploads/2023/07/Gibraltar-768x1024.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/07/Gibraltar-1152x1536.jpg 1152w, https://content-staging.antistatique.net/app/uploads/2023/07/Gibraltar-1536x2048.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2023/07/Gibraltar-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



<p><em><em>Photo : Détroit de Gibraltar</em></em></p>



<p>Et puis, j&#8217;ai commencé à remonter dans les terres en traversant tout le pays: Ronda, Antequera, Grenade, Madrid, les Hauts-Plateaux de la région d&#8217;Aragon, avant d&#8217;arriver à Pampelune et terminer ce périple espagnol dans le Royaume de Navarre. J&#8217;ai encore en tête un souvenir vif des Bardenas Reales, un désert de formations argileuses, un spectacle complètement lunaire que j&#8217;ai traversé avant mon arrivée à Pampelune. Un des points forts de ce voyage sans doute, tant sur le plan émotionnel que physique. Il s&#8217;est passé un truc ouf ce jour-là. </p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/Bardenas-Reales-1950x2600.jpg" alt="Bardenas Reales" class="wp-image-12263" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/Bardenas-Reales-1950x2600.jpg 1950w, https://content-staging.antistatique.net/app/uploads/2023/07/Bardenas-Reales-225x300.jpg 225w, https://content-staging.antistatique.net/app/uploads/2023/07/Bardenas-Reales-768x1024.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/07/Bardenas-Reales-1152x1536.jpg 1152w, https://content-staging.antistatique.net/app/uploads/2023/07/Bardenas-Reales-1536x2048.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2023/07/Bardenas-Reales-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



<p><em>Photo : Bardenas Reales</em></p>



<p>Après ça, j&#8217;ai entamé ma dernière étape en Espagne, en rejoignant Saint Sébastien, une petite ville sur la côte atlantique. L&#8217;arrivée s&#8217;est faite par le mont Urgull, véritable balcon naturel d&#8217;où on appréhende une grande partie de la ville, l&#8217;océan et les paysages vallonnés des environs, à couper le souffle. Deux jours plus tard j&#8217;arrivais finalement à Bordeaux, la fin de ce voyage après avoir roulé le long de la côte Atlantique et ses interminables forêts des Landes.</p>



<p>Ce voyage est inoubliable: avancer chaque jour et vivre autant de changements, que ce soit de paysages, de conditions météo, d&#8217;altitude, de couleurs, d&#8217;énergies et avoir le temps et la disponibilité pour moi-même, le temps de vivre mes émotions et de les comprendre, c&#8217;était vraiment précieux. Ces 23 jours sur la route ont été fabuleux, j&#8217;en ressors grandi et serein.</p>



<h3 class="wp-block-heading">5. Ton plus grand défi sportif ?</h3>



<p>Je crois que c&#8217;est ce voyage dont je viens de parler et celui que j&#8217;ai réalisé l&#8217;année passée (Lausanne &#8211; Stockholm à vélo). </p>



<figure class="wp-block-image size-large is-style-default"><img decoding="async" loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2023/07/La-machine-1950x2600.jpg" alt="La machine" class="wp-image-12268" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/La-machine-1950x2600.jpg 1950w, https://content-staging.antistatique.net/app/uploads/2023/07/La-machine-225x300.jpg 225w, https://content-staging.antistatique.net/app/uploads/2023/07/La-machine-768x1024.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/07/La-machine-1152x1536.jpg 1152w, https://content-staging.antistatique.net/app/uploads/2023/07/La-machine-1536x2048.jpg 1536w, https://content-staging.antistatique.net/app/uploads/2023/07/La-machine-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /></figure>



<p><em>Photo : Mon fidèle destrier</em></p>



<p>En plus d&#8217;être sportifs, ces voyages ont une dimension humaine incontestable.</p>



<p>Bouger de manière douce et active, avec un impact environnemental réduit permet de voyager différemment. J&#8217;allie deux choses que j&#8217;aime particulièrement: le sport et les voyages. Ces voyages sont évidemment de gros défis sportifs et me permettent de repousser mes propres limites (physiques et mentales), de profiter de rencontres inattendues et de découvrir des territoires insoupçonnés, même à quelques kilomètres de chez moi.</p>



<p>J&#8217;ai adoré être dans cette intensité physique. Elle pousse à être dans le moment présent, à se raccrocher à la réalité du moment.</p>



<h3 class="wp-block-heading">6. Tes sources d&#8217;inspiration ?</h3>



<p>Elles sont de moins en moins définies: il y a quelques années, c&#8217;étaient surtout des studios graphiques réputés ou des indépendants ultra-créatifs, des designers en tout genre, les voyages lointains qui m&#8217;inspiraient. Maintenant, ce sont plutôt des sources intérieures et simples que je vais chercher, par exemple dans la nature, le sport et aussi dans les connexions humaines. Ça évolue, tout est en mouvement, toujours.</p>



<p>J&#8217;en trouve aussi à travers les gens qui se battent pour le climat, la planète, les minorités, la cause animale. C&#8217;est très fort. J&#8217;admire les personnes qui sont capables de s&#8217;oublier et changer d&#8217;échelle, de point de vue, voir les choses plus globalement.</p>



<h3 class="wp-block-heading">7. Le métier que tu rêvais de faire étant enfant ?</h3>



<p>J&#8217;ai été très tôt inspiré par l&#8217;architecture. J&#8217;en ai fait mon premier métier, j&#8217;ai côtoyé ce milieu durant quelques années, mais ça ne s&#8217;est pas révélé être ce que je voulais faire au final. Le graphisme a pris le relai et c&#8217;est dans ce domaine que je me suis le plus épanoui jusqu&#8217;à aujourd&#8217;hui. J&#8217;aimerais beaucoup réussir dans le futur à me rapprocher des causes qui me sont chères et pourquoi pas les implémenter dans mon travail. Un besoin d&#8217;authenticité, sans doute.</p>



<h3 class="wp-block-heading">8. As-tu un prochain gros projet ?</h3>



<p>Oui! Il est encore très flou, mais je songe à partir voyager à vélo (<em>et non pas en vacances</em>), partir sans trajectoire &#8220;définie&#8221; ni date de retour. Il n&#8217;y a pas que celui-là, mais on a pas assez de temps pour ça! 🙂 Ca fait du bien de rêver, non?</p>



<h3 class="wp-block-heading">9. Un livre qui traine sur ta table de chevet ?</h3>



<p>Il y en a toujours plein! </p>



<p>Ils sont naturellement en lien et propres à ce que je vis: j&#8217;arrive parfois être très focus sur un ouvrage et d&#8217;autres fois je suis sur plein de trucs en même temps et quand je suis trop excité de la vie et par mes projets, je n&#8217;arrive plus à lire du tout, pendant un temps.</p>



<p><em>(Laurent va vérifier ce qu&#8217;il a sur sa table de nuit, pour être sûr et revient avec plusieurs livres)</em>.</p>



<p>Là je lis <em>Cher Connard</em>, de Virginie Despentes et l&#8217;<em>Evénement </em>de Annie Ernau. Je lis aussi <em>Forêt</em>, un magazine de la maison d&#8217;édition &#8220;La Relève et la Peste&#8221;.</p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="697" height="639" src="https://content.antistatique.net/app/uploads/2023/07/La-relèvelapeste.jpg" alt="La relève &amp; la peste" class="wp-image-12257" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/La-relèvelapeste.jpg 697w, https://content-staging.antistatique.net/app/uploads/2023/07/La-relèvelapeste-300x275.jpg 300w" sizes="(max-width: 697px) 100vw, 697px" /></figure>



<p><em>Photo : Forêts de La relève &amp; la peste</em></p>



<p>Je lis et relis aussi un livre qui s&#8217;appelle <em>Two Years on a Bike</em> : c&#8217;est l&#8217;histoire d&#8217;un graphiste hollandais, qui part voyager à vélo pendant deux ans. Il a réalisé lui-même toutes les photos, rédigé les textes et mis en pages son livre. Inspirant vous avez dit? C&#8217;est clair, à fond!</p>



<h3 class="wp-block-heading">10. Tu ne vas pas y couper : plutôt chien ou chat ? 😉</h3>



<p>Je crois que la réponse est claire, j&#8217;aime tous les animaux mais je crois que Marius ne serait pas du tout content que je dise chat!</p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1602" height="2137" src="https://content.antistatique.net/app/uploads/2023/07/Mariusmoi.jpg" alt="Marius et Laurent" class="wp-image-12251" srcset="https://content-staging.antistatique.net/app/uploads/2023/07/Mariusmoi.jpg 1602w, https://content-staging.antistatique.net/app/uploads/2023/07/Mariusmoi-225x300.jpg 225w, https://content-staging.antistatique.net/app/uploads/2023/07/Mariusmoi-768x1024.jpg 768w, https://content-staging.antistatique.net/app/uploads/2023/07/Mariusmoi-1151x1536.jpg 1151w, https://content-staging.antistatique.net/app/uploads/2023/07/Mariusmoi-1535x2048.jpg 1535w" sizes="(max-width: 1602px) 100vw, 1602px" /></figure>



<p><em>Photo : Marius et Laurent</em></p>



<p>&#8212;</p>



<p>Merci Laurent ! On a hâte de continuer à te découvrir !</p>


Notre enthousiasme est contagieux

La vie de l’agence, les dernières infos et les mandats remportés

La vie de l’agence, les dernières infos et les mandats remportés