Wiki de Port'ouverte

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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/]]