tag:linuxfr.org,2005:/tags/html5/publicLinuxFr.org : les contenus étiquetés avec « html5 »2024-02-08T12:04:19+01:00/favicon.pngtag:linuxfr.org,2005:Bookmark/79132024-02-08T12:04:19+01:002024-02-08T12:04:19+01:00Greenfield : The in-browser wayland compositor (inclus diaporama FOSDEM 2024)<a href="https://www.phoronix.com/news/Greenfield-Compositor-2024">https://www.phoronix.com/news/Greenfield-Compositor-2024</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/134851/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/antistress/liens/greenfield-the-in-browser-wayland-compositor-inclus-diaporama-fosdem-2024#comments">ouvrir dans le navigateur</a>
</p>
antistresshttps://linuxfr.org/nodes/134851/comments.atomtag:linuxfr.org,2005:Post/439232023-11-02T20:17:52+01:002023-11-02T20:17:52+01:00Accéder à un nœud du DOM en utilisant son id comme variable<p>Désolé, j'ai pas réussi à faire une meilleure formulation du truc pour le titre.</p>
<p>Dans le <a href="https://d3js.org/getting-started">tutoriel</a> de D3, y'a ce bout de code :</p>
<pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"container"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"module"</span><span class="p">></span>
<span class="kr">import</span> <span class="o">*</span> <span class="nx">as</span> <span class="nx">d3</span> <span class="nx">from</span> <span class="s2">"https://cdn.jsdelivr.net/npm/d3@7/+esm"</span><span class="p">;</span>
<span class="c1">// Declare the chart dimensions and margins.</span>
<span class="kr">const</span> <span class="nx">width</span> <span class="o">=</span> <span class="mi">640</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">height</span> <span class="o">=</span> <span class="mi">400</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">marginTop</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">marginRight</span> <span class="o">=</span> <span class="mi">20</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">marginBottom</span> <span class="o">=</span> <span class="mi">30</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">marginLeft</span> <span class="o">=</span> <span class="mi">40</span><span class="p">;</span>
<span class="c1">// Declare the x (horizontal position) scale.</span>
<span class="kr">const</span> <span class="nx">x</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">scaleUtc</span><span class="p">()</span>
<span class="p">.</span><span class="nx">domain</span><span class="p">([</span><span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="s2">"2023-01-01"</span><span class="p">),</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">(</span><span class="s2">"2024-01-01"</span><span class="p">)])</span>
<span class="p">.</span><span class="nx">range</span><span class="p">([</span><span class="nx">marginLeft</span><span class="p">,</span> <span class="nx">width</span> <span class="o">-</span> <span class="nx">marginRight</span><span class="p">]);</span>
<span class="c1">// Declare the y (vertical position) scale.</span>
<span class="kr">const</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">scaleLinear</span><span class="p">()</span>
<span class="p">.</span><span class="nx">domain</span><span class="p">([</span><span class="mi">0</span><span class="p">,</span> <span class="mi">100</span><span class="p">])</span>
<span class="p">.</span><span class="nx">range</span><span class="p">([</span><span class="nx">height</span> <span class="o">-</span> <span class="nx">marginBottom</span><span class="p">,</span> <span class="nx">marginTop</span><span class="p">]);</span>
<span class="c1">// Create the SVG container.</span>
<span class="kr">const</span> <span class="nx">svg</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">create</span><span class="p">(</span><span class="s2">"svg"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"width"</span><span class="p">,</span> <span class="nx">width</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"height"</span><span class="p">,</span> <span class="nx">height</span><span class="p">);</span>
<span class="c1">// Add the x-axis.</span>
<span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">"g"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"transform"</span><span class="p">,</span> <span class="sb">`translate(0,</span><span class="si">${</span><span class="nx">height</span> <span class="o">-</span> <span class="nx">marginBottom</span><span class="si">}</span><span class="sb">)`</span><span class="p">)</span>
<span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">axisBottom</span><span class="p">(</span><span class="nx">x</span><span class="p">));</span>
<span class="c1">// Add the y-axis.</span>
<span class="nx">svg</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">"g"</span><span class="p">)</span>
<span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"transform"</span><span class="p">,</span> <span class="sb">`translate(</span><span class="si">${</span><span class="nx">marginLeft</span><span class="si">}</span><span class="sb">,0)`</span><span class="p">)</span>
<span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">d3</span><span class="p">.</span><span class="nx">axisLeft</span><span class="p">(</span><span class="nx">y</span><span class="p">));</span>
<span class="c1">// Append the SVG element.</span>
<span class="nx">container</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="nx">svg</span><span class="p">.</span><span class="nx">node</span><span class="p">());</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span></code></pre>
<p>Je me suis senti très confus parce que la variable <code>container</code> utilisé à la fin n'est jamais déclaré et pourtant <s>elle tourne</s> le code marche.</p>
<p>Après divers tests je me suis rendu compte la variable <code>container</code> contenait une référence vers le nœud d'id <code>container</code>, comme si un <code>let container = document.getElementById("container")</code> était fait automagiquement.</p>
<p>Et ça marche pour tous les id.</p>
<pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"bli"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"bla"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"blo"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"module"</span><span class="p">></span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">bli</span><span class="p">,</span> <span class="nx">bla</span><span class="p">,</span> <span class="nx">blo</span><span class="p">)</span> <span class="c1">// <div id="bli"> <div id="bla"> <div id="blo"></span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span></code></pre>
<p>Est-ce que quelqu'un aurait un lien vers <a href="https://developer.mozilla.org/en-US/">MDN</a> qui décrit cette fonctionnalité ? Je n'arrive pas à trouver les bons mots clefs à donner à manger à mon moteur de recherche préféré.</p>
<div><a href="https://linuxfr.org/forums/programmationweb/posts/acceder-a-un-noeud-du-dom-en-utilisant-son-id-comme-variable.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/133806/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationweb/posts/acceder-a-un-noeud-du-dom-en-utilisant-son-id-comme-variable#comments">ouvrir dans le navigateur</a>
</p>
jtremesayhttps://linuxfr.org/nodes/133806/comments.atomtag:linuxfr.org,2005:Bookmark/70872023-09-06T12:38:33+02:002023-09-06T12:38:33+02:00Tucson's Molly Holzschlag, known as 'the fairy godmother of the web,' dead at 60<a href="https://www.tucsonsentinel.com/local/report/090523_molly_holzschlag/tucsons-molly-holzschlag-known-as-the-fairy-godmother-web-dead-60/">https://www.tucsonsentinel.com/local/report/090523_molly_holzschlag/tucsons-molly-holzschlag-known-as-the-fairy-godmother-web-dead-60/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/133212/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/anonyme/liens/tucson-s-molly-holzschlag-known-as-the-fairy-godmother-of-the-web-dead-at-60#comments">ouvrir dans le navigateur</a>
</p>
Anonymehttps://linuxfr.org/nodes/133212/comments.atomtag:linuxfr.org,2005:Bookmark/51772022-09-22T13:28:18+02:002022-09-22T13:28:18+02:00Why the number input is the worst input<a href="https://stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input/">https://stackoverflow.blog/2022/09/15/why-the-number-input-is-the-worst-input/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/128834/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/gilcot/liens/why-the-number-input-is-the-worst-input#comments">ouvrir dans le navigateur</a>
</p>
Gil Cot ✔https://linuxfr.org/nodes/128834/comments.atomtag:linuxfr.org,2005:Diary/399492021-10-08T23:45:45+02:002021-11-29T07:57:25+01:00opensara: un nouveau jeu libreLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Bonjour Nal,</p>
<p>Après Newton Adventure et Ned et les maki, je me lance dans le développement de nouveaux jeux libres.</p>
<p>Ayant plusieurs projets en tête, j'avais décidé de faire des prototypes pour tester mes idées de gameplay. Le premier était shmuprpg, le deuxième underthief et le troisième bomberned. L'excellent moteur de recherche de linuxfr te permettra de retrouver les journaux où j'en parle et tu peux toujours y jouer sur <a href="https://play.devnewton.fr/">mon site</a>.</p>
<p>Je reviens aujourd'hui avec un projet plus complet: <a href="https://play.devnewton.fr/opensara">opensara</a></p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f737072697465732f7469746c652e706e67/title.png" alt="opensara logo" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/sprites/title.png"></p>
<h3 id="toc-le-jeu">Le jeu</h3>
<p>Opensara met en scène des aventures de Sara, la mascotte du très bon site <a href="https://opengameart.org/">opengameart.org</a> consacré au partage de ressources pour les jeux vidéo libres.</p>
<p>Il s'agit de petites aventures, à jouer pendant une pause café, un peu comme on lit une bande dessinée en une page à la fin d'un journal. Petites, mais pas de tout repos: Sara va être empoisonnée, faite prisonnière d'un vampire et forcée à combattre des monstres pour la République Populaire de Grande Asie.</p>
<p>On choisit son aventure et on recommence autant que l'on veut. Sans être du casual gaming, le jeu est fait pour être terminable par un (jeune) enfant sans trop de mal.</p>
<p>Selon l'aventure, le gameplay est celui d'un jeu de plateforme ou d'un shoot them up.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f646f63732f67616d65706c61792e77656270/gameplay.webp" alt="gameplay" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/docs/gameplay.webp"></p>
<h3 id="toc-le-code-et-les-assets">Le code et les assets</h3>
<p>Opensara est écrit en Javascript vanilla pour brouteur. Le rendu graphique est fait avec l'API Canvas et le son avec Web Audio.</p>
<p>Comme une quête secondaire de ce projet était de voir ce que le Javascript moderne a dans le bide, j'ai mélangé joyeusement les styles de programmation impératifs, fonctionnels et objets 🙈 🙉 🙊 .</p>
<p>Les sprites ont été fait majoritairement avec <a href="https://github.com/LibreSprite/LibreSprite">Libresprite</a>, avec un soupçon de Gimp et de Krita.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f646f63732f6c696272657370726974652e706e67/libresprite.png" alt="libresprite" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/docs/libresprite.png"></p>
<p>Les bruitages ont été créés avec <a href="https://sfxr.me">jsfxr</a>.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f646f63732f6a736678722e706e67/jsfxr.png" alt="jsfxr" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/docs/jsfxr.png"></p>
<p>Les niveaux sont éditables avec <a href="https://www.mapeditor.org/">Tiled</a>.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6672616d616769742e6f72672f6465766e6577746f6e2f6f70656e736172612f2d2f7261772f6d61737465722f646f63732f74696c65642e706e67/tiled.png" alt="tiled" title="Source : https://framagit.org/devnewton/opensara/-/raw/master/docs/tiled.png"></p>
<p>Le <a href="https://framagit.org/devnewton/opensara">code source</a> est bien sûr sous licence libre (MIT). Les graphismes et les bruitages aussi, mais je vais les re-licencier bientôt en CC-BY et OGA-BY quand je les mettrais sur opengameart.</p>
<p>Les musiques sont "empruntées" (CC-BY) au génial <a href="https://opengameart.org/users/centurionofwar">Centurion_of_war</a>.</p>
<h3 id="toc-jouer">Jouer !</h3>
<p>A toi de jouer maintenant Nal* en utilisant les touches fléchées et la barre d'espace de ton clavier ou une bonne manette:</p>
<p><a href="https://play.devnewton.fr/opensara">Jouer à opensara</a></p>
<p>*: soit patient le temps de chargement peut être long. Avec mon petit serveur, Sara est longue à venir.</p>
<div><a href="https://linuxfr.org/users/devnewton/journaux/opensara-un-nouveau-jeu-libre.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/125651/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/devnewton/journaux/opensara-un-nouveau-jeu-libre#comments">ouvrir dans le navigateur</a>
</p>
devnewton 🍺https://linuxfr.org/nodes/125651/comments.atomtag:linuxfr.org,2005:News/404952021-05-24T15:12:51+02:002021-05-24T15:12:51+02:00Edit Interactive SVG 1.2Licence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<div><p>Edit Interactive SVG est un logiciel libre qui permet de créer des illustrations interactives au format SVG. Il était initialement (2018) voué à l’éducation mais peut se destiner à un public bien plus large.</p>
<p>Une <a href="https://mothsart.github.io/editeur-svg-interactif.html">présentation de l’objectif du logiciel</a> et deux exemples <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/examples/campement.html">Campement paléolithique</a> et <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/examples/organes.html">Organes du corps humain</a> sont visibles pour se faire rapidement une idée. Et la <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/">version en ligne</a> permet de tester directement sans installation.</p>
</div><ul><li>lien nᵒ 1 : <a title="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-2" hreflang="fr" href="https://linuxfr.org/redirect/108587">Journal à l’origine de la dépêche</a></li><li>lien nᵒ 2 : <a title="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1" hreflang="fr" href="https://linuxfr.org/redirect/108588">Journal sur la version 1.1</a></li><li>lien nᵒ 3 : <a title="https://linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif" hreflang="fr" href="https://linuxfr.org/redirect/108589">Journal sur la version 1.0</a></li></ul><div><h3 id="toc-intro">Intro</h3>
<p>L’éditeur de SVG Interactif prenait la poussière et j’ai fini par prendre le temps nécessaire pour lui redonner un petit coup de jeune.</p>
<p>Pour celles et ceux qui suivent un peu le projet, nous arrivons à la version 1.2 qui suit la <a href="//linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1">1.1</a>.</p>
<p>Cette version m’a permis de répondre a des besoins exprimés depuis sa <a href="//linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif">version 1.0</a> donc trois ans d’attente.</p>
<ul>
<li><p>Rajouter des contenus multimédia directement dans les commentaires.<br>
Il était déjà possible de rajouter des images (PNG, GIF, JPG), il est désormais possible de compléter avec des vidéos, des sons ou de la musique.<br>
Néanmoins, j’encourage à utiliser cette fonctionnalité avec parcimonie car elle implique d’encapsuler l’ensemble dans un seul fichier et sous une forme textuelle (base64) et par conséquent un tiers plus volumineux.</p></li>
<li><p>Pouvoir gérer un historique de modification ce qui inclut l’ajout des boutons « annuler/restaurer » et la possibilité de naviguer sur l’ensemble des modifications effectuées.<br>
Cette partie, pas foncièrement la plus demandée, mais nécessaire à mon sens, m’a donné le plus de fil à retordre pour adapter le code actuel et éviter des régressions.<br>
Je mentirais en disant que tout a été testé dans ce domaine et marche parfaitement tellement les cas d’utilisation peuvent être sournois.</p></li>
<li><p>La possibilité de remplacer le fichier SVG source sans perdre les méta-données liées au logiciel : indices, titres, commentaires, zoom, etc.<br>
C’était confus auparavant : j’ai donc distingué « ajout » et « remplacement ».</p></li>
</ul>
<h3 id="toc-sous-le-capot">Sous le capot</h3>
<p><strong>Stabilité et refactoring</strong> : je l’avais exprimé dans la version 1.1, il devenait difficile de retoucher au code sans effet sur sa stabilité.<br>
Des tests automatisés ont été rajoutés et le logiciel a été découpé en une arborescence de fichiers bien plus digeste à la relecture.<br>
Ce dernier oblige désormais un « make build » après toute édition mais c’est un mal pour un bien et une fois mis en place, le logiciel gagne en qualité et en lisibilité.</p>
<p><strong>Correctifs divers</strong> : comme ça cela faisait un moment que je n’avais pas touché au code, j’ai revu pas mal de petits détails sur l’aspect graphique mais aussi des petits bugs subtils.<br>
Je ne me suis pas concentré à les lister, mais je peux juste dire qu’ils étaient nombreux.</p>
<h3 id="toc-vous-souhaitez-lutiliser">Vous souhaitez l’utiliser</h3>
<p>Les sources restent disponibles <a href="https://github.com/mothsART/editInteractiveSVG">sur GitHub</a>.<br>
Pour debian/ubuntu, le <a href="https://launchpad.net/%7Ejerem-ferry/+archive/ubuntu/app-illustration">PPA a été mis à jour</a>.</p>
<p>Pour les plus pressés d’entre vous, j’ai mis à jour également la <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/">version en ligne</a>.</p>
<h3 id="toc-que-nous-réserve-une-nouvelle-version">Que nous réserve une nouvelle version</h3>
<p>Ce projet a été initié il y a quatre ans et fait ce qu’on lui demande sans forcément de nouvelles évolutions.<br>
Je suis allé bien plus loin que ce que j’envisageais pour ce soft et en suis donc satisfait.<br>
J’ai d’autres projets en tête (et en cours) et il me parait malhonnête d’annoncer de futures évolutions alors que je sais d’avance que je n’y accorderais que peu de temps.<br>
Pour l’instant, je préfère dire que je vais maintenir le code à son strict nécessaire : corrections de bugs inévitables.</p>
<p>Si vraiment je repartais sur le projet, voici les axes que je donnerais :</p>
<ul>
<li><p>un nouveau nom, de nouvelles technologies et une nouvelle identité graphique : un des objectifs était de me débarrasser de pas mal de bibliothèques telles que jquery, bootstrap, etc. ;<br>
force est de constater que repartir de zéro sera bien plus bénéfique que tendre vers ce point itérativement ;</p></li>
<li><p>une appli serveur avec toutes les améliorations que ça implique : stockage, compte utilisateur, ajax, etc. ;</p></li>
<li><p>réfléchir <a href="https://fr.wikipedia.org/wiki/Progressive_web_app">Progressive Web App</a> : pouvoir installer l’éditeur comme une appli mobile ou tablette ;</p></li>
<li><p>plus de contenus : de nouveaux exemples (toute contribution est bienvenue) ;</p></li>
<li><p>rajouter des images (PNG, JPG) à l’ouverture (ou glissé-déposé) d’un nouveau fichier : <br>
un peu bizarre quand on parle d’éditeur interactif de SVG, mais je pense que le commun des mortels ne fait pas foncièrement la différence. Si son fichier est matriciel mais avec une définition suffisante, l’intérêt d’ajouter une étape pour le convertir en SVG me parait faible ;</p></li>
<li>
<p>l’amélioration de certaines parties techniques :</p>
<ul>
<li>ajout d’une barre de progression sur l’importation de fichiers lourds ;</li>
<li>optimiser davantage le CSS/JS (minification, concaténation) ;</li>
<li>quelques retouches visuelles (checkbox non natives) ;</li>
<li>la possibilité d’utiliser des images au format Avif (voir webp) ;</li>
<li>la possibilité de minifier à la volée les fichiers importés et exportés ;</li>
<li>conserver l’historique des modifications dans le fichier de travail (en HTML) : lié au passage au tout serveur. </li>
</ul>
</li>
</ul>
</div><div><a href="https://linuxfr.org/news/edit-interactive-svg-1-2.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/124374/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/news/edit-interactive-svg-1-2#comments">ouvrir dans le navigateur</a>
</p>
mothsARTYsabeau 🧶 🧦Benoît SibaudPierre Jarillonhttps://linuxfr.org/nodes/124374/comments.atomtag:linuxfr.org,2005:Diary/397832021-05-22T15:45:23+02:002021-05-22T15:45:23+02:00Edit Interactive SVG 1.2Licence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<h3 id="toc-intro">Intro</h3>
<p>L'éditeur de SVG Interactif prenait la poussière et j'ai fini par prendre le temps nécessaire pour lui redonner un petit coup de jeune.</p>
<p>Pour ceux qui suivent un peu le projet, nous arrivons à la version 1.2 qui suit la 1.1 <a href="//linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1">https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1</a></p>
<p>Cette version m'a permis de répondre a des besoins exprimés depuis sa version 1.0 (<a href="//linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif">https://linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif</a>) donc 3 ans d'attente :</p>
<ul>
<li><p>rajouter des contenus multimédia directement dans les commentaires : <br>
Il était déjà possible de rajouter des images (png, gif, jpg), il est désormais possible de compléter avec des vidéos, des sons ou de la musique.<br>
Néanmoins, j'encourage à utiliser cette fonctionnalité avec parcimonie car elle implique d'encapsuler l'ensemble dans un seul fichier et sous une forme textuel (base64) et par conséquent 1/3 plus voulumineux.</p></li>
<li><p>pouvoir gérer un historique de modification ce qui inclus l'ajout des boutons "annuler"/"restaurer" et la possibilité de naviguer sur l'ensemble des modifications effectués.<br>
Cette partie, pas foncièrement la plus demandé mais nécessaire à mon sens m'a donné le plus de fil à retordre pour adapter le code actuel et évité des régressions.<br>
Je mentirais en disant que tout a été testé dans ce domaine et marche parfaitement tellement les cas d'utilisation peuvent être sournois.</p></li>
<li><p>La possibilité de remplacé le fichier svg source sans perdre les méta-données liés au soft : indices, titres, commentaires, zoom etc.<br>
C'était confus auparavant : j'ai donc distingué "ajout" et "remplacement".</p></li>
</ul>
<h3 id="toc-sous-le-capot">Sous le capot</h3>
<ul>
<li><p>stabilité et refactoring : Je l'avait exprimé dans la version 1.1 : il devenait difficile de retoucher au soft sans impacter sa stabilité.<br>
Des tests automatisés ont été rajoutés et le soft a été découpé en une arborescence de fichiers bien plus digeste à la relecture.<br>
Ce dernier oblige désormais un "make build" après toute édition mais c'est un mal pour un bien et une fois mis en place, le soft gagne en qualité et en lisibilité.</p></li>
<li><p>correctifs divers : Vu que ça fait un moment que je n'avais pas touché au soft, j'ai revue pas mal de petits détails sur l'aspect graphique mais aussi des petits bugs subtils.<br>
Je ne me suis pas concentré à les lister mais je peux juste dire qu'ils étaient nombreux.</p></li>
</ul>
<h3 id="toc-vous-souhaitez-lutiliser">Vous souhaitez l'utiliser</h3>
<p>Les sources restent disponible ici : <a href="https://github.com/mothsART/editInteractiveSVG">https://github.com/mothsART/editInteractiveSVG</a><br>
Pour debian/ubuntu, le ppa a été maj : <a href="https://launchpad.net/%7Ejerem-ferry/+archive/ubuntu/app-illustration">https://launchpad.net/~jerem-ferry/+archive/ubuntu/app-illustration</a></p>
<p>Pour les plus pressés d'entre vous, j'ai maj également la version on-line : <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/">https://mothsart.github.io/labo/frontend/edit_interactive_svg/</a></p>
<h3 id="toc-que-nous-réserves-une-nouvelle-version">Que nous réserves une nouvelle version</h3>
<p>Ce projet a été initié il y a 4 ans et fait ce qu'on lui demande sans forcément de nouvelles évolutions.<br>
Je suis allé bien plus loin que ce que j’envisageais pour ce soft et en suit donc satisfait.<br>
J'ai d'autres projets en tête (et en cours) et il me parait malhonnête d'annoncer de futures évolutions alors que je sais d'avance que je n'y accorderais que peu de temps.<br>
Pour l'instant, je préfère dire que je vais maintenir le soft à son strict nécessaires : corrections de bugs inévitables.</p>
<p>Si vraiment je repartais sur le projet, voici les axes que je donnerais :</p>
<ul>
<li><p>un nouveau nom, de nouvelles technos et une nouvelle identité graphique : un des objectifs étaient de me débarrasser de pas mal de libs tel que jquery, bootstrap etc.<br>
Force est de constaté que repartir de zéro sera bien plus bénéfique que tendre vers ce point itérativement.</p></li>
<li><p>une appli serveur avec toutes les améliorations que ça implique : stockage, compte utilisateur, ajax etc.</p></li>
<li><p>réfléchir PWA : pouvoir installer l'éditeur comme une appli mobile ou tablette.</p></li>
<li><p>plus de contenus : de nouveaux exemples (toute contribution est bienvenue)</p></li>
<li><p>rajouter des images (png, jpg) à l'ouverture (ou glissé-déposé) d'un nouveau fichier : <br>
un peu bizarre quand on parle d'éditeur interactif de "SVG" mais je pense que le commun des mortels ne fait pas foncièrement la différence :<br>
Si son fichier est matriciel mais avec une définition suffisante, l'intérêt d'ajouter une étape pour le convertir en SVG me parait faible.</p></li>
<li>
<p>l'amélioration de certaines parties techniques :</p>
<ul>
<li>ajout d'une barre de progression sur l'importation de fichiers lourds</li>
<li>optimiser d'avantages le css/js (minification, concaténation)</li>
<li>quelques retouches visuels (checkbox non natives)</li>
<li>la possibilité d'utiliser des images au format Avif (voir webp)</li>
<li>la possibilité de minifier à la volée les fichiers importés et exportés</li>
<li>conserver l'historique des modifications dans le fichier de travail (en HTML) : lié au passage full serveur. </li>
</ul>
</li>
</ul>
<div><a href="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-2.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/124369/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-2#comments">ouvrir dans le navigateur</a>
</p>
mothsARThttps://linuxfr.org/nodes/124369/comments.atomtag:linuxfr.org,2005:Diary/396052021-02-13T17:48:01+01:002021-02-13T17:48:01+01:00Un CV en ligneLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Cela faisait longtemps que ça me dérangeait: Refaire mon CV, cette fois en utilisant HTML/CSS. En utilisant les dernières avancées en HTML5 / CSS3, on doit pouvoir arriver à quelque chose de présentable et pratique.</p>
<p>Historiquement, j'utilisais LaTeX, puis, pour des raisons diverses, LibreOffice.</p>
<p>LaTeX, c'est bien, mais il y a toujours un moment ou un recruteur vous demande une version word, parce-que le PDF généré ne peut pas être importé dans word. Les paragraphes, voire les mots ou les lignes se retrouvent dans le désordre, surtout si vous utilisez plusieurs colonnes. Dommage, car l'aspect visuel du PDF avait de la classe.</p>
<p>Ensuite, je suis passé à LibreOffice. Ici, pas de souci, ni avec les recruteurs, ni avec les entreprises qui vous demandent un CV en PDF. Mais là encore, quelques inconvénients, comme par exemple l'obligation d'exporter en PDF pour mettre sur son site. à l'heure du web, je trouve ça dommage. Quand à l'export HTML de LibreOffice, oubliez.</p>
<p>J'ai donc commencé une ré-écriture, me faisant réviser au passage HTML/CSS. Les avantages sont nombreux:</p>
<ul>
<li>Plusieurs styles possibles, version anonyme, version longue, version courte, etc. Fonctionnalité inclue directement avec Firefox. Chrome demande un extension.</li>
<li>Pas besoin de maintenir une version PDF et une version HTML en ligne. Une feuille de style différente suffit.</li>
<li>On peut donner une version courte en PDF, et indiquer que la version longue est sur internet.</li>
<li>On peut inclure un peu d’interactivité, par exemple ajouter des barres de progression en fonction de projets GitHub/Gitlab/etc.</li>
<li>Liens pour télécharger, par exemple sa carte de visite au format vcard ou QR code.</li>
<li>Pas besoin d'imprimer, on sauve du papier.</li>
<li>Le CV est visible sur une tablette ou un téléphone</li>
<li>Le CV est référencé sur internet (si vous le souhaitez)</li>
<li>On peut le stocker dans un dépôt git</li>
<li>Les possibilités offertes par la feuille de style "media print" sont vraiment excellentes, surtout avec Firefox. Chrome ne respecte pas mon vœu de ne pas couper les blocs <code><div></code>.</li>
</ul>
<p>Vous pouvez regarder ou copier les feuilles de styles, si vous avez besoin d'inspiration, ou simplement comprendre comment ça marche.</p>
<p>C'est un projet en cours, il manque encore un peu d'interactivité, mais pour l'instant, ça suffira.</p>
<p>Voilà: <a href="https://rodier.me/cv">https://rodier.me/cv</a></p>
<div><a href="https://linuxfr.org/users/arodier/journaux/un-cv-en-ligne.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/123298/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/arodier/journaux/un-cv-en-ligne#comments">ouvrir dans le navigateur</a>
</p>
Andre Rodierhttps://linuxfr.org/nodes/123298/comments.atomtag:linuxfr.org,2005:Diary/395812021-01-28T09:34:14+01:002021-01-28T09:34:14+01:00DJT-CSP : Django et sécurisation côté clientLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<h2 class="sommaire">Sommaire</h2>
<ul class="toc">
<li>
<a href="#toc-django-et-s%C3%A9curisation-c%C3%B4t%C3%A9-client">Django et sécurisation côté client</a><ul>
<li><a href="#toc-en-t%C3%AAtes-http-pour-la-s%C3%A9curit%C3%A9">En-têtes HTTP pour la sécurité</a></li>
<li><a href="#toc-int%C3%A9gration-dans-django">Intégration dans Django</a></li>
</ul>
</li>
</ul>
<h2 id="toc-django-et-sécurisation-côté-client">Django et sécurisation côté client</h2>
<p>Petit moment de pub : pour me faciliter la vie, j'ai développé récemment une extension pour <a href="https://pypi.org/project/django-debug-toolbar/">Django-Debug-Toolbar</a> <br>
pour évaluer pendant le développement la valeur d'en-têtes HTTP liés à la sécurité en HTML : <a href="https://pypi.org/project/djt-csp/">djt-csp</a>.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6769746875622e636f6d2f6439706f756365732f646a745f6373702f7261772f6d61737465722f646a745f6373702e706e67/djt_csp.png" alt="Screenshot" title="Source : https://github.com/d9pouces/djt_csp/raw/master/djt_csp.png"></p>
<p>Vous aurez sur chaque page la colonne de droite caractéristique de Django-Debug-Toolbar, avec les détails qui s'affichent en cliquant sur <em>security score</em>.</p>
<p>Il fonctionne sans connexion internet et évite d'utiliser l'<a href="https://observatory.mozilla.org/analyze/linuxfr.org">outil en ligne</a> de Mozilla.<br>
Avec djt-csp, vous aurez ainsi le score sur chaque page. Il devrait être identique à celui fourni par Mozilla,<br>
sachant que je fais comme si c'était du HTTPS pour certains calculs, même si ce n'est pas le cas, afin d'avoir quelque chose de représentatif du site définitif.</p>
<p>Comme il n'y a rien de plus à dire, j'en profite pour faire un petit rappel sur certains aspects de sécurité sur le web.</p>
<h3 id="toc-en-têtes-http-pour-la-sécurité">En-têtes HTTP pour la sécurité</h3>
<p>Quand on souhaite sécuriser son site web, on commence souvent à présenter les attaques du client vers le serveur, et on protège donc le serveur contre le client.<br>
Cependant, se limiter à ces attaques serait ignorer que votre site peut servir de vecteur <em>à l'encontre</em> du client (par exemple en présentant involontairement au client du code javascript malveillant), ou qu'il est possible <br>
que votre client réalise à son insu des actions <em>a priori</em> légitimes (le faire poster des messages, par exemple).<br>
Ces attaques peuvent se faire en intégrant votre page dans une autre ou orientant le client vers une page de votre site avec des données choisies par l'attaquant (via les paramètres de l'URL).</p>
<p>Heureusement, il est possible de limiter ces possibilités en indiquant ce que le navigateur web est censé pouvoir faire avec la page web que vous lui envoyez.<br>
Bien sûr, cela signifie que votre navigateur coopère pleinement en prenant en compte les limitations indiquées par votre page.<br>
Quelques exemples rapides :</p>
<ul>
<li>indiquer que votre page devra toujours être accédée en HTTPS,</li>
<li>préciser l'empreinte des ressources externes (Javascript, notamment) pour éviter leur corruption, notamment si elles sont conservées par un tiers (on pense immédiatement aux CDN),</li>
<li>empêcher un fichier quelconque d'être confondu avec un fichier JavaScript,</li>
<li>empêcher votre site d'être intégré dans un site tiers,</li>
<li>empêcher votre site d'intégrer, à son insu, des éléments tiers,</li>
<li>empêcher l'envoi de formulaires depuis votre site vers un tiers.</li>
</ul>
<p>Ces limitations peuvent être imposées via l'envoi de en-têtes HTTP (dans le plus pur respect de la séparation des couches réseau…) ou l'ajout d'attributs dans le HTML (pour les empreintes des ressources externes).<br>
Voici les principaux en-têtes utilisés pour ce faire :</p>
<ul>
<li>
<code>Strict-Transport-Security</code>, pour indiquer que votre site doit toujours être accédé en HTTPS,</li>
<li>
<code>X-Content-Type-Options</code>, empêchant le navigateur de confondre un fichier quelconque avec un script,</li>
<li>
<code>X-XSS-Protection</code> pour bloquer les attaques par injection de JavaScript dans votre HTML,</li>
<li>
<code>X-Frame-Options</code> encadrant le comportement des iframe,</li>
<li>
<code>Content-Security-Policy</code> pour limiter les ressources qui peuvent être chargées ou utilisées,</li>
<li>
<code>Referrer-Policy</code> afin de ne pas trop donner d'information quand clique sur des liens extérieurs,</li>
<li>
<code>Permissions-Policy</code> servant à limiter l'accès aux périphériques locaux (caméra, micro, localisation), encore très récent et qui reprend le rôle de l'en-tête <code>Feature-Policy</code>.</li>
</ul>
<p>Les cookies doivent également être protégés. Le serveur peut ainsi les rendre inaccessibles au trafic en clair (<code>Secure</code>), au JavaScript (<code>HttpOnly</code>) et aux autres sites (<code>SameSite</code>).</p>
<p>Enfin, les attaques CSRF (vous validez depuis un site malveillant B un formulaire qui est envoyé vers un site victime A) peuvent êtres contrées<br>
avec une valeur aléatoire envoyée avec le formulaire et qui ne peut provenir que de A : ainsi, A est certain que le client a bien vu le formulaire depuis son propre site.</p>
<h3 id="toc-intégration-dans-django">Intégration dans Django</h3>
<p>Le framework <a href="https://www.djangoproject.com">Django</a> est bien connu des développeurs web Python.<br>
Je ne m'étendrais donc pas sur le sujet, mais sachez simplement que c'est un framework «tout-en-un», avec les connecteurs base de données, moteurs de rendu, etc. <br>
De très nombreuses extensions sont disponibles étant donnée sa popularité.</p>
<p>De base, un certain nombre de ces en-têtes sont prévus par Django et sont réglables par les fameux <code>settings</code>:<br>
- <code>Strict-Transport-Security</code> (SECURE_HSTS_INCLUDE_SUBDOMAINS, SECURE_HSTS_PRELOAD, SECURE_HSTS_SECONDS),<br>
- <code>X-Content-Type-Options</code> (SECURE_CONTENT_TYPE_NOSNIFF),<br>
- <code>X-XSS-Protection</code> (SECURE_BROWSER_XSS_FILTER),<br>
- <code>X-Frame-Options</code> (X_FRAME_OPTIONS),<br>
- <code>Referrer-Policy</code> (SECURE_REFERRER_POLICY).</p>
<p>D'autres réglages permettent également de déterminer le comportement des cookies utilisés par Django.<br>
Il manque cependant un en-tête, <code>Content-Security-Policy</code>, qui est souvent plus dur à paramétrer et pourra être différent d'une page à l'autre.<br>
Si de base, Django ne permet pas de le configurer, il existe tout de même un projet pour le faire : <a href="https://pypi.org/project/django-csp/">Django-CSP</a>.</p>
<p>Vous pouvez ainsi désactiver le JavaScript intégré au HTML sur la plupart de vos pages en ne l'activant que sur celles qui le réclament absolument.<br>
Comme il est délicat d'utiliser CSP sur un site existant, il est souvent conseillé de commencer avec des options minimales puis de renforcer progressivement les protections.</p>
<div><a href="https://linuxfr.org/users/flan--2/journaux/djt-csp-django-et-securisation-cote-client.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/123114/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/flan--2/journaux/djt-csp-django-et-securisation-cote-client#comments">ouvrir dans le navigateur</a>
</p>
flanhttps://linuxfr.org/nodes/123114/comments.atomtag:linuxfr.org,2005:Diary/384682019-04-20T11:14:16+02:002019-04-20T11:14:16+02:00Edit Interactive SVG 1.1Licence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Mon éditeur de SVG interactif passe tranquillement la barre 1.1.</p>
<p>Depuis la version 1.0, le temps est passé :<a href="//linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif">https://linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif</a></p>
<p>Le soft c'est rudement stabilisé avec son lot de correctifs que je ne listerais pas.</p>
<p>Quelques fonctionnalités se sont également ajoutées :</p>
<ul>
<li>La mise en place de raccourcis clavier pour contrôler le fichier interactif généré.</li>
<li>La possibilité d'éditer les crédits du document.</li>
<li>La possibilité de remplacé le fichier svg source sans perdre les méta-données liés au soft : indices, titres, commentaires, zoom etc.</li>
<li>les liens s'ouvrent désormais par défaut sur des nouveaux onglets.</li>
<li>L'ajout de plusieurs nouveaux exemples dont 3 créé par un professeur des écoles, Stéphane Deudon (également le dev principal du projet <a href="https://primtux.fr/">Primtux</a>).
Ce dernier m'a grandement aidé dans les tests et les suggestions d'amélioration.</li>
<li>une gestion des versions des fichiers générés avec (pour l'instant) de la rétrocompatibilité</li>
</ul>
<p>Une 1.2 dans les tuyaux :</p>
<p>Avant d'arriver à une nouvelle version stable, je suis passé par la case "régression" un peu trop souvent à mon goût.<br>
Le gros chantier à venir est donc de mettre en place de vrais scénarios de test avec de l'intégration continue.</p>
<p>Autre objectif qui devrait suivre : <br>
Améliorer la compression des différents fichiers d'édition : html/js/css/svg et automatiser ce process.<br>
Ça va se faire avec une liste d'outils en Rust : svgcleaner, pax etc.</p>
<p>Mon objectif est également de me passer des libs tierces (jquery en tête de liste puis Bootstrap etc.), principalement sur les fichiers générés.<br>
Je suis de plus en plus convaincu que tant qu'on peut éviter les dépendances (npm), on évite et l'on se porte mieux sur du long terme.</p>
<p>D'autres exemples devraient également voir le jour.</p>
<p>Bref, une nouvelle phase de consolidation qui permettra d'engager des objectifs plus ambitieux : <br>
* inclure du sons, de la musique, des vidéos<br>
* mise en place d'une PWA<br>
* annuler/rétablir des actions<br>
* …</p>
<p>Les sources se trouvent ici : <a href="https://github.com/mothsART/editInteractiveSVG">https://github.com/mothsART/editInteractiveSVG</a></p>
<p>Pour debian/ubuntu, j'ai mis à jour un ppa : <a href="https://launchpad.net/%7Ejerem-ferry/+archive/ubuntu/app-illustration">https://launchpad.net/~jerem-ferry/+archive/ubuntu/app-illustration</a></p>
<p>Remerciement également à Cyril Borne et Philippe Ronflette.</p>
<div><a href="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/116999/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1#comments">ouvrir dans le navigateur</a>
</p>
mothsARThttps://linuxfr.org/nodes/116999/comments.atomtag:linuxfr.org,2005:Diary/381982018-11-07T08:58:51+01:002018-11-07T08:58:51+01:00Reconstruire son lecteur audio pour le webLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>J'ai profité d'une ré-écriture de mon player audio en WebComponent pour documenter comment on insère du son dans une page web. Des plugins, de ce qui a rendu Flash ultra-populaire, le web documentaire, l'arrivée de la balise <code><audio></code>, l'API, la Vie et le Reste</p>
<ul>
<li><a href="https://dascritch.net/post/2018/11/06/Reconstruire-son-lecteur-audio-pour-le-web">Le texte sur mon blog</a></li>
<li><a href="https://dascritch.github.io/cpu-audio/">La présentation dudit player audio</a></li>
</ul>
<div><a href="https://linuxfr.org/users/dascritch/journaux/reconstruire-son-lecteur-audio-pour-le-web.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/115659/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/dascritch/journaux/reconstruire-son-lecteur-audio-pour-le-web#comments">ouvrir dans le navigateur</a>
</p>
Da Scritchhttps://linuxfr.org/nodes/115659/comments.atomtag:linuxfr.org,2005:Post/395742018-10-23T11:57:06+02:002018-10-23T11:57:06+02:00Développement application IOS / Android<p>Bonjour,</p>
<p>Quel serait le meilleur moyen pour porter une un site internet de messagerie instantanée HTML5 / socket.io / node.js en application native Android / IOS ?</p>
<p>Avez vous des retours d'expérience de phonegap ou autre point de vue performance, stabilité, push notification ?</p>
<p>Merci.</p>
<div><a href="https://linuxfr.org/forums/programmationautre/posts/developpement-application-ios-android.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/115534/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/forums/programmationautre/posts/developpement-application-ios-android#comments">ouvrir dans le navigateur</a>
</p>
antonio vincihttps://linuxfr.org/nodes/115534/comments.atomtag:linuxfr.org,2005:Diary/376652017-12-21T16:49:44+01:002017-12-21T16:49:44+01:00Hache-thé-aime-aile cinq virgule deux (a.k.a HTML 5.2 pour les intimes)<p>Le saviez-vous ?</p>
<p>Le HTML se met à jour : la version 5.2 de la norme a été publiée la semaine dernière par le W3C.</p>
<p>On peut trouver <a href="https://www.w3.org/blog/2017/12/html-5-2-is-done-html-5-3-is-coming/">l'annonce ici</a> et surtout <a href="https://www.w3.org/TR/html52/changes.html">les changements là</a>, les deux liens étant en anglais. Ça parle surtout d'une API de paiement, semble-t-il.</p>
<p>Personnellement je n'avais même pas vu passer la nouvelle de la v5.1 de HTML, donc je me dis que ce journal-signet peut servir à quelqu'un.</p>
<hr><p><em>Journal sous licence <a href="//linuxfr.org/suivi/proposer-d-autres-licences-que-cc-by-sa">CC-BY 4.0</a>, pour l'intérêt que ça a sur un texte de cette longueur.</em></p><div><a href="https://linuxfr.org/users/spacefox/journaux/hache-the-aime-aile-cinq-virgule-deux-a-k-a-html-5-2-pour-les-intimes.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/113369/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/spacefox/journaux/hache-the-aime-aile-cinq-virgule-deux-a-k-a-html-5-2-pour-les-intimes#comments">ouvrir dans le navigateur</a>
</p>
SpaceFoxhttps://linuxfr.org/nodes/113369/comments.atomtag:linuxfr.org,2005:News/383032017-11-20T13:50:59+01:002017-12-08T10:23:36+01:00Terminus : un jeu d’aventure pour apprendre à utiliser la ligne de commandeLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<div><p>En 2011, des étudiant·e·s du MIT ont eu l’idée de passer par le biais du jeu vidéo pour apprendre à utiliser la ligne de commande GNU/Linux aux non‐initié(e)s. Trois ans plus tard sortait le <a href="http://mprat.github.io/Terminus/">jeu <em>Terminus</em> jouable</a> (accès au <a href="https://github.com/mprat/terminus">code source</a>).</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f6769746875622e636f6d2f6c75666661682f5465726d696e75732f626c6f622f6d61737465722f7372632f696d672f70726f6d6f5f696d6167652e6a70673f7261773d74727565/promo_image.jpg?raw=true" alt="Terminus, un jeu avec des gamins, des trolls, et des manuscrits" title="Source : https://github.com/luffah/Terminus/blob/master/src/img/promo_image.jpg?raw=true"></p></div><ul><li>lien nᵒ 1 : <a title="http://opengameart.org/" hreflang="en" href="https://linuxfr.org/redirect/101014">Open Game Art (ressources pour faire un jeu vidéo libre)</a></li><li>lien nᵒ 2 : <a title="http://web.mit.edu/mprat/Public/web/Terminus/Java/CMS.590Game2FinalReport.pdf" hreflang="en" href="https://linuxfr.org/redirect/101015">Mémoire présentant le jeu original (en anglais)</a></li><li>lien nᵒ 3 : <a title="https://github.com/luffah/terminus" hreflang="en" href="https://linuxfr.org/redirect/101016">Code source (dépot Git) du jeu Terminus</a></li><li>lien nᵒ 4 : <a title="http://luffah.xyz/bidules/Terminus/" hreflang="fr" href="https://linuxfr.org/redirect/101017">Démo du jeu Terminus</a></li></ul><div><p>L’an dernier, deux Bretons francophones inspirés, après de nombreuses recherches d’un outil amusant et ludique pour faire connaître leur système d’exploitation préféré aux non‐initiés, décidèrent de traduire et reprendre la conception du jeu.</p>
<p>Des adaptations liées aux subtilités de langage ont été faites. Des éléments scénaristiques plus complexes (incluant sons et musiques) ont été ajoutés. Lors des modifications de scénario, on a fait attention à garder un esprit non violent et inclusif. À terme, le jeu sera utilisable (c’est presque le cas) par des personnes malvoyantes disposant d’un lecteur d’écran.</p>
<p>La démo du jeu et le code source sont disponibles ici : <a href="http://luffah.xyz/bidules/Terminus/"><em>Terminus</em></a> (<a href="https://github.com/luffah/terminus">dépôt Git</a>).</p>
<p>Les premières expériences utilisateur ont été réalisées avec des personnes ne sachant pas encore utiliser le terminal GNU/Linux. Les difficultés rencontrées (principalement l’oubli de commandes, et la non‐assimilation de la touche <code>Tab</code> pour compléter les arguments) ont permis au jeu d’évoluer en explorant de nouvelles fonctionnalités, telles que l’inclusion de mini‐jeux.</p>
<p>Aujourd’hui, les créateurs de cette nouvelle version cherchent des testeurs <strong>et</strong> de l’aide pour agrandir et complexifier le jeu. Si vous souhaitez participer, nous sommes très ouverts aux critiques et à l’évolution de notre média sous toutes ses formes.</p></div><div><a href="https://linuxfr.org/news/terminus-un-jeu-d-aventure-pour-apprendre-a-utiliser-la-ligne-de-commande.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/113142/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/news/terminus-un-jeu-d-aventure-pour-apprendre-a-utiliser-la-ligne-de-commande#comments">ouvrir dans le navigateur</a>
</p>
pavatarDavy DefaudNÿcopalm123Benoît Sibaudhttps://linuxfr.org/nodes/113142/comments.atomtag:linuxfr.org,2005:News/376432016-11-11T16:25:46+01:002016-11-12T10:24:56+01:00#WhatWouldTimblDo : nouvelle campagne de la FSF contre les DRM sur le WebLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<div><p>Cette semaine, Tim Berners‐Lee est appelé à se prononcer sur l’adoption de la gestion numérique des droits (plus connue sous le nom de <a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques" title="Digital rights management">DRM</a>) dans HTML 5. La <em>Free Software Foundation</em> a donc lancé une pétition pour convaincre l’actuel président du W3C de dire enfin non.</p>
<h3 id="petit-historique">Petit historique…</h3>
<p><a href="https://fr.wikipedia.org/wiki/Tim_Berners%E2%80%90Lee">Tim Berners‐Lee</a>, surnommé Timbl, est le principal inventeur du Web, ainsi que le fondateur et président du <a href="https://fr.wikipedia.org/wiki/World%20Wide%20Web%20Consortium" title="Définition Wikipédia">World Wide Web Consortium</a> dit W3C, organisme de standardisation du Web.<br>
Le W3C regroupe plusieurs centaines d’entreprises partenaires. Parmi elles, <strong>Apple, Google, Microsoft et Netflix proposent en 2013, le développement des <a href="https://en.wikipedia.org/wiki/Encrypted_Media_Extensions"><em>Encrypted Media Extensions</em></a> (EME), un système de menottes numériques pour le Web</strong>. Tim Berners‐Lee et son équipe acceptent cette proposition, suscitant de vives critiques du grand public comme de professionnels.</p>
<h3 id="-et-gros-remous">… et gros remous</h3>
<p>Fondamentalement opposée aux DRM, la <a href="https://fr.wikipedia.org/wiki/Free%20Software%20Fondation" title="Définition Wikipédia">Free Software Fondation</a> dispose d’un portail d’information militant dans ce sens : <em>Defective by Design</em> (« défectueux par conception ») et lance une <a href="https://my.fsf.org/civicrm/profile/create?gid=183&reset=1">pétition anti‐EME</a>.</p></div><ul><li>lien nᵒ 1 : <a title="http://linuxfr.org/users/muchos/journaux/whatwouldtimbldo-nouvelle-campagne-de-la-fsf-contre-les-drm-sur-le-web" hreflang="fr" href="https://linuxfr.org/redirect/98543">Journal à l’origine de la dépêche</a></li><li>lien nᵒ 2 : <a title="https://www.defectivebydesign.org/no-drm-in-html5" hreflang="en" href="https://linuxfr.org/redirect/98544">Petition anti‐EME</a></li><li>lien nᵒ 3 : <a title="https://defectivebydesign.org/" hreflang="en" href="https://linuxfr.org/redirect/98545">Defective by Design</a></li></ul><div><p>Dans <a href="https://defectivebydesign.org/blog/tim_bernerslee_created_sold_out_web">un récent billet</a>, un employé de la FSF tente d’expliquer l’indulgence de Tim Berners‐Lee vis‐à‐vis du projet EME et pourquoi il faut plutôt s’en inquiéter :</p>
<blockquote>
<p>« <em>Berners‐Lee semble espérer que les grands diffuseurs adopteront EME et l’utiliseront pour rendre les DRM moins coûteux et moins rigides lors du streaming de vidéos, puis finiront par laisser tranquille le Web libre. Mais l’histoire nous prouve exactement le contraire. Pour maintenir l’utilisateur sous contrôle, les DRM exigent d’être déployés sur toute nouvelle plate‐forme, tout nouveau format. Leurs propriétaires n’ont aucune raison de ne pas utiliser leur immense pouvoir et leur argent pour en injecter davantage, ailleurs dans le Web. Ainsi, on parle à demi‐mot d’ajouter des DRM dans les standards pour textes et pour images ; ce que la ratification des EME stimulerait.</em> »</p>
</blockquote>
<p>Dès le lancement du groupe de travail EME en 2013, Tim Berneers-Lee et son équipe <a href="//linuxfr.org/users/muchos/journaux/drm-et-web-ouvert-le-drame-shakespearien-du-w3c">affichaient déjà un certain malaise</a>. En octobre 2016, Timbl se lavait les mains <a href="https://defectivebydesign.org/blog/tim_bernerslee_just_gave_us_opening_stop_drm_web_standards">de la décision d’étendre ou non le temps de développement du standard EME</a>. Ces velléités encouragent aujourd’hui la FSF à interpeller l’inventeur du Web, cependant que le standard est proposé à la mise en œuvre.</p>
<h3 id="la-fsf-en-action">La FSF en action :</h3>
<ul>
<li>
<a href="https://my.fsf.org/civicrm/profile/create?gid=183&reset=1">une pétition</a>, signée par 26 organisations et plus de 34 000 personnes à cette heure ;</li>
<li>la campagne <strong>#WhatWouldTimblDo</strong> (« Ce que ferait Timbl ») sur les réseaux sociaux.</li>
</ul></div><div><a href="https://linuxfr.org/news/whatwouldtimbldo-nouvelle-campagne-de-la-fsf-contre-les-drm-sur-le-web.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/110496/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/news/whatwouldtimbldo-nouvelle-campagne-de-la-fsf-contre-les-drm-sur-le-web#comments">ouvrir dans le navigateur</a>
</p>
muchosZeroHeureDavy DefaudBenoît Sibaudhttps://linuxfr.org/nodes/110496/comments.atom