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
Tesseract.js
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.