Savoir-faire et technologie

<div><h2>Qu’est-ce que l’innovation et pourquoi ? </h2><p>Le dictionnaire <i>Larousse</i> nous offre la définition suivante pour le <a href="http://www.larousse.fr/dictionnaires/francais/innover/43197">verbe innover</a> : <i>« Introduire quelque chose de nouveau pour remplacer quelque chose d’ancien dans un domaine quelconque »</i>.</p><p>C’est intéressant… mais pourquoi faut-il innover ? En quoi l’innovation est-elle importante ? </p><p>Innover est avant tout une façon de penser, c’est aussi un état d’être qui nous amène à toujours nous redéfinir en fonction des nouvelles connaissances acquises. À la lumière de ces nouvelles connaissances, nous pouvons reconceptualiser ce qui est déjà existant pour l’améliorer ou tout simplement inventer de nouvelles choses. </p><p>L’objectif de l’innovation devrait être de répondre à un besoin d’une manière plus efficace que le statu quo. Innover ne sert à rien si cela ne s’inscrit pas avant tout dans une démarche, dans une direction donnée. Pour une entreprise, l’innovation doit servir les besoins d’affaires ou opérationnels par exemple. </p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684707e7e2b570d7a6413387_too-busy-to-innovate.webp" alt="Trop occupé pour innover." title="Trop occupé pour innover."></p><p>Trop occupé pour innover. © DR.</p><p>Les entreprises qui ont compris que l’innovation, ou l’approche de l’amélioration continue, est importante ont constaté les avantages et bénéfices suivants :</p><ul><li>Rester ou devenir concurrentiels.</li><li>Apporter de la valeur à sa clientèle.</li><li>Se différencier et bonifier son offre.</li><li>Améliorer sa rentabilité en diminuant les coûts.</li><li>Améliorer son efficacité opérationnelle.</li><li>Rehausser la qualité et l’image de l’entreprise.</li><li>Mais aussi… rester vivant et avoir du plaisir.</li></ul><p>Mais pour parvenir à ces résultats, il faut s’être posé les bonnes questions au départ, lorsque l’on s’engage sur la voie de l’innovation :</p><ul><li>Quel est l’objectif de ce projet ? À quoi, à qui servira cette innovation ?</li><li>Quelles sont les solutions/ressources existantes (à l’interne, à l’externe) pour répondre au besoin ?</li><li>Quelle est la faisabilité de la solution envisagée ?</li><li>Quel est l’investissement lié à cette solution/innovation ? </li><li>Quel sera le retour sur investissement de ce projet ? </li><li>Dans combien de temps ce projet sera-t-il rentable ? </li><li>Quelles seront les retombées à court moyen et long terme ?</li></ul><p>L’innovation est plus facile à vivre en entreprise lorsqu’elle s’intègre dans un flux d’amélioration continue, qu’elle n’est pas un changement isolé et radical. Une entreprise qui n’innove pas se rend plus vulnérable à sa concurrence qui saura trouver le moyen de se démarquer davantage.</p><p>Ce qui finalement nous amène à conclure que l’innovation n’est pas importante… elle est essentielle. L’innovation doit faire partie intégrante des valeurs et de la culture d’entreprise, non seulement pour survivre, mais aussi pour « grandir » en tant qu’entreprise, et aussi en tant qu’être humain. </p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684707ea086a552384a8f684_maurice-lacroix-square-wheel-v.webp" alt="Montre Maurice Lacroix." title="Montre Maurice Lacroix."></p><p>Innover avec la roue carrée : montre à roue carrée pour les secondes, inventée par Michel Vermot, ingénieur en microtechnique. © Montres Maurice Lacroix.</p>

<div><p>Alors que de plus en plus d’entreprises basent leur modèle d’affaires sur la création ou l’implantation d’une plate-forme logicielle, la notion de durabilité des investissements en développement devient capitale. Pour cela, il est important de considérer la prise en compte de la dette technique quand vous planifiez la réalisation de votre plateforme logicielle.</p><p>La <a href="https://www.agilealliance.org/introduction-to-the-technical-debt-concept/">dette technique</a> est une métaphore créée par Ward Cunningham, l’inventeur du wiki, l’artisan de l’<i>Extreme programming</i> et l’un des rédacteurs du fameux <i>Manifeste agile</i>. Lorsque l’on prend des raccourcis ou que l’on fait des concessions lors du développement, que ce soit pour des questions de délais, de budget, de manque de rigueur ou encore de savoir-faire, on accumule une “dette” qu’il faudra rembourser dans le futur. Aussi, la valeur du code évolue et se déprécie généralement avec le temps. Aucun projet ne peut échapper à la dette technique. Il faut donc la contrôler, afin de réduire au minimum ses impacts financiers pendant toute la vie de la plateforme.</p><p>Les conséquences de l’accumulation d’une forte dette technique peuvent être désastreuses. Elle peut entraîner de la difficulté à faire évoluer une solution ou à s’arrimer à une nouvelle plateforme. L’utilisation de technologies ou de versions qui ne sont plus supportées peuvent rendre vulnérables à différentes menaces de sécurité. Une dette technique est toujours néfaste, car elle entraîne entre autres des coûts élevés de développement, handicape les possibilités de croissance de l’entreprise, en alourdit la gestion, exerce une pression sur les liquidités et beaucoup de soucis pour les gestionnaires. La qualité du code est donc un facteur important de la valeur d’une plateforme et souvent de la performance d’une organisation.</p> <p>Par exemple, un code non documenté et ne suivant pas les bonnes pratiques de l’industrie deviendra difficile à transférer si jamais il appert que vous deviez internaliser le développement ou bien transférer le service de développement à un autre prestataire. Ces transferts peuvent arriver durant toutes les années d’évolution d’un système logiciel et sont généralement très coûteux. Il est ainsi important de s’enquérir des bonnes pratiques lorsque vous choisissez votre partenaire de développement. </p><h2>Que faire lorsque votre projet a mal vieilli ?</h2><p>Si vous avez développé votre plateforme logicielle en interne, il est souvent nécessaire de rencontrer une entreprise de développement afin de faire un audit du code. Pour faire suite à leurs constats et recommandations, il faudra prioriser et planifier les modifications à faire. Pour cela, il faut bien comprendre les problèmes relevés et les impacts d’un code désuet et de mauvaise qualité. Évidemment, et tout comme la dette financière, l’on prendra des décisions lorsque le coût de réparation de la dette est inférieur à ses bénéfices et peut être amorti. </p><h2>Comment s’en prémunir sur les nouveaux projets ?</h2> <p>Dans bien des cas, il est préférable d’investir un peu plus au départ pour obtenir un développement qui offrira plus de pérennité. Voici quatre pistes de solutions : </p><ol><li>Choisir une équipe ou une firme sérieuse qui tentera de comprendre en amont avec vous la vision à court, moyen et long terme de votre solution ainsi que les objectifs d’affaires, afin de sélectionner des technologies qui pourront s’adapter à cette évolution. </li><li>Avoir une bonne documentation du code. Cela permet de réduire les coûts de maintenance/support, tout en facilitant des transferts.</li><li>Se doter de tests automatisés qui permettent de détecter d’éventuelles pertes dans l’intégrité et la précision des fonctionnalités du logiciel. </li><li>Finalement, disposer d’une gestion des bogues et implanter des techniques de DevOps qui permettront de veiller en continu à la bonne santé de votre système logiciel et d’agir selon vos priorités stratégiques. </li></ol><h2>En somme </h2><p>La gestion de la dette technique s’inscrit dans une dynamique de durabilité et d’investissement responsable. Il existe des solutions afin de la réduire et de planifier un écosystème technologique plus durable. Il est important de choisir ses coéquipiers ou sa firme de développement en fonction de leur maturité à gérer cette complexité.</p>

<div><p>En effet, qui aurait pu prédire en 2003 qu’une microentreprise composée de deux personnes deviendrait 15 ans plus tard un important acteur du développement logiciel avec près de 150 employés répartis sur 4 grandes villes du Nord-est américain ?</p><p>Si les débuts ont été forcément modestes, Spiria a su rapidement dépasser la classique relation client-fournisseur pour nouer avec ses clients de solides relations de confiance, des quasi-partenariats, ce qui lui a permis d’assurer sa pérennité et de gérer sa croissance. Ainsi, des entreprises comme la multinationale Autodesk, qui édite des logiciels de création 2D et 3D, ou l’américaine Acosta, qui offre des services marketing-ventes et comporte plus de 35 000 employés, travaillent de façon ininterrompue avec Spiria depuis plus d’une décennie.</p><p>Outre l’accent mis sur les relations d’affaires durables, le succès de Spiria tient également de la diversité de ses savoir-faire et de ses implantations qui lui permettent d’offrir des services de proximité à toujours plus d’entreprises. Après avoir passé dix ans à se développer à Montréal, l’entreprise s’est engagée dans une politique de croissance géographique. En débutant par Ottawa-Gatineau en 2014, suivi de Boston en 2017 puis de Toronto en ce début de 2018. Cette phase de croissance, qui est loin d’être achevée, s’est déroulée sans aucun compromis sur la qualité de service et dans le plus grand respect de nos valeurs d’entreprise. </p><p>Ce développement accéléré a été couronné depuis 6 années consécutives par une place au PROFIT 500, le classement des 500 entreprises canadiennes qui connaissent la croissance la plus rapide. </p><p>Le succès de Spiria repose aussi en grande partie sur les talents passionnés qui forment l’équipe, car il s’agit avant tout d’une aventure humaine. Les Spiriens et Spiriennes sont les ambassadeurs d’une culture basée sur l’innovation, la flexibilité et la collaboration. Une culture qui est l’ingrédient essentiel de la réussite de chacun de nos projets de développement logiciel.</p><p>Alors, bien sûr, nous allons fêter ce quinzième anniversaire comme il se doit, mais nous avons déjà le regard qui porte sur ce que nous serons en 2023, pour notre vingtième !</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684706bba0418b84dddb539b_spiria-15.png" alt="Spiria, 15e." title="Spiria, 15e."></p>

<div><p>Le plus grand avantage des services <i>cloud</i>, c’est bien sûr leur interopérabilité et leur flexibilité : elles permettent aux utilisateurs d’accéder à leurs données, leurs fichiers et leurs applications à partir de n’importe quel appareil et de n’importe où. Pour les entreprises, le bénéfice réside surtout dans la possibilité d’externaliser des éléments absolument nécessaires au bon fonctionnement d’une compagnie (logiciels, serveurs) mais qui représentaient auparavant des investissements initiaux et une gestion considérables. </p><p>Voici un court survol de ce qu’il faut considérer avant de décider de se tourner vers ces technologies.</p><h2>Les services offerts</h2><p>Il existe trois principaux volets d’offre dans les technologies <i>cloud</i>.</p> <p>1. <b>Infrastructure as a Service</b> (Infrastructure en tant que service).</p><p>Ce volet permet aux entreprises qui ne souhaitent pas investir massivement dans les composantes matérielles et leur entretien de se procurer des serveurs ou de l’espace pour entreposer des données. </p><p>2. <b>Software as a Service</b> (Logiciel en tant que service).</p><p>Il s’agit du volet de loin le plus important et qui connaît la plus forte croissance. Le modèle d’affaires est habituellement l’abonnement : les utilisateurs peuvent payer pour une période donnée, mais aussi pour un certain volume d’utilisation, ou encore au besoin ponctuel.</p><p>3. <b>Platform as a Service</b> (Plate-forme en tant que service).</p><p>C’est le service “Infrastructure as a Service” augmenté d’une surcouche logicielle. Par exemple, dans le cas d’un serveur virtuel, c’est le prestataire qui fournit, installe et maintient le système d’exploitation.</p><h2>Les coûts à long terme</h2><p>Les technologies <i>cloud</i> permettent d’amortir l’investissement en TI, c’est vrai : au lieu de payer un gros montant au départ pour acquérir des composantes matérielles ou logicielles, le prix est désormais fixe et habituellement prévisible, soit par utilisateur, soit par volume d’utilisation.</p><p>En plus des coûts d’acquisition, une entreprise peut également épargner en termes de main d’œuvre, puisqu’il n’y a plus d’installation et puisque le fournisseur de services <i>cloud</i> se charge des mises à jour et autres opérations du genre.</p><p>Mais il convient de bien faire ses calculs ; sur le moyen ou long terme, la solution infonuagique n’est pas nécessairement la plus économique.</p><h2>La sécurité</h2><p>En cette ère où la sécurité informatique est si primordiale, peut-on vraiment toujours être certain que les données qui se retrouvent dans le nuage sont bien protégées ? Après tout, les « menaces » sont nombreuses et les « exploits » de pirates occupent régulièrement les grands titres des nouvelles. </p><p>Avoir un totale confiance en un fournisseur de technologies <i>cloud</i> est donc véritablement crucial. Il faut savoir qu’il existe des standards de meilleures pratiques à rechercher chez les fournisseurs potentiels. Il est par ailleurs possible de consulter des sites d’évaluation de technologies <i>cloud</i> telles que Chekkt, qui répertorie plus de 3 000 outils technologiques d’affaires et les classe par satisfaction et commentaires des utilisateurs.</p><h2>Le support</h2><p>Puisque le support et la maintenance ne sont plus assurés à l’interne, c’est plus que jamais important d’obtenir un plan de support le plus complet possible de la part du fournisseur, idéalement 24 heures/7 jours ! </p><p>Le temps total d’indisponibilité garanti devrait également être le plus bas possible, de l’ordre de 0,01 %.</p><h2>La période d’essai</h2><p>Avant de conclure une entente avec un fournisseur de services <i>cloud</i>, il est toujours préférable d’obtenir une période d’essai gratuit et/ou de tester avec un projet pilote. </p><p>L’essai permet non seulement d’expérimenter avec l’outil, mais également de mieux cibler les besoins et d’avoir une meilleure idée du niveau de service recherché.</p><h2>La fonctionnalité d’export</h2><p>Dans le pire des scénarios, l’implantation d’une solution <i>cloud</i> peut ne pas fonctionner. C’est pourquoi tout fournisseur devrait permettre une manière accessible d’exporter les données afin de les rapatrier localement. Cette fonctionnalité pourrait de plus s’avérer très utile dans le cas où le fournisseur cesserait ses activités.</p><p>Tout compte fait, mis à part certaines exceptions, les avantages de migrer vers les technologies <i>cloud</i> surpassent souvent les inconvénients. Mais comme toujours lorsqu’on traite de données et de processus d’affaires, la diligence demeure requise !</p>

<h2>Microframe, le futur du Wireframe ?</h2> <p><img title="Microframe, le futur du wireframe." src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847061b086a552384a7e9ba_1803-design-1.webp" alt="Microframe, le futur du wireframe." /></p> <p>Les « Microframes » sont des versions bonzaï des « Wireframes » (maquettes fonctionnelles ou fil-de-fer). Cet article parle de la nouvelle approche de prototypage qui vise à traiter à plus haut niveau les interfaces et leur utilisation.</p> <p lang="fr" xml:lang="fr">⇨ <em>Creative Bloq</em>, “<a href="https://www.creativebloq.com/features/are-microframes-the-future-of-wireframing">Are microframes the future of wireframing?</a>.”</p> <p> </p> <h2>Le futur du Web est… dans le courriel</h2> <p><img title="Le futur du Web est… dans le courriel." src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847061ea389942abe2ace0a_1803-design-2.webp" alt="Le futur du Web est… dans le courriel." /></p> <p>Google pense que le courriel est le futur du Web. Selon eux, et tout du moins pour les téléphones intelligents, tout se passera dans cet outil de communication qui est né lors du Big Bang de l’Internet.</p> <p lang="fr" xml:lang="fr">⇨ <em>Co.design</em>, “<a href="https://www.fastcodesign.com/90160460/google-thinks-the-future-of-the-web-is-email">Google thinks the future of the Web is… Email</a>.”</p> <p> </p> <h2>Gagnants du design interactif chez CommArts</h2> <p><img title="Gagnants du design interactif chez CommArts." src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684706213af7acf9b6858ee0_1803-design-3.webp" alt="Gagnants du design interactif chez CommArts." /></p> <p>Voici les gagnants dans la catégorie design interactif du concours annuel du magazine Communication Arts. Vous pouvez aussi voir les projets qui ont reçu des prix dans les autres catégories du concours.</p> <p lang="fr" xml:lang="fr">⇨ <em>Communication Arts</em>, “<a href="https://www.fastcodesign.com/90160460/google-thinks-the-future-of-the-web-is-email">Interactive Gallery</a>.”</p> <p> </p> <h2>Google Flutter en bêta</h2> <p><img title="Google Flutter en beta." src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/68470624bd0abd8d6edf561a_1803-design-4.webp" alt="Google Flutter en beta." /></p> <p>Au dernier World Mobile Congress, Google a annoncé que <a href="https://flutter.io">Flutter</a>, son nouvel « UI Framework » qui permet de concevoir des interfaces natives pour les applications iOS et Android, est entré en mode bêta. Le logiciel est gratuit et open-source.</p> <div></div> <p lang="fr" xml:lang="fr">⇨ <em>YouTube</em>, “<a href="https://www.youtube.com/watch?v=fq4N0hgOWzU">Google Developers, Introducing Flutter</a>.”</p> <p> </p> <h2>Moqups : prototypage et arborescence</h2> <p><img title="Moqups." src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/68470627a0ed67c8acd0fa59_1803-design-5.webp" alt="Moqups." /></p> <p>Moqups est un outil en ligne qui existe depuis un certain temps sur le marché des applications de prototypage. La particularité de cette solution est le mode « Plan », une fonctionnalité qui permet de créer la structure et hiérarchie du projet en mode organigramme/arborescence.</p> <p lang="fr" xml:lang="fr">⇨ <em><a href="https://moqups.com">Moqups</a></em>.</p> <p> </p> <h2>Une bibliothèque dédiée au design interactif et à l’ergonomie</h2> <p><img title="Interaction Design Foundation." src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847062a378cc0db15099d49_1803-design-6.jpg" alt="Interaction Design Foundation." /></p> <p>La Interaction Design Foundation présente une section sur son site qui est une mine d’information sur l’histoire, les particularités et les principes de la conception interactive, de l’ergonomie et de ce qu’on appelle aujourd’hui l’expérience utilisateur.</p> <p lang="fr" xml:lang="fr">⇨ <em>Interaction Design Foundation</em>, “<a href="https://www.interaction-design.org/literature">Literature</a>.”</p>

<div><h2>PowerPoint, une relation compliquée</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705e0aa91262c5d2d4215_1802-design-1.webp" alt="decorative"></p><p><i>Microsoft PowerPoint</i> est un dinosaure du logiciel (développé initialement pour Macintosh en 1987) qui divise les opinions ; adoré par certains, détesté par d’autres, il a survécu « héroïquement » au fil des années aux coups portés par des applications alternatives à l’aspect plus moderne, par exemple <i>Keynote</i> d’Apple. Arrivé en 2018, peut-être est-il temps de passer à d’autre chose…</p><p lang="fr" xml:lang="fr">⇨ <i>BBC Capital</i>, “<a href="http://www.bbc.com/capital/story/20180125-our-love-hate-relationship-with-powerpoint">Our love-hate relationship with PowerPoint</a>.”</p><h2>Est-ce que l’IA remplacera les designers ?</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705e427510e29db886212_1802-design-2.webp" alt="decorative"></p><p>Cet article essaye d’atténuer les craintes de ceux et celles qui œuvrent dans les domaines du design vis-à-vis de l’invasion fort probable de l’intelligence artificielle dans les milieux professionnels.</p><p lang="fr" xml:lang="fr">⇨ <i>Webdesigner Depot</i>, “<a href="https://www.webdesignerdepot.com/2018/02/will-ai-really-replace-designers-by-2022/">Will AI really replace designers by 2022?</a>”</p><h2>Les 18 « meilleurs » outils de prototypage</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705e7a0418b84dddaafee_1802-design-3.webp" alt="decorative"></p><p>La multiplication des applications de conception d’interfaces utilisateurs a poussé l’auteur de cet article à dresser une liste des 18 outils de prototypage qu’il juge être les meilleurs du marché.</p><p lang="fr" xml:lang="fr">⇨ <i>Creative Bloq</i>, “<a href="https://www.creativebloq.com/wireframes/top-wireframing-tools-11121302?ref=webdesignernews.com">The 18 best wireframe tools</a>.”</p><h2>Adieu Material Design</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705ea513c65a40c3572a2_1802-design-4.webp" alt="decorative"></p><p>L’auteur de cet article, Emin Durak, fait une analyse assez poussée de Material Design et n’hésite pas à critiquer, à plusieurs niveaux, cette célèbre librairie et son utilisation. De plus, ce qui est intéressant, c’est qu’il propose des solutions alternatives.</p><p lang="fr" xml:lang="fr">⇨ <i>Techtrument</i>, “<a href="https://medium.com/techtrument/bye-bye-material-design-acaebcc7c6b4">Bye bye Material Design</a>.”</p><h2>Snappykit : des sites pour les app mobiles</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705ed4f06d76dfc2c5abe_1802-design-5.webp" alt="decorative"></p><p>Cet outil en ligne permet la création facile de sites web pour promouvoir des applications mobiles sur le App Store ou Google Play.</p><p lang="fr" xml:lang="fr">⇨ <a href="https://snappykit.com"><i>Snappykit</i></a>.</p><h2>Open Source Design</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705f0199b799a027708d5_1802-design-6.webp" alt="decorative"></p><p>Avec <i>Open Source Design</i>, des développeurs et des designers collaborent sur des projets… Open Source. Sur le site, des développeurs affichent des demandes pour avoir l’aide de designers sur leurs projets. Les demandes peuvent être en mode collaboration gratuite ou rémunérée.</p><p lang="fr" xml:lang="fr">⇨ <a href="http://opensourcedesign.net"><i>Open Source Design</i></a>.</p>

<div><h2>Les tendances en design pour 2018</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705f3199b799a02770b8e_1801-design-1.webp" alt="Tendances en design." title="Tendances en design."></p><p>Comme chaque début et fin d’année, des articles se multiplient en ligne pour prédire les modes et tendances dans la conception visuelle pour l’année à venir. Le site Webdesigner Depot y va aussi de sa liste de “6 prédictions design pour 2018”.</p><p lang="fr" xml:lang="fr">⇨ <i>Webdesigner Depot</i>, “<a href="https://www.webdesignerdepot.com/2018/01/6-design-predictions-for-2018-that-might-actually-happen/">6 design predictions for 2018 (that might actually happen)</a>.”</p><h2>Le meilleur du design chez Google</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705f727510e29db88710c_1801-design-2.webp" alt="Google Design." title="Google Design."></p><p>Voici 10 projets de design réalisés chez Google en 2017 et dont la compagnie est fière. Certains sont sûrement passés inaperçus alors que d’autres ont eu un certain succès dans le milieu du design interactif.</p><p lang="fr" xml:lang="fr">⇨ <i>Google Design</i>, “<a href="https://design.google/library/2017-design-google/">Google Design’s Best of 2017</a>.”</p><h2>GazMétro est maintenant Énergir</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705faa0418b84dddac21b_1801-design-3.webp" alt="Énergir." title="Énergir."></p><p>GazMétro s’est transformée tout récemment en Énergir, un nouveau nom et une nouvelle image de marque qui devront représenter la mission et la vision de cette compagnie. Les avis sont partagés. (Merci Martine.)</p><p lang="fr" xml:lang="fr">⇨ <i>Brand New</i>, “<a href="https://www.underconsideration.com/brandnew/archives/new_name_logo_and_identity_for_energir_by_cossette.php">To Energe or Not to Energe, That is the Verb</a>.”</p><h2>Polices IBM Plex offertes</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705fd8d3149e8b6b26061_1801-design-4.webp" alt="IBM Plex." title="IBM Plex."></p><p>IBM Plex, la nouvelle famille de polices de caractères d’IBM est disponible gratuitement en mode “SIL Open Font License”.</p><p lang="fr" xml:lang="fr">⇨ <i>Bold Monday</i>, “<a href="https://www.boldmonday.com/custom/ibm/">IBM Plex</a>.”</p><h2>L’outil Humanscale ressuscité</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684706006bc41b5f70074ace_1801-design-5.webp" alt="Humanscale." title="Humanscale."></p><p>Humanscale est un outil ingénieux qui était jadis célèbre dans les bureaux des concepteurs d’objets et des designers industriels, incluant ceux de la compagnie Apple. C’est un ensemble brochures et de disques qui donnent des valeurs numériques de différentes variables anthropométriques dans l’objectif de réaliser des objets et outils les plus ergonomiques possible. Humanscale est maintenant disponible à nouveau dans sa forme traditionnelle, le papier.</p><p lang="fr" xml:lang="fr">⇨ <i>Wired</i>, “<a href="https://www.wired.com/story/humanscale-the-classic-design-tool-gets-a-second-life/">Humanscale, the classic design tool, gets a second life</a>.”</p><h2>Art et IA générative</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684706044f06d76dfc2c68ff_1801-design-6.webp" alt="Generative AI." title="Generative AI."></p><p>On entend beaucoup d’histoires sur l’évolution impressionnante de l’intelligence artificielle dans différents domaines d’applications. Voici donc l’IA au service du design ; elle génère des concepts et des motifs, elle retouche, ajuste et combine des visuels et, souvent, semble-t-il, dépasse l’imagination ou le raisonnement d’une personne œuvrant dans le domaine de la conception.</p><p lang="fr" xml:lang="fr">⇨ <i>Digital Arts</i>, “<a href="https://www.digitalartsonline.co.uk/features/illustration/how-generative-ai-is-changing-art-design/">How generative AI is changing art and design</a>.”</p>

<div><h2>Architecture de l’information vs expérience utilisateur</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705cd0e3e76924ae111f6_1804-design-1.webp" alt="." title="."></p><p>Vers les débuts du commerce électronique sur le Web, le terme “architecte de l’information” était aussi populaire que “UX designer” aujourd’hui. Voici un article bien écrit qui parle de l’expérience utilisateur face à l’architecture de l’information.</p><p lang="fr" xml:lang="fr">⇨ <i>UX Booth</i>, Darren Northcott, “<a href="https://www.creativebloq.com/features/are-microframes-the-future-of-wireframing">The difference between Information Architecture and UX Design</a>.”</p><h2>Google “Web Designer” Beta 3.0</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705d0093915780513123d_1804-design-2.webp" alt="." title="."></p><p>Google a lancé la Beta 3 de son application <i>Web Designer</i>. Contrairement à ce que son nom peut suggérer, cette application est uniquement destinée à la conception de contenu animé et interactif HTML5, et particulièrement de publicités.</p><p lang="fr" xml:lang="fr">⇨ <i>WebdesignerDepot</i>, Ezequiel Bruni, “<a href="https://www.webdesignerdepot.com/2018/03/google-web-designer-reaches-3-0-beta/">Google Web Designer reaches 3.0 Beta</a>.”</p><h2>9 trucs pour optimiser une interface mobile</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705d3199b799a0276f019_1804-design-3.webp" alt="." title="."></p><p>L’auteur de cet article partage 9 trucs qu’on peut appliquer pour optimiser efficacement l’interface de nos applications mobiles. On peut supposer que ces trucs peuvent être adaptés au Web aussi.</p><p lang="fr" xml:lang="fr">⇨ <i>Fluid Blog</i>, Harnil Oza, “<a href="https://www.webdesignerdepot.com/2018/03/google-web-designer-reaches-3-0-beta/">9 tips to optimize the UI of mobile apps</a>.”</p><h2>PineGrow, un éditeur pour sites adaptatifs</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705d7bd0abd8d6edf1434_1804-design-4.webp" alt="." title="."></p><p>Pinegrow est un éditeur visuel qui fonctionne avec des fichiers HTML et CSS réguliers. Il a des caractéristiques uniques comme l’édition simultanée de plusieurs pages, une gamme complète de composants Bootstrap et Foundation, un rendu des styles CSS en temps réel avec le support SASS et LESS, un générateur de thème WordPress, l’intégration Atom et plus encore. Profitez de la version d’essai (7 jours) pour le tester !</p><p lang="fr" xml:lang="fr">⇨ <i><a href="https://pinegrow.com">PineGrow</a>.</i></p><h2>Le retour des interfaces skeuomorphes ?</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705daa0418b84dddaa41c_1804-design-5.webp" alt="." title="."></p><p>Article très intéressant qui expose qu’après des années de design minimaliste et froid, il ne faut plus avoir peur de recourir au skeuomorphisme (dont Apple avait abusé dans les premiers iOS), ne serait-ce que pour faire place au <i>fun</i>.</p><p lang="fr" xml:lang="fr">⇨ <i>Prototypr</i>, Michael Flarup, “<a href="https://blog.prototypr.io/bringing-back-skeuomorphic-design-d211cc1c22d2">Bringing back skeuomorphic design</a>.”</p><h2>Lunacy : des fichiers Sketch sur Windows</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705dd199b799a0276f79b_1804-design-6.webp" alt="." title="."></p><p><i>Lunacy</i> est un logiciel qui permet d’ouvrir et éditer des fichiers “.sketch” sur Windows. Sketch est une application assez puissante pour la conception d’interfaces utilisateurs, mais elle est destinée uniquement aux plateformes d’Apple. Le meilleur ? C’est une application gratuite !</p><p lang="fr" xml:lang="fr">⇨ “<a href="https://icons8.com/lunacy">Lunacy, Sketch for Windows</a>.”</p>

<h2>Recherche</h2><p>J’ai dès lors commencé une petite recherche sur Internet pour me mettre un peu plus au courant des possibilités qui m’étaient disponibles avec le Raspberry Pi. En cherchant pour des projets similaires, j’ai vu que différentes personnes ayant tenté l’expérience avaient approché le problème de différentes manières :</p><ol> <li>Certains utilisaient un système basé sur un détecteur de vibrations.</li> <li>Certains utilisaient un détecteur de luminosité pour vérifier l’état de l’indicateur de marche de la laveuse.</li> <li>D’autres tentaient de se brancher directement sur le circuit électronique de la laveuse.</li></ol><p>Il était hors de question que je risque de briser ma laveuse en bidouillant dans ses circuits électroniques, alors l’option 3 n’était pas pour moi. Ensuite, ceux qui utilisaient l’option 2 devaient souvent coller de l’appareillage à l’avant de la laveuse, ce qui me semblait bien inélégant.</p><p>Il me restait donc l’option 1, celle du détecteur de vibrations.</p><h3>Détecteur de vibrations</h3><p>Ici encore, j’avais un choix à faire parmi plusieurs possibilités. Il existe différentes technologies de détecteurs de vibrations : électromécanique, piézoélectrique, optique…</p><p>J’ai choisi un peu au hasard, je l’avoue, d’utiliser un détecteur de vibration électromécanique. Le composant principal d’un tel détecteur est l’interrupteur à senseur de vibrations SW-18010P.</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847059427510e29db883efa_sw18010p.png" alt="sw18010p" title="sw18010p"></p><p>Il s’agit d’un composant très simple, consistant en une tige métallique se situant au centre d’un ressort. Quand le composant vibre, le ressort fait contact avec la tige métallique, ce qui ferme le circuit électrique.</p><p>Afin d'adapter le signal généré par le composant aux niveaux de tension requis par les entrées numériques du Raspberry Pi, j'ai choisi d'utiliser un petit circuit de conditionnement du signal.</p><p>N’ayant pas conçu de circuits électriques depuis l’université, je me suis tourné une fois de plus vers Internet pour m’indiquer comment utiliser ce composant avec le Raspberry Pi. J’ai trouvé sur Amazon un petit module pour environ 5 dollars qui combinait le SW-18010P avec un comparateur de tension LM393.</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/68470597a0418b84ddda6d01_vibration_sensor_module_1.png" alt=""><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847059baa91262c5d2d1194_vibration_sensor_module_schema_0.jpg" alt=""></p><p>Ce module peut être directement alimenté par le Raspberry Pi (3.3 V), et son signal peut être directement fourni à l’entrée de celui-ci, ce qui répondait à mes besoins.</p><h3>Notifications « push »</h3><p>Le but premier du projet étant de me notifier à distance quand le cycle de lavage est terminé, je devais trouver une façon simple (autant que possible) d’envoyer des notifications à partir de mon Raspberry Pi jusqu’à mon téléphone. J’avais déjà utilisé un service de notifications <i>push</i> nommé <a href="https://pushover.net">Pushover</a> pour un projet antérieur, et je savais déjà comment il fonctionnait. J’ai donc décidé de réutiliser mon compte existant sur ce service pour le projet.</p><p>Il existe beaucoup de services concurrents. Certains demandent des frais mensuels pour avoir le droit d’envoyer un certain nombre de notifications push. Le service <i>Pushover</i> propose plutôt de payer une seule fois pour une application (pour téléphone intelligent/tablette, ou pour desktop), ce qui donne le droit à un certain nombre de notifications gratuites par mois. Pour mes besoins non-commerciaux, cela me semblait plus approprié.</p><p>Une fois mon compte créé sur le site, une clé d’utilisateur m’a été attribuée. Cette clé est nécessaire pour recevoir les notifications sur mes appareils. Ensuite, pour chaque application ou script que je crée et qui enverra des notifications, je dois créer une clé d’application. Pour ce projet, il a donc suffi que je crée une nouvelle clé d’application. Voici un aperçu de la page décrivant mon compte <i>Pushover</i> :</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847059da0418b84ddda7bfa_pushover.png" alt=""></p><p>L’envoi d’une notification à partir de Python consiste en l’envoi d’un message POST (HTTP) contenant ma clé d’usager, la clé d’application et le message à afficher.</p><h2>Conception du système</h2><p>Une fois le composant reçu, il m’a fallu penser à ce dont j’avais besoin pour produire ma solution complète. Je voulais :</p><ol> <li>Être capable d’indiquer au Raspberry Pi qu’un cycle de lavage commençait (pour éviter qu’il ne détecte des vibrations ambiantes comme étant des cycles de lavage).</li> <li>Avoir une certaine rétroaction visuelle confirmant le fonctionnement normal du système (puisqu’aucun écran ne sera connecté au Raspberry Pi).</li> <li>Recevoir une alerte sur mon téléphone mobile une fois le cycle de lavage terminé.</li></ol><p>En fouillant dans mon petit ensemble de composants, je trouvai ce dont j’avais besoin : un bouton-poussoir pour démarrer le cycle, et une DEL pour m’indiquer que le Raspberry Pi était bien en train de monitorer les vibrations de la laveuse.</p><p>Et comme l’ensemble de composants que j’ai reçu avec mon Raspberry Pi contenait un adaptateur WiFi, je n’avais aucun problème pour envoyer via Internet mes notifications.</p><h3>Familiarisation avec le Raspberry Pi</h3><p>La première étape à proprement parler était d’installer un système d’exploitation sur la carte micro SD de mon Raspberry Pi. Cela s’est avéré très facile : le site <a href="https://www.raspberrypi.org">raspberrypi.org</a> fournit le nécessaire pour créer une carte micro SD contenant le programme d’amorçage NOOBS qui permet de choisir un système d’exploitation à installer sur la carte. J’ai décidé d’installer le système d’exploitation Raspbian, puisqu’il était basé sur Linux et semblait contenir une bonne partie de ce dont j’aurais besoin pour mon projet dès le départ.</p><p>Une fois Raspbian installé, j’ai fait le tour de ce qui était installé avec le système pour avoir une idée des possibilités. J’ai vite vu que Python était préinstallé, ce qui me semblait être une plateforme de choix pour développer mon petit projet. Une courte recherche sur le web me permit de trouver la librairie RPi.GPIO qui permet de contrôler les différentes entrées et sorties numériques du Raspberry PI.</p><p>J’ai commencé par essayer de contrôler l’allumage d’une DEL pour me familiariser avec la librairie. Pour ce faire, j’ai connecté la DEL au Raspberry Pi avec une résistance en série pour fournir le courant approprié nécessaire à son allumage. Le circuit ressemblait à ceci :</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705a1a389942abe2a85bf_led-control.png" alt=""></p><p>La librairie RPi.GPIO étant très facile à utiliser, j’ai pu faire fonctionner mon petit prototype avec très peu de lignes de code :</p><pre><code>try: # importation des librairies nécessaires import RPi.GPIO as GPIO import timeexcept RuntimeError: print("Error loading RPi.GPIO")# définition de la broche de sortie connectée à la DELLED = 37def main(): try: # configuration des broches GPIO GPIO.setmode(GPIO.BOARD) GPIO.setup(LED, GPIO.OUT) while True: # après 2 secondes, allumer la DEL (en lui fournissant un GND) time.sleep(2) GPIO.output(LED, False) # après 2 secondes, éteindre la DEL (en lui fournissant 3.3V) time.sleep(2) GPIO.output(LED, True) except: print(“Quit on exception”) finally: GPIO.cleanup()if __name__ == '__main__' : main()</code></pre><p>Mon premier test étant concluant, je pouvais alors passer aux choses sérieuses.</p><h3>Circuit final</h3><p>Maintenant que je savais comment contrôler la librairie RPi.GPIO, il ne me restait plus qu’à intégrer dans mon circuit le bouton-poussoir pour démarrer le cycle de lavage, puis le détecteur de vibrations pour savoir quand le cycle est terminé.</p><p>Le bouton poussoir a une connexion normalement ouverte, qui se ferme (établit la connexion) quand on appuie sur le bouton. Une des terminaisons du bouton doit être connectée à l’alimentation (3.3v venant du RPi), et l’autre, à une des broches GPIO du RPi (j’ai choisi la broche 33 — GPIO 13). De cette façon, une pression du bouton-poussoir enverra un signal de 3.3v au RPi. Ceci n’est par contre pas suffisant pour assurer un bon fonctionnement du système. Le problème est qu’utilisé tel quel, lorsque le bouton-poussoir est en position normale (circuit ouvert), la broche 33, qui est configurée en tant qu’entrée, n’est plus connectée à rien. Elle se trouve donc en état flottant, soit ni à 3.3v (niveau haut), ni au GND (niveau bas). Il existe une façon matérielle de régler ce problème, soit en connectant entre la broche 33 et le GND une haute résistance (appelée « pull-down »). Cependant, le Raspberry Pi fournit déjà implicitement des résistances « pull-down » et « pull-up » sur chacune de ses broches GPIO. Il est donc possible de configurer ces broches à partir du logiciel pour les connecter à une résistance interne au RPi, ce que je vais faire plus bas.</p><p>Quant au détecteur de vibrations, son fonctionnement est on ne peut plus simple. Il suffit de l’alimenter à même le Raspberry Pi, puis de brancher sa broche de sortie à une des broches GPIO du RPi, configurée en tant qu’entrée.</p><p>Voici à quoi ressemble le circuit final :</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705a4a0418b84ddda80d1_circuit-final.png" alt=""><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705a7439a2a19ef26ae0c_circuit-final-schema.png" alt=""></p><p>Et le code :</p><pre><code>try: # Importation des librairies nécessaires import RPi.GPIO as GPIO import time import http.client, urllib # pour les notifications push import logging # pour le débogageexcept RuntimeError: print("Error loading RPi.GPIO")DELAYINSECS = 180 # Délai en secondes avant de déclarer le cycle terminé# Définition des broches d'entrées/sorties du RPiBUTTON = 33LED = 37VIBRATION = 31# Fonction qui envoie une notification push à l'aide de pushover.netdef pushdone(): conn = http.client.HTTPSConnection("api.pushover.net:443") conn.request("POST", "/1/messages.json", urllib.parse.urlencode({ "token": "", "user": "", "message": "Le lavage est prêt", }), { "Content-type": "application/x-www-form-urlencoded" }) conn.getresponse()def main(): try: # Configuration des broches GPIO GPIO.setmode(GPIO.BOARD) GPIO.setup(VIBRATION, GPIO.IN) GPIO.setup(LED, GPIO.OUT) # Une résistance "pull-down" doit être ajoutée à l'entrée du # bouton poussoir pour éviter d'avoir une valeur flottante à # l'entrée du RPi quand le bouton n'est pas en position fermée. GPIO.setup(BUTTON, GPIO.IN, pull_up_down=GPIO.PUD_DOWN) # Début de l'observation de tout front montant ou descendant sur # la broche connectée au détecteur de vibrations. L'argument # "bouncetime" permet d'ignorer l'effet de rebondissement causé # par le changement d'état soudain. GPIO.add_event_detect(VIBRATION, GPIO.BOTH, bouncetime=200) # Configuration d'un fichier journal de débogage sur le RPi logging.basicConfig(filename='/home/pi/washer.log', level=logging.INFO, format='%(asctime)s %(levelname)s:%(message)s') logging.info("****************************") stop = False logging.info("Entering main loop") # Boucle principale qui attendra que le bouton-poussoir soit # enfoncé pour indiquer le début du cycle, puis débutera la # vérification périodique de la vibration. while not stop: logging.info("Main loop iteration") GPIO.output(LED, True) # LED éteinte GPIO.wait_for_edge(BUTTON, GPIO.RISING) # attente d'un signal # du bouton poussoir logging.info(" Started") going = True GPIO.output(LED, False) # LED allumée # Boucle secondaire du programme qui vérifiera chaque # 3 minutes si une vibration a eu lieu durant ce délai. # Si la vérification ne rapporte pas de vibration pendant # 3 minutes, le cycle est considéré terminé. while going: logging.info(" Inner loop iteration") time.sleep(DELAYINSECS) logging.info(" Just slept %ds", DELAYINSECS) # Dispositif de contournement pour arrêter le cycle # courant manuellement en gardant le bouton-poussoir # appuyé durant la vérification. if GPIO.input(BUTTON): stop = True going = False # Fin du cycle si aucune vibration n'a été détectée. if not GPIO.event_detected(VIBRATION): logging.info(" Stopped vibrating") pushdone() going = False logging.debug(" End of iteration") except: logging.warning("Quit on exception") finally: logging.info("Cleaning up") GPIO.remove_event_detect(VIBRATION) GPIO.cleanup()if __name__ == '__main__': main()</code></pre><p>Une fois le code écrit dans un fichier texte (/home/pi/washer_cycle.py), il suffisait d’ajouter au script de lancement de Raspbian (/etc/rc.local) des instructions pour lancer le script en mode superutilisateur dès le démarrage du système (la librairie RPi.GPIO a quelques problèmes de compatibilité en mode utilisateur, d’où la nécessité d’exécuter la commande avec sudo).</p><ul> <li>À la fin de /etc/rc.local :</li></ul><pre><code>/home/pi/script_auto_run</code></pre><ul> <li>Dans /home/pi/script_auto_run :</li></ul><pre><code>#!/bin/bashecho "Autorun washer script"sudo /usr/bin/python3 /home/pi/washer_cycle.py</code></pre><h2>Test ultime</h2><p>Il est maintenant temps de tester l’appareil en situation réelle ! J’ai installé mon appareil sur le dessus de ma machine à laver, lancé un cycle de lavage et appuyé sur le bouton poussoir. La DEL s’est allumée pour m’indiquer le bon fonctionnement du script.</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705aaaa91262c5d2d1b53_laveuse.png" alt=""></p><p>Finalement, après environ une heure, j’ai bel et bien reçu une notification sur mon téléphone :</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705ad3af7acf9b68542f3_push.png" alt=""></p>

<h2>Principe de fonctionnement</h2><p>Une vanne à bille motorisée est installée sur la sortie d’eau chaude du chauffe-eau. Elle est accouplée avec un débitmètre électronique. Grâce à ce dernier, un petit dispositif à base de microcontrôleur surveille la consommation d’eau chaude et quand une certaine période d’utilisation continue est atteinte, il actionne à plusieurs reprises la fermeture et l’ouverture de l’électrovanne afin d’envoyer le message clair à la personne sous la douche que son temps autorisé est dépassé.</p><h2>Matériel requis</h2><p>Pour ce projet, j’ai choisi d’utiliser une carte Adafruit Huzzah ESP8266. Son prix est modeste et elle propose plein de fonctionnalités intéressantes à utiliser. En premier lieu, c’est une carte WiFi, ce qui autorise son contrôle à distance. Elle peut ainsi être initialisée comme point d’accès, permettant de s’y connecter et de la configurer pour qu’elle rejoigne le réseau de la maison. En second lieu, elle peut faire tourner un serveur Web et accepte les mises à jour distantes de son programme. Une fois que le programme (croquis/sketch) est installé, il n’est donc plus nécessaire de se connecter via son port USB pour le mettre à jour. Enfin, l’ESP8266 vient avec un régulateur de tension intégré. On peut abaisser le courant sortant de l’alimentation de la valve (5 V) à un niveau pouvant être géré par les broches GPIO.</p><ul> <li><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847054dbd0abd8d6edea992_mrshower-01.jpg" alt="Adafruit HUZZAH ESP8266." title="Adafruit HUZZAH ESP8266."> <a href="https://www.adafruit.com/product/2471">Adafruit HUZZAH ESP8266</a>.</li> <li style="clear: both;"><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/68470552086a552384a7693a_mrshower-02.jpg" alt="USB to TTL Serial Cable." title="USB to TTL Serial Cable."> <a href="https://www.adafruit.com/products/954">Câble USB vers TTL (série)</a>.</li> <li style="clear: both;"><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/68470555439a2a19ef264bca_mrshower-03.webp" alt="MISOL 3/4” DN20 Electronic Flow Meter." title="MISOL 3/4” DN20 Electronic Flow Meter."> Un <a href="https://www.aliexpress.com/popular/electronic-flow-meter.html">débitmètre électronique 3/4"</a> (AliExpress).</li> <li style="clear: both;"><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/68470558a0ed67c8acd072cd_mrshower-04.webp" alt="Motorized Ball Valve - CR02 wiring." title="Motorized Ball Valve - CR02 wiring.">Une <a href="https://www.aliexpress.com/popular/motorized-ball-valve.html">vanne à bille motorisée, 5 V, 3/4"</a> (AliExpress).</li> <li style="clear: both;"><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847055caa91262c5d2ce51c_mrshower-05b.webp" alt="5V 2A DC Power Supply." title="5V 2A DC Power Supply.">Une <a href="https://www.amazon.ca/s/ref=nb_sb_noss_2?url=search-alias%3Daps&amp;field-keywords=5+Volt+Power+Supply">alimentation 5 V</a> (Amazon).</li> <li style="clear: both; padding-top: 2em;">Une plaque d’essai (breadboard), du fil électrique, un boîtier de projet.</li></ul><h2>Schéma de câblage</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847055fbd0abd8d6edeb7ad_mrshower-06.webp" alt="Wiring Diagram." title="Wiring Diagram."></p><h2>Installation</h2><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684705628d3149e8b6b1d920_mrshower-07.webp" alt="Installation." title="Installation."></p><h2>Programme</h2><p>La logique est assez simple. Une routine d’interruption surveille les impulsions générées par le débitmètre. Ces impulsions sont accumulées et une minuterie, chaque minute, appelle une routine qui stocke les impulsions accumulées dans un tableau pouvant contenir jusqu’à 15 minutes de données. Si toutes les cellules du tableau contiennent une valeur autre que 0, le contrôleur ferme puis ouvre la vanne.</p><h2>Code source</h2><pre><code>// MrShower// Created by Patrick Walsh.//// Hot Water monitoring system installed at the intake of a hot water tank.// When hot water has been running for 15 minutes an electrical ball valve will cycle off and on every minute until usage ends.( Shower ) an elc//#include &lt;esp8266httpupdateserver.h&gt;#include &lt;esp8266mdns.h&gt;#include &lt;esp8266wifi.h&gt;#include &lt;ticker.h&gt; #include "WiFiManager.h"#define SKETCH_VERSION 1.0#define HAL_SENSOR_PIN 15 // Flowmeter Hal sensor is connected to this pin #define MONITOR_MINS 15 // Showers can last a maximum of 15 mins before warning kicks in#define SHOWER_SHUTOFF_WARNING_TIME 5.0 // Duration valve will be closed to warn time is up#define TIMER_PERIOD 60.0 // Period required to calculate RPM of Hal effect sensor#define VALVE_CLOSE_CTRL_PIN 12 // Relay connected to the electrical valve Open Wire #define VALVE_OPEN_CTRL_PIN 14 // Relay connected to the electrical valve Close Wire #define VALVE_TRANSIT_DELAY 2.0 // Time taken for valve to move from closed state ot open state//// Global variables//const char* g_HostName = "MrShower"; // DuhESP8266WebServer g_HttpServer(80); // Http server we will be providingESP8266HTTPUpdateServer g_HttpUpdater(false); // A OverTheAir update service. Http://MrShower.local/updateTicker g_MonitoringTimer; // Interupt timer used for counting minutesunsigned g_Rpms[MONITOR_MINS]; // History of rpms in the last "n" minutes// global variables accessed from ISR that need to be protectedvolatile bool g_FlashWater = false; // True if valve needs to be closed temporarilyvolatile unsigned g_HallSensorPulses = 0; // FlowMeter pulses that have occurred in the current minutevolatile bool g_WaterOn = false; // State of Valve //// Forward Declarations//void closeWaterValve();void openWaterValve();void onHallEffect();void onTimerTick();void webServerHandleRoot();void webServerHandleNotFound();void webServerHandleOpenCmd();void webServerHandleCloseCmd();void webServerHandleResetCmd();void webServerHandleCycleCmd();/////////////////////////////////////////////////////////////////////// Setup is called at initialization///////////////////////////////////////////////////////////////////////void setup(){ // Initialize Relay control pinMode(VALVE_CLOSE_CTRL_PIN, OUTPUT); pinMode(VALVE_OPEN_CTRL_PIN, OUTPUT); // Make sure the water valve is open. openWaterValve(); g_HallSensorPulses = 0; // Setup an Access point in order to allow network setup WiFiManager wifiManager; wifiManager.autoConnect( g_HostName ); WiFi.mode( WIFI_STA ); WiFi.softAPdisconnect( true ); // Establish a connection with our configured access point while( WiFi.waitForConnectResult() != WL_CONNECTED ) { WiFi.begin(); } // install web serv handlers. g_HttpServer.on("/", webServerHandleRoot ); g_HttpServer.onNotFound( webServerHandleNotFound ); g_HttpServer.on("/open", webServerHandleOpenCmd); g_HttpServer.on("/close", webServerHandleCloseCmd ); g_HttpServer.on("/reset", webServerHandleResetCmd ); g_HttpServer.on("/cycle", webServerHandleCycleCmd ); // Add OTA update service provided by library "/update" command g_HttpUpdater.setup( &amp;g_HttpServer ); g_HttpServer.begin( ); // Register web services we expose with Bonjour MDNS.begin( g_HostName ); MDNS.addService( "http", "tcp", 80 ); // Clear the array of rpms memset( g_Rpms, 0, sizeof( g_Rpms ) ); // Attach Hall Sensor to HAL_SENSOR_PIN. // ISR called when voltage rises to match one // revolution of the flowmeter turbine attachInterrupt( HAL_SENSOR_PIN, onHallEffect, RISING ); // Start a timer which will treat the reading of the hall sensor and calculate RPM g_MonitoringTimer.attach( TIMER_PERIOD, onTimerTick );}/////////////////////////////////////////////////////////////////////// Code in the loop method will be run repeatedly/////////////////////////////////////////////////////////////////////void loop() { // Allow webserver to process queue of requests sent to it. g_HttpServer.handleClient(); if( g_FlashWater ) { // Need to cycle the hot water valve closeWaterValve( ); delay( SHOWER_SHUTOFF_WARNING_TIME * 1000 ); openWaterValve( ); g_FlashWater = false; }}/////////////////////////////////////////////////////////////////////// Close water valve by controlling 2 relays connected// to ball valve motor/////////////////////////////////////////////////////////////////////void closeWaterValve(){ digitalWrite( VALVE_OPEN_CTRL_PIN, HIGH ); digitalWrite( VALVE_CLOSE_CTRL_PIN, LOW ); delay( VALVE_TRANSIT_DELAY * 1000 ); digitalWrite(VALVE_CLOSE_CTRL_PIN, HIGH ); g_WaterOn = false;}/////////////////////////////////////////////////////////////////////// Open water valve by controlling 2 relays connected// to ball valve motor/////////////////////////////////////////////////////////////////////void openWaterValve(){ digitalWrite( VALVE_CLOSE_CTRL_PIN, HIGH ); digitalWrite( VALVE_OPEN_CTRL_PIN, LOW ); delay( VALVE_TRANSIT_DELAY * 1000 ); digitalWrite( VALVE_OPEN_CTRL_PIN, HIGH ); g_WaterOn = true;}/////////////////////////////////////////////////////////////////////// Interrupt routine called when FlowMeter is generating Hal Effect pulses./////////////////////////////////////////////////////////////////////void onHallEffect(){ // Increase the number of pulses detected by the HallEffect sensor // of the water flowmeter g_HallSensorPulses++;}/////////////////////////////////////////////////////////////////////// Timer-driven callback routine called every minute./////////////////////////////////////////////////////////////////////void onTimerTick(){ // At every clock tick, once per minute, interrupts temporarily disabled while // accumulated pulses generated by flowmeter sensor are read and reset. This gives us a rpm value. cli( ); // disable interupts long l_rpm = g_HallSensorPulses; // copy rpm value locally g_HallSensorPulses = 0; // sensor reading done for this minute sei( ); // reenable interrupts // shift the content of the array to the right 1 memmove( &amp;g_Rpms[1], &amp;g_Rpms[0], sizeof( g_Rpms ) - sizeof( g_Rpms[0] ) ); // Set the latest reading in array g_Rpms[0] = l_rpm; int l_numUsedTicks = 0; for( int idx = 0; idx &lt; MONITOR_MINS; idx++ ) { if( g_Rpms[idx] ) { l_numUsedTicks++; } } // Do we need to flash hot water if( l_numUsedTicks &gt;= MONITOR_MINS &amp;&amp; !g_FlashWater ) { g_FlashWater = true; // Set last element of array to 0 to delay next hot water valve cycle by one minute g_Rpms[ MONITOR_MINS - 1 ] = 0; }}/////////////////////////////////////////////////////////////////////// Web Server section/////////////////////////////////////////////////////////////////////void webServerHandleRoot() { String message; message += g_HostName; message += "Version "; message += SKETCH_VERSION; message += " \n"; message += "FlowMeter revolutions this minute "; message += g_HallSensorPulses; message += " \n"; message += g_WaterOn == true ? "Valve is Opened" : "Valve is Closed"; message += " : "; for(int idx = 0; idx &lt; MONITOR_MINS; idx++) { message += g_Rpms[idx]; message += " "; } message += " \n"; message += "Commands : /open /close /update /cycle /reset\n"; g_HttpServer.send(200, "text/plain", message ); }/////////////////////////////////////////////////////////////////////// Unknown page requested/////////////////////////////////////////////////////////////////////void webServerHandleNotFound() { String message = "File Not Found\n\n"; message += "URI: "; message += g_HttpServer.uri(); message += "\nMethod: "; message += (g_HttpServer.method() == HTTP_GET) ? "GET" : "POST"; message += "\nArguments: "; message += g_HttpServer.args(); message += "\n"; for (uint8_t i = 0; i &lt; g_HttpServer.args(); i++) { message += " " + g_HttpServer.argName(i) + ": " + g_HttpServer.arg(i) + "\n"; } g_HttpServer.send(404, "text/plain", message);}/////////////////////////////////////////////////////////////////////// Open requested/////////////////////////////////////////////////////////////////////void webServerHandleOpenCmd(){ g_HttpServer.send(200, "text/plain", "Opening Valve"); openWaterValve();} /////////////////////////////////////////////////////////////////////// Close requested/////////////////////////////////////////////////////////////////////void webServerHandleCloseCmd(){ g_HttpServer.send(200, "text/plain", "Closing Valve"); closeWaterValve();}/////////////////////////////////////////////////////////////////////// Reset requested/////////////////////////////////////////////////////////////////////void webServerHandleResetCmd(){ memset( g_Rpms, 0, sizeof( g_Rpms ) ); openWaterValve(); g_HttpServer.send(200, "text/plain", "System was reset" );}/////////////////////////////////////////////////////////////////////// Cycle the valve off and on/////////////////////////////////////////////////////////////////////void webServerHandleCycleCmd(){ g_HttpServer.send(200, "text/plain", "Cycling water valve" ); // Set the Flash water variable to true. // The loop routine, when true, will cycle the water valve, g_FlashWater = true;}&lt;/ticker.h&gt;&lt;/esp8266wifi.h&gt;&lt;/esp8266mdns.h&gt;&lt;/esp8266httpupdateserver.h&gt;</code></pre><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847056627510e29db881d94_mrshower-08.png" alt="Web Server." title="Web Server."></p><p style="display: block;padding: 0.5em 2em 0.7em 2em;margin: 1em 0 2em 0;background-color: #fff;border-radius:4px;box-shadow: 1px 7px 15px 0 rgba(47,57,64,0.2);text-align: center;"><b><i>Le saviez-vous ?</i></b><br>Les équipes de Spiria ont une longue expérience en <a href="https://www.spiria.com/fr/services/developpement-axe-performance/developpement-logiciel-sur-mesure/">développement de logiciel sur mesure</a> et peuvent vous aider sur tout projet d’envergure.</p><h2>Idées d'améliorations</h2><ul> <li>Enregistrer la consommation d’eau chaude par mois ou par année.</li> <li>Fournir une interface utilisateur pour faciliter la configuration (temps de douche autorisé, temporisation des cycles de la vanne).</li> <li>Ajouter un capteur d’eau au sol pour détecter les fuites accidentelles du chauffe-eau.</li> <li>Prise en charge d’Apple Homekit ou d’un autre réseau domotique.</li></ul>

<div><p>Chez Spiria, de nombreuses équipes travaillent sur des projets variés, ayant souvent recours à des technologies différentes. Pour permettre à tout un chacun d’avoir une vision globale de l’activité de l’entreprise et de partager ses savoirs et expériences, nous organisons plusieurs fois par an un événement interne baptisé la “<i>Grande foire</i>”.</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847078fa0418b84dddbd66d_foire-savoir-03.webp" style="width:800px; border-style:solid; border-width:1px;" alt="Grande foire, Spiria." title="Grande foire, Spiria."></p><h2>Les objectifs</h2><p>Il s’agit que chacun découvre sur quoi ses collègues travaillent au quotidien, de manière à connaître plus que juste le nom d’un client ou d’un projet. C’est aussi l’occasion d’un échange d’expériences : les technologies utilisées, les stratégies choisies, les défis rencontrés, les solutions trouvées, etc. Chefs de projets, développeurs, intégrateurs, designers, tous participent s’ils le souhaitent.</p><p>Dans un second temps, l’activité offre l’occasion aux employés de mieux se connaître, “se voir, se comprendre”, et d’avoir une meilleure vision de l’entreprise dans son ensemble.</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/68470792a0ed67c8acd16fae_foire-savoir-04.webp" style="width:800px; border-style:solid; border-width:1px;" alt="Grande foire, Spiria." title="Grande foire, Spiria."></p><h2>En pratique</h2><p>La <i>Grande foire</i> a lieu dans une grande salle du sous-sol, dévolue ordinairement à d’importantes activités des employés : ping-pong, foosball-babyfoot, billard… Les projets sont présentés à l’heure de dîner et un repas est offert à tous par l’entreprise. C’est ainsi à la fois un moment d’information, d’échange et de détente, et en rien une séance professorale, formelle et ennuyeuse. Chacun est libre de venir ou pas, et il n’y a aucun parcours imposé. Le succès repose sur la curiosité, l’appétit d’apprendre et de découvrir.</p><p>Concrètement, environ six projets en cours ou récemment achevés sont choisis en collaboration avec les équipes, et nous installons un kiosque pour chaque projet présenté : une table d’exposition, une affiche résumant le projet et détaillant les participants. Les gens font le tour des kiosques, ont le droit à une courte présentation pas très formelle de quelques minutes, et pour le reste, ça fonctionne beaucoup sur le mode questions/réponses, selon l’intérêt et le niveau d’expertise des visiteurs.</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/684707968bcc8a6be019a48a_foire-savoir-05b.webp" style="width:800px; border-style:solid; border-width:1px;" alt="Grande foire, Spiria." title="Grande foire, Spiria."></p><h2>Évaluation</h2><p>Après l’événement, nous envoyons un sondage anonyme en ligne à tous les employés pour recueillir leurs impressions. Il s’agit de pouvoir, si le besoin s’exprime, s’ajuster et améliorer l’événement. C’est grâce à ce sondage des visiteurs que nous avons pu apporter des modifications quant à l’organisation générale, au nombre de projets présentés simultanément, à la disposition des kiosques dans la salle, etc. Nous sommes dans un processus d’amélioration continue.</p><p>Les présentateurs sont aussi invités à faire part de leur bilan de l’expérience, ce qu’ils ont ressenti, à nous dire s’ils sont prêts à la refaire dans le cadre d’un autre projet. Avec ces retours, nous avons ainsi constaté qu’il est toujours préférable d’avoir deux personnes à présenter un même projet qu’une toute seule.</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/68470799a0ed67c8acd174eb_foire-savoir-06.webp" style="width:800px; border-style:solid; border-width:1px;" alt="Grande foire, Spiria." title="Grande foire, Spiria."></p><h2>Une réussite</h2><p>Avec le sondage des employés, nous avons pu confirmer que l’organisation de l’événement valait la peine, car tout le monde a appris sur au moins un à deux projets, et plus de la moitié, sur plus de trois projets sur les six présentés. Ce résultat dépend à la fois du temps passé à voir l’événement, et du fait que certains projets peuvent être déjà connus pour y avoir travaillé. Nous avons aussi reçu de nombreux commentaires positifs, saluant l’organisation et l’intérêt de la manifestation. Et si l’on devait voir le meilleur signe de succès, c’est que la plupart des gens sont motivés à venir assister à chaque édition, sans qu’on leur impose d’y venir. Ils trouvent ça tout simplement intéressant.</p><p>La <i>Grande foire</i> permet aux gens de se rencontrer dans un contexte différent, et de rencontrer ceux avec lesquels ont a ordinairement moins de contacts, travaillant sur des projets et/ou disciplines éloignés. C’est aussi une source d’inspiration, de “pollinisation croisée” des savoirs : les gens en sortent avec des techniques et bonnes idées qu’ils pourront éventuellement utiliser dans leurs projets en cours ou à venir. Si une personne tombe sur un projet qui l’intéresse particulièrement, elle peut toujours avoir une discussion plus approfondie avec l’équipe qui a réalisé le projet.</p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847079ca0ed67c8acd176f0_foire-savoir-02.webp" style="width:800px; border-style:solid; border-width:1px;" alt="Grande foire, Spiria." title="Grande foire, Spiria."></p><p><img src="https://cdn.prod.website-files.com/67c06f07cfba9b0adb43e16c/6847079fa389942abe2baa9c_foire-savoir-00.webp" style="width:800px; border-style:solid; border-width:1px;" alt="Grande foire, Spiria." title="Grande foire, Spiria."></p>

<div><p>De nos jours, faire carrière en tant que développeur logiciel est chose possible, même sans avoir de diplôme spécifique en poche. Bien que cette profession nécessite des compétences avancées, devenir développeur ne requiert pas nécessairement d’accréditation ou d’examen particulier. Bien entendu, les programmeurs diplômés ont généralement plus de facilité à entrer sur le marché du travail, car ils représentent un moindre risque pour les entreprises. Cependant, certains points clés révélés dans cet article pourront vous aider à faire valoir votre place sur le marché, que vous convoitiez un poste en entreprise ou en tant que travailleur autonome.</p><h2>1. Savoir travailler en équipe</h2><p>Cela paraît peut-être hors de propos de placer cette compétence en numéro 1 de notre liste, mais détrompez-vous ! Rares sont les développeurs qui travaillent seuls. Au contraire, l’environnement de travail classique demande de résoudre des tâches complexes, tout en prenant en charge des responsabilités parfois importantes, aussi bien que partagées. Savoir s’intégrer et apporter une réelle compétence, tant technique que sociale, au sein d’une équipe de travail est donc un atout considérable pour le futur développeur.</p><h2>2. Avoir une connaissance élargie des différents langages de programmation</h2><p>L’idéal dans ce domaine est de connaître au moins un langage de programmation pour chaque modèle de développement prédominant. Mais vous mettrez encore plus de chances de votre côté en maîtrisant aussi un autre type de langage. Pensez au langage procédural, orienté objet, fonctionnel, déclaratif ou encore multimodèle comme Python ou Java pour parfaire votre champ d’expertise et sortir du lot.</p><h2>3. Devenez expert en sécurité logicielle</h2><p>Savoir développer un logiciel performant est certes essentiel, mais cela ne garantit en rien la sécurité. Or, la question de la sécurisation devient de plus en plus importante. Développez vos connaissances en matière de sécurité logicielle par l’intermédiaire d’organismes caritatifs comme OWASP <i>(the Open Web Application Security Project)</i>, qui se focalise sur l’amélioration de la sécurité des logiciels.</p><h2>4. Maîtrisez structures de données et algorithmes</h2><p>En tant que développeur logiciel, il est courant d’avoir à apporter des corrections aux codes, ou bien de devoir créer des solutions individualisées pour répondre aux besoins spécifiques de vos clients. Savoir analyser le code du logiciel sur lequel vous travaillez vous donnera une flexibilité et une polyvalence essentielle dans le métier. L’ouvrage <i>Coders at Work</i> peut vous servir de point de départ intéressant pour étoffer vos connaissances et vous construire une vision du monde de la programmation et de votre futur métier.</p><h2>5. Apprenez à comprendre votre interlocuteur</h2><p>Simple n’est-ce pas ? Et pourtant, nombreux sont les développeurs qui ne voient pas leur carrière décoller à cause de leur difficulté à comprendre les besoins du client. Or, comment mettre au point et implémenter un bon logiciel sans avoir une compréhension approfondie de son usage et des objectifs du client avec lequel vous travaillez ? Prendre le temps de cerner tous les aspects de l’entreprise vous permettra de développer logiciels, designs, tests et implémentations plus performants et de meilleure qualité.</p><p>Devenir développeur logiciel est à votre portée, si tant est que vous ayez les qualités et la motivation nécessaire pour prendre le temps et fournir les efforts pour maîtriser votre passion.</p>