Table des matières

Application "Maudys"

Présentation du projet

Nous travaillons sur la création d'une application web pour aider les dyslexiques à retranscrire leurs notes manuscrites en fichier texte.
Pour cela, nous utiliserons le HTML, CSS, JavaScript, et le PHP.
Voici un guide de démarrage pour nous aider à fractionner le projet en plus petit sous projets :

Méthodologie

1.Conception de l'interface utilisateur (HTML et CSS) :

- Concevoir une interface utilisateur simple et intuitive.
- Utiliser le HTML pour la structure de la page (formulaires, divs, etc.).
- Utiliser le CSS pour le style et la mise en page.
- S'assurer que l'interface est conviviale pour les utilisateurs dyslexiques (choix de couleurs, contraste, polices lisibles, etc.).
- Utiliser un IDE implémentant une IA pour nous aider en cas de difficulté (Cursor.io).

2.Interaction avec l'utilisateur (JavaScript) :

- Utiliser le JavaScript pour rendre l'interface interactive.
- Ajouter des fonctionnalités pour l'ajout et la modification de notes.
- S'assurer que les interactions sont simples et faciles à comprendre.

3.Traitement côté client (JavaScript) :

- Traiter les prises de notes manuscrites en fichier texte.
- Traiter les images des notes manuscrites en fichier texte.
- Implémenter un correcteur d'orthographe.
- Explorer les bibliothèques JavaScript telles que Fabric.js, MyScript, Tesseract.js, pour la manipulation de textes et d'images.
- Pensez à ajouter des fonctionnalités d'amélioration, comme la rotation ou le redimensionnement des images.

4.Traitement côté serveur (PHP) :

- Utiliser PHP pour traiter les données côté serveur.
- Configurez un serveur pour recevoir les données du formulaire.
- Implémentez le traitement des images côté serveur si nécessaire.
- Sauvegarder les notes et autres documents

5.Gestion de la base de données (PHP et éventuellement MySQL) :

- Si nous avons besoin de stocker des informations sur les notes, nous devrons configurer une base de données (MySQL).
- Utiliser PHP pour interagir avec la base de données.

6.Accessibilité :

- S’assurer que notre application est accessible.
- Utiliser des attributs HTML pour améliorer l'accessibilité (aria-*).
- Testez votre application avec des outils d'accessibilité.

7.Tests :

- Effectuer des tests réguliers pour vous assurer que toutes les fonctionnalités fonctionnent correctement.
- Tester notre application avec des utilisateurs réels, en particulier ceux qui ont des troubles dyslexiques (proposer à l'école des devoirs).

8.Sécurité :

- Valider et échapper toutes les données utilisateur pour éviter les attaques XSS et autres vulnérabilités.
- S'assurer que nos requêtes SQL sont sécurisées pour éviter les injections SQL.

9.Documentation :

- Documenter notre code pour faciliter la maintenance future et la collaboration avec d'autres développeurs.

10.Déploiement :

- Choisir une plateforme d'hébergement adaptée à notre application web.
- Configurer notre serveur web pour exécuter PHP correctement et déployer notre application.

11. Communication :

- Communiquer et distribuer notre application en Open Source pour en faire profiter à un maximum de personnes gratuitement.
- Déposer les codes sur GitHub pour les partager à la communauté.

Librairies

MyScript

Texte manuscrit en texte machine Démo

Tesseract.js

Image en texte machine Démo

Phase une : l'interface maquette

Phase deux : l'ergonomie

Phase trois : l'architecture

Phase quatre: Retranscrire un texte en "Arial"

Installation et utilisation de MyScript

Tout d'abord, assurez-vous d'avoir installé les outils suivants:

  npm
  Node.js

Utilisez ensuite un projet existant ou démarrez un nouveau avec la commande ci-dessous:

  npm init

Tapez les éléments suivants dans votre dossier de développement pour installer la dépendance :

  npm install iink-js

Recopiez le contenu de index.html dans votre dossier de développement. Éditer la index.htmlet remplacer le applicationkeyet hmackeyles attributs avec les valeurs que vous avez recevées par e-mail.

Lancer un serveur web desservant le répertoire contenant les dépendances et le fichier index.html, par example:

  python -m http.server

Enfin, ouvrez http://localhost:8000 dans votre navigateur.

Guide de développement

https://developer.myscript.com/docs/interactive-ink/2.1/overview/about/