export de votre story map réalisé avec odyssey.js et personnalisation par l'utilisateur

http://cartodb.github.io/odyssey.js/documentation/#how-it-works

exporter / partager votre narrative story map 

Vous avez 5 possibilités pour exporter / partager votre narrative story map réalisée avec odyssey.js.

pour les dummies, avec les 3 fonctions intégrées (en bas à droite du sandbox):

• une fichier html (compressé en .zip) pour une utilisation en local ou à mettre sur un serveur, 
• avec l'hébergement http://bl.ocks.org via une iframe (pour votre blog par exemple) ou un lien URL

pour les plus expérimentés 

• avec gitHub et ses services d'hébergement, Là vous pouvez même conserver le sandbox pour une utilisation en mode partagé.
• votre fichier .md (markdown) en le copiant/collant. En outre ce fichier est présent à la fin de votre fichier .html... Vous pouvez ensuite le transcoder avec divers outils de conversion.

personnaliser votre story map pour une lecture adaptée

Outre le fait que l'on peut choisir sa basemap comme expliquer dans mon exemple (voir les post de ce blog avec les tags map, GPS).

On peut adapter la lecture.

Faite ouvrir un fichier dans votre navigateur et ouvrez votre .html de votre sauvegarde ou votre bl.ocks.

Faite un clic droit (ou crtl clic sur mac) sur le texte.

vous avez 

dans firefox "examiner l'élément"

dans chrome "inspecter".

Sélectionner "slides_container" (le nom de la structure qui contient votre texte et photos).

Dans firefox:

Dans chrome:

Dans safari, c'est pareil...

Vous voyez à droite "width" c'est la largeur de cette fenêtre.

Par défaut elle est à 320pixels.

Changer à 580px par exemple (vous voyez les changements en temps réel).

Vous pouvez aussi changer le left à 10pix...

Et top à 60pix sinon vous serez gêné par les boutons zoom de la carte.

Fermer cette fenêtre.

En outre il faut prévoir de mettre le centrage de la carte plus à droite lors de l'écriture de votre story map...

Hélas cette présentation/design est un fichier CSS stocké sur odyssey.js GitHub. Il faudra donc le faire à chaque fois!

Pour éviter de le faire à la main. Il faut télécharger le CSS d'odyssey.js et le modifier et l'insérer dans votre .html à la place de

http://cartodb.github.io/odyssey.js/sandbox/css/slides.css

dans ce fichier CSS: 

#slides_container{display:none;position:absolute;top:40px;left:40px;width:320px;

changer 320px à la valeur de 580px par exemple.

sauvegarder votre nouvel .html qui contient le CSS (en mode local).

---