Projets d'élèves

1. Introduction

1.1 Contexte : En tant qu’être humain, nous avons tous beaucoup de choses à faire. Nous avons des journées remplies de rendez-vous, de tâches à accomplir, des gens à voir etc. Et, malheureusement, nous ne pouvons pas toujours nous souvenir de toutes nos activités.
1.2 Problème : Comme nous aimons toujours les solutions simples mais efficaces, le pense-bête est l'outil le plus adapté pour une personne qui aurait un programme journalier chargé. Beaucoup de gens utilisent un petit bout de papier et un stylo ou un crayon. Mais que faire quand le papier ce déchire ? Ou si nous le perdons ? Et si le crayon se casse ou le stylo n’a plus d’encre ? En plus, ce n’est pas pratique de toujours trimbaler une multitude d’objets dans ses poches.
1.3 Idée : Aujourd’hui, avec la popularité des Smartphones, un site web qui vous permet de créer votre propre liste d’activité à accomplir pendant un mois serait beaucoup plus pratique. Ceci enlèverait la nécessité de porter sur soit un papier, un stylo, et de devoir essayer de relire ses propres gribouillis.
1.4 Existant : Bien sure, de nombreuses applications existent déjà sur Smartphone et IPhone, mais dans ces applications, tout le calendrier de l’année s’affiche et il faut parcourir des pages et des pages pour arriver à un événement que nous avons marqué pour dans plusieurs semaines. Et à cause de ça, on peut parfois loupé quelque chose d’important que nous avons noté.
1.5 Solution : Ma solution à ça problème est d’afficher que les dates que l’utilisateur à noter, de sorte à ce qu’il voit devant lui que les dates importantes, et non toute l’année.
Sur le site, l’utilisateur pourra créer sa propre liste unique de tâches à accomplir. Il pourra préciser : la date (jour-mois), l’heure, le lieu, et pourra donner un nom à la tâche. Tout ces choix sont optionnels à pars la date et le nom.

2. Matériel et méthodes

2.1 Matériel : Comme matériel, j'ai surtout utilisé des programmes informatique comme nano, codecademy, des sites avec des tutoriels HTML, CSS et PHP.
2.2 Méthode : J’ai tout d’abord essayer d’imaginer à quoi ressemblerait mon site et j’en ai conclu qu’il faudrait que j’ai plusieurs pages. La page d’accueille, la page de création, et la page avec le pense-bête fini.
Sur la page d'accueille, je ne voulais rien d'autre que le texte de bienvenue qui explique l'utilité de la page. J'ai aussi créer un bouton “cliquez ici“ qui mène à la deuxième page, celle de la création du pense-bête. Pour que quand l'utilisateur met son curseur sur le bouton, celui-ci change de couleur, j'ai utilisé ce code dans index.html :
<p> <!- texte -> <a href="second.html"><em>cliquez ici</em></a></p>
Et ce code dans main.css :

a:hover {
   color: #00FF00;
   text-decoration: none;
}

a {
  color: #D0D0D0;
  text-decoration: none;
}

Screen-shot du bouton "cliquez ici"

Screen-shot du bouton avec changement de couleur

Après avoir cliqué sur “cliquez ici“, on se retrouve sur la deuxième page du site : la page de création.
Screen-shot de la table de création

Sur la page création, l’utilisateur peut créer son pense-bête personnel en utilisant la table qui est à sa disposition. Avec les menu drop down (à côté de : Heure ; Jour ; Mois), il peut choisir l’heure, le jour et le mois de son entrée. Il peut aussi utiliser les text field (à côté de : Nom ; Lieu) pour préciser le lieu et nommer son entrée
Pour les menus drop down, j'ai utilisé le code suivant dans second.html :

      <a><form action=""><font size="8px">Heure</font></a></td>
      <td><select name="hourdropdown">
           <option value="01">01</option>
           <option value="02">02</option>
           <...>
           <option value="59">59</option>
           <option value="00">00</option>
      </td>

(j'ai pris l'exemple des heures, mais c'est le même principe pour les jours et les mois)
Pour les text field j'ai utilisé ce code :

      <a><form action=""><font size="8px">Nommez votre entrée</font></a></td>
      <td><input type="text" name="nom">
      </form>
      </td>

Quand l’utilisateur à fini son pense-bête, il clique sur le bouton valider qui enregistre ses entrées.

Pour ajouter une touche de professionnalisme, j'ai ajouter un favicon à mon site. Pour le faire, j'ai utilisé ce code dans mes pages html :
<link rel="shortcut icon" href="http://www.clker.com/cliparts/8/5/8/c/12262021582017770699Sephr_Notepad_with_Text_and_Pencil_1.svg.hi.png">

3. Résultats

Il y a du positif et du négatif dans mes résultats. J'ai réussis à créer un site cohérent et esthétiquement plaisant et il n'y a pas de bug dans mon code. Par contre je n'ai pas réussis à faire que, quand nous faisons une entrée sur la page création du site, on retrouve notre pense-bête fini.
Ma première page marche parfaitement, le texte est comme je le veux, le bouton ‘’“cliqué ici“’’ marche. Ma deuxième page est, esthétiquement, correcte. Les menu drop down et les text field marchent aussi et le tableau est juste. Par contre, le bouton valider ne marche pas.

4. Discussion

Mon erreur principale, celle avec le bouton "valider" qui ne marche pas, est du au fait que je ne me souvenais plus qu'il fallait utiliser mysql et php pour sauver une entrée. Par contre, je suis content que le reste de mon code marche à merveille.
Une des difficultées rencontrées était le mélange des langages. Il fallait que je m'assure que, entre mon code HTML et mon code CSS, ça soit cohérent, surtout après un changement dans un des deux codes. Il y avait aussi un soucis d'esthétique, il fallait rendre le site joli (couleur, police, taille, tableau centré etc).
Pendant ce projet, j'ai appris à mieux coder en HTML et en CSS, j'ai découvert le dessous des sites web et réalisé qu'avec peu de chose, nous pouvons déjà faire beaucoup. Mais aussi qu'il y a une infinité de chose à faire et on peut facilement se perdre dans des codes qui, pour finir, ne nous sont pas utile pour notre projet.

5. Conclusion

Je suis partis dans ce projet avec l’espoir de créer un site qui ferait office de pense bête. Je suis assez content des résultats, vu que je suis arrivé avec peu d’expérience en HTML et CSS et j’ai réussis à faire des choses intéressantes.
Les petites choses, tel que le favicon ou le bouton cliquez ici qui change de couleur lorsqu’on pointe le curseur dessus, étaient, en fin de compte, le genre de détails qui rendent bien sans être trop flashy, et qui sont le fruit d’un soucis du détail. Il est juste dommage que le pense-bête n’enregistre pas les entrées.
En ce qui concerne ce que je pourrai améliorer dans mon projet si je décide de le continuer après le gymnase, je pourrai ajouter l’option d’une alarme qui pourrait être réglée avant la tâche. Et aussi une notification qui, si l’utilisateur n’a pas coché son activité 10 minutes après l’heure précisée, l'alerterait. Je voudrai aussi pouvoir donner l'option à l'utilisateur d'entrée quelque chose qui va revenir chaque semaine le même jour et de ne pas devoir le refaire chaque fois.
Le lieu pourrait aussi nous donner un lien pour Google maps si c’est un lieu spécifique (par exemple "Av. de Provence 26-28", mais pas "chez David"). J'améliorerais aussi la qualité esthétique du site en générale, pour sa il faut de plus ample connaissance en CSS.

6.Référence

Site avec tutoriel pour drop down menu

Site avec tutoriel pour text field

L'image du body background

Favicon

Codecademy