Une bonne partie de notre travail consiste à intégrer plusieurs applications entre elles. La majorité de ces applications n&rsquo;ont pas d&rsquo;intégration native prévue par leurs auteurs, mais expose ce que l&rsquo;on appelle une API (Application Programming Interface) pour s&rsquo;échanger des informations.







Imaginons que nous souhaitons synchroniser les données de notre application avec un CRM (application de gestion de contact et de la relation client). Si ce CRM expose une API, nous pouvons régulièrement lui faire un appel qui dit en substance « donne-moi tout les contacts qui ont été modifié ou créé depuis hier« . Il s&rsquo;agit de la stratégie API Polling.


<div>
 
 Si vous avez déjà voyagé avec des enfants, c&rsquo;est l&rsquo;équivalent de « Est-ce que l&rsquo;on est bientôt arrivé? » un million de fois.
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Lu sur Internet (https://medium.com/swlh/an-alternative-strategy-to-api-polling-using-pub-sub-and-mqtt-40dc643dcf82)
 </div>
 </div>
</div>



Les APIs modernes proposent une stratégie alternative: pouvoir s&rsquo;inscrire à des changements et être notifié rapidement. C&rsquo;est la stratégie de Push et c&rsquo;est la base des Webhooks.



<h2>Webhooks</h2>



Les Webhooks sont basés sur un système d&rsquo;évenement et passe par le protocole HTTP pour transmettre les données. La nature des événements dépendent de la logique business chaque application. Pour un CRM, ils est possible de s&rsquo;inscrire aux événements de type « création de nouveau contact », « modification de contact », « suppression de contact », etc.


<div>
 
 Cette fois, c&rsquo;est moi qui annonce aux enfants quand nous sommes arrivés, seulement seule fois.
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 </div>
</div>



Le format des Webhooks n&rsquo;est pas normé et il n&rsquo;y a pas de spécification établie. Toutefois la plupart des acteurs utilisent le format JSON pour les données et applique des mécanismes de sécurité ou des stratégies de rappels (en cas d&rsquo;indisponibilité de notre application au moment de la communication).



Voici un site que j&rsquo;aurais aimé découvrir il y a 4 ans. Il s&rsquo;agit d&rsquo;un recueil de bonne pratique en matière de Webhooks (sécurité, documentations, exemples, tests, opérationnels) tant pour l&rsquo;émetteur que pour le client/consommateur:



<a href="https://webhooks.fyi/">https://webhooks.fyi/</a>







<h2>Prochainement, les Webhooks dans Symfony?</h2>



Et c&rsquo;est encore tout frais, mais à l&rsquo;occasion de la SymfonyCon 2022, une discussion est ouverte pour créer un composant afin de simplifier et normaliser la gestion des Webhooks (plus génériquement des « Remote Events ») dans Symfony. 



<ul><li><a href="https://speakerdeck.com/fabpot/symfonycon-2022-keynote-webhooks">Les slides de la Keynote</a> de Fabien Potencier:</li><li>Ainsi que le <a href="https://github.com/symfony/symfony/pull/48542">code en attente de feedbacks.</a></li></ul>











Pour conclure, les webhooks permettent souvent d&rsquo;avoir des intégrations plus fluide et rapide en générant souvent un code plus simple (du point de vue du client) et en consommant moins de données sur le réseau. Pratique!

L’usage des Webhooks dans les APIs

La conférence AgileTour 2022 à Lausanne a encore une fois réuni de nombreux professionnels passionnés par l&rsquo;agilité. 



Nous avons eu la chance d’y participer et avons profité de l’occasion pour apprendre de nouvelles techniques et échanger avec les autres participants. Nous sommes impatients de mettre en pratique ce que nous avons appris lors de cette conférence au sein de notre agence.



<figure class="wp-block-image size-full"><img loading="lazy" width="1400" height="1122" src="https://content.antistatique.net/app/uploads/2023/01/ss_a_agiletour.jpg" alt="" class="wp-image-10928" srcset="https://content.antistatique.net/app/uploads/2023/01/ss_a_agiletour.jpg 1400w, https://content.antistatique.net/app/uploads/2023/01/ss_a_agiletour-300x240.jpg 300w, https://content.antistatique.net/app/uploads/2023/01/ss_a_agiletour-768x615.jpg 768w" sizes="(max-width: 1400px) 100vw, 1400px" /></figure>



Parmi tout le programme, nous avons notamment apprécié les talks suivants :&nbsp;



<h2>Marc &#8211; Conscientiser son choix de posture par Thomas Gibot</h2>



Le talk de Thomas Gibot sur la conscientisation de son choix de posture a été particulièrement instructif et interpellant. 



Ayant participé à de nombreuses conférences, j&rsquo;ai tendance à choisir les présentations qui me parlent le moins afin de sortir de ma zone de confort et de découvrir de nouvelles perspectives. C&rsquo;est donc avec une certaine appréhension que j&rsquo;ai assisté au talk de Thomas, me disant qu&rsquo;il s&rsquo;agirait sans doute d&rsquo;une présentation sur la communication et l&rsquo;amélioration de son « attirail de manipulation ».



Je dois avouer que j&rsquo;ai été agréablement surprise dès l&rsquo;introduction, lorsque Thomas a proposé trois versions différentes d&rsquo;entrée en matière pour prouver son propos sur l&rsquo;importance du choix de posture. 



Avec un grand talent d&rsquo;orateur, il a réussi à nous maintenir en haleine après la pause repas, il a expliqué que notre éventail de postures est très limité et que cet éventail est construit par nos expériences, nos traumatismes et nos victoires. 



Il a souligné que toutes les postures que nous prenons ont forcément un impact sur notre message et sur la façon dont il sera perçu et reçu. Toutes les postures sont soit Violantes, Blessantes, Frustrantes, Enervantes, Utiles, Aidantes, Soutenantes, Pertinentes.



<figure class="wp-block-image size-full"><img loading="lazy" width="2000" height="1346" src="https://content.antistatique.net/app/uploads/2023/01/agiletour_featured.jpg" alt="" class="wp-image-10924" srcset="https://content.antistatique.net/app/uploads/2023/01/agiletour_featured.jpg 2000w, https://content.antistatique.net/app/uploads/2023/01/agiletour_featured-300x202.jpg 300w, https://content.antistatique.net/app/uploads/2023/01/agiletour_featured-768x517.jpg 768w, https://content.antistatique.net/app/uploads/2023/01/agiletour_featured-1536x1034.jpg 1536w" sizes="(max-width: 2000px) 100vw, 2000px" /></figure>



Thomas a proposé une méthode pour prendre conscience et contenir son message par la manière dont on s&rsquo;exprime. Il a insisté sur l&rsquo;importance d&rsquo;être honnête et transparent face à ce choix conscient de posture, en explicitant à notre interlocuteur que l&rsquo;on a choisi cette posture et pourquoi dès le départ. Il a également souligné l&rsquo;importance de prendre conscience de la posture prise après une interaction, de se demander si elle a fonctionné, comment on aurait pu faire mieux et quelle posture on prendra lors de sa prochaine rencontre.



En résumé, le talk de Thomas Gibot sur la conscientisation de son choix de posture a été très intéressant et a suscité beaucoup de réflexion chez moi. Je recommande vivement cette présentation à tous ceux qui sont intéressés par l&rsquo;impact de leur posture sur leur communication et sur la façon dont leurs messages sont perçus par les autres.



<h2>Susana &#8211; Mon équipe ne voit pas le problème par Grégory Alexandre</h2>



En tant que cheffe de projet, il est fréquent de se retrouver face à un problème qui nous semble important mais qui n&rsquo;est pas perçu de la même manière par nos collègues. Cela peut créer un dysfonctionnement au sein même de l&rsquo;équipe et rendre difficile la résolution du problème.



Heureusement, lors de cette conférence, nous avons appris à résoudre ce genre de problème de communication grâce à trois clés.



La première clé consiste à décortiquer le problème en reposant la situation problématique de manière factuelle. 



Pour ce faire, il est important de se poser les questions suivantes : Quelle est la faille ? Quel est le niveau de risque ? Quelle est la fréquence du problème ? Qui est touché par ce problème ? Si la personne touchée par le problème peut témoigner de ce dernier, cela peut aider à donner un exemple concret aux autres.



La deuxième clé consiste à travailler avec l&rsquo;équipe pour trouver une solution en écoutant l&rsquo;avis et le ressenti des autres. En tant que chef de projet, il est important de ne pas essayer de convaincre l&rsquo;équipe de notre point de vue, mais plutôt d&rsquo;exposer le problème de manière factuelle et de questionner sincèrement l&rsquo;équipe sur leur opinion sur le sujet. Cela permet de changer la dynamique de la discussion au sein de l&rsquo;équipe et offre la possibilité de mieux comprendre l&rsquo;avis de chacune des personnes impliquées.



Si les deux premières clés n&rsquo;ont pas suffi à résoudre le problème de compréhension, il est possible de recourir à une troisième clé : travailler le problème avec soi-même. Il peut être utile de prendre du recul sur la situation et de se demander quel est l&rsquo;impact réel de ce problème sur son environnement de travail et sa charge mentale. 



Il est important de ne pas être plus client que le client et de se demander comment on se sentait avant d&rsquo;avoir ce problème. Il est également important de se demander ce qui se passerait si on ne traitait pas la situation problématique. Est-ce qu’une catastrophe se produirait ou est-ce que rien ne se passerait finalement ?



Pour conclure, cette conférence nous a donné des astuces pour mieux gérer les problèmes de communication au sein de l&rsquo;équipe. En décortiquant le problème de manière factuelle, en travaillant avec toutes les personnes impliquées pour trouver une solution en écoutant le ressenti de chacun, et, si nécessaire, en travaillant sur soi-même en prenant du recul sur la situation, il est possible de mieux comprendre l&rsquo;avis de chacune des personnes dans le projet, d&rsquo;éviter les conflits inutiles et de gagner en sérénité.



<figure class="wp-block-image size-full"><img loading="lazy" width="1300" height="1547" src="https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur.jpg" alt="" class="wp-image-10932" srcset="https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur.jpg 1300w, https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur-252x300.jpg 252w, https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur-768x914.jpg 768w, https://content.antistatique.net/app/uploads/2023/01/agiletour_arthur-1291x1536.jpg 1291w" sizes="(max-width: 1300px) 100vw, 1300px" /><figcaption>À Agiletour, on croise aussi des têtes connues ! Coucou Arthur !</figcaption></figure>



<h2>Sasha &#8211; Feedback, une pratique à double tranchant par Jérémie Roudaut</h2>



Lors de cette conférence, Jérémie Roudaut a mis au centre l’importance d’apprendre à recevoir et donner du feedback. Il s’agit bien ici “d’apprendre”, car cet exercice n’est pas si simple et cache souvent une grande part d&rsquo;émotionnel derrière.&nbsp;



Exercice trop souvent réduit à souligner les erreurs des autres, il ne devrait pas se limiter aux entretiens annuel d’évaluation, mais être présent dans la culture d’entreprise pour faire évoluer et valoriser chaque membre de l’équipe !



Chez Antistatique nous sommes déjà convaincus par le bien du feedback, mais grâce à cette conférence nous allons pouvoir aller un cran plus loin et innover !



Mais déjà reposons les bases de ce talk&#8230;



La plupart du temps, nous avons tendance à être réfractaires de cette culture du feedback. Notamment car nous n&rsquo;y voyons pas toujours l&rsquo;intérêt, ou alors on manque de connaissance sur le sujet ou encore de pratique.



Du coup, ça nous amène à se demander : Qu’est-ce qu&rsquo;apporte la culture du feedback ?



<ul><li>Donner une pleine conscience des forces de chacun</li><li>Apporte une meilleure connaissance de soi</li><li>Permet d&rsquo;apprendre de ses points faibles pour pouvoir les améliorer</li></ul>



Les 4 ingrédients clés pour un bon feedback&nbsp;



<ol><li>Bienveillance &#8211; Toujours dans l’intention d’aider l’autre (constructif)</li><li>Basé sur une compétence (communication)&nbsp;</li><li>Cadeau ! Doit être offert et proposé pour donner des opportunités d’améliorations à la personne. Elle est ensuite libre d’agir ou non !</li><li>Environnement sain. Doit être donné dans un cadre sain, et dans une certaine sécurité psychologique.</li></ol>


<div>
 
 « La sécurité psychologique est la croyance que l&rsquo;on ne sera pas puni ou humilié pour avoir exprimé des idées, des questions, des préoccupations ou des erreurs. »
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Amy C. Edmondson
 Leadership expert
 </div>
 </div>
</div>



Sur quoi donne-t-on du feedback ?



<ol><li>Le savoir &#8211; Connaissance &amp; Expériences</li><li>Le savoir-faire &#8211; Mise en place de la théorie dans son quotidien</li><li>Le savoir-être &#8211; Attitude et les valeurs d’une personne</li></ol>



⚠️ Le piège du feedback &#8211; S’ils sont mal donnés, les feedbacks sont en fait des jugements, ce qui empêche d’être constructif et ajoute beaucoup d&rsquo;émotionnel.



Quelques clés pour savoir comment donner un bon feedback ?



<ol><li>Proposer un feedback en clarifiant votre intention (bienveillance)</li><li>Demander si la personne est d’accord de recevoir un feedback (ne pas lui imposer)</li></ol>



2 méthodes existent pour vous aider



<ol><li>Modèle OSCAR<ol><li>Observation et Situation (Faits)</li><li>Conséquence</li><li>Alternative proposée</li><li>Résultat souhaité</li></ol></li><li>Communication Non-violente (Marshall Bertram Rosenberg)<ol><li>Observation (Faits)</li><li>Sentiment ressenti face à cette observation</li><li>Exprimer son besoin</li><li>Faire une proposition sur comment on pourrait satisfaire ce besoin</li></ol></li></ol>


<div>
 
 « Donner du feedback ce n’est pas inné cela s’apprend et se pratique. Soyez indulgent ! »
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Jérémie Roudaut
 Agile Coach / Scrum Master &#038; Speaker
 </div>
 </div>
</div>







<h2>Plusieurs exemples pour accueillir les feedbacks</h2>



Grâce à ce talk, on repart même avec des exercices concrets à mettre en pratique, qu&rsquo;on se réjouit de tester au sein d’Antistatique !



<ol><li>Balle positive &gt;&gt; Chacun s&rsquo;envoi une balle. Le but est de garder la balle le moins longtemps possible tout en faisant un feedback positif à la personne de son choix, puis lui lancer la balle.</li><li>Kudo cards &gt;&gt; Matérialiser un feedback positif sur une carte (ça peut être un dessin).</li><li>Retrospectives &gt;&gt; Créez des opportunités dans vos retros pour se donner du feedback.</li><li>Ange du feedback ou Secret Feedback &gt;&gt; Chaque personne aura une autre personne désignée comme étant son ange gardien inconnu et qui pourra l’observer afin de lui donner un feedback.</li><li>Speed feedback &gt;&gt; Former des pairs. Ils ont 5 minutes pour faire un feedback positif à l’autre et une piste d’amélioration.</li><li>Tournée des feedbacks &gt;&gt; Représenter les membres de l’équipe sur les murs. Laisser 15 minutes à l’équipe pour coller des feedbacks où les personnes le souhaitent. Puis parcourez ensemble les feedbacks pour chaque personne.</li><li>Jeu de la perfection &gt;&gt; Quelqu’un se désigne pour présenter un sujet. Le reste de l’équipe évalue la présentation et font leur feedback avec une proposition concrète pour s’améliorer.</li><li>Boîte à feedback &gt;&gt; Une personne sera volontaire pour recevoir des feedbacks. Plusieurs questions seront mises dans une boîte du type : qu&rsquo;appréciez vous le plus chez la personne ? quelles sont ses forces ? …<ol><li>Déposez les questions dans la boîte</li><li>La personne dépouille la boîte et découvre ses feedbacks.</li></ol></li></ol>



<figure class="wp-block-image size-full"><img loading="lazy" width="1000" height="711" src="https://content.antistatique.net/app/uploads/2023/01/feedback_agiltour.jpg" alt="" class="wp-image-10926" srcset="https://content.antistatique.net/app/uploads/2023/01/feedback_agiltour.jpg 1000w, https://content.antistatique.net/app/uploads/2023/01/feedback_agiltour-300x213.jpg 300w, https://content.antistatique.net/app/uploads/2023/01/feedback_agiltour-768x546.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<h2>Vivement l’année prochaine</h2>



En conclusion, nous tenons à remercier toute l&rsquo;équipe des organisateurs et organisatrices de cette conférence pour leur travail et leur engagement. 



Cette conférence a été une occasion très enrichissante de découvrir de nouvelles techniques et de discuter avec des professionnels passionnés par l&rsquo;agilité. Elle nous a également permis de revoir des têtes connues et de nous réunir avec d&rsquo;autres passionnés. 



Nous nous réjouissons déjà de l&rsquo;édition 2024 de cette conférence et espérons y participer à nouveau.&nbsp;

AgileTour 2022 – Lausanne

Gilles est l&rsquo;un des trois cofondateurs de l&rsquo;agence, associés et directeur technique. 



C&rsquo;est lui que l&rsquo;on appelle quand l&rsquo;on rencontre un problème technique et que l&rsquo;on ne sait pas (encore) comment l&rsquo;aborder. Il n&rsquo;a pas toujours la réponse mais ça tombe bien, car il aime ça, résoudre des problèmes.



Pour vous faire découvrir un peu plus Gilles, Tiphaine lui a posé quelques questions.



<figure class="wp-block-image size-large"><img loading="lazy" width="1950" height="2600" src="https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-1950x2600.jpg" alt="" class="wp-image-10739" srcset="https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-1950x2600.jpg 1950w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-225x300.jpg 225w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-768x1024.jpg 768w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-1152x1536.jpg 1152w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-1536x2048.jpg 1536w, https://content.antistatique.net/app/uploads/2022/12/gilles_a_la_barre-scaled.jpg 1920w" sizes="(max-width: 1950px) 100vw, 1950px" /><figcaption>Gilles en vacances</figcaption></figure>



 



<h3>À ce jour, de quoi es-tu le plus fier ?</h3>



Mes deux enfants! Je vous partagerais bien 500 photos mais je crois que vous n’êtes pas venu sur cette page pour ça 🙂. 



Au niveau professionnel, cela fait 14 ans que Antistatique existe, c’est un joli succès.







<h3>Avec quelle personnalité voudrais-tu prendre un café et pourquoi ?</h3>



Bonne question, je dirais “Woz”, Steve Wozniak. Le personnage m&rsquo;a toujours intrigué depuis que je suis ado. Je crois que je suis resté un fan de son approche de l&rsquo;ingénieurie, des « débuts » de l&rsquo;informatique (cofondateur d&rsquo;Apple). Je serais curieux de connaitre son retour d&rsquo;expérience en tant qu&rsquo;enseignant.







<h3>Qu’est-ce qui te plaît et te motive le plus dans ton job ?&nbsp;</h3>



J’aime étudier et (tenter de) comprendre l&rsquo;essence des métiers de nos clients. C&rsquo;est très enrichissant. Et bien sûr, résoudre des problèmes. Accompagner les équipes à réaliser des projets est très motivant!







<h3>Quel est le plat que tu préfères cuisiner (ou manger…) ?</h3>



J’aime cuisiner des plats simples et bons: légumes au four, quiches, poulet aux citrons. Je suis expert des pommes de terre rissolées (et ouais!). Par contre, ne me demandez pas de faire de la pâtisserie (je n&rsquo;ai jamais été bon en chimie&#8230;).







<h3>Quel a été ton plus grand défi sportif jusqu’à ce jour ?</h3>



Aïe, ça date si on veux parler de “mes défis sportifs”. J’ai fait plusieurs semi-marathons et il y a quelques années, j’étais content d’avoir pu bien appréhender les dénivelés du 20km de Lausanne.







<h3>Nomme trois objets que tu apporterais sur une île déserte.</h3>



Un téléphone satellite (avec batterie solaire intégrée), un briquet et un jerrican d’eau de 50l. Pas spécialement envie d’y rester longtemps sur cette île (bien que j’apprécie la nature).







<h3>Quel super pouvoir aimerais-tu avoir ?</h3>



Celui de moins procrastiner ?







<h3> Tu préfères : Rester coincé dans un ascenseur ou sur un télésiège en panne ?</h3>



Ah ah, télésiège! J&rsquo;ai rencontré mon épouse sur un télésiège.







<h3>Quel est ton endroit préféré en Suisse où tout le monde devrait aller au moins une fois dans sa vie ?</h3>



J&rsquo;aime beaucoup le Lavaux et le Lac Léman. Il y a un endroit que l&rsquo;on nomme entre nous « la plage des Doge ». On y est bien!







<h3>Raclette ou fondue ?</h3>



C&rsquo;est pas un choix ça. La règle est assez simple: Avec mon père et si il y a un repas avec plus de 6 personnes: raclette. La fondue si mon beau-frère n&rsquo;est pas loin ou pour son avantage logistique.

10 questions pour découvrir Gilles

À la suite de <a href="https://antistatique.net/blog/laravel-livewire" data-type="post" data-id="9081">mon article sur Livewire</a>, j&rsquo;ai décidé d&rsquo;attaquer un plan plus important du Framework, à savoir l&rsquo;ORM Eloquent.



<h2>Préambule</h2>



Histoire d&rsquo;être tous à la même page, je trouve utile de résumer afin de commencer sur de bonnes bases.



Laravel, comme la plupart des framework utilise un ORM (object-relational mapper). 



Facilement comparable à Doctrine utilisé par Symfony, ces deux se distinguent de-part leurs fondement. L&rsquo;un est un <a rel="noreferrer noopener" href="https://martinfowler.com/eaaCatalog/activeRecord.html" data-type="URL" data-id="https://martinfowler.com/eaaCatalog/activeRecord.html" target="_blank">Active Record</a> tandis que l&rsquo;autre est un <a href="https://martinfowler.com/eaaCatalog/dataMapper.html" data-type="URL" data-id="https://martinfowler.com/eaaCatalog/dataMapper.html">Data Mapper</a>.



Comparons les deux. Un modèle Eloquent est une représentation de la base de donnée et comprends également les opérations (<code>save</code>, <code>update</code>, <code>delete</code>, &#8230;) dans cette dernière.



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example.png" alt="" class="wp-image-10204" width="397" height="192" srcset="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example.png 794w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-300x145.png 300w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-768x371.png 768w" sizes="(max-width: 397px) 100vw, 397px" /><figcaption>Un exemple d&rsquo;insertion avec Eloquent.</figcaption></figure>



Tandis que sur Doctrine, les choses sont un peu différentes. Ce dernier s&rsquo;appuie sur un EM (Entity Manager) pour executer ses actions et ses models sont une représentation de leurs tables respectives en base de données.



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-doctrine.png" alt="" class="wp-image-10208" width="400" height="681" srcset="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-doctrine.png 800w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-doctrine-176x300.png 176w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-doctrine-768x1308.png 768w" sizes="(max-width: 400px) 100vw, 400px" /><figcaption>Un exemple avec Doctrine.</figcaption></figure>



<h2>Eloquent dites-vous ?</h2>



Pour ne pas s&rsquo;éparpiller sur ce sujet aussi vaste que Eloquent, le plus simple serait de s&rsquo;attacher premièrement aux bases et par la suite (peut-être un second article ?) de détailler divers uses-cases et patterns.



<h3>Les « nice to have »</h3>



<h4>Carbon!</h4>



Laravel arrive avec <code>Carbon</code> qui est une API simple d&rsquo;utilisation qui implémente et étends <code>DateTime</code> de PHP ! Ce qui permet à nos éléments stockés en <code>dateTimeTz</code> par exemple, d&rsquo;être directement transformés en <code>CarbonInterface</code>. Vous pouvez choisir de votre côté comment votre champ doit être transformé en re-déclarant votre propriété du modèle : <code>$casts = ['votre_champ' =&gt; 'bool'];</code> <a rel="noreferrer noopener" href="https://carbon.nesbot.com/docs/" data-type="URL" data-id="https://carbon.nesbot.com/docs/" target="_blank">Si vous souhaitez en savoir plus sur Carbon, voici le lien de sa documentation.</a>



<h4>Les protections</h4>



De part son architecture, il arrive qu&rsquo;on passe directement la <code>$request</code> pour en créer un record en DB. Eloquent arrive avec une solution appelée la « Mass Assignement Protection » et nous permets de spécifier les champs que l&rsquo;on veut pouvoir remplir sans avoir à tout ré-écrire (parfois un gain de temps considérable). Nous pouvons donc déclarer les champs directement dans la propriété du modèle <code>$fillable = ['field', ...];</code>. Par défaut, tous les champs sont <code>$guarded = ['*'];</code> donc il est important de déclarer les champs à cet effet.



Le but étant d&rsquo;éviter que certains champs soient accessibles trop facilement comme <code>'password'</code> ou <code>'roles'</code> dans l&rsquo;idée. 



<h4>Les scopes</h4>



Si dans votre usage vous remarquez que vous utilisez souvent les mêmes « filtres », il serait peut-être temps de les localiser dans votre modèle. Laravel appelle ça un « Local Scope ». Pour en créer un, c&rsquo;est tout simple, il suffit d&rsquo;écrire la méthode avec comme préfix <code>scope</code> et il sera automatiquement utilisable. Pour l&rsquo;utiliser: <code>User::popular()-&gt;orderBy('xyz')-&gt;get();</code> L&rsquo;appel du scope ne doit pas inclure le préfix. Un scope peut être dynamique et comporter un ou plusieurs paramètres.



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-scope.png" alt="" class="wp-image-10214" width="662" height="436" srcset="https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-scope.png 1324w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-scope-300x198.png 300w, https://content.antistatique.net/app/uploads/2022/10/laravel-eloquent-example-scope-768x506.png 768w" sizes="(max-width: 662px) 100vw, 662px" /><figcaption>Un exemple de scope local.</figcaption></figure>



<h4>La magie de Laravel ✨</h4>



Laravel garde en tête sa simplicité d&rsquo;utilisation et propose des solutions out-of-the-box sans pour autant nous avertir. Un exemple plus concret est l&rsquo;utilisation des méthodes dites magiques comme l&rsquo;exemple plus haut avec un scope déclaré par exemple, mais également des méthodes plus directes à notre model. Je m&rsquo;explique, si nous avons un champ <code>vote</code> sur notre table, on peux très bien utiliser une méthode (invisible par notre IDE) <code>Model::whereVote('xzy');</code>



Laravel va passer par la méthode magique de PHP <code>__call</code> ou <code>__callStatic</code> et fournir des outils à notre disposition. D&rsquo;ailleurs, pour les utilisateurs de PHPStorm, je vous recommande vivement <a rel="noreferrer noopener" href="https://plugins.jetbrains.com/plugin/13441-laravel-idea" data-type="URL" data-id="https://plugins.jetbrains.com/plugin/13441-laravel-idea" target="_blank">ce plugin</a>.



<h4>Tinker !</h4>



Laravel Tinker est un petit outil très facile à installer <a rel="noreferrer noopener" href="https://laravel.com/docs/9.x/artisan#tinker" data-type="URL" data-id="https://laravel.com/docs/9.x/artisan#tinker" target="_blank">comme-ceci</a>. Il permet d&rsquo;intéragir avec la base de donnée en simple ligne de commandes.



<a href="https://tinkerwell.app/blog/the-ultimate-guide-to-php-artisan-tinker" data-type="URL" data-id="https://tinkerwell.app/blog/the-ultimate-guide-to-php-artisan-tinker" target="_blank" rel="noreferrer noopener">En voici un guide si celà vous intéresse.</a> 



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/image.png" alt="" class="wp-image-10390" width="614" height="397" srcset="https://content.antistatique.net/app/uploads/2022/10/image.png 819w, https://content.antistatique.net/app/uploads/2022/10/image-300x194.png 300w, https://content.antistatique.net/app/uploads/2022/10/image-768x496.png 768w" sizes="(max-width: 614px) 100vw, 614px" /><figcaption>Un exemple de commande pour intéragir avec l&rsquo;application.</figcaption></figure>



<h4>Les relations</h4>



Un sujet vaste et assez complexe pour en faire simplement un paragraphe.



Eloquent propose plusieurs niveau de relations entre <code>OneToOne</code> jusqu&rsquo;à <code>ManyToMany</code> en passant par les jointures à travers d&rsquo;autres tables. La force de ces méhtodes résident dans le fait que les relations vont être « devinées » en fonction du nom de la clé primaire de la table (en général <code>id</code>) et du nom de la <code>class</code> qui la définit.



Dans l&rsquo;exemple plus haut j&rsquo;ai un modèle <code>Flight</code> qui référence un autre modèle <code>FlightTime</code>. La table <code>flights_times</code> a une colonne appellée <code>flight_id</code>, comme défini dans le fichier de migration.



Il me sufit donc de créer une méthode:



<pre class="wp-block-code"><code> /**
 * @return \Illuminate\Database\Eloquent\Relations\HasOne
 */
 public function times(): HasOne
 {
 return $this-&gt;hasOne(FlightTime::class);
 }</code></pre>



pour que la relation se fasse automatiquement !



<figure class="wp-block-image size-full is-resized"><img loading="lazy" src="https://content.antistatique.net/app/uploads/2022/10/image-1.png" alt="" class="wp-image-10400" width="429" height="400" srcset="https://content.antistatique.net/app/uploads/2022/10/image-1.png 572w, https://content.antistatique.net/app/uploads/2022/10/image-1-300x280.png 300w" sizes="(max-width: 429px) 100vw, 429px" /><figcaption>L&rsquo;appel à la méthode de relation (avec la parenthèse) permet d&rsquo;obtenir le <code>QueryBuilder</code> tandis que l&rsquo;appel sans les parenthèses permet d&rsquo;avoir le modèle directement résolu !</figcaption></figure>



<h2>Conclusion</h2>



Comme Doctrine, Eloquent reste à ce jour une référence. Directement intégré à l&rsquo;écosysème de Laravel, ce dernier se distingue par sa simplicité, de ses méthodes magiques et de la rapidité à écrire une requête en base de données via très peu de lignes de code.



Le choix sera fait par le choix du framework, prennez juste en compte que Doctrine et Eloquent sont très différents ainsi que la courbe d&rsquo;apprentissage n&rsquo;en sera pas la même ! (Doctrine tends à être plus complexe)



Dans mon cas, j&rsquo;apprécie beaucoup Doctrine pour les propriétés visibles sur l&rsquo;entité, les getters et setters, on sait ce qui s&rsquo;y trouve. Eloquent fonctionne differement, les propriétés de notre modèle ne reflète pas forcément les champs, donc beaucoup d&rsquo;attentes sur les méthodes magiques, ce qui peut rendre la chose plus difficile si on connaît mal le projet. Néamoins le gain de temps reste indégniable.







Merci de m&rsquo;avoir lu !

Laravel – Eloquent

Tiphaine, c&rsquo;est un grand sourire 365 jours par an, même à&nbsp; -10°C et avec 20 cm de neige sur sa voiture. C’est vous dire à quelle point c’est une vraie source d’énergie pour toute l’agence !



Avec son expertise métier — UX Design, Tiphaine nous aide à remporter des mandats et aussi à les exécuter par la suite. Elle est également toujours partante pour la mise en place d’activités de toute nature (vide-dressing, remote à l’étranger, apéros…)&nbsp;



Nous lui avons posé 10 questions pour encore mieux la connaître. Avec un peu de chance, elle vous accompagnera dans la refonte de votre e-commerce ou la production de votre nouvelle application web mobile.



Bonne lecture&#8230;



Si tu devais choisir une seule destination pour tes prochaines vacances, ce serait plutôt : Plage, montagne ou forêt tropicale? Et pourquoi? En février dernier je suis partie plusieurs semaines découvrir la jungle lors d’un road-trip au Costa-Rica et j’ai adoré la forêt tropicale (un peu moins les insectes et serpents qui y vivent). Mais là maintenant…j’ai très envie de retourner à l’océan pour progresser en surf ! 🤙🏼 



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="2600" height="2338" src="https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-2600x2338.jpg" alt="" class="wp-image-9587" srcset="https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-2600x2338.jpg 2600w, https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-300x270.jpg 300w, https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-768x691.jpg 768w, https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-1536x1381.jpg 1536w, https://content.antistatique.net/app/uploads/2022/07/2022-03-08-12-18-43-062-2048x1842.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption> Session de surf à Santa-Teresa (côte Ouest du Costa-Rica)</figcaption></figure>



Parles-nous de tes loisirs et de ce que tu aimes faire lors de ton temps libre? On me répète tout le temps : “T’es toujours en vacances toi !!” alors que non… pas plus que les autres ! Mais c’est vrai que je suis souvent en vadrouille. J’adore être dehors, découvrir, changer d’air. Je ne suis pas du tout casanière, alors je m’évade dès que j’ai un peu de temps libre. On peut me trouver en rando, en road-trip tente de toit, en train de bronzer au bord des lacs du Jura, en ski ou raquettes, à l’entraînement de natation, au yoga mais aussi devant une bonne série Netflix, au musée ou en train de me perdre dans les boutiques&#8230;



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="2036" height="1277" src="https://content.antistatique.net/app/uploads/2022/08/20220716_214802074.jpg" alt="" class="wp-image-9667" srcset="https://content.antistatique.net/app/uploads/2022/08/20220716_214802074.jpg 2036w, https://content.antistatique.net/app/uploads/2022/08/20220716_214802074-300x188.jpg 300w, https://content.antistatique.net/app/uploads/2022/08/20220716_214802074-768x482.jpg 768w, https://content.antistatique.net/app/uploads/2022/08/20220716_214802074-1536x963.jpg 1536w" sizes="(max-width: 2036px) 100vw, 2036px" /></figure>



 En quelques mots, décris-nous ton travail au sein d’Antistatique? Je suis designer UX, je m’occupe à la fois de la recherche utilisateur (interviews, user test, immersion, persona…) que de l’architecture de l’information des sites et apps (arborescence, zonings, wireframes). Avec pour objectif principal que les usagers finaux puissent utiliser facilement ce que l’on a conçu et vivent une bonne expérience !



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="1230" height="900" src="https://content.antistatique.net/app/uploads/2022/08/Capture-décran-2022-08-02-à-10.08.46.png" alt="" class="wp-image-9654" srcset="https://content.antistatique.net/app/uploads/2022/08/Capture-décran-2022-08-02-à-10.08.46.png 1230w, https://content.antistatique.net/app/uploads/2022/08/Capture-décran-2022-08-02-à-10.08.46-300x220.png 300w, https://content.antistatique.net/app/uploads/2022/08/Capture-décran-2022-08-02-à-10.08.46-768x562.png 768w" sizes="(max-width: 1230px) 100vw, 1230px" /><figcaption>Workshop dans les bureaux de Genève</figcaption></figure>



 À quel moment de ton parcours académique ou professionnel tu as décidé de choisir une carrière dans le UX Design et non celle de UI Design? J’ai fait des études de design assez généraliste au départ. Puis j’ai choisi d’aller vers l’UX en faisant un master en innovation sociale. Finalement c’était choisir de faire du design pour améliorer le quotidien des gens, et ça, c’est l’essence même du design d’après moi. J’ai envie d’aider les gens en utilisant le design. Si tu devais choisir une des pratiques de l’UX, laquelle serait ta préférée ? Sans hésiter : la recherche utilisateur. C’est clairement là où je suis la plus à l’aise : je prends le temps d’écouter les gens, de comprendre leurs besoins. Donc les interviews, l’immersion et les tests utilisateurs, c’est clairement le kiff pour moi ! 🌈 Si tu pouvais choisir un projet sur lequel tu rêves de pouvoir travailler et faire évoluer lequel ce serait? Ce n’est pas forcément un rêve mais j’aimerais bien faire de l’UX pour les enfants. J&rsquo;ai eu la chance une fois de faire tester une application pour le jeune public dans un musée de Genève et j’ai adoré l’expérience. Les petits ce sont les personnes les plus honnêtes du monde. Ça facilite les tests utilisateurs car on sait vraiment ce qu’ils pensent ! A part l’industrie du numérique/digital une autre industrie t&rsquo;attire afin de développer ton savoir-faire? J’ai d’abord voulu faire une école de mode, puis j&rsquo;ai passé le concours d&rsquo;architecte avant de partir dans le design, donc ces milieux m’intéressent beaucoup. Mais avec <a href="https://antistatique.net/equipe/emma" data-type="URL" data-id="https://antistatique.net/equipe/emma">Emma</a>, on s’amuse à se dire que l’on ouvrira un jour notre boutique de fleurs et de mobilier d&rsquo;intérieur car on adore ça toutes les deux. Designer/styliste floral pourquoi pas ! 



<figure class="wp-block-image size-large is-style-default"><img loading="lazy" width="2600" height="2080" src="https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-2600x2080.jpg" alt="" class="wp-image-9647" srcset="https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-2600x2080.jpg 2600w, https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-300x240.jpg 300w, https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-768x614.jpg 768w, https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-1536x1229.jpg 1536w, https://content.antistatique.net/app/uploads/2022/08/clay-banks-N3SsG7xR-Dg-unsplash-2048x1638.jpg 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /><figcaption>Teaser de notre future devanture peut-être un jour (ahah)..</figcaption></figure>



 Cites quelques mots clés qui te définissent bien ? Et à l’opposé ce qui ne te ressemble pas ? Curiosité, sourire, aventure (et émotivité ++). Et ce qui ne me ressemble pas du tout je dirais… Bling-bling (ahaha), égoïsme, pizza ananas et course à pied (“c’est l’enfeeeer” dixit <a href="https://antistatique.net/equipe/sacha">Sasha</a>). Si tu devais choisir un seul groupe ou artiste, lequel ça serait? C&rsquo;est trop dur cette question. En plus, j’écoute des styles très différents (Ben Mazué, Jay-Z, ABBA, Fakear et Queen peuvent se cotoyer dans mes folles playlists…) Alors je réponds Coldplay car je viens de les voir en concert à Berlin et c’était magique ! 😭 Pour finir, t’es plus chien ou chat? Chien bien-sûr ! Je rêve de pouvoir en adopter un, mais j’attend le bon moment… Heureusement j’ai la chance de pouvoir couvrir de bisous ma belle Callie ❤️ 



<figure class="wp-block-image size-full is-style-default"><img loading="lazy" width="1196" height="964" src="https://content.antistatique.net/app/uploads/2022/07/2021-02-07-16-20-02-213.jpg" alt="" class="wp-image-9581" srcset="https://content.antistatique.net/app/uploads/2022/07/2021-02-07-16-20-02-213.jpg 1196w, https://content.antistatique.net/app/uploads/2022/07/2021-02-07-16-20-02-213-300x242.jpg 300w, https://content.antistatique.net/app/uploads/2022/07/2021-02-07-16-20-02-213-768x619.jpg 768w" sizes="(max-width: 1196px) 100vw, 1196px" /><figcaption>Callie (et moi), very happy dans le Haut-Jura</figcaption></figure>

10 questions pour découvrir Tiphaine

Le GIS (Geographic Information System ou SIG Systèmes d&rsquo;informations Géographiques en français) et leurs applications sur le web est un sujet fascinant. Le futur des cartes sur le web prend un nouveau contour. Cet article pour vous éclairer sur le sujet.



<h2>Et si on changeait de perspective ?</h2>



<figure class="wp-block-image size-full is-style-full-width"><img loading="lazy" width="2500" height="1651" src="https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown.jpg" alt="" class="wp-image-9626" srcset="https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown.jpg 2500w, https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown-300x198.jpg 300w, https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown-768x507.jpg 768w, https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown-1536x1014.jpg 1536w, https://content.antistatique.net/app/uploads/2022/07/suisse_upsidedown-2048x1352.jpg 2048w" sizes="(max-width: 2500px) 100vw, 2500px" /><figcaption>Carte touristique de la Suisse dessinée par Eduard Imhof d&rsquo;après un dessin de Otto Muller. Publiée par Office National du Tourisme à Bern en 1939.</figcaption></figure>



<h2>Les cartes sont partout sur le web</h2>



D&rsquo;après les statistiques des Archives , 16% des pages web utilisent les cartes et 22% d&rsquo;entre-elles permettent une certaine forme d&rsquo;interactivité. Cette analyse vient de l&rsquo;entreprise bocoup que j&rsquo;ai eu la chance <a href="https://antistatique.net/blog/coworking-space-et-travail-distance-du-massachusset-au-michigan">de visiter à Boston en 2014</a>. 



Très active dans la création des standards du web, autant au sein des navigateurs que du W3C, bocoup pose aujourd&rsquo;hui la question du <a href="https://bocoup.com/blog/no-neutral-map">futur des cartes interactives</a> et pourquoi cette standardisation ne s&rsquo;est pas réalisée plus rapidement.



<h2>Encore aujourd&rsquo;hui, les cartes sont bricolées</h2>



L&rsquo;ingéniosité des développeurs·euses web n&rsquo;a pas de limite. Quand une fonctionnalité n&rsquo;est pas proposée nativement en HTML par le navigateur, le Javascript permet d&rsquo;y remédier. Ce « bricolage » est prévu by design et fait partie de l&rsquo;évolution des standards. Le temps que ceux-ci soient discutés, mesurés puis implémentés dans la majorité des navigateurs. Cette période de transition est nécessaire à l&rsquo;évolution du web. Pensez, par exemple, au champ de <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date">saisie d&rsquo;une date</a>, à la <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video">vidéo</a>, aux <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">accordéons</a> ou encore <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap">aux sliders</a> pour lesquels le Javascript n&rsquo;est aujourd&rsquo;hui plus du tout nécessaire. 



Les cartes interactives sur le web n&rsquo;échappent pas à cette règle. Elles font l&rsquo;objet de nombreuses implémentations librairies et outils permettant notamment de réaliser toutes sortes d&rsquo;interactions :



<ul class="is-style-objectives"><li>Déplacer la carte dans les 4 directions</li><li>Zoomer dans la carte</li><li>Changer les couches géographiques (le fond de la carte : vue photo satellite, reliefs, routes, etc&#8230;)</li><li>Afficher des informations sur la carte (données statistiques, itinéraires, liste de points, formes)</li><li>Dessiner sur la carte (ajouter des points, tirer des lignes, créer des formes) </li><li>Naviguer en 3D </li></ul>



Effectivement, la complexité d&rsquo;une carte interactive explique autant pourquoi elle n&rsquo;a pas été implémentée dans le browser mais étonne tout autant qu&rsquo;elle ne soit pas déjà implémentée depuis longtemps.



<h2>L&rsquo;historique des cartes sur le web, les dates importantes</h2>



<h3>1997 &#8211; Introduction de la balise &lt;map&gt;</h3>



Utilisée pour cartographier une image et définir des zones à l&rsquo;intérieur permettant d&rsquo;en créer un lien hypertexte. Une première <a href="https://www.w3.org/TR/2018/SPSD-html32-20180315/#map">implémentation standard</a>. 



<pre class="wp-block-code"><code>&lt;map name="Ma Carte"&gt;
 &lt;area href="colorado.html" alt="zoomer sur l'état du Collorado" shape="rect" coords="0,0,118,28"&gt;
&lt;/map&gt;</code></pre>



<h3>1999-2002 &#8211; Flash ou Java Applets pour les cartes interactives</h3>



Pour palier au manque de capacité des navigateurs en ce temps là, Flash ou les applets Java sont utilisé pour créer des cartes interactives. Véritable hiver pour l&rsquo;évolution des standards du web dominé par <a href="https://en.wikipedia.org/wiki/Browser_wars#First_Browser_War_(1995%E2%80%932001)">un seul navigateur</a>, nous nous sommes pourtant jurés de ne pas retomber dans le panneau. 



<h3>2004 &#8211; Création de OpenStreetMap</h3>



Premier projet open source intégrant la carte du monde et partageant son contenu.



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1286" src="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-2600x1286.png" alt="" class="wp-image-9601" srcset="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-2600x1286.png 2600w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-300x148.png 300w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-768x380.png 768w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-1536x760.png 1536w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-22.25.59-2048x1013.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



<h3>2004 &#8211; Yandex Maps</h3>



Yandex, l&rsquo;équivalent de Google en Russie lance son outil permettant une intégration sur une page web



<h3>2005 &#8211; Google Maps</h3>



Fournisseur de carte et d&rsquo;une librairie de carte interactive, Google Maps s&rsquo;impose assez rapidement,



<h3>2005 &#8211; Google Earth</h3>



Avec <a href="https://techcrunch.com/2019/03/29/how-a-google-side-project-evolved-into-a-4b-company/">l&rsquo;achat de Keyhole</a> Google propose un outil de visualisation cartographique en 3D. D&rsquo;abord comme un logiciel puis comme application web. La série netflix <a href="https://www.netflix.com/ch-en/title/81074012">The Billion Dollar Code</a> retrace <a href="https://en.wikipedia.org/wiki/The_Billion_Dollar_Code#:~:text=The%20Billion%20Dollar%20Code%20is,an%20additional%20feature%20story%20episode.">une partie de l&rsquo;histoire</a>. Dans tous les cas, l&#8217;emergence de l&rsquo;attrait des cartes interactives en ligne apparait dans cette période



<h3>2005 &#8211; Open Layer</h3>



Framework Javascript Open Source de carte interactive



<h3>2007 &#8211; Sortie de l&rsquo;IPhone</h3>



L&rsquo;iPhone a démocratisé le smartphone et avoir un GPS dans la poche est devenu normal. L&rsquo;usage des cartes interactives a eu alors un nouvel essor. 



<h3>2012 &#8211; Nouvelles librairies et outils</h3>



<a href="https://antistatique.net/blog/devenez-un-maitre-cartographe">Yann vous en parlait sur ce blog en 2013</a> avec Leaflet, MapBox etc. La création de cartes interactives se développe énormément.



<h3>2016 &#8211; Création du groupe Maps for HTML</h3>



<a href="https://maps4html.org/#events">Ce groupe</a> entreprend de standardiser les cartes interactives.



<h3>2019 &#8211; Discussion au W3C TPAC de l&rsquo;intégration du support des cartes web dans les navigateurs</h3>



Une première discussion sur l&rsquo;implémentation des cartes au sein du W3C.



<h3>2020 &#8211; Rapport sur l’atelier conjoint W3C-OGC sur les cartes pour le Web</h3>



Étape importante dans la récolte des besoins et la définition d&rsquo;un standard. <a href="https://www.w3.org/2020/maps/report-fr">Le rapport est traduit en français et consultable sur le site du W3C</a>. 



<h2>Quelle feuille de route pour l&rsquo;avenir des cartes sur le web</h2>



Les 3 dernières dates de l&rsquo;historique montre ce mouvement de professionnel·les de la cartographie web qui travaillent pour un futur de la consultation et l&rsquo;interactions de cartes dans sur les sites et applications web. Un travail conséquent mais qui devrait changer le paysage dans les prochaines années.



<h2>Une histoire de projection et encore les erreurs de l&rsquo;histoire</h2>



<figure class="wp-block-image size-large is-style-large"><img src="https://www.explainxkcd.com/wiki/images/6/6c/sea_chase.png" alt=""/><figcaption><a href="https://www.explainxkcd.com/wiki/index.php/2577:_Sea_Chase">Les projections</a> par l&rsquo;exemple</figcaption></figure>



Alors pourquoi cette standardisation n&rsquo;est-elle pas aussi simple à réaliser ? Une carte et la projection dans laquelle elle est affichée nous donne déjà un indice sur cette complexité. 



<figure class="wp-block-image size-large is-style-large"><img src="https://www.explainxkcd.com/wiki/images/9/9c/map_projections.png" alt=""/><figcaption><a href="https://www.explainxkcd.com/wiki/index.php/977:_Map_Projections">La projection utile pour la colonisation</a></figcaption></figure>



Une solution standardisée doit absolument tenir compte de l&rsquo;accessibilité, de l&rsquo;ergonomie et l&rsquo;utilisabilité de l&rsquo;outil. Copier les implémentations actuelles ne suffisent donc pas. Ce <a href="https://drive.google.com/file/d/1IK9y0MZ3XxQjvw2xIRG7tzsslKisKn7K/view">rapport résumant les besoins des professionnels</a> permet de comprendre l&rsquo;ampleur de la tâche.



Les cartes sont tellement importantes pour l&rsquo;expérience utilisateur sur le web



Les cartes représentent un pont entre le monde digital et la réalité. Elle sont aussi un exemple important de l&rsquo;avantage d&rsquo;une interface interactive. Utilisées aujourd&rsquo;hui pour créer le lien, expliquer, orienter et enseigner, les cartes interactives vont continuer à être un terrain de jeu passionnant pour les créateurs de sites et applications web



Et chez Antistatique, que fait-on avec les cartes



Passionné par cette question depuis longtemps, nous avons utilisé les frameworks et librairie pour créer des cartes interactives depuis les débuts de l&rsquo;agence. Avec Mapfish pour monboulanger.ch en 2008, l&rsquo;utilisation de Google Earth pour l&rsquo;entreprise OnAir en 2009, GoogleMapsAPI pour les sites de promotions immobilière, MapBox pour afficher <a href="https://antistatique.net/projets/cardis-2">les résultats de recherche de biens immobiliers</a>. Nous avons également travaillé avec l&rsquo;entreprise Inser sur <a href="https://antistatique.net/projets/conception-design-dune-plateforme-geographique-sig-en-collaboration-avec-inser">le projet GeoMSF</a> avec les technologies ArcGIS.



Des nouveaux exemples de cartes interactives



<figure class="wp-block-image size-full is-style-large"><img loading="lazy" width="1898" height="1482" src="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52.png" alt="" class="wp-image-9603" srcset="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52.png 1898w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52-300x234.png 300w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52-768x600.png 768w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.29.52-1536x1199.png 1536w" sizes="(max-width: 1898px) 100vw, 1898px" /></figure>



<a href="https://gpsjam.org/">GPSJam.org</a> &#8211; Cette carte interactive montre les brouillages du signal GPS dans chaque zone du globe. Et surtout avec le voyage dans le temps, cette application vous permet une leçon de géo-politique.



<figure class="wp-block-image size-large is-style-large"><img loading="lazy" width="2600" height="1559" src="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-2600x1559.png" alt="" class="wp-image-9608" srcset="https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-2600x1559.png 2600w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-300x180.png 300w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-768x460.png 768w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-1536x921.png 1536w, https://content.antistatique.net/app/uploads/2022/07/Screenshot-2022-07-30-at-23.37.08-2048x1228.png 2048w" sizes="(max-width: 2600px) 100vw, 2600px" /></figure>



L&rsquo;outil <a href="https://felt.com/">Felt</a> qui permet de créer des cartes intégrables avec cet exemple de <a href="https://felt.com/map/Japans-Volcanoes-Earthquakes-Explained-G7dQ9BMqER9CWe9BZIBYo66hC">l&rsquo;activité sismique dans la mer d&rsquo;Okhotsk</a>. 



Et des cartes pas interactives ?



<figure class="wp-block-image size-full is-style-large"><img loading="lazy" width="1200" height="1206" src="https://content.antistatique.net/app/uploads/2022/07/bloomberg_map_article.jpeg" alt="" class="wp-image-9596" srcset="https://content.antistatique.net/app/uploads/2022/07/bloomberg_map_article.jpeg 1200w, https://content.antistatique.net/app/uploads/2022/07/bloomberg_map_article-150x150.jpeg 150w, https://content.antistatique.net/app/uploads/2022/07/bloomberg_map_article-768x772.jpeg 768w" sizes="(max-width: 1200px) 100vw, 1200px" /><figcaption>Restriction de 1km pendant le confinement France en 2020 Arthur Beaubois-Jude — Calais, France</figcaption></figure>



Et si vous êtes arrivé jusqu&rsquo;ici, vous méritez bien un petit cadeau. <a href="https://www.bloomberg.com/features/2020-coronavirus-lockdown-neighborhood-maps/">Cet article</a> de Bloomberg présentant des cartes faites mains pour illustrer la vie pendant le lockdown en 2020



<figure class="wp-block-image size-large"><img src="https://eyeondesign.aiga.org/wp-content/uploads/2020/01/Map-Marmot-final-1024x640.jpg" alt=""/></figure>



Ou encore <a href="https://eyeondesign.aiga.org/for-decades-cartographers-have-been-hiding-covert-illustrations-inside-of-switzerlands-official-maps/">cet article</a> sur les easter eggs des cartographes suisses.

Les cartes et le web, vaste sujet, mais quel futur ?

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 ? 



Ç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;



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 ! <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" />



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



La première étape: 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é.)



La deuxième étape: 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 directeur d’agence. Et c’est concrètement à cet instant, que j’ai découvert que ma place était la sienne.



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. (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) 



Quelles sont tes sources d’inspiration ?



Youtube, Spotify, Instagram, Netflix, Nike, PR, …



Parles nous de tes hobbies ?



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.



Une musique que tu écouterais en boucle ?



Impossible d’en choisir une, mais bon : 



<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>







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



Fête jusqu’au petit matin.



Une citation qui te parle ?



« More Strategy. Less Ads. »



Un compte insta que tout le monde devrait découvrir ?



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> 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> 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> 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> 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> 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> 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> 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> Un seul sound system: <a href="https://www.instagram.com/soldiasound">Soldia Sound</a> 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> Mon nouveau bar à Bogota: <a rel="noreferrer noopener" href="https://www.instagram.com/elsindicato_beer/" target="_blank">El Sindicato</a> 



Un métier qui t’a toujours attiré ?



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



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



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



Et sinon, plutôt chat ou chien ?&nbsp;



Plutôt Cruz: <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" />

10 questions pour découvrir Alberto

<div>
 
 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.
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Sascha Eggenberger
 Designer chez GitLab
 </div>
 </div>
</div>



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



<h2>Evolution</h2>


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

 </div>
</div>



Après tout, Drupal a été pensé par des développeurs, construit par des développeurs et fait pour des développeurs.



<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>



Il faut l&rsquo;assumer, on revient de loin, très loin même.


<div>
 
 C&rsquo;est beau ! &#8230; C&rsquo;est sexy ! &#8230; c&rsquo;est magnifique !
Que dis-je, magnifique ? &#8230; C&rsquo;est utilisable !
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Cyrano de bergerac
 </div>
 </div>
</div>



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



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. 



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



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



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.



<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>



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.


<div>
 
 Est-ce vraiment Drupal ?
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Pierre Afeux
 Un client désormais heureux
 </div>
 </div>
</div>



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.



<h2>Un avenir radieux</h2>



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.



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



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



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.



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.



<h2>Dark Mode</h2>



Tout a un mode sombre. Pourquoi pas Drupal ? 



<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>



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



<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>



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.



Nous utilisons principalement ce module supplémentaire sur nos projets Headless.



<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>



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



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



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



<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>
 
 Alors, prêt à sauter le pas ? 
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Belebt
 Base Jumper
 </div>
 </div>
</div>



Quoi qu’il en soit, n’hésitez pas à&nbsp;nous contacter&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.



<h2>Sources</h2>



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



Gin&nbsp;(Juin, 2022). Gin Admin Theme. <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>



<meta charset="utf-8">Sascha Eggenberger&nbsp;(April, 2021). Drupal Gin Future UI. <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>



Sascha Eggenberger (October, 2021). Drupal Gin Admin Theme: The Past, The Present &amp; The Future. <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>



Cristina Chumillas (April, 2022). The Present and Future of Drupal’s Administrative Interface. <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>



Jayati Kataria (March, 2020). Claro: A modern outlook of Drupal admin UI. <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>



<meta charset="utf-8">Mike Hubbard (January, 2020). Drupal’s admin UI &amp; how it compares to WordPress. <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>



Kevin Oleary (September, 2015). The evolution of the toolbar; Drupal 7 to Drupal 8. <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>



Bluedrop (March, 2021). Améliorer l&rsquo;expérience de la contribution : du confort dans le backoffice Drupal. <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>

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

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.



<h2>Qui consomme ?</h2>



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



<ul><li>La production : 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’hébergement : afin de rendre le site disponible, il faut l’héberger sur un serveur ou datacenter. En somme, de gros ordinateurs mis en réseaux qui doivent assurer une disponibilité constante, 24h sur 24h.</li><li>Le réseau câblé et mobile : pour acheminer les données de notre serveur vers l’internaute.</li><li>Les routeurs (boxe ADSL) : 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 appareils : permettent de consulter notre site au sens large; ordinateurs, téléphone mobile, écran, clavier, souris, etc.</li></ul>



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, il s’agit également de ne pas la gaspiller.



<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>Où peut-on agir ?</h2>



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



<h3>La production</h3>



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



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



<ul><li>En optant pour un hébergement vert ou Greenhosting. Attention toutefois au greenwashing 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 réduire la charge serveur; nombre de requêtes, charge CPU, etc.</li><li>En filtrant les BOTs. 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>Réduire l’espace disque utilisé en réduisant la taille et le nombre des médias, des archives, etc.</li><li>En mettant notre site en cache. 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>Le réseau câblé et mobile</h3>



<ul><li>En favorisant la proximité; 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 Content Delivery Network 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 optimisant la taille des ressources envoyées comme la taille des images, la quantité de code, etc.</li></ul>



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



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



<h3>Les appareils</h3>



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



<ul><li>En réduisant la charge CPU/GPU. 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 à parser ou en optimisant la taille et la présence des médias.</li><li>En utilisant des couleurs sombres. 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>Ce qu’il faut retenir</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>Notre responsabilité</h2>



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. Il est de notre responsabilité de les mettre autant que possible en œuvre.



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.

Durabilité – Énergie et Hébergement

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



<h2>Préambule</h2>



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.



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>.



<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>



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.



<h2>Livewire</h2>



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. 



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



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.



<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>



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>. 



<meta charset="utf-8">Je travaille avec :



<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>



Tout ce qui a de plus classique. <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>



<h3>Bootstrap</h3>



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é ☕️. Ensuite <code>http://localhost:8080</code> est disponible !



Le reste est globalement de la config; vous pouvez copier le <code>.env.example</code> en <code>.env</code>.



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, logins, 2FA, session managements, API et/ou team management. 



<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>



Ces 4 commandes nous permettent de:



<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>



Et voilà 🎉, un Laravel tout beau tout neuf.



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



<h3>Le routing</h3>



Le routing : une partie essentielle quand on parle de cutting-edge web framework. 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 Controller.



Dans notre exemple, rendons nous dans l&rsquo;URI <code>/demo</code>. Au début, ce n&rsquo;est qu&rsquo;une simple page blanche.



<h3>Le composant Livewire</h3>



Nous voici dans le vif du sujet ! Créons un composant.



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>. Faisons le composant <code>Antistatique</code>.



On se retrouve avec un composant tout bête pour l&rsquo;instant avec un template. 



<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>



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



<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>



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



Ajoutons une propriété <code>int $loveCounter</code>.



<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 class devrait ressembler à ceci.</figcaption></figure></div>



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



Une fois le composant mis en place, il ressemble à ceci:



<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>



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



<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>



Livewire est rendu initialement comme n&rsquo;importe quelle page Blade. Ensuite, quand une interraction est demandée, en l&rsquo;occurence comme notre <code>wire:click</code>, Livewire génère une requête AJAX au back-end qui met à jour les données puis le composant. Ce dernier est ensuite renvoyé au front-end. Le DOM est manipulé intelligement et ne change que les éléments du composant. 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 ! 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>.



Livewire se comporte de façon Stateless, 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. Voici une petite image prise de la documentation de Livewire qui nous explique comment tout cela fonctionne. 



<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>



Comme tout composant front-end, les données se situent chez le client. 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). Néamoins, Livewire passe des checksums entre chaques requêtes, si ces dernières ne sont pas valides, la requête ne sera pas lancée. <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>



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



J&rsquo;espère avoir réussi à captiver votre attention. N&rsquo;hésitez pas à aller regarder le projet démo sur mon repository et à jouer avec ! Livewire est un concept vraiment intéressant d&rsquo;un point de vue de développeur back-end, permettant de générer des composants en PHP sans avoir à créer des API dédiées, ainsi que des controllers / routings. 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;



En soit, c&rsquo;est un micro-framework qui à une place très importante dans Laravel et nous permet d&rsquo;intéragir avec notre application et tout son écosystème autour. 



Merci de m&rsquo;avoir lu !

Laravel – Livewire

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>.



<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>



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



<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>



Cette recherche permet alors de trouver des produits selon les critères suivants:



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



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



En effet, la recherche Brünigpass engendrait l&rsquo;erreur suivante:



<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>



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


<div>
 
 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.
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Stackoverflow
 </div>
 </div>
</div>



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>).



À première vue, le caractère ü de Brünigpasssemble engendrer un problème.



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:



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



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



<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>



 et le résultat fût sans équivoque:



<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>



Tada&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>.



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



<h2>Solution</h2>



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



En effet, nous avions ajouté ce champ afin de l&rsquo;afficher dans les résultats de recherche, mais il n&rsquo;était pas nécessaire de recherche par ce dernier. 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.



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.



<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>



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



<h2>Sources</h2>



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



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

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

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 (de tout le monde, en fait !).



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


<div>
 
 En 2019, le secteur du numérique était responsable de 3.9% des émissions mondiales de gaz à effet de serre 
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 GreenIT.fr &#8211; Empreinte environnementale du numérique mondial
 </div>
 </div>
</div>



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, même si le chemin est encore long. 



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>.



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



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


<div>
 
 Meeting the needs of current generations without compromising the ability of future generations to meet their own needs
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Brundtland Commission 1987
 </div>
 </div>
</div>



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 (j&rsquo;espère qu&rsquo;à l&rsquo;heure actuelle ce n&rsquo;est plus un secret pour personne), nous devons donc les utiliser consciemment.



Tips : 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>



<h2>Le cycle de vie</h2>



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;



Les 5 phases d’un cycle :&nbsp;



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



On entend beaucoup parler de la phase “end of life” (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 !



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



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;


<div>
 
 Depuis la révolution industrielle, les humains designent des systèmes linéaires. La nature crée des systèmes régénératifs.
 <div style="display: flex; flex-direction: row;flex-wrap: wrap;">
 <div style="display: flex; flex-direction: column; justify-content: center;">
 Unschool &#8211; Sustainability
 </div>
 </div>
</div>



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. (Attention, je n&rsquo;insinue pas qu&rsquo;arrêter d&rsquo;utiliser des pailles en plastique va suffire à sauver les océans).



Nous traitons les symptômes et pas le problème.



<h2>Le greenwashing</h2>



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



Certaines entreprises dépensent beaucoup d&rsquo;énergie et d’argent pour promouvoir le côté “green” 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 “Greenwashing” et c’est bien plus courant que ce que l’on pense. 



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



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;



Quelles sont les actions que vous avez ou souhaitez mettre en place ? 



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>.



<h2>Discutons-en !</h2>



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

C’est quoi la durabilité ?

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 première participation au Salon LEC 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.



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



            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à !



&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.



&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Puis nous découvrons le stand. Bien que vide il est Woaw. 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.



&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;!



            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.



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



           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.



&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.



&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.



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



&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.



&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;Solutions web pour toucher l’international : être dans chaque pays et dans toutes les cultures&nbsp;»</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.



<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>



&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.



&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.



<h2>En conclusion</h2>



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;?



<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 publicité online.</h3>



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



Capping



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



Bid request



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. You win!



Lead



C&rsquo;est un prospect, un·e potentiel·le futur·e client·e.



Opt-in



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



Double opt-in



La même en version double ! 



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 ?



Opt-out



C’est l’inverse de ce qu’il y a avant ! 😉



Persona



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



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 ! 



Pure Player



C’est le fait de vendre uniquement sur Internet.



PPC (Pay-per-click)



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



CLV (Customer Lifetime Value)



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.



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



Reach (la portée)



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



A/B Testing



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é ! 



En résumé, c&rsquo;est LA 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 !



Call-To-Action (CTA)



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



R.O.I (Return On Investment)



(= 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.



VTR : “View-Through Rate” ou “Taux de complétion vidéo”



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.



LTR : “Listen-Through Rate” ou “Taux d’écoute”



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”.



ADX : “ADvertising eXchange” ou “Échange publicitaire”



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;



DSP : “Demand Side Platform”



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



PMP : “Private MarketPlace”



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



Snack content



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



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



Coût par clic



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> 😉



Coût par impression



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



Funnel (de conversion)



On l’appelle aussi l&rsquo;entonnoir de conversion ! 



C’est en gros le chemin qu’un·e visiteur·euse (prospect) va suivre jusqu’à faire une conversion ! 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;



Retargeting



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 (pas trop tard non plus ! Quelques jours max) et de vous re-proposer d&rsquo;acheter ce super vélo ! Tout ça grâce au célèbres cookies du site 🍪.



RTB : Real-time bidding (enchères en temps réel)



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 en temps réel. 



SEM/SEO/SEA/SMO



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 naturel, en SEA (Search Engine Advertising), on travaille sur du référencement payant. Et enfin le SMO (Social Media Optimisation), dont le but est de développer la visibilité d’une marque sur les réseaux sociaux.



<h2>Conclusion</h2>



J’espère que cet article vous aidera à mieux comprendre le jargon du digital 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 ! 👇 



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

Lexique sur la publicité online (pour les nuls)

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 !



Un début plein de découvertes



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.



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.



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.



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;


<div style="display: flex; flex-direction: row;">
 <div style="flex-basis: 50%; margin-right: 145px;">
 
 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.
 
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.
 </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>



Repas et discussions savoureux.



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.



<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>



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;



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;



À 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;



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;



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;



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 😉



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

Blog

10 questions pour découvrir Tiphaine

Les cartes et le web, vaste sujet, mais quel futur ?

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