Le blog de nlehuby

May 13, 2016

Faire une carte dynamique et éditable, avec MapContrib

Il y a deux ans, je voulais visualiser et modifier dans OSM les tags spécifiant les bières pression servies dans les bars.
Et c'était galère, alors j'ai fait un outil pour ça :  l'aventure OpenBeerMap a commencé.

Puis, il y a à peu près un an, j'ai voulu visualiser dans OSM où déposer mes déchets en verre pour les recycler.
Et c'était galère, alors j'ai fait un tuto expliquant comment faire une carte dynamique pour afficher facilement des données OSM.

Les choses bougent vite, la communauté OSM est très active : maintenant, il est devenu plutôt facile de réaliser ce genre de carte.
Je le dis, je le prouve : voici une carte des bouches de métro, avec un code couleur selon la complétude de l'info, réalisée en 10 minutes top chrono

L'outil qui a permis cela s'appelle MapContrib, et son job est de fabriquer des cartes dynamiques à partir des données OSM.
Et il permet également de modifier les données OSM affichées directement depuis la carte générée, de manière simple et efficace.

Si vous avez suivi mon tuto précédent, vous pouvez prendre en main MapContrib en un temps record : le concept est très similaire, on crée des calques de données, dans lequel on met une requête Overpass et ça marche tout seul.
Un peu de personalisation des marqueurs et hop, on a une carte partageable à diffuser à nos contributeurs !

Bref, plus le temps passe et moins vous avez d'excuses pour ne pas contribuer à OpenStreetMap ;)

Nov 02, 2015

Les données horaires du STIF en opendata !

Une discussion, autour d'une bière, avec un acolyte néophyte

Moi : T'as vu, le STIF ouvre ses données ?!
Lui : ah
Moi : Ben c'est cool, on va enfin avoir des bonnes données transport en opendata sur toute l'île-de-France !
Lui : ah, ouais, ça a l'air cool ... (Bois) Mais attend, on n'a pas déjà eu cette conversation il y a trois ans ?
Moi : ah non, ça c'était quand la RATP ouvrait ses données.
Lui : Ah. C'est pas pareil ?
Moi : Ah ben non, noob !
Lui : c'est quoi le STIF au fait ?
Moi : le STIF, Syndicat des Transports d'Île-de-France, c'est notre autorité organisatrice de transports. C'est le STIF qui organise tout le transports public, définit l'offre et la qualité de service attendue de la part des transporteurs, gère la modernisation du réseau, fixe les tarifs, ...
Lui : Ah bon, c'est pas la RATP qui décide des tarifs ?! Je suis sûre d'avoir déjà lu ou entendu "la RATP augmente le prix du pass navigo"
Moi : Et oui ! Mais c'est oublier qu'il n'y a pas que le RATP en Île-de-France ! C'est grâce au STIF qu'on peut traverser toute la région d'un bout à l'autre avec le même titre de transport, qu'on pourra acheter aussi bien à une borne RATP, à un guichet Transilien ou dans un bus de banlieue
Lui : Ok, mais  la RATP, c'est quand même le principal transporteur, ils ont les métro, tous les bus dans Paris, et tous les bus qui vont en banlieue comme chez moi ... ... ça fait vraiment une différence d'avoir les données du STIF en plus de celles de la RATP ?
Moi : En terme d'horaires et de passagers transportés, c'est clair. Mais pas en terme d'arrêts desservis et de kilomètres parcourus. Les arrêts RATP, ça fait moins de 30% des arrêts d'Île-de-France !
Lui : ah bon, mais c'est qui les autres ? Transilien, ça ne fait pas tant d'arrêts que ça ?
Moi : OPTILE, ça te dit quelque chose ?
Lui : j'ai déjà entendu ça quelque part en effet...
Moi : c'est écrit sur les titres de transport notamment. C'est l'Organisation Professionnelle des Transports d'Île-de-France. C'est un groupement de tous les autres "petits" transporteurs de bus de banlieue, et y en a plus d'une centaine ! Par exemple, à Boissy-Saint-Léger, on a des bus SITUS, STRAV et SETRA.
Lui : ah ouais, donc ça fait quand même pas de données en plus du coup. Et tu vas faire quoi ?
Moi : Plein de choses ! Je vais commencer par améliorer mon appli Firefox OS qui affiche les horaires de bus et permet de les consulter sans connexion, pour y ajouter les bus qui passent à Boissy !
Lui : Ouais. Sans vouloir te vexer, j'ai pas l'impression que ça va pas changer la face du monde, l'ouverture des données du STIF ... moi par exemple, je ne me sens pas du tout concerné.
Moi : Eh bien tu devrais ! L'opendata, c'est pas juste une histoire de développeur qui mangent de la pizza pendant un week-end et font une appli avec un gros coup de pub puis qu'ils arrêtent de maintenir deux mois après ... Il y a un vrai concept politique : rappelle-toi qu'au STIF, il y a des élus, c'est-à-dire des gens qui te représentent ! Et aussi que l'essentiel du financement du transport public dans la région, il est assuré par les collectivités régionales, donc un peu par nos impôts ! La mise à disposition de données brutes, c'est la transparence, c'est "citoyen, regarde ce qu'on fait en ton nom" !
Lui : Ah bon, faut que j'aille regarder les données du STIF maintenant ?
Moi : T'es pas obligé, mais tu peux, et c'est ça qui est important. C'est un peu comme le logiciel libre, c'est pas parce que tu peux télécharger le code source que tu vas le faire, que tu vas l'auditer ou que tu vas en faire ta propre version, la vendre et devenir riche, mais tu peux le faire ! Enfin tu peux essayer ... Si tu étais un journaliste par exemple, tu pourrais te servir de ces données pour contre-vérifier les informations communiquées.
Lui : Ouais, m'enfin bon, si les journalistes me disent que c'est la RATP qui décide des prix, ils vont surement pas aller télécharger les données du STIF pour vérifier quoi que ce soit ...
Moi : mouais, bon, c'est qu'un exemple. Tu peux aussi les croiser avec d'autres jeux de données en opendata pour faire des analyses originales ou inventer des nouveaux services innovants.
Lui : comme ton appli pour Firefox OS ?
Moi : je le mettrais pas dans la catégorie des services innovants, mais bon, c'est l'idée ! Mais tu devrais quand même aller jeter un coup d'oeil, il n'y aura pas que les données horaires sur la plateforme, tu trouveras peut-être quelque chose qui t'intéresse ;)

Jun 11, 2015

Les horaires de bus dans la poche

Je me suis enfin décidée à publier ma deuxième application FirefoxOS.

Elle a une mission très simple : sauvegarder et restituer les horaires théoriques de passage de bus à un arrêt.

Son fonctionnement est simple : en deux étapes

l'initialisation (quand j'ai une connexion internet)

  • je choisis mon arrêt.
  • je sélectionne la ligne et la direction
  • je vois alors les horaires, et je peux les enregistrer

init 

l'utilisation (quand je suis en déplacement, potentiellement sans connexion internet)

  • je vois la liste de mes fiches horaires enregistrées
  • je sélectionne celle que je veux, et je consulte les horaires

liste détail

Cette application utilise les données opendata d'Île-de-France, grâce à l'API navitia.io

Si vous voulez l'utiliser ailleurs, faites-moi signe : si votre région est couverte par navitia.io, je peux vous en déployer une version avec les horaires qui vous intéressent.

Cette application a été initiée pendant un hackathon chez Mozilla Paris en novembre 2014, puis peufinée par mes soins avec plus ou moins d'assiduité et de motivation pendant plusieurs mois.

C'est bien sûr open-source si vous voulez contribuer au code ou remonter des bugs. Si vous voulez supporter le coup de développement (énorme !) de l'appli, j'accepte les Flattries (et les bières, toujours).

Le but initial était de pouvoir avoir toujours sur moi les horaires de mon bus de banlieue peu fréquent, pour adapter mon itinéraire en connaissance de cause, et ce même si ça ne capte pas ...

Dans la pratique, j'ai déménagé depuis et ne prends plus ce bus de banlieue, et ses horaires ne sont toujours pas en opendata, donc j'aurais une utilisation assez limitée de l'application.

EDIT : le STIF a ouvert les données transport théoriques de toute l'Île-de-France donc ... l'appli fonctionne à présent sur les bus de banlieue !

J'espère que d'autres en auront l'usage ou sauront s'en inspirer pour d'autres utilisations.

Feb 23, 2015

[tuto] Faire une carte dynamique

Ce que j’apprécie particulièrement avec OpenStreetMap, c’est que c’est un écosystème très riche et qu’on peut découvrir chaque jour un nouveau truc génial à faire avec.

Voici un petit exemple d’une fonctionnalité que j’ai découverte récemment, et utilisée dans mon précédent article sur les points de collecte de recyclage de verre.

OpenStreetMap, c’est avant tout une grosse base de données. Mais pour mettre en évidence ces données, il faut avoir un certain niveau de connaissance d’OpenStreetMap.

Voici un solution simple pour afficher des données issues de la base OSM sur un fond de carte (OSM, évidemment), avec mise à jour automatique des données en fonction des modifications apportées sur la base par les contributeurs.

Voir en plein écran

Ici, une carte des boulangeries de Paris présentes dans OSM.

Pour récupérer les données, on utilisera par exemple l’API Overpass.

Et comme faire une requête Overpass qui fonctionne du premier coup est une opération un peu hasardeuse, on utilisera bien sûr Overpass Turbo.

Le tag pour une boulangerie est le suivant : shop = bakery

En utilisant le wizard d'Overpass Turbo, on obtient le résultat suivant :

image : export Overpass

Le résultat est ok, mais un peu moche.

Pour aller plus loin, on va afficher ces données dans uMap, un service opensource de création de carte personnalisable simple d’accès.

uMap permet en effet de choisir un fond de carte OSM et d’y ajouter des données de la provenance de son choix, de personnaliser un peu le design général, puis de partager sa carte.

Il nous faut donc indiquer à uMap où trouver les données à afficher.

Pour cela, dans Overpass Turbo : Exporter > Requête > format compact

image : overpass turbo

On obtient alors les paramètres, sous un format compact, à passer à l’API Overpass pour avoir un résultat.

Pour obtenir ce résultat, il faut passer ces paramètres à une instance Overpass (par exemple, l’instance mondiale « principale » ou l’instance française).

En concaténant les deux bouts de mon url, j’ai une requête que me retourne les données OSM au format json :

http://api.openstreetmap.fr/oapi/interpreter?data=[out:json][timeout:25]...

Muni de cette précieuse requête, allons sur uMap créer notre jolie carte !

Sur une carte, les données sont regroupées par « calque ».

Créons une carte.

Par défaut, elle contient un seul calque, vide, appelé calque 1.

Nous allons éditer ce calque pour y ajouter nos données récupérées via Overpass

image : édition du calque

Cliquons sur Données distantes

Dans le champ url, renseigner la requête Overpass, et sélectionner le format de données « osm »

Enfin, cocher la case « Dynamique »

image : dynamique

Vous devriez voir vos données s’afficher sur la carte.

C’est bien, mais … on peut mieux faire !

En effet, on aimerait bien pouvoir se déplacer sur la carte pour voir les boulangeries ailleurs que sur le petit coin que j’ai choisi.

Il faut donc indiquer à uMap de modifier la requête Overpass en fonction de l’endroit où se situe l’utilisateur sur la carte.

Cela se fait très simplement en remplacer toutes les occurrences des coordonnées dans la requête par les mots-clefs suivants {south},{west},{north},{east} qui sont interprétés par uMap.

La requête Overpass devient alors :

http://api.openstreetmap.fr/oapi/interpreter?data=[out:json][timeout:25];(node"shop"="bakery";way"shop"="bakery";relation"shop"="bakery";);out body;>;out skel qt;

Il ne reste plus qu’à personnaliser la carte selon nos goûts, nos envies et nos besoins : on peut changer le fond de carte, choisir des marqueurs plus jolis, etc

Ne pas oublier également de préciser la licence (ODbL, car utilisation de données OSM).

Puis, il ne reste plus qu’à partager sa carte avec le monde entier.

Pour cela, on peut soit fournir un lien, soit l’embarquer directement dans la page comme je l’ai fait ici

image : umap

Et voilà. C’est simple et efficace :)

Si vous avez des besoins plus sophistiqués, il faudra coder un peu et partir sur des solutions à bases de modules de Leaflet, telles que celles que j’ai mises en place pour OpenBeerMap.

Feb 01, 2015

Où recycler son verre ?

J'ai déménagé récemment. Et est arrivé le moment où j'ai envie de me débarrasser des bocaux et bouteilles de verre que j'ai descendus depuis mon arrivée.

Et surprise, pas de bac de recyclage pour le verre dans ma commune.

Le dépliant sur le recylage m'indique que je dois déposer tout ça dans l'un des 60 points de collecte de la ville.

Ok, c'est cool, mais ça me fait une belle jambe...

En effet, un container de collecte de verre usagé, c'est un élément de mobilier urbain qu'on ne remarque que si on est en train d'en chercher un ... On peut passer à côté tous les jours et ne même pas le remarquer.

Et c'est exatement ce qui m'est arrivé : là comme ça, je serais bien incapable de savoir où est le plus proche de moi.

Mais là où il y a un problème de données, il y a une solution dans OSM.

Une petite requête overpass plus tard, je découvre que je passe tous les jours devant un bac de collecte pour aller travailler, et assez régulièrement devant un second.

Et comme ce n'est pas la première fois que je me retrouve confrontée à ce genre de situation (par exemple en vacances, loin de chez soi, dans un endroit où la collecte du verre se fait également dans des bacs répartis dans la ville) et que je ne suis surement pas la seule à avoir ce genre de problèmes, je nous ai conconcté une petite carte de tous les points de collecte du verre cartographiés dans OSM :

Voir en plein écran

Jan 28, 2015

Vytopna réconcilie les amateurs de bières et les ferrovipathes

Ce bar, idéalement situé dans le centre de Prague est une étape obligatoire si vous visitez la ville.

Afficher une carte plus grande

image : demandez la carte

Ici, des voies ferrées courent entre les tables, voire même au milieu des tables pour les plus chanceux.

image : chanceux

image : entre les tables

Une fois commandées, les boissons (de préférence des bières, pour donner dans le local) sont apportées sur des wagons.

image : petit veinard

image : chanceux

image : petit veinard

Attention cependant à ne pas passer trop de temps à prendre des photos ou à admirer la figurine du conducteur de train : l’arrêt est marqué quelques secondes, puis le train repart !

image : du détail

image : encore du détail

éloignez-vous de la bordure du quai s'il-vous plait

On admirera aussi la signalisation un peu atypique ;)

image : signalisation

Jul 05, 2014

Jun 20, 2014

Vous connaissez Nietzche ? j'en suis fort Èze !

S’il y a une région qui se prête particulièrement aux railtrips comme je les aime, c’est bien la région PACA.

Je ne cesse de m’émerveiller de tout ce qu’on peut voir et faire en prenant un TER à moins de 5 euros.

image : billet de TER pas cher

J’ai en effet profité du week-end de l’ascension pour réaliser deux petits railtrip fort sympathiques, quoique, pour changer, j’ai encore eu des grands moments de solitude face aux bornes de vente de billets.

Départ d’Antibes, direction Beaulieu-sur-Mer pour une petite promenade le long de la mer, vers  randonnée vers St-Jean-Cap-Ferrat

Direction les bornes pour acheter des billets.

Pour ma part, je me dirige vers la borne classique qui vend des billets pour les trains grandes lignes mais aussi les TER (les jaunes moches habituelles) pour acheter deux billets (pour un de mes acolytes et moi-même)

Je saisis mes 342 options nécessaires jusqu’à arriver au moment où il faut saisir son numéro de carte voyageur ou son numéro de carte jeune. Mon acolyte commence à farfouiller dans ses affaires, ça traine ça traine et loupé ! il faut tout recommencer depuis le début.

Vu que les autres acolytes ont libéré une borne TER, je migre vers celle-ci car j’ai souvenir qu’elles sont plus simples à utiliser.

Là effectivement, il n’est pas nécessaire de donner son numéro de carte voyageur (de toute manière, avec un billet si peu cher, on ne cumule même pas de points de fidélité !), je passe sans encombre l’étape du choix de la zone (bleue ou blanche) grâce à l’étiquette positionnée au-dessus de l’écran (pas comme à Banyuls-Sur-Mer) et  j’arrive rapidement au moment où il faut payer. Là, dans la précipitation, je me trompe et je mets ma carte bancaire dans la fente réservée à une autre carte (carte d’abonné TER ? je ne sais plus). Argh, la borne plante. Il faut attendre qu’elle redémarre.

Bon aller, troisième essai, cette fois-ci c’est la bonne, je suis finalement en possession de mes deux billets. Comme vous pouvez le voir, j’ai toujours autant de mal à utiliser les bornes SNCF …

Compostage, et direction la plage !

La petite promenade en train est assez rapide, et laisse place à une vraie promenade sur le littoral, entre la mer et les montagnes.

image : Beaulieu-sur-Mer

Sur le chemin, nous apercevons, entre autres, le village perché d’Èze, où nous allons le lendemain !

Je vous épargne les détails, passons directement au lendemain.

De même, tout commence dans la gare d’Antibes, au moment d’acheter son billet de TER.

Rebelote, je sélectionne les options, je cherche la zone, etc. Au bout de quelques étapes, je me rends compte que je me suis gourée : j’ai sélectionnée 12/25 découverte au lieu de carte jeune : je recommence tout.

Pour rien, visiblement, c’est le même prix.

Mais impossible cette fois d’acheter plusieurs billets en même temps … zut, les bornes se ressemblent mais ne sont pas exactement les mêmes.

Je ne voudrais pas lancer une théorie du complot mais quand même, si on avait voulu rendre l’achat de billet de train compliqué, on ne s’y serait probablement pas pris autrement.

Bref, je refais tout deux fois, et c’est parti !

Ou pas, vu que le prochain train est en fait dans une heure.

Du coup, j’ai proposé à mes acolytes de cartographier sur OSM l’accessibilité de la gare d’Antibes mais étonnement, la proposition de la partie de UNO sur la plage a obtenu plus de suffrages …

Comme la plage d’Antibes est un peu loin de la gare, nous décidons d’aller plutôt à la plage sur une gare de notre parcours. En effet, avec une sortie située à quelques dizaines de mètres de la plage, c’est la gare de Biot qui maximise le temps passé à attraper des coups de soleils en mangeant des +4.

Bon, là en théorie, on aurait dû reprendre des tickets car apparemment, deux tickets A vers B puis B vers C, ça coute plus cher qu’un ticket A vers C.

image : billets de TER

Mais bon, le guichet est squatté par des étrangers qui vont surement à Monaco, et le temps qu’on trouve un moyen d’échanger les billets déjà achetés contre les nouveaux sur une borne, c’est sûr qu’on risque de ne plus faire ni plage ni UNO, et qu’on va rater le fameux train pour lequel on a initialement pris un billet !

Donc bref, on monte dans le premier train et va se couvrir les fesses de la poussière blanche de la plage de Biot, puis on reprend notre train initial et on arrive finalement à Èze !

On se trompe de sortie, on traverse les voies sur un passage à niveau puis on arrive finalement devant un restaurant. Ça tombe bien, cette matinée nous a épuisé et nous avons besoin de nous restaurer pour attaquer l’ascension de Èze par le chemin de Nietzche.

Mais surprise, il se met à pleuvoir …

On attends donc et on en profite pour prendre entrée, plat, dessert, café et faire des pyramides de sucre.

Ça ne se calme pas, on commence à envisager l’option retour sans rando …

Un bus passe très régulièrement et s’arrête pas très loin, et il semble aller dans la bonne direction.

Je tente de regarder ses horaires sur mon smartphone low cost : hum, pas de Centrale de Mobilité dans cette région, pas de système d’information multimodale régional, il faut que je me tape le site pas du tout adapté des cars départementaux.

Comme d’habitude, ça fonctionne pas super, on laisse tomber et on se rabat sur notre ami le train …

Mais au moment où on se décide à partir, la pluie se calme enfin : go go go !

Nous attaquons donc une ballade très sympathique, d’une grosse demi-heure, pour x km et x m de dénivelés.

La vue est magnifique : le regard d’un de mes acolyte s’arrête sur les falaises, le mien sur la ligne de chemin de fer qui longe la mer ...

image : falaises image : chemin de fer

Le parcours est bien indiqué, et jalonné de passages informatifs sur Nietzche qui aurait écrit son fameux bouquin dans ces lieux.

image : chemin

Bien indiqué, bien indiqué … pas partout quand même

Et la randonnée s’achève dans une petite cité médiévale de rues pavées et de galeries d’art.

Nous trainassons un peu puis prenons le chemin du retour.

image : rues médiévales

À mi-parcours, nous regardons les horaires du prochain TER qui nous ramène à Antibes et … on se met à courir vers la gare.

Ça me rappelle une idée sur laquelle j’avais bossée dans un hackathon, pour proposer, entre autres, des trajets TER + rando + TER, en optimisant les temps pour ne pas se retrouver à courir pour avoir son train, ou à l’inverse à attendre deux heures à la gare parce qu’on l’a loupé …

Jun 12, 2014

Mozilla l20n pour les nuls (par une nulle)

Comme je me suis lancée récemment dans l'internationalisation (je l'ai écrit une fois, maintenant, ça sera i18n et puis c'est tout) de mon petit site OpenBeerMap, et comme c'est ma première expérience en tant que développeur sur ce sujet et que j'ai vraiment galéré, je vous propose un article à mi-parcours entre le tutoriel et le retour d'expérience sur l'utilisation de l20n en javascript.

Comment j'ai pas tout bien compris, si vous avez des retours et repérez des erreurs, n'hésitez pas à me le signaler ;)

Commençons par les basiques : c'est quoi ?

L'i18n, c'est tout simplement avoir du texte adapté à la langue de la personne qui utilise le site ou le appli. Mais ce n'est pas tout, c'est aussi respecter les conventions propres à un pays (voire une région) par exemple le format de date.

Il existe des bibliothèques dans un peu tous les langages de programmation pour réaliser ceci. Mon site étant en html et javascript, j'ai opté pour une bibliothèque js.

Bon, j'ai pas choisi la plus facile mais j'avais envie d'expérimenter la solution Mozilla : l20n.

En particulier, le format des fichiers de traduction permet de gérer des tas de choses qui doivent donner bien mal à la tête en temps normal, comme par exemple les langues avec des déclinaisons (l'allemand, le polonais, etc), les pluriels (qui s'expriment potentiellement différemment dans les différentes langues), etc. Mais ... je ne vous parlerai pas de ça dans cet article : la documentation sur le super format de fichiers de traduction est abondante et facile à trouver. Je vais "seulement" vous montrer comment commencer l'i18n d'un site et arriver au moment où vous écrivez ces fichiers de traduction au format si merveilleux.

Comment ça fonctionne ?

Un peu de théorie avant de partir tête baissée !

L'idée de base, c'est que l20n recherche tous les éléments textuels qu'on a identifié comme à traduire, puis les remplace par leur valeur dans la langue que le navigateur web lui demande d'utiliser, ou par une valeur dans la langue par défaut (ou par une clef de traduction si la valeur n'a pas été renseignée nulle part).

Bon, j'avoue que sur la partie en italique : c'est une approximation ... Il y a moyen de raffiner énormément avec l'API de l20n mais 1) j'ai rien compris et 2) pour commencer, la langue du navigateur, c'est déjà pas mal et ça couvre l'essentiel des besoins.

En bref, l20n repasse sur toute la page HTML une fois qu'elle est affichée entièrement et remplace le texte par les traductions donc

  • le texte écrit dans le HTML ne sert à rien : on peut mettre lorem ipsum à la place, ça marche tout aussi  bien
  • si le traducteur d'une langue qu'on ne maitrise pas veut nous faire un coup bas, il ya surement moyen d'injecter du code malicieux dans les traductions et de le voir interprété par l20n ... mais bon, il parait qu'ils ont pris leur précaution, ça doit être mon côté parano ...
  • si y a des bouts de HTML qui sont ajoutés dynamiquement par du javascript, ben ... ça va pas être évident, il faudra demander spécifiquement la traduction à la l20n au moment où on ajoute ce texte dynamique !

Allons-y !

Prenons donc notre super site en HTML et javascript, et introduisons un peu de l20n dedans !

Première étape : ajouter l20n.js à la liste des scripts à exécuter

  <script src="l20n.js"></script>

Étape 1 bis : trouver une version de l20n.js qui fonctionne

ça a l'air de rien, mais j'ai déjà commencé à galérer à cette étape.

La doc indique que la dernière version à jour se trouve ici.

Perso, je n'ai pas trouvé cette version super fonctionnelle et j'ai opté pour la version proposée en téléchargement sur le site officiel

Étape 2 : configurer l20n avec le manifeste

Le manifeste permet d'indiquer quelles langues sont supportées et quelle est la langue par défaut.

Le remplissage de ce fichier est assez trivial.

image : c'est trivial

Une fois le manifeste rempli, il faut indiquer où le trouver dans le html.

  <script type="application/l10n-data+json">

J'avoue avoir sauté cette étape et utilisé la version proposée dans le dépot github, dans un premier temps.

Étape 3 : marquer les chaines à traduire

Les chaines à traduire sont identifiées en ajoutant un attribut aux balises HTML.

Par exemple, si j'ai le texte suivant et que je veux le traduire :

    <h1>Bonjour bonjour !</h1>

je le transforme en :

        <h1 data-l10n-id="code_hello">Bonjour bonjour !</h1>

Là, si vous enregistrez et retournez sur votre site, il ne plus bonjour mais "code_hello". C'est normal, don't panic !

Étape 4 : traduire !

En effet, il faut maintenant créer les traductions associées aux éléments identifiés dans le HTML, à l'aide du fameux format de fichier trop bien qui gère tout un tas de trucs.

C'est là que vous pouvez retourner sur la documentation de l20n et trouver votre bonheur !

il faut donc créer un fichier pour chaque langue définie dans le manifeste, à l'endroit défini par le manifeste

locales
├── ast.l20n
├── en.l20n
├── es.l20n
├── fr.l20n
└── manifest.json

Et dans ce fichier, on peut écrire les chaines à utiliser comme traduction :

      <code_hello "Hello !">

Voilà, y a plus qu'à reproduire les étapes 3 et 4 à l'infini !

Bon, ça ne fonctionne pas super bien avec le navigateur Chromium ... Mais sous Firefox, c'est impec.

Encore quelques petites remarques :

Comment tester ?

l20n se fonde sur la langue du navigateur pour choisir la langue parmi celles du manifeste. S'il ne la trouve pas dans son manifeste, il prend la langue par défaut du manifeste.

Pour changer la langue du navigateur : dans Firefox, c'est dans Outils > Options ou Édition > Préférences, onglet Contenu.

Il faut bien sûr recharger la page pour que ça prenne effet.

Subtilités (simples) du format génial :

Si vous avez du texte un peu long : il est possible d'avoir la traduction sur plusieurs lignes

      <about_long_contenu """ Voilà un texte très très long !
                              Tellement long qu'il tient sur plusieurs
                              lignes """>

Vous remarquerez peut-être qu'il n'est pas possible de mettre des balises HTML dans le fichier de traduction :(

Pour gérer le cas où on veut traduire tout un paragraphe qui contient des liens, voici comment procéder

    <div data-l10n-id="credits_contenu">
    Carte fournie par <a href="http://www.openstreetmap.org" target="_blank">OpenStreetMap</a>
    </div>

puis

    <credits "Carte fournie par <a>OpenStreetMap</a>">

pas très intuitif, mais tout à fait efficace.

Pour le reste, je vous invite à jeter un oeil à cette adresse.

May 19, 2014

OpenBeerMap – où trouver ma bière préférée ?

Parfois, lorsque je sors avec des acolytes, on se retrouve dans un bar qui sert une bière blonde dégueulasse tout juste bonne à faire des panachés classique, et on découvre en sortant que le bar d’à côté sert de la bière belge d’abbaye.

Je ne suis pas une grande amatrice de bière, mais je trouve ça plutôt frustrant.

Et qui dit frustration dit besoin sous-jacent.

Et qui dit besoin dit « il me faut une application pour ça ! »

Bref, c’est ainsi qu’il m’est venu l’idée de faire une carte affichant les bars et les bières qui y sont servies, à partir des données OpenStreetMap bien sûr !

Le résultat est visible ici : http://openbeermap.github.io/

Voici comment ça s’est déroulé.

Bon, j’ai commencé par apprendre les bases du javascript (parce que mon langage de prédilection, c’est plutôt le python, mais c’est quand même nettement moins adapté pour faire des cartes sur le web).

Je suis parti d’un plugin Leaflet (qui est un bibliothèque javascript efficace pour afficher des cartes) pour afficher des données à partir de l’API Overpass.

L’API Overpass (qui est testable sur cet IDE (http://overpass-turbo.eu/) permet de faire des requêtes sur les données OSM avec toutes sortes de filtres.

Dans mon cas, c’est amenity = pub (ou bar ou cafe) et brewery = {nom de ma bière}

Assez rapidement et sans y connaitre grand-chose, j’ai pu faire une joli carte avec des cases à cocher pour les différents types de bière :

image : OBM

Puis, j’ai intégré tout ça dans BootLeaf, une template basé sur Leaflet et Bootstrap, afin d’avoir quelque chose de responsive et surtout de plus joli, notamment sur mes info-bulles

image : OBM

Puis, je me suis rendue compte que j’avais pas beaucoup de bars où l’information était fournie …

Un petit tour sur Taginfo m’apprend qu’il n’y a que 15 objets dans OSM sur toute la France avec le tag brewery de renseigné !

Autant dire qu’il y a du travail de contribution à prévoir si je veux que mon site ait vraiment un intérêt.

Du coup, j’en profite pour rajouter un petit formulaire permettant de renseigner directement sur le site les bières dispo, et les autres infos pertinentes (pour l’instant, j’ai retenu uniquement nom du bar, accès wifi, heures d’ouverture et heures d’happy hours) :

image : OBM

Les informations saisies dans le formulaires partent directement enrichir la base de données OpenStreetMap, ce qui me permet de les re-consommer derrière pour afficher quelles bières sont dispo : un cercle vertueux à consommer sans modération ;)

C'était la partie la plus délicate à réaliser pour moi qui n'était pas familière avec l'API d'édition d'OSM et toute la cinématique nécessaire pour réaliser des modifications ... D'ailleurs, la gestion des conflits a été soigneusement éludée pour le moment...

Bon, j’ai finalement temporairement retiré les heures (opening_hours et happy_hours) car je pense qu’un simple champ texte n’est pas très adapté pour enrichir ce type de donnée : j’oublie moi-même tout le temps le format de ce tag et je n’ai pas très envie d’implémenter une vérification du format dans le formulaire, donc ce n’est pas optimal … affaire à suivre.

Maintenant, y a plus qu’à !

Je compte sur vous pour participer et ajouter les bières servies dans vos débits de boisson favoris.

Et sinon, c’est tout open-source, et toute contribution est la bienvenue !

Par exemple, si une âme charitable avec des compétences en graphisme pouvait me fournir des images (en SVG et libre de droit) des verres à bières, ça serait merveilleux. J’ai essayé de dessiné le verre de la Kwak … mais j’ai renoncé !

EDIT : c'est chose faite, tout juste 4 mois après le lancement du projet : Affligem, Carmélite Triple, Chouffe, Guinness et même Kwak ont leurs icônes intégrées dans OpenBeerMap 

image : kwak

Et l'ergonomie pourrait être améliorée sur le choix des bières (aussi bien sur l'affichage que la contribution) j'imagine.

EDIT : pour suivre l'actualité d'OpenBeerMap, suivez le mot-dièse #OpenBeerMap et le journal OSM https://www.openstreetmap.org/user/OpenBeerMapContributor/diary

Next → Page 1 of 3