
<p>Vous avez toujours rêvé d&rsquo;en savoir un peu plus sur <a rel="noreferrer noopener" href="https://antistatique.net/equipe/alberto" target="_blank">Alberto</a>, l&rsquo;un des fondateurs et associés d&rsquo;Antistatique ? </p>



<p>Ça tombe bien, on lui a posé quelques questions, afin de mieux cerner d&rsquo;où lui vient toute son énergie, son dynamisme et également pour en savoir un peu plus sur les origines de l&rsquo;agence&#8230;</p>



<p>Prenez un <a href="https://www.instagram.com/redbullswitzerland">Redbull</a>, mettez un peu de <a href="https://open.spotify.com/playlist/32666w3NS8j0LwWAPh88WN?si=4a535d4aadbb42a5">musique</a> et accrochez-vous, c&rsquo;est parti !<br><br><img loading="lazy" width="595" height="397" class="wp-image-9458" style="width: 650px;" src="https://content.antistatique.net/app/uploads/2022/06/Alberto_Antistatique-copie.jpg" alt="Alberto Gomez Antistatique" srcset="https://content.antistatique.net/app/uploads/2022/06/Alberto_Antistatique-copie.jpg 595w, https://content.antistatique.net/app/uploads/2022/06/Alberto_Antistatique-copie-300x200.jpg 300w" sizes="(max-width: 595px) 100vw, 595px" /></p>



<h3><strong>Comment as-tu eu l’envie de créer Antistatique ? Es-tu fier de son évolution ?</strong></h3>



<p><strong>La première étape:</strong> c’est en voyant <a rel="noreferrer noopener" href="https://antistatique.net/equipe/marc" target="_blank">Marc</a> (mon associé depuis 14 ans et ami depuis 20) travailler sur des projets lors de nos études. Il était le meilleur de la classe et a survolé les cours. Après les journées de cours, il travaillait sur des projets pour sa famille, ses amis et quelques clients. J’admirais sa capacité à créer un site Internet de A à Z…et je voulais faire comme lui. (Raté.)</p>



<p><strong>La deuxième étape:</strong> lors d’un stage en tant que « Webdesigner » au sein d’UNICOM agence de communication de l’<a rel="noreferrer noopener" href="https://unil.ch/" target="_blank">université de Lausanne</a>, j’ai découvert l’ensemble des métiers de la communication en agence: webdesigner, graphiste, web developer, directeur artistique, photographe, responsable technique …et celui de <strong>directeur d’agence. </strong>Et c’est concrètement à cet instant, que j’ai découvert que ma place était la sienne.</p>



<p>Concernant la fierté, je suis en effet assez fier de l&rsquo;évolution. Nous avons démarré nos meetings clients dans un fast food et maintenant nous pouvons accueillir nos clients dans nos bureaux de <a href="https://antistatique.net/agence-web">Genève et Lausanne</a>. Mais je pense que la plus grande des fiertés, c&rsquo;est de pouvoir compter sur une équipe soudée &amp; douée pour trouver les meilleures solutions pour nos clients et pour développer l&rsquo;agence.<br>(Une autre petite fierté c&rsquo;est d&rsquo;avoir ouvert un bureau à <a href="https://antistatique.net/blog/remote-a-miami" data-type="URL" data-id="https://antistatique.net/blog/remote-a-miami">Miami</a> durant presque 3 ans) </p>



<p><strong>Quelles sont tes sources d’inspiration ?</strong></p>



<p>Youtube, Spotify, Instagram, Netflix, Nike, PR, …</p>



<p><strong>Parles nous de tes hobbies ?</strong></p>



<p>Ecouter du Reggaeton, Manger, faire du sport, Regarder la Champions League (et prochainement la Challenge League 💔) , écouter de la musique et faire des playlist Spotify (<a href="https://open.spotify.com/playlist/32666w3NS8j0LwWAPh88WN?si=39cbf04b8abb4b46">de Reggaeton</a>), sortir.</p>



<p><strong>Une musique que tu écouterais en boucle ?</strong></p>



<p>Impossible d’en choisir une, mais bon :<br></p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Ryan Castro, Feid - Monastery (Vídeo Oficial)" width="500" height="281" src="https://www.youtube.com/embed/EOkCOYrPEsU?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<p></p>



<p><strong>Tu es plutôt fête jusqu’au petit matin ou netflix &amp; chill ?</strong>&nbsp;</p>



<p>Fête jusqu’au petit matin.</p>



<p><strong>Une citation qui te parle ?</strong></p>



<p>« More Strategy. Less Ads. »</p>



<p><strong>Un compte insta que tout le monde devrait découvrir ?</strong></p>



<p>Les meilleurs bières : <a href="https://www.instagram.com/brasserieduchateau/" data-type="URL" data-id="https://www.instagram.com/brasserieduchateau/">La Brasserie du Château</a><br>La meilleure Fête: <a rel="noreferrer noopener" href="https://www.instagram.com/houseofperreo/" data-type="URL" data-id="https://www.instagram.com/houseofperreo/" target="_blank">House Of Perreo</a><br>Les meilleurs empanadas: <a href="https://www.instagram.com/bondi_empanadas/" data-type="URL" data-id="https://www.instagram.com/bondi_empanadas/">Bondy Empanadas</a><br>Le meilleure festival: <a rel="noreferrer noopener" href="https://www.instagram.com/electrosanne/" data-type="URL" data-id="https://www.instagram.com/electrosanne/" target="_blank">Electrosanne</a><br>La meilleure coach: <a rel="noreferrer noopener" href="https://www.instagram.com/soso_coach/" data-type="URL" data-id="https://www.instagram.com/soso_coach/" target="_blank">Soso Coach</a><br>Les boss du offline: <a rel="noreferrer noopener" href="https://www.instagram.com/north_communication/" data-type="URL" data-id="https://www.instagram.com/north_communication/" target="_blank">North communication</a><br>La meilleure pâtissière: <a href="https://www.instagram.com/djellza.lmp8/" data-type="URL" data-id="https://www.instagram.com/djellza.lmp8/">Djellza</a> <br>Un seul rapper: <a rel="noreferrer noopener" href="https://www.instagram.com/yvdre/" data-type="URL" data-id="https://www.instagram.com/yvdre/" target="_blank">Yvdre</a><br>Un seul sound system: <a href="https://www.instagram.com/soldiasound">Soldia Sound</a><br>Un club de foot: <a rel="noreferrer noopener" href="https://www.instagram.com/lausanne_sport/" data-type="URL" data-id="https://www.instagram.com/lausanne_sport/" target="_blank">Lausanne Sport</a><br>Mon nouveau bar à Bogota: <a rel="noreferrer noopener" href="https://www.instagram.com/elsindicato_beer/" target="_blank">El Sindicato</a><br></p>



<p><strong>Un métier qui t’a toujours attiré ?</strong></p>



<p>Je suis clairement frustré de pas avoir une fibre artistique <s>assez </s>développé pour être: Designer, Dj, Rapper, autre…</p>



<p><strong>Cite quelques mots clés qui te définissent bien ?&nbsp;Et à l’opposé ce qui ne te ressemble pas ?</strong></p>



<p>Je suis assez mal-organisé, plutôt multi-tâches et je ne suis pas trop feignant.</p>



<p><strong>Et sinon, plutôt chat ou chien ?</strong>&nbsp;</p>



<p>Plutôt Cruz:<br><img loading="lazy" width="1638" height="2048" class="wp-image-9040" style="width: 300px;" src="https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52.jpeg" alt="Staffie " srcset="https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52.jpeg 1638w, https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52-240x300.jpeg 240w, https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52-768x960.jpeg 768w, https://content.antistatique.net/app/uploads/2022/04/WhatsApp-Image-2022-04-07-at-09.19.52-1229x1536.jpeg 1229w" sizes="(max-width: 1638px) 100vw, 1638px" /></p>


10 questions pour découvrir Alberto

<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">L&rsquo;interface d&rsquo;administration de Drupal par défaut est démodée et ne répond plus aux de normes de conception design modernes.</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">Sascha Eggenberger</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">Designer chez GitLab</p>
                      </div>
            </div>
</div>



<p>Mais croyez-moi, il est <strong>possible de rendre l&rsquo;interface Drupal sexy et simple d&rsquo;utilisation</strong> !</p>



<h2>Evolution</h2>


<div style="display: flex; flex-direction: row;">
    <div style="flex-basis: 8%;"></div>
    <div style="flex-basis: 20%; margin-right: 30px">
        <p style="font-size: 15px; color: #808098; text-align: right;">Commençons par le commencement et comparons l&rsquo;incomparable. </p>
    </div>
    <div style="flex-basis: 40%;">
        <p style="font-size: 21px;"><p>Les changements apportés à Drupal avec <strong>Gin</strong> sont considérables. Que l’ont soit <strong>Développeur</strong>, <strong>Site-Builder</strong> ou <strong>Éditeur</strong>: l’expérience est radicalement <strong>simplifiée</strong> et <strong>clarifiée</strong>.</p>
</p>
    </div>
</div>



<p>Après tout, Drupal a été <strong>pensé par des développeurs</strong>, <strong>construit par des développeurs</strong> et <strong>fait pour des développeurs</strong>.</p>



<figure class="wp-block-gallery aligncenter columns-2 is-cropped is-style-columns-6-6"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Content-Seven-2600x1648.png" alt="" data-id="9374" data-full-url="https://content.antistatique.net/app/uploads/2022/06/Content-Seven.png" data-link="https://antistatique.net/blog/reviser-vos-prejuges-sur-linterface-dadmin-drupal/content-seven/" class="wp-image-9374" srcset="https://content.antistatique.net/app/uploads/2022/06/Content-Seven-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Content-Seven-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Content-Seven-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Content-Seven-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Content-Seven-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption class="blocks-gallery-item__caption">Interface Seven</figcaption></figure></li><li class="blocks-gallery-item"><figure><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Content-Gin-2600x1648.png" alt="" data-id="9372" data-full-url="https://content.antistatique.net/app/uploads/2022/06/Content-Gin.png" data-link="https://antistatique.net/blog/reviser-vos-prejuges-sur-linterface-dadmin-drupal/content-gin/" class="wp-image-9372" srcset="https://content.antistatique.net/app/uploads/2022/06/Content-Gin-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Content-Gin-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Content-Gin-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Content-Gin-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Content-Gin-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption class="blocks-gallery-item__caption">Interface Gin</figcaption></figure></li></ul></figure>



<p>Il faut l&rsquo;assumer, on revient de loin, <strong>très loin même</strong>.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">C&rsquo;est beau ! &#8230; C&rsquo;est sexy ! &#8230; c&rsquo;est magnifique !
Que dis-je, magnifique ? &#8230; C&rsquo;est utilisable !</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">Cyrano de bergerac</p>
                      </div>
            </div>
</div>



<p>Drupal ne supposait pas que les éditeurs de contenu constitueraient le public principal de l&rsquo;outil. <strong>Un comble pour un système de gestion de contenu (CMS)</strong>. </p>



<p>Heureusement, des personnalités talentueuses que sont <a rel="noreferrer noopener" href="https://twitter.com/saschaeggi" data-type="URL" data-id="https://twitter.com/saschaeggi" target="_blank">Sascha Eggenberger</a> et <a rel="noreferrer noopener" href="https://twitter.com/chumillas" target="_blank">Cristina Chumillas</a> on prit les choses en main et grâce à elles nous avons aujourd&rsquo;hui un outil élégant en constante évolution.  </p>



<p>Mais ne vous méprenez pas, l&rsquo;expérience éditoriale est au cœur des ajustements de <strong>Gin</strong>.</p>



<h2>Content is the new king</h2>



<p>Aujourd&rsquo;hui, nous avons l&rsquo;initiative <a rel="noreferrer noopener" href="https://www.drupal.org/about/core/strategic-initiatives/easy-out-of-the-box" data-type="URL" data-id="https://www.drupal.org/about/core/strategic-initiatives/easy-out-of-the-box" target="_blank">Easy Out of the Box</a>, qui vise à rendre Drupal plus facile à utiliser. Claro et Gin sont nés de cette initiative en tant que nouveaux thèmes d&rsquo;administration.</p>



<figure class="wp-block-gallery columns-2 is-cropped is-style-columns-6-6"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Node-Seven-2600x1648.png" alt="" data-id="9382" data-full-url="https://content.antistatique.net/app/uploads/2022/06/Node-Seven.png" data-link="https://content.antistatique.net/?attachment_id=9382" class="wp-image-9382" srcset="https://content.antistatique.net/app/uploads/2022/06/Node-Seven-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Node-Seven-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Node-Seven-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Node-Seven-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Node-Seven-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption class="blocks-gallery-item__caption">Formulaire d&rsquo;une page avec Seven</figcaption></figure></li><li class="blocks-gallery-item"><figure><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-2600x1648.png" alt="" data-id="9380" data-full-url="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48.png" data-link="https://content.antistatique.net/?attachment_id=9380" class="wp-image-9380" srcset="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.17.48-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption class="blocks-gallery-item__caption"><meta charset="utf-8">Formulaire d&rsquo;une page avec Gin</figcaption></figure></li></ul></figure>



<p>L&rsquo;interface des formulaires est revue afin de se rapprocher des interfaces Google Docs ou MS Word &#8211; des interfaces éprouvées et connues des utilisateurs.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Est-ce vraiment Drupal ?</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">Pierre Afeux</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">Un client désormais heureux</p>
                      </div>
            </div>
</div>



<p>Les fonctions les plus importantes telles que l&rsquo;état publié, l&rsquo;aperçu et l&rsquo;enregistrement sont toujours à portée de main grâce à un positionnement sticky en haut du formulaire d&rsquo;édition.</p>



<h2>Un avenir radieux</h2>



<p>Que nous réserve l&rsquo;avenir ? Nous conviendrons que personne ne sait vraiment. Mais voici quelques pistes et projets en cours de réalisation qui annonce de bien belles choses pour Drupal.</p>



<h2><strong>Menus pour les créateurs de contenu</strong></h2>



<p>Une fois encore, le menu actuel propose une architecture pour les développeurs et non pour les éditeurs du contenu.</p>



<p>La proposition de menu <a rel="noreferrer noopener" href="https://www.drupal.org/project/ideas/issues/3203618" data-type="URL" data-id="https://www.drupal.org/project/ideas/issues/3203618" target="_blank">créateur de contenu</a> semble être en bonne voie pour résoudre cette problématique.</p>



<p>L&rsquo;initiative propose de regrouper les éléments de création et de proposer un menu complètement différent pour quelqu&rsquo;un qui n&rsquo;est pas un site-builder.</p>



<h2>Dark Mode</h2>



<p>Tout a un mode sombre. Pourquoi pas Drupal ? </p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-2600x1648.png" alt="" class="wp-image-9394" srcset="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.30.59-1-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption>What we do in the shadows</figcaption></figure>



<h2>Editeur Next-Gen</h2>



<p>Le remplacement de CKEditor par le nouveau et très amélioré CKEditor 5 a été identifié comme une initiative Drupal 10.</p>



<figure class="wp-block-image size-full is-style-large"><img loading="lazy" width="2560" height="1326" src="https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67.png" alt="" class="wp-image-9390" srcset="https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67.png 2560w, https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67-300x155.png 300w, https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67-768x398.png 768w, https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67-1536x796.png 1536w, https://content.antistatique.net/app/uploads/2022/06/68747470733a2f2f632e636b736f757263652e636f6d2f612f312f696d672f6e706d2f636b656469746f72352d6275696c642d6465636f75706c65642d646f63756d656e742e706e67-2048x1061.png 2048w" sizes="(max-width: 2560px) 100vw, 2560px" /></figure>



<h2>Login</h2>



<p>Avec le module de <a href="https://www.drupal.org/project/gin_login">Gin Login</a>, il est possible d&rsquo;homogénéiser l&rsquo;expérience utilisateur, de l&rsquo;écran de connexion aux touches finales de l&rsquo;interface.</p>



<p>Nous utilisons principalement ce module supplémentaire sur nos projets Headless.</p>



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-2600x1648.png" alt="" class="wp-image-9386" srcset="https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/06/Screenshot-2022-06-03-at-15.21.31-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<h3>Dashboard</h3>



<p>Drupal 7 <strong>proposait un tableau de bord personnalisable</strong>, quelque chose que l&rsquo;on ne retrouve pas dans les nouvelles versions de Drupal.</p>



<p>La communauté ne souhaite <strong>pas réitérer les erreurs du passé</strong>. Pour avoir un bon tableau de bord, vous devez <strong>connaître votre public cible</strong>. Présenter les bonnes informations à un utilisateur d&rsquo;une manière facile à digérer est l&rsquo;un des principaux objectifs.</p>



<p>C&rsquo;est pourquoi cette fonctionnalité tant attendue se développe doucement au fil des recherches et des faisabilités techniques.</p>



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="1600" height="1200" src="https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i.png" alt="" class="wp-image-9388" srcset="https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i.png 1600w, https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i-300x225.png 300w, https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i-768x576.png 768w, https://content.antistatique.net/app/uploads/2022/06/image_processing20211006-1150-o1gl0i-1536x1152.png 1536w" sizes="(max-width: 1600px) 100vw, 1600px" /><figcaption>Concept de Dashboard Drupal</figcaption></figure>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Alors, prêt à sauter le pas ? </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">Belebt</p>
                          <p style="margin: 0 0 0 20px; font-size: 18px; color: #808098;">Base Jumper</p>
                      </div>
            </div>
</div>



<p class="is-style-default">Quoi qu’il en soit, n’hésitez pas à&nbsp;<strong>nous contacter</strong>&nbsp;pour vous&nbsp;<a href="https://antistatique.net/agence-web" data-type="URL" data-id="https://antistatique.net/agence-web">conseiller sur la meilleure stratégie à adopter</a>&nbsp;en relation avec votre projet.</p>



<h2>Sources</h2>



<p>Pour les plus curieux d&rsquo;entre vous, voici quelques sources d&rsquo;informations complémentaires ayant inspiré la création de cet article.</p>



<p><strong>Gin</strong>&nbsp;(Juin, 2022). Gin Admin Theme.<br><a href="https://antistatique.net/fr/node/455"></a><a href="https://www.drupal.org/project/gin" target="_blank" rel="noreferrer noopener">https://www.drupal.org/project/gin</a></p>



<p><meta charset="utf-8"><strong>Sascha Eggenberger</strong>&nbsp;(April, 2021). Drupal Gin Future UI.<br><a rel="noreferrer noopener" href="https://sascha.is/work/drupal-gin-future-ui" target="_blank"></a><a href="https://sascha.is/work/drupal-gin-future-ui" target="_blank" rel="noreferrer noopener">https://sascha.is/work/drupal-gin-future-ui</a></p>



<p><strong>Sascha Eggenberger</strong> (October, 2021). Drupal Gin Admin Theme: The Past, The Present &amp; The Future.<br><a rel="noreferrer noopener" href="https://noti.st/saschaeggi/0X9WTY/drupal-gin-admin-theme-the-past-the-present-the-future" target="_blank">https://noti.st/saschaeggi/&#8230;/drupal-gin-admin-theme&#8230;</a></p>



<p><strong>Cristina Chumillas</strong> (April, 2022). The Present and Future of Drupal’s Administrative Interface.<br><a rel="noreferrer noopener" href="https://www.lullabot.com/articles/present-and-future-drupals-administrative-interface" target="_blank">https://www.lullabot.com/&#8230;/present-and-future-&#8230;-interface</a></p>



<p><strong>Jayati Kataria</strong> (March, 2020). Claro: A modern outlook of Drupal admin UI.<br><a rel="noreferrer noopener" href="https://opensenselabs.com/blog/articles/claro-modern-outlook-drupal-admin-ui" target="_blank">https://opensenselabs.com/&#8230;/claro-modern-&#8230;-drupal-admin-ui</a></p>



<p><meta charset="utf-8"><strong>Mike Hubbard</strong> (January, 2020). Drupal’s admin UI &amp; how it compares to WordPress.<br><a rel="noreferrer noopener" href="https://www.acromedia.com/article/drupals-admin-ui-how-it-compares-to-wordpress" target="_blank">https://www.acromedia.com/&#8230;/drupals-admin-ui-&#8230;-wordpress</a></p>



<p><strong>Kevin Oleary</strong> (September, 2015). The evolution of the toolbar; Drupal 7 to Drupal 8.<br><a rel="noreferrer noopener" href="https://medium.com/@kevinoleary/the-evolution-of-the-toolbar-drupal-7-to-drupal-8-c1edb0875cc9" target="_blank">https://medium.com/@kevinoleary/evolution-toolbar-d7-to-d</a></p>



<p><strong>Bluedrop</strong> (March, 2021). Améliorer l&rsquo;expérience de la contribution : du confort dans le backoffice Drupal.<br><a rel="noreferrer noopener" href="https://www.bluedrop.fr/content/ux-contribution-backoffice-drupal" target="_blank">https://www.bluedrop.fr/content/ux-contribution-&#8230;-drupal</a></p>


Réviser vos préjugés sur l’interface d’Admin Drupal


<p>Quand on veut tendre vers plus de durabilité dans notre métier de développeur et développeuse de sites et d’applications web, l’énergie est l’une des premières thématiques qui émergent des réflexions. Surtout quand on sait qu’Internet se place en pole position aux côtés des pays les plus pollueurs de la planète.</p>



<h2><strong>Qui consomme ?</strong></h2>



<p>Pour un site ou une application web classique, voici les différentes étapes où l’énergie est consommée :</p>



<ul><li>La <strong>production</strong> : pour produire un site, il faut des personnes qui vont se rendre sur leur lieu de travail, qui vont utiliser un espace physique qu’il faudra chauffer et éclairer et qui vont finalement utiliser du matériel et des outils informatiques.</li><li>L’<strong>hébergement</strong> : afin de rendre le site disponible, il faut l’héberger sur un serveur ou <em>datacenter</em>. En somme, de gros ordinateurs mis en réseaux qui doivent assurer une disponibilité constante, 24h sur 24h.</li><li>Le <strong>réseau</strong> câblé et mobile : pour acheminer les données de notre serveur vers l’internaute.</li><li>Les <strong>routeurs</strong> (<em>boxe ADSL</em>) : véritable porte d’entrée du web dans nos foyers, ils sont nécessaires dans la mise en relation entre le réseau interne et externe.</li><li>Les <strong>appareils</strong> : permettent de consulter notre site au sens large; ordinateurs, téléphone mobile, écran, clavier, souris, etc.</li></ul>



<p>Toutes ces étapes vont consommer de l’énergie électrique qui va être produite de plusieurs manières, du très propre au très “sale”. Maintenant, même si l’énergie employée était uniquement issue de source renouvelable, <strong>il s’agit également de ne pas la gaspiller</strong>.</p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="1733" height="2600" src="https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-1733x2600.jpeg" alt="Barrage de Gries, par Anders Nielsen" class="wp-image-9304" srcset="https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-1733x2600.jpeg 1733w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-200x300.jpeg 200w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-768x1152.jpeg 768w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-1024x1536.jpeg 1024w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-1365x2048.jpeg 1365w, https://content.antistatique.net/app/uploads/2022/05/anders-nielsen-JIbQyzG1q-o-unsplash-scaled.jpeg 1707w" sizes="(max-width: 1733px) 100vw, 1733px" /><figcaption>Barrage et parc éolien de Gries, l&rsquo;un des plus hauts d&rsquo;Europe.</figcaption></figure>



<h2><strong>Où peut-on agir ?</strong></h2>



<p>À chaque étape, nous avons la possibilité et la responsabilité d’optimiser la consommation énergétique pour plus de durabilité :</p>



<h3><strong>La production</strong></h3>



<ul><li>En favorisant le <strong>télétravail</strong> afin de supprimer les déplacements inutiles</li><li>En optant pour des <strong>sources de production électrique renouvelable</strong> quand c’est possible; réseau local, panneaux solaires, etc.</li><li>En utilisant des <strong>outils optimisés</strong> pour leur consommation énergétique</li></ul>



<h3><strong>L’hébergement</strong></h3>



<ul><li>En optant pour un <strong>hébergement vert</strong> ou <em>Greenhosting</em>. Attention toutefois au <em>greenwashing</em> utilisé par les gros acteurs du marché. Il s’agit de passer par des organismes de notation indépendants comme <a href="https://www.thegreenwebfoundation.org/directory/">The Green Web Foundation</a>.</li><li>En optimisant notre site ou notre application pour <strong>réduire la charge serveur</strong>; nombre de requêtes, charge CPU, etc.</li><li>En <strong>filtrant les BOTs</strong>. En effet, les robots qui vont parcourir votre site pour diverses raisons sont responsables de 50% de la bande passante et de la charge CPU de votre serveur. Il s’agit de garder uniquement ceux qui vont référencer votre site afin de minimiser leur impact.</li><li><strong>Réduire l’espace disque</strong> utilisé en réduisant la taille et le nombre des médias, des archives, etc.</li><li><strong>En mettant notre site en <em>cache</em></strong>. Plutôt que de tout recalculer pour chaque internaute et chaque requête, une partie du “résultat” envoyé peut-être sauvegardé et envoyé aux prochains internautes pour une période donnée.</li></ul>



<h3><strong>Le réseau câblé et mobile</strong></h3>



<ul><li>En favorisant la <strong>proximité</strong>; moins votre site parcourt de distance, moins il consomme d’énergie. Il s’agit de choisir un hébergement proche de la majorité des utilisateurs et utilisatrices et/ou d’utiliser un CDN. Ce <em>Content Delivery Network</em> va, comme votre serveur d’hébergement, servir votre site, mais depuis différents lieux dans le monde selon l’internaute qui le consulte. Attention toutefois, car chaque lieu possédera une “copie” de votre site, ce qui aura un effet multiplicatif sur l’espace disque utilisé.</li><li>En réduisant et en <strong>optimisant la taille des ressources envoyées</strong> comme la taille des images, la quantité de code, etc.</li></ul>



<h3><strong>Les routeurs (<em>boxes ADSL</em>)</strong></h3>



<p>Sur ce point nous ne pouvons pas faire grand-chose si ce n’est sensibiliser nos internautes à la consommation d’énergie renouvelable.</p>



<h3><strong>Les appareils</strong></h3>



<p>Encore une fois, l’énergie consommée par nos internautes est difficilement optimisable. Il existe néanmoins plusieurs points sur lesquels nous pouvons agir :</p>



<ul><li>En réduisant la <strong>charge CPU/GPU</strong>. Le fonctionnement même de notre site ou notre application dans le navigateur va avoir un impacte fort sur l’énergie qui sera consommée pour l’utiliser. Notamment en optimisant le JavaScript, en réduisant la quantité de code à <em>parser</em> ou en optimisant la taille et la présence des médias.</li><li>En utilisant des <strong>couleurs sombres</strong>. Cela ne vaut que pour les appareils disposant d’écrans (AM)OLED ou cathodiques, même si ces derniers se sont faits très rares pour naviguer sur Internet. Maintenant, avec la généralisation des écrans OLED dont chaque pixel définit sa propre consommation d’énergie, opter pour des couleurs sombres ou des pixels éteins, permet de réduire la consommation énergétique des écrans. Tout comme utiliser trop de bleu aura un impact négatif, car il s’agit de la couleur la plus énergivore. Attention, cela ne vaut pas pour les écrans LCD qui composent encore la majorité des écrans de nos internautes.</li></ul>



<h2><strong>Ce qu’il faut retenir</strong></h2>



<ul><li>Optez pour un hébergement vert de proximité (voir <a href="https://www.thegreenwebfoundation.org/directory/">The Green Web Foundation</a>)</li><li>Optimisez votre code et votre projet pour réduire la puissance de calcul nécessaire à son usage</li><li>Soyez conscient de l’impact écologique et énergétique de chacun de vos choix et orientez-les en conséquence</li></ul>



<h2><strong>Notre responsabilité</strong></h2>



<p>Voici quelques-unes des nombreuses pistes qui s’offrent à nous pour rendre notre site ou notre application web énergiquement plus durable et moins impactant pour la planète. <strong>Il est de notre responsabilité de les mettre autant que possible en œuvre.</strong></p>



<p>Maintenant il s’agit également de ne pas se voiler la face, le site le plus écologique et le moins impactant dans la crise climatique que nous vivons est le site qui n’existe pas.</p>


Durabilité – Énergie et Hébergement


<p class="is-style-lead">Un article écrit par un développeur back-end. Simple à comprendre et à mettre en place. <br><a rel="noreferrer noopener" href="https://github.com/RSickenberg/Laravel-Livewire-Demo" target="_blank">Le projet est disponible sur mon GitHub.</a></p>



<h2>Préambule</h2>



<p class="has-drop-cap">Laravel est un framework tout comme Symfony. Une structure qui nous aide, nous, développeurs à créer des contenus toujours plus poussés, motivants et complets sans pour autant réinventer la roue à chaque projet.</p>



<p>La différence entre Symfony et Laravel ? Cela dépend des goûts et des préférences de chaque développeur et de ses expériences passées. Pour ma part, je suis pour Laravel, je préfère la syntaxe et « l&rsquo;élégance » de cette plateforme et la polyvalence des fonctionnalités présentes « out of the box », comme par exemple, la gestion des <code>queues</code>.</p>



<p><a rel="noreferrer noopener" href="https://laravel.com/docs/9.x/installation#meet-laravel" data-type="URL" data-id="https://laravel.com/docs/9.x/installation#meet-laravel" target="_blank">Si vous souhaitez en savoir un peu plus le temps qu&rsquo;un autre article arrive sur Laravel.</a></p>



<p>Aujourd&rsquo;hui, je vais me concentrer sur une fonctionnalité toute particulière, plus ou moins similaire à <a rel="noreferrer noopener" href="https://symfony.com/bundles/ux-live-component/current/index.html" data-type="URL" data-id="https://symfony.com/bundles/ux-live-component/current/index.html" target="_blank">Symfony UX Live Components</a> mais moins experimentale.</p>



<h2>Livewire</h2>



<p class="has-drop-cap">Ceci est une partie assez récente de Laravel. Elle est sortie il y a environ 3 ans à l&rsquo;heure où j&rsquo;écris cet article. </p>



<p>Livewire permet de construire une application web moderne complexe, tout en réduisant la difficulté pour un développeur <em>back-end</em> de gérer le <em>front-end</em>.</p>



<p>C&rsquo;est un peu comme un framework dans Laravel. On a ainsi la possibilité de construire des interfaces dynamiques et simples tout en gardant le confort de la syntaxe de Laravel.</p>



<div class="wp-block-image is-style-default"><figure class="aligncenter"><img src="https://laravel-livewire.com/img/underwater_jelly.svg" alt=""/></figure></div>



<h2>Let&rsquo;s go?</h2>



<p class="is-style-default">Je commence d&rsquo;abord par créer mon environnement de développement avec l&rsquo;aide de notre très cher <a href="https://www.docker.com/" target="_blank" rel="noreferrer noopener">Docker</a>. </p>



<p class="is-style-default"><meta charset="utf-8">Je travaille avec :</p>



<ul class="is-style-default"><li>Laravel: <code>9.7.X</code></li><li>Livewire: <code>2.10.5</code></li><li>PHP: <code>8.1.4</code></li><li>Postgress: <code>14</code></li></ul>



<h3>Dockerfile</h3>



<p class="is-style-default">Tout ce qui a de plus classique. <br><a href="https://github.com/RSickenberg/Laravel-Livewire-Demo/blob/main/.docker/php/Dockerfile" data-type="URL" data-id="https://github.com/RSickenberg/Laravel-Livewire-Demo/blob/main/.docker/php/Dockerfile" target="_blank" rel="noreferrer noopener">Disponible ici.</a></p>



<h3>Bootstrap</h3>



<p class="is-style-default">Après avoir «&nbsp;bootstrapé&nbsp;» le project grâce à l&rsquo;aide de composer (<code>composer create-project laravel/laravel example-app</code>), nous pouvons directement suivre Docker avec un joli <code>docker-compose up -d</code> et se rendre à la machine à café ☕️.<br><br>Ensuite <code>http://localhost:8080</code> est disponible !</p>



<p class="is-style-default">Le reste est globalement de la config; vous pouvez copier le <code>.env.example</code> en <code>.env</code>.</p>



<p class="is-style-default">On continue avec <a rel="noreferrer noopener" href="https://jetstream.laravel.com/2.x/introduction.html" target="_blank">Laravel Jetstram</a>, un starter-kit pour Laravel, qui nous permet d&rsquo;avoir, en un claquement de doigts, utilisateurs, <em>logins</em>, <em>2FA</em>, <em>session managements</em>, <em>API</em> et/ou <em>team management</em>. </p>



<pre class="wp-block-code"><code>composer require laravel/jetstream
php artisan jetstream:install livewire <meta charset="utf-8"># --teams
docker-compose exec app php artisan migrate
npm i &amp;&amp; npm run dev</code></pre>



<p class="is-style-default">Ces 4 commandes nous permettent de:</p>



<ol class="is-style-default"><li>Installer Jetstream.</li><li>Demander à avoir Livewire.<ol><li>Passer un argument <code>--teams</code> si vous souhaitez avoir la gestion d&rsquo;équipes.</li></ol></li><li>Faire les migrations sur la base de données.</li><li>Installer les dépendances front-end.</li></ol>



<p class="is-style-default">Et voilà 🎉, un Laravel tout beau tout neuf.</p>



<h2>Créons notre premier composant !</h2>



<h3>Le routing</h3>



<p class="has-drop-cap is-style-default">Le routing : une partie essentielle quand on parle de <em>cutting-edge</em> web framework. <br>Ici, c&rsquo;est plutôt simple, les routes se trouvent dans <code>routing/web.php</code> et sont très faciles à déclarer. Faisons-en une pour notre démo avec un <em>Controller</em>.</p>



<p class="is-style-default">Dans notre exemple, rendons nous dans l&rsquo;<em>URI</em> <code>/demo</code>.<br>Au début, ce n&rsquo;est qu&rsquo;une simple page blanche.</p>



<h3>Le composant Livewire</h3>



<p class="is-style-default">Nous voici dans le vif du sujet ! Créons un composant.</p>



<p class="is-style-default">Selon la <a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/quickstart" data-type="URL" target="_blank">documentation</a>, la commande est simple: <code>php artisan make:livewire &lt;nom&gt;</code>. <br>Faisons le composant <code>Antistatique</code>.</p>



<p class="is-style-default">On se retrouve avec un composant tout bête pour l&rsquo;instant avec un <em>template</em>. </p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img loading="lazy" width="1060" height="832" src="https://content.antistatique.net/app/uploads/2022/04/component.png" alt="" class="wp-image-9158" srcset="https://content.antistatique.net/app/uploads/2022/04/component.png 1060w, https://content.antistatique.net/app/uploads/2022/04/component-300x235.png 300w, https://content.antistatique.net/app/uploads/2022/04/component-768x603.png 768w" sizes="(max-width: 1060px) 100vw, 1060px" /><figcaption>Il s&rsquo;agit là d&rsquo;un simple composant qui étend Livewire. Nous allons commencer à travailler dessus très rapidement.</figcaption></figure></div>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/04/html.png" alt="" class="wp-image-9160" width="653" height="251" srcset="https://content.antistatique.net/app/uploads/2022/04/html.png 1094w, https://content.antistatique.net/app/uploads/2022/04/html-300x116.png 300w, https://content.antistatique.net/app/uploads/2022/04/html-768x296.png 768w" sizes="(max-width: 653px) 100vw, 653px" /><figcaption>Voici donc le template.</figcaption></figure></div>



<p class="is-style-default">Amusons-nous maintenant avec le <em>framework</em>.<br>Depuis un <em>template</em> quelconque, on peut donc appeler notre composant livewire comme un composant <code>VueJS</code> !<br>Il suffit d&rsquo;ajouter <code>&lt;livewire:le-nom-du-composant /&gt;</code> , et <em>Blade</em> (le moteur de rendu) se charge du reste.<br><br>Après quelques modifications du <em>template</em> de base <code>demo.index</code> ainsi que du <em>template</em> <code>livewire.antistatique</code>, on arrive à un résultat.<br></p>



<figure class="wp-block-image size-full is-resized is-style-full-width"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/04/image.png" alt="" class="wp-image-9162" width="1192" height="131" srcset="https://content.antistatique.net/app/uploads/2022/04/image.png 1651w, https://content.antistatique.net/app/uploads/2022/04/image-300x33.png 300w, https://content.antistatique.net/app/uploads/2022/04/image-768x85.png 768w, https://content.antistatique.net/app/uploads/2022/04/image-1536x169.png 1536w" sizes="(max-width: 1192px) 100vw, 1192px" /></figure>



<h4>Where the fun begins</h4>



<p class="is-style-default">Souvenez-vous de note <em>class</em> de base, <code>\App\Http\Livewire\Antistatique</code>, cette dernière étant une <em>class</em>, on peut y faire ce qu&rsquo;on veut. </p>



<p class="is-style-default">Ajoutons une propriété <code>int $loveCounter</code>.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/04/component-1.png" alt="" class="wp-image-9164" width="607" height="565" srcset="https://content.antistatique.net/app/uploads/2022/04/component-1.png 1292w, https://content.antistatique.net/app/uploads/2022/04/component-1-300x280.png 300w, https://content.antistatique.net/app/uploads/2022/04/component-1-768x716.png 768w" sizes="(max-width: 607px) 100vw, 607px" /><figcaption>Notre <em>class</em> devrait ressembler à ceci.</figcaption></figure></div>



<p class="is-style-default"><code>::showLove</code> et <code>$loveCounter</code> sont des éléments avec lesquels le <em>front-end</em> peut intéragir via <code>AlpineJS</code> (tout est déjà fourni !). <br>Dans le <em>template</em>, il suffit d&rsquo;ajouter sur un bouton <code>&lt;button wire:click=showLove"&gt;+&lt;/button&gt;</code>.</p>



<p class="is-style-default">Une fois le composant mis en place, il ressemble à ceci:</p>



<pre class="wp-block-code"><code>&lt;div&gt;
    &lt;div class="alert alert-info shadow-lg"&gt;
        &lt;div&gt;
            &lt;i class="fa-solid fa-circle-info"&gt;&lt;/i&gt;
            &lt;span&gt;Bonjour, je suis un composant Livewire!&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="mt-10"&gt;
        &lt;div class="card bg-base-100 w-60 max-w-&#91;65em] shadow-2xl inner-shadow m-auto"&gt;
            &lt;div class="card-body"&gt;
                &lt;div class="flex gap-6"&gt;
                    &lt;div&gt;
                        &lt;span class="countdown font-mono text-9xl"&gt;
                            &lt;span style="--value:{{ $loveCounter }}"&gt;&lt;/span&gt;
                        &lt;/span&gt;
                        &lt;span class="font-bold text-2xl"&gt;
                            Love for Antistatique 💘
                        &lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="card-actions justify-end"&gt;
                    @if(!$shouldReturnToZero)
                        &lt;button wire:click="showLove" class="btn btn-block btn-accent mt-5"&gt;Ajouter de l'amour&lt;/button&gt;
                    @else
                        &lt;button wire:click="removeLove" class="btn btn-block btn-accent mt-5"&gt;Retirer de l'amour&lt;/button&gt;
                    @endif
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>



<p class="is-style-default">Tout se sittue au niveau du <em>back-end</em> et ainsi, <code>AlpineJS</code> discutent entre eux ainsi qu&rsquo;avec <em>Blade</em> qui fait la liaison initiale.<br><br>Tout ceci est bien entendu <em>SEO friendly</em> car la page est générée intialement comme n&rsquo;importe quelle page.</p>



<div class="wp-block-image is-style-large"><figure class="aligncenter size-full"><img loading="lazy" width="960" height="720" src="https://content.antistatique.net/app/uploads/2022/04/Screen-Recording-2022-04-08-at-17.30.19.gif" alt="" class="wp-image-9178"/><figcaption>Voici le résultat !</figcaption></figure></div>



<h3>Comment cela fonctionne et quelles sont les possibilités ?</h3>



<p class="has-drop-cap is-style-default">Livewire est rendu initialement comme n&rsquo;importe quelle page <em>Blade</em>. Ensuite, quand une interraction est demandée, en l&rsquo;occurence comme notre <code>wire:click</code>, Livewire génère une requête <em>AJAX</em> au <em>back-end</em> qui met à jour les données puis le composant. Ce dernier est ensuite renvoyé au <em>front-end</em>.<br>Le <em>DOM</em> est manipulé intelligement et ne change que les éléments du composant.<br><br>Les possibilités sont quasiment ilimitées et il faudrait plusieurs articles pour en parler dans les détails. Tout ceci étant branché à l&rsquo;écosystème de Laravel !<br><br>Autre élément qui me permet de prétendre ceci : <a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/lifecycle-hooks" data-type="URL" data-id="https://laravel-livewire.com/docs/2.x/lifecycle-hooks" target="_blank">Livewire possède également les <code>Hooks</code> de lifecyle</a>.</p>



<p class="is-style-default">Livewire se comporte de façon <em>Stateless</em>,  cela veut dire qu&rsquo;il n&rsquo;y a pas d&rsquo;instance de Livewire qui vit sur le serveur et qui attend une interraction client.<br><br>Voici une petite image prise de la documentation de Livewire qui nous explique comment tout cela fonctionne.<br></p>



<div class="wp-block-image"><figure class="aligncenter is-resized"><img loading="lazy" src="https://laravel-livewire.com/img/lifecycle_timeline.svg" alt="" width="660" height="363"/><figcaption>Source: https://laravel-livewire.com/docs/2.x/security</figcaption></figure></div>



<h3>Et la sécurité ?</h3>



<p class="is-style-default">Comme tout composant <em>front-end</em>, les données se situent chez le <em>client</em>. Il est donc possible d&rsquo;avoir une manipulation d&rsquo;une personne mal intentionnée, et il est donc primordial d&rsquo;avoir de la validation et/ou des contre-mesures adéquates en fonction de l&rsquo;implication des données (en l&rsquo;occurence ce n’est pas nécessaire pour un compteur).<br><br>Néamoins, Livewire passe des <em>checksums</em> entre chaques requêtes, si ces dernières ne sont pas valides, la requête ne sera pas lancée.<br><br><a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/security" data-type="URL" data-id="https://laravel-livewire.com/docs/2.x/security" target="_blank">Si vous souhaitez en savoir plus sur la sécurité, je vous laisse vous rendre sur cette page.</a></p>



<h2>Le mot de la fin.</h2>



<p class="has-drop-cap is-style-default">J&rsquo;espère avoir réussi à captiver votre attention. N&rsquo;hésitez pas à aller regarder le projet démo sur mon <em>repository</em> et à jouer avec !<br><br>Livewire est un concept vraiment intéressant d&rsquo;un point de vue de développeur <em>back-end</em>, permettant de générer des composants en PHP sans avoir à créer des API dédiées, ainsi que des <em>controllers / routings</em>. <br><br>Livewire permet <a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/input-validation" data-type="URL" data-id="https://laravel-livewire.com/docs/2.x/input-validation" target="_blank">de valider les éléments</a> comme le texte, un email ou pleins d&rsquo;autres choses (comme dans Laravel). Vous pouvez aussi l&rsquo;utiliser pour <a rel="noreferrer noopener" href="https://laravel-livewire.com/docs/2.x/file-uploads" data-type="URL" data-id="https://laravel-livewire.com/docs/2.x/file-uploads" target="_blank">des envois de fichiers</a>, l’attacher à plein d’évènements d&rsquo;actions comme des <code>Clicks</code>, <code>Keydown</code> ou <code>Submit</code> ou pour émettre des <code>events</code> pour des <code>listeners</code>, &#8230;</p>



<p class="is-style-default">En soit, c&rsquo;est un <em>micro-framework</em> qui à une place très importante dans Laravel et nous permet d&rsquo;intéragir avec notre application et tout son écosystème autour. </p>



<p class="is-style-default">Merci de m&rsquo;avoir lu !</p>


Laravel Livewire


<p>J&rsquo;ai récemment rencontré ce problème en travaillant sur le projet e-commerce de Cartographie de la Confédération Suisse &#8211; <a href="https://shop.swisstopo.admin.ch/de/">https://shop.swisstopo.admin.ch</a>.</p>



<figure class="wp-block-image size-full is-style-large"><img loading="lazy" width="1000" height="1000" src="https://content.antistatique.net/app/uploads/2022/04/d946d8f133adb0f58613091d7095ee753f4ca7d2_2_1000x1000.jpeg" alt="" class="wp-image-9063" srcset="https://content.antistatique.net/app/uploads/2022/04/d946d8f133adb0f58613091d7095ee753f4ca7d2_2_1000x1000.jpeg 1000w, https://content.antistatique.net/app/uploads/2022/04/d946d8f133adb0f58613091d7095ee753f4ca7d2_2_1000x1000-300x300.jpeg 300w, https://content.antistatique.net/app/uploads/2022/04/d946d8f133adb0f58613091d7095ee753f4ca7d2_2_1000x1000-150x150.jpeg 150w, https://content.antistatique.net/app/uploads/2022/04/d946d8f133adb0f58613091d7095ee753f4ca7d2_2_1000x1000-768x768.jpeg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<h2>Context</h2>



<p>Afin de simplifier l&rsquo;utilisation de Drupal, nous avons mis en place une recherche <strong>Autocomplete</strong> des Produits. </p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.21-2600x1648.png" alt="" class="wp-image-9059" srcset="https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.21-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.21-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.21-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.21-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.21-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption><meta charset="utf-8">Exemple d&rsquo;utilisation de la recherche des produits via l&rsquo;autocomplete</figcaption></figure>



<p>Cette recherche permet alors de trouver des produits selon les critères suivants:</p>



<ul class="is-style-default"><li>Type de produit (carte, accessoire &#8230;)</li><li>SKU de produit</li><li>Nom du Produit</li></ul>



<p>La recherche fonctionne à merveille, mais il semblerait qu&rsquo;elle ne retourne <strong>plus aucun résultat dès que l&rsquo;on recherche des produits contenant des caractères spéciaux</strong>.</p>



<p>En effet, la recherche <strong><em>Brünigpass</em></strong> engendrait l&rsquo;erreur suivante:</p>



<pre class="wp-block-code"><code>Drupal\Core\Database\DatabaseExceptionWrapper: Exception in Commerce Products Autocomplete&#91;commerce_products_autocomplete]
: SQLSTATE&#91;HY000]: General error: 1267 Illegal mix of collations (ascii_general_ci,IMPLICIT) and (utf8mb4_general_ci,COERCIBLE) for operation 'like': 

SELECT "commerce_product_field_data"."langcode" AS "commerce_product_field_data_langcode", "commerce_product__field_map_number"."field_map_number_value" AS "commerce_product__field_map_number_field_map_number_value", 
"commerce_product_field_data"."product_id" AS "product_id", "commerce_product_field_data"."type" AS "commerce_product_field_data_type", "commerce_product_field_data"."title" AS "commerce_product_field_data_title" 
FROM "commerce_product_field_data" "commerce_product_field_data"
LEFT JOIN "commerce_product__field_map_number" "commerce_product__field_map_number" ON commerce_product_field_data.product_id = commerce_product__field_map_number.entity_id 
AND commerce_product__field_map_number.deleted = :views_join_condition_0 
WHERE (("commerce_product_field_data"."type" LIKE :db_condition_placeholder_1 ESCAPE '\\') 
OR ("commerce_product__field_map_number"."field_map_number_value" LIKE :db_condition_placeholder_2 ESCAPE '\\') 
OR ("commerce_product_field_data"."title" LIKE :db_condition_placeholder_3 ESCAPE '\\')) 
AND ("commerce_product_field_data"."default_langcode" = :db_condition_placeholder_4) 
ORDER BY "commerce_product__field_map_number_field_map_number_value" ASC LIMIT 10 OFFSET 0; 

Array ( &#91;:db_condition_placeholder_1] =&gt; %Brünigpass% &#91;:db_condition_placeholder_2] =&gt; %Brünigpass% &#91;:db_condition_placeholder_3] =&gt; %Brünigpass% &#91;:db_condition_placeholder_4] =&gt; 1 &#91;:views_join_condition_0] =&gt; 0 ) in main() (line 19 of /var/www/web/index.php).</code></pre>



<h2>Investigation</h2>



<p>Tout premièrement, il m&rsquo;a fallu comprendre qu&rsquo;est-ce que c&rsquo;était que cette erreur MySQL <strong>mix of collations</strong>.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">L&rsquo;erreur « illegal mix of collations » se produit lorsqu&rsquo;une expression compare deux chaînes de caractères de collations différentes, mais de coercibilité égale et que les règles de coercibilité ne peuvent pas aider à résoudre le conflit.</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">Stackoverflow</p>
                      </div>
            </div>
</div>



<p>L&rsquo;exception MySQL m&rsquo;explique donc que je tente de recherche dans au moins 2 colonnes qui n&rsquo;utilisent pas la même collation (<code>ascii_general_ci</code> et <code>utf8mb4_general_ci</code>).</p>



<p>À première vue, le caractère <strong><em>ü</em></strong> de <strong><em>Brünigpass</em></strong>semble engendrer un problème.</p>



<p>En regardant de plus près la requête SQL, nous pouvons voir que les 3 éléments suivants sont impactés par la recherche utilisateur:</p>



<ul class="is-style-default"><li><strong>db_condition_placeholder_1</strong>: <code>commerce_product_field_data.type</code></li><li><strong>db_condition_placeholder_2</strong>: <code>commerce_product__field_map_number.field_map_number_value</code></li><li><strong>db_condition_placeholder_3</strong>: <code>commerce_product_field_data.title</code></li></ul>



<p>Il nous faut donc demander à notre moteur de base de données quelles sont les collations utilisées pour chacun de ces champs</p>



<pre class="wp-block-code"><code>SELECT TABLE_NAME, COLUMN_NAME, COLLATION_NAME FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_NAME='commerce_product_field_data' AND COLUMN_NAME IN ('type')

UNION

SELECT TABLE_NAME, COLUMN_NAME, COLLATION_NAME FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_NAME='commerce_product__field_map_number' AND COLUMN_NAME IN ('field_map_number_value')

UNION

SELECT TABLE_NAME, COLUMN_NAME, COLLATION_NAME FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_NAME='commerce_product_field_data' AND COLUMN_NAME IN ('title')</code></pre>



<p> et le résultat fût sans équivoque:</p>



<pre class="wp-block-code"><code>+------------------------------------+------------------------+--------------------+
| TABLE_NAME                         | COLUMN_NAME            | COLLATION_NAME     |
+------------------------------------+------------------------+--------------------+
| commerce_product_field_data        | type                   | ascii_general_ci   |
| commerce_product__field_map_number | field_map_number_value | utf8mb4_general_ci |
| commerce_product_field_data        | title                  | utf8mb4_general_ci |
+------------------------------------+------------------------+--------------------+</code></pre>



<p><strong>Tada</strong>&nbsp;! La colonne <code>type</code> de la table <code><meta charset="utf-8">commerce_product_field_data</code> utilise la collation <code>ascii_general_ci</code>.</p>



<p>Pour que notre recherche de saisie semi-automatique fonctionne, <strong>toutes les colonnes devraient avoir la même collation</strong> ou il nous faudrait modifier la requête SQL pour spécifier la collation à utiliser pour chaque condition.</p>



<h2>Solution</h2>



<p><strong>Avant de commencer à modifier la requête SQL</strong>, je me suis demandé si nous avions réellement besoin de recherche dans le champ <code>type</code>.</p>



<p>En effet, nous avions <strong>ajouté ce champ afin de l&rsquo;afficher dans les résultats de recherche</strong>, mais il n&rsquo;était <strong>pas nécessaire de recherche par ce dernier</strong>. Nous avions simplement, sans réfléchir, configuré la View en cochant par défaut le <code>type</code> en tant que paramètre de la recherche.</p>



<p>En réalité, notre client ne se souciait pas vraiment de recherche par <code>type</code> (carte, accessoire &#8230;) et nous avons donc simplement décoché le champ type des paramètres de recherches textuels.</p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1648" src="https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.06-2600x1648.png" alt="" class="wp-image-9057" srcset="https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.06-2600x1648.png 2600w, https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.06-300x190.png 300w, https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.06-768x487.png 768w, https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.06-1536x974.png 1536w, https://content.antistatique.net/app/uploads/2022/04/Screenshot-2022-04-08-at-11.02.06-2048x1298.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption>Configuration des paramètres de notre View Entity Autocomplete</figcaption></figure>



<p>Et voilà, vous pouvez à nouveau entrer des chaînes avec des <strong>trémas</strong> dans la saisie semi-automatique de votre projet.</p>



<h2>Sources</h2>



<p class="is-style-default">Pour les plus curieux d&rsquo;entre vous, voici quelques sources d&rsquo;informations complémentaires ayant inspiré la création de cet article.</p>



<p><strong>Patrick Fey</strong>&nbsp;(Août, 2017). Illegal mix of collations exception caused by Drupal 8 Autocomplete with Entity Reference View.<br><a href="https://antistatique.net/fr/node/455">https://blog.werk21.de/../..//illegal-mix-collations-exception&#8230;</a></p>


Drupal – Illegal mix of collations exception dans une View Autocomplete Entity Reference


<p>Penser à notre consommation et à celle de nos créations, à leur utilisabilité, leur inclusivité et leur durabilité sont des préoccupations essentielles d&rsquo;un·e bon·ne designer (<em>de tout le monde, en fait !</em>).</p>



<p>Actuellement, nous savons que le numérique est problématique en terme de consommation et de pollution.</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">En 2019, le secteur du numérique était responsable de 3.9% des émissions mondiales de gaz à effet de serre </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">GreenIT.fr &#8211; Empreinte environnementale du numérique mondial</p>
                      </div>
            </div>
</div>



<p>Nous nous renseignons donc et avons la volonté de nous améliorer et d&rsquo;améliorer les sites et applications que nous délivrons, <em>même si le chemin est encore long</em>. </p>



<p>C&rsquo;est dans cette optique que j&rsquo;ai suivi quelques modules d&rsquo;<a href="https://www.unschools.co/" data-type="URL" data-id="https://www.unschools.co/">Unschool</a>, l&rsquo;école de <a href="https://interaction18.ixda.org/program/keynote--leyla-acaroglu/">Leyla Acaroglu</a>.</p>



<p>Le premier cours introduit la notion de durabilité et cet article est un condensé de ce que j&rsquo;en ai tiré. </p>



<h2>Qu&rsquo;est-ce que la durabilité ?</h2>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Meeting the needs of current generations without compromising the ability of future generations to meet their own needs</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">Brundtland Commission 1987</p>
                      </div>
            </div>
</div>



<p>La durabilité concerne surtout les ressources, leur limites, les contraintes qu’elles possèdent et surtout, le fait qu’il faut prendre compte du système dans son ensemble. En effet, la planète produit un nombre limité de ressources (<em>j&rsquo;espère qu&rsquo;à l&rsquo;heure actuelle ce n&rsquo;est plus un secret pour personne</em>), nous devons donc les utiliser consciemment.</p>



<p><strong>Tips :</strong> pour se rendre compte de son propre impact, il est utile de calculer son empreinte écologique : <a href="http://www.footprintcalculator.org">http://www.footprintcalculator.org</a></p>



<h2>Le cycle de vie</h2>



<p>Tous les produits que nous consommons et utilisons ont un impact sur l’environnement. Pour bien comprendre cet impact, il faut s’intéresser au cycle de vie de ceux-ci.&nbsp;</p>



<p>Les 5 phases d’un cycle :&nbsp;</p>



<ul><li>Material Extraction</li><li>Manufacture</li><li>Package &amp; transport</li><li>Use</li><li>End of life</li></ul>



<p>On entend beaucoup parler de la phase “<em>end of life</em>” (par exemple, le recyclage) et on dépense beaucoup d’énergie. Mais il serait aussi judicieux d’agir déjà sur les phases précédentes !</p>



<h2>Penser en système &#8211; tout est interconnecté</h2>



<p>S’il ne fallait retenir qu’un élément, c’est celui-ci : tout est interconnecté. Effectivement, pour changer quelque chose, il faut le voir dans son ensemble, voir tout son cycle de vie, les éléments auxquels il est liés.&nbsp;</p>


<div>
                
    <p style="font-family: Regola; font-size: 27px; font-weight: bold; line-height: 40.5px; margin-bottom: 30px; color: #000032;">Depuis la révolution industrielle, les humains designent des systèmes linéaires. La nature crée des systèmes régénératifs.</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">Unschool &#8211; Sustainability</p>
                      </div>
            </div>
</div>



<p>Par exemple : on se concentre sur le recyclage alors que le problème est la normalisation du “jetable”. Le recyclage est juste une conséquence de la culture du jetable. Nous utilisons des objets à usage uniques et c’est devenu une norme. Nous sommes dans l’hyperconsommation. Et on ne parle même pas de l&rsquo;obsolescence programmée. <em>(Attention, je n&rsquo;insinue pas qu&rsquo;arrêter d&rsquo;utiliser des pailles en plastique va suffire à sauver les océans)</em>.</p>



<p><strong>Nous traitons les symptômes et pas le problème.</strong></p>



<h2>Le greenwashing</h2>



<p>Il est encore trop facile aujourd&rsquo;hui de se faire passer pour une entreprise durable, soucieuse de son impact écologique.</p>



<p>Certaines entreprises dépensent beaucoup d&rsquo;énergie et d’argent pour promouvoir le côté “<em>green</em>” et écolo d’un de leur produit plutôt que de mettre en œuvre des pratiques commerciales qui minimisent l&rsquo;impact environnemental. On appelle ça le “<em>Greenwashing</em>” et c’est bien plus courant que ce que l’on pense. </p>



<h2>Quelles sont nos opportunités ?</h2>



<p>Dans notre consommation mais également dans ce que nous produisons (particulièrement en tant que designers), nous pouvons réfléchir à une alternative plus durable, penser dès le début à la consommation (éco-conception) et la longévité de nos créations.&nbsp;</p>



<p>Quelles sont les actions que vous avez ou souhaitez mettre en place ? </p>



<p>Quelles sont vos pistes pour concevoir de manière plus durable ? On vous recommande, par exemple, de jeter un oeil à ce que produit l&rsquo;<a href="https://institutnr-ch.org/">Institut du Numérique Responsable (INR)</a>.</p>



<h2>Discutons-en !</h2>



<p>Et nous vous invitons à venir en discuter avec nous lors de notre talk « <em>le design de demain : durable et responsable</em> » dans le cadre du <a href="https://www.meetup.com/fr-FR/webmardi/events/283765658">webmardi</a>, à l&rsquo;Eikon (Fribourg).</p>


C’est quoi la durabilité ?


<p>Lorsque je suis arrivée chez Antistatique j’ai eu la chance de pouvoir proposer mes idées pour faire avancer l’agence. Commerciale de métier, je propose d’exposer dans un salon spécialisé. &nbsp;Et nous voilà donc inscrit pour notre <strong>première participation au Salon LEC</strong> sous le Hall 4 de Palexpo près de Genève. Trois jours qui ont fait de notre semaine un moment particulier et unique, avec des rencontres et des sourires. Vous vous demandez comment ça s’est déroulé&nbsp;? Bien, entrez dans les coulisses du stand E34 d’Antistatique.</p>



<h2>Jour 0&nbsp;: Le montage</h2>



<p>            Je retrouve <a href="https://antistatique.net/equipe/marc">Marc</a> et <a href="https://antistatique.net/equipe/alberto">Alberto</a> ce lundi 20 septembre au bureau de Genève vers Cornavin. Le salon commence presque pour nous et le stress monte d’un cran. Nous allons pouvoir découvrir notre espace à 14h mais avant, un peu de logistique. Nous avons prévu plein de chose et nous ne devons rien oublier. Chargement des voitures, listing et vérification. Un passage par un supermarché pour prendre capsules de café, gobelets et autres consommables pour deux jours. Nous refermons les coffres en soupirant. Ouf. Deux voitures pleines mais tout est là !</p>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Nous prenons la route pour Palexpo, et en approchant des panneaux nous indiquent la route&nbsp;: Montage LEC. C’est pour nous. Je me stop vers un vigile qui me montre une place ou me garer directement dans le hall 4. Je sors de ma voiture et ouvre le coffre. Autour de moi, l’effervescence des exposants et tous ont l’air plus habitué que nous. Ils déplient des diables, des chariots pour charger des caisses. Nous&nbsp;? Nous ferons plusieurs aller retours pour vider les véhicules en portant à la main des sacs et des cartons. Note pour la prochaine fois&nbsp;: prendre de quoi transporter le matériel.</p>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Puis nous découvrons le stand. Bien que vide il est <em>Woaw</em>. Ouais on n’est pas peu fière du covering designé par <a href="https://antistatique.net/equipe/pierre">Pierre</a>. C’est magenta, c’est dynamique, c’est nous, c’est Antistatique. Le reste de l’après-midi c’est une suite d’ouverture de carton et d’aménagement pour que le stand soit prêt le lendemain pour le public.</p>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Nous installons une table haute blanche et trois tabourets noir, un bureau d’accueil blanc sur lequel nous mettons en place un écran qui diffusera en boucle une présentation de ce qui nous rends fière. Avec Alberto, nous nous attelons a monté notre animation&nbsp;: une roue de la fortune qui est, à tous les coups, gagnante&nbsp;: lot de consolation, heures de consulting en stratégie marketing ou en design et même des Tests utilisateurs&nbsp;!</p>



<p>            Tout est en place. C’est beau et on se reconnait dans ce qui a été fait. Nous débarrassons les cartons dans la poubelle de tri mis à disposition et nous pouvons quitter le hall 4 qui nous promets des journées intenses.</p>



<h2>Jour 1&nbsp;: Vous avez dit «&nbsp;nocturne&nbsp;»&nbsp;?</h2>



<p>           Ouverture de porte du salon à 8h pour les exposants et à 8h45 pour les visiteurs. Nous sommes prêts ! Sur le stand, Alberto, Marc, <a href="https://antistatique.net/equipe/guillaume">Guillaume</a> et moi installons les derniers détails. La vidéo est lancée sur l’écran, les boissons sont au frais et plusieurs « lots de consolation » sont prêts à la distribution. Et notre premier visiteur arrive. Nous écoutons attentivement son projet, prenons des notes, présentons notre agence avec fierté et proposons de tourner la roue. Un lot de consolation de gagné ! Je lui tends un petit tote bag en coton floqué du message « Antistatique, Wine not ! » qui contient une boule anti-stress et une petite bouteille de rosé « Belles filles » 2019 de la Cave de Genève. Les visiteurs sont ravis.</p>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Au fil des heures, les visiteurs, flânant dans les allées s’arrêtent demandent des renseignements. Malgré le peu de monde et la légère déception, les personnes qui sont là on de réels besoins. La journée passe vite jusqu’à 17h où dans les allées, règne le calme plat. Une nocturne est annoncée jusqu’à 21h mais nous n’espérons plus voir de nouveaux arrivants. Qu’importe, la soirée exposant peu commencer. Nos voisins sont très sympas et nous commençons à bavarder. Leur animation de stand&nbsp;? Une table de Beer Pong qui attire de plus en plus de monde. Une franche camaraderie s’échappe entre les rires et les discutions. Certains se révèlent être des vrais compétiteurs et sans rien vous cacher, moi la première. Nous découvrons aussi des start-ups, toutes dans la transformation digitale avec qui nous pouvons échanger avec compréhension. Nous vivons les mêmes problématiques et parfois nous pouvons nous entraider. Nous échangeons des cartes de visites, et nous partageons nos petits secrets de stand et d’expérience des années précédentes.</p>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Puis la soirée prend fin sur un note joyeuse et conviviale. Les lumières s’éteignent et nous espérons que le lendemain sera plus mouvementé. En tout cas, nous restons à block pour le lendemain.</p>



<h2>JOUR 2&nbsp;: Dernier jour</h2>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Les allées sont encore vides quand nous reprenons possession de notre stand. En traversant le salon, nous saluons de nouvelles connaissances de la veille. Je profite pour faire le tour du salon. Il est divisé en deux&nbsp;: une partie IT, solution Data et la partie communication. Plus de 80 exposants présents. Je passe devant différentes salles ou les conférences ont lieu pour presque 200 représentations.</p>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; La vieille Marc et Guillaume avaient présenter notre vision lors de notre conférence&nbsp;<a href="https://antistatique.github.io/slides-i18n" data-type="URL" data-id="https://antistatique.github.io/slides-i18n">«&nbsp;<em>Solutions web pour toucher l’international : être dans chaque pays et dans toutes les cultures&nbsp;</em>»</a>. Lors de cette présentation de 40 minutes, ils ont expliqué à la vingtaine de participants comment s’adresser à son public dans plusieurs pays avec des langues et des cultures différentes.</p>



<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2021/10/Image-from-iOS-1-1-edited.jpg" alt="" class="wp-image-7579" width="1416" height="943" srcset="https://content.antistatique.net/app/uploads/2021/10/Image-from-iOS-1-1-edited.jpg 2551w, https://content.antistatique.net/app/uploads/2021/10/Image-from-iOS-1-1-edited-300x200.jpg 300w, https://content.antistatique.net/app/uploads/2021/10/Image-from-iOS-1-1-edited-768x512.jpg 768w, https://content.antistatique.net/app/uploads/2021/10/Image-from-iOS-1-1-edited-1536x1024.jpg 1536w, https://content.antistatique.net/app/uploads/2021/10/Image-from-iOS-1-1-edited-2048x1365.jpg 2048w" sizes="(max-width: 1416px) 100vw, 1416px" /></figure>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; La matinée de cette seconde journée est plus longue, moins de monde. Les personnes qui passent dans les allées savent ce qu’ils veulent. Chaque discussion est intéressante et découlera potentiellement d’un business.</p>



<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Malgré que le salon finît à 17h, une heure avant certain exposant rangent déjà. &nbsp;Certain on même déjà disparu. De notre côté nous restons jusqu’à la fin, toujours motivé. Encore quelque rencontre agréable, des distributions de lots et il est temps de ranger. Nous débranchons les machines, vidons le frigo et remballant les nombreux lots qu’ils nous restent encore. Un homme arrive et décolle le covering, ça y’est, c’est terminé pour de bon. Deux heures plus tard, nous quittons Palexpo.</p>



<h2>En conclusion</h2>



<p>Pour Antistatique, c’était une première et nous n’avions aucun élément de comparaison. Il est donc difficile pour nous de savoir ce qu’il en était vraiment. Bon ou mauvais salon&nbsp;? Personnellement, j’ai participé a pas mal de salon commerciaux comme celui-là en tant qu’exposant et le manque de monde était plutôt important. &nbsp;Un évènement, rappelons-le post Covid, avec un accès uniquement sous présentation d’un pass sanitaire qui a peut-être freiner les professionnels. Nous étions déjà très heureux de faire cette édition et cette expérience a été enrichissante humainement. Qui sait, peut-être, nous verrons nous l’année prochaine&nbsp;?</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="320" height="427" src="https://content.antistatique.net/app/uploads/2021/10/Capture-décran-2021-10-08-à-14.13.26-e1633695339849.png" alt="" class="wp-image-7616"/></figure>


SALON LEC 2021


<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1950" src="https://content.antistatique.net/app/uploads/2021/09/AfterlightImage-2600x1950.jpg" alt="un main ouvrant un livre" class="wp-image-7310" srcset="https://content.antistatique.net/app/uploads/2021/09/AfterlightImage-2600x1950.jpg 2600w, https://content.antistatique.net/app/uploads/2021/09/AfterlightImage-300x225.jpg 300w, https://content.antistatique.net/app/uploads/2021/09/AfterlightImage-768x576.jpg 768w, https://content.antistatique.net/app/uploads/2021/09/AfterlightImage-1536x1152.jpg 1536w, https://content.antistatique.net/app/uploads/2021/09/AfterlightImage-2048x1536.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<h2>Parfois il y a des mots que tu ne comprend pas ? Tu te sens vite perdu·e, avec cette impression d’être le·a seul·e à ne pas comprendre ? </h2>



<h3>L’idée de cet article est justement de t’aider à tout capter (ou du moins une grande partie) et de faire un peu le point sur les termes utilisés dans le digital, et plus précisément quand on parle <strong>publicité online.</strong></h3>



<h2>Voici donc <strong>LE</strong> glossaire pour les nuls, qui fera de toi un·e véritable expert·e.</h2>



<p><strong>Capping</strong></p>



<p>Permet de limiter le nombre d&rsquo;apparition d’une publicité, <em>personne n’a envie de revoir 1000 fois la même pub !</em></p>



<p><strong>Bid request</strong></p>



<p>C’est le fait de faire une demande d’enchère en temps réel. Elle permet au plus offrant d’obtenir l’espace publicitaire. <em>You win!</em></p>



<p><strong>Lead</strong></p>



<p>C&rsquo;est un prospect, un·e potentiel·le futur·e client·e.</p>



<p><strong>Opt-in</strong></p>



<p>Le fait de s&rsquo;inscrire volontairement à une liste de diffusion par email.</p>



<p><strong>Double opt-in</strong></p>



<p><em>La même en version double ! </em></p>



<p>Le fait de confirmer son inscription en cliquant sur un lien dans un mail reçu suite à l&rsquo;inscription volontaire à une liste. Vous suivez toujours ?</p>



<p><strong>Opt-out</strong></p>



<p><em>C’est l’inverse de ce qu’il y a avant ! </em>😉</p>



<p><strong>Persona</strong></p>



<p>En gros, un persona représente le public de votre site ou de votre campagne. Il doit être la réponse à cette question : <strong>quel est son besoin, au fait ?</strong></p>



<p>Cette définition des personas se réalise au cours d’un workshop spécifique. D’ailleurs chez Antistatique, on a <a href="https://antistatique.net/equipe">une équipe d’UX designers</a> super chauds pour vous aider ! </p>



<p><strong>Pure Player</strong></p>



<p>C’est le fait de vendre uniquement sur Internet.</p>



<p><strong>PPC (Pay-per-click)</strong></p>



<p>C’est un modèle publicitaire où on ne paye la publicité que lorsqu’un visiteur/prospect clique dessus.</p>



<p><strong>CLV (Customer Lifetime Value)</strong></p>



<p>C’est en quelque sorte, une manière d’évaluer ce que rapporte un·e client·e tout au long de sa vie avec la marque. On estime ensuite combien il·elle va rapporter pendant cette période.</p>



<p>Une brève comparaison avec le coût d’acquisition client·e et on check ainsi si on a été rentable ou non. <em>Tout simplement 😉</em></p>



<p><strong>Reach (la portée)</strong></p>



<p>C’est le nombre de personnes que l’on touche grâce à une publication (qu’elle soit payante ou non).</p>



<p><strong>A/B Testing</strong></p>



<p>C’est un type de campagne très utilisé pour tester 2 versions différentes (voir plus !!). Par exemple, on va créer 2 visuels de banner différents, on lance ensuite notre campagne, et HOP ! On compare quelle version a le mieux performé ! </p>



<p>En résumé, c&rsquo;est <strong>LA</strong> méthode la plus efficace pour tester un nouveau design, ou encore l’ajout d’un nouveau composant sur une landing page ou même tester différents messages !</p>



<p><strong>Call-To-Action (CTA)</strong></p>



<p>C’est un bouton<em> tout simplement.</em> <em>Bon il doit amener quelque part, et pas sur une page d&rsquo;erreur hein.</em></p>



<p><strong>R.O.I (Return On Investment)</strong></p>



<p>(= Retour sur investissement). En gros, ça sert d’indicateur pour vérifier la rentabilité d&rsquo;une campagne. C’est le rapport entre le chiffre d&rsquo;affaires et les coûts totaux dépensés/investis pour une campagne.</p>



<p><strong>VTR : “View-Through Rate” ou “Taux de complétion vidéo”</strong></p>



<p>C’est le taux de personnes qui vont jusqu’au bout d’une vidéo publicitaire. Grâce à cet indicateur, on arrive à capter l’intérêt de l’audience et de jauger l’efficacité de la campagne.</p>



<p><strong>LTR : “Listen-Through Rate” ou “Taux d’écoute”</strong></p>



<p>Il nous indique l’efficacité d’une publicité audio, il mesure les spots audio écoutés intégralement. Il est très intéressant surtout dans les cas où les audios sont “skippables”.</p>



<p><strong>ADX : “ADvertising eXchange” ou “Échange publicitaire”</strong></p>



<p>Un ad exchange est une plateforme qui gère à la fois de la vente et de l’achat d’espaces publicitaires. Sur un ad exchange, la connexion vente / achat se fait très souvent en RTB soit aux enchères en live ! (=Real Time Bidding).&nbsp;</p>



<p><strong>DSP : “Demand Side Platform”</strong></p>



<p>Un DSP est une plateforme permettant aux annonceurs de réaliser et optimiser leurs achats d’espaces publicitaires display.&nbsp;</p>



<p><strong>PMP : “Private MarketPlace”</strong></p>



<p>Imaginez, <em>une plage de sable blanc</em>&#8230;. PRESQUE &#8230; partons plutôt sur une place de marché accessible uniquement sur invitation ! </p>



<p><strong>Snack content</strong></p>



<p>Comme son nom l’indique c’est du contenu rapidement consommable. 🍫 <em> Autrement dit du “bébé” contenu.</em></p>



<p><strong>Social Selling</strong><br>C’est le fait d’utiliser les réseaux sociaux pour vendre. On utilise le plus souvent LinkedIn, Twitter, SlideShare ou Facebook !</p>



<p><strong>Coût par clic</strong></p>



<p>On paie seulement lorsqu’il y a un clic sur une de nos campagnes publicitaires. C’est un indicateur clé qui permet de savoir rapidement si un levier est cher ou non. Suivant votre budget, il ne faut pas négliger cette analyse la, checkez bien avant dans <a href="https://antistatique.net/blog/strategie-dachat-media-la-creation-dun-plan-media">le plan média</a> 😉</p>



<p><strong>Coût par impression</strong></p>



<p>La même chose sauf qu’ici on paie au nombre d’affichages de la pub !</p>



<p><strong>Funnel (de conversion)</strong></p>



<p>On l’appelle aussi l&rsquo;entonnoir de conversion !  </p>



<p>C’est en gros le chemin qu’un·e visiteur·euse (prospect) va suivre jusqu’à faire une conversion !<br>Grâce à ce chemin on sait exactement par quelle page il·elle est passé, et cela nous permet de mettre en place un plan de tracking très précis.&nbsp;</p>



<p><strong>Retargeting</strong></p>



<p>Imaginez … vous cliquez sur une bannière publicitaire vous vendant un super vélo, vous êtes ensuite redirigé sur le site de vélos, mais vous décidez finalement de ne pas acheter de vélo tout de suite. L’idée du retargeting c’est de vous re-cibler plus tard <em>(pas trop tard non plus ! Quelques jours max)</em> et de vous re-proposer d&rsquo;acheter ce super vélo ! Tout ça grâce au célèbres cookies du site 🍪.</p>



<p><strong>RTB : Real-time bidding (enchères en temps réel)</strong></p>



<p>Cette méthode utilise un algorithme qui permet de mettre aux enchères un espace publicitaire ciblé. L&rsquo;achat et la vente d&rsquo;espaces publicitaires se font alors<strong> en temps réel</strong>. </p>



<p><strong>SEM/SEO/SEA/SMO</strong></p>



<p>Ce sont toutes des activités dont le but est d&rsquo;optimiser sa présence sur les moteurs de recherche. Le chapitre général, c&rsquo;est le SEM (Search Engine Marketing) et il regroupe les 3 autres. En SEO (Search Engine Optimisation), on travaille le référencement <strong>naturel</strong>, en SEA (Search Engine Advertising), on travaille sur du référencement <strong>payant</strong>. Et enfin le SMO (Social Media Optimisation), dont le but est de développer la visibilité d’une marque <strong>sur les réseaux sociaux</strong>.</p>



<h2>Conclusion</h2>



<p><em>J’espère que cet article vous aidera à mieux comprendre le</em><strong><em> jargon du digital</em></strong><em> et plus précisément de la pub online. Si nous avons oublié d’autres mots qui vous semble incompréhensibles, n’hésitez pas à nous le faire savoir en commentaires ci-dessous ! 👇 </em></p>



<p>Et bien entendu laissez-nous vous accompagner sur votre stratégie digitale : <a href="https://antistatique.net/services">POURQUOI PAS !</a> / NO NEED</p>


Lexique sur la publicité online (pour les nuls)


<p>J’ai eu la chance de participer pour la première fois, ce jeudi 2 septembre, à cet événement magnifique organisé&nbsp;par <a href="https://www.forom.ch/" data-type="URL" data-id="https://www.forom.ch/">Forom.ch</a> – ou le Forum Économique Romand qui propose différentes rencontres incontournables en suisse romande. Le titre est accrocheur : Golf and Business Cup. Sans mentir, je n’ai jamais fait de golf, mais la proposition d’initiation m’attire et je m’inscris sans autre pour une journée au green de Sion pour lier l’utile à l’agréable. Est-ce que je recommanderai ? Alors là, sans hésitation !</p>



<p class="is-style-lead">Un début plein de découvertes</p>



<p>J’entre dans ma voiture pour m’attaquer aux deux heures de route qu’il me faut pour rejoindre le golf de Sion. Heureusement pour moi, malgré le fait que je suis une lève tôt, je ne fais pas la vraie compétition qui commence à 7h30. L’accueil pour l’initiation est à 11h45. J’ai hâte. J’ai déjà participé à des événements Forom et je n’ai encore jamais été déçue. Et le <a href="https://www.golfsion.ch/" data-type="URL" data-id="https://www.golfsion.ch/">Golf de Sion</a> vaut le détour. Niché dans un creux de montagne impressionnant, le green d’un vert clair est entouré de vignes en terrasses. Surplombé par des châteaux &#8211; j&rsquo;apprendrai plus tard que ce sont ceux de Valère et Tourbillon – dignes représentants de la beauté du Valais. Par chance, au milieu de l’été catastrophique, le soleil est au rendez-vous aussi.</p>



<p>L’invitation annonçait « Tenue pour l’initiation : sport chic, version décontractée, chaussures de sport ». Je m’observe quelques secondes. J’ai revêtu un pantalon bleu foncé retroussé sur les chevilles, un polo blanc et une casquette assortie. Habituellement sur talon, j’ai chaussé une paire de Stan Smith blanche pour compléter ma tenue. Grâce aux conseils avisés d’une amie golfeuse, j’étais dans le thème. Je sors de ma voiture, intimidée par le lieu, et souffle un bon coup après avoir repéré les panneaux de l’événement. Un peu de trac se fait ressentir mêlé à l’impatience. D’après la liste des invités, je ne connaissais absolument personne.</p>



<p>Je suis accueillie par une dame qui coche mon nom sur sa liste et me guide jusqu’à un bar extérieur au pied du parcours. Je m’avance timidement parmi un groupe d’une vingtaine de personnes qui me sourient. Je prends une boisson fraîche et suis entraînée dans une explication plus qu’intéressante sur le bar à cigares qui se trouve sur le côté. Une marque créée et proposée par le directeur du Forom autour des thèmes du sport automobile, du golf et du casino. Des cigares entièrement faits à la main en République Dominicaine, rien que ça. On me parle des saveurs, des manières de conservation et de la dégustation. Je ne connaissais rien et le sujet est passionnant surtout raconté par des passionnés.</p>



<p>Enfin, on nous propose de suivre deux professeurs, golfeurs professionnels, pour l’initiation. Et, joie pour moi, un petit « concours initiation » est prévu. Challenge accepted! Après avoir parlé à mes camarades, je repère de véritables concurrents : ce n’est pas leur première initiation, contrairement à moi.&nbsp;&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;"> </p>
            <p style="margin: 0; color: #4D4D70; font-size: 21px; line-height: 31.5px;">Nous sommes séparés en deux, et je commence par le Putting. Un mini parcours de golf où le but est d&rsquo;entrer la balle dans le trou. 6 drapeaux en repère avec pour objectif de faire le moins de coups. Le professeur nous explique et je me lance pour terminer en 14 coups. Pas mal. Ma partenaire finit avec 17. Nous continuons avec « l’approche » : une zone de green est située plus loin où il faut que notre balle s’arrête. Trois essais qui peuvent nous enlever 1 point par réussite. Pour moi c’est impossible, je tire avec plus de force et ma balle ne s&rsquo;y arrêtera aucune fois sur mes trois coups.
<br><br>
Ma partie préférée se passe sur le practice. Le but étant d’avoir le bon geste pour faire décoller la balle le plus loin possible. J’écoute attentivement les conseils sur le positionnement et la technique et je me lance. Les premiers coups, je ne touche pas la balle avec une frustration naissante, très vite balayée par mon premier touché. Satisfaction.Même si c’est très proche du sol et pas très loin, au moins c’est touché. Très vite je fais de beaux lancés jusqu’à atteindre 120 m (avec un objectif de départ de 50m). Pas peu fière, je parade légèrement auprès de mes camarades dans une franche convivialité. Malheureusement au bout de 2h d’initiation c’est la fin, nous sommes priés de rejoindre le « Bistro du Golf » pour un repas.</p>
            </div>
    <div style="flex-basis: 50%;">
                                                      <figure style="margin: 0 0 40px 0; width: 660px; height: 416px;">
                      <img src="https://content.antistatique.net/app/uploads/2021/09/Melanie-golf-ma-balle.gif">
                      <figcaption style="font-size: 18px; color: #4D4D70;"></figcaption>
                  </figure>
                            </div>
</div>



<p class="is-style-lead">Repas et discussions savoureux.</p>



<p>Pour ne rien cacher, je m’attendais à un cocktail avec quelques petits fours, mais au lieu de ça : j’ai eu ce qu’ils appellent le traditionnel Business Lunch On The Green. Des tables accueillant huit personnes étaient dressées et un repas complet nous a été servi : salade composée, volaille en sauce et petits légumes, panna cotta aux fruits rouges, café. Repus. En plus, tout avait du goût.</p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2560" height="2560" src="https://content.antistatique.net/app/uploads/2021/09/IMG_7670-edited-scaled.jpg" alt="" class="wp-image-7208" srcset="https://content.antistatique.net/app/uploads/2021/09/IMG_7670-edited-scaled.jpg 2560w, https://content.antistatique.net/app/uploads/2021/09/IMG_7670-edited-300x300.jpg 300w, https://content.antistatique.net/app/uploads/2021/09/IMG_7670-edited-150x150.jpg 150w, https://content.antistatique.net/app/uploads/2021/09/IMG_7670-edited-768x768.jpg 768w, https://content.antistatique.net/app/uploads/2021/09/IMG_7670-edited-1536x1536.jpg 1536w, https://content.antistatique.net/app/uploads/2021/09/IMG_7670-edited-2048x2048.jpg 2048w" sizes="(max-width: 2560px) 100vw, 2560px" /></figure>



<p>Un peu de vin et beaucoup de discussions agréables. Je découvre notamment les personnes qui ont participé à la vraie compétition. Nous sommes presque 80 sur la majestueuse terrasse pouvant facilement accueillir le double&nbsp; &#8211; par respect des distanciations sociales.&nbsp;</p>



<p>Retrouver le contact humain dans cette crise sanitaire est un vrai plaisir, on ne s’adonne pas encore aux poignées de main, mais on échange sur différents sujets et notamment un de mes préférés : la digitalisation des entreprises. Des rires s&rsquo;échappent entre les tables et des cartes de visite sont échangées avec la promesse d’autres discussions. Des femmes et des hommes entrepreneurs, dirigeants de PME ou décideurs issus des différents secteurs économiques du bassin romand sont en pleine discussion et je découvre les parcours incroyables d’individus qui partagent leurs expériences et qui s&rsquo;intéressent à ma petite personne.&nbsp;</p>



<p>À la fin du repas, on discerne des prix pour les participants à la Cup dont une nuit au Beau Rivage de Lausanne qui provoque des “oooh” impressionnés dans l’assistance. Ça me donne envie de me mettre au golf pour tenter ma chance l’année prochaine. Les différents groupes appelés se lèvent sous les applaudissements et je demande discrètement à mon voisin la signification des points proclamés. Je n’ai clairement aucune chance l’année prochaine, mais bon…&nbsp;</p>



<p>La petite surprise c’est qu’on donne aussi un prix pour le gagnant du concours initiation. Bon, malgré tout ce que j’ai donné, je n’ai pas remporté le lot. Mais j’ai applaudi mon voisin qui a fait un point de moins que moi. Peut-être que ça, c’est à ma portée pour l’année prochaine.&nbsp;</p>



<p>Parce que oui, vous l’avez compris, j’ai passé un bon moment et j&rsquo;espère pouvoir participer une nouvelle fois à cet événement. Mais en attendant la prochaine Golf and Business Cup, j’ai noté le prochain rendez-vous au 14 septembre pour Le Forom Principal, une journée de conférences sur la PME du futur qui se déroulera à Ecublens au SwissTech Convention Center. Je vais recroiser des visages maintenant connus, comprendre les enjeux de la digitalisation des entreprises pour l’avenir tout en partageant des moments avec des personnes qui &#8211; comme moi &#8211; s’interrogent sur les opportunités à venir.&nbsp;</p>



<p>Si vous êtes présent au Forom, n&rsquo;hésitez pas à venir me voir ! Je suis la grande rousse avec le sourire. Et si vous êtes seul, n’ayez crainte vous avez déjà une amie 😉</p>



<p><a href="https://vimeo.com/598947666/cac27753ed">Voir le vidéo de l’événement  </a></p>


La Golf and Business Cup 2021


<figure class="wp-block-image size-large"><img loading="lazy" width="600" height="330" src="https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-1-2.png" alt="" class="wp-image-7046" srcset="https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-1-2.png 600w, https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-1-2-300x165.png 300w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



<p>Voyageuse, curieuse et pleine d’énergie, notre super cheffe de projet et stratège digital <a rel="noreferrer noopener" href="https://antistatique.net/equipe/sacha" data-type="URL" data-id="https://antistatique.net/equipe/sacha" target="_blank">Sacha</a> est une vraie aventurière dans l’âme. </p>



<p>Afin de nous permettre d’encore mieux la découvrir, nous lui avons concocté 10 questions auxquelles elle a accepté de répondre.</p>



<p>On commence fort avec la première question :</p>



<p>***</p>



<h3><strong>Quelle est ta plus grande source de motivation dans la vie ?</strong></h3>



<p>MANGER. Énorme goal dans ma vie, tout s’orchestre autour du plaisir de bien manger ! Je suis sans cesse à la recherche de nouveaux restos à tester. Découvrir des nouvelles techniques de cuisson (découverte récente du Big green egg !).</p>



<p>Lorsque je voyage, j’aime prendre le temps de découvrir les plats typiques du pays dans lequel je suis. Bref, manger est une VRAIE passion !</p>



<h3><strong>Quel est ta dernière sortie culturelle (expo/concert/cinéma etc) ?</strong></h3>



<p>C’était au musée des Beaux-arts à Lausanne, lors de la sortie d’été 2020 avec Antistatique.&nbsp;</p>



<p>J’ai aussi plus récemment visité le Théâtre antique d’Orange, 2ème fois que j’utilisais un audio-guide et mon dieu que l’expérience a évolué ! Sinon, j’ai aussi sillonné pas mal de routes, notamment à Los Coloraos dans le désert de Gorafe &#8211; montagnes aux pierres rouges, MAGNIFIQUE ! Il y a même une partie de Star Wars qui a été tournée là bas !</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="600" height="330" src="https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-2-1.png" alt="" class="wp-image-7048" srcset="https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-2-1.png 600w, https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-2-1-300x165.png 300w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



<h3><strong>Quel métier souhaitais-tu faire quand tu étais enfant ?</strong></h3>



<p>Je rêvais d’être nez et de créer des parfums. J’ai toujours eu un bon odorat. Je faisais un jeu plus petite : reconnaître les parfums des gens qui passaient dans la rue. Je trouve que les parfums reflètent vraiment la personnalité des gens !</p>



<h3><strong>Quels Emojis te représentent le mieux ?</strong></h3>



<p>Cela dépend de mon humeur !</p>



<p>🧐 celui-ci pour mon côté curieux, j’aime tout comprendre !</p>



<p>💃🏽 aussi celui-jà car je suis toujours partante pour tout : j’ai appris à dire OUI et sortir régulièrement de ma zone de confort !</p>



<p>🦎 enfin, lui, car je m’adapte très facilement aux personnes que je rencontre, aux environnements que je visite.</p>



<p><em>Faute d’Emoji caméléon, celui-ci fera l’affaire 😉</em></p>



<h3><strong>Ton restaurant préféré au monde ?</strong></h3>



<p>L’<a href="https://osteriafrancescana.it/" data-type="URL" data-id="https://osteriafrancescana.it/">Osteria Francescana</a>, avec le grand chef étoilé Massimo Bottura ! C’est un restaurant italien où il revisite tous les plats typiques d’Italie.</p>



<p>J’ai découvert ce restaurant grâce à la série <em>“<a rel="noreferrer noopener" href="https://www.netflix.com/ch-fr/title/80007945" data-type="URL" data-id="https://www.netflix.com/ch-fr/title/80007945" target="_blank">Chef’s table</a>”</em> sur Netflix, et depuis je rêve d’y aller, mais ce sont des mois et des mois d&rsquo;attente !&nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="600" height="330" src="https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-3-2.png" alt="" class="wp-image-7051" srcset="https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-3-2.png 600w, https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-3-2-300x165.png 300w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



<h3><strong>Quel est ton talent caché ?</strong></h3>



<p>On m’a toujours dit que je chantais bien ! Et j’adore chanter partout mais jamais devant des gens 😛</p>



<p><em>C’est noté, prochaine sortie, karaoké !</em></p>



<h3><strong>Quelle est ta citation favorite ou encore le mot que tu dis le plus souvent</strong> ?</h3>



<p><em>Un avis c’est comme un nombril, tout le monde en as un ! </em></p>



<p>Le mot que je cite le plus souvent : “Jean-Pierre” ! J’ai tendance à l’employer pour tout et pour rien, les vrais savent&#8230;&nbsp;</p>



<h3><strong>Quel est le voyage qui t’a le plus marqué ?</strong></h3>



<p>Sans hésitation, la Chine ! Déjà parce que j’y ai vécu 8 mois, et c’est aussi là bas où j’ai vécu une vie parallèle, où je partais de 0.</p>



<p>1ère fois loin de mes proches, vrai sentiment de liberté ! Personne ne me connaissait, j’ai pu être qui je voulais être. Sinon, le choc culturel a été tout de même assez violent avec des événements forts et marquants !&nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="600" height="330" src="https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-4.png" alt="" class="wp-image-7053" srcset="https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-4.png 600w, https://content.antistatique.net/app/uploads/2021/08/image-article-sasha-4-300x165.png 300w" sizes="(max-width: 600px) 100vw, 600px" /></figure>



<h3><strong>Quelle est la chose que tu préfères dans ton métier ?</strong></h3>



<p>Le contact humain est très important, que ce soit avec les clients ou la team Antistatique. J’aime aussi énormément le côté rigoureux, organisationnel que le job impose et c’est exactement ce dont j’ai besoin pour être épanouie dans la vie ! 😛&nbsp;&nbsp;</p>



<p>J’adore les différences entre chaque projet, j&rsquo;apprends tous les jours, je découvre de nouveaux secteurs et enjeux. Bref je m’ennuie jamais !</p>



<h3><strong><strong>Alors, plutôt chat ou chien ?</strong></strong></h3>



<p>J’ai envie de répondre cheval ! 🐎</p>



<p>***</p>



<p>Merci, Sacha, on a hâte de tester tous les restaurants des environs avec toi ! 🙂</p>


10 questions pour découvrir Sacha


<p class="is-style-lead">Dans la course à la refonte, on se soucie surtout d’avoir un design plus en vogue, aussi un site qui fonctionne sur les derniers smartphone et frigos connectés et heureusement aussi de l’ergonomie. On ne se soucie malheureusement rarement des implications sur le traffic, le référencement, la mesure du succès de cette même refonte. </p>



<p>Nous avons réalisé cette présentation dans le cadre du <a href="https://www.lec-expo.com/fr/exposants/b13c2fdd9da55c98/antistatique">Salon LEC du 15 au 17 juin 2021</a>. Notre objectif est de vous convaincre d’approcher une refonte par plus petite partie pour un vrai développement durable et mesurable.</p>



<h2>Revoir l&rsquo;enregistrement du talk</h2>



<figure class="wp-block-embed is-type-video is-provider-vimeo"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Surtout ne pas refaire son site &amp;ndash; Antistatique - Marc Friederich" src="https://player.vimeo.com/video/566903315?dnt=1&amp;app_id=122963&amp;h=e1106cd49a" width="500" height="313" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<h2>Si vous ne deviez retenir que 3 points</h2>



<ul class="is-style-objectives"><li>Apprenez à maîtriser vos indicateurs de performance</li><li>Concentrez-vous sur un seul public pour commencer. Ou sur un chemin critique. Pourquoi ne pas mettre en place un site dédié comme laboratoire de test ?</li><li>Basé sur les indicateurs, optimisez le contenu, optimisez les interactions (l&rsquo;ergonomie) puis ajoutez le design visuel (l&rsquo;émotion).</li></ul>


Surtout ne pas refaire son site – Salon LEC 2021


<p class="is-style-lead">Retour sur notre journée de conférence à l&rsquo;<a href="https://www.agilesuisse.ch/agile-tour-2021-online">AgileTour 2021 à Lausanne</a> (mais en fait sur Zoom) organisée par <a href="https://www.agilesuisse.ch/">Agile Suisse</a>. Toute notre équipe de gestion de projet a eu la chance de participer à cet événement.</p>



<h2><strong>Variété des thèmes du programme</strong></h2>



<p>Avec une keynote puis 3 tracks avec 5 à 7 interventions par track, il y avait du choix ! Nous avons donc essayé de nous répartir sur les thèmes qui nous intéressaient le plus, afin de pouvoir tirer un maximum de cette journée en tant qu’équipe de <a href="https://antistatique.net/equipe">Project manager</a>. De l’approche plus globale, à la transformation vers l’agilité, en passant par des retours sur expérience, des ateliers participatifs très divers ou encore des focus sur des aspects bien précis du quotidien agile (comme les rétrospectives ou les estimations) et même un partage de ressources (livres, newsletters, podcasts…), il y en a eu pour tous les goûts !</p>



<figure class="wp-block-image size-large is-style-full-width"><img loading="lazy" width="2007" height="1078" src="https://content.antistatique.net/app/uploads/2021/06/mural_agil_tour.png" alt="Print screen de mural, l'application utilisée lors de la conférence pour regrouper les connaissances et accéder au programme." class="wp-image-6517" srcset="https://content.antistatique.net/app/uploads/2021/06/mural_agil_tour.png 2007w, https://content.antistatique.net/app/uploads/2021/06/mural_agil_tour-300x161.png 300w, https://content.antistatique.net/app/uploads/2021/06/mural_agil_tour-768x413.png 768w, https://content.antistatique.net/app/uploads/2021/06/mural_agil_tour-1536x825.png 1536w" sizes="(max-width: 2007px) 100vw, 2007px" /></figure>



<p></p>



<h2><strong>Ateliers participatifs</strong></h2>



<p>Plusieurs workshops ont été organisés permettant de mettre en commun les retours de différents métiers avec les mêmes problématiques. Cet échange permet d’avoir une quantité d’idées neuves sur des nouvelles méthodes à mettre en place. Un atelier <a href="https://en.wikipedia.org/wiki/Serious_game">Serious Game</a> mettant en pratique le framework <a href="https://en.wikipedia.org/wiki/Scaled_agile_framework">SAFe</a> nous a permis d’expérimenter la planification d’un projet de grande envergure (la construction de Lausanne plage). Très bonne expérience de communication et de gestion des contraintes à plusieurs équipes.&nbsp;</p>



<h2><strong>L&rsquo;agilité au delà du développement logiciel</strong></h2>



<p>Pour avoir participé à<a href="https://antistatique.net/blog/agile-tour-2012-a-lausanne-ce-vendredi"> plusieurs AgileTours</a>, nous constatons un changement de public. En effet, la conférence attire moins de développeurs et plus de professionnels d’horizons mixtes.&nbsp;</p>



<p>L’agilité est perçue comme un “label” pour expliquer une nouvelle manière d’approcher le travail et les décisions. L’objectif du <a href="https://agilemanifesto.org/">manifest Agile</a> est de redonner le pouvoir aux équipes et donner plus de sens au travail accompli. Nous avons discuté de l’agilité hors développement logiciel. Pour une transformation complète de l’entreprise.&nbsp;</p>



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="762" height="537" src="https://content.antistatique.net/app/uploads/2021/06/rh_agilite.png" alt="Luisa Colombo - InsideOut - Les RH pour l'Agilité - les blocs et outils pour une mise en place" class="wp-image-6515" srcset="https://content.antistatique.net/app/uploads/2021/06/rh_agilite.png 762w, https://content.antistatique.net/app/uploads/2021/06/rh_agilite-300x211.png 300w" sizes="(max-width: 762px) 100vw, 762px" /></figure>



<p>Des conférences sur l’agilité en entreprise, notamment pour de très grandes structures, sont très loin de la réalité de notre agence. Nous avons, en effet, une approche plus centrée sur les personnes dans la gestion d’Antistatique. Les stratégies sont discutées, les projets sont votés et la cohésion nous permet cette agilité naturelle des petites structures.</p>



<h2><strong>Dommage que la conférence ne dure qu’un seul jour</strong></h2>



<p>Chaque conférence/workshop nous a semblé beaucoup trop courts. Difficile donc d&rsquo;approfondir un sujet qui nous tenait à cœur et il y en avait !</p>



<p>Workshop participatif ou encore conférences à thématique agile, il nous aurait fallu plus de temps pour appréhender ces nouvelles approches. Nous repartons cependant avec beaucoup d’éléments et de bagage pour la suite … to be continued !</p>



<h2>Merci aux organisateurs-trices pour cette belle édition et vivement la prochaine !</h2>


AgileTour 2021 – Lausanne


<p>Septembre 2020 &#8211; nous recevons un appel d&rsquo;offres de qualité en provenance d’<strong>un office de tourisme. </strong>Durant cette période difficile, ce nouveau challenge est accueilli avec une joie certaine par l’équipe.</p>



<p>En effet notre agence bénéficie de réels atouts dans le domaine de la promotion du territoire helvétique dès lors que nous avons eu l’opportunité de dernières années de collaborer sur divers projets avec notamment Vaud tourisme, Présence Suisse ou encore l’office des Vins Vaudois.</p>



<p>L’appel d’offre mentionné est accompagné d’un excellent cahier des charges divisé en 12 chapitres qui nous inspire confiance. Nous voilà donc prêt et motivé à tenter notre chance dans cette nouvelle aventure :</p>



<ul><li>Envoi des questions* pour une meilleure compréhension du cahier des charges</li><li>Échanges d’une vingtaine d’e-mails avec le client potentiel afin d’affiner notre proposition</li><li>Production de notre dossier d’offre: stratégie, conception, design, développement <strong>(totalité du dossier et des livrables</strong> réalisé au sein de l’agence par les employés Antistatique)</li><li>Préparation de la défense</li></ul>



<p>Les informations du cahier des charges étant étonnamment très précises, nous prenons la liberté de questionner le prospect sur ce point :</p>



<p><strong>*“ Un grand merci pour votre cahier de charges (sous Notion) et pour la qualité de ce dernier, pourrions-nous savoir qui est la personne l’ayant produit ?”</strong><br>A cette question, le client potentiel nous répond qu’il s’agit d’un «&nbsp;consultant&nbsp;»</p>



<p>Octobre 2020 &#8211; après 1 mois de travail (environ 150 heures de travail) nous voilà prêt à soutenir notre dossier lors de la défense. Nous sortons de cet échange confiant et satisfait du travail réalisé. Toutefois, face à la liste des confrères participant à ce même concours, nous savons que le résultat sera serré et qu’il sera difficile de remporter ce projet.</p>



<p>Décembre 2020 &#8211; un rendez-vous téléphonique est agendé avec le client potentiel afin de connaître le résultat de l’appel d&rsquo;offre. Nous apprenons que nous ne sommes pas les heureux élus. Très habitués de ce processus, nous savons que cela fait partie du métier<br><br>Toutefois, à la fin d’un second <em>conf-call</em> durant lequel le prospect a la gentillesse de nous faire un retour sur notre projet, nous apprenons que l’agence ayant remporté le mandat est la même agence qui a créé l’excellent cahier des charges de l’appel d’offre. Stupéfaction, surprise, déception…</p>



<p>Certes, nous ne sommes pas dans un cadre de mise au concours publique et nous avons toujours encouragé la liberté de marché, mais ces deux paradigmes ne devraient pas nous empêcher de rester fair-play.&nbsp;</p>



<p>A notre sens, dans le cadre d’un appel d’offres, toutes les parties doivent agir selon les règles de la bonne foi. Ainsi, par souci de transparence dans cette étape de négociations, il est impératif de communiquer toutes les conditions dans lesquelles se déroule un appel d’offre ainsi que tous les éléments pertinents pouvant avoir un impact conséquent sur l’issue du processus. <br><br><strong>Nous rappelons qu’à aucun moment nous remettons en question le choix de ne pas être retenu</strong>.</p>



<p>Il paraît évident que si Antistatique est mandatée pour rédiger un cahier des charges, un appel d’offre ou un pitch, l’agence ne tentera pas de remporter ce même projet. Cette attitude permet d’éviter les doubles rôles qui sont rarement bénéfiques dans le monde professionnel.&nbsp;<br>Nous espérons que ces quelques lignes pourront encourager une meilleure collaboration et entente dans notre profession.</p>



<p>A tous nos confrères nous vous souhaitons le meilleur en cette année remplie de challenges.</p>



<p><a href="https://antistatique.net/equipe/alberto" data-type="URL" data-id="https://antistatique.net/equipe/alberto">Alberto</a>, <a href="https://antistatique.net/equipe/marc" data-type="URL" data-id="https://antistatique.net/equipe/marc">Marc</a>, <a href="https://antistatique.net/equipe/guillaume" data-type="URL" data-id="https://antistatique.net/equipe/guillaume">Guillaume</a> &amp; <a href="https://antistatique.net/equipe/gilles" data-type="URL" data-id="https://antistatique.net/equipe/gilles">Gilles.</a></p>



<p>ps: Marc a profité de créer un article de blog intitulé: “<a href="https://antistatique.net/blog/comment-bien-pitcher-une-agence-web-pour-la-refonte-de-son-site-internet"> Comment bien pitcher une agence web pour la refonte de son site Internet </a>“ afin de donner quelques conseils à nos futurs (potentiels) clients.</p>



<p>ps: Le prospect et l’agence (ayant remporté le mandat &amp; conçu le cahier des charges) ont été informés de notre démarche en amont de sa publication</p>


Concurrence peu loyale


<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1734" src="https://content.antistatique.net/app/uploads/2021/05/strategy_antistatique-2600x1734.png" alt="Antistatique agence web Lausanne Genève. Stratégie digitale. Marketing Digital." class="wp-image-6333" srcset="https://content.antistatique.net/app/uploads/2021/05/strategy_antistatique-2600x1734.png 2600w, https://content.antistatique.net/app/uploads/2021/05/strategy_antistatique-300x200.png 300w, https://content.antistatique.net/app/uploads/2021/05/strategy_antistatique-768x512.png 768w, https://content.antistatique.net/app/uploads/2021/05/strategy_antistatique-1536x1024.png 1536w, https://content.antistatique.net/app/uploads/2021/05/strategy_antistatique-2048x1366.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<p>Il était important pour nous, de mettre un peu de lumière sur l’un des métiers phares chez Antistatique : le <strong>spécialiste en stratégie digitale</strong>. Et quoi de plus concret que d’expliquer un exercice essentiel lors du lancement d’une campagne digitale : la réalisation du <strong>plan média</strong>.</p>



<p>Cet article sert réellement d’introduction à ce métier du digital, mais d’autres suivront afin d’aborder un maximum de sujets propres à l’<strong>Achat média</strong> et aux <strong>campagnes digitales</strong> (les concepts de campagnes les plus créatifs, les tendances du marché, les bonnes pratiques pour lancer une campagne digitale performante,…).</p>



<h2>Un plan média, c’est quoi ?</h2>



<p>Un<strong> plan média </strong>est un document souvent représenté sous le format d’un tableau excel. Il permet d’estimer en fonction des dépenses publicitaires par leviers, quels résultats la campagne pourrait atteindre. Il donne ainsi une précision (chiffrée) sur <strong>l’impact que notre campagne publicitaire pourrait atteindre</strong>. Ces chiffres sont donc des estimations, faites grâce à l’historique (de data) d’anciennes campagnes publicitaires lancées dans le même secteur.&nbsp;</p>



<p>Il est important de préciser qu’un plan média ne peut pas se réaliser sans avoir <strong>établi et défini une stratégie achat média au préalable</strong>.</p>


<div style="display: flex; flex-direction: row;">
    <div style="flex-basis: 8%;"></div>
    <div style="flex-basis: 20%; margin-right: 30px">
        <p style="font-size: 15px; color: #808098; text-align: right;">La stratégie achat média est d’ailleurs pensée par un Spécialiste en stratégie digitale, le plan média est, quant à lui, réalisé par un Spécialiste en achat média online, aussi appelé Media trader.</p>
    </div>
    <div style="flex-basis: 40%;">
        <p style="font-size: 21px;"><p>En effet, nous allons voir qu’il n’est qu’une partie infime de la <strong>stratégie achat média. </strong>Son rôle principal étant de mettre en lumière la performance de chacun des leviers identifiés lors de la stratégie et répartir le <strong>budget achat média</strong> attribué pour la campagne.</p>
</p>
    </div>
</div>



<p>Ci-dessous <strong>les 4 étapes phares</strong> que l’on retrouve dans une stratégie d’achat média :</p>



<ol><li>Définition du/des objectifs de la campagne : objectif de <strong>notoriété</strong> ou <strong>d’acquisition</strong>.</li><li>Définition des marchés et publics cibles.</li><li>Définition des leviers (plateformes digitales) à activer.</li><li>Définition du <strong>budget achat média</strong> et réalisation du plan média pour répartir ce budget par levier, marché, et voir le potentiel (<strong>reach</strong>) de la campagne.</li></ol>



<p>Ce que l’on peut voir c’est que le <strong>plan média</strong> est la dernière étape pour ficeler une stratégie d’achat média. C’est à partir des infos (budgets, leviers et ciblages) que le plan média peut être réalisé.</p>



<h2>Mais concrètement, ça ressemble à quoi un plan média ?</h2>



<p>Voici un exemple type de plan média:&nbsp;</p>



<figure class="wp-block-image size-large is-style-full-width"><img loading="lazy" width="2600" height="1160" src="https://content.antistatique.net/app/uploads/2021/05/planmedia_exemple-2600x1160.png" alt="Plan Media. Strategie Achat Media. Stratégie Digitale,  Marketing digital.
Stratégie média et acquisition
" class="wp-image-6324" srcset="https://content.antistatique.net/app/uploads/2021/05/planmedia_exemple-2600x1160.png 2600w, https://content.antistatique.net/app/uploads/2021/05/planmedia_exemple-300x134.png 300w, https://content.antistatique.net/app/uploads/2021/05/planmedia_exemple-768x343.png 768w, https://content.antistatique.net/app/uploads/2021/05/planmedia_exemple-1536x685.png 1536w, https://content.antistatique.net/app/uploads/2021/05/planmedia_exemple-2048x914.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<p>Ci-dessous l’explication de chaque élément que l’on retrouve dans de ce tableau :</p>



<ul><li><strong>Budget Media : </strong>le budget est réparti et alloué par leviers et par marché.</li><li><strong>Marché</strong> : définir la localisation des cibles à targeter : Pays, Région ou Villes.</li><li><strong>Langue</strong> : définir la langue « parlé » de la cible.</li><li><strong>Plateforme/Levier </strong>: Défini la plateforme à activer pour la diffusion des publicités (ex : Display, programmatique, SEA, Réseaux sociaux…)</li><li><strong>Format des annonces (ads)</strong> : définir le type de publicité à diffuser en terme de taille et de typologie: Texte, Image, Vidéo ou autres. Il est fortement recommandé de faire de l’<strong>A/B testing de banners publicitaire</strong>s afin de déterminer laquelle performe le mieux. C’est pourquoi, il est important de décliner sous plusieurs formats les bannières qui porteront le message de votre campagne.</li><li><strong>Impressions</strong> : Il s’agit du nombre de fois qu’une publicité s’affiche et est vue sur un site.</li><li><strong>CTR</strong> : taux de clics (<em>Click Through Rate</em>). Ce taux est calculé selon le nombre de clics par rapport au nombre d&rsquo;impressions sur la publicité. Ce taux permet de mesurer <strong>l’efficacité d’une bannière ou d’une annonce</strong>. En effet, plus ce taux est élevé, plus la campagne est pertinente aux yeux de l’audience car les personnes ont cliqué et ont donc montré un intérêt.</li><li><strong>Clics : </strong>on retrouve le nombre de clics estimés dans le plan média, afin de vérifier si sa campagne publicitaire est efficace. Le nombre de clics permet de fixer l’intérêt que l’on souhaite à minima pour notre campagne.</li><li><strong>CPM</strong> : correspond au <em>Coût Par Mille impressions</em>. Il sert à mesurer le coût d’achat d’un espace publicitaire sur un site internet. C’est donc également <strong>un modèle de paiement dit “à l’affichage”</strong>. On ne paie qu’une fois la publicité vue.</li><li><strong>CPC</strong> : Le <em>Coût Par Clic</em> représente la rémunération basée sur le nombre de clics sur la publicité fait par chaque visiteur unique. Le CPC permet de vérifier si sa campagne publicitaire est efficace et permet aussi d’identifier qui sont les meilleurs affiliés.</li></ul>



<p>On peut également retrouver d’autres indicateurs de performance dans un plan média, comme :</p>



<ul><li><strong>CPL</strong> : Le Coût Par Lead représente le coût d’acquisition d’un prospect dans une publicité.<em> Un </em><strong><em>lead</em></strong><em> est un prospect, qui s’inscrit sur un site ou à une newsletter par exemple.</em> Le CPL est également un modèle de paiement de publicité en ligne. C’est un paiement à la performance basé sur le nombre de prospects générés.&nbsp;</li><li><strong>CPA : </strong>Le Coût Par Acquisition (à ne pas confondre avec le “coût d’acquisition”) désigne le coût pour chaque conversion obtenue, ainsi le CPA entraîne un paiement uniquement lorsque le clic convertit en un achat ou une récolte de lead (suivant l’objectif de la campagne).</li></ul>



<h2>Notre Expertise</h2>



<p><strong><a href="https://antistatique.net/equipe/sacha" data-type="URL" data-id="https://antistatique.net/equipe/sacha" target="_blank" rel="noreferrer noopener">Sacha</a></strong> a occupé respectivement les postes de<strong> Product Manager,</strong> <strong>Chargée de Campagnes Emailing</strong>, puis <strong>Chargée de</strong> <strong>Campagnes Lead Acquisition</strong>. Pour désormais, avoir la double casquette de <strong>Digital Project Manager</strong> et de <strong>Stratège Digital </strong>au sein d’Antistatique.</p>



<p>Véritable esprit analytique, elle est spécialisée dans le marketing de performance et à un véritable penchant pour les stratégies digitales bien pensées ! 😉</p>



<p><strong><a rel="noreferrer noopener" href="https://antistatique.net/equipe/alberto" data-type="URL" data-id="https://antistatique.net/equipe/alberto" target="_blank">Alberto</a></strong> est un des <strong>cofondateur d’Antistatique.</strong> Il est chargé de la mise en place de stratégie digitale et le suivi des projets en relation avec l&rsquo;achat media. Augmenter votre ROI, baisser votre CPC et faire exploser votre chiffre d&rsquo;affaires on-line sont ses objectifs premiers !</p>



<h2><strong>Avez-vous besoin de mettre en place une stratégie digitale : <a href="https://antistatique.net/agence-web">OUI</a> / <a href="https://antistatique.net/services">NON</a> ?</strong></h2>


Stratégie d’achat média : La création d’un plan média


<p class="is-style-lead">Cet article s&rsquo;adresse à nos futurs clients qui se demande comment effectuer une demande d&rsquo;offre pour la création d&rsquo;un site web. Comment bien communiquer et recruter une agence de design et de développement afin de recevoir de bonnes offres. Une partie du projet se joue déjà à cette étape.</p>



<p></p>



<h2>Un cahier des charges fonctionnel est-il nécessaire ?</h2>


<div style="display: flex; flex-direction: row;">
    <div style="flex-basis: 8%;"></div>
    <div style="flex-basis: 20%; margin-right: 30px">
        <p style="font-size: 15px; color: #808098; text-align: right;">Dans le cas où nous réalisons l&rsquo;étude des besoins et que le client souhaite lancer une procédure d&rsquo;appel d&rsquo;offre, nous n&rsquo;y participons pas.</p>
    </div>
    <div style="flex-basis: 40%;">
        <p style="font-size: 21px;"><p>Pour beaucoup de clients, nous privilégions un workshop permettant de définir précisément les besoins à l&rsquo;aide de la méthode de cartographie des besoins utilisateur « user story mapping ». Cela nous permet de proposer et discuter de priorisation ainsi que s&rsquo;entendre sur chacun des besoins.</p>
</p>
    </div>
</div>



<p><strong>Nous pouvons également nous positionner sur un mandat de rédaction du brief.&nbsp;</strong></p>



<h2>Quel structure pour le document d&rsquo;appel d&rsquo;offre d&rsquo;un projet web</h2>



<p>Dans les documents d&rsquo;appel d&rsquo;offre, voici les points importants à aborder. Dans les cas où nous recevons un brief, nous aimons obtenir ces détails pour permettre de garantir la meilleure comparaison des offres.</p>



<h3>Présenter l&rsquo;entreprise, le projet de refonte et l&rsquo;historique</h3>



<p>C&rsquo;est très intéressant pour l&rsquo;agence de connaître et comprendre quel est le métier du client, comment sont-ils arrivés dans la situation actuelle (ce qui est positif, et ce qu&rsquo;il faut améliorer). Il est important d&rsquo;expliquer ce qui, selon votre point de vue, devrait rester sur le site actuel.</p>



<h3>Expliquer le type de relation souhaité</h3>



<p>Est-ce un mandat d&rsquo;expertise, de production pure, Est-ce que l&rsquo;agence est partie prenante dans la collaboration ou plus exécutante. Il est important de bien clarifier les rôles attendus dans le projet sur les conseils et prestations en terme technique, d&rsquo;identité visuelle, d&rsquo;expérience utilisateur.</p>



<h2>Détailler comment le projet de refonte s&rsquo;inscrit dans la stratégie digitale de l&rsquo;entreprise</h2>



<p>Parler de l&rsquo;éco-système CRM/Promotion/Médias-sociaux etc. Et le rôle du site dans tout le chemin de conversion. Également pour les utilisateurs existants.</p>



<h3>Détailler les objectifs quantitatifs et qualitatifs (et comment sera mesuré le succès)</h3>



<p>Derrière une refonte, il y a toujours une volonté d&rsquo;améliorer beaucoup de choses par rapport à l&rsquo;existant. C&rsquo;est une très bonne occasion de définir en amont comment sera mesuré la portée et le résultat de ces améliorations. Idéalement en augmentation du nombre d&rsquo;inscriptions, de demandes de contacts, de temps de visite, etc. Il est également important de prioriser tous ces objectifs, mais c&rsquo;est un travail qui pourra être afinné en collaboration avec l&rsquo;agence.</p>



<h2>Donner une fourchette de budget qui correspond à un retour sur investissement</h2>



<p>Donner le budget d&rsquo;entrée, c&rsquo;est s&rsquo;assurer les bonnes fondations pour une collaboration avec l&rsquo;agence. En expliquant que vous souhaitez une offre réaliste.</p>



<h2>Quelle structure est attendue pour l&rsquo;offre</h2>



<p>Détailler ce qui est attendu dans l&rsquo;offre, ce qui va être déterminant dans le choix du partenaire et pourquoi. Afin de pouvoir comparer au mieux il est important de communiquer la structure souhaitée de l&rsquo;offre. </p>



<ul class="is-style-objectives"><li>Présentation de l&rsquo;agence </li><li>Présentation des membres de l&rsquo;équipe qui travailleront sur le projet</li><li>Expériences dans le domaine et/ou pour des projets similaires</li><li>Stratégie du projet</li><li>Justification de la proposition technologique</li><li>Devis détaillé</li><li>Organisation du projet (mode de collaboration et planning envisagé)</li><li>Détail et rôle des livrables intermédiaires</li></ul>



<h2>Expliquer la planification du processus d&rsquo;appel d&rsquo;offre</h2>



<p>Donner la période permettant de poser des questions. Expliciter si les réponses sont communiquées à tous les participants et sous quel délai, puis les différentes dates de rendu. Privilégier une présentation sur place avec les membres de l&rsquo;équipe plutôt que le simple envoi du dossier par e-mail.</p>



<h2>Proposer un rendez-vous de brief et communiquer les réponses aux questions à tous les participants</h2>



<p>Comme dans le cas d&rsquo;une procédure d&rsquo;appel d&rsquo;offres publiques, proposer une période pour les questions puis transmettre avec les réponses à tous les participants permet une égalité de traitement. Il est aussi très apprécié d&rsquo;organiser une rencontre pour le brief, permettant de faire connaissance et d&rsquo;expliquer les attentes pour le projet. </p>



<h2>Une grande expérience dans le domaine</h2>



<p>Nous participons depuis plus de 10 ans à des appels d&rsquo;offre de toutes tailles, organisations et précisions administratives. Si bien que nous pouvons également vous accompagner dans ces démarches. N&rsquo;hésitez pas à <a href="/agence-web">nous contacter</a> pour en discuter.</p>


Blog

Réviser vos préjugés sur l’interface d’Admin Drupal

Durabilité – Énergie et Hébergement

Populaires

Réviser vos préjugés sur l’interface d’Admin Drupal

Concurrence peu loyale

Stratégie d’achat média : La création d’un plan média

Comment bien pitcher une agence web pour la refonte de son site Internet

Recevez notre newsletter mensuelle