En juin 2025, le réseau social X remplace progressivement sa section « messages privés » par un nouvel onglet « chat », qui correspond au service XChat. À terme, Elon Musk pourrait venir concurrencer WhatsApp, Messenger ou Telegram avec sa propre application.
Une nouvelle alerte aux aurores boréales est lancée pour le soir du lundi 2 juin 2025. La France métropolitaine n'avait malheureusement pas pu en profiter dimanche. Quelles sont les nouvelles prévisions pour ce soir ?
Dans une opération inédite menée au printemps 2025, la Royal Navy a testé pour la première fois l’intégration d’un drone Puma comme éclaireur pour un hélicoptère Merlin Mk2 lors d’une mission réelle dans l’Atlantique. L’objectif : tester en conditions réelles une solution hybride capable de renforcer la furtivité et la capacité de surveillance de la flotte britannique, tout en limitant l’exposition aux radars ennemis.
L'épisode final de la saison 2 de Doctor Who s'est achevé sur une tragédie... et une énorme surprise. Mais les apparences pourraient bien être trompeuses.
Il reste peu de temps à la marque de drones DJI pour convaincre l'administration Trump de ne pas interdire ses produits. Le gouvernement doit mener une enquête sur les risques des drones pour la sécurité nationale, et la procédure devrait s'accélérer.
Software patents and workarounds for them are, once again, causing headaches for open-source projects and users. This time around, Fedora users have been vulnerable to a serious flaw in the OpenH264 library for months—not for want of a fix, but because of the Rube Goldberg machine methodology of distributing the library to Fedora users. The software is open source under a two-clause BSD license; the RPMs are built and signed by Fedora, but the final product is distributed by Cisco, so the company can pick up the tab for license fees. Unfortunately, a breakdown in the process of handing RPMs to Cisco for distribution has left Fedora users vulnerable, and inaction on Fedora's part has left users unaware that they are at risk.
Ça y est, la Switch 2 arrive cette semaine. La toute nouvelle console de Nintendo, qui reprend le concept hybride (à la fois console de salon et portable), commencera à s’échapper des entrepôts le 5 juin pour rejoindre les salons. Si vous voulez être parmi les premiers à la découvrir, voici les meilleures offres de précommande encore disponibles chez les marchands.
[Deal du jour] Monsieur Cuisine Smart est un robot cuiseur de Silvercrest, la marque de Lidl. Souvent de bon rapport qualité-prix, l'appareil de cuisson profite en ce moment d'une réduction inédite.
Le nouveau thriller de Netflix, portant sur des affaires non résolues, cartonne actuellement dans le top 10 de la plateforme de streaming. Mais avant de prendre la forme d'une série britannique, Les Dossiers Oubliés était avant tout une saga littéraire culte.
Le mois de mai a été un mois particulièrement compliqué pour les livraisons automobiles. Cette fois, la voiture électrique est aussi touchée, avec un recul de 19 % des immatriculations par rapport à 2024.
Depuis la mi-mai 2025, le Japon autorise officiellement ses forces à mener des cyber-opérations offensives préventives, y compris en l'absence d'attaque avérée. Une rupture stratégique majeure : le pays rejoint ainsi le cercle restreint des démocraties dotées d’une doctrine cyber offensive explicite, avec un niveau de transparence rarement affiché sur la scène internationale.
Cette dépêche va présenter une méthode pour afficher sur un site personnel les traces, récits et photographies de balades (pédestres, cyclistes par exemple).
Comme le contenu à afficher est diversifié (texte, photographies, cartes), la solution retenue sera un blog. Dans un soucis de sobriété numérique, le site sera sans base de données.
Pour l'aspect esthétique, la barre de navigation et les cartes seront situées dans la partie gauche des pages et surtout, la carte ne bougera pas avec la navigation dans la page.
N'ayant pas trouvé d'alternative libre à Polarstep, la solution retenue se base sur les briques logicielles libres suivantes :
Pelican propose d'écrire chaque billet de blogs dans un fichier texte indépendant (au format markdown ou reStructuredText).
Pelican les convertit en html et l'organisation du site ainsi généré (catégories, mots-clefs, archivage) se fait par le biais de gabarits (qui sont dans un sous-répertoire templates)
L'installation ne sera pas développée ici, pelican étant disponible dans de nombreuses distributions.
Il faut créer la structure de travail (dans le répertoire personnel de notre choix) :
Connexionpelican-quickstart
En allant sur le dépôt des thèmes de pelican, il est possible de trouver le style graphique qui nous convient le mieux.
Nous allons utiliser le thème pelican-blue (sous licence MIT 2.0), qui a l'avantage d'être simple, et commençons son installation :
theme dans notre structure de travailpelicanconf.py pour configurer notre site. Il faut adapter quelques variables :SITENAME = 'Mon blog'
SITEDESCRIPTION = 'Mes souvenirs de vacances'
THEME = "./theme/pelican-blue"
STATIC_PATHS = ['images', 'gpx']
On va créer notre premier billet
Title: Première sortie
Date: 2025-05-01
Modified: 2025-05-01
Category: Lieux
Slug: depart
Tags: bonjour, balade
Bonjour tout le monde ! Quelle chouette sortie j'ai faite.
On lance la première compilation :
make clean
make html
On peut voir le résultat :
output)make serve) et lancer son navigateur web à l'adresse http://localhost:8000/
Pour plus de renseignements sur pelican, je vous invite à vous rendre sur la documentation du projet.
On va maintenant nettoyer le code des gabarits, en supprimant les choses que l'on trouve inutiles ou qui nous déplaisent. Tout se passe dans le répertoire templates de notre thème.
On supprime les parties qui ne nous conviennent pas.
Nous attaquons désormais notre objectif : rendre visibles sur des cartes des fichiers de trace.
On va maintenant configurer la gestion des cartes, par l'intermédiaire de leaflet. Comme l'indique sa page wikipédia, leaflet est très largement utilisé et très pratique.
On va donc
static de notre thème base.html) pour y ajouter au niveau <head> les références à leaflet : <link rel="stylesheet" href="{{ SITEURL }}/theme/leaflet/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
<script src="{{ SITEURL }}/theme/leaflet/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>Comme on a récupéré en local les fichiers, on met des chemins propres à notre arborescence (via {{ SITEURL }}/theme/).
Elle va se faire par l’intermédiaire d'un module supplémentaire https://github.com/mpetazzoni/leaflet-gpx (BSD 2).
De la même manière qu'on a intégré dans nos entêtes l'intégration de leaflet, nous allons ajouter une ligne pour faire référence à leaflet-gpx (bien vérifier le nom du fichier javascript) :
<script src="{{ SITEURL }}/theme/leaflet-gpx/gpx.js"></script>Par rapport à la documentation officielle, on retire l'attribut defer (puisque nous utilisons les fichiers locaux et non distants).
Pour tester notre environnement, on va déposer dans notre répertoire gpx un fichier de trace, puis on va ajouter dans notre billet les éléments de cartographie de notre voyage :
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Carte et données : <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map);
var gpx = '/gpx/FICHIER.gpx';
new L.GPX(gpx, {async: true}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
</script>On regénère notre site web, et on peut visualiser notre billet
Globalement, ça fait le boulot.
Mais on peut améliorer la chose : on peut par exemple cacher les marques de début et de fin d'itinéraire en insérant la ligne suivante après le async: true
markers: {startIcon: null, endIcon: null, }Mais surtout, nous souhaitons que pelican génère automatiquement la partie consacrée au fichier de trace (alors que dans notre test, nous avons dû l'ajouter nous-même) !
Si l'on veut simplement ajouter notre fichier de trace et que notre gabarit le traite, on va ajouter cette information dans les entêtes de notre fichier markdown ! En effet pelican permet de créer des variables qui seront utilisables dans nos gabarits.
Nous allons donc créer et utiliser une variable (qui s'appellerait… Gpx par exemple), qui stockera le nom du fichier gpx à afficher (les chemins sont relatifs à notre site web)
Title: Première sortie
Date: 2025-05-01
Modified: 2025-05-01
Category: Lieux
Gpx: /gpx/monfichier.gpx
Slug: depart
Tags: bonjour, baladeNous modifions ensuite notre gabarit article.html pour qu'il génère la carte à partir de notre variable.
Pelican est très souple : basé sur Jinja2, il permet les boucles, les conditions et les variables.
Tous les éléments qu'il utilise sont insérés dans des accolades. Le fonctionnement est facilement lisible et compréhensible.
On va donc conditonner (avec if) l'insertion de leaflet.
{% if article.gpx %}
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var map = L.map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Carte et données : <a href="http://www.osm.org">OpenStreetMap</a>'
}).addTo(map);
var gpx = '{{ article.gpx }}';
new L.GPX(gpx, {async: true,
markers: {startIcon: null, endIcon: null, }
}).on('loaded', function(e) {
map.fitBounds(e.target.getBounds());
}).addTo(map);
</script>
{% endif %}Bien entendu, nous supprimons ces références du fichier markdown correspondant à notre billet de test.
On regénère notre site web, et on peut visualiser notre billet… qui n'a pas changé : tout fonctionne. Pour chacune de nos sorties, il suffit donc d'indiquer le fichier de trace dans les entêtes pour que la carte soit insérée automatiquement dans notre billet.
Passons maintenant à l'intégration de nos photos.
Nous avons besoin :
Pour cela, nous allons procéder de la même manière que pour le fichier trace : nous allons créer et utiliser des variables dans les entêtes des fichiers markdown.
Nous modifions encore une fois les entêtes en ajoutant autant d'informations (image, latitude et longitude) que de photos à afficher en miniatures.
Title: Première sortie
Date: 2025-05-01
Modified: 2025-05-01
Category: Lieux
Gpx: /gpx/monfichier.gpx
Slug: depart
Img: /images/image1.jpg
Lat: 49.895517
Lon: 2.295983
Img: /images/image2.jpg
Lat: 49.89443
Lon: 2.30137
Tags: bonjour, balade
On remarque ici que l'on a mis plusieurs images avec les mêmes noms de variables.
Nous allons ensuite modifier les gabarits de pelican pour qu'ils positionnent des miniatures des photos sur notre trajet.
Nous allons à nouveau modifier notre fichier article.html, en y ajoutant (à la suite de notre précédente modification, dans la condition {% if article.gpx %}) le code suivant :
Nous commençons par indiquer l'icône qui s'affichera sur la carte à chaque photo mise en valeur
var MonIcone = L.icon({
iconUrl: '/images/app-photo.png',
iconSize: [36, 36]
});
Puis nous codons l'affichage du marqueur (qui sera géré par leaflet).
{% if article.img %}
{% if article.img is string %}
imageTxt = 'Description';
L.marker([{{ article.lat }}, {{ article.lon }}], {icon: MonIcone}).bindPopup(imageTxt + '<br><img src="{{ article.img }}" width="200px"><a href="#bal5">plus de détail</a>').addTo(map);
{% else %}
{% for n in range(article.img| length) %}
imageTxt = 'Description';
L.marker([{{ article.lat[n] }}, {{ article.lon[n] }}], {icon: MonIcone}).bindPopup(imageTxt + '<br><img src="{{ article.img[n] }}" width="200px"><a href="#bal5">plus de détail</a>').addTo(map);
{% endfor %}
{% endif %}
La difficulté réside dans la gestion des éléments répétitifs :
Les choix sont ici purement personnels ou démonstatifs :
On regénère notre site web, et on peut visualiser notre billet :
Et lorsqu'on clique sur une icône d'appareil photo, on voit bien notre popup :
Comme indiqué plus haut, la taille des miniatures affichées peut se gérer :
imagemagick) pour diminuer la charge de notre serveur (afficher une photo de 3000 pixels à 200 pixels n'est pas optimal). Dans ce cas, il suffira d'adapter notre gabarit pour lui indiquer où aller chercher les petites images (/images/miniatures/ par exemple)Par contre, le point le plus compliqué est la gestion des coordonnées des photographies : il faut les rentrer à la main !
Pour les photographies qui n'intègrent pas les coordonnées dans leurs métadonnées, il n'y a pas d'autre solution que d'aller chercher sur une carte (openstreetmap par exemple) et de trouver le lieu de la prise de vue et de repérer les coordonnées.
Pour les photographies qui contiennent leurs coordonnées géographiques, on peut utiliser l'outil exiftool pour les récupérer. On peut éventuellement faire un script bash qui affiche les lignes d'entête pour notre billet (on n'a plus qu'à les recopier ou les rediriger vers un fichier texte) :
for photo in $(ls ./content/images);
do
echo ""
echo "Img: /images/"$photo
LAT=$(exiftool -n -s3 -gpslatitude ./content/images/$photo)
echo "Lat: "$LAT
LONG=$(exiftool -n -s3 -gpslongitude ./content/images/$photo)
echo "Lon: "$LONG
doneNous avons utilisé les options -n qui affichent les valeurs numériques au format décimal (celui utilisé par openstreetmap pour les coordonnées) et -s3 pour avoir la valeur du champ sans le nom de son attribut.
Nous venons de voir les différentes techniques qui permettent d'avoir le rendu que nous souhaitions. Et le résultat est déjà agréable à regarder.
Nous pourrions nous arrêter ici, mais vous voulons que la carte reste en permanence dans le menu latéral. La solution est de la mettre dans une balise <aside>.
Notre thème comporte déjà une telle balise : elle est dans le fichier base.html… ce qui signifie qu'il ne peut pas voir les informations sur les articles (donc nos entêtes) !
La solution va donc consister à déplacer, à l'intérieur du fichier article.html, tout notre code dans une section (que nous appellerons mamap :
{% block mamap %}
Mettre ici tout le code sur notre gestion cartographique
{% endblock %}
Et dans le fichier base.html, on va insérer à l'intérieur des balises <aside> son appel (qui ne tient que sur deux lignes) :
{% block mamap %}
{% endblock %}
Il faut surcharger le comportement de la carte gérée par leaflet :
.leaflet-container {
width: 400px;
height: 300px;
max-width: 100%;
max-height: 100%;
margin: auto;
}Et vérifier que les largeurs de la carte, et de <aside> soient compatibles.
Le résultat avec nos dernières modifications est désormais le suivant
Il est temps de finir cette dépêche, dans laquelle nous avons pu découvrir la souplesse et la richesse des gabarits gérés avec jinja2, ainsi que la facilité d'utilisation de leaflet.
Désormais, dans notre flux de travail, nos répertoires sont organisé ainsi :
content
+ gpx : les fichiers de trace
+ images : les photos que l'on veut afficher sur notre blog
fichierXX.md : les billets
output : notre site web (généré par pelican)
theme
+ pelican-blue : le thème choisi
+ static
+ css
+ leaflet
+ leaflet-gpx
+ templates
Et la rédaction de nos billets consiste à :
Cette dépêche démontre qu'il est possible d'avoir, avec les outils actuels, un rendu intéressant pour partager ses sorties. Et totalement utilisable en auto-hébergement.
Les outils utilisés sont très personnalisables et je vous invite à lire leurs documentations ou à parcourir leurs extensions respectives et de vous les approprier selon votre usage.
Malheureusement, la solution présentée ne conviendra qu'à une minorité d'utilisateurs. En effet, elle se base sur des éléments qui sont le plus souvent rendus invisibles (site web, transfert de fichiers, métadonnées) et elle est inutilisable sur téléphone.
Commentaires : voir le flux Atom ouvrir dans le navigateur
Pour son film 28 Ans plus tard qui sort en salles, le réalisateur Danny Boyle a utilisé un support avec 20 iPhone. Ce qui lui a permis de réaliser un « bullet time du pauvre », comme dans Matrix.
L'administration Trump ne nommera finalement pas le milliardaire Jared Isaacman à la tête de la Nasa. Un retournement de situation qui intervient au moment de la rupture entre Musk et Trump.
[Deal du jour] Si vous souhaitez vous inscrire au service de streaming musical Deezer, la plateforme française propose en ce moment les trois premiers mois offerts avec son abonnement premium.
La comédie romantique de Netflix, avec Kristen Bell (Veronica Mars) et Adam Brody (Newport Beach), a été renouvelée pour une saison 2. Et nous pourrons heureusement très bientôt retrouver les personnages de Nobody Wants This.
Jouable uniquement en solo ou en trio, Elden Ring Nightreign se dote déjà d'une option non-officielle pour pouvoir vivre une aventure en duo. Un mode que pourrait ajouter FromSoftware plus tard.
Free Mobile et Orange signent le prolongement de leur partenariat sur la 3G. Il va permettre à Free de proposer de la 3G sur le réseau d'Orange à ses abonnés, pour couvrir certaines zones où il n'est pas encore présent.
