Tiens, il existe une API qui permet de transformer du texte en Bionic Reading, cette technique améliorant la lecture en mettant en gras le début du mot. Je m'interrogeais justement sur la pertinence d'implémenter ça sur mon appli de documents en espagnol pour les élèves éprouvant des difficultés de lecture...

Bon, il faudra que je fasse une couche d'interface afin que les données des élèves ne transitent pas vers le site de l'API, comme pour celle de synthèse vocale... mais rien de trop ardu.

A creuser.

Merci à @sebsauvage pour le partage !

« Amis de la fonction publique d'État, si on vous pose la question... En #France, les suites collaboratives #Microsoft #Office 365 et #Google #Workspace sont proscrites dans les services de l'État. Les bases réglementaires : → Note de la CNIL (27/05/2021) : https://www.cnil.fr/fr/la-cnil-appelle-evolutions-dans-utilisation-outils-collaboratifs-etatsuniens-enseignement-superieur-recherche → Circulaire 6282-SG (05/07/2021) et note (15/09/2021) : https://acteurspublics.fr/upload/media/default/0001/36/acf32455f9b92bab52878ee1c8d83882684df1cc.pdf → Ministre de l'Éducation Nationale, en réponse à une question écrite (2022) : https://questions.assemblee-nationale.fr/q16/16-971QE.htm

droit #juridique #numerique »

Via https://sebsauvage.net/links/?9I6nBA

Une API de text to speech qui comble les attentes que j'avais:

• un service gratuit suffisant
• une bonne prononciation espagnole
• une intonation correcte lors de la lecture
• pas de GAFAM dedans
• appelable simplement, en particulier en PHP

Au départ, je cherchais une lib me permettant de faire la même chose sans dépendre d'un service tiers (autonomie, disparition du service, passage au tout payant toussa).

Hélas, aucune lib gratuite n'a le niveau de qualité nécessaire, l'indépendance aux gafams et la simplicité d'installation/utilisation pour mes projets et applis en cours (si quelqu'un connaît une lib PHP ou JS pour faire ça, je prends avec enthousiasme)... Je me suis donc rabattu vers un microservice externe.

Ce qui m'embêtait, c'était que mes élèves se retrouvent sur mes pages - dans lesquelles je fais en sorte qu'aucune donnée ne sorte vers des tiers - avec un appel direct à une API extérieure, donc avec un problème RGPD éventuel.

Du coup, j'ai fait un wrapper de cette API que je peux moi-même appeler comme une API: ainsi, l'appel côté client se fait toujours vers mon serveur qui répercute la requête vers VoiceRSS, récupère le retour et renvoie sous forme de fichier mp3. De plus, si une requête a déjà été faite, elle a été mise en cache par le wrapper, ce qui diminue la charge serveur et le nombre d'appels vers l'API.

Si ça intéresse quelqu'un, je pourrais développer et filer le code...

Clamp permet de spécifier trois valeurs pour une propriété : la valeur minimale, la valeur préférée et la valeur maximale.

Glopglop N°1

Ainsi, on pourra donner des tailles fixes comme minimum et maximum et une taille variable (pourcentages ou valeur de viewport) comme valeur préférée: la valeur variable sera utilisée, mais bornée au minimum et au maximum. ex: clamp(20px, 5vw, 54px)

Glopglop N°2

On peut faire des calculs directement dans clamp() : font-size: clamp(20px, 16px + 5vw, 54px);

Glopglop N°3

Clamp peut être utilisé sur les paddings, les margins etc... Tout ce qui a une valeur numérique (length, number, percentage...)

Ouelcome back copain !

Je partage ton avis sur Dieu David Gemmell et celui qui est sur les quatrième de couv' de ses romans: «on a envie de croire que tout cela fut vrai tant c'est beau»

Écriture simple et claire mais jamais simpliste, univers cohérent (c'est pas si souvent), personnages forts mais humains... <3

Et Pratchett aussi ! (j'ai - encore - recommencé la lecture des annales du disque monde... )

Superbe et pas si compliqué... Merci !

EDIT: Comme la page est bourrée de trackers, je copie colle ici et sur mon snippetvamp

CSS

 .tree {
  --spacing: 1.5rem;
  --radius: 10px;
  --marker-bg-default: #ddd;
  --marker-bg-haschild: #6b9abb;
  line-height: 2rem;
}
.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}
.tree ul li {
  border-left: 2px solid #ddd;
}
.tree ul li:last-child {
  border-color: transparent;
}
.tree ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}
.tree summary {
  display: block;
  cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}
.tree summary:focus {
  outline: none;
}
.tree summary:focus-visible {
  outline: 1px dotted #000;
}
.tree li::after,
.tree summary::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius) + 2px);
  left: calc(var(--spacing) - var(--radius) - 2px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: var(--marker-bg-default);
}
.tree summary::before {
  content: "+";
  z-index: 1;
  background: var(--marker-bg-haschild);
  color: #fff;
  line-height: calc(2 * var(--radius));
  text-align: center;
}
.tree details[open] > summary::before {
  content: "−";
}

HTML

<ul class="tree">
  <li>
    <details open>
      <summary>Informatique</summary>
      <ul>
        <li>
          <details>
            <summary>Périphériques</summary>
            <ul>
              <li>Clavier</li>
              <li>Souris</li>
              <li>Ecran</li>
            </ul>
          </details>
        </li>
        <li>
          <details open>
            <summary>Stockage</summary>
            <ul>
              <li>Disque dur</li>
              <li>SSD</li>
              <li>Clé USB</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>Carte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
</code></pre> codeCarte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>

Je me mets de côté cet article qui explique pas à pas le minimum des bases de la création d'une appli sans usine à gaz.

J'ai essayé de le lire plusieurs fois, mais faudra que j'attende d'être tout seul

Très intéressant ça !

Utiliser une méthode exotique (autre que GET etc) pour sa requête permet de bypasser la directive Limit du htaccess...

<Limit GET POST>
    require valid-user
</Limit>

sera bypassé si on fait une requête curl avec CURLOPT_CUSTOMREQUEST => 'TOTO'

Une solution est proposée.

Une appli qui permet de générer le CSS pour styler les input range... C'est joli en plus ! Hop, coudifié !

Une lib créant une dropzone automatiquement à la place d'un input-file. Avec les explications techniques.

Grafikart <3