14P – Gestionnaire de tâches - Projets d'élèves

1. Introduction

1.1 Contexte
De nos jours, de plus en plus d'applications permettent à tout un chacun de simplifier sa vie. Que ce soit une application à reconnaissance sonore pour identifier une chanson, ou une application possédant des cartes géographiques afin de mieux se situer, les applications ont pris une partie importante de notre vie de tout les jours. Le fondement même d'une application est donc de rendre une tâche plus simple ou plus accessible. C'est pourquoi, dans le cadre de l'option complémentaire d'informatique, j'ai décidé d'élaborer une application web permettant de simplifier des tâches comme la gestion des absences, des moyennes de notes, ou encore des devoirs.

1.2 Problème
Au Gymnase Provence, il existe encore et toujours de nombreuses actions qui pourraient être plus accessibles ou plus simples par l'utilisation d'une application smartphone. Le seul problème avec les applications smartphone, est qu'elles demandent un langage de codage bien spécifique qui ne nous a pas été enseigné dans notre option complémentaire d'informatique. Il serait donc plus abordable de créer une application web (rendant ainsi cette application disponible aux personnes préférant les ordinateurs plutôt que les smartphones) qui serait également adaptée au support smartphone.

1.3 Idée
L'idée de cette application m'est venue quand je me suis rendu compte qu'il "manquait encore un truc" au Gymnase Provence. "Un truc" qui rendrait des tâches difficiles ou ennuyeuses d'accès, plus faciles et atteignables, comme une application. En recevant l'annonce que nous allions faire un nouveau projet de printemps, je me suis immédiatement jeté sur l'occasion pour tenter de réaliser cette application.

1.4 Existant
Il existe déjà un site web dédié au gymnase Provence, mais celui-ci ne se focalise pas sur les points que j'aimerais élaborer. Il aide globalement le gymnasien dans son parcours scolaire en fournissant des informations utiles comme le nom/l'adresse/le numéro de téléphone des professeurs, des images des événements du Gymnase, ou encore les différents prix gagnés par les anciens élèves aux promotions. Ce que je voudrais fournir, c'est une aide spécifique pour les gymnasiens du Gymnase Provence, car, en étant un moi-même, j'ai pu noter quelles difficultés un élève pourrait rencontrer dans son parcours scolaire.

1.5 Solution
Je propose donc de créer une application sous forme de site web, comportant quelques applications utiles pour tout élève du Gymnase Provence. Les applications que je tenterais de réaliser seront un calendrier à devoirs, un tableau d'absences interactif et une calculatrice à moyennes.
Ce billet servira donc à expliquer et à énumérer les différentes étapes pour réaliser ce projet sans problèmes.

2. Matériel et méthodes

2.1 Matériel
S'agissant d'un projet consistant principalement dans le codage informatique, le matériel que j'ai utilisé est très simple et peut être très facilement acquis. En voici une liste peu exhaustive:
• Un ordinateur assez récent (Windows 7 ou Mac OS X)
• Un logiciel de codage. Personnellement, j'ai utilisé Git Bash pour Windows, mais il est possible d'utiliser d'autres programmes (comme Terminal présent de base dans tout les Mac)
• Une connaissance des langages informatiques HTML,CSS et Java

2.2 Méthodes
Pour arriver à un projet final qui corresponde à mes attentes, je suis passé par plusieurs étapes qui sont les suivantes:

2.2.1. Apprentissage des différents langages
En plus des cours de notre professeur M.Iglesias, j'ai immédiatement commencé par apprendre le maximum sur les langages qui m'auraient été utiles durant ce projet. J'ai donc suivi quelques cours gratuits via le site internet Codecademy qui m'a permis d'aller plus loin dans le langage HTML et CSS ainsi que d'apprendre quelques notions basiques de Javascript. C'est donc quelques semaines après l'annonce du projet de printemps, que je me suis enfin attelé à la seconde partie du projet.

2.2.2. Mise en pratique des langages appris et entraînement
Tout d'abord, j'ai commencé par éditer mon code sur la partie libre de Codecademy, appelée "my codebits". Il s'agit d'un éditeur de code gratuit et je me suis donc mis à travailler sur cette partie pour tester mes connaissances acquises, et ensuite pour réaliser entièrement mon projet.

2.2.3. Réalisation du projet
Pour réaliser ce projet, j'ai d'abord commencé par écrire le code html basique de ma page en y ajoutant quelques subtilités que j'ai découvertes en cherchant sur le net, en utilisant la fonction "afficher le code source de la page" en faisant des clics droits sur des pages web et en demandant conseil à mes camarades de classe. Ces petites subtilités consistent, par exemple, en l'intégration d'une image sur l'onglet de la page web en rajoutant le tag: <link rel="shortcut icon" href="http://www.gymnaseprovence.ch/favicon.ico" />
J'ai également utilisé le tag assez connu: <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> afin de transformer les caractères qui apparaissent bizarrement sur la page, en caractères normaux.
Ensuite, j'ai rendu cette page plus agréable à l'oeil en utilisant le langage CSS.
En ce qui concerne les applications mises en place dans la page web, j'ai pu en inclure trois:

1. Tableau des absences;

Dans cette application, le but était de proposer un tableau qui permettrait d'annoncer les absences durant la semaine. Pour cela, j'ai construit un tableau classique avec les tags <table> suivi par les tags <th>et <td> (tout deux inclus dans des tags <tr>). Pour y inclure les listes à déroulement (dropdown menues en anglais) qui proposent la liste des différents cours proposés au Gymnase Provence, j'ai utilisé une technique (que j'ai trouvé sur ce site) qui est la suivante:

   <form>
   <SELECT name="nom" size="1">       // le "name" définit le nom et le "size" définit la taille de la liste
   <OPTION>/ (pas absent)       // ce tag définit les différentes options que la liste comprendra
   <OPTION>Allemand/Italien
   <OPTION>etc...
   </SELECT>
   </form>

2. Calculatrice à moyenne

Pour cette application je me suis inspiré de cette formule afin de créer une calculatrice assez simple. En effet, pour créer les différents boutons de la calculatrice il suffisait d'inclure le tout dans un tag <form name="calculatrice"> et d'y inclure les différentes fonctionalités de cette calculatrice dans les tags suivants: <input type=" button pour les boutons, ou textfield pour le champ des valeurs" value="le nom de la valeur désirée, comme +,4,5 ou/" onClick="document.calculatrice.ans.value+='la valeur insérée dans value' ">
Pour mettre les différents boutons dans une forme quasi-carrée, il suffisait d'inclure les tags <br> pour mettre à la ligne ces différents éléments.
Le code du bouton "1", par exemple, se présentait comme suit:

 <input type="button" value="1" onClick="document.calculatrice.ans.value+='1'">

Pour le code du "=" le code se modifiait légèrement. Il se présente comme cela:

<input type="button" value="=" onClick="document.calculatrice.ans.value=eval(document.calculatrice.ans.value)">

Même chose pour le bouton "Effacer", qui avait, encore une fois, un code légèrement différent:

 <input type="reset" value="Effacer">

Et finalement, pour inclure un espace ou ces calculs se formeraient il fallait ajouter un champs de texte (textfield) en écrivant le code suivant:

<input type="textfield" name="ans" value="">

3. Décompte

Pour ce décompte, je me suis inspiré de cette vidéo. Celui-ci utilise du langage javascript, mais ce n'est, finalement, pas très compliqué à comprendre.
Tout d'abord, il faut mettre cet élément dans le <head></head> du fichier html:

   <script type="text/javascript">       // pour initialiser le script
   function cdtd() {          // définit la fonction par cdtd()
   var end = new Date("July 4, 2014 12:00:00");       // inclut une variable qui définit la date de fin (ici le 4 juillet 2014 à midi)
   var now = new Date();       // inclut une variable qui définit le moment présent
   var timeDiff = end.getTime() - now.getTime();       // inclut une variable qui définit qu'il faut faire une soustraction entre les deux variables précédentes
   var seconds = Math.floor(timeDiff / 1000);       // inclut une variable qui divisera les nombres obtenus par la variable timeDiff par 1000, pour obtenir le nombre de secondes qu'il reste en général
   var minutes = Math.floor(seconds / 60);       // inclut une variable qui fera la même chose mais pour les minutes
   var hours = Math.floor(minutes / 60);       // inclut une variable qui fera la même chose mais pour les heures
   var days = Math.floor(hours / 24);       // inclut une variable qui fera la même chose mais pour les jours
   hours %= 24;       // inclut une équation qui divisera les nombres obtenus par 24 (et ainsi les transformer en heures, des chiffres 0 à 24)
   minutes %= 60;       //  fera la même chose mais pour les minutes
   seconds %= 60;       // fera la même chose mais pour les secondes
   document.getElementById("daysBox").innerHTML = days;       // définit que les jours s'afficheront dans "daysBox"
   document.getElementById("hoursBox").innerHTML = hours;       // définit que les heures s'afficheront dans "hoursBox"
   document.getElementById("minsBox").innerHTML = minutes;       // définit que les minutes s'afficheront dans "minsBox"
   document.getElementById("secsBox").innerHTML = seconds;       // définit que les secondes s'afficheront dans "secsBox"
   var timer = setTimeout('cdtd()',1000);       // fera répéter la fonction ('cdtd()'), cela créera donc un "loop" (une boucle) qui se répétera jusqu'à la fin du timer
   }
   </script>

Ensuite il suffit d'insérer ce code dans les balise <body></body> du fichier html:

   Il reste     
   <div id="daysBox" class="Box"></div>       // définit la case des jours
      Jours,
   <div id="hoursBox" class="Box"></div>       // définit la case des heures
   Heures,
   <div id="minsBox" class="Box"></div>       // définit la case des minutes
   Minutes et
   <div id="secsBox" class="Box"></div>       // définit la case des secondes
   Secondes.
   <script type="text/javascript">cdtd();</script>       // indique qu'il faut se référer à la fonction cdtd() inclue dans le script (se trouvant dans <head>)
   </div>

Et voilà ! Le compteur devrait maintenant être fonctionnel ! Il suffit juste de rendre le tout un peu plus agréable visiblement en ajoutant ce script dans le fichier css et en y rajoutant des caractéristiques css (comme la bordure, la couleur de cette bordure, etc...).

2.2.4. Mise en ligne du projet
Après avoir réussi à coder le tout (en vérifiant sur l'éditeur de code précédemment mentionné), il a fallu mettre en ligne la page web. Pour ce faire, j'ai utilisé la plateforme dev.gyp.ch, qui nous avait été mis à disposition par notre maître de classe. La démarche était donc la suivante (à insérer dans le Terminal de Mac, ou Git Bash pour windows):

   ssh prénom.nom@oci.gyp.ch       // se connecte au serveur ssh (après avoir inséré le mot de passe)
   cd /var/www/ch.gyp.dev/prénom.nom       // demande de se positionner dans le dossier de l'utilisateur
   nano index.html/main.css/index.php/etc       // initie la modification du fichier choisi avec "nano"

J'ai ensuite collé mon code dans l'éditeur, et constaté le résultat en cherchant la page dans mon navigateur (Google Chrome).

3. Résultat

Après des semaines de travail, le site web se présente exactement comme je me l'étais imaginé au niveau visuel. Le site se trouve à cette adresse: http://dev.gyp.ch/1314/jonathan.fra...
Voici une capture d'écran du site sur ordinateur:

Et une autre sur mobile:

Les deux supports fonctionnent parfaitement et les marges sont quasi-parfaites (sauf si le navigateur a un zoom trop conséquent). En ce qui concerne les applications, elles fonctionnent toutes sans accrocs ou difficultés majeures (le calendrier est fonctionnel et bien positionné, la calculatrice fonctionne parfaitement, ainsi que le décompte).
Un exemple de calcul avec la calculatrice :

Par contre, il réside également des aspects qui ne fonctionnent pas ou qui demanderaient de plus amples connaissances afin d'être réalisées, comme, par exemple, le tableau des absences ou encore le calendrier des devoirs qui n'a, finalement, pas pu être réalisé.

4. Discussion

Parlons à présent, de ce qui ne va pas dans mon projet et de comment ceci pourrait être amélioré.

En ce qui concerne l'application qui n'a jamais vu le jour, c'est-à-dire le calendrier à devoirs, je ne l'ai pas inclus dans le site (j'ai quand même laissé une partie dans le code source au cas où je trouverais une solution à mon problème) car toutes mes tentatives ont échoué. J'ai d'abord recherché sur internet les différents calendriers proposés et déjà inventés, mais ceux-ci n'offraient pas les qualités requises (ils ne proposaient jamais une interactivité du visiteur, c'est-à-dire qu'ils ne proposaient qu'un calendrier montrant les différentes dates sans jamais inclure une possibilité pour le visiteur d'y insérer ses propres tâches ou devoirs) comme celui-ci, ou demandaient des téléchargements qui n'aboutissaient à rien (comme celui-là). D'autres encore, utilisaient du langage php ou jQuery, et je n'arrivais tout simplement pas à en comprendre les aspects et différentes techniques, n'ayant pas appris ces langages. Mon but n'étant pas d'insérer des éléments dont je ne comprenais pas la création, j'ai décidé d'écarter cette solution. La dernière solution que j'ai envisagé était d'insérer un Google Agenda dans mon site (comme le prônent de nombreuses pages) mais ceci aurait demandé au visiteur d'en créer les différents événements (ici des devoirs), ou d'avoir un agenda déjà prêt (mais pas tout le monde ne possède un Google Agenda). De plus, cet agenda aurait été lié à mon compte Google et ce n'était vraiment pas l'objectif de cette application...

Un autre partie de mon site qui n'a pas vraiment abouti comme je l'escomptait est le tableau des absences. En effet, ce dernier possède plusieurs failles qui pourraient être fixées en y consacrant plus de temps. Tout d'abord, le code html de ce tableau pourrait être largement réduit (il occupe plus de 1000 lignes de codes), en utilisant une technique de répétition. Par exemple on pourrait lui dire de répéter tout les 5 tags <tr></tr> de chaque ligne. mais le problème réside dans la sixième colonne de ce tableau qui est différente des cinq autres, empêchant ainsi les techniques que j'ai utilisé (CSS, PHP) de fonctionner correctement. Un autre problème secondaire de mon tableau, est que j'aimerais lui demander de produire, après que l'élève ait terminé d'y insérer ses absences, un lien menant à une possibilité d'envoyer des mails ou d'autres messages annonçant son absence. Cela aurait demandé une connaissance plus approfondie du php, et aurait surtout demandé de différencier chaque encadrement du tableau ainsi que chaque valeur choisie dans les listes déroulantes dans chaque cellule, pour ensuite récolter ces informations et envoyer le message de signalement d'absence. Ceci aurait demandé un temps fou à programmer et mon but n'était pas vraiment de me focaliser sur une application en particulier, mais d'en fournir quelques unes et de les rendre les plus fonctionnelles possibles. Une méthode qui pourrait être utilisée serait celle d'inclure des tableaux php

La troisième section de ce projet consistait dans le calcul des moyennes. La calculatrice mise à disposition fonctionne parfaitement et j'aurais apprécié de pouvoir développer, en plus de cette calculatrice, un tableau interactif où le visiteur insérerait ces notes et ensuite, un code se chargerait de calculer les moyennes à la place du visiteur. C'est le seul moyen avec lequel j'aurais pu améliorer cette partie.

Pour la dernière partie, le décompte, il s'agissait tout simplement de l'intégration d'un élément plus ludique dans le site, et donc pas du tout d'une application fondamentale au site. J'ai juste voulu mettre une idée en oeuvre pour tester mes capacités et ait donc codé ce petit décompte (grâce à l'aide de la vidéo précédemment citée).

En général, mon site web se présente plutôt bien, sur ordinateur ainsi que sur mobile. Il demanderait peut-être une adaptation des marges et de la taille des éléments plus approfondie et ajustée à chaque appareil (en utilisant des propriétés spécifiques au développement mobile par exemple) mais le résultat final, me plaît assez.

5. Conclusion

Pour conclure, je dirais que mon site est un site agréable visuellement, mais qui ne sert finalement pas à grand chose. Ceci est principalement dû au fait que les applications que j'aurais aimé réaliser, demandaient une connaissance des différents langages informatique beaucoup plus poussée et précise. Mais l'idée persiste de créer un site utile à tout gymnasien (en y incluant peut-être d'autres gymnases ou écoles) et ce projet m'a donné envie d'en réaliser plus, dans l'objectif de simplifier la vie des gens. Dans cet objectif et après plus de connaissances acquises, on pourrait envisager, en y incluant les quelques applications que j'ai tenté de réaliser, de créer une véritable application smartphone (iOs et Android) et de la mettre en ligne, chose qui pourrait vraiment aider les élèves et les professeurs.

Références:

http://www.gymnaseprovence.ch/fr/ac...
http://git-scm.com/downloads
http://www.codecademy.com/
http://www.lehtml.com/htmlplus/fmli...
http://www.wikihow.com/Create-a-Cal...
https://www.youtube.com/watch?v=VxB...
http://dev.gyp.ch/1314/jonathan.fra...
http://www.htmlgoodies.com/tutorial...
http://xavier.lequere.net/xlagenda/
http://www.nanane.fr/2010/01/php-js...
https://www.google.ch/search?q=ins%...
http://www.php.net/manual/fr/langua...

Projets d'élèves

À retenir

Recherche

Volées