Projet perso & ergonomie web.

Woutch, je n’avais pas publié sur le dev. web depuis un max de temps, enfin, sur des projets perso liés un peu à cela. Pourquoi ? Car INTSTRAT m’a demandé pas mal de temps, ensuite car je fais plein de petits projets par-ci par-là et enfin, car ce n’est pas mon kiff de les faire mais plus de les penser. D’ailleurs voilà un projet que je voulais vous présenter. Il ne mange pas de pain, étant plutôt simple.

Ce projet est tout simplement un moteur de recherche en jurisprudences réalisé pour une organisation dont je tairai le nom (car je ne suis pas directement affilié à elle, ce projet étant en mode « one shot » et bénévole pendant mon temps libre). Le but, faire une application de consultation de fiches, avec la possibilité d’éditer, de créer, de « tagger » des fiches et d’y ajouter des documents + export en PDF, toussa toussa. Au menu, tout se passe sur un seul écran divisé en largeur. D’un côté le moteur de recherche, de l’autre, la fiche détaillée lorsqu’on clique sur le résultat correspondant.

Voici la chose en images avec des explications sur le pourquoi du comment… Donc au départ, sur une feuille pensée en juillet, cela ressemblait à ça. Le concept du zoning y était, avec une barre de recherche en haut dans le bloc de gauche, puis, les résultats et les tags liés aux résultats dans une colonne différentes.

Après plusieurs heures (jours…) de taf, voici ce que cela donne. Donc tout d’abord, la page principale, sans résultats, où l’on voit déjà bien le zoning – excusez Facebook pour la médiocrité de la compression…

Une fois un terme inscrit dans la barre de recherche, les résultats de la requête et leurs tags apparaissent à l’aide d’Ajax et de FULL TEXT. Ces résultats changent donc à chaque touche tapée dans la barre de recherche (un peu comme ce que fait Google en ce moment).

La recherche (même si elle peut être précisée dans le input text) peut être précisée également à l’aide des tags. Il est possible par l’intermédiaire des Checkboxs, de filtrer les résultats par tags. Nous pouvons aussi rechercher uniquement les résultats avec des certains tags avec l’opérateur « tag: » dans le champ de recherche. D’ailleurs, en cliquant sur les tags disposés sous chaque entrée, cette opération se fait automatiquement.

Enfin, il est possible d’éditer les fiches, là aussi en deux clics de souris, pour les boutons et tout ce qui est graphique/css très chiant sur l’UI d’édition (WYSIWYG), la libraire bootstrap à été utilisée. Pour le reste, j’ai plus de screenshots… donc ce sera le dernier ;)

Enfin, ça c’est pour la version actuelle, non présente en production. J’ai encore beaucoup de retouches à faire mais concernant l’ergonomie, je pense qu’on ne peut pas faire plus simple en UI… Enfin, je ne sais pas. Si vous avez vos propres idées et commentaires, il y a les emails – et les commentaires ;)

Pour aller plus loin

One Response to “Projet perso & ergonomie web.”

  1. […] y a déjà un an, j’écrivais un article sur un projet réalisé bénévolement pour une association. Ce projet était une application de gestion et de centralisation de fiches de jurisprudence. Au […]

Leave a Comment