Presentation Atelier ANNE

Atelier ANNE est un environnement d'apprentissage pratique pour HTML, CSS et JavaScript sur mobile et sur PC.

L'objectif du logiciel est de permettre a un debutant de:

• creer ses premiers projets web,
• ecrire du code de facon organisee,
• visualiser le resultat rapidement,
• comprendre progressivement la structure d'un projet,
• pratiquer avec un outil simple a prendre en main.

Version PC

La version PC est orientee productivite.
Elle propose:

• un explorateur de fichiers,
• un editeur de code avec coloration et autocompletion,
• plusieurs onglets,
• un terminal integre,
• un apercu local du rendu web,
• des fonctions Git de base,
• une personnalisation des couleurs et du theme.

Version mobile

La version mobile est orientee apprentissage et pratique rapide.
Elle propose:

• un systeme de connexion locale offline,
• des projets HTML/CSS/JS enregistrés dans le telephone,
• un editeur mobile separe par langage,
• un rendu dans l'application,
• un espace quiz,
• un profil utilisateur avec photo,
• un partage simple du projet.

Public vise

• eleves
• etudiants
• debutants en programmation web
• centres de repetition et formation

Signature

CREE PAR MR YANKAM NGUEGUIM JOEL STEPHANE
Groupe Genius Repetition
WhatsApp : +237 652027193

Guide d'utilisation Mobile - Atelier ANNE Mobile

Installation Android

1. Ouvrir mobile/Atelier ANNE Mobile 1.0.0.apk
2. Autoriser l'installation depuis cette source si Android le demande
3. Installer l'application
4. Ouvrir Atelier ANNE

Premiere connexion

1. Creer un compte local dans l'application
2. Ajouter votre nom et vos informations
3. Ajouter une photo de profil si vous le souhaitez
4. En cas d'oubli du mot de passe, utiliser l'option de recuperation integree

Utilisation generale

L'application fonctionne offline.
Les donnees sont stockees localement sur le telephone.

Travailler sur un projet

1. Aller dans l'espace Projects
2. Creer un projet
3. Ouvrir l'editeur
4. Ecrire le HTML dans l'onglet HTML
5. Ecrire le CSS dans l'onglet CSS
6. Ecrire le JavaScript dans l'onglet JS
7. Appuyer sur le bouton de rendu pour visualiser le resultat
8. Sauvegarder le projet

Fonctions principales

• connexion locale offline
• plusieurs projets
• editeur HTML, CSS, JS
• sauvegarde locale
• rendu integre
• partage du projet
• photo de profil
• quiz HTML, CSS, JS

Espace apprentissage

1. Aller dans l'espace Learn
2. Lire les mini-cours proposes
3. Lancer un quiz HTML, CSS ou JavaScript
4. Repondre aux 5 questions
5. Consulter le score obtenu

Partage

• partager le projet via les applications disponibles sur le telephone
• partager le score du quiz si besoin

Bonnes pratiques

• separer le HTML, le CSS et le JS
• sauvegarder souvent
• tester le rendu apres chaque modification importante
• commencer par des petits projets simples

Support

CREE PAR MR YANKAM NGUEGUIM JOEL STEPHANE
WhatsApp : +237 652027193

Guide d'utilisation PC - Atelier ANNE Desktop

Installation

Option 1 : version installable

1. Ouvrir pc/Atelier ANNE Desktop Setup 0.2.0.exe
2. Suivre les etapes d'installation
3. Lancer Atelier ANNE Desktop depuis le menu Demarrer ou le bureau

Option 2 : version portable

1. Ouvrir pc/Atelier ANNE Desktop Portable 0.2.0.exe
2. Le logiciel demarre sans installation

Premiere prise en main

1. Cliquer sur Open Folder
2. Choisir un dossier de travail
3. Ouvrir ou creer vos fichiers HTML, CSS et JS
4. Modifier le code dans l'editeur central
5. Sauvegarder
6. Cliquer sur Live puis Preview pour voir le rendu

Fonctions principales

• Explorateur de fichiers
• Onglets multiples
• Sauvegarde du code
• Terminal integre
• Bash, CMD ou PowerShell
• Apercu local du site
• Branche Git, commit, pull, push
• Changement de theme et de couleur

Flux de travail conseille

1. Ouvrir un projet
2. Creer ou ouvrir index.html
3. Ouvrir style.css
4. Ouvrir app.js
5. Lancer le preview
6. Tester et corriger le rendu
7. Utiliser Git pour sauvegarder les etapes importantes

Utiliser Git

1. Ouvrir un dossier deja initialise en Git ou cloner un repo
2. Verifier les fichiers modifies dans Source Control
3. Cliquer sur Add All
4. Ecrire un message dans le champ Commit message
5. Cliquer sur Commit
6. Utiliser Pull ou Push si besoin

Utiliser le terminal

1. Choisir le shell: Bash, CMD ou PowerShell
2. Ouvrir un nouvel onglet terminal si besoin
3. Executer des commandes comme:

• dir
• ls
• git status
• npm install

Personnalisation

• Changer le theme
• Changer la couleur d'accent
• Modifier la taille du texte

Support

CREE PAR MR YANKAM NGUEGUIM JOEL STEPHANE
WhatsApp : +237 652027193
GeniusClassrooms.com
pandacodeur.com