Les BricodeursJekyll2024-02-06T07:40:49+00:00https://lesbricodeurs.fr/Les Bricodeurshttps://lesbricodeurs.fr/salut@lesbricodeurs.frhttps://lesbricodeurs.fr/articles/vers-un-euro-numerique-ouvert2022-07-03T09:30:00+00:002022-07-03T09:30:00+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>La Commission Européenne vient de publier le projet de règlement de l’euro numérique. Ce projet, initié par la Banque centrale européenne (BCE), promet d’offrir un moyen de paiement numérique public à tous les citoyens de la zone euro. Pourtant, il suscite de nombreux débats quant à sa pertinence, la manière dont il devrait être conçu et sa mise en œuvre. Le projet de législation parle du potentiel recours à des “normes ouvertes” sans évoquer un code ouvert. Chez les bricodeurs, nous pensons que c’est pourtant la seule façon de garantir la confiance, l’ouverture et la pérennité du projet</p>
<h1 id="garantir-la-confiance">Garantir la confiance</h1>
<p>L’un des principaux avantages de l’open source est l’établissement d’un rapport de confiance par la transparence. En rendant le code source de l’euro numérique accessible à tous, la BCE permet de s’assurer que le fonctionnement de l’euro numérique correspond bien aux annonces.</p>
<p>En particulier, le projet d’euro numérique met en avant la protection de la vie privée. Plusieurs mesures législatives sont proposées pour limiter l’utilisation des données par les prestataires de paiement, les banques centrales et leurs prestataires. La conception du système est sans doute encore à affiner. Par exemple, il semble que pour contrôler la fraude, les prestataires devront accéder plus que les données énumérées. Par ailleurs, côté banque centrale, on jure qu’il n’y aura pas de données personnelles, mais un identifiant unique. Ce qui est un peu équivalent. Sans code ouvert, il n’y a aucun contrôle citoyen sur les affirmations de bonne volonté et aucun moyen de comprendre le détail de la conception.</p>
<p>L’open source permet aussi une vérification indépendante du code. Les développeurs et les experts en sécurité pourront examiner en détail le fonctionnement de l’euro numérique pour s’assurer de sa fiabilité. Comme dit le fondateur de Linux: “avec suffisamment de paires d’yeux, tous les bugs sont évidents. Même les projets des géants de l’internet dépendent du travail d’acteurs indépendants pour renforcer leur sécurité.</p>
<p>Enfin, l’usage de l’argent public collecté auprès de tous par les impôts doit bénéficier à tous et être auditable. En France, l’article 14 de la déclaration des droits de l’homme et du citoyen de 1789 rappelle que tous les citoyens doivent pouvoir suivre l’emploi de la contribution publique. Comme le rappelle la campagne “Argent public = Code public” de la Free Software Foundation, de même que les décrets et circulaires documentent le fonctionnement de l’administration, le code est la seule façon de documenter son action numérique.</p>
<h1 id="assurer-louverture">Assurer L’ouverture</h1>
<p>Il y a une notion de principe et d’efficacité à ouvrir le code. En adoptant une approche open source, la BCE faciliterait l’intégration de l’euro numérique dans les services financiers existants et les infrastructures technologiques. Les développeurs tiers seraient en mesure de construire des applications, des portefeuilles numériques et des services financiers compatibles avec l’euro numérique en utilisant les spécifications et les interfaces ouvertes. C’est connu en développement logiciel, la meilleure documentation est le code. Cela encouragerait l’innovation et l’émergence d’un écosystème dynamique autour de l’euro numérique offrant aux utilisateurs un large choix d’options pour accéder et utiliser la monnaie numérique de manière pratique et sécurisée.</p>
<p>Au-delà même du projet lui-même, l’euro numérique deviendrait un vecteur pour encourager les standards ouverts et les bonnes pratiques logiciels. A l’heure où la cybersécurité des logiciels est un enjeu clé de l’Union Européenne, un projet de référence ne peut que contribuer à renforcer l’écosystème logiciel européen.</p>
<p>C’est aussi éviter de réinventer la roue pour des projets similaires. De même que les projets d’infrastructures de marchés financiers bénéficient aujourd’hui des codes des projets blockchains, un euro numérique ouvert bénéficiera à d’autres projets et potentiellement à d’autres pays. Un facteur important de soft-power donc.</p>
<h1 id="de-quel-open-source-parle-t-on-pour-le-projet-deuro-numérique">De quel open source parle t-on pour le projet d’Euro numérique?</h1>
<p>Pour le projet d’euro numérique, lorsque l’on parle d’open source, il y a différents composants:</p>
<ul>
<li>Code des infrastructures de la BCE : Il s’agit du code source des infrastructures techniques et logicielles utilisées par la Banque centrale européenne (BCE) pour mettre en œuvre l’euro numérique. Cela peut inclure les systèmes de traitement des transactions, les protocoles de communication, les mécanismes d’audition des fraudes, etc.</li>
<li>Code du “front-end” de référence : Dans le cadre de l’euro numérique, un service “front-end” de référence est prévu, comprenant vraisemblablement une interface, le back-end correspondant et plusieurs services. Ce “front-end” serait utilisé par des prestataires pour permettre aux utilisateurs de stocker et de gérer leurs euros numériques.</li>
</ul>
<p>Dans ces deux cas, ces composants étant sous le contrôle de la BCE, il suffit d’une volonté politique pour faire un projet open source. Additionellement, il faut imaginer qu’il y aura de nombreux services auxiliaires dont l’importance devrait être évaluée. Si le code open source ne permet pas d’au moins comprendre le fonctionnement du service, il risque d’être d’utilité limitée.</p>
<p><a href="https://lesbricodeurs.fr/articles/vers-un-euro-numerique-ouvert/">Vers un euro numérique ouvert?</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 03 Jul 2022.</p>
https://lesbricodeurs.fr/articles/Comment-installer-npm-proprement2022-06-03T11:57:12+00:002022-06-03T11:57:12+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p><img src="https://lesbricodeurs.fr/images/npm2.png" alt="npm" class="pull-right" /></p>
<h1 id="mais-quest-que-npm">Mais qu’est que npm?</h1>
<p>Npm est le gestionnaire de paquets de Node.js. Node.js est un serveur, basé sur le moteur V8 de chrome qui permet d’interpréter du code JavaScript coté serveur. Grace à <code class="language-plaintext highlighter-rouge">npm</code> vous pouvez installer des paquets et leurs dépendances.</p>
<p>Aujourd’hui <code class="language-plaintext highlighter-rouge">node</code> et <code class="language-plaintext highlighter-rouge">npm</code> sont aussi utilisés par les développeurs webs comme suite d’outils de développement. En effet, beaucoup de dévelopeurs web développent des outils en javascript et les publient sur <a href="https://www.npmjs.com/">npmjs</a>.</p>
<h1 id="installation">Installation</h1>
<p>Pour installer node et npm, il suffit d’ouvrir un terminal et de taper une des commandes suivantes. Nous vous recommandons d’installer la dernière version supportée à long terme (LTS). La version 18 est déjà prête.</p>
<h3 id="pour-les-systèmes-linux">Pour les systèmes Linux</h3>
<ul>
<li>Pour Debian, Ubuntu et ses dérivés:
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>curl <span class="nt">-fsSL</span> https://deb.nodesource.com/setup_18.x | <span class="nb">sudo</span> <span class="nt">-E</span> bash -
<span class="nb">sudo </span>apt <span class="nb">install</span> <span class="nt">-y</span> nodejs
</code></pre></div> </div>
</li>
<li>Pour les distributions de la famille Red Hat, en tant qu’utilisateur:
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>curl <span class="nt">-fsSL</span> https://rpm.nodesource.com/setup_18.x | <span class="nb">sudo </span>bash -
</code></pre></div> </div>
</li>
<li>Pour les autres distributions, consulter <a href="https://nodejs.org/en/download/package-manager/">cette page</a></li>
</ul>
<h3 id="sous-macos">Sous macOS</h3>
<ul>
<li>Si vous utilisez homebrew, un gestionaire de paquets:
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>brew <span class="nb">install </span>node
</code></pre></div> </div>
</li>
<li>
<p>Vous pouvez l’installer graphiquement en téléchargent l’installateur sur le <a href="https://nodejs.org/en/download/">site</a></p>
</li>
<li>Pour les plus aventureux, vous pouvez utiliser la ligne de commande suivante :
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>curl <span class="s2">"https://nodejs.org/dist/latest/node-</span><span class="k">${</span><span class="nv">VERSION</span><span class="k">:-</span><span class="si">$(</span>wget <span class="nt">-qO-</span> https://nodejs.org/dist/latest/ | <span class="nb">sed</span> <span class="nt">-nE</span> <span class="s1">'s|.*>node-(.*)\.pkg</a>.*|\1|p'</span><span class="si">)</span><span class="k">}</span><span class="s2">.pkg"</span> <span class="o">></span> <span class="s2">"</span><span class="nv">$HOME</span><span class="s2">/Downloads/node-latest.pkg"</span> <span class="o">&&</span> <span class="nb">sudo </span>installer <span class="nt">-store</span> <span class="nt">-pkg</span> <span class="s2">"</span><span class="nv">$HOME</span><span class="s2">/Downloads/node-latest.pkg"</span> <span class="nt">-target</span> <span class="s2">"/"</span>
</code></pre></div> </div>
</li>
</ul>
<h3 id="sous-windows">Sous Windows</h3>
<ul>
<li>
<p>Depuis Windows 10, vous pouvez utiliser le <a href="https://docs.microsoft.com/fr-FR/windows/wsl/install-win10">sous-système Windows pour Linux (WSL)</a> qui vous permet d’utiliser l’ensemble des commandes Linux (Ubuntu par défaut).</p>
</li>
<li>
<p>De même, vous pouvez utiliser une image virtuelle comme <a href="https://cryptotux.org/">cryptotux</a> qui comprend l’ensemble des utilitaires utiles au développement dont node.js.</p>
</li>
<li>
<p>Vous pouvez également télécharger le <a href="https://nodejs.org/en/download/">fichier d’installation</a></p>
</li>
</ul>
<h2 id="installer-le-global-localement">Installer le global localement</h2>
<p>Quand vous installez des paquets via npm, si vous ne précisez rien, ils seront installés dans le dossier actuel, généralement du projet en cours. Certains paquets, notamment les outils doivent s’installer globalement avec l’option <strong>-g</strong>. Pour éviter que ceux-ci s’installent dans un dossier système et exigent l’accès administrateur (<em>“root”</em> en anglais), voici une astuce:</p>
<ul>
<li>Créer un dossier dédié
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">mkdir</span> <span class="nt">-p</span> ~/.npm-global
</code></pre></div> </div>
</li>
<li>Configurer npm pour utiliser ce dossier
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm config <span class="nb">set </span>prefix <span class="s1">'~/.npm-global'</span>
</code></pre></div> </div>
</li>
<li>Ajouter la ligne suivante à votre fichier .profile, .zshrc ou .bashrc
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">export </span><span class="nv">PATH</span><span class="o">=</span>~/.npm-global/bin:<span class="nv">$PATH</span>
</code></pre></div> </div>
</li>
<li>Mettre à jour les variables
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">source</span> ~/.profile
</code></pre></div> </div>
</li>
</ul>
<h1 id="utilisation">Utilisation</h1>
<h3 id="installer-un-paquet">Installer un paquet</h3>
<p>Globalement vous avez trois façon d’installer un paquet via npm :</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">npm install -g XYZ</code> Vous permet d’installer une nouvelle commande. Meteor, yarn, yeoman par exemple.</li>
<li><code class="language-plaintext highlighter-rouge">npm install XYZ</code> Vous permet d’ajouter un paquet au projet en cours. Il est automatiquement ajouté au fichier package.json dans le dossier en cours</li>
<li><code class="language-plaintext highlighter-rouge">npm install --save-dev XYZ</code> Vous permet d’ajouter un paquet au projet en cours qui servira uniquement pendant le developpement du projet</li>
</ul>
<h3 id="lancer-un-projet">Lancer un projet</h3>
<p>Quand vous récupérez un projet, généralement vous devrez lancer les commandes suivantes:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">npm install</code> Installe toutes les dépendances indiquées dans le fichier package.json</li>
</ul>
<p>Les commandes suivantes sont souvent définies dans package.json, le nom peut varier:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">npm start</code> Généralement le script complet pour compiler et lancer le projet</li>
<li><code class="language-plaintext highlighter-rouge">npm run dev</code> Pour lancer le projet en version développement</li>
<li><code class="language-plaintext highlighter-rouge">npm run build</code> Pour lancer la construction du site.</li>
</ul>
<h2 id="quelques-paquets-sympas">Quelques paquets sympas</h2>
<p><strong>tldr</strong> est un utilitaire pour avoir des informations sur les usages le plus courant d’un programme en ligne de commande. Vous pouvez essayer avec :</p>
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code>npm <span class="nb">install</span> <span class="nt">-g</span> tldr
tldr npm
</code></pre></div></div>
<p><em>Note : npm i -D == npm install –save-dev</em></p>
<p><strong>yarn</strong> et <strong>pnpm</strong> sont des gestionnaires de paquets node.js alternatifs, plus efficaces sur certains aspects.</p>
<p><strong>speed-test</strong> est un outil en ligne de commande pour tester votre connexion internet.</p>
<p><strong>yo (yeoman)</strong> est un outil pour préparer le dossier pour un nouveau projet.</p>
<h2 id="raccourcis-pratiques">Raccourcis pratiques</h2>
<ul>
<li><code class="language-plaintext highlighter-rouge">npm i</code> == <code class="language-plaintext highlighter-rouge">npm install</code></li>
<li><code class="language-plaintext highlighter-rouge">npm i -D</code> == <code class="language-plaintext highlighter-rouge">npm install --save-dev</code></li>
</ul>
<h2 id="gestionnaire-de-version">Gestionnaire de version</h2>
<p>Si vous utilisez fréquemment node, un gestionnaire de version de node.js pprmet d’installer et alterner entre les versions. Vous trouverez plus d’informations sur <code class="language-plaintext highlighter-rouge">nvm</code> par <a href="https://github.com/creationix/nvm/blob/master/README.md">ici</a>. Merci de nous l’avoir signalé <a href="https://twitter.com/le_mulot/status/905102883431088128">sur twitter</a>!</p>
<p>Voilà. Si vous avez des questions, écrivez-nous ! <a href="https://twitter.com/lesbricodeurs">@LesBricodeurs</a></p>
<p><em>Article initialement publié le 5 septembre 2017 et mis à jour en le 3 juin 2022</em></p>
<p><a href="https://lesbricodeurs.fr/articles/Comment-installer-npm-proprement/">Comment installer npm proprement</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 03 Jun 2022.</p>
https://lesbricodeurs.fr/articles/la-moderation-des-reseaux-sociaux2021-01-01T09:30:00+00:002021-01-01T09:30:00+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>Le 6 janvier 2020, une foule a envahi le siège du parlement américain, le Capitole, tandis que se déroulait la certification de l’élection de Joe Biden. Vu comme l’instigateur du mouvement, notamment par son action sur les réseaux sociaux, plusieurs entreprises dont Facebook et Twitter ont décidé de suspendre le compte de Donald Trump suite à des publications appelant au calme tout en soutenant la légitimité du mouvement.</p>
<p>Cette décision a suscité l’émoi en France, tant elle semble poser des questions de libertés numériques fondamentales. Cette décision individuelle propre au contexte américain invite à travailler sur le problème de fond de la modération algorithmique et éditoriale des réseaux sociaux.</p>
<h1 id="le-problème-du-pouvoir-des-entreprises-gestionnaires-de-réseaux-sociaux-est-quotidien">Le problème du pouvoir des entreprises gestionnaires de réseaux sociaux est quotidien</h1>
<p>Tous les jours, ces plateformes par leurs algorithmes choisissent les contenus mis en avant. Le critère principal est connu depuis longtemps : l’engagement. Si un contenu suscite une émotion, en particulier la colère, il favorise l’engagement sur la plateforme et donc le temps passé, la collecte d’information et l’affichage de publicités ciblées.</p>
<p>Ces algorithmes ont un rôle actif<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup> et ils ont contribué ces dernières années à diviser l’opinion. Par exemple 64% de ceux qui ont rejoint des groupes extrémistes l’ont fait sur la base de recommandations de Facebook<sup id="fnref:2" role="doc-noteref"><a href="#fn:2" class="footnote" rel="footnote">2</a></sup>. Cette division de l’information a probablement contribué au Brexit et à l’élection de Donald Trump, mais surtout à de véritables massacres comme dans le cas des Rohingyas en Birmanie<sup id="fnref:3" role="doc-noteref"><a href="#fn:3" class="footnote" rel="footnote">3</a></sup>.</p>
<p>Quant aux suspensions de contenu ou de compte, elles peuvent avoir des conséquences sur la liberté d’expression et les entreprises. Amazon, Facebook, Twitter, Instagram sont des plateformes essentielles pour beaucoup d’individus, d’organisations et d’entreprises. Leurs suspensions, souvent sans préavis ni recours effectifs, ont des conséquences<sup id="fnref:4" role="doc-noteref"><a href="#fn:4" class="footnote" rel="footnote">4</a></sup>.</p>
<h1 id="la-liberté-dexpression-sur-les-plateformes-aux-états-unis">La liberté d’expression sur les plateformes aux États-Unis</h1>
<p>Les plateformes sont protégées des conséquences de leur modération en droit civil par la section 230<sup id="fnref:5" role="doc-noteref"><a href="#fn:5" class="footnote" rel="footnote">5</a></sup> issue du Communications Decency Act de 1996. Concrètement, vous ne pouvez pas demander des dommages et intérêts pour les effets de leur modération. Cela leur permet à chaque plateforme de trouver le cadre approprié à son public et usage.</p>
<p>Facebook et Twitter ont adopté plutôt une approche légère, devenant ainsi effectivement des places publiques à idées. La section 230 retient une limite, les crimes fédéraux, comme par exemple la pornographie infantile et le terrorisme. Ces plateformes ont travaillé par exemple à affaiblir la propagande d’ISIS<sup id="fnref:6" role="doc-noteref"><a href="#fn:6" class="footnote" rel="footnote">6</a></sup>.</p>
<p>Dans le cas de Donald Trump, la protection de son usage de la liberté d’expression est renforcée parce qu’il s’agit un homme politique élu. La Cour Européenne des Droits de l’Homme a une approche similaire : « <em>Précieuse pour chacun, la liberté d’expression l’est tout particulièrement pour un élu du peuple; il représente ses électeurs, signale leurs préoccupations et défend leurs intérêts</em> »<sup id="fnref:7" role="doc-noteref"><a href="#fn:7" class="footnote" rel="footnote">7</a></sup>.</p>
<h1 id="le-cas-particulier-du-6-janvier">Le cas particulier du 6 janvier</h1>
<p>L’élection du président des États-Unis est un processus fédéral encadré par le droit. Chaque État définit ses lois électorales et choisit ses grands électeurs qui votent ensuite pour un président et un vice-président. Le choix des grands électeurs est plus ou moins contraint par le vote de l’État dont il est issu en fonction de la loi de l’État<sup id="fnref:8" role="doc-noteref"><a href="#fn:8" class="footnote" rel="footnote">8</a></sup>. Le 6 janvier, le congrès était réuni pour compter les voix des grands électeurs. Plusieurs républicains avaient averti qu’ils contesteraient la légitimité du vote issu de plusieurs États, donnant lieu à des votes dans les deux chambres. Cette démarche, si elle est prévue, était jusqu’à présent utilisée de façon exceptionnelle<sup id="fnref:9" role="doc-noteref"><a href="#fn:9" class="footnote" rel="footnote">9</a></sup>.</p>
<p>Dans les mois qui ont précédé et suivi l’élection, Donald trump a organisé une campagne, notamment à travers Twitter de délégitimation du vote tout en essayant les voies de contestation légales<sup id="fnref:10" role="doc-noteref"><a href="#fn:10" class="footnote" rel="footnote">10</a></sup>. À midi, devant une foule rassemblée, il a annoncé « <em>nous allons au Capitole [..] donner aux républicains la fierté et le courage dont ils ont besoin pour reprendre notre pays</em><sup id="fnref:11" role="doc-noteref"><a href="#fn:11" class="footnote" rel="footnote">11</a></sup>». La foule a alors entouré le Capitole, puis pénétré dans le bâtiment alors que les parlementaires et les bulletins de votes des grands électeurs étaient physiquement présents. Il y a eu des morts mais les choses auraient pu encore plus mal tourner.</p>
<p><img src="https://lesbricodeurs.fr/images/bulletins.jpg" alt="bulletins" /></p>
<p>Il est curieux de voir les personnalités politiques françaises s’émouvoir de la suspension de Trump tant les circonstances sont exceptionnelles. D’abord, l’incitation à la haine est une limite commune à l’usage de la liberté d’expression. Ensuite l’action de la foule a occasionné cinq morts et donné lieu à plusieurs infractions fédérales. La modération des plateformes n’est donc plus protégée par la section 230. Enfin, il s’agissait de faire pression sur le Congrès non pas contre une décision mais contre le processus démocratique lui-même, fédéral et législatif. Aucune loi ne protège contre la fin de l’État de droit. Seule la réaction citoyenne peut, y compris celle des entreprises.</p>
<h1 id="la-solution-en-france-un-cadre-et-une-justice-adaptée">La solution en France, un cadre et une justice adaptée</h1>
<p>Il y a un premier point à noter, ce n’est pas le président Trump qui a perdu l’accès à Twitter mais l’individu. Le compte officiel de la présidence, @POTUS est toujours accessible sur Twitter (bien que certaines publications aient été retirées<sup id="fnref:12" role="doc-noteref"><a href="#fn:12" class="footnote" rel="footnote">12</a></sup>), ainsi que les communiqués officiels ou la télévision utilisés depuis. Du fait des réseaux sociaux, on assiste à une tendance à la confusion entre la parole de la fonction institutionnelle de celle de l’individu. Les États-Unis ont en partie anticipé cette question en invitant les élus à communiquer par un compte dédié et archivé ensuite. On peut ainsi retrouver le compte de Barack Obama sous <a href="https://twitter.com/potus44?lang=en">@POTUS44</a>. La récente affaire au sujet de la promotion de produits et services sur les comptes d’une secrétaire d’État devrait appeler à une meilleure distinction de la parole publique et privée.</p>
<p>Ensuite, se pose la question de la souveraineté numérique européenne. Quels sont les moyens de contrôle sur les décisions de modération ? L’application Parler par exemple, utilisée par les militants d’extrême droite est retirée de l’AppStore d’Apple, du Play Store de Google et d’Amazon Web Services. Quelle est la résilience de la parole et de l’économie européenne à l’heure où la conversation et l’économie basculent sur les plateformes numériques ?</p>
<p>Mais surtout, comme nous l’avions évoqué au sujet de la loi Avia, il n’y a qu’un seul arbitre final acceptable de la liberté d’expression, le juge dans le cadre des lois de la république. S’il est aujourd’hui théoriquement possible de contester les décisions des plateformes, les modalités et délais de la justice ne sont pas appropriés à la sphère numérique. Encadrer les conditions de modération, faciliter un fonctionnement en étages avec des arbitres en ligne ou créer un service public numérique de la justice sont à envisager.</p>
<p><em>Merci à Clément Mabi et Samuel Eyre pour leur conseils</em></p>
<h2 id="notes">Notes</h2>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1" role="doc-endnote">
<p>Les algorithmes de Youtube et le Président, Les Bricodeurs, mai 2019 <a href="https://lesbricodeurs.fr/articles/elections-europe-youtube-algorithme/">lien</a> <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:2" role="doc-endnote">
<p>Facebook Executives Shut Down Efforts to Make the Site Less Divisive, Wall Street Journal, mai 2020 <a href="https://www.wsj.com/articles/facebook-knows-it-encourages-division-top-executives-nixed-solutions-11590507499">lien</a> <a href="#fnref:2" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:3" role="doc-endnote">
<p>How Facebook’s Rise Fueled Chaos and Confusion in Myanmar, Wired, juin 2018 <a href="https://www.wired.com/story/how-facebooks-rise-fueled-chaos-and-confusion-in-myanmar/">lien</a> <a href="#fnref:3" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:4" role="doc-endnote">
<p>Amazon’s suspended third-party sellers aren’t receiving the 30-day notice period, Business Insider, septembre 2019, <a href="https://www.businessinsider.fr/us/amazon-sellers-suspended-no-notice-policy-2019-9">lien</a> <a href="#fnref:4" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:5" role="doc-endnote">
<p>47 U.S. Code § 230 <a href="https://www.law.cornell.edu/uscode/text/47/230">lien</a> <a href="#fnref:5" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:6" role="doc-endnote">
<p>The ISIS Twitter Census, The Brookings Project on U.S. Relations with the Islamic World, mars 2015 <a href="https://www.brookings.edu/wp-content/uploads/2016/06/isis_twitter_census_berger_morgan.pdf">lien</a>. <a href="#fnref:6" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:7" role="doc-endnote">
<p>Arrêt Castells c. Espagne, n°11798/85 CEDH 1992, confirmé arrêt Jerusalem c. Autriche, n° 26958/95, CEDH 2001) <a href="#fnref:7" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:8" role="doc-endnote">
<p>Ray v. Blair, 343 U.S. 214 (1952) <a href="#fnref:8" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:9" role="doc-endnote">
<p>National Constitution Center, décembre 2020 <a href="https://constitutioncenter.org/blog/explaining-how-congress-settles-electoral-college-disputes">lien</a> <a href="#fnref:9" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:10" role="doc-endnote">
<p>New York Times, décembre 2020, <a href="https://www.nytimes.com/2020/12/26/us/politics/republicans-voter-fraud.html">lien</a> <a href="#fnref:10" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:11" role="doc-endnote">
<p>ABC News, janvier 2020 <a href="https://abcnews.go.com/Politics/trump-told-supporters-stormed-capitol-hill/story?id=75110558">lien</a> <a href="#fnref:11" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:12" role="doc-endnote">
<p>Ars Technica, mise à jour, janvier 2020 <a href="https://arstechnica.com/tech-policy/2021/01/twitter-permanently-bans-donald-trumps-account-from-the-platform/">lien</a> <a href="#fnref:12" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>
<p><a href="https://lesbricodeurs.fr/articles/la-moderation-des-reseaux-sociaux/">Trump et la modération des réseaux sociaux</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 01 Jan 2021.</p>
https://lesbricodeurs.fr/articles/du-design-a-la-page-web2020-05-30T09:30:00+00:002020-05-30T09:30:00+00:00Sylvain Schellenbergerhttps://lesbricodeurs.fr
<h1 id="du-design-à-la-page-web">Du design à la page web</h1>
<p>Lors d’un article précédent<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup>, nous avions vu comment le Web est consitué de pages HTML reliées les unes aux autres. Le spécialiste de la création de ces pages web s’appelle l’<strong>intégrateur web</strong> (ou l’intégratrice). C’est cette personne qui est en charge de la transformation d’une <strong>maquette graphique</strong> en langages HTML et CSS fonctionnels. Durant notre dernier live sur YouTube<sup id="fnref:15" role="doc-noteref"><a href="#fn:15" class="footnote" rel="footnote">2</a></sup> nous avons fait une démonstration du processus d’intégration d’une telle maquette. Vous pouvez en trouver une rediffusion<sup id="fnref:2" role="doc-noteref"><a href="#fn:2" class="footnote" rel="footnote">3</a></sup> sur notre chaîne YouTube.</p>
<p>Pour cet atelier, je vais utiliser une maquette graphique gracieusement mise à disposition par Plamen Ivanov, sur le site Dribbble<sup id="fnref:25" role="doc-noteref"><a href="#fn:25" class="footnote" rel="footnote">4</a></sup>. Il s’agit d’une page d’accueil pour un site de rencontre, plutôt dans l’air du temps, non?</p>
<p><img src="https://i.imgur.com/Z6cPH1g.jpg" alt="LoveStory, une page d'accueil pour site de rencontre, par Plamen Ivanov" /></p>
<h1 id="les-outils">Les outils</h1>
<p>Pour cette présentation, j’ai utilisé les trois outils suivants.</p>
<ul>
<li>Un <strong>éditeur de texte</strong>: j’ai choisi Atom<sup id="fnref:3" role="doc-noteref"><a href="#fn:3" class="footnote" rel="footnote">5</a></sup> mais n’importe lequel peut faire l’affaire (même le bloc-note de Windows!). Cet éditeur, comme beaucoup, est gratuit, mais il est aussi <em>open source</em>.</li>
<li>Un logiciel de <strong>traitement d’image</strong>: qui est optionnel si le designer nous fourni toutes les ressources, mais toujours bien utile. J’ai choisi Krita<sup id="fnref:4" role="doc-noteref"><a href="#fn:4" class="footnote" rel="footnote">6</a></sup>, même s’il se spécialise plutôt dans le “digital painting”, il dispose tout de même des fonctionnalités de base qui me sont très utiles (et il peut lire les fichier Photoshop, même s’il ne le ferait pas aussi bien que ce dernier). Lui aussi gratuit et open source.</li>
<li>Un <strong>navigateur web</strong>: Firefox<sup id="fnref:5" role="doc-noteref"><a href="#fn:5" class="footnote" rel="footnote">7</a></sup> est mon choix par défaut, mais là encore, tous se valent pour l’utilisation que j’en ai faite. L’important c’est de savoir où trouver les <em>outils de développement</em> (par exemple, avec le raccourci <code class="language-plaintext highlighter-rouge">ctrl+shift+i</code> dans Firefox). Lui aussi évidemment gratuit.</li>
</ul>
<h2 id="quelques-rappels">Quelques rappels</h2>
<p>La vidéo vous demandera une petite connaissance préalable des langages HTML et CSS. Voici toutefois quelques rappels qui pourront vous rendre cette présentation plus claire:</p>
<ul>
<li>Le <em>World Wide Web</em> est un ensemble de documents reliés les uns aux autres par des <strong>liens hypertextes</strong>. Ces pages sont stockées sur des <strong>serveurs</strong>, puis envoyées aux utilisateurs qui en font la demande via leur <strong>navigateur web</strong>.</li>
<li>Les pages ainsi reçues sont écrites en HTML, qui est un langage de description de document. Il s’écrit à l’aide de <strong>balises</strong> qui peuvent s’imbriquer les unes dans les autres. La liste des balises existantes est standardisée par le <em>World Wide Web Consortium</em> (W3C pour les intimes). La <em>Fondation Mozilla</em> en tient une liste très à jour sur le Mozilla Developers Network<sup id="fnref:6" role="doc-noteref"><a href="#fn:6" class="footnote" rel="footnote">8</a></sup>.</li>
<li>Si le HTML structure le contenu d’une page, sa mise en page est assurée par des <strong>feuilles de styles</strong> écrites en CSS. Ce langage permet d’appliquer des styles sur les <strong>éléments</strong> HTML d’une page web (les balises et leur contenu).</li>
</ul>
<h2 id="hors-du-cadre">Hors du cadre</h2>
<p>Il y a beaucoup à dire sur l’intégration de page web, et nous ne pourrons évidemment pas tout voir dans une même vidéo. Seront exclus de la leçon:</p>
<ul>
<li>Les <strong>frameworks</strong> CSS comme Bootstrap, Foundation ou Bulma.</li>
<li>Le <strong>responsive web design</strong>, qui permet d’adapter la page au type d’écran de l’utilisateur (pour la navigation sur mobile en grande partie).</li>
</ul>
<h2 id="la-sémantique-des-éléments-html">La sémantique des éléments HTML</h2>
<p>Ce qu’il faut savoir, c’est que les balises HTML sont analysées par les robots des moteurs de recherche, afin de comprendre ce qu’il y a dans votre page, ce qui lui donne de l’importance. Pour le référencement, il est donc important d’avoir une page aussi <strong>clairement structurée</strong> que possible. Cela passe par l’utilisation des balises conformément au rôle que le W3C leur a défini. C’est ce que l’on appelle la <strong>sémantique</strong> du HTML. Encore une fois, se référer à la documentation du Mozilla Developers Network<sup id="fnref:6:1" role="doc-noteref"><a href="#fn:6" class="footnote" rel="footnote">8</a></sup> est fortement conseillé.</p>
<h3 id="une-première-séparation">Une première séparation</h3>
<p>Afin de voir plus clair dans le travail que je dois faire, j’aime bien commencer par décomposer visuellement la maquette graphique que j’ai reçue afin d’en identifier les principaux <strong>éléments structurels</strong>. Cela me permet ensuite de choisir les balises adaptées au rôle des éléments que j’ai séparés.</p>
<pre><code class="language-htmlmixed"><html lang="fr">
<head>
<title>BricoLove</title>
</head>
<body>
<header> /* Mon en-tête */ </header>
<section> /* Ma section */ </section>
<footer> /* Mon pied de page */ </footer>
</body>
</html>
</code></pre>
<p>Dans le cas de ma page, j’ai défini trois grandes zones distinctes:</p>
<ul>
<li>L’en-tête de ma page, qui contient des liens de navigation et formulaire de recherche. Pour cela, la balise <code class="language-plaintext highlighter-rouge"><header></code> sera parfaite.</li>
<li>Une section de contenu qui présente les différents services que propose le site. C’est très courant dans une page d’accueil et ça va dans la balise … <code class="language-plaintext highlighter-rouge"><section></code>!</li>
<li>Un pied de page, contenant des informations complémentaires et des liens vers les réseaux sociaux, ce sera mon <code class="language-plaintext highlighter-rouge"><footer></code>.</li>
</ul>
<h3 id="le-contenu-au-centre-du-web">Le contenu au centre du web</h3>
<p>Tout cela est proprement séparé, mais pour le moment, mon site est vide. Or, le but du Web, c’est de proposer la lecture de <strong>contenus</strong> aux visiteurs. Les moteurs de recherche seront donc particulièrement attentifs à ces contenus.</p>
<p>Sur cette page d’accueil, l’essentiel de mon contenu se trouve dans la section centrale, et permet de donner envie au visiteur de s’inscrire sur le site de rencontre de mon client (on va dire que je suis rémunéré pour ce travail…). Je distingue donc aisément un premier <strong>titre</strong>, qui exprime très bien le caractère de ma page. Je vais donc utiliser la balise “titre de niveau 1”, soit <code class="language-plaintext highlighter-rouge"><h1></code>, qui va lui donner toute son importance.</p>
<p>Le <strong>paragraphe</strong> (balise <code class="language-plaintext highlighter-rouge"><p></code>) qui suit apporte probablement plus d’informations sur le sujet de ce titre, mais actuellement il contient du charabia en latin! C’est très courant, lorsque le client ne nous a pas encore fourni le contenu à intégrer dans le site (parce qu’il est en cours de rédaction, par exemple), on le remplace généralement par du <em>faux texte</em> (le plus célèbre de ces faux texte étant le <em>Lorem ipsum</em>, vous le verrez souvent). On peut par exemple en générer en utilisant un site externe, comme faux-texte.com.<sup id="fnref:7" role="doc-noteref"><a href="#fn:7" class="footnote" rel="footnote">9</a></sup></p>
<p><img src="https://i.imgur.com/1eOLkwa.jpg" alt="Des éléments HTML représentés sur la maquette graphique." /></p>
<p>Les éléments suivants répètent un même schéma:</p>
<ul>
<li>une image: j’utilise la balise <code class="language-plaintext highlighter-rouge"><img></code>. Ce qui est important, ce sont ses <strong>attributs</strong>: <code class="language-plaintext highlighter-rouge">src</code> me permet de donner l’adresse URL où mon image est hébergée, alors que <code class="language-plaintext highlighter-rouge">alt</code> me permet de lui assigner un <strong>texte alternatif</strong>. Ce dernier permet aux personne malvoyantes de comprendre de quoi parle mon image grâce à leur lecteur d’écran, alors ne l’oublions pas!</li>
<li>un titre: j’utilise ici le “titre de niveau 2” (<code class="language-plaintext highlighter-rouge"><h2></code>), car ce titre est d’une moindre importance que celui de ma page. Le <code class="language-plaintext highlighter-rouge"><h1></code> est d’ailleurs assez spécial et l’on ne peut en mettre qu’un seul par <code class="language-plaintext highlighter-rouge"><section></code> maximum (ou un pour toute la page si elle est dénuée de <code class="language-plaintext highlighter-rouge"><section></code>).</li>
<li>une liste non-ordonnée: il s’agit d’une balise <code class="language-plaintext highlighter-rouge"><ul></code>, et d’autant de balises <code class="language-plaintext highlighter-rouge"><li></code> imbriquées que j’ai d’éléments de liste (“li” étant d’ailleurs les initiales de “list item”).</li>
</ul>
<h2 id="la-mise-en-page">La mise en page</h2>
<p>Ma page est maintenant structurée et expose du contenu à mes visiteurs. Seulement, avec le (manque de) design actuel, je risque de ne pas les retenir très longtemps! Je vais donc passer à la mise en page à l’aide de <strong>règles CSS</strong> qui vont permettre de rendre ma page agréable à lire pour les humains.</p>
<h3 id="dimensions-et-centrage">Dimensions et centrage</h3>
<p>Ce qu’il faut comprendre de la méthode d’affichage du HTML c’est son <strong>modèle de boîte</strong>. Chaque balise écrite va définir un élément HTML, qui est une boîte rectangulaire, qui peut contenir d’autres boîtes rectangulaires… Un peu comme des poupées russes!</p>
<p><img src="https://mdn.mozillademos.org/files/16558/box-model.png" alt="Le modèle de boîte, comme présenté dans... la documentation du Mozilla Developers Network!" /></p>
<p>Ces boîtes, je peux régler leurs dimensions internes, mais également l’espacement entre chacune d’entre elles en leur fixant des <strong>marges</strong>. Par exemple, je ne veux pas étaler mon contenu sur toute la largeur de l’écran, c’est trop pénible à lire. Alors je vais donner à ma <code class="language-plaintext highlighter-rouge">section</code> une taille maximale de 960 pixels avec la règle <code class="language-plaintext highlighter-rouge">max-width: 960px;</code>. Et pour avoir le texte bien en face de moi quand je lis, je vais modifier lui assigner une marge de chaque côté pour le centrer. Je ne peux par contre pas deviner la taille de l’écran de mon visiteur! Je vais alors laisser le navigateur répartir également l’espace restant dans les marges gauche et droite de ma <code class="language-plaintext highlighter-rouge">section</code> en utilisant la règle <code class="language-plaintext highlighter-rouge">margin: auto;</code>.</p>
<h3 id="type-daffichage-et-alignement">Type d’affichage et alignement</h3>
<p>Cette astuce est bien pratique lorsque j’ai un seul élément, mais pour aligner mes trois articles, je vais avoir besoin de changer le <strong>mode d’affichage</strong> de ces articles: c’est la propriété <code class="language-plaintext highlighter-rouge">display</code> des éléments. elle définit comment ils s’aligne les uns à la suite des autres.</p>
<ul>
<li>en <code class="language-plaintext highlighter-rouge">display: block;</code>, chaque élément s’affiche en dessous de l’élément qui le précède, quelles que soient leurs dimensions respectives.</li>
<li>en <code class="language-plaintext highlighter-rouge">display: inline;</code>, chaque élément vient s’aligner tout de suite après son prédécesseur.</li>
</ul>
<p>Mais j’ai besoin d’encore autre chose… c’est pourquoi je vais utiliser <strong>flexbox</strong>. Ce mode d’affichage est assez particulier à prendre en main, mais il permet aux éléments de se répartir équitablement l’espace de la page, ce qui nous arrange bien dans le cas présent! Je vais donc donner la règle <code class="language-plaintext highlighter-rouge">display: flex;</code> à l’<strong>élément parent</strong> de mes articles (ma <code class="language-plaintext highlighter-rouge">section</code> donc), et non aux articles eux-mêmes (je vous ai prévenus que c’est particulier)…</p>
<pre><code class="language-htmlmixed="><div style="display: flex;">
<article>/* Premier article */</article>
<article>/* Second article */</article>
<article>/* Troisième article */</article>
</div>
</code></pre>
<h2 id="un-peu-didentité-visuelle">Un peu d’identité visuelle</h2>
<p>Ma page est maintenant plus lisible. Je vais pouvoir lui donner plus de personnalité en choisissant des polices de caractères, des couleurs, etc.</p>
<h3 id="le-système-de-cascade">Le système de “cascade”</h3>
<p>Je m’aperçois que les textes de la maquette graphique ne sont pas en noir, mais en bleu foncé. Je vais donc changer la propriété <code class="language-plaintext highlighter-rouge">color</code> de mon <code class="language-plaintext highlighter-rouge">body</code> et … tous les textes de la page sont devenus bleus! C’est ce que l’on appelle l’<strong>héritage des propriétés</strong>. Puisque <code class="language-plaintext highlighter-rouge">body</code> contient tous les autres éléments (on dit qu’il est leur “parent”, ou “ancêtre”), chaque élément va pouvoir hériter de certaines de ces propriétés (connaître les propriétés qui sont héritées et celles qui ne le sont pas viendra avec l’expérience et… la consultation du Mozilla Developers Network<sup id="fnref:6:2" role="doc-noteref"><a href="#fn:6" class="footnote" rel="footnote">8</a></sup>! Oui je suis insistant, mais sérieusement, il y a tout ce qu’il faut savoir dedans).</p>
<pre><code class="language-CSS">body {
color: #20628d; /* Une couleur bleu foncé, en notation hexadécimale */
}
li {
color: black; /* Le mot-clé pour la couleur noir */
}
</code></pre>
<p>Par contre, les éléments des listes eux, sont en noir dans la maquette, je vais donc leur remettre cette couleur noire en <strong>surchargeant</strong> ma règle précédente. Si je donne la règle <code class="language-plaintext highlighter-rouge">color: black;</code> à mes éléments de liste, cette règle va prendre la précédence sur la règle héritée du <code class="language-plaintext highlighter-rouge">body</code>, car elle est plus spécifique.</p>
<h3 id="les-éléments-hors-flux">Les éléments “hors-flux”</h3>
<p>Il reste à ajouter les petits éléments visuels qui donnent à la maquette de mon designer son identité particulière. Je pense à la vague qui délimite la fin de ma section et les petites coches qui précédent mes éléments de listes. Ces éléments ne sont guère utiles pour la compréhension de ma page, c’est pourquoi ils sont absents de mon code HTML, et ne seront pas interprétés par les lecteurs d’écrans pour les personnes malvoyantes.</p>
<p>La vague au pied de ma section est une image, mais elle n’amène pas une information suffisamment pertinente pour que j’en fasse une balise <code class="language-plaintext highlighter-rouge"><img></code>. A la place je vais la définir en <strong>image de fond</strong> pour mon élément <code class="language-plaintext highlighter-rouge">section</code>, avec la règle <code class="language-plaintext highlighter-rouge">background-image: url(chemin/vers/mon/image.format);</code>.</p>
<p>Les images de fond ont plusieurs propriétés intéressantes pour gérer leur placement, leurs dimensions, leur répétition (ou pas)… Et les valeurs par défaut me conviennent assez peu dans le cas présent, je vais donc les modifier:</p>
<pre><code class="language-CSS">section {
background-image: url('assets/img/wave-blue.png');
background-repeat: no-repeat;
background-position: bottom;
}
</code></pre>
<p>De cette manière, je ne vais afficher ma vague qu’une seule fois tout en bas de ma section, ce qui correspond bien mieux à la maquette que j’ai récupérée.</p>
<p>Les petites coches avec les éléments de liste sont jolies, mais dans le cas actuel, elles ont bien peu de signification. Je vais donc les intégrer au travers de <strong>pseudo-éléments</strong>. C’est à dire que ces éléments seront absent de ma page HTML, mais générés par mes règles CSS au moment de l’affichage. A la différence des images de fond, qui font partie d’un élément, les pseudo-éléments se comportent comme des éléments à part, et ils vont pousser les autres éléments pour se faire de la place.</p>
<p>Je peux les créer soit avant, soit après un autre élément, en ciblant ce dernier. Au vu de la maquette, je vais les créer avant mes éléments de liste, en utilisant le sélecteur de pseudo-élément <code class="language-plaintext highlighter-rouge">::before</code>.</p>
<pre><code class="language-CSS">li::before {
content: '\2713';
}
</code></pre>
<p>Comme l’élément n’existe pas dans le HTML, je dois définir son contenu dans ma règle CSS, c’est ce que j’ai fait en lui assignant une valeur à sa propriété <code class="language-plaintext highlighter-rouge">content</code>. La coche est en fait un caractère textuel du <strong>jeu de caractère unicode</strong>, que les navigateurs savent très bien interpréter. On peut trouver une liste complète de ces caractères sur plusieurs sites du Web, comme par exemple Unicode Table.<sup id="fnref:8" role="doc-noteref"><a href="#fn:8" class="footnote" rel="footnote">10</a></sup> Ce qui est important, c’est de trouver le numéro du caractère que l’on désire, ici <code class="language-plaintext highlighter-rouge">2713</code> pour la coche. Cerise sur le gâteau, sur le site Unicode Table, j’ai directement la syntaxe à utiliser pour l’inclure dans une feuille de style CSS. Du coup, je copie, et je colle.</p>
<h2 id="pour-résumer">Pour résumer</h2>
<p>L’article est déjà bien condensé par rapport aux explications que j’ai données dans la vidéo. Je vous conseille de la visionner car il y a plein de petits détails importants qui permettent de réellement coller au graphisme de la maquette, je me suis contenté ici de vous exposer les concepts généraux que j’ai mis en oeuvre.</p>
<p>Evidemment, faire l’intégration complète de cette maquette prend plus de temps que l’heure de vidéo que j’ai tournée. Cela demandera également pas mal d’astuce pour réaliser le formulaire de recherche tel que le graphiste l’a imaginé. Mais ça, c’est une autre histoire.</p>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1" role="doc-endnote">
<p>Les Bricodeurs, <a href="https://lesbricodeurs.fr/articles/creer-premiere-page-web/">“Créé ta première page web”</a> <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:15" role="doc-endnote">
<p>YouTube, <a href="https://youtu.be/mdSJ6_4NCYc">Du design à la page web</a> <a href="#fnref:15" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:2" role="doc-endnote">
<p>YouTube, <a href="https://youtu.be/b3m6CFbikcA">Crée ta première page web</a> <a href="#fnref:2" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:25" role="doc-endnote">
<p><a href="https://dribbble.com/shots/3066130-Dating-Website-Theme-Free-Psd">LoveStory</a>, maquette graphique par Plamen Ivanov, sur Dibbble <a href="#fnref:25" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:3" role="doc-endnote">
<p><a href="https://atom.io/">Atom</a>, un éditeur de texte open source <a href="#fnref:3" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:4" role="doc-endnote">
<p><a href="https://krita.org/fr/">Krita</a>, un logiciel de traitement d’image open source <a href="#fnref:4" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:5" role="doc-endnote">
<p>Documentation pour les outils de développeurs de <a href="https://developer.mozilla.org/fr/docs/Outils">Firefox</a> <a href="#fnref:5" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:6" role="doc-endnote">
<p>Documentation en ligne du <a href="https://developer.mozilla.org/fr/">Mozilla Developers Network</a> <a href="#fnref:6" class="reversefootnote" role="doc-backlink">↩</a> <a href="#fnref:6:1" class="reversefootnote" role="doc-backlink">↩<sup>2</sup></a> <a href="#fnref:6:2" class="reversefootnote" role="doc-backlink">↩<sup>3</sup></a></p>
</li>
<li id="fn:7" role="doc-endnote">
<p><a href="https://www.faux-texte.com/">faux-texte.com</a>, générateur de faux texte en ligne <a href="#fnref:7" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:8" role="doc-endnote">
<p><a href="https://unicode-table.com/fr/">Unicode Table</a>, liste des caractères unicode <a href="#fnref:8" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>
<p><a href="https://lesbricodeurs.fr/articles/du-design-a-la-page-web/">Du design à la page web</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 30 May 2020.</p>
https://lesbricodeurs.fr/articles/jeu-du-pendu-python2020-03-31T09:30:00+00:002020-03-31T09:30:00+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>Après avoir vu les <a href="https://lesbricodeurs.fr/articles/decouvrir-la-programmation-avec-Python/">bases de python</a>, nous allons réutiliser ces notions pour réaliser un jeu du pendu. Vous pouvez revoir la <a href="https://youtu.be/-oeEa8yKVSk?t=1697">vidéo correspondante ici</a>.</p>
<p>Le jeu du pendu consiste à deviner un mot. Le joueur propose une lettre. Si elle fait partie du mot le programme dit où se trouve cette lettre dans le mot. Si elle ne fait pas partie du mot, on commence à dessiner un pendu. À la septième erreur le dessin est terminé et le joueur a perdu.</p>
<h3 id="solution-et-variables">Solution et variables</h3>
<p>Nous allons commencer par définir les variables dont nous allons avoir besoin. En premier lieu nous devons choisir le mot à deviner. Pour le moment nous allons fixer la solution à “casserole”.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">solution</span> <span class="o">=</span> <span class="s">"casserole"</span>
</code></pre></div></div>
<p>Ensuite, nous allons définir le nombre d’essais possibles. Soit on compte les erreurs de 0 jusqu’à 7, soit on compte les tentatives restantes de 7 à 0. Le second me semble plus lisible. Lorsque la variable <code class="language-plaintext highlighter-rouge">tentatives</code> atteint <code class="language-plaintext highlighter-rouge">0</code>, le joueur perd la partie.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">tentatives</span> <span class="o">=</span> <span class="mi">7</span>
</code></pre></div></div>
<p><img src="https://lesbricodeurs.fr/images/tutos/python-3.jpg" alt="illustration pendu python" /></p>
<p>Dans le jeu du pendu, on montre à tout moment au joueur le mot avec les lettres qui ont été trouvées et des blancs pour les lettres qui restent à deviner. Ici, nous utiliserons le tiret <code class="language-plaintext highlighter-rouge">_</code> pour représenter une lettre qui n’a pas encore été découverte.</p>
<p>Pour l’initialiser, nous ajoutons autant de blancs qu’il y a de caractères dans la solution en utilisant une boucle <code class="language-plaintext highlighter-rouge">for</code>.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">affichage</span> <span class="o">=</span> <span class="s">""</span>
<span class="k">for</span> <span class="n">l</span> <span class="ow">in</span> <span class="n">solution</span><span class="p">:</span>
<span class="n">affichage</span> <span class="o">=</span> <span class="n">affichage</span> <span class="o">+</span> <span class="s">"_ "</span>
</code></pre></div></div>
<p>Enfin, nous gardons une liste des lettres qui ont été découvertes, pour pouvoir mettre à jour l’affichage. Pour commencer cette liste est vide. Chaque proposition de lettre correcte sera ajoutée</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">lettres_trouvees</span> <span class="o">=</span> <span class="s">""</span>
</code></pre></div></div>
<h3 id="cest-lhistoire-dune-lettre-qui-tombe-">C’est l’histoire d’une lettre qui tombe …</h3>
<p>Maintenant il s’agit de demander à l’utilisateur sa proposition de lettre. Nous lui rappellons le mot à deviner d’abord. Puis nous réutilisons la fonction <code class="language-plaintext highlighter-rouge">input()</code> que nous avons vu précédement.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">print</span><span class="p">(</span><span class="s">"Mot à deviner : "</span><span class="p">,</span> <span class="n">affichage</span><span class="p">)</span>
<span class="n">proposition</span> <span class="o">=</span> <span class="nb">input</span><span class="p">(</span><span class="s">"proposez une lettre : "</span><span class="p">)</span>
</code></pre></div></div>
<p>Maintenant il s’agit de traiter cette proposition. Il y a deux possibilités. Si la proposition est une lettre contenue dans la solution, alors il faut l’ajouter à la liste des lettres trouvées. Sinon le joueur perd une tentative.</p>
<p>Pour représenter cette condition, nous utilisons la structure <code class="language-plaintext highlighter-rouge">if ... in ...:</code> que nous avons vu: <strong>Si</strong> (<code class="language-plaintext highlighter-rouge">if</code>) la proposition est <strong>dans</strong> (<code class="language-plaintext highlighter-rouge">in</code>) la solution <strong>alors</strong> (<code class="language-plaintext highlighter-rouge">:</code>)ajouter la proposition aux lettres trouvées.</p>
<p>Pour dire ce qu’il faut faire dans le cas contraire nous utilisons le mot clé <code class="language-plaintext highlighter-rouge">else :</code> (<strong>Sinon</strong> réduire les tentatives de 1).</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="k">if</span> <span class="n">proposition</span> <span class="ow">in</span> <span class="n">solution</span><span class="p">:</span>
<span class="n">lettres_trouvees</span> <span class="o">=</span> <span class="n">lettres_trouvees</span> <span class="o">+</span> <span class="n">proposition</span>
<span class="k">else</span><span class="p">:</span>
<span class="n">tentatives</span> <span class="o">=</span> <span class="n">tentatives</span> <span class="o">-</span> <span class="mi">1</span>
</code></pre></div></div>
<div class="notice notice--warning">
<p>L’instruction <code class="language-plaintext highlighter-rouge">tentatives = tentatives - 1</code> peut paraître étonnante de premier abord, mais il suffit de comprendre l’ordre dans lequel le programme résout les opérations:</p>
<ol>
<li>Le programme calcule de le résultat de la soustraction <code class="language-plaintext highlighter-rouge">tentatives - 1</code>, il s’agit de la valeur contenue dans la variable <code class="language-plaintext highlighter-rouge">tentatives</code>, à laquelle on retire 1.</li>
<li>Ce résultat est affecté à la variable <code class="language-plaintext highlighter-rouge">tentatives</code></li>
</ol>
<p>Cette opération est très courante en programmation, on l’appelle la <strong>décrémentation</strong> (inverse de l’<strong>incrémentation</strong> qui consiste à ajouter 1). En Python, on peut l’écrire de manière alternative:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">tentatives = tentatives - 1</code></li>
<li><code class="language-plaintext highlighter-rouge">tentatives -= 1</code></li>
</ul>
<p>Les deux syntaxes ont exactement le même effet, mais vous vous apercevrez que les développeuses et développeurs ont tendance à préferer les versions courtes. 🤷</p>
</div>
<p>On peut ajouter <code class="language-plaintext highlighter-rouge">print()</code> pour indiquer à l’utilisateur si la lettre appartient à l’ensemble ou non.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="k">if</span> <span class="n">proposition</span> <span class="ow">in</span> <span class="n">solution</span><span class="p">:</span>
<span class="n">lettres_trouvees</span> <span class="o">=</span> <span class="n">lettres_trouvees</span> <span class="o">+</span> <span class="n">proposition</span>
<span class="k">print</span><span class="p">(</span><span class="s">"-> Bien vu!"</span><span class="p">)</span>
<span class="k">else</span><span class="p">:</span>
<span class="n">tentatives</span> <span class="o">=</span> <span class="n">tentatives</span> <span class="o">-</span> <span class="mi">1</span>
<span class="k">print</span><span class="p">(</span><span class="s">"-> Nope. Il vous reste"</span><span class="p">,</span> <span class="n">tentatives</span><span class="p">,</span> <span class="s">"tentatives"</span><span class="p">)</span>
</code></pre></div></div>
<p>Vous pouvez déjà tester votre jeu. Cela fonctionne comme prévu?</p>
<p><img src="https://lesbricodeurs.fr/images/tutos/danse.gif" alt="Pendaison" /></p>
<h3 id="-qui-répète-à-chaque-étage-jusquici-tout-va-bien-">… qui répète à chaque étage “jusqu’ici tout va bien” …</h3>
<p>Aussi satisfaisant que ça puisse être, pour le moment notre jeu répond une seule fois, puis s’arrête. Nous avons besoin d’une <strong>boucle</strong> qui répète les instructions précédentes. Nous allons utiliser le mot clé <code class="language-plaintext highlighter-rouge">while</code> (“tant que” en anglais). Nous voulons que, tant que le nombre de tentatives est supérieur à 0, l’ordinateur affiche le mot à deviner, demande une proposition et l’analyse. Comme pour <code class="language-plaintext highlighter-rouge">for</code> ou <code class="language-plaintext highlighter-rouge">if</code>, on écrit le mot clé <code class="language-plaintext highlighter-rouge">while</code>, la condition, <code class="language-plaintext highlighter-rouge">:</code> et un espacement à gauche.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
<span class="k">while</span> <span class="n">tentatives</span><span class="o">></span><span class="mi">0</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Mot à deviner : "</span><span class="p">,</span> <span class="n">affichage</span><span class="p">)</span>
<span class="n">proposition</span> <span class="o">=</span> <span class="nb">input</span><span class="p">(</span><span class="s">"proposez une lettre : "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">proposition</span> <span class="ow">in</span> <span class="n">solution</span><span class="p">:</span>
<span class="n">lettres_trouvees</span> <span class="o">=</span> <span class="n">lettres_trouvees</span> <span class="o">+</span> <span class="n">proposition</span>
<span class="k">print</span><span class="p">(</span><span class="s">"-> Bien vu!"</span><span class="p">)</span>
<span class="k">else</span><span class="p">:</span>
<span class="n">tentatives</span> <span class="o">=</span> <span class="n">tentatives</span> <span class="o">-</span> <span class="mi">1</span>
<span class="k">print</span><span class="p">(</span><span class="s">"-> Nope. Il vous reste"</span><span class="p">,</span> <span class="n">tentatives</span><span class="p">,</span> <span class="s">"tentatives"</span><span class="p">)</span>
</code></pre></div></div>
<p>Ces instructions seront donc répétées tant que le nombre de tentatives n’est pas dépassé. Il est très courant que les jeux aient ce genre de boucle principale qui attend les saisies de l’utilisateur.</p>
<p>Il nous reste à mettre à jour l’affichage. Dans cette boucle, nous commençons par effacer ce que contenait la variable <code class="language-plaintext highlighter-rouge">affichage</code>. Pour cela, nous remplaçons son contenu par une chaîne de caractères vide.</p>
<p>Ensuite, pour chaque lettre de la solution (<code class="language-plaintext highlighter-rouge">for ... in ....</code>), nous allons regarder si elle fait partie des lettres trouvées(<code class="language-plaintext highlighter-rouge">if ... in ...</code>). Dans ce cas, on ajoute à l’affichage la lettre et un espace pour la lisibilité. Sinon, cette lettre n’a pas été trouvée et on affiche donc un blanc.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="n">affichage</span> <span class="o">=</span> <span class="s">""</span>
<span class="k">for</span> <span class="n">x</span> <span class="ow">in</span> <span class="n">solution</span><span class="p">:</span>
<span class="k">if</span> <span class="n">x</span> <span class="ow">in</span> <span class="n">lettres_trouvees</span><span class="p">:</span>
<span class="n">affichage</span> <span class="o">+=</span> <span class="n">x</span> <span class="o">+</span> <span class="s">" "</span>
<span class="k">else</span><span class="p">:</span>
<span class="n">affichage</span> <span class="o">+=</span> <span class="s">"_ "</span>
</code></pre></div></div>
<h3 id="-limportant-nest-pas-la-chute-cest-latterrissage">… l’important n’est pas la chute, c’est l’atterrissage.</h3>
<p>Le programme devrait fonctionner complètement, mais il reste à afficher la victoire ou la défaite.</p>
<p>Pour la victoire, nous allons dans la boucle ajouter un <code class="language-plaintext highlighter-rouge">if</code> qui évaluera si il reste des lettres à découvrir. Pour cela, nous allons simplement regarder si il reste des tirets dans la variable affichage.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="k">if</span> <span class="s">"_"</span> <span class="ow">not</span> <span class="ow">in</span> <span class="n">affichage</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">">>> Gagné! <<<"</span><span class="p">)</span>
<span class="k">break</span>
</code></pre></div></div>
<p>Le mot clé <code class="language-plaintext highlighter-rouge">break</code> sert à sortir de la boucle <code class="language-plaintext highlighter-rouge">while</code>. Quand le programme rencontre ce mot, il termine la boucle et continue les instructions du programme principal. Pour bien le visualiser, on peut ajouter une ligne, à la fin tout à gauche.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">print</span><span class="p">(</span><span class="s">" * Fin de la partie * "</span><span class="p">)</span>
</code></pre></div></div>
<p>Pour la défaite, elle est déja prévue. Testez votre programme en donnant des lettres qui ne sont pas dans la solution plus de 6 fois. Que se passe-t-il ?</p>
<p><img src="https://lesbricodeurs.fr/images/tutos/question.gif" alt="Question" /></p>
<p>En effet, la condition de la boucle <code class="language-plaintext highlighter-rouge">while</code> prévoit déjà de terminer la boucle principale à la septième erreur. Le jeu affiche donc * Fin de la partie *.</p>
<p>Pour que ce soit un vrai jeu du pendu, il manque un dessin de pendu. Nous devons afficher à chaque erreur un bout de la scène. Nous allons utiliser le charmant dessin suivant. Petit aveu, je n’ai jamais été fort en dessin.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> ==========Y=
||/ |
|| 0
|| /|\
|| /|
/||
=============
</code></pre></div></div>
<p>Si le joueur a fait une erreur, on affiche la ligne du bas du dessin. S’il a fait deux erreurs, on affiche les deux lignes du bas… Pour être malin on va dire d’afficher la ligne du bas s’il y a 6 tentatives restantes ou moins, d’afficher l’avant dernière ligne s’il reste 5 tentatives ou moins…</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> ==========Y= ==0 tentatives restantes
||/ | <=1 tentatives restantes
|| 0 <=2 tentatives restantes
|| /|\ <=3 tentatives restantes
|| /| <=4 tentatives restantes
/|| <=5 tentatives restantes
============= <=6 tentatives restantes
</code></pre></div></div>
<p>Dans le code, après la ligne où on réduit le nombre de tentatives, on ajoute donc la série de conditions suivantes:</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="k">if</span> <span class="n">tentatives</span><span class="o">==</span><span class="mi">0</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" ==========Y= "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">1</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" ||/ | "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">2</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" || 0 "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">3</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" || /|\ "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">4</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" || /| "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">5</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">"/|| "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">6</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">"==============</span><span class="se">\n</span><span class="s">"</span><span class="p">)</span>
</code></pre></div></div>
<p><em>Nota Bene</em>, ces conditions sont décalées de deux “crans” (voir <a href="https://lesbricodeurs.fr/articles/decouvrir-la-programmation-avec-Python/#indentation">indentation</a>) vers la droite. Le premier parce que l’on est dans la boucle <code class="language-plaintext highlighter-rouge">while</code> principale du jeu et le second correspondant au <code class="language-plaintext highlighter-rouge">else</code>.</p>
<p><img src="https://lesbricodeurs.fr/images/tutos/pendu.gif" alt="Pendaison" /></p>
<h3 id="code-complet">Code complet</h3>
<p>Voici le programme complet, qui ajoute quelques éléments:</p>
<ul>
<li><strong>Le choix aléatoire d’un mot</strong>, en utilisant la fonction random.choice() qui permet de sélectionner un mot aléatoirement parmi une liste.</li>
<li><strong>Le nettoyage de l’entrée de l’utilisateur</strong>, pour ne retenir que la première lettre saisie et en minuscule.</li>
<li><strong>Quelques retours à la ligne</strong> pour la lisibilité avec le caractère spécial <code class="language-plaintext highlighter-rouge">\n</code>.</li>
</ul>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">#!/usr/bin/env python3
# -*- coding: utf-8 -*-
</span><span class="s">"""
Created on Tue Mar 24 07:36:15 2020
@author: @Xalava
"""</span>
<span class="kn">import</span> <span class="nn">random</span>
<span class="n">choix</span> <span class="o">=</span> <span class="p">[</span><span class="s">"casserole"</span><span class="p">,</span> <span class="s">"cuillere"</span><span class="p">,</span> <span class="s">"patate"</span><span class="p">,</span> <span class="s">"souris"</span><span class="p">]</span>
<span class="n">solution</span> <span class="o">=</span> <span class="n">random</span><span class="p">.</span><span class="n">choice</span><span class="p">(</span><span class="n">choix</span><span class="p">)</span>
<span class="n">solution</span> <span class="o">=</span> <span class="s">"casserole"</span>
<span class="n">tentatives</span> <span class="o">=</span> <span class="mi">7</span>
<span class="n">affichage</span> <span class="o">=</span> <span class="s">""</span>
<span class="n">lettres_trouvees</span> <span class="o">=</span> <span class="s">""</span>
<span class="k">for</span> <span class="n">l</span> <span class="ow">in</span> <span class="n">solution</span><span class="p">:</span>
<span class="n">affichage</span> <span class="o">=</span> <span class="n">affichage</span> <span class="o">+</span> <span class="s">"_ "</span>
<span class="k">print</span><span class="p">(</span><span class="s">">> Bienvenue dans le pendu <<"</span><span class="p">)</span>
<span class="k">while</span> <span class="n">tentatives</span> <span class="o">></span> <span class="mi">0</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">"</span><span class="se">\n</span><span class="s">Mot à deviner : "</span><span class="p">,</span> <span class="n">affichage</span><span class="p">)</span>
<span class="n">proposition</span> <span class="o">=</span> <span class="nb">input</span><span class="p">(</span><span class="s">"proposez une lettre : "</span><span class="p">)[</span><span class="mi">0</span><span class="p">:</span><span class="mi">1</span><span class="p">].</span><span class="n">lower</span><span class="p">()</span>
<span class="k">if</span> <span class="n">proposition</span> <span class="ow">in</span> <span class="n">solution</span><span class="p">:</span>
<span class="n">lettres_trouvees</span> <span class="o">=</span> <span class="n">lettres_trouvees</span> <span class="o">+</span> <span class="n">proposition</span>
<span class="k">print</span><span class="p">(</span><span class="s">"-> Bien vu!"</span><span class="p">)</span>
<span class="k">else</span><span class="p">:</span>
<span class="n">tentatives</span> <span class="o">=</span> <span class="n">tentatives</span> <span class="o">-</span> <span class="mi">1</span>
<span class="k">print</span><span class="p">(</span><span class="s">"-> Nope</span><span class="se">\n</span><span class="s">"</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o">==</span><span class="mi">0</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" ==========Y= "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">1</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" ||/ | "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">2</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" || 0 "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">3</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" || /|\ "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">4</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">" || /| "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">5</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">"/|| "</span><span class="p">)</span>
<span class="k">if</span> <span class="n">tentatives</span><span class="o"><=</span><span class="mi">6</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">"==============</span><span class="se">\n</span><span class="s">"</span><span class="p">)</span>
<span class="n">affichage</span> <span class="o">=</span> <span class="s">""</span>
<span class="k">for</span> <span class="n">x</span> <span class="ow">in</span> <span class="n">solution</span><span class="p">:</span>
<span class="k">if</span> <span class="n">x</span> <span class="ow">in</span> <span class="n">lettres_trouvees</span><span class="p">:</span>
<span class="n">affichage</span> <span class="o">+=</span> <span class="n">x</span> <span class="o">+</span> <span class="s">" "</span>
<span class="k">else</span><span class="p">:</span>
<span class="n">affichage</span> <span class="o">+=</span> <span class="s">"_ "</span>
<span class="k">if</span> <span class="s">"_"</span> <span class="ow">not</span> <span class="ow">in</span> <span class="n">affichage</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">">>> Gagné! <<<"</span><span class="p">)</span>
<span class="k">break</span>
<span class="k">print</span><span class="p">(</span><span class="s">"</span><span class="se">\n</span><span class="s"> * Fin de la partie * "</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="pour-aller-plus-loin">Pour aller plus loin</h2>
<p>Si vous souhaitez en apprendre plus sur la programmation en Python, et que vous vous intéressez également au <em>développement web</em>, je vous invite à consulter notre série <a href="https://lesbricodeurs.fr/apprendre-a-coder-en-ligne/">apprendre à coder en ligne</a>, qui va s’étoffer dans les semaines à venir.</p>
<p><a href="https://lesbricodeurs.fr/articles/jeu-du-pendu-python/">Le jeu du pendu en Python</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 31 Mar 2020.</p>
https://lesbricodeurs.fr/articles/decouvrir-la-programmation-avec-Python2020-03-30T09:30:00+00:002020-03-30T09:30:00+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>Python est aujourd’hui un des langages de programmation les plus utilisés au monde. Il permet de réaliser des scripts, des sites web, d’analyser des données et même de construire des intelligences artificielles. À la fin de ce tutoriel, vous connaîtrez les premières notions du langage Python et de la programmation. Ces bases ont étés vues pendant la <a href="https://youtu.be/-oeEa8yKVSk?t=227">présentation en direct (livestream)</a> du 26 mars 2020.</p>
<h2 id="environnement">Environnement</h2>
<p>Pour débuter, je vous recommande d’utiliser Repl.it. C’est un service en ligne qui permet d’écrire, exécuter et partager du code. Pas besoin de créer un compte pour essayer, il suffit de suivre <a href="https://repl.it/languages/python3">ce lien</a>. Créer un compte vous permettra de sauvegarder vos créations.</p>
<p>Vous voyez à gauche les fichiers. Le principal fichier est main.py (<em>main</em> signifie principal en anglais). Au milieu se trouve l’éditeur de texte où nous écrirons le programme. À droite vous avez la console où le programme sera exécuté.</p>
<p><img src="https://lesbricodeurs.fr/images/tutos/Python-repl.it.jpg" alt="Repl.it pour python" /></p>
<h2 id="bonjour-python">Bonjour Python</h2>
<p>Première chose dont nous allons avoir besoin est une fonction pour afficher quelque chose dans la console. C’est la fonction <code class="language-plaintext highlighter-rouge">print()</code>, ce qui signifie afficher ou imprimer en anglais. Entre les parenthèses on donne à la fonction ce que l’on souhaite afficher. Ici, on souhaite afficher un texte tel quel. En informatique on parle de <strong>chaîne de caractères</strong> (<em>string</em> en anglais).</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">print</span><span class="p">(</span><span class="s">"Bonjour toi"</span><span class="p">)</span>
</code></pre></div></div>
<p><img src="https://lesbricodeurs.fr/images/tutos/python-2.jpg" alt="Bonjour Python" /></p>
<p>Nous pouvons afficher un texte complet. Pour chaque appel à <code class="language-plaintext highlighter-rouge">print()</code> l’affichage revient à la ligne.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">print</span><span class="p">(</span><span class="s">"Bonjour toi !"</span><span class="p">)</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Bienvenue dans ce premier tutoriel Python."</span><span class="p">)</span>
</code></pre></div></div>
<h2 id="variables-et-valeurs">Variables et valeurs</h2>
<p>Pour pouvoir enregistrer le texte et le réutiliser pendant l’exécution du programme, nous allons utiliser une variable. Une variable est une boîte dans laquelle on peut enregistrer une information. Ici, nous allons enregistrer le texte d’accueil “Bonjour toi”. La valeur “Bonjour toi” est <strong>affectée</strong> à la variable <code class="language-plaintext highlighter-rouge">message</code> que nous venons de créer.</p>
<p><img src="https://lesbricodeurs.fr/images/tutos/variable.gif" alt="Variable" /></p>
<p>Dès lors, nous pouvons afficher le contenu de la variable message:</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">message</span> <span class="o">=</span> <span class="s">"Bonjour toi"</span>
<span class="k">print</span><span class="p">(</span><span class="n">message</span><span class="p">)</span>
</code></pre></div></div>
<p>Nous avons choisi de nommer notre variable “message” mais nous aurions pu lui donner n’importe quel nom, comme “accueil” ou “truc”. On choisi généralement un nom qui permet de comprendre ce que contient la variable.</p>
<div class="notice notice--warning">
<p>Les noms de variables sont composés de lettres (sans accents) et chiffres (mais pas en première position). On ne peut pas utiliser d’espaces, alors pour séparer les mots on utilise le symbole “_”.</p>
<p>Attention aux majuscules et minuscules. “Message” et “message” sont deux variables différentes pour Python.</p>
</div>
<h2 id="interagir-avec-lutilisateur">Interagir avec l’utilisateur</h2>
<p>Pour que le programme soit un peu plus personnalisé et interactif, nous allons demander à l’utilisateur son prénom. Pour ceci, nous allons utiliser la fonction <code class="language-plaintext highlighter-rouge">input()</code> (qui signifie “entrée” en anglais). La fonction prend en paramètre un texte à afficher, par exemple pour poser une question.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">message</span> <span class="o">=</span> <span class="s">"Bonjour "</span>
<span class="n">prenom</span> <span class="o">=</span> <span class="nb">input</span><span class="p">(</span><span class="s">"Quel est ton prénom? "</span><span class="p">)</span>
<span class="k">print</span><span class="p">(</span><span class="n">message</span> <span class="o">+</span> <span class="n">prenom</span><span class="p">)</span>
</code></pre></div></div>
<div class="notice notice--warning">
<p>Comme les variables sont des chaînes de caractères le symbole <code class="language-plaintext highlighter-rouge">+</code> signifie de les mettre bout à bout l’une après l’autre. On appelle cette action une <strong>concaténation</strong>. Si les deux variables contiennent un nombre, <code class="language-plaintext highlighter-rouge">+</code> opère une addition simple.</p>
</div>
<h2 id="les-conditions">Les conditions</h2>
<p>Enfin, pour être plus chaleureux, si le programme reconnaît le prénom il affichera un message d’accueil supplémentaire. Pour cela nous utiliserons le mot clé <code class="language-plaintext highlighter-rouge">if</code> (“si” en anglais). Si le prénom est “Xavier”, nous dirons “ravi de te revoir”. Vous pouvez écrire votre prénom si vous préferez…</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">message</span> <span class="o">=</span> <span class="s">"Bonjour "</span>
<span class="n">prenom</span> <span class="o">=</span> <span class="nb">input</span><span class="p">(</span><span class="s">"Quel est ton prénom? "</span><span class="p">)</span>
<span class="k">print</span><span class="p">(</span><span class="n">message</span> <span class="o">+</span> <span class="n">prenom</span><span class="p">)</span>
<span class="k">if</span> <span class="n">prenom</span> <span class="o">==</span> <span class="s">"Xavier"</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Ravi de te revoir"</span><span class="p">)</span>
</code></pre></div></div>
<p>Il est important de noter la syntaxe propre au langage python. La première ligne indique la <strong>condition</strong> (SI le prénom de l’utilisateur est “Xavier”), puis après les deux points et l’espacement sur la gauche, les <strong>instructions</strong> à executer (affiche “Ravi de te revoir” et affiche “par contre tu es décoiffé”). Tout ce qui sera dans le même alignement sera exécuté dans les mêmes conditions.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">message</span> <span class="o">=</span> <span class="s">"Bonjour "</span>
<span class="n">prenom</span> <span class="o">=</span> <span class="nb">input</span><span class="p">(</span><span class="s">"Quel est ton prénom? "</span><span class="p">)</span>
<span class="k">print</span><span class="p">(</span><span class="n">message</span> <span class="o">+</span> <span class="n">prenom</span><span class="p">)</span>
<span class="k">if</span> <span class="n">prenom</span> <span class="o">==</span> <span class="s">"Xavier"</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Ravi de te revoir"</span><span class="p">)</span>
<span class="k">print</span><span class="p">(</span><span class="s">"par contre tu es décoiffé"</span><span class="p">)</span>
</code></pre></div></div>
<p>Le symbole <code class="language-plaintext highlighter-rouge">==</code> compare la variable <code class="language-plaintext highlighter-rouge">prenom</code> à la chaîne “Xavier”. On écrit deux fois le symbole égal pour distinguer du <code class="language-plaintext highlighter-rouge">=</code> simple qui sert pour l’affectation d’une variable comme nous avons vu plus haut.</p>
<p>Rien qu’avec ça, vous pouvez déjà construire votre propre jeu “Choisi ta propre aventure”. Vous racontez une histoire avec des print(). Puis quand l’utilisateur doit faire un choix, par exemple porte de droite ou porte de gauche, vous racontez la suite de l’histoire en fonction du choix. Vous pouvez même compter les points de vie avec une variable !</p>
<div class="notice notice--warning">
<div id="indentation"></div>
<p>L’espacement sur la gauche s’appelle “l’<strong>indentation</strong>” (on peut utiliser 2 ou 4 espaces, ou la touche “tab”). C’est important pour le langage Python. Dans notre exemple, c’est par ce que l’on indente l’appel à la fonction<code class="language-plaintext highlighter-rouge">print("Ravi de te revoir")</code>, que l’ordinateur comprendra qu’elle est liée à la condition <code class="language-plaintext highlighter-rouge">if prenom == "Xavier"</code>. Sinon, l’ordinateur afficherait “Ravi de te revoir” quel que soit le prénom de l’utilisateur !</p>
</div>
<h2 id="première-analyse-de-texte-en-python">Première analyse de texte en Python</h2>
<p>Un des principaux usages de ce langage est l’analyse de données, de textes, d’images… Ici, nous allons faire une analyse très simple du prénom de l’utilisateur.</p>
<p>La première analyse porte sur le nombre de fois que l’on trouve la lettre ‘e’. Pour commencer, nous allons parcourir les lettres du prénom. Nous recourons au mot clé <code class="language-plaintext highlighter-rouge">for</code> (“pour” en anglais) qui execute des instructions pour chaque lettre.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="n">x</span> <span class="ow">in</span> <span class="n">prenom</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
</code></pre></div></div>
<p>Pour chaque lettre contenue dans la variable <code class="language-plaintext highlighter-rouge">prenom</code>, ce code l’enregistre dans la variable nommée “x”, puis affiche le contenu de la variable <code class="language-plaintext highlighter-rouge">x</code>. Comme les instructions sont répétées on parle de <strong>boucle</strong>. La syntaxe est similaires à celle de la condition <code class="language-plaintext highlighter-rouge">if</code>, avec une ligne qui contrôle le fonctionnement de cette partie, <code class="language-plaintext highlighter-rouge">:</code>, retour à la ligne et l’indentation (les deux espaces ou la tabulation vers la droite).</p>
<p>Maintenant pour compter les “e” nous allons créer une nouvelle variable <code class="language-plaintext highlighter-rouge">compteur</code> à laquelle nous ajouterons 1 à chaque fois que nous rencontrons un “e” ou un “E”.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="n">x</span> <span class="ow">in</span> <span class="n">prenom</span><span class="p">:</span>
<span class="k">print</span><span class="p">(</span><span class="n">x</span><span class="p">)</span>
<span class="k">if</span> <span class="n">x</span> <span class="o">==</span> <span class="s">'e'</span> <span class="ow">or</span> <span class="n">x</span> <span class="o">==</span> <span class="s">'E'</span><span class="p">:</span>
<span class="n">compteur</span> <span class="o">=</span> <span class="n">compteur</span> <span class="o">+</span> <span class="mi">1</span>
</code></pre></div></div>
<p>On peut alors afficher le résultat. La fonction <code class="language-plaintext highlighter-rouge">print()</code> peut afficher plusieurs éléments sur la même ligne, si on les sépare par une virgule. Le programme complet est alors :</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">print</span><span class="p">(</span><span class="s">"Nombre de e :"</span><span class="p">,</span><span class="n">compteur</span><span class="p">)</span>
</code></pre></div></div>
<p>A la fin de l’exécution du programme, les variables contiennent les valeurs suivantes. Vous pouvez le tester en tapant dans la console <code class="language-plaintext highlighter-rouge">print()</code> avec le nom de la variable en paramètre <code class="language-plaintext highlighter-rouge">print(compteur)</code>. Par exemple avec le prénom Emilie:</p>
<table>
<thead>
<tr>
<th>Variable</th>
<th>Contenu</th>
</tr>
</thead>
<tbody>
<tr>
<td>prenom</td>
<td>“Emilie”</td>
</tr>
<tr>
<td>message</td>
<td>“Bonjour “</td>
</tr>
<tr>
<td>compteur</td>
<td>2</td>
</tr>
<tr>
<td>x</td>
<td>“e”</td>
</tr>
</tbody>
</table>
<h2 id="lister-les-lettres-dans-un-mot">Lister les lettres dans un mot</h2>
<p>Maintenant nous allons établir la liste des lettres utilisées dans le prénom. Pour ceci, nous créons une variable <code class="language-plaintext highlighter-rouge">liste</code>.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">liste</span> <span class="o">=</span> <span class="s">""</span>
</code></pre></div></div>
<p>Puis, comme dans le cas précédent, pour chaque lettre du prénom, nous alors essayer d’évaluer si la lettre est dans notre liste. Plutôt que le <code class="language-plaintext highlighter-rouge">==</code>, cette fois nous utilisons le mot clé <code class="language-plaintext highlighter-rouge">in</code> qui permet de vérifier si l’élement est contenu dans la liste. Puisque l’on souhaite l’ajouter si il n’est pas dans la liste, on ajoute le mot clé de négation <code class="language-plaintext highlighter-rouge">not</code>.</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">for</span> <span class="n">y</span> <span class="ow">in</span> <span class="n">prenom</span><span class="p">:</span>
<span class="k">if</span> <span class="n">y</span> <span class="ow">not</span> <span class="ow">in</span> <span class="n">liste</span><span class="p">:</span>
<span class="n">liste</span> <span class="o">=</span> <span class="n">liste</span> <span class="o">+</span> <span class="n">y</span>
</code></pre></div></div>
<p>Et voilà le programme complet !</p>
<div class="language-python highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="n">message</span> <span class="o">=</span> <span class="s">"Bonjour "</span>
<span class="n">prenom</span> <span class="o">=</span> <span class="nb">input</span><span class="p">(</span><span class="s">"Quel est ton prenom? "</span><span class="p">)</span>
<span class="k">print</span><span class="p">(</span> <span class="n">message</span> <span class="o">+</span> <span class="n">prenom</span><span class="p">)</span>
<span class="n">compteur</span> <span class="o">=</span> <span class="mi">0</span>
<span class="k">for</span> <span class="n">lettre</span> <span class="ow">in</span> <span class="n">prenom</span><span class="p">:</span>
<span class="k">if</span> <span class="n">x</span> <span class="o">==</span> <span class="s">'e'</span> <span class="ow">or</span> <span class="n">x</span> <span class="o">==</span> <span class="s">'E'</span><span class="p">:</span>
<span class="n">compteur</span> <span class="o">=</span> <span class="n">compteur</span> <span class="o">+</span> <span class="mi">1</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Nombre de e :"</span><span class="p">,</span><span class="n">compteur</span><span class="p">)</span>
<span class="n">liste</span> <span class="o">=</span> <span class="s">""</span>
<span class="k">for</span> <span class="n">y</span> <span class="ow">in</span> <span class="n">prenom</span><span class="p">:</span>
<span class="k">if</span> <span class="n">y</span> <span class="ow">not</span> <span class="ow">in</span> <span class="n">liste</span><span class="p">:</span>
<span class="n">liste</span> <span class="o">=</span> <span class="n">liste</span> <span class="o">+</span> <span class="n">y</span>
<span class="k">print</span><span class="p">(</span><span class="s">"Lettres utilisées :"</span><span class="p">,</span><span class="n">liste</span> <span class="o">+</span> <span class="s">" "</span><span class="p">)</span>
</code></pre></div></div>
<p>Son exécution donne</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>Quel est ton prenom? Eleonore
Nombre de e : 3
Lettres utilisées : Eleonr
</code></pre></div></div>
<div class="notice notice--warning">
<p>Notre programme considère les majuscules et les minuscules comme des lettres différentes. Une façon de résoudre le problème serait d’utiliser la méthode <code class="language-plaintext highlighter-rouge">prenom.lower()</code> qui nous donne la version en minuscules du contenu de <code class="language-plaintext highlighter-rouge">prenom</code>, mais nous le reverrons plus tard.</p>
</div>
<h2 id="aller-plus-loin">Aller plus loin</h2>
<p>Dans la suite du livestream et l’article suivant nous verrons comment réaliser un <a href="https://lesbricodeurs.fr/articles/jeu-du-pendu-python/">jeu du pendu</a>. Nous utiliserons les notions que nous venons de voir.</p>
<p>Ensuite, je vous recommande fortement de vous donner un objectif, par exemple un petit programme qui compte le nombre de répétitions d’une lettre dans un texte… La programmation est beaucoup plus intéressante quand on crée en suivant sa propre créativité.</p>
<p>En termes d’outils, si vous préférez un logiciel installé sur votre ordinateur, je vous recommande <a href="https://www.spyder-ide.org/">spyder</a> qui propose un environnement complet, léger et gratuit. Vous pouvez l’installer avec <a href="https://www.anaconda.com/distribution/">Anaconda</a> pour avoir toute la panoplie d’un “data scientist”.</p>
<p>Si vous souhaitez en apprendre plus sur la programmation en Python, et que vous vous intéressez également au <em>développement web</em>, je vous invite à consulter notre série <a href="https://lesbricodeurs.fr/apprendre-a-coder-en-ligne/">apprendre à coder en ligne</a>, qui va s’étoffer dans les semaines à venir.</p>
<p>A très vite!</p>
<p><a href="https://lesbricodeurs.fr/articles/decouvrir-la-programmation-avec-Python/">Découvrir la programmation avec Python</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 30 Mar 2020.</p>
https://lesbricodeurs.fr/articles/creer-premiere-page-web2020-03-21T18:00:00+00:002020-03-21T18:00:00+00:00Sylvain Schellenbergerhttps://lesbricodeurs.fr
<p>Ce Jeudi 19 Mars 2020, Flavien et Sylvain ont présenté en direct comment fonctionne le Web, et comment écrire les pages HTML qui le constituent. Tu peux voir, ou revoir, cette présentation à l’<a href="https://www.youtube.com/watch?v=b3m6CFbikcA">adresse suivante</a>.</p>
<p>Si tu préfères la lecture, l’article suivant en est un résumé:</p>
<h2 id="quest-ce-que-le-web-">Qu’est ce que le Web ?</h2>
<p>Le <em>World Wide Web</em> est souvent confondu avec <em>Internet</em>, c’est tout à fait normal car <strong>le Web fait partie d’Internet</strong>. Mais qu’est-ce donc qu’Internet du coup ? En fait il s’agit d’un <strong>réseau mondial</strong> d’ordinateurs souhaitant communiquer entre eux.</p>
<p><img src="../../images/2020-03-21-creer-premiere-page-web/web-001.jpg" alt="Deux ordinateurs voulant communiquer." /></p>
<p>Dans le monde des humains, nous avons établi différents <em>protocoles de communication</em> nous permettant de nous comprendre: la parole, la gestuelle, l’écriture, le dessin… Dans le monde des ordinateurs, c’est *presque* pareil.</p>
<p><img src="../../images/2020-03-21-creer-premiere-page-web/web-002.jpg" alt="Il faut que les ordinateurs utilisent le même protocole pour se comprendre." /></p>
<p>Internet a défini énormément de protocoles différents (pour les mails, pour les transferts de fichiers, pour les vérifications d’identité des ordinateurs, etc). Dans le cas du Web, on utilise le <strong>protocole HTTP</strong> (pour <strong>Hyper Text Transfer Protocol</strong>).</p>
<p><img src="../../images/2020-03-21-creer-premiere-page-web/web-003.jpg" alt="Un ordinateur peut en appeler un autre s'ils utilisent le même protocole." /></p>
<p>Le protocole HTTP défini deux rôles distincts pour les ordinateurs : celui du <strong>client</strong> et celui du <strong>serveur</strong>. Il fonctionne en deux temps :</p>
<p><img src="../../images/2020-03-21-creer-premiere-page-web/web-004.jpg" alt="Un ordinateur client effectue une requête à un ordinateur serveur." /></p>
<p>Premièrement, le client envoie une <strong>requête</strong> au serveur. Dans notre utilisation quotidienne, il s’agit de l’<strong>adresse d’un site Web</strong> que nous écrivons dans la barre d’adresse de notre <strong>navigateur Web</strong>. L’ordinateur que nous utilisons comprend alors qu’il agit comme client, et transfère la requête au serveur qui correspond à cette adresse.</p>
<p><img src="../../images/2020-03-21-creer-premiere-page-web/web-005.jpg" alt="Un ordinateur serveur apporte la réponse au client." /></p>
<p>Puis le serveur retourne une <strong>réponse</strong> au client. Cette réponse se fait généralement sous la forme d’une <strong>page HTML</strong>. Elle est interprétée par le navigateur Web pour afficher la page demandée.</p>
<p><img src="../../images/2020-03-21-creer-premiere-page-web/web-006.jpg" alt="Le serveur a retourné une page HTML au client." /></p>
<h2 id="comment-écrire-une-page-html">Comment écrire une page HTML</h2>
<p>Une page HTML, c’est simplement un <strong>fichier de texte</strong> comme tu as déjà pu en lire beaucoup. Certains portent l’extension “.txt” ou “.doc”. Une page HTML de son côté porte l’extension “.html”.</p>
<h3 id="choisir-un-éditeur-de-texte">Choisir un éditeur de texte</h3>
<p>C’est pour ça qu’il te faudra un logiciel d’<strong>édition de texte</strong> : le bloc-note de Windows ferait parfaitement l’affaire par exemple. Par contre, tu ne peux pas utiliser un logiciel de <em>traitement de texte</em> comme Microsoft Word ou Libre Office. Ces derniers te permettent de mettre en forme le texte que tu as écrit avec différentes polices, tailles de caractères, couleurs et insertions d’images mais le format d’enregistrement ne correspondra pas aux normes HTML.</p>
<p>Dans ma présentation j’ai utilisé Atom<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup> qui présente toutes les fonctionnalités que les développeur·euse·s apprécient lorsqu’il·elle·s écrivent du code: auto-complétion, coloration syntaxique, indentation automatique, … Tu ne comprends peut-être pas ce que ces mots veulent dire pour le moment, mais crois-moi, après y avoir goûté, tu ne pourras plus t’en passer !</p>
<div class="notice notice--warning">
<p>Un bon nombre d’éditeurs de textes existent, malgré des interfaces différences, tu retrouveras beaucoup de similarités dans les fonctionnalités qu’ils proposent. Le mieux est d’en tester quelques uns et de choisir ton préféré.</p>
<p>Editeurs alternatifs :</p>
<ul>
<li>Sublime text : <a href="https://notepad-plus-plus.org/">https://www.sublimetext.com/</a></li>
<li>Brackets: <a href="http://brackets.io/">http://brackets.io/</a></li>
<li>NotePad++ : <a href="https://notepad-plus-plus.org/">https://notepad-plus-plus.org/</a></li>
</ul>
</div>
<h3 id="html-un-langage-structuré-par-des-balises">HTML: Un langage structuré par des balises</h3>
<p>Le HTML est un <strong>langage de description de document</strong> qui permet au navigateur de comprendre ce qu’il est en train de lire. Cela se fait en entourant le texte que l’on écrit de <strong>balises</strong>, qui sont composées d’une ou plusieurs lettres, entourée·s de chevrons.</p>
<p>Par exemple, pour que tout le monde soit bien au courant que nous sommes en train d’écrire une page HTML, on débute toujours par 2 balises :</p>
<ul>
<li><code class="language-plaintext highlighter-rouge"><!DOCTYPE html></code> : déclarant l’utilisation du format HTML 5</li>
<li><code class="language-plaintext highlighter-rouge"><html></code> : déclarant le début de la page. On écrit la page, puis on referme avec la balise <code class="language-plaintext highlighter-rouge"></html></code>, afin que l’on comprenne que la page est terminée.</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p>Bon, on a déclaré que ce fichier est une page HTML, par contre, actuellement elle est vide!</p>
<h3 id="communiquer-avec-les-machines">Communiquer avec les machines</h3>
<p>J’ai dit qu’Internet était un réseau d’ordinateurs communiquant entre eux et que le Web était une sous-partie d’Internet. Cela veut dire que chaque page HTML doit être comprise par les ordinateurs qui les reçoivent.</p>
<p>L’<strong>en-tête</strong> est la partie que les navigateurs lisent pour comprendre quelle page le serveur leur a renvoyé. Il est de bon ton de donner un titre à sa page, que l’on intégrera dans la balise <code class="language-plaintext highlighter-rouge"><title></code>:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Comment créer sa page HTML ?<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><html></span>
</code></pre></div></div>
<p>Ma page s’est complexifiée, mais pas de panique, je t’explique tout : nous avons affaire à des <strong>balises imbriquées</strong>. Cela permet de définir une structure logique pour ma page HTML :</p>
<ul>
<li>J’ai écrit le titre de la page entre une balise ouvrante <code class="language-plaintext highlighter-rouge"><title></code> et une balisse fermante <code class="language-plaintext highlighter-rouge"></title></code> pour que le navigateur comprenne que “Comment créer sa page HTML ?” est le titre de ma page HTML.</li>
<li>Ces balises sont imbriquées entre les balises <code class="language-plaintext highlighter-rouge"><head></code> et <code class="language-plaintext highlighter-rouge"></head></code>, qui indiquent au navigateur l’en-tête dont je t’ai parlé, qui est la partie de la page web qui lui est destinée.</li>
<li>Ces balises <code class="language-plaintext highlighter-rouge"><head></code> sont elles mêmes imbriquées entre les balises <code class="language-plaintext highlighter-rouge"><html></code> qui définissent le début et la fin de ma page web.</li>
</ul>
<p>On dit que la balise <code class="language-plaintext highlighter-rouge"><html></code> est la <strong>balise parente</strong> de la balise <code class="language-plaintext highlighter-rouge"><head></code>, qui est elle même parente de la balise <code class="language-plaintext highlighter-rouge"><title></code>. Dans le sens inverse, la balise <code class="language-plaintext highlighter-rouge"><title></code> est la <strong>balise fille</strong> de la balise <code class="language-plaintext highlighter-rouge"><head></code> et ainsi de suite.</p>
<div class="notice notice--warning">
<p>Le format HTML ayant été inventé par des anglophones, tu te rendras vite compte que tous les noms des balises sont en anglais, comme “title” pour le titre, et “head” pour l’en-tête.</p>
</div>
<h3 id="communiquer-avec-les-humains">Communiquer avec les humains</h3>
<p>Le <strong>corps</strong> de ma page est la partie qui est destinée à être lue par les humains:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Comment créer sa page HTML?<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Comment créer sa page HTML?<span class="nt"></h1></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p>On voit ici que les balises <code class="language-plaintext highlighter-rouge"><head></code> et <code class="language-plaintext highlighter-rouge"><body></code> se côtoient. On dit alors qu’elles sont <strong>de même niveau</strong>. C’est à dire qu’elle définissent deux parties distinctes de ma page. Comme je l’ai expliqué un peu plus haut, <code class="language-plaintext highlighter-rouge"><head></code> est l’en-tête, destiné aux navigateurs web, tandis que <code class="language-plaintext highlighter-rouge"><body></code> est le corps, destiné aux internautes.</p>
<p>La balise <code class="language-plaintext highlighter-rouge"><h1></code>, imbriquée entre les balises <code class="language-plaintext highlighter-rouge"><body></code>, contient le titre de ma page, identique à celui contenu dans ma balise <code class="language-plaintext highlighter-rouge"><title></code>. L’un est destiné aux ordinateurs, l’autre aux humains.</p>
<div class="notice notice--warning">
<p>“H1” est l’acronyme de <em>heading 1</em>, soit un “titre de niveau 1”, ce qui sous-entend qu’il existe d’autres niveaux de titres…</p>
</div>
<p><strong>Mini-TP:</strong></p>
<ol>
<li>Copie/colle ce bout de page HTML dans ton éditeur de texte</li>
<li>Modifie le contenu de la balise <code class="language-plaintext highlighter-rouge"><title></code> ou de la balise <code class="language-plaintext highlighter-rouge"><h1></code> afin que les deux soit différents</li>
<li>Enregistre le fichier et ouvre le avec ton navigateur web</li>
<li>Que remarques-tu?<sup id="fnref:12" role="doc-noteref"><a href="#fn:12" class="footnote" rel="footnote">2</a></sup></li>
</ol>
<h3 id="la-sémantique-des-balises">La sémantique des balises</h3>
<p>Nous avons pu entrevoir quelques balises, mais il en existe beaucoup plus ! Pourquoi avoir besoin de balises différentes ? Comme je l’ai dit, le HTML permet de structurer la page Web. La balise permet au navigateur de comprendre quelle genre d’information est transmise à l’utilisateur, car le navigateur ne comprend pas le langage des humains.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Comment créer sa page HTML?<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><h1></span>Comment créer sa page HTML?<span class="nt"></h1></span>
<span class="nt"><p></span>Lorsque l'on écrit des page HTML, il est important de respecter l'imbrication des balises !<span class="nt"></p></span>
<span class="nt"><p></span>Les paragraphes peuvent se succéder.<span class="nt"></p></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p>Dans l’exemple ci-dessus, le corps de notre page contient un titre, inclus dans la balise <code class="language-plaintext highlighter-rouge"><h1></code>, et un paragraphe, dans la balise <code class="language-plaintext highlighter-rouge"><p></code>. C’est ce que l’on appelle la <strong>sémantique</strong> du HTML : à chaque balise son utilisation spécifique.</p>
<p>Comme il y a énormément de balises, pour beaucoup de cas différents, il est utile de pouvoir se référer à une documentation lorsque l’on ne sait pas quelle balise serait la plus appropriée. La référence ultime dans le domaine est le Mozilla Developers Network<sup id="fnref:2" role="doc-noteref"><a href="#fn:2" class="footnote" rel="footnote">3</a></sup>, très complet, traduit en français et toujours à jour. Si tu souhaites développer ton site internet, tu t’y référeras souvent.</p>
<div class="notice notice--warning">
<p>Je prend ici les dires de la fondation Mozilla pour argent comptant, mais ce n’est pas elle qui définit les normes du language HTML: c’est le World Wide Web Consortium (W3C). Cependant, je te garantis que la documentation du Mozilla Developers Network est beaucoup plus facile à lire que les documents de spécification du W3C.</p>
</div>
<p><strong>Mini-TP:</strong></p>
<p>Dans l’exemple ci-dessus, je veux ajouter un titre pour le chapitre que je suis en train d’écrire: “Structure d’une page HTML”, après le titre de la page, mais avant les deux paragraphes. Comment faire? (astuce: tu peux t’aider du <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Mozilla Developers Network</a>) <sup id="fnref:13" role="doc-noteref"><a href="#fn:13" class="footnote" rel="footnote">4</a></sup></p>
<h3 id="relier-les-pages-entre-elles-avec-des-liens-hypertextes">Relier les pages entre elles avec des liens hypertextes</h3>
<p>Une présentation du langage HTML ne peut pas se passer sans présentation des <strong>liens hypertextes</strong> (ou hyperliens, HTML signifiant <em>HyperText Markup Language</em>) !</p>
<p>En effet, lorsque nous naviguons sur le Web, nous n’entrons pas l’adresse de chaque page que nous souhaitons consulter dans la barre d’adresse du navigateur, ce serait fastidieux ! A la place, nous cliquons sur des liens hypertextes qui se chargent de nous diriger vers d’autres pages HTML. L’ensemble de toutes les pages interconnectées formant une sorte de “toile d’araignée mondiale” (N.D.L.R.: c’est la traduction de <em>World Wide Web</em> en français).</p>
<p><img src="../../images/2020-03-21-creer-premiere-page-web/web-007.jpg" alt="Les liens hypertextes connectent les pages HTML entre elles" /></p>
<p>Un lien hypertexte se compose de deux parties distinctes :</p>
<ul>
<li>sa <strong>cible</strong> : qui permet d’indiquer à l’internaute où ce lien est supposé l’envoyer</li>
<li>son <strong>libellé</strong> : qui permet d’afficher le texte affiché pour l’internaute. Il s’agit du texte contenu dans une balise <code class="language-plaintext highlighter-rouge"><a></code>:</li>
</ul>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><a</span> <span class="na">href=</span><span class="s">"https://lesbricodeurs.fr"</span><span class="nt">></span>Un activitié proposée par Les Bricodeurs.<span class="nt"></a></span>
</code></pre></div></div>
<p>L’on voit également que la balise <code class="language-plaintext highlighter-rouge"><a></code> contient d’autres informations à l’intérieur des chevrons : il s’agit d’un <strong>attribut HTML</strong>. L’attribut <code class="language-plaintext highlighter-rouge">href</code> permet de préciser la <strong>cible</strong> du lien hypertexte. C’est l’adresse vers laquelle l’internaute sera redirigé.</p>
<p>Lorsque l’internaute clique sur un lien hypertexte dans son navigateur web, la <strong>valeur</strong> de l’attribut <code class="language-plaintext highlighter-rouge">href</code> (la partie qui suit le symbole “=” et est entourée de guillemets) est importée dans la barre d’adresse du navigateur, qui va effectuer une nouvelle requête HTTP à un serveur, qui lui renverra une autre page web.</p>
<h2 id="mettre-en-forme-le-texte-avec-du-css">Mettre en forme le texte avec du CSS</h2>
<p>Jusqu’à maintenant, je t’ai parlé de la manière de structurer l’information que tu veux communiquer à travers ta page HTML. Tu as pu observer que le navigateur affiche différemment les titres des paragraphes à partir du moment que l’on utilise les bonnes balises. Mais tu t’aperçois que la page HTML que j’ai écrite ne ressemble pas vraiment à celles que tu as l’habitude de consulter en naviguant sur le Web.</p>
<p>Comme les écrivains séparent le fond de la forme lorsqu’ils écrivent un roman, les développeurs web séparent le <strong>contenu</strong> du <strong>style</strong> d’une page Web. Le contenu, on l’a vu, est structuré dans la page HTML. Le style quant à lui, est défini dans une <strong>feuille de style CSS</strong>.</p>
<h3 id="utiliser-une-feuille-de-style-dans-une-page-web">Utiliser une feuille de style dans une page Web</h3>
<p>Pour que le navigateur comprenne quelles règles de style il doit utiliser, il faut lui expliquer où trouver la bonne feuille de style. Cela se fait en ajoutant une balise <code class="language-plaintext highlighter-rouge"><link></code> dans l’en-tête de la page HTML.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Comment créer sa page HTML?<span class="nt"></title></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"style.css"</span><span class="nt">/></span>
<span class="nt"></head></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p>Cette balise te paraît étrange ? En effet, je n’ai pas besoin de la faire suivre d’une balise fermante, elle est <strong>auto-fermante</strong> (on dit aussi qu’il s’agit d’une <em>balise orpheline</em>). Ce qui nous intéresse ici ce n’est pas son contenu, mais bien ses deux attributs:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">rel="stylesheet"</code> explicite au navigateur la nature de la ressource que l’on veut lier à la page HTML. Cela revient à dire: “Attention, je lie une feuille de style à ma page HTML.”</li>
<li><code class="language-plaintext highlighter-rouge">href="style.css"</code> est l’adresse à laquelle se trouve la feuille de style en question. Je ne veux pas rentrer ici dans les détails de la résolution d’une adresse, mais sache juste que pour que ce code là fonctionne, il faut que la feuille de style s’appelle “style.css” et soit exactement dans le même dossier que la page HTML que je suis en train d’écrire.</li>
</ul>
<h3 id="anatomie-dune-règle-css">Anatomie d’une règle CSS</h3>
<p>Si tu as fait la manipulation de ton côté, tu risques d’être un peu déçu: actuellement cette toute nouvelle feuille de style ne change absolument pas la page HTML dans ton navigateur. C’est tout à fait normal, car la feuille de style est vide ! Il faut donc inclure ce que l’on appelle des <strong>règles CSS</strong>.</p>
<p>Si, par exemple, je veux centrer le texte de ma page web, je vais écrire dans ma feuille de style:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">body</span> <span class="p">{</span>
<span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Tout cela diffère radicalement de la manière d’écrire du HTML, ceci dit, tu dois quand même reconnaître un mot: “body”. Et oui, cela désigne le <em>corps</em> de ma page HTML. En utilisant le nom de cette balise, je peux appliquer la règle suivante à tout le texte contenu dans la balise <code class="language-plaintext highlighter-rouge"><body></code> de ma page web. Mais également à tout le texte contenu dans les balises imbriquées dans ma balise <code class="language-plaintext highlighter-rouge"><body></code>, ainsi que les balises imbriquées dans ces balises, etc. On dit que les balises <strong>héritent</strong> des règles CSS de leur balises parentes.</p>
<p>Cette première partie, qui désigne l’élément HTML sur lequel appliquer ma règle CSS est appelé le <strong>sélecteur</strong>. La règle se compose de deux autres parties:</p>
<p>La <strong>propriété</strong> <code class="language-plaintext highlighter-rouge">text-align</code>, désigne ce que je veux modifier lors de l’affichage de ma page web, ici il s’agit de l’alignement du texte.</p>
<p>Après les symbole <code class="language-plaintext highlighter-rouge">:</code>, j’ai écrit la nouvelle <strong>valeur</strong> pour la propriété que j’ai choisie. Ici je décide d’utiliser <code class="language-plaintext highlighter-rouge">center</code> pour indiquer au navigateur de centrer le texte.</p>
<p>Les propriétés et leurs valeurs sont extrêmement nombreuses, et encore une fois, la documentation du Mozilla Developers Network<sup id="fnref:3" role="doc-noteref"><a href="#fn:3" class="footnote" rel="footnote">5</a></sup> te sera d’une aide précieuse !</p>
<p><strong>Note:</strong> CSS signifie <em>Cascading StyleSheets</em>, ce qui se traduit par “feuilles de style en cascade”. La “cascade” désigne ici cette faculté des règles CSS de se propager d’une balise aux balises imbriquées…</p>
<p><strong>Mini-TP:</strong></p>
<p>Pour que l’on voit bien mes titres, j’aimerais qu’ils soient de couleur rouge. Quelle règle CSS devrais-je écrire dans ma feuille de style?<sup id="fnref:14" role="doc-noteref"><a href="#fn:14" class="footnote" rel="footnote">6</a></sup></p>
<h2 id="le-travail-de-lintégrateurtrice-web">Le travail de l’intégrateur·trice Web</h2>
<p>Le·la spécialiste des pages web bien structurées et agréables à l’oeil, s’appelle l’<em>intégrateur·trice web</em>. Sa connaissance des propriétés CSS et des balises HTML lui permet de coller au pixel près à la vision du·de la web designer.</p>
<p>Ce·tte web designer est chargé·e de produire une <strong>maquette graphique</strong> (souvent sous forme d’un fichier Photoshop) qu’il·elle donnera à l’intégrateur·trice , chargé·e de l’<strong>implémentation</strong> de cette maquette: transformer ces images en page·s web fonctionnelle·s.</p>
<p>Ainsi, si je reçois la maquette suivante, récupérée sur le Blog du Web Design<sup id="fnref:4" role="doc-noteref"><a href="#fn:4" class="footnote" rel="footnote">7</a></sup>, je commence à l’analyser:</p>
<p><img src="../../images/2020-03-21-creer-premiere-page-web/bdw-tendance-ux-2020-3.jpg" alt="Inspiration trouvée sur le Blog du Web Design" /></p>
<ul>
<li>Je m’aperçois qu’il y a trois parties qui sont situées côte à côte. Cela me fait penser à la propriété CSS <code class="language-plaintext highlighter-rouge">display</code>, qui me permet de choisir l’agencement visuel de mes éléments HTML.</li>
<li>Il y a des boutons qui doivent probablement rediriger vers d’autres pages web, j’utiliserais des balises <code class="language-plaintext highlighter-rouge"><a></code>.</li>
<li>Les textes de ces boutons sont surlignés avec la couleur orange, je vais devoir changer leur propriété <code class="language-plaintext highlighter-rouge">background-color</code>…</li>
</ul>
<p>Faire l’intégration complète de cette maquette correspondrait à une matinée de travail pour un·e intégrateur·trice, alors je ne vais pas te la montrer en direct, mais je pense que tu as compris le principe.</p>
<h2 id="pour-aller-plus-loin">Pour aller plus loin</h2>
<p>Le texte de cet article commence à être un peu long, et j’aurais probablement besoin de dizaines d’autres articles si je devais t’expliquer tout ce qu’il y a a savoir sur l’intégration web. Fort heureusement, le Web regorge justement de ressources pédagogiques pour apprendre à intégrer, designer et programmer de chez soi, et certains de nos bricodeurs ont décidé de commenter celles qui leur ont personnellement servi dans <a href="/articles/apprendre-coder-chez-toi/">un précédent article</a>.</p>
<p>Tu peux aussi retrouver le code que j’ai écrit en direct <a href="https://codepen.io/SleuvinS/pen/dyojpyB">sur CodePen</a>. CodePen est un éditeur de texte en ligne spécialisé pour l’écriture de HTML, de CSS et de Javascript (un langage de programmation que Les Bricodeurs te présenteront prochainement). L’avantage est que ton code sera hébergé sur le Web, ce qui te permettra de le partager avec d’autres développeur·euse·s afin d’avoir leurs commentaires sur ta manière de coder.</p>
<p>Si d’autres sujets d’intégration, de programmation ou qui touchent au Web d’une quelconque manière t’intéressent, je t’invite à nous en parler sur le formulaire <a href="https://lesbricodeurs.fr/apprendre-a-coder-en-ligne/">Apprendre à coder en ligne</a>. Tu peux aussi venir nous poser tes questions directement en rejoignant le <a href="https://join.slack.com/t/bricodeurs/shared_invite/zt-3sxsf81w-Rvwn~LcyLi1ekAln6qCl1Q">slack des Bricodeurs</a>.</p>
<p>A très vite!</p>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1" role="doc-endnote">
<p><a href="https://atom.io/">Atom, un éditeur de texte multi-plateformes</a> <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:12" role="doc-endnote">
<p>Lorsque tu changes le contenu de la balise <code class="language-plaintext highlighter-rouge"><title></code>, le titre dans l’onglet en haut de ton navigateur change. Lorsque tu modifies le contenu de la balise <code class="language-plaintext highlighter-rouge"><h1></code>, c’est le texte affiché dans la fenêtre qui est modifié. <a href="#fnref:12" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:2" role="doc-endnote">
<p><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Reference">La référence HTML du Mozilla Developers Network ( alias “La Bible du Web”)</a> <a href="#fnref:2" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:13" role="doc-endnote">
<p>Il suffit d’insérer, entre les balises <code class="language-plaintext highlighter-rouge"><h1></code> et <code class="language-plaintext highlighter-rouge"><p></code>, une balise de titre de niveau 2 <code class="language-plaintext highlighter-rouge"><h2>Structure d'une page HTML</h2></code>. <a href="#fnref:13" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:3" role="doc-endnote">
<p><a href="https://developer.mozilla.org/fr/docs/Web/CSS">La référence CSS du Mozilla Developers Network</a> <a href="#fnref:3" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:14" role="doc-endnote">
<p><code class="language-plaintext highlighter-rouge">h1 { color: red; }</code> <a href="#fnref:14" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:4" role="doc-endnote">
<p><a href="https://www.blogduwebdesign.com/psd/">Les maquettes gratuites publiées sur le Blog du Web Design</a> <a href="#fnref:4" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>
<p><a href="https://lesbricodeurs.fr/articles/creer-premiere-page-web/">Crée ta première page web !</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 21 Mar 2020.</p>
https://lesbricodeurs.fr/articles/apprendre-coder-chez-toi2020-03-17T18:00:00+00:002020-03-17T18:00:00+00:00Les Bricodeurshttps://lesbricodeurs.frsalut@lesbricodeurs.fr
<p>Tu es coincé.e chez toi en raison d’une épidémie internationale? Tu as toujours rêvé d’apprendre à programmer mais tu ne sais pas par où commencer? Chez Les Bricodeurs, nous sommes convaincus des vertus de l’auto-apprentissage. Dans cet article, des bricodeur.euse.s te guident vers les ressources qui leur ont permis d’apprendre la programmation, de zéro ou à partir de bases universitaires. L’offre est suffisamment étoffée aujourd’hui pour que chacun y trouve son compte.</p>
<h2 id="khan-academy">Khan Academy</h2>
<ul>
<li>Public cible: Débutants de tout âge</li>
<li>Langage: Javascript, HTML, CSS, SQL</li>
<li>Points forts: Traduit en français, correction automatique immédiate, grande communauté internationale</li>
</ul>
<p>Lancée en 2005 par Salman “Sal” Khan pour partager les vidéos qu’il réalisait pour enseigner les mathématiques à ses cousins, <em>Khan Academy</em> est aujourd’hui une plateforme d’apprentissage multi-disciplinaire et traduite en de nombreuses langues, dont le français. C’est sur cette plateforme que j’ai écrit mes premières lignes de code grâce à leur leçons extrêmement didactiques et leurs exercices très progressifs. Leurs contenus sont tout à fait adapté à des enfants, adolescents comme à des adultes absolument néophytes.</p>
<p><img src="https://i.imgur.com/bbWSEfX.png" alt="L'éditeur de code en ligne de Khan Academy" /></p>
<p>Comme le montre l’image ci-dessus, entre deux leçons en vidéos (elles aussi traduites en français), l’apprenant a accès à des <strong>exercices interactifs</strong> directement dans son navigateur web. Cela lui permet de visualiser en direct les effets des modifications qu’il apporte à son programme, et la validation de l’exercice est effectuée automatiquement et en temps réel.</p>
<p>Le langage de programmation enseigné est le <strong><em>Javascript</em></strong>, le langage utilisé par tous les sites internet pour créer du contenu interactif, qui a permis la réalisation d’outils populaires tels que <em>Gmail</em>, <em>Facebook</em>, <em>Twitter</em> et tant d’autres! Également, des cours plus théoriques expliquent les principes élémentaires des <strong>algorithmes</strong> et l’apprenant sera amené a réécrire les algorithmes de tri les plus courants en utilisant la langage <em>Javascript</em> encore une fois.</p>
<p>Le portail de l’informatique sur Khan Academy: https://fr.khanacademy.org/computing</p>
<h2 id="codingame">Codingame</h2>
<ul>
<li>Public cible: Développeur.euse.s ayant connaissance d’un langage</li>
<li>Langages: Bash, C, C++, C#, Clojure, D, Dart, F#, Java, JavaScript, Go, Groovy, Haskell, Kotlin, Lua, Objective‑C, OCaml, Pascal, Perl, PHP, Python3, Ruby, Rust, Scala, Swift, TypeScript, VB .NET</li>
<li>Points forts: Création française (cocoricoo!), compétitions internationales, transmission de ton profil aux recruteurs</li>
</ul>
<p>Si tu aimes te mettre au défi et donner le meilleur de toi-même, alors tu vas adorer <em>Codingame</em>! Le site, créé en 2014 par des montpelliérains, propose une large sélection de <strong>puzzles</strong> de difficultés différentes, à résoudre dans leur éditeur de code en ligne. Ces puzzles se présentent sous forme de mini-jeux, faisant souvent référence à la “culture geek”, où tu auras à tâche de chiffrer/déchiffrer des chaînes de caractères, d’aider un personnage à se déplacer dans un labyrinthe, d’optimiser des trajectoires dans une simulation de course, etc.</p>
<p><img src="https://i.imgur.com/doXmwMH.png" alt="Dans _Mars Lander_, tu dois aider une navette à se poser sur Mars en gérer la puissance des propulseurs." /></p>
<p>Pas de leçons ici, <strong>seulement des exercices</strong>, pour lesquels tu as le choix d’utiliser le langage de programmation parmi une liste d’une trentaine: C++, C #, Javascript, Python… Mais tes performances comptent, puisque la partie apprentissage se double d’une plateforme de recrutement en ligne! Ainsi tu peux renseigner tes compétences, ta localisation et tes prétentions de salaire, et <em>Codingame</em> transmettras ton profil aux entreprises qui correspondent à tes critères… Ou pas, tu as tout à fait le choix de t’entraîner uniquement pour le fun!</p>
<p>Et pour finir en beauté, le site organise tous les trois mois environ des <strong>compétitions internationales</strong> durant lesquelles tous les <em>codingamers</em> vont faire s’affronter leurs programmes dans des mini-jeux compétitifs. Que ce soit lors d’une course de <em>pods</em> de <em>Star Wars</em>, d’une partie classique de <em>bomberman</em> ou d’un match de <em>quidditch</em> de l’univers de <em>Harry Potter</em>, les intelligences artificielles<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote" rel="footnote">1</a></sup> de chaque participants vont s’affronter dans des ligues de niveaux équilibrés. Les meilleures passeront les ligues de Bois, Bronze, Argent et Or jusqu’à atteindre la prestigieuse Ligue Légendaire et concourir pour la première place internationale!</p>
<p>Un aperçu des compétitions passées et à venir: https://www.codingame.com/multiplayer</p>
<h2 id="exercismio">Exercism.io</h2>
<ul>
<li>Public cible: Niveau intermédiaire</li>
<li>Langages: 50 langages disponibles</li>
<li>Points forts: Pratique depuis la console, mentorat</li>
</ul>
<p>exercism.io est une plateforme d’apprentissage créée par <a href="https://www.kytrinyx.com">Katrina Owen</a> dont le code source est entièrement disponible sur <a href="https://github.com/exercism">Github</a>. Cette plateforme qui permet de se former à une cinquantaine de langages se distingue par trois aspects importants:</p>
<p><img src="https://i.imgur.com/868p2Jy.png" alt="Exercism.io" /></p>
<p>Premièrement, le développement se fait en local sur la machine, ce qui nécessite de mettre en place un environnement adéquat. La documentation permet d’y parvenir facilement, mais ça peut rester un frein pour un pur débutant car cela demande une maîtrise basique de la ligne de commande:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ exercism download --exercise=two-fer --track=go
Downloaded to
/Users/martin/Exercism/go/two-fer
</code></pre></div></div>
<p>Ensuite, la méthode utilisée est le <a href="https://devindetails.com/fr/tdd-debutant">Test Driven Development</a>, c’est-à-dire que lorsqu’on exécute le programme, une liste de tests vérifie qu’il se comporte correctement (donc en général à la première exécution tous les tests échouent). L’élève doit implémenter l’algorithme pour faire passer les tests les uns après les autres et ainsi atteindre la fonctionnalité demandée. C’est une méthode très efficace utilisée dans le développement professionnel permettant de s’assurer que quand on modifie une partie d’un programme pour ajouter une fonctionnalité, cela ne “casse” pas le comportement initial (on appelle cela une régression et c’est la hantise de tous les développeurs :wink:).</p>
<p>Enfin, une fois la solution soumise à la plateforme, il est possible de demander à un mentor bénévole de valider la solution. Il peut alors s’ensuivre une série d’itérations permettant d’améliorer l’efficacité et la lisibilité du code, mais aussi de découvrir de nouvelles possibilités du langage en question.</p>
<p><img src="https://i.imgur.com/oaw685g.png" alt="Katrina commenting my go solution!" /></p>
<h2 id="cest-tout">C’est tout?</h2>
<p>Les développeur.euse.s sont généralement des personnes passionné.e.s (et passionnant.e.s?) qui aiment à partager leurs expériences techniques. Il est donc très facile de trouver en ligne un bon nombre de ressources traitant de la programmation dans de multiples langages et domaines d’applications: Web, jeux vidéos, objets connectés, etc. Tu trouveras aussi auprès des Bricodeurs une <a href="https://www.helloasso.com/associations/les-bricodeurs/adhesions/adhesions-bricodeurs-2016">communauté</a> pour échanger. Les sites listés dans cet article ne représentent qu’une infime partie de ces ressources qui ont été personnellement experimentées par certains bricodeur.euse.s et que nous pouvons par conséquent te conseiller.</p>
<p>Bon apprentissage!</p>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:1" role="doc-endnote">
<p>N’ayons pas peur des mots, même s’il s’agit ici d’intelligences artificielles très simples: il ne s’agit pas de recréer <em>Alpha Go</em>! <a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>
<p><a href="https://lesbricodeurs.fr/articles/apprendre-coder-chez-toi/">3 ressources pour apprendre à coder de chez toi</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 17 Mar 2020.</p>
https://lesbricodeurs.fr/articles/elections-europe-youtube-algorithme2019-05-24T12:57:10+00:002019-05-24T12:57:10+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>Avant la clôture de la campagne des élections européennes, Emmanuel Macron a participé à une interview en direct sur la chaine du youtubeur HugoDécrypte. En s’appuyant sur le fonctionnement de l’algorithme de Youtube avec ce format, le Président de la République s’est assuré d’être omniprésent auprès des 17 millions d’utilisateurs quotidiens pendant le weekend des élections.</p>
<p><img class="align-center" src="https://lesbricodeurs.fr/images/meme-et-president.png" />
<small><i>Dès le samedi matin la vidéo était en tête des tendances sur Youtube @Xavier Lavayssière</i></small></p>
<p>En effet, la visibilité sur Youtube est principalement déterminée par les mécanismes de recommandation. L’objectif de Youtube est de maximiser le temps de visionnage des utilisateurs. Plus les utilisateurs regardent des vidéos pendant longtemps, meilleures seront les recettes publicitaires associées. Ces recommandations apparaissent sur la page d’accueil du site, dans les vidéos « à suivre » qui sont lues automatiquement à la fin d’une vidéo et dans les vignettes de vidéos recommandées. 70% des visionnages de vidéos sur Youtube ont ainsi été proposés par un algorithme<a href="#ref1"> [1]</a>.</p>
<p>Le détail des critères utilisés pour déterminer si un contenu doit être promu est tenu secret. Google veut éviter que des contenus de mauvaise qualité soient optimisés pour ces algorithmes. Cette relative opacité est renforcée par l’utilisation depuis plusieurs années de méthodes de deep learning <a href="#ref2">[21]</a>), une branche de l’intelligence artificielle.</p>
<p>Les principaux paramètres pris en compte sont toutefois connus, par exemple la durée de visionnage. Plus une vidéo est vue, en nombre de minutes totales, plus la vidéo sera recommandée à d’autres utilisateurs. Ici le contenu est idéal avec un format long d’interview d’une durée de 51 minutes. Le premier public, les abonnés les plus assidus de la chaîne et ceux qui s’intéressent de près à l’élection vont en regarder l’intégralité et entraîner ainsi par les recommandations ceux qui parcourent le site.</p>
<p>La qualité de la chaîne joue aussi un rôle. Avec 350 000 abonnés HugoDecrypte et un peu plus d’une vidéo par jour en moyenne au cours du dernier mois <a href="#ref3">[3]</a>, la chaîne HugoDecrypte est parmi ce qui se fait de mieux en chaîne d’actualité pour ces algorithmes. Ainsi non seulement les 350 000 abonnés ont été notifiés de la vidéo, mais elle a aussi été immédiatement promue auprès d’autres utilisateurs comme un contenu susceptible de les intéresser.</p>
<p>Enfin le positionnement de la chaîne et du contenu n’est pas anodin. Les algorithmes de Youtube promeuvent en effet les contenus auprès des utilisateurs en fonction de leur historique. Hors en cette période d’élection, de nombreux électeurs visionnent des vidéos politiques. Ainsi, parmi les vidéos tendances du samedi matin, au milieu de l’annonce du prochain Terminator et du retour de Bilal Hassani, on trouve la vidéo Le Monde « Elections européennes 2019 : le résumé du second débat dans L’Emission politique » et « Élections européennes : Le replay du Grand Débat sur BFMTV». Ainsi ce public se verra recommander cette vidéo.</p>
<p>Les règles interdisant la communication politique au moment du vote sont destinées à assurer la sérénité du vote. Ainsi, le code électoral prévoit l’interdiction de toute diffusion de propagande électorale, y compris sous forme électronique, à partir de l’avant veille du scrutin minuit <a href="#ref4">[4]</a>. A cela s’ajoute une tradition républicaine de réserve du gouvernement <a href="#ref5">[5]</a>. Curieusement la période de campagne pour ces élections européennes se termine officiellement la veille <a href="#ref6">[6]</a>. Cela correspond à vendredi minuit pour les Français en Polynésie et sur le continent américain (dont les Antilles) et samedi minuit pour les autres.</p>
<p>La vidéo, déjà en tête des tendances samedi matin va donc être proposée tout au long du weekend aux millions d’utilisateurs journaliers, une population qui regarde en majorité plusieurs fois par jour des vidéos<a href="#ref5">[5]</a>. Une seconde vidéo résumant l’interview été publié quelques heures plus tard, avant minuit. Avec plus de 14 000 vues par heure, l’ampleur de cette opération de communication en marge des règles électorales est sans précédent, notamment auprès des plus jeunes.</p>
<p><img class="align-center" src="https://lesbricodeurs.fr/images/chart.png" /></p>
<p><em>Merci à Carole et Eléonore pour leurs relectures et conseils</em></p>
<p id="ref1">[1] Neal Mohan, responsable produit de Youtube https://www.cnet.com/news/youtube-ces-2018-neal-mohan</p>
<p id="ref2">[2] Covington, Paul, Jay Adams, and Emre Sargin. "Deep neural networks for youtube recommendations." Proceedings of the 10th ACM conference on recommender systems. ACM, 2016.</p>
<p id="ref2">[3] 32 vidéos sur la période 25 avril 2019 - 24 mai 2019</p>
<p if="ref4">[4] Article L49 du code électoral</p>
<p if="ref5">[5] Circulaire du Premier Ministre du 19 février 2019 Instructions aux membres du Gouvernement à l’approche de l’élection des représentants au Parlement européen (<a href="http://www.lefigaro.fr/elections/europeennes/europeennes-philippe-demande-aux-ministres-de-reduire-les-deplacements-durant-la-campagne-20190506">source</a>)</p>
<p if="ref6">[6] Décret n° 2019-188 du 13 mars 2019 portant convocation des électeurs pour l'élection des représentants au Parlement européen </p>
<p id="ref7">[7] https://www.blogdumoderateur.com/chiffres-youtube/</p>
<p><a href="https://lesbricodeurs.fr/articles/elections-europe-youtube-algorithme/">Les algorithmes de Youtube et le Président</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 24 May 2019.</p>
https://lesbricodeurs.fr/articles/outils-ada-robots2019-03-04T13:57:10+00:002019-03-04T13:57:10+00:00Baptiste Lachttps://lesbricodeurs.frbaptiste.lac0@gmail.com
<style type="text/css">
p{
text-align: justify;
}
.c_img{
display: block;
margin-left: auto;
margin-right: auto;
}
.r_img{
float: right;
margin-left: 1em;
}
.clearfix::after{
content: "";
clear: both;
display: table;
iframe{
width: 100%;
}
}
</style>
<p>Dans cette série d’articles nous vous présentons les outils pédagogiques que <strong>Les Bricodeurs</strong> utilisent pendant les ateliers d’Ada. Cet article, le dernier de la série, est dédié aux robots que nous utilisons et des outils dont nous nous servons pour les programmer.</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/outils.png" /></p>
<p>Une des applications concrète et ludique de la programmation est son utilisation en <strong>robotique</strong>. Bon nombre de robots à usage pédagogique possèdent une interface de programmation visuelle afin d’en faciliter la programmation. L’apprentissage de la robotique permet de se familiariser avec les notions de <strong>capteur</strong> et d’<strong>actionneur</strong> : un robot possède ainsi des « entrées » (par exemple un capteur de proximité ou un capteur de couleurs) et des « sorties » (par exemple des roues, une pince ou un haut-parleur). Programmer les robots revient alors à écrire un algorithme permettant de dire au robot comment utiliser ses actionneurs selon ce qu’il « voit » avec ses capteurs !</p>
<p>Chez Les Bricodeurs nous utilisons principalement deux types de robots : les <strong>Thymios</strong> et les <strong>Ozobots</strong>. Les Ozobots sont de petits robots qui ont l’avantage de <strong>suivre des lignes</strong> tracées avec un marqueur sur une feuille de papier. Leur comportement peut ensuite être modifié en ajoutant des codes de couleurs le long de leur trajet. Ils possèdent également une interface de programmation Blockly, qui permet d’utiliser leurs capteurs de proximité et les moteurs de leur roues afin de leur faire éviter des obstacles !</p>
<p>Les robots Thymios sont des robots plus gros que les Ozobots, ils possèdent de nombreux capteurs de proximité ainsi que des <strong>capteurs d’orientation</strong> qui permettent à leur programmeur de leur faire suivre des parcours très précis et diversifiés. Ils sont fournis avec plusieurs comportements déjà implémentés, ce qui rend très facile la découverte des robots et de leurs possibilités. Ils peuvent, comme les Ozobots, être programmés avec une interface Blockly !</p>
<p><a href="https://lesbricodeurs.fr/articles/outils-ada-robots/">Les outils d'Ada : les robots (4/4)</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 04 Mar 2019.</p>
https://lesbricodeurs.fr/articles/outils-ada-tinkercad2019-01-28T09:17:38+00:002019-01-28T09:17:38+00:00Baptiste Lachttps://lesbricodeurs.frbaptiste.lac0@gmail.com
<style type="text/css">
p{
text-align: justify;
}
.c_img{
display: block;
margin-left: auto;
margin-right: auto;
}
.r_img{
float: right;
margin-left: 1em;
}
.clearfix::after{
content: "";
clear: both;
display: table;
iframe{
width: 100%;
}
}
</style>
<p>Dans cette série d’articles nous vous présentons les outils pédagogiques que <strong>Les Bricodeurs</strong> utilisent pendant les ateliers d’Ada. Cet article, le troisième de la série, est dédié à la conception en 3D sur TinkerCAD.</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/outils.png" /></p>
<p>ThinkerCAD est un outil en ligne permettant de faire de la <strong>conception 3D</strong> de manière simple et accessible. Grâce à cet outil les utilisateurs peuvent facilement découvrir les fonctions et les grands principes permettant la création de scènes en trois dimensions : formes géométriques, axes, rotations, translations, extrusions, etc.</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/tkr_editeur.png" /></p>
<p>Cet outil très complet permet également d’exporter les modèles créés sous formes de fichiers standards qui peuvent ensuite être réutilisés pour réaliser une <strong>impression 3D</strong> du modèle créé, ou exportés vers le jeu <strong>Minecraft</strong> !</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/tkr_minecraft.png" /></p>
<p>Comme de nombreux outils destinés à l’apprentissage il est possible de programmer la génération des objets 3D en utilisant une interface de <strong>programmation visuelle</strong>. La prise en main du logiciel est d’autant plus simple si les enfants ont déjà utilisé des logiciels de programmation graphique tels Scratch et Blockly.</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/tkr_blockly.png" /></p>
<p><a href="https://lesbricodeurs.fr/articles/outils-ada-tinkercad/">Les outils d'Ada : TinkerCAD (3/4)</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 28 Jan 2019.</p>
https://lesbricodeurs.fr/articles/outils-ada-minecraft2019-01-21T08:31:48+00:002019-01-21T08:31:48+00:00Baptiste Lachttps://lesbricodeurs.frbaptiste.lac0@gmail.com
<style type="text/css">
p{
text-align: justify;
}
.c_img{
display: block;
margin-left: auto;
margin-right: auto;
}
.r_img{
float: right;
margin-left: 1em;
}
.clearfix::after{
content: "";
clear: both;
display: table;
iframe{
width: 100%;
}
}
</style>
<p>Dans cette série d’articles nous vous présentons les outils pédagogiques que <strong>Les Bricodeurs</strong> utilisent pendant les ateliers d’Ada. Cet article, le second de la série, est dédié à la programmation sur Minecraft.</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/outils.png" /></p>
<p>Minecraft est un jeu vidéo de construction et d’aventure, le joueur évolue dans un monde composé de « briques » en 3-dimensions représentant différents matériaux. Le joueur peut ainsi récupérer, combiner et placer ces différentes briques dans un monde virtuel et donc créer comme avec des <strong>Légos</strong> les constructions de ses rêves !</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/mft_pres.png" /></p>
<p>Mondialement connu, le jeu possède aujourd’hui de nombreuses <strong>extensions</strong> développées par la communauté des joueurs. L’une d’elle permet d’automatiser les constructions via une interface de programmation, une autre permet de générer du code à partir d’une interface de programmation visuelle. En adaptant ces différents plugins <strong>Les Bricodeurs</strong> ont développé un serveur de jeu permettant de programmer des constructions sur Minecraft en utilisant la <strong>programmation visuelle</strong> ! Automatiser la construction d’une route devient alors un jeu d’enfants :</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/mft_route.gif" /></p>
<p>et une générer une maison est à peine plus compliqué :</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/mft_maison.gif" /></p>
<p>Nous proposons avec les ateliers « Adacraft » de découvrir la programmation visuelle tout en proposant une activité ludique et créative en nous basant sur un jeu connu de la plupart des enfants. Notre serveur en ligne, où se déroulent les ateliers, permet de conserver les constructions des participants et donc de susciter leur curiosité lorsqu’ils le découvrent, vous pouvez même vous y connecter en dehors des ateliers ! Pour cela, rendez-vous sur <a href="http://lesbricodeurs.fr/AteliersdAda/adacraft">ce lien</a> et suivez les instructions !</p>
<p><a href="https://lesbricodeurs.fr/articles/outils-ada-minecraft/">Les outils d'Ada : Minecraft (2/4)</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 21 Jan 2019.</p>
https://lesbricodeurs.fr/articles/les-outils-dada2019-01-15T10:35:31+00:002019-01-15T10:35:31+00:00Baptiste Lachttps://lesbricodeurs.frbaptiste.lac0@gmail.com
<style type="text/css">
p{
text-align: justify;
}
.c_img{
display: block;
margin-left: auto;
margin-right: auto;
}
.r_img{
float: right;
margin-left: 1em;
}
.clearfix::after{
content: "";
clear: both;
display: table;
}
</style>
<p>Dans cette série d’articles nous vous présentons les outils pédagogiques que <strong>Les Bricodeurs</strong> utilisent pendant les ateliers d’Ada. Ce premier article est dédié au logiciel de programmation Scratch.</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/outils.png" /></p>
<h1 id="scratch">Scratch</h1>
<p>Scratch est un outil de <strong>programmation visuelle</strong>, c’est à dire qu’il permet d’écrire du code informatique en assemblant des briques de couleurs. L’atout de la programmation visuelle est de permettre d’éviter les erreurs de syntaxes tout en proposant un langage de programmation complet et puissant. Scratch est accessible via son <strong>interface en ligne</strong>, celle-ci permet à la fois d’écrire et d’exécuter le code, et d’en voir le déroulement en direct !</p>
<p><img class="c_img" src="https://lesbricodeurs.fr/images/outils_ada/scr_blocks.png" /></p>
<p>C’est l’outil idéal pour les <strong>débutants</strong> en programmation car son interface simplifiée en rend la prise en main rapide. De nombreux autres avantages le rendent très attractif, le logiciel intègre notamment une banque d’images et de sons très riche, ces ressources pourront ensuite être facilement intégrées dans les créations des programmeurs et programmeuses !</p>
<p><img src="https://lesbricodeurs.fr/images/outils_ada/scr_example.gif" /></p>
<p>Utilisé par plusieurs millions de personnes et disponible dans des dizaines de langues, Scratch est devenu une <strong>référence</strong> dans l’éducation au numérique et son usage est désormais recommandé pour l’apprentissage de la programmation au collège. Apprendre à utiliser un logiciel de programmation visuelle comme Scratch ou <strong>Blockly</strong> (l’alternative de Google) permet également d’ouvrir des portes sur d’autres domaines. En effet ces langages sont fortement extensibles, n’importe quel développeur peut facilement proposer des plugins permettant d’étendre les utilisations du langage visuel. C’est le cas dans le domaine de la robotique par exemple, où de nombreux robots pédagogiques disposent d’une interface de programmation visuelle.</p>
<div class="clearfix">
<a href="https://scratch.mit.edu/projects/277633102/"><img class="r_img" src="https://lesbricodeurs.fr/images/outils_ada/scr_rpg.gif" /></a>
<p>Chez Les Bricodeurs nous utilisons Scratch de manière extensive, d’une part pour faciliter l’initiation à la programmation, et d’autre part comme support de programmation en lien avec d’autres outils : robots, jeux vidéos, conception 3D, etc. Ainsi, une fois le langage de programmation visuelle acquis, programmer un robot devient une tâche facile !</p>
</div>
<p><a href="https://lesbricodeurs.fr/articles/les-outils-dada/">Les outils d'Ada : Scratch (1/4)</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 15 Jan 2019.</p>
https://lesbricodeurs.fr/articles/visualisation-du-projet-de-loi-de-finance2018-12-18T08:34:00+00:002018-12-18T08:34:00+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>Puisque le débat public se fascine des images et que les décisions sont dans les chiffres, donnons leur une visualisation.</p>
<p>L’idée est simple : permettre aux citoyennes, aux citoyens et aux parlementaires de comprendre ce fatras de lignes comptables que constitue le budget de l’État. D’ores et déjà, au moment du vote du projet de loi de finance pour 2019 voici les premiers résultats :
<img src="https://lesbricodeurs.fr/images/actionexterieure.png" alt="Action exterieur" class="pull-right" /></p>
<ul>
<li>Une <a href="http://budget.parlement-ouvert.fr/">visualisation complete</a> du budget par année, avec les autorisations d’engagement (pour signer des contrats sur plusieurs années) et les crédits de paiement (crédits à dépenser dans l’année)</li>
<li>Une <a href="https://budget-ouvert.github.io/budget-iris/">visualisation minimaliste</a> qui permet de visualiser le projet pour 2019 et les pourcentages de variation avec le budget 2018</li>
</ul>
<h3 id="le-point-de-départ">Le point de départ</h3>
<p>Le projet de visualisation du projet de loi de finance, porté par <a href="https://twitter.com/AlexisThual">Alexis Thual</a>, a débuté il y a plusieurs mois notamment grace au soutien du <a href="https://parlement-ouvert.fr/">Bureau Ouvert</a> de Paula Forteza et une participation au hackathon <a href="https://twitter.com/search?q=%23datafin">Datafin</a>.</p>
<p>Il y a quelques semaines, à l’occasion de la 5em promotion de DataForGood, programme d’accompagnement de projets numériques orienté data et à intérêt social, le projet recrutait une nouvelle équipe de bénévoles.</p>
<blockquote class="twitter-tweet" data-lang="en"><p lang="fr" dir="ltr">Lancement de la 5em saison de <a href="https://twitter.com/hashtag/dataforgood?src=hash&ref_src=twsrc%5Etfw">#dataforgood</a> ! Pour accélérer des projets numériques sur trois mois, avec un espace disponible les mercredis et du mentorat <a href="https://t.co/faHYxs6Egb">pic.twitter.com/faHYxs6Egb</a></p>— Les Bricodeurs (@LesBricodeurs) <a href="https://twitter.com/LesBricodeurs/status/1053612635386716160?ref_src=twsrc%5Etfw">October 20, 2018</a></blockquote>
<script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<p>On entre ensuite dans les questions plus techniques, vous pouvez sauter aux <a href="#conclusion">conclusions</a>.</p>
<h3 id="les-données-et-leur-traitement">Les données et leur traitement</h3>
<p>La première étape, et la plus longue, a été d’abord d’aller chercher les bonnes données : Entre celles qui servent à la rédaction des projets de loi de finances, celles issues de l’exécution des dépenses dans les logiciels comptables, celles utilisées lors des controles et analyses de la Cour des Comptes…</p>
<p>Ensuite, un travail sur la réconciliation des lignes d’une année à l’autre. Les intitulés des actions budgétaires peuvent changer, pour des questions d’organisation, d’affichage ou parfois simplement de tpyos. Un <a href="https://github.com/rainbowViz/nomenclaturePlf">joli travail </a> d’Alexis que je vous invite à consulter si vous avez quelques affinités avec python, numpy ou Keras.</p>
<h3 id="la-visualisation-et-frontend">La visualisation et frontend</h3>
<p>Le choix de la principale librairie de visualisation s’est naturellement porté sur D3.js. La librairie offre divers outils comme les échelles de couleurs et une grande souplesse dans l’affichage. Selon un procédé approximatif, on a testé différentes formes de visualisations : Bubble, Sankey, Sunburst…, notamment au moyen de <a href="http://app.rawgraphs.io/">rawgraphs.io</a>.</p>
<p>Pour le frontend, React a été retenu, accompagné de Redux. Il s’agit du <a href="https://2018.stateofjs.com/front-end-frameworks/overview/">framework le plus populaire en 2018</a>. Pour autant il faut reconnaitre que la fragmentation des dévelopeurs entre différents frameworks ne facilite pas la participation à ces projets. Ma petite contribution est restée en <a href="http://vanilla-js.com/">vanilla js</a>, par incompétence ou choix idéologique, je n’ai pas encore tranché.</p>
<p><img src="https://lesbricodeurs.fr/images/frameworks.jpg" alt="Frameworks" class="center-image" /></p>
<p>Quant au style, c’est à la main et clairement une forme appel à l’aide. Petit usage de spectre.css. C’est léger et rigolo, jusqu’à ce qu’il faille ajouter des lignes pour l’adapter sur tel taille d’écran ou avoir des <em>modals</em>.</p>
<h3 id="les-limites-et-conclusion"><a name="conclusion"></a>Les limites et conclusion</h3>
<p><strong>Cohérence des données</strong> L’open data c’est sympa, mais si les données ne sont pas dans des formats standardisés, tant dans le format technique que dans leur organisation, il est difficile voire douloureux de travailler avec. C’est le cas des budgets d’année en année, mais aussi entre les documents issus de diverses administrations. Il me semble que ce travail de préparation devrait être organisé.</p>
<p><strong>Granularité des données</strong> Le plus petit niveau de granularité qui nous a été disponible sous forme exploitable est la sous-action, c’est-à-dire des budgets de quelques centaines de millions à quelques milliards. Je ne sais pas vous, mais je n’ai aucune idée de ce que l’on fait d’un milliard. En dehors de la défense peut etre, je ne vois pas beaucoup de raison de masquer les détails. Les données de l’éxécution ne sont guère plus précises, alors qu’elles sont de toute façon nécessaires au controle comptable. Donner du grain à moudre factuel me semble le meilleur moyen de contrer les “fake news”.</p>
<p><strong>Soutenir la communauté</strong> Au cours des réunions de ce projet au Liberté Living Lab et au Bureau Ouvert, nous avons rencontré un nombre important de passionnés aux compétences techniques ou entrepreneuriales pour mener à bien des projets sur ces questions. Seulement les seules modalités de fonctionnement disponibles semblent être le bénévolat ou le marché public. Le premier a ses limites temporelles, le second est inadapté pour ces projets d’initiative citoyenne. C’est l’occasion de renouveler les formes d’action et de partenariats.</p>
<p>Le projet est open source et ouvert. Alors n’hésitez pas à nous contacter ou proposer une amélioration du code.</p>
<p><img src="https://lesbricodeurs.fr/images/budgetiris.png" alt="Budget Iris" class="center-image" /></p>
<p><a href="https://lesbricodeurs.fr/articles/visualisation-du-projet-de-loi-de-finance/">Visualisation du projet de loi de finance</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 18 Dec 2018.</p>
https://lesbricodeurs.fr/articles/le-retour-du-developpeur.2018-10-12T08:34:00+00:002018-10-12T08:34:00+00:00Les Bricodeurshttps://lesbricodeurs.frsalut@lesbricodeurs.fr
<p>Ces dernières semaines ont été un marathon d’événements des bricodeurs. L’occasion de saisir les enjeux des métiers numérique aujourd’hui, du rôle de l’Etat, et de notre association dans leur développement. Voici quelques notes tirées de ces conversations.</p>
<h2 id="vers-un-retour-du-développeur-">Vers un retour du développeur ?</h2>
<p>On constate régulièrement l’échec des formations courtes vers les métiers de développeurs. Comme l’a fait remarquer Renaud, un participant, “on a fait croire pendant les années 2000 que l’informatique était facile. Les développeurs ont été remplacés par des intégrateurs.” Par ailleurs, les recruteurs comme les formations se focalisent sur des langages de programmation ou des outils particuliers alors que ce sont les fondamentaux qui devraient être développés. Une fois acquis, ils peuvent passer d’une langue, ou d’un ensemble d’outils à l’autre, et le choix d’une technologie peut dépendre du projet.</p>
<p>Pour nous, l’informatique est avant tout un outil de création. Combien de gens se relèvent la nuit pour terminer un projet ? C’est pourtant le cas avec la plupart des bricodeurs. On comprend pour un artiste, ou un manager exceptionnel comme Steve Jobs qu’ils doivent avoir des latitudes pour pouvoir faire leur travail, que les salaires doivent être valorisés, que leur vision peut être unique et changer l’organisation, mais c’est mal compris pour un informaticien. Pourtant, le bon talent peut faire la différence entre le succès et l’échec d’une entreprise. Il y a plus généralement une très mauvaise compréhension de ces métiers. Il manque parmi nos dirigeant, en entreprise comme dans l’administration, les compétences minimales techniques pour saisir ces finesses.</p>
<p><img src="https://lesbricodeurs.fr/images/return.jpg" alt="Le retour du développeur" class="center-image" /></p>
<h2 id="linformatique-detat">L’informatique d’Etat</h2>
<p>Puisque l’on parle de l’informatique dans l’administration, justement, il faut reconnaitre que l’on a connu ces dernières années une prise de conscience. Menant ces changements, on retrouve Etalab, une agence du gouvernement destinée à faciliter le travail d’ouverture des données des administrations, Beta.gouv, l’incubateur de projets au sein de l’administration, le programme Entrepreneur d’intérêt général, inspiré du programme <a href="https://lesbricodeurs.fr/articles/Obama-Presidential-Innovation-Fellows/">Presidential Innovation Fellows d’Obama</a> pour lequel les candidatures sont encore <a href="https://entrepreneur-interet-general.etalab.gouv.fr/candidature-eig.html">ouvertes</a> jusqu’à dimanche ou encore le <a href="https://parlement-ouvert.fr/">Bureau Ouvert</a> de l’assemblée nationale.</p>
<p>Un des projets qui en est issu est France Connect, qui vous permet de vous connecter sur des sites (principalement administratifs) au travers de ce compte transversal. Un tel projet serait potentiellement dangereux si seul l’Etat était le fournisseur d’identité. Mais dans le rapport de force actuel des entreprises comme Google et Facebook sont les principaux fournisseurs d’identité. Pourtant leurs failles tant sur le plan de la technique que de leur politique d’entreprise sont apparues à nouveau ces dernières semaines. Alors, au contraire, l’initiative de l’administration se pose plutôt en alternative et diversification, à condition que la politique gestion des données de connection soit rigoureuse et transparente.</p>
<h2 id="accompagner-les-parcours-et-les-projets">Accompagner les parcours et les projets</h2>
<p>Dans les dernières rencontres des bricodeurs on a perçu de belles réussites individuelles de parcours en reconversion qui ont réussi à passer un cap. Comprendre ce que sont les métiers du numérique, choisir un axe, trouver une formation puis après se lancer dans une carrière, acquerir ses premiers clients, choisir un statut ou un type d’entreprise pour lequel travailler, autant de questions difficiles qui demandent l’expérience du secteur. Merci pour vos retours chaleureux, on est heureux d’avoir pu y contribuer.</p>
<p>On souhaite faire plus, valoriser cette expérience en créant des contenus en ligne, améliorer notre processus de suivi (pour l’instant beaucoup par les rencontres et notre <a href="https://join.slack.com/t/bricodeurs/shared_invite/enQtMjk4MDg1NTIxMDI4LWU1MjRhMjlmYmYyYmM3MGRhNjg3YjIzMGRiMzk0YjE4OTYyYzUxZWFkMDE1MTZiZTRiOTBhYTA4YTQ5YTA2NTY/">messagerie</a> ). N’hésitez pas à nous contacter si vous voulez participer à cet éffort, comme mentor, tuteur ou partenaire !</p>
<p>De même, quelques projets font un joli bonhomme de chemin. Parmi les points utiles, on a noté la capacité de trouver les compétences techniques pour l’orienter et pour les “side projects’” de développeurs, aider à mieux comprendre les enjeux et etre connecté aux bons acteurs. On prépare déjà la prochaine <a href="http://nuitcodecitoyen.org/">nuit du code citoyen</a> (organisateurs, c’est le moment de nous <a href="http://nuitcodecitoyen.org/participer//fr/organisateur">contacter</a>). Mais pour aller plus loin on réfléchit à un pôle valorisation pour avoir une vue d’ensemble des projets en cours et des ressources.</p>
<p><a href="https://lesbricodeurs.fr/articles/le-retour-du-developpeur">Le retour du développeur</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 12 Oct 2018.</p>
https://lesbricodeurs.fr/notes/RGPD-FAQ2018-06-06T10:42:40+00:002018-06-06T10:42:40+00:00Les Bricodeurshttps://lesbricodeurs.frsalut@lesbricodeurs.fr
<p><strong>Chers professionnels de la protection des données et de l’informatique</strong></p>
<p>Le <em>Règlement Général de Protection des données</em> (RGPD) s’applique depuis le 25 mai 2018. Ce règlement européen consiste en 99 articles et 173 considérants qui atteignent 88 pages dans la <a href="http://eur-lex.europa.eu/legal-content/EN/TXT/?uri=uriserv:OJ.L_.2016.119.01.0001.01.ENG" title="GDPR in the Official Journal of the European Union">publication officielle</a>. Contrairement à un document de standardisation technique, les articles de ce règlement doivent être interprétés en tenant compte de la jurisprudence et des opinions des spécialistes. En conséquence, la mise en conformité de systèmes simples comme une liste de diffusion ne peut pas être effectuée sans l’étude préalable de plusieurs documents juridiques. Les concepts complexes comme la <em>privacy by design</em> et la <em>pseudonymisation</em> soulèvent de nombreuses questions.</p>
<p>Pendant ce temps, les entreprises développent des solutions qui permettent de recueillir et manipuler facilement des données personnelles. Grâce à <em>Google Sheets</em>, <em>Doodle</em>, <em>Mailchimp</em> ou <em>Wordpress</em> des non spécialistes peuvent devenir <em>responsables de traitement</em><sup id="fnref:responsable-de-traitement" role="doc-noteref"><a href="#fn:responsable-de-traitement" class="footnote" rel="footnote">1</a></sup> en quelques clics. Le développement de protocoles de pair à pair pour des bases de données distribuées comme le <em>Bitcoin</em>, <em><a href="https://datproject.org/">Dat</a></em> ou <em><a href="https://ipfs.io/">IPFS</a></em>, a le potentiel d’abaisser d’avantage l’obstacle initial pour devenir responsable ou sous-traitant des données sans en avoir conscience.</p>
<p>Pour permettre une adoption rapide des obligations en matière de protection des données et, <em>in fine</em> une augmentation générale de l’hygiène autour données, une meilleure formation de tous les responsables de traitement et de leurs sous-traitants est nécessaire, et non pas seulement à ceux qui peuvent se permettre d’y consacrer les ressources. Pour cette raison, nous estimons nécessaire la création d’une base de données collaborative des connaissances, sur Internet, et sous une licence <a href="https://creativecommons.org/">Creative Commons</a> gratuite afin de s’assurer que sa disponibilité soit large et continue.</p>
<p>Jusqu’à présent, les conseils pratiques librement accessibles sont souvent offerts par des parties prenantes avec des intérêts commerciaux. Les prestataires de services en ligne, les cabinets d’avocats et les organismes de formation orientent leurs conseils vers leurs propres services. Les licences restrictives empêchent de partager librement les conseils et les analyses. Les conseils nécessitent des mises à jour et corrections qui ne sont pas toujours effectuées. Ce dernier point est d’autant plus important que la conformité au RGPD est une cible mouvante. Les nouvelles décisions ou les progrès techniques en matière de protection de la vie privée<sup id="fnref:state-of-art" role="doc-noteref"><a href="#fn:state-of-art" class="footnote" rel="footnote">2</a></sup> demandent des mises à jour continues.</p>
<p>Comme la protection des données est un champ interdisciplinaire, la base de connaissances devrait être construite par des professionnels du droit et de l’informatique, et devrait répondre aux besoins des deux communautés. La plateforme Stack Exchange fournit aux communautés une solution logicielle pour construire une base de connaissances collaborative sous la forme de questions-réponses. Cette plateforme est bien connue des informaticiens via <a href="http://stackoverflow.com/">stackoverflow.com</a> et a récemment ouvert <a href="https://law.stackexchange.com">law.stackexchange.com</a><sup id="fnref:law-stackexchange" role="doc-noteref"><a href="#fn:law-stackexchange" class="footnote" rel="footnote">3</a></sup>. La collaboration sur la plateforme est organisé de la façon suivante :</p>
<ul>
<li>Les questions, les réponses et leurs métadonnées sont publiées sur internet, sous une licence ouverte (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA</a>) et sont téléchargeables dans un format interprétable par ordinateur</li>
<li>Tout le monde peut poser une question ou répondre</li>
<li>Les meilleurs réponses sont votées</li>
<li>L’utilisateur gagne de la réputation pour chaque vote reçu</li>
<li>L’utilisateur débloque des avantages au travers de la réputation reçue, comme la capacité de commenter ou voter</li>
<li>Les modérateurs sont élus parmis les utilisateurs et les utilisateurs les plus reconnus ont accès à des outils pour aider à la modération</li>
</ul>
<p>Afin d’assurer la qualité des réponses, des références sont utilisées lorsque des points sont discutables. Cette règle, également employée par Wikipedia, est garantie par les modérateurs et les utilisateurs les plus reconnus.</p>
<p>Les signataires soutiennent la création d’une telle base de données collaborative de connaissances sur la protection des données sous forme de questions fréquemment posées.</p>
<p>Pour participer, au lancement, c’est <a href="http://area51.stackexchange.com/proposals/118864/data-protection">par ici !</a></p>
<p><strong>Auteurs et signataires initiaux :</strong></p>
<ul>
<li>Robert Riemann, Bruxelles</li>
<li>Xavier Lavayssière, Paris</li>
<li>Franz Ritschel, Cologne</li>
</ul>
<p><strong>Contact:</strong></p>
<p>Si vous voulez recevoir des mises à jours ou si vous avez une question, vous pouvez nous contacter <a href="mailto:gdpr-faq@lesbricodeurs.fr">gdpr-faq@lesbricodeurs.fr</a>. Si vous voulez signer la lettre, vous vous pouvez écrire à <a href="mailto:gdpr-faq-signer@lesbricodeurs.fr">gdpr-faq-signer@lesbricodeurs.fr</a></p>
<p><strong>Liste des destinataires:</strong></p>
<ul>
<li><a href="https://edps.europa.eu/data-protection/ipen-internet-privacy-engineering-network_en" title="Internet Privacy Engineering Network">Internet Privacy Engineering Network</a>, une initiative du contrôleur européen de la protection des données</li>
<li><a href="https://stackoverflow.com/company">Stack Overflow</a>, l’entreprise à l’origine de la base de connaissances <a href="http://stackoverflow.com/">stackoverflow.com</a></li>
<li><a href="https://edri.org/">European Digital Rights</a>, une association d’organisations de défense des droits civils et des droits de l’homme à travers l’europe</li>
<li>Les participants à l’édition 2018 du <a href="http://privacyforum.eu/">Annual Privacy Forum</a></li>
<li>Le comité d’organisation de la conférence <a href="http://www.cpdpconferences.org/">Computers, Privacy and Data Protection</a></li>
<li>Une liste de récipiendaires individuels</li>
</ul>
<p><strong>Autres versions:</strong></p>
<table class="table">
<thead>
<tr>
<th>langue</th>
<th style="text-align: left">anglais</th>
<th style="text-align: left">français</th>
<th style="text-align: left">allemand</th>
<th style="text-align: left">italien</th>
</tr>
</thead>
<tbody>
<tr>
<td>en ligne</td>
<td style="text-align: left"><a href="https://blog.riemann.cc/digitalisation/2018/06/06/open-letter-call-for-a-collaborative-data-protection-faq/">aller</a> :gb:</td>
<td style="text-align: left"><a href="https://lesbricodeurs.fr/notes/RGPD-FAQ/">aller</a> :fr:</td>
<td style="text-align: left"><a href="https://blog.riemann.cc/digitalisation/2018/06/06/open-letter-call-for-a-collaborative-data-protection-faq-de/">aller</a> :de:</td>
<td style="text-align: left"><a href="https://blog.riemann.cc/digitalisation/2018/06/06/open-letter-call-for-a-collaborative-data-protection-faq-it/">aller</a> :it:</td>
</tr>
<tr>
<td>PDF</td>
<td style="text-align: left"><a href="https://blog.riemann.cc/assets/files/gdpr-faq/open-letter-gdpr-faq-en.pdf">aller</a> :gb:</td>
<td style="text-align: left"><a href="https://blog.riemann.cc/assets/files/gdpr-faq/open-letter-gdpr-faq-fr.pdf">aller</a> :fr:</td>
<td style="text-align: left"><a href="https://blog.riemann.cc/assets/files/gdpr-faq/open-letter-gdpr-faq-de.pdf">aller</a> :de:</td>
<td style="text-align: left"><a href="https://blog.riemann.cc/assets/files/gdpr-faq/open-letter-gdpr-faq-it.pdf">aller</a> :it:</td>
</tr>
</tbody>
</table>
<div class="footnotes" role="doc-endnotes">
<ol>
<li id="fn:responsable-de-traitement" role="doc-endnote">
<p>Personne morale ou physique qui détermine les finalités et les moyens du traitement, c’est-à-dire toute opération, effectuée ou non à l’aide de procédés automatisés, et appliquées à des données à caractère personnel ( Article 4 de la RGPD ) <a href="#fnref:responsable-de-traitement" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:state-of-art" role="doc-endnote">
<p>L’article 25 de la RGPD demande de prendre en compte notamment l’état de l’art lorsque lors de la conception et de la réalisation du traitement de données. <a href="#fnref:state-of-art" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
<li id="fn:law-stackexchange" role="doc-endnote">
<p><a href="https://law.stackexchange.com">law.stackexchange.com</a> couvre en partie les questions de <a href="https://law.stackexchange.com/questions/tagged/gdpr">RGPD</a> and <a href="https://law.stackexchange.com/questions/tagged/gdpr+data-protection">protection des donnéesata protection</a>. Cependant, il nous semble que la protection des données personnelles nécessite une plateforme propre qui regroupe les autres disciplines comme l’informatique ou l’éthique. <a href="#fnref:law-stackexchange" class="reversefootnote" role="doc-backlink">↩</a></p>
</li>
</ol>
</div>
<p><a href="https://lesbricodeurs.fr/notes/RGPD-FAQ/">Lettre ouverte pour l'ouverture d'un espace RGPD</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 06 Jun 2018.</p>
https://lesbricodeurs.fr/articles/rachat-github-microsoft-open-source2018-06-05T08:34:00+00:002018-06-05T08:34:00+00:00Samy Rabihhttps://lesbricodeurs.frsamy@lesbricodeurs.fr
<p>Ce lundi était annoncé le rachat de Github, la principale plateforme d’hébergement de dépôts de code au monde, par Microsoft. Avec ses 27 millions d’utilisateurs Github est largement utilisé par les projets libres et open source (OSS), tant indépendants comme <a href="https://github.com/torvalds/linux">Linux</a> ou <a href="https://github.com/bitcoin/bitcoin">Bitcoin</a> que de grands groupes, comme <a href="https://github.com/facebook/react">react</a>.</p>
<p>Le mouvement vers l’<em>open source</em> enclenché par Microsoft, notamment depuis l’arrivée de Satya Nadella à sa tête, a conduit cet acteur anciennement vu comme le Satan du logiciel à se racheter une conduite. Par exemple, le projet ayant le plus de contributeurs sur Github est justement <a href="https://github.com/Microsoft/vscode">Visual Studio Code</a> (source : <a href="https://octoverse.github.com/">octoverse</a>).</p>
<p>Le rachat de Github est donc dans la droite ligne de ce rattrapage de la réputation désastreuse accumulée sous Steve Ballmer. Plusieurs craintes de la communauté OSS sont identifiables:</p>
<ul>
<li>Github va devenir payant ou plus cher qu’actuellement</li>
<li>Microsoft aura accès à des millions de dépots privés et les secrets industriels qui y sont contenus</li>
<li>Une authentification via les API Microsoft sera obligatoire</li>
<li>L’interface de Github va changer comme Skype en son temps, et en mal</li>
</ul>
<h2 id="github-va-devenir-payant-ou-plus-cher-quactuellement">Github va devenir payant ou plus cher qu’actuellement</h2>
<p>Github est déjà plus cher que ses concurrents, notamment Bitbucket (qui propose gratuitement des dépots privés). Et Microsoft aurait tout à perdre d’augmenter les prix, vu la concurrence assez agressive de Gitlab</p>
<h2 id="microsoft-aura-accès-à-des-dépots-privés">Microsoft aura accès à des dépots privés</h2>
<p>On touche ici à une problématique de confiance envers des prestataires privés, comme les hébergeurs de mails par exemple. Le bon sens nous pousse à croire qu’un tiers comme Github/Microsoft aurait tout à perdre à accèder illégalement à un contenu “privé”.</p>
<h2 id="une-authentification-via-les-api-microsoft-sera-obligatoire">Une authentification via les API Microsoft sera obligatoire</h2>
<p>Les services de Github étant très largement utilisés dans l’industrie du logiciel, le moindre changement de fonctionnement serait préjudiciable à l’adoption de Github (et nous savons tous comment les développeurs prennent vite la mouche).</p>
<h2 id="linterface-de-github-va-changer">L’interface de Github va changer</h2>
<p>De la même manière qu’une modification de l’authentification ferait fuire les utilisateurs, une UI désastreuse aurait un mauvais impact sur les usagers “professionnels” du site. On peut aussi souligner que la majorité des actions faites sur Github le sont en ligne de commande ou via leur API.</p>
<p><a href="https://lesbricodeurs.fr/articles/rachat-github-microsoft-open-source/">Pourquoi le rachat de Github n'est pas un problème</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 05 Jun 2018.</p>
https://lesbricodeurs.fr/articles/decisions-publiques-automatisees2018-05-24T08:34:00+00:002018-05-24T08:34:00+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>Les décisions de justice comportent leurs motifs, les lois sont acccompagnées de comptes-rendus des décisions parlementaires, les attributions de marchés publiques sont accompagnées de leurs critères et des notes…</p>
<p>Les décisions publiques sont prises au nom du peuple français, ou au moins avec leur argent, il est normal que tous citoyen puisse en juger les fondements. Quand ces décisions sont automatisées il est à fortiori nécessaire de pouvoir juger des éléments pris en comptes.</p>
<p>Parcoursup est la nouvelle plateforme d’attribution des places dans le supérieur. L’algorithme précédent, APB, était déjà critiqué pas les universitaires spécialistes de ces questions d’algorithme d’attribution. En particulier, au lieu d’encourager les étudiants à choisir selon leurs préférences et d’attribuer (<a href="https://arxiv.org/abs/1707.07298">Preference Reasoning in Matching Procedures: Application to the Admission Post-Baccalaureat Platform</a>
C’est ce que détaille cet étudiant cet étudiant au sujet de Parcoursup. Au passage, on se félicite d</p>
<blockquote class="twitter-tweet" data-lang="fr"><p lang="fr" dir="ltr">Cet étudiant en informatique de 22 ans a étudié le code source de Parcoursup pour savoir ce qui se cache derrière cette nouvelle plateforme d'inscription dans le supérieur. Voici ce qu’il a trouvé… <a href="https://t.co/w8FzGGizCP">pic.twitter.com/w8FzGGizCP</a></p>— Brut FR (@brutofficiel) <a href="https://twitter.com/brutofficiel/status/999013034931695617?ref_src=twsrc%5Etfw">22 mai 2018</a></blockquote>
<p>Comme l’illustre la vidéo, c’est la publication du code qui, en plus de donner un contrôle total sur l’outil, donne la possibilités aux citoyens d’étudier les fondements des décisions.</p>
<p>La fondation du logiciel libre mêne d’ailleurs une campagne que nous soutenons en ce sens</p>
<video controls="controls" crossorigin="crossorigin" width="100%">
<source src="https://download.fsfe.org/videos/pmpc/pmpc_fr_desktop.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" media="screen and (min-device-width:1000px)" />
<source src="https://download.fsfe.org/videos/pmpc/pmpc_fr_desktop.webm" type="video/webm; codecs="vp9, opus"" media="screen and (min-device-width:1000px)" />
<source src="https://download.fsfe.org/videos/pmpc/pmpc_fr_mobile.mp4" type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" media="screen and (max-device-width:999px)" />
<source src="https://download.fsfe.org/videos/pmpc/pmpc_fr_mobile.webm" type="video/webm; codecs="vp9, opus"" media="screen and (max-device-width:999px)" />
<track src="https://publiccode.eu/video-subs/webvtt/pmpc_fr.vtt" kind="subtitles" srclang="fr" label="Français" />
</video>
<p><a href="https://publiccode.eu">Argent public, code public </a></p>
<p><a href="https://lesbricodeurs.fr/articles/decisions-publiques-automatisees/">Les décisions publiques automatisées</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 24 May 2018.</p>
https://lesbricodeurs.fr/articles/Facebook-passe-sous-licence-MIT2017-09-23T10:00:40+00:002017-09-23T10:00:40+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>Facebook vient de passer les librairies React, Jest, Flow, et Immutable.js sous la licence MIT, une <a href="https://lesbricodeurs.fr/articles/LicencesOuvertes/">licence ouverte</a> ( <em>Open Source</em> pour nos amis anglophones ) reconnue. Au cours de ces derniers mois en effet, un scandale a agité la communauté des développeurs Web. Il est apparu que les licences de la librairie javascript React donnaient la possibilité à Facebook d’interdire éventuellement l’utilisation par un projet.</p>
<h1 id="react">React</h1>
<p>React est une librairie javascript particulièrement utilisée aujourd’hui pour la construction d’interfaces web. Publiée par Facebook en mars 2013, elle a changé l’approche du développement <em>Frontend</em> en proposant une librairie avec un nombre limité de concepts, centrée autour de l’idée de construire des <em>components</em>, des bouts d’interface indépendants mis à jour rapidement. L’exemple canonique est AirBnb, qui l’utilise pour construire les différents éléments de son interface.</p>
<h1 id="la-viralité-des-licences-ouvertes">La viralité des licences ouvertes</h1>
<p>Le débat de la viralité des licences ouvertes est ancien. Comment une licence qui impose que le code soit ouvert et que les modifications de ce code soient ouvertes contamine des projets plus importants qui incluent cet élément de code. Deux grand courants se sont distingués, d’une part le logiciel <em>libre</em>, plus protecteur de l’ouverture du code comme les licences GPL ou Apache et l’<em>open source</em> plus soucieux d’équilibrer les enjeux industriels. C’est dans ce deuxième courant que les licences MIT et BSD se situent.</p>
<h1 id="historique-de-la-controverse">Historique de la controverse</h1>
<p>Le projet React a été publié initialement sous licence Apache 2.0, une licence <em>libre</em>. En 2014, la version 0.12 a été publiée sous licence BSD avec une clause additionnelle autorisant Facebook à retirer la licence d’utilisation à toute entreprise qui ferait un procès en propriété intellectuelle à Facebook ou une de ses filiales. La question des brevets en effet est sensible entre les entreprises technologiques américaines. Le droit américain les incite à déposer, acquérir et protéger des brevets logiciels pour se défendre entre elles et des <em>patents trolls</em>, entreprises qui achètent des brevets uniquement pour retirer de l’argent en faisant des procès aux entreprises les enfreignant.</p>
<p>Les dangers de cette clause additionnelle pour les projets <em>open source</em> utilisant la librairie React a agité la communauté des développeurs <em>Frontend</em>. De plus la Fondation Apache a relevé que la modification de la licence a posteriori pour une licence incompatible pouvait être illégale. Enfin Wordpress a, en août 2017, retiré l’utilisation de React de plusieurs <a href="https://ma.tt/2017/09/on-react-and-wordpress/">projets majeurs</a>.</p>
<p>C’est ce qui a amené finalement Facebook a utiliser une <a href="https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/">licence MIT</a> simple pour les librairies React, Jest, Flow et Immutable.js.</p>
<p><em>Pour approfondir la <a href="https://www.facebook.com/lesbricodeurs/photos/a.130937770579118.1073741828.130913190581576/521840714822153/">conversation</a></em></p>
<p><em>Merci à <a href="https://twitter.com/samyrabih">Samy Rabih</a> pour le partage de l’information et la relecture</em></p>
<p><a href="https://lesbricodeurs.fr/articles/Facebook-passe-sous-licence-MIT/">React passe sous licence MIT</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 23 Sep 2017.</p>
https://lesbricodeurs.fr/articles/Bilan-Nuit-Du-Code-Citoyen-20172017-09-16T10:00:40+00:002017-09-16T10:00:40+00:00Xavier Lavayssièrehttps://lesbricodeurs.frxavier@lesbricodeurs.fr
<p>La <a href="https://nuitcodecitoyen.org/">Nuit du Code Citoyen</a> est un programme d’accompagnement associant thématiques citoyennes et technologies qui s’est déroulé en 2017. Organisé de façon décentralisée sur 9 villes, la Nuit du Code Citoyen et ses suites ont permis d’accompagner plus d’une vingtaine de projets numériques citoyens.</p>
<h2 id="contexte">Contexte</h2>
<p>Nous sommes partis du constat d’un désir de renouveau démocratique, à l’aune d’une culture de partage, d’ouverture et de décentralisation facilités par le numérique. Si de nombreuses initiatives existent, il reste à développer les passerelles entre acteurs engagés sur le terrain et les acteurs du numérique citoyen, à contribuer à leur mise en réseau et accompagner les projets dans le temps pour en assurer le succès.</p>
<p>Ainsi les objectifs de la Nuit du Code Citoyen étaient d’organiser un hackathon international du numérique citoyen pour accélérer des projets ayant déjà une certaine maturité et présentant des défis sociaux et techniques, au travers de l’événement de contribuer à la mise en réseau des ressources et acteurs et enfin de suivre ces projets par un programme d’accompagnement de projet.</p>
<p><img src="https://lh5.googleusercontent.com/SgMOgZmGbjMAlUsacp-90YFb8VrkBxRLWSsQ24rQ9A05IYSV8Q9Kh5DettuqNKCSN838l2wsEAoh36dHV-ZD7fHDIbrnONPIkCVYU8GjUtGwkLY2XpDYlrmvPfwORl3sfteHCQG8" alt="Image" /></p>
<h2 id="organisation">Organisation</h2>
<p>La Nuit du Code Citoyen s’est tenue dans neuf villes : Tunis, Montpellier, Lille, Rennes, Lyon, Paris, Narbonne, Toulouse et Aubervilliers avec environ 250 participants. Le succès de l’événement est lié au dynamisme des équipes dans chaque ville. Avec quelques réunions de préparation pour valider des choix collectifs, la priorité a été donnée à la plus grande autonomie et à l’adaptation du concept aux contextes et ressources.</p>
<p><img src="https://lesbricodeurs.fr/images/NCC/villes.jpg" alt="equipe initiale" />
<em>Equipe initiale</em></p>
<p>Les équipes locales étaient généralement associées à des organisations expérimentées dans ce type d’événement ce qui a permis la montée en charge. On compte notamment Le Biome, OpenDemocracyNow, Game Campus, Simplon, Artilect et El Space. En soutien, un second niveau de partenaires, identifié au niveau local, a fourni les ressources logistiques et communautaires pour assurer la qualité de l’événement. Ainsi, la Maison de la Consommation et de l’Environnement à Rennes, Epitech Lyon et son réseau d’écoles, le Square à Paris, Insalan, Discosoupe, Ticket For Change, L’Odyssée Médiathèque à Lomme et Code Academie ont participé. Enfin, en partie autofinancé, le soutien financier de la Métropole de Lyon via l’appel à projets internationaux a été décisif dans la capacité à assurer le suivi.</p>
<h2 id="déroulé-de-lévénement">Déroulé de l’événement</h2>
<p><img src="https://lesbricodeurs.fr/images/NCC/participants.png" alt="participants" /></p>
<p>La qualité des participants est à noter avec des profils variés et une forte dominante des profils techniques, ce qui fait généralement défaut à ce type d’événements. Cela a permis de réaliser les premiers prototypes ou d’avancer sur des projets pertinents. C’était une volonté d’associer expertise de terrain et expertise numérique.</p>
<p><img src="https://lh4.googleusercontent.com/qPNt21w6XfbEZ-5XqTf7D6CnySl2t8hEW3RAF-a84QWQ6ScKVL0Cm7edbd1JY5Xvyx9VZrXHmI9uLnMNrD1LTc4PbXAy4SN2FyrVF8kEeNxID5YzblH9Ct-Sj205Nh-owrq78VXY" alt="C6FvplrWcAML67v.jpg-large" /></p>
<p>Un des objectifs était d’établir des ponts entre les villes. Un chat dédié a été préparé. Les rendez-vous vidéo à trois reprises dans le weekend, ont été des temps forts pour présenter les projets, les équipes, et poursuivre les échanges.</p>
<p><img src="https://lh4.googleusercontent.com/MwJdimMN90qBzBxLMWIw9R-2CexINyL3RKqtePeIshqd75xg9ClRPnym2YzqippHEkmeNfUI0CxELO2mFwhmO-kveQxX-74vYGWEqXs4JkJBrn6BUq80_8sU1g-H_h3JxkT5o80E" alt="C6AexzTWcAAblgL.jpg" /></p>
<p><img src="https://lh5.googleusercontent.com/76tO_CH6hM29mWV6Zr9D1cQhXie-KGXRyDwtU2Ioz9i8HXOU2Uyx-9A_WLom4dmx1jGrvOQ9qFQCta5Q5TPPiYncyKh1nPazLgYW2HszCnx6TWiH9mDqWNzkB4EWrPxLItCM3IVg" alt="Image" class="pull-right" /></p>
<p>Une attention à été portée sur une alimentation responsable. La qualité de la nourriture a été aussi un acteur de réussite et d’ambiance, avec par exemple “discosoupe” à Rennes ( repas collectif et festifà partir de fruits et légumes récupérés) et des petits plats bios à Lyon d’un entrepreneur local en phase de lancement.</p>
<p>Pour un excellent résumé de l’édition Rennaise : <a href="http://movilab.org/index.php?title=Recette_frugale_d%27hackathon_citoyen_open_source:_en_32_jours_et_sans_budget">Recette frugale d’hackathon citoyen open source</a></p>
<p>Pour un retour à chaud sur l’édition Lyonnaise : <a href="https://lesbricodeurs.fr/articles/Nuit-Du-Code-Citoyen-premiers-retours/">Nuit du Code Citoyen, premiers retours</a></p>
<h2 id="projets-participants">Projets participants</h2>
<p>Parmis les projets, on a retrouvé quelques grands acteurs de la “Civic Tech” et des projets nouveaux.</p>
<p>A Tunis, un outil pour suivre les files d’attente du ferry à Djerba, un waze pour les transports publics à Tunis, un scanner 3D open source.<img src="https://lh5.googleusercontent.com/KSGojas-qmqqRKjFdSUctzvjwLbSIVQtl7dOJ2E-LsE3SzH4tkULIaAy3oJMQR29Zuu4dt8_e79iltiSvn9TO_ankCbBv702OQxV5fDWK-WcfjaztXZGRoOnDOH2RGHxr6Krn92a" alt="Image" /></p>
<p>A Lyon, une application de prise de décision et un<a href="https://nuitcodecitoyen.org/Demoscampi/#/"> jeu pédagogique</a> sur les modes de scrutin.</p>
<p>A Montpellier, Welcome to Écotopia, un jeu-vidéo de création et de gestion d’un écovillage.</p>
<p><img src="https://lh4.googleusercontent.com/kk1m2dw1NJkHfuaUUuAMn_IJkABP05inWGEMw2LKbMzQI-EQJ2NLrGuoIN483BtcVDxR2x2EolfMUKc_Nx1eZBOcHRL6h_9NAOALtF6T3NVHfVNVWLSx1u2bHEthBvl41W9-z6CC" alt="Image" /></p>
<p>A Paris, Agora TV a organisé un débat live sur Facebook le samedi après midi, Sensike pour améliorer les données à partir du PLU, OGP Toolbox a pu enrichir sa base…</p>
<p>A Narbonne et Lille, un travail sur la sécurité des données en ligne.</p>
<p>A Rennes Oceanis Open, un capteur marin en science citoyenne pour la mesure de l’évolution des océans, OpenBioblitz, permettre par le numérique la contribution et la compréhension des citoyens pour le rassemblement des données de biodiversité et Ambassad’air et capteur citoyen, mesurer la qualité de l’air à l’aide de capteurs citoyens individuels, un enjeu majeur de santé publique.</p>
<p>A Toulouse, OpenFeeder sur la collecte des données des oiseaux et Signotheque sur la constitution d’une bibliothèque de signes pour malentendants.</p>
<p>Les projets peuvent être retrouvés sur la plateforme de suivi, en cours délaboration <a href="https://nuitcodecitoyen.org/fr/projects">https://nuitcodecitoyen.org/fr/projects</a></p>
<h2 id="suivi-des-projets">Suivi des projets</h2>
<p>“La partie électronique, c’est bon, la partie programmation, c’est bon, le github, il est fait, la mécanique c’est en bonne voie…. mais alors le design ! (glups)”</p>
<p>Au cours des mois qui ont suivi, la Nuit du Code Citoyen a donné lieu à une série d’événements de suivi et prolongation des projets.</p>
<p>A Lyon, un de ces événements a eu lieu au Centsept, association d’accompagnement de projets de l’entrepreneuriat social dans Lyon 7eme arrondissement. Cinq projets ont été travaillés dont Démocratie et Langoustines, un système d’imprimante partagée et une plateforme de suivi des projets.</p>
<p>Article complet : <a href="https://lesbricodeurs.fr/articles/Mini-Nuit-Du-Code-Citoyen-%C3%A0-Lyon/">https://lesbricodeurs.fr/articles/Mini-Nuit-Du-Code-Citoyen-à-Lyon/</a></p>
<p><img src="https://lh4.googleusercontent.com/BlRtEMCy2anAJhc3sC0jIJs4sndCYc0UuYS5ynntPS9skcHwZrBUjdY71dhgALDZRKko7vEHZBlJuRAWZ_vr1u4M0HMvdmKIj9XvGLCMg1Qrf1irpZ9BKGm9JYAAe-0I-nzca3E2" alt="Image" /></p>
<h2 id="communication-et-retombées-médiatiques">Communication et retombées médiatiques</h2>
<h4 id="le-monde">Le Monde</h4>
<p><img src="https://lesbricodeurs.fr/images/NCC/lemonde.png" alt="lemonde" /></p>
<p><a href="http://www.lemonde.fr/smart-cities/article/2017/04/28/six-outils-pour-developper-la-participation-citoyenne-a-l-echelle-locale_5119425_4811534.html">http://www.lemonde.fr/smart-cities/article/2017/04/28/six-outils-pour-developper-la-participation-citoyenne-a-l-echelle-locale_5119425_4811534.html</a></p>
<h4 id="numerama">Numerama</h4>
<p><img src="https://lesbricodeurs.fr/images/NCC/numerama.png" alt="numerama" />
<a href="http://www.numerama.com/tech/233027-decouvrez-la-nuit-du-code-citoyen-un-hackathon-de-48-heures-ouvert-au-grand-public.html">http://www.numerama.com/tech/233027-decouvrez-la-nuit-du-code-citoyen-un-hackathon-de-48-heures-ouvert-au-grand-public.html</a> </p>
<h4 id="réseaux-sociaux">Réseaux sociaux</h4>
<p>L’événement a été largement relayé sur les réseaux sociaux par les participants, particulièrement connectés.</p>
<p><img src="https://lh4.googleusercontent.com/SaRw9bivHO2AUno4IK8XV6tuzFUg7E0TcFw1yd3U-qn0pmZ8nn2YQJN4JTOJJ9KSUn7szkzYiuLe45XpYG6aurDVfFXMPyLdQ5cjNcuJk4MolaYXYACTyZ77dxdnbSgBtLTTKksZ" alt="Image" /></p>
<p><em>Répartition des tweets sur le mot clé #NuitCodeCitoyen du 3 au 15 mars 2017</em>
<!-- ![Image](https://lh4.googleusercontent.com/BveC_vYw9E2EcDtoWKrFnhOSkAAoK_xcsI_WGNAs2Z6D9KDQJoEqf4rCs8zQl3Fij6TRlcXS3em4mp3hMFnKfzVPH7GQhFsxW1SYlpll5Z88i2uV8y5JZv835qixS2oljzCRJP3K) --></p>
<blockquote class="twitter-tweet" data-lang="en"><p lang="fr" dir="ltr">Cap des 100 000 visites atteint sur Wikidébats pendant la <a href="https://twitter.com/hashtag/NuitCodeCitoyen?src=hash">#NuitCodeCitoyen</a>. Merci <a href="https://twitter.com/OpenSourcePol">@OpenSourcePol</a> et <a href="https://twitter.com/LesBricodeurs">@LesBricodeurs</a> <a href="https://t.co/Sebu5XiP1b">pic.twitter.com/Sebu5XiP1b</a></p>— Wikidébats (@WikiDebats) <a href="https://twitter.com/WikiDebats/status/838475036734406656">March 5, 2017</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p><strong>Liens complémentaires</strong></p>
<ul>
<li><a href="https://storify.com/XavierCoadic/rennes-histoire-d-une-nuit-du-code-citoyen">https://storify.com/XavierCoadic/rennes-histoire-d-une-nuit-du-code-citoyen</a></li>
<li><a href="https://storify.com/OpenDemNow/getting-started">https://storify.com/OpenDemNow/getting-started</a></li>
</ul>
<h4 id="supports">Supports</h4>
<p>En amont de l’événement, les organisateurs locaux ont adapté les éléments de communication au contexte et particularités.
<img src="https://lesbricodeurs.fr/images/NCC/affiches.png" alt="affiches" /></p>
<p>En aval, au travers des mini-nuits du code citoyen et d’événements partenaires les résultats de la Nuit du Code Citoyen ont pu être présentés.</p>
<p><img src="https://lesbricodeurs.fr/images/NCC/affiche.jpg" alt="affiche" />
<em>Affiche de présentation de la Nuit du Code Citoyen à l’occasion de Super Demain</em></p>
<h2 id="pistes-damélioration">Pistes d’amélioration</h2>
<ul>
<li>Meilleure sécurisation des fonds en amont</li>
<li>Développer les partenariats à l’étranger, beaucoup de contacts ont été établis, la deuxième édition sera l’occasion de les transformer</li>
<li>Améliorer la méthodologie et les ressources du suivi de projet</li>
</ul>
<p><img src="https://lh6.googleusercontent.com/XH5x7HA-nWdnKyoPFDzUmMxPXZauxtNwysoQyqTG9ffDupOKRNU9TZzzCme8sk7qHHxAiEjEr1hAqgTTg1vcUanQzZiFlJhCzp5f4lkrfRvZYXz6BWQczvPiKtaYXeN3yDqd4Rzi" alt="Image" /><img src="https://lh3.googleusercontent.com/ncKSueB6WJQKeywp18Os1dRRvkMQSV2vK0Sn-qGv1GWjPSozck-TdD4OBfcHwA6nvV32eliDsKgKYQD6-p43sCUH0l61qF1Xz0Yk3AbXzoryBxOuX8P0v-toV6gINaZoplG1fKgn" alt="Image" /><img src="https://lh4.googleusercontent.com/xDeld2Wi419uFYqOmbekQe_B-VN2zthiKPJhe5r5bFBNjbw6viVmGTy7gCFFhm-EQiyLFcNsJrEzTEKWEhAyFFsNwL28Yu4ZG9G4cxtJloVtJVQAu6pc5pgtRARYSfFNPhtZrHDf" alt="Image" /></p>
<h2 id="conclusion">Conclusion</h2>
<p>Encore bravo à Kerry,Walid, Mohamed, Houssem, Adnen, Houssem, Ayoub, Thibault, Myriam, Xavier, Sophie, Théo, Olivier, Matthieu, Claudia, Anys, Anne-claire, Samuel, David, Thibaut, Tiphaine, Julien, Nicolas, Amaury, Noté, Valentin, Caroline, Paul, Virgile, Pierre-Louis, Julien, Nicolas et à tous les participants pour cette énergie déployée de ouf.</p>
<p>Depuis, on est très heureux des liens renforcés qui se sont construits, et on a hate de porter ça encore plus haut.</p>
<p><i>Vous portez un projet? Vous voulez organiser une Nuit du Code Citoyen dans votre ville? vous voulez participer? Nous préparons déjà l'édition 2018 :</i></p>
<p><a title="Organisateur" class="btn-accent" href="https://nuitcodecitoyen.org/participer/fr/organisateur.html">
Organisateur
</a> <a title="projet" class="btn-complement" href="https://nuitcodecitoyen.org/participer/fr/proposer-un-projet.html">
Porteur de projet
</a> <a title="participant" class="btn" href="https://nuitcodecitoyen.org/participer/fr/participant.html">
Participant</a></p>
<p>
<i>
Vous voulez être partenaires? <a href="mailto:salut@lesbricodeurs.fr">salut@lesbricodeurs.fr</a>
</i>
</p>
<p><a href="https://lesbricodeurs.fr/articles/Bilan-Nuit-Du-Code-Citoyen-2017/">Bilan de la Nuit du Code Citoyen</a> was originally published by Les Bricodeurs at <a href="https://lesbricodeurs.fr">Les Bricodeurs</a> on 16 Sep 2017.</p>