- pour commencer il faut aller à https://storymap.knightlab.com/ et un clic sur "make a storymap"
- puis se connecter avec son compte google. Pour travailler avec ce service de knightlab il faut un compte Google car vos données de projet sont stockées dans Google Drive.
- Définir le nom du projet, et le nom peut être changé pendant le fonctionnement en renommant simplement la diapositive de titre. C'est la première diapo. Prévoir une introduction.
Le premier écran est toujours une diapositive/map "aperçu".
- puis faire les autres diapositives qui elles ont un zoom.
Le projet fini peut être placé sur un domaine distinct ou à l'aide de l'iframe sur le site de vos médias. Si vous utilisez le lien généré automatiquement à StoryMap, il peut y avoir des problèmes avec le partage de la carte dans les réseaux sociaux...
Limitations
On ne peut télécharger qu'une image ou video (ou son HTML5) à la fois (ou une URL ).
La taille est limitée i.e. 4608 × 2592, 4.2 Mo 11.9Mpixels c'est trop!!!!
Une fois téléchargée, cela donne:
//uploads.knightlab.com/storymapjs/3472bc73c4ef281745439d7b614214f5/voyage-dans-le-velay/_images/yssingeaux.jpg
Il ne gère pas les photos géo-taggées!!!!!!
Il faut mettre à la main des coordonnées GPS (ou le lieu)!!!!
On peut choisir son marqueur mais pas d'effet quand on clic dessus.
Par rapport à odyssey.js, on ne peut que agir diapo par diapo.
voir
http://stephane-mottin.blogspot.fr/2016/10/cartodb-odysseyjs-et-quelques.html
Quelques questions
Comment puis-je avoir une carte sans les lignes entre les points?
Pour désactiver les lignes de connexion sur les cartes, utilisez l'option «Traiter comme image» (par opposition à la valeur par défaut «Traiter comme cartographie»).
Comment puis-je utiliser une carte personnalisée?
Choisissez "options" de la partie supérieure gauche de la fenêtre StoryMap, puis dans le menu "Type de carte" choisir le type que vous voulez.
Sélectionnez "MapBox" pour entrer l'ID de votre carte MapBox et son token:
https://www.mapbox.com/developers/
Sélectionnez "custom" pour entrer l'URL d'un serveur de tuile. Si le serveur prend en charge plusieurs sous-domaines, saisissez-les comme une seule chaîne dans le champ Subdomain (par exemple, les sous-domaines "a", "b" et "c" doivent être entrés comme "abc":
La structure est donc très simple d'une slide.
{
type: "overview", // optional; if present must be set to "overview"
location: { // required for all slides except "overview" slide
lat: decimal, // latitude of point on map
lon: decimal // longitude of point on map
},
text: { // optional if media present
headline: string,
text: string // may contain HTML markup
},
media: { // optional if text present
url: string, // url for featured media
caption: string, // optional; brief explanation of media content
credit: string // optional; creator of media content
}
}
Il faut mettre de l'HTML à la main car l'éditeur est trop simpliste. Mais là aussi les copier/colelr d'HTML sont nettoyés!!!
les tag h1-h4, les bullets ou num listes, les polices sont gardées mais les couleurs...
Timeline
the basic process
You can create a simple timeline in a few short minutes using our Google spreadsheet template, and this quick guide explaining the basic process. Experts can use their JSON skills to create custom installations, while keeping TimelineJS3's core look and functionality (see below timelineJS).
It's based on google drive spreadsheet i.e.
For an example of a completed spreadsheet, see the spreadsheet which powers the example on our home page:
Once you've created a timeline, you can make changes by going back to your Google spreadsheet. Changes you make to the spreadsheet are automatically available to your Timeline—you don't need to repeat the "publish to the web" step (step #2). If you want to make changes to the optional settings, you will need to update your embed code, but if you are only changing content in the spreadsheet, then there's nothing else to do.
TimelineJS's text fields (headline, text, caption, and credit) all accept HTML markup.
The main problem is that we must code in HTML in the google spreadsheet.
In order to use maps, we must also code with an external service where the photos with GPS-geo-tag are put with "beautiful markers".
TimelineJS can pull in media from a variety of sources and has built-in support for Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, major video sites (YouTube, Vimeo, etc.)
If your URL ends in jpg, gif, png or jpeg, it will be used as the source for an image tag. It should also work if there is a query string after the extension, perhaps specifying dynamic width and height values.
Google Maps
Use the URL for the Google Maps page (unless you are using Streetview, which currently requires the embed URL found in the "Share" section). Coordinates, search results, place marks and directions are all honored by Timeline. TimelineJS supports roadmap, hybrid, satellite and terrain Google Maps, as well as directions, places, and Streetview maps.
The columns:
- You have the option to add media to your slides in columns L-O. Under the Media column (L) enter the link (URL) to the media you wish to display. TimelineJS supports multiple media types. In the next column (M), you can credit the media's original source, and in column N you can include a short caption.
- If TimelineJS doesn't support the media type you want on your slide, you can often make do by entering <iframe> markup in the Media column (L) instead of a URL. You can also enter <blockquote> markup in column L.
- Markers for slides that contain media show a small icon representing the type of media used. If you'd like, you can show a thumbnail of the media there, instead. Simply add the URL of the image you'd like to use to column O.
- If you like, you can set the background of the slide to a specific color or an image. To do this, enter a CSS hex color value, CSS named color, or the URL to an image in the Background column (R).
Titles and Eras
The Type column (P) can be used to activate a few more specialized features in Timeline. In most cases, you'll leave it blank.
If you use the word title in this column, then Timeline will use the row as a "title slide," which is shown before all others, and which does not require a date. Title slides do not appear in the markers in the navigation component of the Timeline. You should only have one row with "title" in the Type column.
If you use the word era in this column, then Timeline will use the row to label a span of time in the "axis" area of the timeline navigation component. Each era gets a distinct color, which is not currently configurable. At this time, overlapping eras are not well-supported, but we are investigating design strategies for that use case.
Organizing slides
Timeline automatically orders slides according to their start date, and always puts the title slide first, no matter how the rows in your spreadsheet are ordered. If you need to have two slides with exactly the same start date, then the row which appears first in the spreadsheet will be shown first in the timeline.
Using the Group column (Q), you can organize your slides by groups (formerly known as "tags"). You can put any values you want in the Group column. Events with the same group will be put in the same row or adjacent rows, and TimelineJS will use the text from the Group colum as a label at the left edge of the row(s) containing those events. The group text will also be displayed on each slide. If you like, you can have a mix of slides in groups and slides with a blank value in the Group column.
Publishing your Timeline
Now that you have your spreadsheet set up, you can turn it into a timeline in a couple easy steps.
- Go to the File menu of your Google spreadsheet and select "Publish to the Web." In the window that pops up make sure you are under Link (it should place you there by default), then make sure that "Automatically republish when changes are made" is checked and that "Entire Document" is selected.
- Copy the link.
- Open the TimelineJS site. Paste your copied link into the "Google spreadsheet URL" box. There you are also given some styling options to play around with if you desire.
- Copy the embed code displayed and paste it on your site wherever you'd like it to appear.
You have this choice:
-an iframe (appears like a youtube video)
-share your timeline in a Medium.com post, copy the link below and paste it on a line by itself where you'd like the timeline to appear. The link is like this:
-or with this link.
more with javascript TimelineJS
Most of our users are happy to use the markup created in our simple authoring tool to publish their timeline. However, if you want to substantially customize the visual presentation of your timeline, or integrate it with other parts of your page, you will need to understand some more technical details.
Because there are so many details to the styling, this is not exactly simple, but, if you have some technical capacity, you can override TimelineJS's CSS rules and have complete control over the look of the timeline. For details, see Using the TimelineJS CSS selectors. You will need to be able to instantiate the Timeline in javascript on your own page.
