Étude de cas, projet personnel

Kartenn

Des bonnes adresses briochines, à emporter dans la poche.

On choisit une envie, on obtient une liste d’adresses, et un clic pose le lieu sur une carte avec la distance depuis l’endroit où l’on se trouve. Le tout hébergé gratuitement, sans serveur, et alimenté par quelqu’un qui ne touche pas au code.

Ouvrir le site Voir le code

En clair

Un petit site pour trouver une bonne adresse à Saint-Brieuc selon l’envie du moment, avec une carte et la distance depuis l’endroit où l’on se trouve. Il ne coûte rien à faire tourner, et les adresses s’ajoutent depuis un formulaire, sans passer par le code.

Ce qui suit est plus technique.

Le point de départ

Recommander des adresses à quelqu’un finit toujours pareil : une liste de liens perdue au fond d’une conversation, qu’on ne retrouve évidemment plus le jour où on est dans la rue à se demander où aller.

Kartenn part de là. On ne cherche pas par nom, on choisit une envie : manger, se balader, faire les boutiques, s’occuper. La liste s’affiche, et la carte prend le relais une fois sur place. Le classement suit l’humeur du moment plutôt qu’une nomenclature.

Ce que j’ai construit

Autonomie

Ajouter une adresse sans ouvrir d’éditeur de code

Les lieux ne sont pas écrits dans la page. Ils vivent dans un fichier à part, modifiable depuis un formulaire en ligne : on saisit un nom, une description et des coordonnées, on enregistre, et le site est à jour quelques secondes plus tard.

Ce qui prouve que la chaîne fonctionne, c’est que la grande majorité des modifications du projet sont des ajouts de contenu passés par ce formulaire, et non par moi. Même objectif que sur mes projets clients, à une autre échelle.

Économie

Ni serveur, ni facture, ni maintenance

Le site est publié directement depuis son dépôt de code, la carte s’appuie sur les fonds libres d’OpenStreetMap, et il n’y a ni base de données ni machine à surveiller. Rien à renouveler, rien à payer, et rien qui tombe en panne au milieu des vacances.

Arbitrage

Pour un site avec une administration, le réflexe est de monter un petit serveur et une base de données. Vingt minutes de travail en plus au démarrage, puis une charge qui ne s’arrête jamais : mises à jour, sauvegardes, hébergement à payer.

Or le contenu de ce projet tient dans quelques dizaines d’adresses qui bougent rarement. Une architecture sans serveur suffit, le coût de fonctionnement tombe à zéro, et ni le visiteur ni la personne qui alimente le site n’y perdent quoi que ce soit.

Terrain

Une carte qui sait où vous êtes

Sur l’écran de carte, la position est suivie en direct et reliée à la destination par un trait pointillé, la distance restante s’affichant en mètres puis en kilomètres. Le suivi s’arrête dès qu’on quitte l’écran, de sorte que rien ne tourne dans le vide et que la batterie est laissée tranquille.

Un détail qui n’en est pas un : une carte initialisée dans un conteneur encore masqué s’affiche de travers. C’est le piège classique de ce genre de bibliothèque, et il se règle au moment du changement d’écran.

Identité

Un habillage dessiné à la main

L’univers visuel est celui d’une carte marine bretonne : palette papier et encre, drapeau Gwenn ha Du dessiné en vectoriel, moucheture d’hermine, rose des vents. Chaque motif est déclaré une fois et réutilisé partout.

Les bases d’accessibilité sont posées au passage : libellés sur les zones et les boutons, focus visible au clavier sur tout ce qui est cliquable, et respect du réglage système qui demande de réduire les animations.

Le site

Trois écrans, et c’est tout le site.

Écran d’accueil de Kartenn, le choix de l’envie — L’accueil et ses quatre thèmes.

Liste des adresses du thème choisi — Les adresses du thème choisi.

Carte avec la position et la distance au lieu — La carte et la distance depuis votre position.

Ce que j’en retiens

C’est le plus petit de mes projets, et le seul qui tourne tous les jours sans que j’aie à m’en occuper. Je le montre pour cette raison : un site qui ne coûte rien et qui ne casse pas reste un livrable à part entière.

Il montre aussi ce que je vise dans chaque projet : que la personne à qui appartient le contenu puisse le modifier sans dépendre de moi. Ici, c’est un formulaire pour quelques adresses ; ailleurs, un back-office pour les tarifs d’une auto-école. Le principe est le même.

← Tous les travaux Projet suivant : Espace Conduite