Bretagne zone hydrocarbure, par Bruno Bergot
►http://visionscarto.net/bretagne-zone-hydrocarbure
#pétrole #marée_noire #cartographie_narrative #Bretagne #pollution #leaflet.js
merci @b_b pour ▻http://seenthis.net/messages/443886 !
Bretagne zone hydrocarbure, par Bruno Bergot
►http://visionscarto.net/bretagne-zone-hydrocarbure
merci @b_b pour ▻http://seenthis.net/messages/443886 !
bravo b_b !
...et si je peux me permettre une petite remarque technique : lorsqu’on survole un point à la souris (ou le titre dans le cadre), le cercle de la marée noire s’affiche fugacement et disparait quasi-immédiatement. Du coup si on veut mieux le voir il faut passer et repasser sur le point :-(
=> ne serait il pas possible de conserver l’affichage du cercle tant qu’on a la souris dessus ? (un :hover classique quoi !)
Huhu, merci, sacré déterrage ;)
Pour le choix de la durée d’affichage du cercle, c’est comme on dit « un choix artistique » :p
Cartes et tuiles vectorielles
▻https://mapzen.com/projects/vector-tiles
▻https://mapzen.com/projects/tangram
▻https://github.com/devTristan/hoverboard
▻http://tristan.io/hoverboard
il y a de tout là-dedans, avec #mapbox, #leaflet.js, #d3.js …
merci @b_b !
le plus fluide à ce jour semble celui de #Mapbox_GL
#vector_tiles ou #vectiles
choroplèthes en #leaflet.js
▻https://github.com/timwis/leaflet-choropleth
▻http://timwis.com/leaflet-choropleth/examples/basic
(utilise #chroma.js pour la gestion des couleurs)
nerik/leaflet-graphicscale · GitHub
▻https://github.com/nerik/leaflet-graphicscale
A animated graphic scale for #leaflet.js that looks sharp.
Demo : ▻http://nerik.github.io/leaflet-graphicscale/demo
#webgl Earth - open source 3D digital #globe written in JavaScript
WebGL Earth is an open-source virtual globe made with HTML5 and Canvas WebGL technology. It comes with a JavaScript API adapting the popular LeafletJS API. If you are familiar with Leaflet mapping library or Google Maps API you can easily start to use WebGL Earth API in your mashups and give your mapping applications third dimension with nice fly animations.
Things like markers, pop-ups, centering and flying to a place on given latitude and longitude or loading your own map layers are all possible. The code from Leaflet can be also mixed with WE - you can pass L.LatLng and L.LatLngBounds, etc. Map layers such as OpenStreetMap, MapBox, Bing, etc. can be easily loaded. Custom geodata, such as GeoTIFF, ECW, MrSID, etc can be easily turned to compatible tiles with MapTiler. With custom tiles the globes can be used even in intranet or offline.
WebGL Earth uses under the hood the great CesiumJS project for the rendering of the data.
Le dessin MADMEG de @mad_meg en mega-zoom pour célébrer l’expo à Nástupište
▻http://madmegblog.blogspot.fr/2014/05/le-dessin-madmeg-de-madmeg-en-mega-zoom.html
En ce soir de vernissage à Topoľčanoch, vous pouvez profiter de la webapp :
avec la bonne adresse : ▻http://madmeg.org/lenragee
#art #dessin #autoportrait #leaflet.js
– Pieter Bruegel le Vieux (1525-1569)
– “Dulle Griet” (“Margot l’Enragée”) date de 1562.
Création de panoramas (grandes images) au moyen de leaflet.js, script bash de génération des tuiles avec ImageMagick
▻http://panos.tetraconcept.com/ilduomo.html
Premier test d’utilisation de #leaflet.js pour afficher des panoramas...
Les utilisations qu’en font les habitués de SeenThis (je pense aux oeuvres de madmeg par exemple) m’ont titillé... et les congés ont été propices à ce genre de réalisations.
Ici, donc, « Il Duomo » de la cathédrale de Florence. Il est loin d’être parfait... mais il permet d’avoir une idée de l’oeuvre.
Je me suis inspiré de cet article de blog, dont j’ai transcrit le script ruby en bash, pour le fun... :
▻http://omarriott.com/aux/leaflet-js-non-geographical-imagery
Et de celui-là, qui m’a permis de corriger des soucis dans l’utilisation de leaflet tel qu’indiqué par le premier site :
▻http://getsite.org.ua/en/build-site/php-maptiler-simple-map-tiles-generator
Et enfin de ce tuto du site officiel :
▻http://leafletjs.com/examples/quick-start.html
Il faudra j’imagine que je pense à faire en sorte que mon image d’origine ait une taille multiple de 256 pour ne pas avoir ce résultat moche au niveau de zoom le plus faible... à moins qu’il n’y ait une option dédiée...
La prochaine étape est d’industrialiser... J’ai une dizaine de panoramas à mettre en ligne de la sorte :-D
avec @b_b on a commencé à bosser sur un outil « industriel » :)
ma version est ici ►https://bitbucket.org/recifs/tuile ; todo : ajouter un peu de sécurité dans le système (pour l’instant n’importe qui peut me faire avaler une énorme image).
J’ai amélioré mon script bash... Il me permet maintenant de mettre en ligne assez rapidement une image...
Celui là date de décembre 2012...
▻http://panos.tetraconcept.com/lyon.html
Y-a aussi un point de vue de Madère, l’an dernier...
▻http://panos.tetraconcept.com/madeira.html
Et le bateau du film « Pirates »
▻http://panos.tetraconcept.com/pirates.html
Mon « industrialisation artisanale » consiste à disposer d’un script qui me crée les tuiles pour les 5 niveaux de zoom que je souhaite utiliser. Le script a besoin d’un paramètre, le nom du fichier image grand format. Il crée dans le répertoire actif les 5 répertoires, un par niveau de zoom. Tout cela est totalement dépendant de ImageMagick.
Aucune vérification d’erreur... c’est vraiment très sommaire. Mais ça fonctionne...
Le script redimensionne les images pour que les dimensions soient des multiples de 256, en comblant les espaces vides par du blanc.
#!/bin/bash
source_file=$1
tmp_dir=./tmp/
mkdir $tmp_dir
tile_width=256
tile_height=256
minZ=13
maxZ=18
for ((z=$maxZ;z>=$minZ;z--))
do
dest_file=${tmp_dir}zoom_${z}.jpg
if [ $z -eq $maxZ ]; then
image_width=`identify -format %w $source_file`
image_height=`identify -format %h $source_file`
image_width=$(((($image_width+$tile_width-1)/$tile_width)*$tile_width))
image_height=$(((($image_height+$tile_height-1)/$tile_height)*$tile_height))
convert -size ${image_width}x${image_height} -quality 80 xc:white $dest_file
composite -gravity NorthWest $source_file $dest_file $dest_file
#source_file=$dest_file
fi
if [ $z -ne $maxZ ]; then
image_width=`identify -format %w $source_file`
image_height=`identify -format %h $source_file`
image_width=$(($image_width/(2**(maxZ-$z))))
image_height=$(($image_height/(2**(maxZ-$z))))
convert -resize ${image_width}x${image_height} $source_file $dest_file
image_width=$(((($image_width+$tile_width-1)/$tile_width)*$tile_width))
image_height=$(((($image_height+$tile_height-1)/$tile_height)*$tile_height))
temp_file=${tmp_dir}zoom_${z}_temp.jpg
convert -size ${image_width}x${image_height} -quality 80 xc:white $temp_file
composite -gravity NorthWest $dest_file $temp_file $dest_file
fi
mkdir ./${z}/
convert -crop 256x256 +repage $dest_file ./${z}/tiles_%d.png
image_width=`identify -format %w $dest_file`
image_height=`identify -format %h $dest_file`
echo $image_width $image_height
tiles_per_column=$((($image_width+$tile_width-1)/$tile_width))
tiles_per_row=$((($image_height+$tile_height-1)/$tile_height))
total_tiles=$(($tiles_per_column*$tiles_per_row))
n=0
row=0
column=0
for (( i=$n; i<$total_tiles; i++ ))
do
filename=./${z}/tiles_${i}.png
target=./${z}/map_${column}_${row}.png
cp -f $filename $target
column=$(($column + 1))
if [ $column -ge $tiles_per_column ]; then
column=0
row=$(($row + 1))
fi
done
rm -f ./${z}/tiles_*.png
done
rm -rf $tmp_dir
Le fichier html qui va utiliser les images est conçu peu ou prou de la sorte. Il convient de personnaliser les variables mapW et mapH avec les vraies dimensions en pixel de l’image la plus grande.
<html>
<head>
<title>Pirates</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet" href="resources/map.css" />
</head>
<body bgcolor="#ffffff">
<div id="map"></div>
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script language="javascript" type="text/javascript">
var maxZ = 18;
var minZ = 13;
var mapW = 7424;
var mapH = 6144;
var mapName = 'pirates';
</script>
<script src="resources/map.js"></script>
</body>
</html>
Le fichier map.css est très simple... Il permet d’avoir un fond blanc dans le conteneur principal :
#map { width:100%;height:100%; }
.leaflet-container { background: #fff; }
Et le fichier map.js contient le code qui initialise l’ensemble. Les tuiles sont attendues dans le répertoire nommé comme la variable « mapName ».
var map = L.map('map',{center: [0, 0], maxZoom: maxZ, minZoom: minZ, crs: L.CRS.Simple}).setView([0, 0], Math.floor((maxZ + minZ) / 2));
var southWest = map.unproject([0, mapH], map.getMaxZoom());
var northEast = map.unproject([mapW, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));
L.tileLayer('/' + mapName + '/{z}/map_{x}_{y}.png', {attribution: '© BigGrizzly <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'}).addTo(map);
J’ai buté un moment sur les niveaux de zoom. Je voulais mettre 20 comme niveau le plus élevé, donc de 15 à 20. Et les niveaux 19 et 20 ne s’affichaient pas. Pas d’erreurs, aucune tuile chargée. J’ai tout baissé de 13 à 18 et... hop, tout s’est remis à fonctionner (parce que oui, sur mon premier prototype, ça fonctionnait jusqu’à 20...).
Rien trouvé dans la documentation au sujet du fonctionnement du zoom.
tu devrais faire un gist ce serait plus pratique :)
Sinon pour les niveaux de zoom, je crois que 18 est la valeur maximum permise par la plupart des logiciels. J’avais eu la même idée que toi au départ, et au final je me suis ramené à z=0
: cadre contenant l’image entièrement dans 256x256.
Ce qui fait que je calcule tout de z=0
à 4
, 5
, 6
ou 7
selon la taille de l’image (7 => 256 * 2^7 = 32768px
de côté). J’ai l’idée pour la suite de mettre plusieurs images sur une même map (pour faire une galerie), mais je passerai alors par le format mbtiles
pour renuméroter / déplacer mes tuiles, à coups de UPDATE sql.
Bien vu le composite qui te permet de ne pas avoir de « demi-tuiles » en bas et à droite ; dans mon script je fais la même chose mais, tu verras, je le fais sur chaque tuile, et non pas sur l’image source. Il faudrait voir ce qui est le plus rapide (sur les très très grosses images j’ai facilement 2 ou 3 heures de traitement…).
Je n’ai pas de traitement qui dure plus de quelques minutes, mais je n’ai pas d’images énormes non plus à priori, en général < à 200Mpx.
Oui, fonctionner à l’envers, 0 puis augmenter, c’est plus malin en effet... pour faire qq chose de paramétrable.
Mais... là, je doute qu’après mes congés, je reprenne du temps avant un moment sur ce sujet. Enfin... Jusqu’aux prochaines vacances... où j’aurais décidé de me trimballer un pied photo, pour faire un pano de la mort au 300mm sur 360° :-D
@fil : Pleins de choses intéressantes en effet dans le source « tuile ». Ça ressemble pas mal à ce que j’obtiens à la fin, c’est presque rassurant ;-)
Test du jour, image de 350Mpx (35Kx8K), vue sur Lyon au 300mm... Le traitement le plus long (10-15 minutes, je ne sais pas) a été la recomposition par MS ICE... Mine de rien, il a occupé 3,6Go en RAM, et autant sur le disque le temps du traitement. Idem pour le premier découpage par ImageMagick, ensuite, sur le serveur Debian... Là, pas plus de 5 minutes pour le premier découpage (le plus grand).
Une autre piste :
Leaflet plugin for plain image map projection to display large images using tiles generated with gdal2tiles-leaflet.
▻https://commenthol.github.io/leaflet-rastercoords
The tiles in the example were generated using gdal2tiles-leaflet. Take a look at example/createtiles.sh.
La route de tous les périls, par @mad_meg - Visionscarto
►http://visionscarto.net/la-route-de-tous-les-perils
Carte de Paradise, du manga One Piece
Magnifique fresque c(art)ographique signée madmeg, à explorer sans restriction dans les moindres détails...
Grand Line, la route de tous les périls, est composé de deux parties : Paradise et le Nouveau Monde...
C’est vrai que filou est aussi beau gosse (mignon) je crois que rien que pour la langue, je vais déménager en Bretagne #mon_lapin_bleu
si tu cherches un endroit pour squatter demande le chemin à fil, il connaît une adresse sympa ;)
super merci @Fil @Reka @Intempestive :) et trop gentil le petit mot en bas de la page.
Je sais pas si c’est compliqué mais ca serais chouette d’avoir une fonction pour imprimer facilement l’image. Ca peut être sympa pour les fans de One Piece. La carte comporte quelques erreurs car depuis que je l’ai dessinée on a appris pas mal de choses sur la géographie de Grand Line. Il faudra probablement qu’un jour je la refasse avec les nouvelles infos. J’avais fait la carte dans le but de faire un JDR One Piece et il y a des iles qui sont de mon invention et ne sont pas mentionné dans le manga de Oda-Senseï. Et pour la seconde partie de Grand Line comme le manga est loin d’être achevé, il faudra attendre au moins 10-15 ans pour que j’ai les informations qui me permettent de la dessiné en totalité.
Dans le même genre j’ai un plan de Poudlard que j’avais fait là aussi pour l’adaptation maison d’un JDR sur Harry Potter mais c’est beaucoup moins aboutis. Bon va falloir que je mette ca au propre histoire d’en faire profiter les amis de vision cartographique.
#jdr
Foundations - New guides to the #Mapbox platform | Mapbox
▻https://www.mapbox.com/blog/introducing-foundations
Mapbox Foundations, a new collection of educational guides for every corner of the Mapbox platform. Foundations is for anyone who wants to learn more about making maps with Mapbox, TileMill, and the rest of our platform. Each guide covers general concepts and tricks of the trade, so that you can get started building fast.
Hexbins with D3 and Leaflet Maps — delimited
►http://www.delimited.io/blog/2013/12/1/hexbins-with-d3-and-leaflet-maps
maps that present data using hexbins. This is a novel way to present information and can be a powerful way to deal with cases where there are a large number data points. In this post I am using data from Starbucks and Dunkin’ Donuts as a way to test out this way of mapping information.
Atlas of the Historical Geography of the United States
▻http://dsl.richmond.edu/historicalatlas
via FlowingData as usual...
In 1932, Charles O. Paullin and John K. Wright published Atlas of the Historical Geography of the United States, a reference of almost 700 maps about a varied set of topics, such as weather, travel, and population. The Digital Scholarship Lab at the University of Richmond brought the atlas to digital life.
https://dl.dropbox.com/s/yhki3gzs2zdgk5p/digitatlas%20etatsunis.png
In this digital edition we’ve tried to bring—hopefully unobtrusively and respectfully—Paullin and Wright’s maps a bit closer to that ideal. First, with the exception of the historical maps from the cartography section and a handful of others (those that used polar projections, for example), we’ve georeferenced and georectified all of the maps from the atlas so that they can be overlaid consistently within a digital mapping environment. (Georeferencing is a process of linking points on a map to geographic coordinates, and georectification is a process of warping a map using those coordinates to properly align it within a particular projection, here web mercator.) High-quality scans of all of the maps as they appeared on the plates are available too.
Not only are the maps overlaid on a slippy map, but the lab also added simple interactions with tool tips and animation so you can look more specifically at the data.
#atlas #cartographie #visualisation #cartographie_historique #sémiologie #perception #imaginaire #états-unis
La mappa perfetta
–-> la #carte parfaite (?)
publiée par Internazionale
#cartographie #projection #perfection (?) #visualisation
Get to Know a Projection: #Gene_Keyes’ 40-Year Quest for the Perfect Map
►http://www.wired.com/wiredscience/2013/12/gene-keyes-quest-for-the-perfect-map
en vertu de la licence BY-NC-SA j’ai fait une version #leaflet.js vite fait, c’est plus facile pour naviguer…
►http://fil.rezo.net/genekeyes
En plus du point de vue de la représentation des frontières, c’est politiquement correct...
Le PDF d’origine est composé de plusieurs calques et images :
Orbis terrarum
Cahill-Keyes projection
Ombres, mers, reliefs
la carte a été imprimée et vient d’être envoyée aux heureux acheteurs du premier tirage
▻http://www.youtube.com/watch?v=8OH7xAOA3LY
il en reste dépêchez-vous
Quelques implémentations en ligne de #projections exotiques, assez chouette à découvrir :
#faumaxion : ▻http://teczno.com/faumaxion-II
cahill-keyes avec #d3.js :
le blog qui explique la #faumaxion : 2008 !
▻http://mike.teczno.com/notes/slippy-faumaxion-II.html
@rastapopoulos la difficulté à laquelle je suis confronté est que la fonction d3.geo.cahillKeyes()
définie par ►http://bl.ocks.org/espinielli/5689783
.invert
, qui permettrait de savoir où est-ce qu’on se trouve (en coordonnées λ, φ) quand on clique sur un point (x,y).Trois semaines après, tu l’as reçu @fil ? Elle est cool ? Le papier est de bonne qualité ? Tu l’as encadré/protégé/collé ?
Je viens enfin de me décider à la commander aujourd’hui ! Et il l’avait donné à la poste avant même que j’avais réglé sur Paypal… confiance et expédition rapide… (mais il n’a peut-être pas 200 demandes par jour. :D)
Bon j’ai demandé à un encadreur : 116€ pour un grand panneau de support renforcé + la main d’œuvre de le coller dessus bien pro.
Plus que la carte…
Et encore, c’est juste pour le support, un cadre avec vitre, là c’est plus de 200 en plus…
@nidal a annoncé le lancement du site @OrientXXI la semaine dernière :
▻http://seenthis.net/messages/180554
C’est donc là :
►http://orientxxi.info
Comme c’est bibi qui l’a fait, un petit coup de #shameless_autopromo pour détailler quelques aspects techniques…
– C’est évidemment du #SPIP_3, #HTML5 et #responsive. Donc évidemment, je travaille avec mon plugin « CSS imbriqués » :
►http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-css-imbriques-pre
– L’un des aspects que j’ai pu beaucoup plus travailler que d’habitude, c’est la typographie des textes des articles. C’est drôlement gros (de base sur mon ordinateur : 19px), et c’est rend la lecture à l’écran vraiment fluide. Sur tablette, je trouve que c’est carrément épatant.
– Pour l’occasion, j’ai aussi pas mal bossé les tags meta destinés à informer les réseaux sociaux du contenu de la page. Les petits pavés qui apparaissent sur Twitter et Facebook quand quelqu’un partage un article sont vraiment attrayants.
– Le pavé « Lire aussi » dans la colonne de droite des articles est totalement automatique : c’est un calcul basé sur les mots-clés utilisés par chaque article. Ça marche pas mal pour créer de la navigation transversale.
– Je fais passer mon plugin « Détecter langue » (conçu initialement pour Seenthis) sur les textes, cette fois paragraphe par paragraphe, pour pouvoir publier des articles multilingues (avec de l’arabe, ça devient indispensable) :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/plugins_seenthis/detecter_langue
On peut le voir à l’œuvre par exemple sur ce poème traduit de Mahmoud Darwich :
►http://orientxxi.info/magazine/mahmoud-darwich-for-ever-le-discours-du-dictateur-0328
– Sur ce site, je force le retour chariot façon SPIP 2 (il faut sauter deux lignes) ; parce que plus ça va (depuis que je suis sur SPIP 3), plus je constate que laisser le retour à la ligne simple sur un site éditorial conduit rapidement à la catastrophe.
– Pour le pavé de Une (fond bleu) de la page d’accueil, une sélection manuelle grâce avec mon vieux plugin « Sélection d’articles » :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/selection_d_articles
– Comme expliqué par @nidal, le site intègre directement le flux Seenthis du groupe (via l’importation de RSS de SPIP) :
►http://orientxxi.info/au-fil-du-web
– J’utilise mon vieux plugin « Lire aussi » pour pouvoir créer des « Dossiers » :
►http://orientxxi.info/magazine/oslo-20-ans-apres,0345
(donc, bien comprendre : sur ce site le pavé « Lire aussi » du site public se construit automatiquement ; le plugin « Lire aussi » n’est pas utilisé pour créer ce pavé, mais pour constituer des « Dossiers » éditoriaux)
– Dans la rubrique « Cartographie », j’affiche des cartes géantes zoomables de @reka, l’interface fonctionnant avec #leaflet.js. Ajout : un véritable mode plein écran (#fullscreen_api du HTML5, avec alternative en position:fixed pour les navigateurs qui ne l’acceptent pas). En revanche, par rapport à @fil, je n’ai pas de script coté serveur pour fabriquer les briques graphiques des cartes, j’utilise directement Zoomify et j’installe les briques sur le serveur.
Le détail sympa : la carte est consultable seule dans sa page :
▻http://orientxxi.info/cartographie/egypte-bassin-du-nil
mais il y a de plus un modèle SPIP pour intégrer la carte dans le texte d’un article :
►http://orientxxi.info/magazine/tensions-autour-du-nil,0297
(et ça c’est carrément cool).
C’est classe d’avoir ce genre d’explications sur des sites. Deux-trois retours :
– +1 pour la question des retours lignes. C’était un peu embêtant avant, fallait s’y faire, mais maintenant sur Spip 3 c’est pire :p
– Pour les réseaux sociaux, le rendu est top, cf ▻https://twitter.com/OrientXXI/status/387504642331901952
– moi aussi je veux un bouton de partage vers Seenthis. C’est le bouton pour navigateur intégré sur le site, c’est ça ?
– au niveau typo, je pense qu’on gagne vraiment à remplacer les dernières Arial qui traînent.
– sur la page d’accueil, les trois colonnes ça fait très classe, mais le web ne sait toujours pas justifier du coup ça éclate le texte chez moi. A l’inverse, j’aime beaucoup la page magazine non justifiée.
– le corps 19 pour le texte, ça fonctionne bien, mais par contre le corps 26 pour le chapô, c’est un peu trop gros pour moi.
– j’ai pas compris l’intérêt du plugin « lire aussi » pour constituer des dossiers éditoriaux par rapport à un groupe de mots-clés spécifique.
– le mode plein écran pour les cartes est vraiment impressionnant, et les cartes dans les articles sont bien aussi. Ca pourrait bien intéresser sous-surveillance. Manque peut-être juste un bouton pour revenir à une taille optimale dans le bloc quand t’as déjà zoomé.
Merci en tout cas pour les infos, joli boulot !
#spip_blog
Sur « Lire aussi » et les « Dossiers »…
– D’abord, tu dois savoir que je suis persuadé (de manière quasiment religieuse désormais) qu’il ne faut jamais utiliser les mots-clés pour gérer des statuts éditoriaux. La seule utilisation viable des mots-clés, c’est la thématisation.
À chaque fois que j’ai vu (ou qu’on m’a obligé à le faire) des mots-clés utilisés pour gérer la page de Une, la colonne de droite, les trucs qu’on fait apparaître plus gros… ça rend le site vraiment bordélique à gérer.
– Donc ici, oui, il y a des mots-clés, mais ce sont bien des mots-clés thématiques. Par exemple, les Accords d’Oslo :
▻http://orientxxi.info/accords-d-oslo
Mais il faut bien voir que les mots-clés, ce sont des thèmes « ouverts » : à tout moment quelqu’un peut ajouter tel mot-clés à tel nouvel article, et donc la page « Accords d’Oslo » évoluera selon ces ajouts.
– Ce dont j’avais besoin ici, c’est de créer des « Dossiers » figés. Un objet éditorial regroupant plusieurs articles, qu’on n’enrichira plus par la suite.
Donc pas des mots-clés. Sinon ça veut dire qu’on a un groupe de mots-clés dédiés à cela, et qu’on fabrique un mot-clé à usage unique pour chaque « Dossier ». Pour moi, c’est clairement un détournement des mots-clés, destinés à faire des manipulations éditoriales.
Ça n’est pas le pire détournement possible, mais c’est à éviter.
– Le plugin « Lire aussi » est explicitement destiné à gérer ces regroupements, au lieu de créer des « mots-clés à usage unique ». Il est construit sur le même principe que les liens de traduction : il y a un article de référence, et les articles qui lui sont liés. Dans chaque article concerné, je vois la liste des articles liés, et quel est l’article de référence.
Du coup, ici, c’est facile : l’article de référence est considéré comme la porte d’entrée du dossier (ce ne serait pas facile à faire avec des mots-clés), et je pourrais aussi décider de ne plus intégrer les articles secondaires du dossier dans la navigation, ou de manière différente (je n’ai pas fait ça, mais c’est une possibilité).
Coucou,
Plein de belles choses. Mignon la petite image « dossier » qui se colle sur le logo de l’article d’accueil du dossier.
Quelques bugs ou remarques :
– le logo est un peu pixélisé sur les autres pages que la page d’accueil (ff20/linux)
– quand y’a pas de logo pour les articles dans les listes de « Lire aussi », ça fait un peu bizarre. ici par ex : ▻http://orientxxi.info/magazine/barack-obama-et-hassan-rohani,0381
– c’est peut-être voulu, mais chez moi les thèmes ne sont pas stylés. Ça me fait penser aux sites de journaux américains, qui raffolent de liens bleus ►http://www.nytimes.com
Une petite question. Comment sont fabriquées les url ? Le numéro à la fin, c’est pour google (j’ai un vague souvenir que google demande un nombre unique pour chaque page dans l’url) ?
C’est super de présenter ses réalisations de sites et leur entrailles. Ça devrait être une rubrique sur le blog de SPIP ou sur spip-contrib, pour inviter tout le monde à le faire.
Pour les URL, c’est un bout de code trouvé je crois sur Contrib, mais je ne sais plus où. Dans mes_options.php :
▻https://gist.github.com/anonymous/6899027
Ah si, retrouvé, c’est là :
▻http://contrib.spip.net/Optimiser-les-URLS-pour-google-actus
Hop @arno pour info il existe un plugin leaflet.fullscreen fait par un ty gars sympa sur github ;)
▻https://github.com/brunob/leaflet.fullscreen
Et depuis hier, il gère aussi du pseudo fullscreen pour les vieux navs.
@arno oui c’est un truc « rapide » qui marche, mais du coup :
1) je trouve que ça enlaidie les URLs pour une histoire uniquement technique (en plus même pas pour un standard reconnu mais juste pour faire plaisir à une entreprise particulière)
2) si jamais le site a des objets éditoriaux différents (article, rubrique, événement, patate) : deux objets peuvent avoir le même nombre donc il n’est pas unique (ce qui normalement fait partie de la demande).
Lorsqu’on ne veut pas modifier ses URLs, la solution est de fournir à Google un sitemap particulier, propre à #Google-News. Il y a quelques obligations à respecter, et possiblement des infos en plus quand on les a sous la main (voir la doc).
▻https://support.google.com/news/publisher/answer/74288?hl=fr
J’ai fait ça dans un mini-plugin tout con qui ajoute ça au robot.txt de SPIP et qui fournit un « sitemap_news » basique qui fonctionne. On peut le surcharger ensuite chez soi si on a plus d’infos à y mettre.
▻http://zone.spip.org/trac/spip-zone/browser/_plugins_/sitemap_news/trunk
@arno : merci, je vais tester. Sur Rebellyon, les articles en manchette ont le mot-clé « manchette », ceux en « une », le mot-clé « une ». Et quand on a beaucoup d’articles sur un même sujet, on crée un mot-clé de dossier. Tout cela fonctionne, mais c’est pas forcément aisé à transmettre comme fonctionnement.
Je pense qu’il faut créer ou améliorer un plugin pour ces besoins, car il y a de plus en plus de sites où il y n’y a pas que les « articles » comme objets éditoriaux.
Par exemple pour le besoin de « mettre en une » (que ce soit pour l’accueil complet ou l’accueil d’une rubrique), si on veut mettre en avant des articles et des événements dans la même liste, c’est galère. Ou même si on a un site composé presque que d’événements (un site culturel par ex) et que c’est ça le contenu éditorial principal du site.
Bref, ce type de plugin devrait être agnostique au niveau des objets à manipuler.
Pour gérer les Unes, j’utilise généralement deux solutions :
– la plus efficace et agréable à gérer, ce que je fais sur ce site-là, c’est le plugin « Sélection d’articles » ; c’est rapide, ça marche bien…
– quand le site est plus compliqué, et que justement il faut pouvoir mettre en page d’accueil un peu tout et n’importe quoi (des articles, des rubriques, des « événements », des calendriers, des formulaires d’inscription à des trucs…), je fais dans le lourd : une « rubrique technique » (dont je fais généralement commencer le nom par un dièse), avec éventuellement des sous-rubriques (si la page d’accueil est très structurée), et là-dedans on installe des articles virtuels (des articles qui pointent directement vers une autre URL). C’est encore avec ça que j’ai les résultats les plus puissants et le plus de liberté, même si c’est assez contraignant.
IIPImage
▻http://iipimage.sourceforge.net
IIPImage is an advanced high-performance feature-rich image server system for web-based streamed viewing and zooming of ultra high-resolution images. It is designed to be fast and bandwidth-efficient with low processor and memory requirements.
pas évident à installer (@b_b a réussi, moi j’ai échoué), mais ça a l’air de marcher ; comme dit ce chercheur :
I am using IIP server to serve up over 12,000 #gigapixel images of cancer pathology ▻http://cancer.digitalslidearchive.net
serveur à appeler avec un client flash, ou encore avec #leaflet.js
Super fluide le lecteur en flash là. Quand on zoome super vite ou qu’on se déplace, on ne voit pas du tout se charger les tuiles, c’est super fluide, on dirait que c’est quasiment immédiatement net.
Ce qui était, à l’inverse, le défaut de la double leaflet
▻http://seenthis.net/messages/150044
Ouais avec leaflet je me retrouve souvent avec du gris qui bloque (ou au moins long), ou du super flou qui met longtemps à changer.
D’après mes souvenirs sur les tests que j’avais effectué sur IIPImage oui (mais c’est plus très frais tout ça ^^). J’ai des prises de notes sur les différentes solutions qu’on envisageait par ici :
►http://labo.eliaz.fr/spip.php?article106
Du coup il faut juste faire un choix entre utiliser IIPImage ou écrire une truc équivalent basé sur une des solutions testées.
La #carte NOAA “green” de la végétation mondiale, présentée avec #leaflet.js
▻http://fil.rezo.net/green
Découvrez la planète verte... | Slate.fr
►http://www.slate.fr/life/74325/decouvrez-la-planete-verte
Cette #cartographie a été réalisée grâce au capteur VIIRS installé à bord du #satellite Suomi NPP de la #Nasa et de la #NOAA (National oceanic and atmospheric administration). L’instrument permet de distinguer de subtiles nuances de vert. Ainsi, le satellite a pu enregistrer les variations de la couverture de #végétation au cours des saisons successives de l’année, entre avril 2012 et avril 2013. Plus le vert est sombre, plus la #végétation est épaisse.
Exploring the MapBox stack : #MBTiles, #TileJSON, #UTFGrids and #Wax
▻http://blog.thematicmapping.org/2012/11/exploring-mapbox-stack-mbtiles-tilejson.html
we’re going to publish this map to the web using various MapBox inventions. (...) Within the MBTiles file, the map legend, the tooltip template and information about map extent, zoom levels etc. is stored in a format named TileJSON. This is also an open specification, providing a consistent way of describing a map, making it easier to load and display a map the way it’s meant to be seen.
#mbtiles-php, un serveur PHP de #mbtiles (aux capacités limitées à la lecture seulement) :
▻https://github.com/infostreams/mbtiles-php
ah et puis un autre serveur du même type #tileserver-php :
▻https://github.com/klokantech/tileserver-php
#cartographie #leaflet.js
Deux autres solutions du même type :
This is a PHP implementation of the MBTiles specification. It is slightly more advanced than PHP-MBTiles-Server because it implements basic caching, improved error handling and adds support for meta data in the MBTiles database.
With this software you can set up a tile server using the MBTiles-file exported from TileMill on a server running Apache with PHP.
▻https://github.com/John5/TilePhlox
An extremely simple PHP script for extracting images from an MBTiles sqlite database file. Examples for use with Leaflet and OpenLayers included.
Le jardin des délices
►http://www.madmeg.org/delizie
Le jardin des délices est un dessin entièrement exécuté à la plume à l’encre de Chine qui mesure trois mètres de large sur un mètre soixante-cinq de hauteur. Dix ans de travail ont été nécessaires à son achèvement. Source : Relevé sur le Net...
oui #leaflet.js anéfé mais s’extasier sur le script qui l’affiche ce serait comme se pâmer devant l’encadrement…
« coin coin » (c’est @fil qui s’est amusé là ?)
Je veux la même chose avec des centaines de cartes et de graphiques tous plus oufs les uns que les autres
J’y ai déjà passé un paquets de minutes, et j’ai dû faire 4cm²... 10 ans pour le faire, 10 ans pour le regarder ! :)
C’est génial.
ne ratez pas l’opus suivant « Feast of fools » (la Cène) :
▻http://seenthis.net/messages/212601
Atlas des sites pollués aux PCB
▻http://www.robindesbois.org/PCB/PCB_hors_serie/ATLAS_PCB.html
7ème édition de l’atlas des sites terrestres et aquatiques pollués par les PCB. Pour pallier aux éventuelles insuffisances et aux fragmentations des sources officielles, les archives de Robin des Bois et les alertes transmises par des lecteurs des atlas antérieurs sont aussi mobilisées.
550 sites pollués recensés…
#pcb #france #pollution #empoisonnement #contamination
Voilà vraiment une base de données #SIG très importante — et très mal présentée. Elle mériterait de passer en bidule interactif avec #leaflet.js
#chimie #santé #pollution_industrielle #pcb #cancer #cartographie
Un #SPIP + #GIS et hop c’est plié. En plus ça permettrait à d’autres sites d’afficher ces infos sous forme de carte en embed, avec un #kml, etc.
Sinon il y a un squelette « pas mal » pour #SPIP qui se nomme #geodiversite et qui permet de monter plutôt facilement un atlas géolocalisé :)
►https://github.com/brunob/geodiversite
Qui a dit #shameless_autopromo ? ^^
Bien d’accord avec toi @fil, malheureusement on dirait qu’avec le site de la Criirad, ils font un concours des infos les plus mal présentées et partagées. En flash, pfff, quel gachis
#Narration_cartographique : une balade avec Sherlock Holmes
Hack Your Maps ▻http://alistapart.com/article/hack-your-maps
we’re going to walk through a single #design process and implement a modern-day web map. By walking this path, I hope to begin making maps part of the collective conversation we have as designers.
et le résultat (avec tout le code nécessaire [à refaire sous #leaflet.js]) :
Héhé, je viens de le lire, par contre ils n’utilisent pas leaflet.js mais mapbox.js (leur api maison qui ressemble à leaflet).
Georeferencement de mes deplacements en ASEAN sur google map
▻http://www.panoramio.com/map/?user=6450080#lt=11.982373&ln=106.719004&z=14&k=1&a=1&tab=4&pl=all
(technique reprise ici par mapbox pour faire de la pub
▻http://www.mapbox.com/blog/aws-road-trip )
Poverty maps of London (Charles Booth Online Archive)
▻http://booth.lse.ac.uk/static/a/4.html
The Maps Descriptive of London Poverty are perhaps the most distinctive product of Charles Booth’s Inquiry into Life and Labour in London (1886-1903). An early example of social cartography, each street is coloured to indicate the income and social class of its inhabitants.
#cartographie-radicale #pauvreté #londres #royaume-uni #santé
J’ai un peu galéré pour comprendre le système de coordonnées, mais voici la carte en #leaflet.js (coucou @b_b) :
▻http://fil.rezo.net/poverty
Il y a une sorte de génie ici. Très impressionné as well... Et quel potentiel !
Joli @fil ! Belle démonstration de la richesse créative qu’apportent les outils #opensource. ►http://leafletjs.com
je n’avais pas vu mais l’appli officielle affiche deux autres calques :
– des données récentes sur la pauvreté : « Index of Multiple Deprivation 2010 »
– toutes les pages des carnets de Booth, géolocalisées
le système de gestion de l’opacité permet la transition/comparaison historique du passé au présent