Phyto-info
Je réalise un site Internet pour notre petite asso. Et j'en suis assez content pour vous en parler ici.
Un petit article rapide, sans trop de blabla (je vais essayer), pour présenter mon engagement dans notre petite association familiale.
Pour commencer, voici un message de mon ami Geoffroy qui en dit long je trouve (il parait que c’est pas mal d’introduire le sujet avec une citation) :
On est en 2023. On a internet pour Netflix, mater des gens sur Instagram, rechercher une notoriété virtuelle en participant à des challenges à la con, on est dans le monde de la cyberjunk. Et toi, tu viens avec ton idées que le web c’est pour la transmission de savoir, le partage de connaissances sourcées. Le web pour promouvoir les savoirs plutôt que les gens. T’as 15 ans de retard.
Geoffroy - Message sur Signal. Probablement sarcastique.
Pourquoi cet article
J’ai travaillé cette année sur un site dont je suis assez fier. Je voulais donc m’en venter tout en en faisant la publicité.
L’association
Phyto-info, c’est une asso qui promeut la connaissance des plantes. Phyto-info.com, permet notamment de trouver les plantes recommandées par les spécialistes pour un symptôme donné.
Ma maman, Sylvie, PhD entre autres choses, et que j’estime être une experte des plantes, nous a proposé, à mes sœurs et moi, de créer avec elle une association pour promouvoir l’utilisation des plantes. Du coup, me voilà trésorier et membre fondateur de l’association Phyto-info. Et surtout responsable de la partie technique de l’association avec pour mission de réaliser le site Internet et l’outil de recherche.
Et si on faisait un site bien ?
J’ai passé 20 ans de ma vie à faire des sites qui servent à vendre des trucs. Qui doivent être faits rapidement, pour répondre au besoin d’un commerçant plutôt qu’au besoin de ses utilisateurs·trices. Alors, pour une fois que j’ai carte blanche et que l’objectif du site est purement informatif (sans essayer de forcer des gens à s’enfoncer dans un tunnel d’achat avec des dark patterns à tout va), j’avais envie de faire en sorte de fournir ces infos de façon moderne, éthique, confortable à nos membres et au public.
Aussi, parce que c’est comme ça que beaucoup de choses devraient être : le site est Open Source.
En savoir le moins possible sur l’utilisateur·trice
Ma première préoccupation, et même la première de celle de l’asso, était d’en savoir le moins possible sur l’utilisateur·trice. Nos utilisateurs·trices recherchent sur le site en indiquant leur symptôme. C’est une information hautement confidentielle. Alors j’avais en tête d’avoir un angle qui tend le plus possible vers le zero-knowledge.
Moteur de recherche zero-knowledge
Ma crainte, c’était de faire un moteur de recherche classique : l’utilisateur·trice envoie sa recherche au serveur, le serveur traite la recherche et lui renvoie les réponses. En faisant ça, le serveur (et donc tous ceux qui ont accès au serveur), peuvent savoir qui a cherché quoi. D’autant qu’une partie des infos est réservée à nos membres. On peut donc savoir qui, nommément, à cherché quoi (!) Et c’était hors de question.
Alors j’ai opté pour une solution plus laborieuse, mais bien plus privacy-friendly.
Le principe, c’est que, pour ce qui concerne les symptômes, l’utilisateur·trice doit télécharger l’ensemble des résultats avant de pouvoir faire une recherche. Du coup, quand il cherche, il utilise les données qui sont sur son ordinateur, en local. Le serveur n’est pas du tout sollicité. Aucune requête n’est faite sur le serveur lors de la recherche.
quelqu’un pourrait deviner le symptôme saisi en fonction des images plantes téléchargées et affichées dans les résultats.
Pour éviter ça, même les vignettes des plantes sont préchargées.
Par quelqu’un, j’entends Phyto-info, mais aussi un potentiel hacker/voleur qui viendrait nous voler notre serveur. Pour nous, il est primordial qu’on ne puisse pas associer une identité à un symptôme. Ni même une IP à un symptôme. Le symptôme recherché reste et restera pour toujours uniquement côté utilisateur·trice.
Si Javascript n’est pas activé, la navigation dans l’outil de recherche se fait parmi des grandes pages qui contiennent tous les résultats avec un système d’ancres pour obtenir un résultat en particulier. Ce qui fait que le serveur ne sait rien.
Statistiques et services tiers minimaux
Nous n’avons pas de module de statistiques côté navigateur (Google Analytics ou autre), pas de cookie, pas de service tiers en dehors de l’envoi des mails et du paiement en ligne pour l’adhésion. Même notre serveur est géré et hébergé par nos soins. Nous avons vraiment fait notre maximum pour protéger l’utilisateur·trice et sa vie privée.
Le site fonctionne intégralement sans cookie obligatoire. On peut donc s’authentifier et rechercher sans avoir besoin d’un seul cookie.
Authentification sans mot de passe
Pour l’authentification de nos abonnés, nous avons opté pour une authentification par email uniquement. Le site envoie un mail à l’utilisateur·trice contenant un code valable quelques minutes. Nous ne stockons donc pas de mot de passe. Nous ne risquons donc pas de nous faire voler notre base de données de mots de passe. Les seuls infos que nous stockons sur nos utilisateurs sont l’adresse email (pour l’authentification), le nom et le prénom (pour l’adhésion).
Accessible
Ma seconde préoccupation, était l’accessibilité. Je voulais un site et un outil de recherche qui fonctionne quelque soit le navigateur, le handicap, la qualité de connexion, l’appareil utilisé, etc.
Utilisable en mode textuel
Le site peut être utilisé même avec les navigateurs les plus rudimentaires. L’authentification et la recherche fonctionnent.
ARIA et HTML5
Le site utilise les tags ARIA pour aider les personnes avec des handicaps à lire et utiliser le site. J’ai essayé de faire ça le plus proprement possible. Nos photos et éléments d’UI sont labellisés avec soin.
Le site utilise des tags HTML5 pour de vrai. Pas juste des DIV à tout va. Le site est ainsi plus facilement compris par les différents types de navigateurs.
Léger
Le site est aussi léger que possible. Au moment où j’écris ces lignes. La page d’accueil pèse 0.3Mb pour s’afficher. 0.5Mb si on scrolle jusqu’en bas. A titre de comparaison, la page d’accueil du Bon Coin pèse 13Mb. (Le net est vraiment en train de devenir n’importe quoi !).
Compatible
Le site est compatible avec Firefox en premier lieu, et sur Chromium en second lieu (et non l’inverse).
Validé W3C
Toujours pour plus de compatibilité et d’accessibilité, le site est validé W3C. C’est assez rare pour le souligner.
Javascript
On peut accéder au site et aux données même sans avoir activé javascript. Ce qui rend le site utilisable dans de nombreux contextes.
Le peu de CSS présent sur le site est là uniquement pour le confort de l’utilisateur·trice. Jamais indispensable.
En ce qui concerne l’outil de recherche, sans serveur et sans Javascript, il n’est pas réalisable. Alors j’ai opté pour une solution dégradée où l’utilisateur·trice peut utiliser l’outil de recherche du navigateur pour trouver le résultat dans une grande liste.
CSS
Je charge uniquement les styles css nécessaire à la page actuelle. En désactivant les animations si le navigateur le demande.
J’ai pris beaucoup de temps pour mettre en place un responsive design complet.
Thème sombre
Le thème sombre s’active automatiquement en fonction du thème système de l’utilisateur·trice.
Une version basse connexion
Le site propose une recherche sans les images pour un téléchargement encore plus léger.
Optimisation de l’utilisation au clavier
J’ai fais attention que le site reste utilisable au clavier de façon agréable.
Conclusion
Je ne dis pas que le site est parfait. Il y a toujours à faire évidemment (la todo est encore longue). Mais j’ai déjà mis beaucoup d’énergie pour faire quelque chose qui me semble bien. Je suis assez content de moi, alors je voulais partager ça avec vous.
J’espère que vous irez faire un tour sur Phyto-info et que vous envisagerez de devenir adhérent.
Merci !
Commentaires
Vous souhaitez déposer un commentaire ?