
<p class="is-style-lead">Nous avons la chance de participer à un projet financé par l’UE qui a pour objectif d’améliorer durablement les habitudes alimentaires des européen·nes. Découvrez dans cet article pourquoi et comment nous participons à cette aventure.</p>



<h2 class="wp-block-heading"><strong>Le projet Switch en une phrase</strong></h2>



<p>Projet principalement de recherche permettant d’analyser les changements de comportement et l’adoption d’une alimentation saine et durable. Le projet s’inscrit dans une démarche visant à éclairer le chemin entre la ferme et la fourchette (agriculteur·rices, chef·fes, consommateur·rices et décideur·ses politiques).</p>



<h2 class="wp-block-heading"><strong>Renouveler la collaboration avec l’EPFL+ECAL<sup>LAB</sup></strong></h2>



<p>Après <a href="https://antistatique.net/projets/epflecal-lab">le projet Resoli (Quartiers solidaires)</a>, réalisé et couronné de succès (plusieurs prix remportés pour ce projet), l’<a href="https://epfl-ecal-lab.ch/research-projects/switch/">EPFL+ECAL<sup>LAB</sup></a> nous a proposé de les rejoindre dans cette nouvelle collaboration.</p>



<h2 class="wp-block-heading"><strong>Des hubs</strong> dans toute l&#8217;Europe</h2>



<p>Dans le cadre du consortium, des universités, des centres de recherche et <a href="https://switchdiet.eu/discover-our-food-hubs/">des “hubs” sont impliqués</a>. Ces régions géographiques incluent un ou plusieurs centres urbains et leurs environs, les zones périurbaines et le hinterland rural, à travers lesquels circulent les personnes, les aliments, les biens, les ressources et les services. </p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="1748" height="1240" src="https://content.antistatique.net/app/uploads/2025/02/Switch_map.png" alt="" class="wp-image-15945" srcset="https://content.antistatique.net/app/uploads/2025/02/Switch_map.png 1748w, https://content.antistatique.net/app/uploads/2025/02/Switch_map-300x213.png 300w, https://content.antistatique.net/app/uploads/2025/02/Switch_map-768x545.png 768w, https://content.antistatique.net/app/uploads/2025/02/Switch_map-1536x1090.png 1536w" sizes="(max-width: 1748px) 100vw, 1748px" /></figure>



<p>Ces hubs sont vus comme des laboratoires dans le cadre du projet afin d’étudier les acteurs et activités du système alimentaire sur lesquels les gouvernements locaux/régionaux ont des pouvoirs de planification et d&#8217;intervention. Il y en a 6 dans le cadre du projet Switch :</p>



<ul class="is-style-objectives">
<li>Rome et la région du Lazio</li>



<li>Métropole de Montpellier et région Occitanie</li>



<li>Göteborg et région de Vastra Götaland</li>



<li>Berlin et État fédéral de Brandebourg</li>



<li>Cagliari et région de Sardaigne</li>



<li>Saint-Sébastien et région basque</li>
</ul>



<h2 class="wp-block-heading"><strong>Le développement de plusieurs applications web PWA sur mesure à destination des Hubs</strong></h2>



<p>Suite aux différentes recherches réalisées dans les premières phases du projet, l’équipe de l’<a href="https://epfl-ecal-lab.ch/research-projects/switch/">EPFL+ECAL<sup>LAB</sup></a> réalise la recherche et le design d’une application dédiée à chaque public (consommateur·rices, chef·fes et décideur·ses politiques). Nous sommes présents durant cette phase pour nous assurer de la faisabilité technique. Puis, nous réalisons (cette année) l’application web (PWA) respectant les standards en termes de protection des données et de durabilité technique. Le projet doit ensuite être maintenu pendant 3 ans par nos soins.</p>



<h2 class="wp-block-heading"><strong>Un projet d’innovation dont l’objectif est de faire avancer la recherche</strong></h2>



<p>Dans une Union européenne qui a eu tendance à rationaliser et standardiser pour mieux légiférer, ce projet a pour ambition de comprendre et d’améliorer la situation à travers une analyse plus locale. Le rôle des hubs est essentiel car les hubs permettent l’expérimentation dans plusieurs contextes locaux différents et diversifiés. Au niveau de l’expérience web, nous entendons également appréhender le projet sous l’angle de l’innovation.</p>



<h2 class="wp-block-heading"><strong>Un projet d’envergure sur 4 ans avec 24 partenaires</strong></h2>



<p>Le projet, débuté en janvier 2023, est planifié sur 4 ans à travers 9&nbsp;<em>work packages</em>. </p>



<figure class="wp-block-image size-large is-style-full-width"><img decoding="async" loading="lazy" width="2600" height="1011" src="https://content.antistatique.net/app/uploads/2025/02/Wp-structure-02-02-2600x1011.png" alt="" class="wp-image-15947" srcset="https://content.antistatique.net/app/uploads/2025/02/Wp-structure-02-02-2600x1011.png 2600w, https://content.antistatique.net/app/uploads/2025/02/Wp-structure-02-02-300x117.png 300w, https://content.antistatique.net/app/uploads/2025/02/Wp-structure-02-02-768x298.png 768w, https://content.antistatique.net/app/uploads/2025/02/Wp-structure-02-02-1536x597.png 1536w, https://content.antistatique.net/app/uploads/2025/02/Wp-structure-02-02-2048x796.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<p>Nous commençons en 2025 la 3ème année du projet et nous nous retrouvons à Montpellier cette semaine pour échanger sur l’avancement avec les différents partenaires.</p>


Application Switch – Travailler avec l’Europe pour manger sainement et durablement


<p>Cela fait déjà 6 mois que nous avons eu le plaisir d&#8217;accueillir Antoine, qui est développeur. C&#8217;est donc le moment de faire plus ample connaissance et de vous en apprendre un peu plus sur lui à travers ces quelques questions !</p>



<figure class="wp-block-image size-full is-resized is-style-default"><img decoding="async" loading="lazy" src="https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.11.36.jpeg" alt="Nero, le chat d'Antoine" class="wp-image-15912" style="width:1143px;height:715px" width="1143" height="715"/><figcaption class="wp-element-caption">Nero, le chat d&#8217;Antoine</figcaption></figure>



<h2 class="wp-block-heading">Antoine, donne-moi 3 mots pour te décrire ? </h2>



<p>Trop difficile pour commencer ! </p>



<h2 class="wp-block-heading">Quel métier rêvais-tu de faire étant enfant ?</h2>



<p>Prof de maths ! J&#8217;aimais bien les maths mais plus tard j&#8217;ai découvert que je n&#8217;avais pas de patience et que j&#8217;avais déjà du mal à supporter les enfants dans le bus.</p>



<h2 class="wp-block-heading">Dis-nous en plus sur ton parcours</h2>



<p>Ma scolarité est plutôt classique, rien de spécial à signaler. J&#8217;ai fait une année d&#8217;OPTI (Organisme pour le Perfectionnement scolaire, la Transition et l&#8217;Insertion professionnelle) dans le but de choisir ce que je voulais faire. Ensuite, j&#8217;ai fait un CFC d&#8217;informaticien et une ES à Saint-Croix (pas très fun Saint-Croix).</p>



<h2 class="wp-block-heading">Selon toi, quelles qualités ou compétences sont indispensables pour faire un bon développeur ou une bonne développeuse ?</h2>



<p>La curiosité et la volonté d&#8217;apprendre, même si ce qu&#8217;on fait fonctionne, il faut toujours chercher si c&#8217;est possible, car il y a souvent mieux sans qu&#8217;on sache. </p>



<p>Peut-être aussi de la résilience : ne pas craquer quand ça ne fonctionne pas !</p>



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



<p>J&#8217;apprécie beaucoup être simplement chez moi, regarder des séries, lire des mangas, jouer aux jeux vidéo. Par exemple, mon samedi parfait ressemble à ça : je me lève, je me mets devant la télé, l&#8217;après-midi je joue puis le soir, je vais me coucher. </p>



<p>J&#8217;aime sortir mais moins qu&#8217;avant, j&#8217;aime mieux que mes amis viennent chez moi. Je dirais bien que c&#8217;est avec l&#8217;âge, mais ça fait déjà bien 4-5 ans 😉</p>



<h2 class="wp-block-heading">Un voyage marquant ou un voyage que tu rêves de faire ?</h2>



<p>Je rêve d&#8217;aller au Japon (coucou <a href="https://antistatique.net/agence/marc">Marc</a> !) mais ça demande un budget et beaucoup d&#8217;organisation.</p>



<p>Je ne suis pas un grand voyageur, je n&#8217;ai jamais quitté l&#8217;Europe.  </p>



<h2 class="wp-block-heading">Tu es plutôt film, série Netflix, BD ou livre ?</h2>



<p>Plutôt animé manga ! J&#8217;en ai vu plus de 800 et j&#8217;en ai encore 700 à regarder dans ma liste.</p>



<p>L&#8217;année passée, j&#8217;ai regardé <em>Frieren</em> que je peux recommander !</p>



<h2 class="wp-block-heading">Qu&#8217;est-ce qu&#8217;il y a dans tes oreilles quand tu travailles ?</h2>



<p>J&#8217;ai uniquement 2 playlists. La première avec TOUT ce que j&#8217;aime (principalement du metal) et la deuxième pour le travail, avec 14 chansons qui tournent en boucle (des opening d&#8217;animés, des musiques de jeux vidéos, un peu de métal).</p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="917" height="1660" src="https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.10.05.jpeg" alt="La phase &quot;Mallgoth rock débridé metalcore&quot; d'Antoine" class="wp-image-15914" srcset="https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.10.05.jpeg 917w, https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.10.05-166x300.jpeg 166w, https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.10.05-768x1390.jpeg 768w, https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.10.05-849x1536.jpeg 849w" sizes="(max-width: 917px) 100vw, 917px" /><figcaption class="wp-element-caption">Sympa comme phase, merci Spotify !</figcaption></figure>



<h2 class="wp-block-heading">D&#8217;ailleurs c&#8217;est quoi ton prochain concert ? ou un groupe que tu aimerais absolument voir ?</h2>



<p>Je n&#8217;ai pas de concert prévu en ce moment mais je n&#8217;ai jamais vu et que j&#8217;aimerais beaucoup <a href="https://open.spotify.com/intl-fr/artist/58r5QdZ8pIIydoNTLcM5eO?si=GYkXkjFfRUejZ3a_sx8Tig">Feed her to the Sharks</a>. Et sinon c&#8217;est <a href="https://open.spotify.com/intl-fr/artist/3gfA40vRbx6YX8oCDXDCDh?si=SJS359H6Qs-fARcAHATq5g" data-type="link" data-id="https://open.spotify.com/intl-fr/artist/3gfA40vRbx6YX8oCDXDCDh?si=SJS359H6Qs-fARcAHATq5g">Crossfaith</a> est un de mes groupes préférés, je les ai déjà vu au moins 8 fois.</p>



<h2 class="wp-block-heading">Le mot de la fin : tu es plutôt chien, chat ou même cochon nain ?</h2>



<p>J&#8217;aime tout les animaux mais je préfère les chats. J&#8217;aime les gros chiens, mais ça implique de sortir faire de longues balades, tandis qu&#8217;avec mon chat (Nero) je peux rester chez moi.</p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="2000" height="1504" src="https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.11.37.jpeg" alt="Nero, le chat d'Antoine" class="wp-image-15916" srcset="https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.11.37.jpeg 2000w, https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.11.37-300x226.jpeg 300w, https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.11.37-768x578.jpeg 768w, https://content.antistatique.net/app/uploads/2025/01/WhatsApp-Image-2025-01-23-at-11.11.37-1536x1155.jpeg 1536w" sizes="(max-width: 2000px) 100vw, 2000px" /><figcaption class="wp-element-caption">Team chat !</figcaption></figure>


10 questions pour découvrir Antoine


<p>Comme <a href="https://antistatique.net/blog">l&#8217;année </a><a href="https://antistatique.net/blog/smashingconf-freiburg-2023">passée</a>, nous nous sommes rendus à Freiburg pour assister à la Smashing Conference Web. Cette conférence traite un large éventail de sujets, du design au développement, en passant par l&#8217;accessibilité, l&#8217;IA et la durabilité. Voici un résumé des différents <em>talks</em> :</p>



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



<h3 class="wp-block-heading"><a href="https://findthat.at/glass">Getting to the Glass</a></h3>



<p>Phil Hawksworth a exploré les différentes approches de rendu et de livraison de contenu web. Il a souligné l&#8217;importance de comprendre les exigences du projet et de commencer simplement, en optimisant autant que possible en amont. Phil a notamment mis en avant l&#8217;utilisation des fonctions Edge pour améliorer les performances.</p>



<h3 class="wp-block-heading"><a href="https://www.canva.com/design/DAGPIGrqKwE/rm05QQrVaKo6_X9DDhTMqA/view">All Users Are Stupid</a></h3>



<p>Chris Kolb a abordé la conception centrée sur l&#8217;utilisateur d&#8217;un angle intéressant. Il a expliqué pourquoi les utilisateurs peuvent sembler &#8220;stupides&#8221; dans certains contextes et comment concevoir des interfaces qui minimisent la charge cognitive. Chris a insisté sur l&#8217;importance de permettre aux utilisateurs de penser rapidement pour une meilleure expérience.</p>



<h3 class="wp-block-heading"><a href="https://docs.google.com/presentation/d/18AauF79vcn03eudk08C4taQbA7wmLx-bzsChXfb4NFc/edit?usp=sharing">Accessibility in Data Visualization</a></h3>



<p>Sarah L. Fossheim a partagé des insights précieux sur la création de visualisations de données accessibles. Elle a souligné l&#8217;importance du contraste, des légendes, et de proposer des formats alternatifs. Sarah a également rappelé que l&#8217;accessibilité doit être pensée dès le début du processus de conception.</p>



<h3 class="wp-block-heading"><a href="https://miro.com/app/board/uXjVKkgjVKA=/">From Information to Innovation</a></h3>



<p>Emma Craig a exploré comment la gestion des connaissances au sein d&#8217;une organisation peut stimuler l&#8217;innovation. Elle a mis en avant l&#8217;importance des boucles de feedback internes et externes, ainsi que la création d&#8217;un environnement où il est permis d&#8217;échouer pour favoriser l&#8217;innovation.</p>



<h3 class="wp-block-heading"><a href="https://speakerdeck.com/ryantownsend/our-websites-need-a-lifestyle-change-not-a-diet">Our Websites Need a Lifestyle Change, Not a Diet</a></h3>



<p>Ryan Townsend a plongé dans les détails de l&#8217;optimisation des performances web, en se concentrant sur la nouvelle métrique Core Web Vital : l&#8217;INP. Il a fourni des conseils pratiques pour améliorer l&#8217;INP, comme l&#8217;utilisation de requestIdleCallback et l&#8217;optimisation des gestionnaires d&#8217;évènements.</p>



<h3 class="wp-block-heading"><a href="https://pimpmytype.com/a11y/">Typographer vs. Accessibility</a></h3>



<p>Oliver Schöndorfer a démystifié certaines idées reçues sur la typographie accessible. Il a montré comment une typographie soignée et l&#8217;accessibilité peuvent aller de pair, offrant des conseils pratiques pour choisir et utiliser les polices de manière à la fois esthétique et accessible.</p>



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



<h3 class="wp-block-heading"><a href="https://smashing-freiburg-2024.netlify.app/">Symphony Of The Web</a></h3>



<p>Adam Argyle, le mystérieux orateur, a présenté un éventail impressionnant de nouvelles fonctionnalités CSS et HTML. De la syntaxe des requêtes média aux animations pilotées par le défilement, en passant par de nouveaux éléments HTML, Adam a montré comment ces outils peuvent améliorer l&#8217;expérience utilisateur et simplifier le travail des développeurs.</p>



<h3 class="wp-block-heading"><a href="https://smashingconf.com/freiburg-2024/speakers/sandy-daehnert/">Sustainable Design for Nature and All People</a></h3>



<p>Sandy Dähnert a abordé le sujet crucial du design durable. Elle a souligné l&#8217;importance de considérer l&#8217;impact environnemental du web et a fourni des conseils pratiques pour créer des designs plus légers et éthiques. Sandy a également mis en lumière les liens entre durabilité, accessibilité et santé mentale.</p>



<h3 class="wp-block-heading">Do the Next Right Thing</h3>



<p>John V Willshire a présenté le Zenko Mapping, un cadre pour examiner l&#8217;interaction entre les dimensions sociales et matérielles du processus de design. Il a montré comment cette approche peut être utilisée pour créer un processus de design stratégique holistique.</p>



<h3 class="wp-block-heading">The Shape of AI</h3>



<p>Emily Campbell a exploré les défis et opportunités liés à l&#8217;intégration de l&#8217;IA dans les produits. Elle a partagé son expérience dans la création d&#8217;expériences IA centrées sur l&#8217;humain et a fourni des conseils pratiques pour concevoir, évaluer et déployer des produits IA à grande échelle.</p>



<h3 class="wp-block-heading"><a href="https://localghostslides.neocities.org/migrations/">So You’ve Decided to Do a Technical Migration</a></h3>



<p>Sophie Koonin a partagé son expérience de migration vers TypeScript chez Monzo. Elle a fourni des conseils précieux sur la planification et l&#8217;exécution de migrations techniques, soulignant l&#8217;importance de commencer petit, de centraliser les efforts et de mesurer les progrès.</p>



<h3 class="wp-block-heading">Bridge the Gap between Design and Development, One Token at a Time</h3>



<p>Samantha Gordashko a présenté les design tokens comme un moyen d&#8217;améliorer la collaboration entre designers et développeurs. Elle a montré comment les tokens peuvent rationaliser les flux de travail et assurer la cohérence, tout en fournissant des conseils pratiques pour leur mise en œuvre.</p>



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



<p>Cette conférence a offert un aperçu fascinant des dernières tendances et meilleures pratiques dans le domaine du web, couvrant des sujets allant de l&#8217;optimisation des performances à l&#8217;éthique du design, en passant par l&#8217;IA et l&#8217;accessibilité. Nous sommes repartis avec de nombreuses idées et outils pratiques à mettre en œuvre dans nos propres projets.</p>


Smashing Conference Freiburg 2024 : Un condensé d’innovation et de bonnes pratiques web


<p>Un <strong>rapport d&#8217;activité web&nbsp;</strong> est un un ensemble de données qui résume les activités, les performances, et les réalisations d&#8217;une organisation, d’une fondation ou d’une entreprise sur une période spécifique, généralement une année.</p>



<p>Le rapport d&#8217;activité en ligne est présenté sous forme de site web et peut être consulté à l&#8217;aide d&#8217;une simple URL.<br><br>Ci-dessous une sélection de <strong>rapport d’activité web</strong> pouvant vous servir d’exemples et d’inspiration:</p>



<ul>
<li>La <strong>Vaudoise assurance</strong> – rapport d’activité web: <a href="https://reporting.vaudoise.ch/rapport-2023/">https://reporting.vaudoise.ch/rapport-2023/</a><br></li>



<li><strong>EPFL</strong> &#8211; rapport d’activité web: <a href="https://rapport-annuel.epfl.ch/fr/2023">https://rapport-annuel.epfl.ch/fr/2023</a><br></li>



<li><strong>HUG</strong> &#8211; rapport d’activité web: <a href="https://panorama.hug.ch/">https://panorama.hug.ch/</a><br></li>



<li><strong>ECA</strong> &#8211; rapport d’activité web: <a href="https://ra23.eca-vaud.ch/">https://ra23.eca-vaud.ch/</a></li>
</ul>



<p><br>Nous sommes à votre disposition pour en discuter et réaliser votre futur <strong>rapport d&#8217;activité web</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>


Un Rapport d’activité Web pour mieux communiquer


<p class="is-style-lead">Récemment, l’un de nos clients, une société immobilière, nous a lancé un défi. Ils souhaitaient une carte interactive présentant l’ensemble de leurs propriétés à travers le monde. Le hic ? Ils possèdent plus d’un million de propriétés. Et c’est ainsi que notre aventure a commencé.</p>



<figure class="wp-block-image is-style-default"><img decoding="async" loading="lazy" width="800" height="459" src="https://content.antistatique.net/app/uploads/2024/08/image.gif" alt="Final map showcasing the East Coast of North America." class="wp-image-15433"/><figcaption class="wp-element-caption"><br>Le résultat de notre carte. Continuez à lire pour découvrir comment nous avons réalisé cela 🥸</figcaption></figure>



<p>À première vue, cela semblait simple. Le véritable défi <strong>n’était pas seulement d’afficher des millions de propriétés</strong>, mais de le faire de manière rapide et efficace. Une carte qui charge les marqueurs lentement ou qui plante sous le poids des données serait un désastre.</p>



<h2 class="wp-block-heading">Le scope</h2>



<p>Les exigences initiales sont assez simples :</p>



<ol class="is-style-default">
<li><strong>Afficher des millions de propriétés à travers le monde.</strong></li>



<li><strong>Montrer des clusters de propriétés lorsque beaucoup se trouvent à proximité, en s’ajustant dynamiquement</strong> au fur et à mesure que les utilisateurs zooment ou dézooment.</li>



<li><strong>La carte doit être extrêmement rapide</strong>, quel que soit l’emplacement ou le nombre de propriétés visibles à l’écran.</li>
</ol>



<p>Je sentais que ce ne serait pas simplement une question de récupérer des données depuis notre Elasticsearch et de les afficher sur une carte.</p>



<p>Imaginez essayer d’afficher chaque propriété comme un marqueur. Le résultat serait une mer de points indéchiffrable, submergeant à la fois la carte et l’utilisateur.</p>



<figure class="wp-block-image is-style-default"><img decoding="async" loading="lazy" width="640" height="481" src="https://content.antistatique.net/app/uploads/2024/08/image.jpeg" alt="A Map full of markers" class="wp-image-15435" srcset="https://content.antistatique.net/app/uploads/2024/08/image.jpeg 640w, https://content.antistatique.net/app/uploads/2024/08/image-300x225.jpeg 300w" sizes="(max-width: 640px) 100vw, 640px" /><figcaption class="wp-element-caption">beaucoup de monde ici, n’est-ce pas ?</figcaption></figure>



<p>Même avec un clustering côté client, le véritable défi serait la taille de nos données. Imaginez simplement le poids d’une requête API contenant des millions de marqueurs — ce serait un cauchemar pour le transfert de données et le pire ennemi de votre forfait mobile.</p>



<h2 class="wp-block-heading">Nous devions trouver une solution qui équilibre performance, évolutivité et fonctionnalité.</h2>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="692" height="533" src="https://content.antistatique.net/app/uploads/2024/08/1_hni8dSqW31N-1UC3nglZZA.png" alt="A Map with client-side clustering only" class="wp-image-15405" srcset="https://content.antistatique.net/app/uploads/2024/08/1_hni8dSqW31N-1UC3nglZZA.png 692w, https://content.antistatique.net/app/uploads/2024/08/1_hni8dSqW31N-1UC3nglZZA-300x231.png 300w" sizes="(max-width: 692px) 100vw, 692px" /><figcaption class="wp-element-caption"><br>Tout ce dont la plupart des projets auront besoin : le clustering côté client 📍</figcaption></figure>



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



<p>Nous avions besoin d’une solution qui équilibre performance, évolutivité et fonctionnalités. Nous avons donc commencé par décomposer le problème.</p>



<h3 class="wp-block-heading">Filtrage par <strong>Bounding Box</strong></h3>



<p>Pour réduire le nombre d’éléments demandés depuis notre index, nous avons décidé d’imposer à l’application frontend de fournir une boîte englobante. Cette boîte englobante représenterait la portion visible de la carte sur l’écran de l’utilisateur, en filtrant toutes les propriétés en dehors de cette zone.</p>



<figure class="wp-block-image is-resized is-style-default"><img decoding="async" loading="lazy" src="https://content.antistatique.net/app/uploads/2024/08/image-1.png" alt="A map with a transparent rectangle over it that attempts to explain what is a Bounding Box." class="wp-image-15441" style="width:1055px;height:440px" width="1055" height="440"/><figcaption class="wp-element-caption">La bounding box est un système de coordonnées rectangulaires utilisé pour définir une zone géographique sur les cartes.</figcaption></figure>



<p>Cependant, cela ne suffira pas à lui seul — si un utilisateur dézoome pour voir le monde entier, le jeu de données pourrait encore être énorme.</p>



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



<p>Ici, nous abordons le volume de données. Des millions de propriétés signifiaient des millions de points de données individuels. Envoyer tout cela vers le frontend était hors de question. <strong>Le clustering côté serveur était la solution évidente</strong>.</p>



<p>Au lieu d’afficher chaque propriété individuellement, nous allions regrouper les propriétés proches et afficher un seul marqueur avec un nombre représentant le total. Cela réduirait considérablement le nombre d’éléments que notre API backend devait envoyer, rendant la carte plus lisible et efficace.</p>



<p>En utilisant Elasticsearch, nous avons mis en place <a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-geotilegrid-aggregation.html">l’agrégation par Geotile grid</a> pour gérer le clustering de nos géodonnées. Cela nous a permis d’agréger les propriétés en clusters basés sur leur emplacement géographique.</p>



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



<p>Puis une autre question s’est posée : comment pourrions-nous mélanger de manière fluide à la fois des clusters et des marqueurs individuels ? L’agrégation par Geotile grid d’Elasticsearch ne nous permettait pas d’exposer à la fois des <strong>marqueurs</strong> et des <strong>clusters</strong> simultanément via notre API. Nous étions déterminés à offrir la meilleure expérience utilisateur possible, donc avoir des clusters d’un seul élément au lieu d’afficher le marqueur réel n’était pas une option (du moins pas à grande échelle)</p>



<figure class="wp-block-image is-style-default"><img decoding="async" loading="lazy" width="1600" height="1610" src="https://content.antistatique.net/app/uploads/2024/08/image.png" alt="A map full of clusters containg a single marker" class="wp-image-15437" srcset="https://content.antistatique.net/app/uploads/2024/08/image.png 1600w, https://content.antistatique.net/app/uploads/2024/08/image-298x300.png 298w, https://content.antistatique.net/app/uploads/2024/08/image-150x150.png 150w, https://content.antistatique.net/app/uploads/2024/08/image-768x773.png 768w, https://content.antistatique.net/app/uploads/2024/08/image-1526x1536.png 1526w" sizes="(max-width: 1600px) 100vw, 1600px" /><figcaption class="wp-element-caption"><br>Ce qui peut résulter d’une stratégie de clustering côté serveur, c’est d’avoir des clusters ne contenant qu’un seul élément.</figcaption></figure>



<p>Après une bonne discussion autour d’un café, nous avons élaboré une stratégie pour <strong>combiner le clustering côté serveur et côté client.</strong></p>



<figure class="wp-block-image is-style-default"><img decoding="async" loading="lazy" width="480" height="270" src="https://content.antistatique.net/app/uploads/2024/08/image-1.gif" alt="The meme “Tim And Eric’s Mind Blown”" class="wp-image-15439"/><figcaption class="wp-element-caption">Mix server-side et client-side clustering 🤯</figcaption></figure>



<p>Nous avons créé deux endpoints:</p>



<ul class="is-style-default">
<li><code>/clusters</code> pour la navigation à un niveau élevé (niveaux de zoom 0-10) où les propriétés sont fortement regroupées. Cependant, ce endpoint peut encore renvoyer des clusters ne contenant qu’une seule propriété.</li>



<li><code>/markers</code> pour une inspection plus approfondie (niveaux de zoom 11-30) où les propriétés individuelles peuvent être affichées.</li>
</ul>



<p>À des niveaux de zoom plus élevés, nous n’afficherions que des clusters, car chaque tuile de la carte pourrait contenir des milliers d’éléments. Mais à mesure que les utilisateurs zoomaient davantage, le système passerait à l’affichage de marqueurs individuels, garantissant une expérience fluide et réactive.</p>



<p>Cette stratégie nous a permis d’afficher efficacement plus d’un million de propriétés sur une carte, sans compromettre les performances ni l’expérience utilisateur. C’est un équilibre parfait entre innovation et pragmatisme, et cela a prouvé qu’avec la bonne approche, même les défis les plus redoutables peuvent être surmontés.</p>



<h2 class="wp-block-heading">Implémentation backend</h2>



<p>Pour les passionnés de technologie au premier rang, ceci est pour vous. Plongeons dans la mise en œuvre technique de la façon dont nous avons réussi à cartographier plus d’un million de propriétés. Je vais vous expliquer les composants clés de notre configuration Elasticsearch.</p>



<p>Je ne montrerai qu’un sous-ensemble de notre requête pour mettre en évidence certaines parties spécifiques.</p>



<h3 class="wp-block-heading">Configuration de l’index Elasticsearch</h3>



<p>Tout d’abord, pour gérer les données géographiques, votre index Elasticsearch doit être configuré avec une propriété typée comme <code>geo_point</code>. Ce type permet à Elasticsearch de gérer nativement les emplacements géographiques.</p>



<pre class="wp-block-code"><code>PUT /realestate
{
  "mappings": {
    "properties": {
      "location": {
        "type": "geo_point"
      }
    }
  }
}</code></pre>



<p>Cette configuration nous permet de stocker les coordonnées de latitude et de longitude pour chaque propriété, ce qui est crucial pour les fonctionnalités de clustering et de marqueurs qui suivent..</p>



<h3 class="wp-block-heading">Markers Endpoint</h3>



<p>Dans les cas où l’utilisateur zoome de près, nous devons afficher des marqueurs individuels au lieu de clusters. Ce endpoint gère la récupération des propriétés spécifiques dans notre fameuse <em>Bounding Box</em>.</p>



<p>Voici une version de notre requête avec un sous-ensemble de bouding-box:</p>



<pre class="wp-block-code"><code>POST /realestate/_search
{
  "query": {
    "bool": {
      "must": {
        "match_all": {}
      },
      "filter": {
        "geo_bounding_box": {
          "pin.location": {
            "top_left": {
              "lat": 40.73,
              "lon": -74.1
            },
            "bottom_right": {
              "lat": 40.01,
              "lon": -71.12
            }
          }
        }
      }
    }
  }
}</code></pre>



<p>La réponse fournit les coordonnées détaillées de chaque propriété :</p>



<pre class="wp-block-code"><code>&#91;  
  {
   "lat": -34.936909378343,
   "lon": -54.9183369647971,
   "id": "0000c086-fa6d-4e2a-a029-d5af313c7d3f"
  },
  {
   "lat": 49.1631672,
   "lon": -122.0157818,
   "id": "000a2251-dca9-4763-8d69-a8a8c1f7036a"
  },
  {
   "lat": 31.903325,
   "lon": -95.3027039,
   "id": "00116edc-95e0-4a35-8ca3-340344a16620"
  }
  // A millions times ...
]</code></pre>



<p>Ce endpoint nous permet de fournir des données détaillées pour les niveaux de zoom où les clusters ne sont plus nécessaires, garantissant une transition fluide entre les différentes vues de la carte.</p>



<h3 class="wp-block-heading">Clusters Endpoint</h3>



<p>Pour éviter de surcharger le frontend avec des millions de marqueurs individuels, nous avons décidé d’agréger les propriétés en clusters en fonction de leur emplacement géographique. Pour cela, nous avons utilisé l’agrégation <strong><code>geotile_grid</code></strong> d’Elasticsearch. Cette agrégation divise la carte en tuiles, regroupant les propriétés à l’intérieur de chaque tuile.</p>



<p>Voici une version simplifiée de notre requête :</p>



<pre class="wp-block-code"><code>POST /realestate/_search?size=0
{
  "aggregations": {
    "large-grid": {
      "geotile_grid": {
        "field": "location",
        "precision": 8
      }
    }
  }
}</code></pre>



<p>Le paramètre de précision détermine la granularité de la grille — une précision plus élevée signifie des tuiles plus petites. La réponse pourrait ressembler à ceci :</p>



<pre class="wp-block-code"><code>&#91;  
  {
    "key": "8/131/84",
    "doc_count": 3
  },
  {
    "key": "8/129/88",
    "doc_count": 2
  },
  {
    "key": "8/131/85",
    "doc_count": 1
  }
]</code></pre>



<p>Pour faciliter le placement précis des clusters sur le frontend, nous avons calculé le centre géographique, ou centroïde, de chaque cluster. De cette manière, le frontend peut afficher le marqueur du cluster à l’emplacement le plus représentatif dans la grille, sans avoir à le calculer côté client.</p>



<pre class="wp-block-code"><code>POST /realestate/_search?size=0
{
  "aggregations": {
    "large-grid": {
      "geotile_grid": {
        "field": "location",
        "precision": 8
      },
      "aggs": {
        "centroid": {
          "geo_centroid": {
            "field": "location" 
          }
        }
      }
    }
  }
}</code></pre>



<p>La réponse inclut désormais à la fois le nombre de clusters et les coordonnées du centroïde :</p>



<pre class="wp-block-code"><code>&#91;  
  {
   "key": "20/543807/370868",
   "doc_count": 8,
   "geo_centroid": {
    "location": {
     "lat": 46.51612099260092,
     "lon": 6.701349942013621
    }
   }
  },
  {
   "key": "20/545343/372639",
   "doc_count": 4,
   "geo_centroid": {
    "location": {
     "lat": 46.096099968999624,
     "lon": 7.228809949010611
    }
   }
  }
]</code></pre>



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



<p>En mettant en œuvre stratégiquement ces requêtes et points de terminaison Elasticsearch, et <strong>en combinant un mélange de clustering côté client et côté serveur</strong>, nous avons réussi à créer une interface de carte hautement efficace, capable d’afficher des millions de propriétés sans sacrifier les performances. Que ce soit pour le clustering à un niveau de zoom élevé ou pour l’affichage de marqueurs individuels de près, notre solution garantit une expérience fluide et réactive.</p>



<figure class="wp-block-image size-full is-style-default"><img decoding="async" loading="lazy" width="620" height="387" src="https://content.antistatique.net/app/uploads/2024/08/1_QzrdsUAbiYdQbKr-kAMeuA.jpg" alt="The meme &quot;Success Kid&quot;." class="wp-image-15407" srcset="https://content.antistatique.net/app/uploads/2024/08/1_QzrdsUAbiYdQbKr-kAMeuA.jpg 620w, https://content.antistatique.net/app/uploads/2024/08/1_QzrdsUAbiYdQbKr-kAMeuA-300x187.jpg 300w" sizes="(max-width: 620px) 100vw, 620px" /><figcaption class="wp-element-caption"><br>Success&nbsp;! We make it&nbsp;🎉</figcaption></figure>



<p>Votre projet implique-t-il l’affichage de données massives sur une carte interactive ? Contactez-nous — nous pouvons vous aider à concevoir votre index Elasticsearch, développer la carte ou vous fournir des retours sur votre intégration existante.<a href="https://medium.com/@wengerk/8f1d7c5fc10c?source=post_settings_page-----8f1d7c5fc10c----0----------------------------"></a></p>



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



<p>The <a rel="noreferrer noopener" href="https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html" target="_blank">official elasticsearch documentation</a>.</p>



<p></p>



<p><strong>Arthur C. Codex</strong> (2024) Why Clustering your Google Map markers in the server side?<br><a rel="noreferrer noopener" href="https://reintech.io/blog/handling-large-datasets-google-maps-marker-clustering" target="_blank">reintech.io/…/handling-large-datasets-&#8230;-marker-clustering</a></p>



<p><strong>Elastic</strong> (2023) Comparing Geotile and Geohex in Kibana.<br><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=ucI6OeYlu50" target="_blank">youtube.com/watch?v=ucI6OeYlu50</a></p>



<p><strong>Mateusz Jasiński</strong> (2022) Clustering on maps with Elasticsearch.<br><a href="https://medium.com/@mateusz-jasinski/clustering-on-maps-with-elasticsearch-897075a7d1a9" target="_blank" rel="noreferrer noopener">medium.com/@mateusz-jasinski/clustering-on-maps</a></p>



<p><strong>Louis Z.</strong> (2021) Server-side Map Clustering.<br><a href="https://louisz.medium.com/server-side-map-clustering-6798f24bc22" rel="noreferrer noopener" target="_blank">louisz.medium.com/server-side-map-clustering</a></p>



<p><strong>Victor Barzana</strong> (2020) Why Clustering your Google Map markers in the server side?<br><a href="https://viticoinf.medium.com/why-clustering-your-google-map-markers-in-the-server-side-49ea2d7f3700" rel="noreferrer noopener" target="_blank">viticoinf.medium.com/why-clustering-your-google-map-markers</a></p>



<p><strong>Ion Bazan</strong> (Apr, 2021) Efficiently resolving composer.lock merge conflicts.<br><a rel="noreferrer noopener" href="https://dev.to/ionbazan/efficiently-resolving-composer-lock-merge-conflicts-1peb" target="_blank">https://dev.to/ionbazan/efficiently-resolving-composer-lock-merge-conflicts-1peb</a></p>



<p><strong>Mika Tuupola</strong> (2008) Introduction to Marker Clustering With Google Maps<br><a rel="noreferrer noopener" href="https://www.appelsiini.net/2008/introduction-to-marker-clustering-with-google-maps/" target="_blank">appelsiini.net/2008/introduction-to-marker-clustering-with-google-maps</a></p>



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



<p><strong>ChatGPT</strong>, <a rel="noreferrer noopener" href="http://chat.openapi.com/" target="_blank">http://chat.openapi.com</a><br>Pour aider à la rédaction et à la traduction</p>



<p><strong>Claude AI, </strong><a rel="noreferrer noopener" href="https://claude.ai/" target="_blank">https://claude.ai</a><br>Pour la génération du code pour expliquer les concepts</p>


Un million d’éléments sur une carte interactive, mode d’emploi.


<p>L&#8217;innovation est l&#8217;une des raisons qui nous motivent et nous poussent à aller de l&#8217;avant. Maintenant, <strong>peut-on encore parler d&#8217;innovation quand on travaille avec de l&#8217;intelligence artificielle ? </strong>Sous cette appellation très racoleuse, utilisée pour vulgariser les progrès technologiques faits autour du <em>deep learning</em> et des modèles de langage, se cache encore <strong>un océan de possibles</strong>. En effet, il est intéressant d&#8217;avoir à sa disposition un champ texte qui répond à toutes nos questions et toutes nos demandes, encore faut-il savoir quoi en faire. Maintenant que ces nouveaux outils sont disponibles, nous avons la prochaine décennie pour en définir les champs d&#8217;application.</p>



<h2 class="wp-block-heading">Première expérience</h2>



<p>Fière d&#8217;être à l&#8217;avant-garde dans son domaine, notre agence souhaite rendre publique et mettre en avant ses recherches internes. Ceci afin qu&#8217;on puisse aussi nous connaître, en plus des projets dont nous sommes particulièrement fiers, pour des réalisations plus expérimentales et immersives, des expériences uniques.</p>



<p>Pour <a href="https://maya.antistatique.net/" data-type="link" data-id="https://maya.antistatique.net/" target="_blank" rel="noreferrer noopener">cette première réalisation</a>, nous avons orienté notre réflexion autour de l&#8217;intelligence artificielle et de ce que ces outils pourraient apporter à un produit web. Nous avons matérialisé ce concept à travers l&#8217;idée de se faire guider dans notre beau pays par une IA, un modèle de langage, qui pourrait nous présenter des lieux sélectionnés et répondre à toutes nos questions les concernant. N&#8217;étant pas réellement le public cible, l&#8217;idée est de proposer cette visite guidée au monde entier, chacun dans sa langue maternelle.</p>



<figure class="wp-block-image size-full is-style-full-width"><img decoding="async" loading="lazy" width="1608" height="1127" src="https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.13.23.png" alt="" class="wp-image-14603" srcset="https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.13.23.png 1608w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.13.23-300x210.png 300w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.13.23-768x538.png 768w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.13.23-1536x1077.png 1536w" sizes="(max-width: 1608px) 100vw, 1608px" /></figure>



<h2 class="wp-block-heading">Maya est née</h2>



<p>Bien que très motivés d&#8217;entraîner nous-mêmes un LLM, l&#8217;IA derrière les présentations et réponses, la contrainte de temps que nous nous sommes fixé pour réaliser se projet, soit six jours, ne nous permettait pas d&#8217;aller aussi loin. Surtout sachant que des modèles-services extrêmement performants et “intelligents” sont disponibles. Nous avons opté pour GPT-4o, dernier arrivant d&#8217;OpenAI, qui, en plus de donner des informations très satisfaisantes, supporte un très grand nombre de langues.</p>



<p>Maintenant, il ne s&#8217;agit pas simplement d&#8217;envoyer des requêtes à l&#8217;API d&#8217;OpenAI, il faut aussi définir l&#8217;identité de notre IA. Nous avons opté pour Maya, une marmotte spécialisée dans le tourisme suisse qui n&#8217;acceptera de répondre qu&#8217;à des questions et demandes concernant des sujets relatifs à la Suisse.</p>



<figure class="wp-block-image size-full is-style-full-width"><img decoding="async" loading="lazy" width="1629" height="1127" src="https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.15.26.png" alt="" class="wp-image-14609" srcset="https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.15.26.png 1629w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.15.26-300x208.png 300w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.15.26-768x531.png 768w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.15.26-1536x1063.png 1536w" sizes="(max-width: 1629px) 100vw, 1629px" /></figure>



<h2 class="wp-block-heading">Multilingue par nature</h2>



<p>Avec nos quatre langues nationales, nous sommes bien placés pour comprendre l&#8217;importance d&#8217;offrir une expérience en langue maternelle. C&#8217;est là tout l&#8217;intérêt de l&#8217;intelligence artificielle qui est capable de comprendre et répondre dans une multitude de langues. On ne se limite plus aux quelques langues maîtrisées par les guides locaux, qui vont généralement basculer sur l&#8217;anglais avec des dialectes peu courants. Maya est capable de tenir une conversation aussi bien en tamoul qu&#8217;en swahili. On casse la barrière de la langue pour entrer et comprendre la Suisse.</p>



<h2 class="wp-block-heading">Survoler les reliefs</h2>



<p>Pour pouvoir visiter la Suisse depuis l&#8217;écran de son ordinateur ou de son téléphone portable, quoi de mieux qu&#8217;une carte en 3D ? Grâce à la technologie de Mapbox et à l&#8217;imagerie de l&#8217;Office fédéral de topographie, swisstopo, nous avons pu mettre en place une visualisation immersive de la visite guidée, mais aussi de l&#8217;exploration autonome. Il suffit de cliquer sur le nom d&#8217;un lieu, ville ou sommet, pour en avoir une description détaillée et une discussion plus approfondie. La carte est l&#8217;interface de navigation et d&#8217;interaction entre l&#8217;internaute et l&#8217;intelligence artificielle.</p>



<figure class="wp-block-image size-full is-style-full-width"><img decoding="async" loading="lazy" width="1623" height="1127" src="https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.17.57.png" alt="" class="wp-image-14612" srcset="https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.17.57.png 1623w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.17.57-300x208.png 300w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.17.57-768x533.png 768w, https://content.antistatique.net/app/uploads/2024/07/CleanShot-2024-07-08-at-15.17.57-1536x1067.png 1536w" sizes="(max-width: 1623px) 100vw, 1623px" /></figure>



<h2 class="wp-block-heading">Aller plus loin</h2>



<p>Six jours pour explorer ce concept nous obligent à aller à l&#8217;essentiel; soit une visite guidée par IA de la Suisse. Maintenant on pourrait aller beaucoup plus loin en créant dynamiquement un itinéraire basé sur ce que l&#8217;on souhaite découvrir du pays ou alors en proposant des activités autour de nous. Et ce n&#8217;est que deux petites pistes lancées comme ça, imaginer ce qu&#8217;il serait possible de faire avec plus de temps !</p>



<p>Bien qu&#8217;à l&#8217;aube de cette nouvelle ère, nous avons déjà de solides connaissances autour des possibilités qu&#8217;amène l&#8217;intelligence artificielle. N&#8217;hésitez pas à prendre contact avec notre équipe pour définir, ensemble, quelles opportunités s&#8217;offrent à vous et à votre projet !</p>


Experiment #1 — Suisse, Grand Tour


<p class="is-style-lead">Le référencement naturel (SEO) est devenu un élément indispensable pour toute entreprise souhaitant gagner en visibilité sur le web. Au cœur de cette stratégie, l&#8217;optimisation du contenu joue un rôle primordial. </p>



<p>Cet article vous donnera les bonnes pratiques pour <a href="https://antistatique.net/blog/le-seo-retour-a-la-base-pour-une-strategie-de-referencement-efficace">mettre en place une stratégie de référencement efficace</a> et créer du contenu de qualité ou optimiser celui que vous avez déjà existant afin de répondre aux attentes des moteurs de recherche et surtout ceux des utilisateurs.</p>



<p>Voici les différentes étapes qui constituent les bonnes pratiques à suivre en SEO.</p>



<h2 class="wp-block-heading"><strong>I. Comprendre l&#8217;intention de recherche</strong></h2>



<p>Une intention de recherche est le but derrière chaque recherche tapée sur un moteur de recherche. Comprendre et répondre à l&#8217;intention de recherche des internautes est le rôle de Google. </p>



<p>Il est donc essentiel de connaître les différents types d’intention de recherche afin de choisir celui qui est le plus pertinent pour votre contenu.</p>



<h3 class="wp-block-heading is-style-default"><strong>Les 4 types d&#8217;intention de recherche :</strong> </h3>



<ul>
<li><strong>Informationnelle :</strong> Une recherche relève de l&#8217;intention informationnelle lorsque l&#8217;utilisateur recherche des informations spécifiques.
<ul>
<li>Exemples : « quel temps fait-il aujourd&#8217;hui ? » / « les meilleures stratégies SEO / les meilleures agences web »<br></li>
</ul>
</li>



<li><strong>Navigationnelle :</strong> Dans ce cas, l&#8217;internaute recherche un site web ou une application spécifique.
<ul>
<li>Exemples : « Antistatique » / « connexion Facebook »<br></li>
</ul>
</li>



<li><strong>Commerciale :</strong> L&#8217;intention derrière une recherche est commerciale lorsque l&#8217;utilisateur recherche un produit spécifique, mais n&#8217;a pas encore pris de décision finale.
<ul>
<li>Exemples : « meilleurs outils SEO » / « meilleurs appareils photo reflex numériques »&nbsp;<br></li>
</ul>
</li>



<li><strong>Transactionnelle :</strong> L&#8217;intention ici est d&#8217;acheter. L&#8217;internaute a déjà pris la décision d&#8217;acheter un produit ou un outil spécifique.
<ul>
<li>Exemples : « acheter Nikon d500 » / « acheter Macbook Air » / « acheter des produits alimentaires en ligne »</li>
</ul>
</li>
</ul>



<p>Pour conclure cette étape, c&#8217;est en intégrant des mots-clés pertinents et en répondant précisément aux requêtes des utilisateurs, que vous pourrez améliorer considérablement le positionnement de votre site dans les résultats de recherche.</p>



<h2 class="wp-block-heading"><strong>II. Compléter les balises title et meta description</strong></h2>



<p>La meta title  et la meta description de votre page sont deux balises essentielles pour un bon référencement.&nbsp;</p>


<div style="display: flex; flex-direction: row;">
    <div style="flex-basis: 50%; margin-right: 145px;">
                    <p style="font-weight: bold; font-family: Fragen; margin: 0; padding-bottom: 20px; font-size: 34px; color: #000032;">La balise title (ou meta title)</p>
            <p style="margin: 0; color: #4D4D70; font-size: 21px; line-height: 31.5px;">La balise title correspond au titre visible sur Google lors d’une recherche et qui est cliquable par l’internaute. 
</p>
            </div>
    <div style="flex-basis: 50%;">
                                                      <figure style="margin: 0 0 40px 0; width: 660px; height: 416px;">
                      <img decoding="async" src="https://content.antistatique.net/app/uploads/2024/08/meta-title-exemple.png">
                      <figcaption style="font-size: 18px; color: #4D4D70;"></figcaption>
                  </figure>
                            </div>
</div>


<div style="display: flex; flex-direction: row;">
    <div style="flex-basis: 50%; margin-right: 145px;">
                    <p style="font-weight: bold; font-family: Fragen; margin: 0; padding-bottom: 20px; font-size: 34px; color: #000032;">La balise meta description</p>
            <p style="margin: 0; color: #4D4D70; font-size: 21px; line-height: 31.5px;">La meta description est un bref résumé d&#8217;une page qui s’affiche sous la balise title lors d’une recherche. </p>
            </div>
    <div style="flex-basis: 50%;">
                                                      <figure style="margin: 0 0 40px 0; width: 660px; height: 416px;">
                      <img decoding="async" src="https://content.antistatique.net/app/uploads/2024/08/meta-description-exemple.png">
                      <figcaption style="font-size: 18px; color: #4D4D70;"></figcaption>
                  </figure>
                            </div>
</div>



<h3 class="wp-block-heading">Comment optimiser la balise title et la meta description de ma page ?</h3>



<p>Il faut savoir qu’une meta description n’aura pas d’influence sur le classement des moteurs de recherche, toutefois elle reste importante, car elle permet à l’internaute de comprendre le contenu de la page.&nbsp;</p>



<p>Voici les principales règles à suivre </p>



<ul>
<li><strong>Ne pas dépasser le nombre de défini par Google</strong>, car il n&#8217;affichera pas tout le contenu si c’est plus long
<ul>
<li>Balise title : <strong>60 caractères max</strong>.</li>



<li>Balise meta description : <strong>160 caractères</strong></li>
</ul>
</li>



<li><strong>Rédiger des contenus uniques pour chaque balise</strong> de chaque page. Google déteste les doublons !</li>



<li><strong>Inclure vos mots clés cibles</strong>, tout en évitant la sur-optimisation en ajoutant pleins de mots-clés “inutiles”</li>



<li><strong>Rédiger des contenus descriptif , mais précis</strong> et qui correspondent à l&#8217;<strong>intention de recherche</strong><br></li>
</ul>



<h2 class="wp-block-heading"><strong>III. Optimiser les images</strong></h2>



<p>L&#8217;optimisation des images est cruciale pour réduire le temps de chargement des pages, un facteur clé pour améliorer l&#8217;expérience utilisateur et le classement dans les résultats de recherche.</p>



<p>Comme expliqué dans notre <a href="https://antistatique.net/blog/referencement-naturel-comment-bien-optimiser-le-referencement-des-images">article précédent sur l&#8217;optimisation des images</a>, celle-ci doit se faire avant et après sa publication sur votre site :</p>



<p><strong>Avant publication : </strong></p>



<ul>
<li><strong>Choisir le meilleur format de fichier</strong> (PNG, JPEG, voire même idéalement WebP)</li>



<li><strong>Définir un nom de fichier contenant des mots-clés optimisés</strong> pour la page</li>



<li><strong>Compresser les images</strong>
<ul>
<li>Plus la taille de l’image est grande, plus elle met du temps à charger, donc il est préférable d’avoir l’image la plus petite possible.</li>
</ul>
</li>
</ul>



<p><strong>Après publication : </strong></p>



<ul>
<li><strong>Fournir un text alt sur chaque image importante</strong> dans le contenu
<ul>
<li>Le texte alt est un attribut HTML essentiel pour l&#8217;accessibilité et le référencement des images. Il permet aux moteurs de recherche de mieux comprendre le contexte de l&#8217;image et d&#8217;améliorer son indexation.</li>



<li>En optimisant les textes alt avec des mots-clés pertinents, vous augmentez la visibilité de vos images dans les résultats de recherche d&#8217;images.<br></li>
</ul>
</li>
</ul>



<h2 class="wp-block-heading"><strong>IV. Optimiser l&#8217;expérience utilisateur</strong></h2>



<p>Les moteurs de recherche étudient le comportement des internautes sur votre site. Une bonne structure de contenu facilite leur navigation et améliore votre référencement.</p>



<p>Pour ce faire, quelques astuces peuvent être mises en place pour structurer vos contenus et améliorer le parcours utilisateur :&nbsp;</p>



<ul>
<li><strong>Utiliser des sous-titres (H2, H3, H4) </strong>pour structurer les contenus et aider les moteurs de recherche à analyser facilement le contenu de la page</li>



<li><strong>Rendre le contenu visuellement attrayant</strong> en utilisant des images et des vidéos optimisées
<ul>
<li>N’hésitez pas également à garder des espaces blancs afin de faciliter la lecture</li>
</ul>
</li>



<li><strong>Éviter l’ajout de pop-ups intrusifs</strong> sur les pages</li>
</ul>



<h2 class="wp-block-heading"><strong>V. </strong>Construire un bonne structure de liens internes</h2>



<p>Les liens internes sont importants, car ils établissent une hiérarchie de l&#8217;information sur votre site web et aident également Google à mieux comprendre le contenu de votre page.</p>



<p>Pour optimiser votre référencement, il est recommandé de mettre en place des liens entre vos pages les plus performantes et celles nécessitant un coup de pouce en termes de classement.</p>



<p>Techniquement, pour faire cela, il vous suffit, par exemple, de mettre des liens hypertextes dans le contenu de vos pages “fortes” qui ramènent vers des pages spécifiques “plus faibles”.</p>



<h2 class="wp-block-heading"><strong>VI. </strong>Rendre vos URLs SEO-friendly</h2>



<p>La structure des URL est un aspect souvent négligé du SEO. Mais une bonne structure d&#8217;URL donne aux utilisateurs et aux moteurs de recherche un aperçu du contenu de la page de destination.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">La structure des URL d&#8217;un site doit être aussi simple que possible. Organisez votre contenu de manière à donner aux URL une structure logique et facile à comprendre. Remplacez, si possible, les ID trop longs par des termes compréhensibles.</p>
    <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
                          <div style="display: flex; flex-direction: column; justify-content: center;">
            <p style="margin: 0 0 0 20px; font-size: 18px; color: #000032">– Google</p>
                      </div>
            </div>
</div>



<p>Voici les règles à suivre :&nbsp;</p>



<ul>
<li><strong>Utiliser des URL courtes</strong>&nbsp;</li>



<li><strong>Avoir votre mots clés cible</strong> dans l’URL</li>



<li>Inclure des catégories ou des sous-dossiers, si nécessaire, afin d’aider les utilisateurs et les moteurs de recherche à naviguer sur votre site</li>
</ul>



<h2 class="wp-block-heading">Avoir des backlinks pertinents et fiables</h2>



<p>Les moteurs de recherche considèrent les backlinks comme un signal de classement de votre site web. Google reconnaît les backlinks comme des votes de confiance.</p>



<p><strong>Si vos pages ont de nombreux backlinks faisant autorité, elles ont plus de chances de bien se positionner sur les moteurs de recherche</strong>. Il est donc important d’analyser les backlinks d’un site et de <strong>nettoyer les liens qui pourraient être “Toxiques”</strong> pour votre classement.</p>



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



<p>L&#8217;optimisation du contenu est un processus continu qui nécessite une analyse régulière des résultats et une adaptation aux évolutions des algorithmes des moteurs de recherche. </p>



<p>En suivant les conseils de cet article, vous serez en mesure d&#8217;améliorer significativement le référencement de votre site web et d&#8217;attirer un trafic qualifié.</p>



<p>Si vous n&#8217;avez pas les compétences en interne, n&#8217;hésitez pas à faire appel à un professionnel SEO qui pourrait vous guider et vous aider à mettre cela en place.</p>


Optimiser son contenu pour un meilleur référencement SEO : Le guide complet


<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.antistatique.net/app/uploads/2024/06/Screenshot-2024-06-04-at-21.11.25.png 1104w, https://content.antistatique.net/app/uploads/2024/06/Screenshot-2024-06-04-at-21.11.25-300x194.png 300w, https://content.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.antistatique.net/app/uploads/2024/04/1000003799-1-1-2600x2600.jpg 2600w, https://content.antistatique.net/app/uploads/2024/04/1000003799-1-1-300x300.jpg 300w, https://content.antistatique.net/app/uploads/2024/04/1000003799-1-1-150x150.jpg 150w, https://content.antistatique.net/app/uploads/2024/04/1000003799-1-1-768x768.jpg 768w, https://content.antistatique.net/app/uploads/2024/04/1000003799-1-1-1536x1536.jpg 1536w, https://content.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.antistatique.net/app/uploads/2024/04/1000003805-1-2600x1462.jpg 2600w, https://content.antistatique.net/app/uploads/2024/04/1000003805-1-300x169.jpg 300w, https://content.antistatique.net/app/uploads/2024/04/1000003805-1-768x432.jpg 768w, https://content.antistatique.net/app/uploads/2024/04/1000003805-1-1536x864.jpg 1536w, https://content.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.antistatique.net/app/uploads/2024/04/GJw8Fu1XIAAQcQH.jpg 1200w, https://content.antistatique.net/app/uploads/2024/04/GJw8Fu1XIAAQcQH-300x169.jpg 300w, https://content.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.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.antistatique.net/app/uploads/2024/04/1000003827-1-2600x2600.jpg 2600w, https://content.antistatique.net/app/uploads/2024/04/1000003827-1-300x300.jpg 300w, https://content.antistatique.net/app/uploads/2024/04/1000003827-1-150x150.jpg 150w, https://content.antistatique.net/app/uploads/2024/04/1000003827-1-768x768.jpg 768w, https://content.antistatique.net/app/uploads/2024/04/1000003827-1-1536x1536.jpg 1536w, https://content.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.antistatique.net/app/uploads/2024/04/1000003802-1-2600x2600.jpg 2600w, https://content.antistatique.net/app/uploads/2024/04/1000003802-1-300x300.jpg 300w, https://content.antistatique.net/app/uploads/2024/04/1000003802-1-150x150.jpg 150w, https://content.antistatique.net/app/uploads/2024/04/1000003802-1-768x768.jpg 768w, https://content.antistatique.net/app/uploads/2024/04/1000003802-1-1536x1536.jpg 1536w, https://content.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.antistatique.net/app/uploads/2024/04/1000003831-1-2600x2600.jpg 2600w, https://content.antistatique.net/app/uploads/2024/04/1000003831-1-300x300.jpg 300w, https://content.antistatique.net/app/uploads/2024/04/1000003831-1-150x150.jpg 150w, https://content.antistatique.net/app/uploads/2024/04/1000003831-1-768x768.jpg 768w, https://content.antistatique.net/app/uploads/2024/04/1000003831-1-1536x1536.jpg 1536w, https://content.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.antistatique.net/app/uploads/2024/04/1000003800-1-2600x2600.jpg 2600w, https://content.antistatique.net/app/uploads/2024/04/1000003800-1-300x300.jpg 300w, https://content.antistatique.net/app/uploads/2024/04/1000003800-1-150x150.jpg 150w, https://content.antistatique.net/app/uploads/2024/04/1000003800-1-768x768.jpg 768w, https://content.antistatique.net/app/uploads/2024/04/1000003800-1-1536x1536.jpg 1536w, https://content.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>


Our enthusiasm is contagious

The Agency life, the latest news, and newly won mandates!

The Agency life, the latest news, and newly won mandates!