High Performance Map Interactions using HTML5 Canvas - ChairNerd
▻http://chairnerd.seatgeek.com/high-performance-map-interactions-using-html5-canvas
High Performance Map Interactions using HTML5 Canvas - ChairNerd
▻http://chairnerd.seatgeek.com/high-performance-map-interactions-using-html5-canvas
Une nouvelle webapp à partir d’un de mes dessins rendu possible grâce au talent de Fil.
Merci @Fil
#shameless_autopromo
#leaflet ? :-)
Si ça plante, ça peut être lié au navigateur.
thematic mapping blog: Showing geotagged photos on a #leaflet #map
▻http://blog.thematicmapping.org/2014/08/showing-geotagged-photos-on-leaflet-map.html
I’ve create a new #plugin, Leaflet.Photo, that allows you to add geotagged photos to your map, from any source. The plugin plays well with the great Leaflet.markercluster plugin, showing your photos in clusters. To make the plugin more versatile, it doesn’t deal with AJAX loading or image presentation except the thumbnails on the map. Use your AJAX loader of choice, and simply pass on an array of #photo objects to the plugin.
The photo objects can include the properties you like, but the following are required:
lat: latitude of photo
lng: longitude og photo
thumbnail: url to thumbnail photo
(...)
Photon, Apache-licensed search-as-you-type #geocoder based on #OpenStreetMap:
►http://photon.komoot.de
Pour info il existe un plugin pour #leaflet par ici :
#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.
Revue de presse du 25 Avril | #GeoTribu
▻http://www.geotribu.net/node/720
Vous attendez avec impatience votre revue de presse... Voilà voilà, elle est prête !
#Qgis2 #leaflet gaz de schiste et autre voyage dans le temps !!
export #qgis project to a webmap with qgis2leaf: digital-geography.com : digital-geography.com
▻http://www.digital-geography.com/export-qgis-project-webmap-qgis2leaf
qgis2leaf builds a webmap from all of your vector data in your current qgis project. It converts and saves them automatically in a folder structure as JSONs, then it creates the basic frame like basemap, popup content from the geoJSONs and the presentation of the layers in the map itself. The whole result is a folder structure with an index.html site which holds the webmap.
Non, MapServer, GeoServer, TileCache & co ne sont pas toujours nécessaires
▻http://geotribu.net/node/697
Pré-génération de #tuiles au format #tms ou #xyz avec #gdal2tiles, pour utiliser dans une application cartographique #leaflet ou #openstreetmap.
Que du classique pour les géographes seenthisien·ne·s.
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.
rMaps - Interactive Maps from #R
▻http://rmaps.github.io
rMaps makes it easy to create, customize and share interactive maps from R, with a few lines of code. It supports several javascript based mapping libraries like #leaflet, DataMaps and Crosslet, with many more to be added.
#map
#leaflet-omnivore by @mapbox
▻https://github.com/mapbox/leaflet-omnivore
#Leaflet supports the #GeoJSON format by default. What if you have something else? That’s where omnivore comes in.
var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
.setView([38, -102.0], 5);
omnivore.csv('a.csv').addTo(map);
omnivore.gpx('a.gpx').addTo(map);
omnivore.kml('a.kml').addTo(map);
omnivore.wkt('a.wkt').addTo(map);
omnivore.geojson('a.geojson').addTo(map);
Super :)
@rastapopoulos oui ça utilise la lib togeojson que j’avais déjà repéré il y a quelques temps par ici : ▻http://seenthis.net/messages/126895
Juste pour préciser, togeojson ne prend pas en charge les styles des kmls, on perdrait donc les couleurs et marqueurs persos des kmls si on basculait GIS là dessus...
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
#leaflet/Leaflet.heat
▻https://github.com/Leaflet/Leaflet.heat
A tiny, simple and fast Leaflet #heatmap #plugin. Uses simpleheat under the hood, additionally clustering points into a grid for performance.
#map
Et hop, un exemple d’utilisation :
▻http://tiles.kupaia.fr/article25.html
Basé sur cette source de données : ▻https://www.data.gouv.fr/fr/dataset/lieux-de-tournage-de-films-long-metrage-ods
A une semaine de l’ouverture du Festival international de la bande dessinée d’Angoulême, Lune l’envers de Blutch sort aujourd’hui en librairies. Nous en publiions ce mois-ci en page centrales un extrait remonté ; le voici disponible ici dans une version optimisée pour la consultation en ligne. #leaflet
« Lune l’envers », par Blutch (janvier 2014)
▻http://www.monde-diplomatique.fr/2014/01/BLUTCH/50039
Feast of Fools
bbecquet/Leaflet.MagnifyingGlass
▻https://github.com/bbecquet/Leaflet.MagnifyingGlass
This #plugin allows you to add a “magnifying glass” effect to a #leaflet #map, able to display a portion of the map in a different zoom (and actually display different content).
La deuxième démo est la plus intéressante amha : ▻http://bbecquet.github.io/Leaflet.MagnifyingGlass/examples/example_multi.html
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…
StoryMap JS - Telling stories with maps.
►http://storymap.knightlab.com
StoryMapJS is a free tool to help you tell stories on the web that highlight the locations of a series of events. StoryMapJS is currently in an alpha release, which means that we’re looking for early adopters to try it out and give us some feedback. We’re working on a user-friendly authoring tool, but for now, you will have to be comfortable looking up the geocodes for your locations yourself and creating a JSON data file.
Python + Leaflet = Folium, ou comment créer des cartes interactives simplement. | PortailSIG
▻http://www.portailsig.org/content/python-leaflet-folium-ou-comment-creer-des-cartes-interactives-simplemen
▻https://github.com/wrobstory/folium
On peut du coup combiner avec les autres librairies python (lecture et conversion de données, calculs, graphiques)
Ah mais merci @monolecte j’avais zappé, c’est très bien ça !
@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.
Chers amis,
Ça y est, c’est aujourd’hui !
Après quelques mois de préparation, nous lançons aujourd’hui un nouveau magazine d’information consacré au monde arabe, Orient XXI :
►http://orientxxi.info
Pour en savoir plus sur les intentions du site :
▻http://orientxxi.info/informations/pourquoi-ce-site,0288
Le site est constitué d’articles de fond, constituant la rubrique « Magazine » :
▻http://orientxxi.info/magazine
L’actualité commentée, des recensions d’articles, des référencements documentés… sur « Lu, vu, entendu » :
▻http://orientxxi.info/lu-vu-entendu
Notre flux commun de partages de sources :
►http://orientxxi.info/au-fil-du-web
De magnifiques cartographies interactives, zoomables en plein écran :
▻http://orientxxi.info/cartographie
Et, en travaux permanent, des ressources documentaires en ligne :
▻http://orientxxi.info/ressources-en-ligne
Le site est indépendant et sans publicités, il repose sur le militantisme et la bonne volonté des participants et, bien entendu, sur l’enthousiasme des lecteurs et des contributeurs.
Avec de belles cartes qui sont affichées avec #leaflet !
►http://orientxxi.info/cartographie/palestine-janvier-2000,0346
Il n’y aurait pas un certain @fil qui serait passé par là ? :)