====== 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 ====

[[https://github.com/MyScript/MyScriptJS|Texte manuscrit en texte machine]]
[[https://webdemo.myscript.com/|Démo]]

==== Tesseract.js ====

[[https://github.com/naptha/tesseract.js#tesseractjs|Image en texte machine]]
[[https://tesseract.projectnaptha.com/|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/]]