DataCite (INIST, CERN). Metadata Schema. JAST, DOI. both human- and machine-readable metadata. embed the metadata using JSON and a script tag. The latter approach is easier to implement, as all metadata are in a single place, and the JSON can be embedded dynamically via a scrip.

Introduction

DataCite Metadata Schema

Documentation for the Publication and Citation of Research Data

https://www.datacite.org/

Members of the Metadata Working Group

Madeleine de Smaele, TU Delft (co‐chair of working group) Joan Starr,
California Digital Library (co‐chair of working group) Jan Ashton, British Library
Amy Barton, Purdue University Library
Tina Bradford, NRC/CISTI (New)
Anne Ciolek‐Figiel, Inist‐CNRS
Stefanie Dietiker, ETH Zurich (New)
Jannean Elliott, DOE/OSTI
Berrit Genat, TIB
Karoline Harzenetter, GESIS
Barbara Hirschmann, ETH Zurich (Departing)
Stefan Jakobsson, SND (New)
Jean‐Yves Mailloux, NRC/CISTI (Departing)
Lars Holm Nielsen, CERN (Departing)
Mohamed Yahia, Inist‐CNRS
Frauke Ziedorn, TIB (On leave, Metadata Supervisor)

resources

mainly a schema
https://schema.datacite.org/
The DataCite Metadata Schema is a list of core metadata properties chosen for an accurate and consistent identification of a resource for citation and retrieval purposes, along with recommended use instructions.

DataCite Metadata Working Group. (2016). DataCite Metadata Schema for the Publication and Citation of Research Data. Version 4.0. DataCite e.V. http://doi.org/10.5438/0013

many examples

https://schema.datacite.org/meta/kernel-4.0/

DOI

DataCite does not allocate DOIs directly; this activity is undertaken by many of DataCite’s members, who act as DOI allocating agents. DataCite members enable data owners, stewards, or archives to assign persistent identifiers to research data. The list below provides details and contact information for all of DataCite’s members.
INIST CNRS, CERN, CDL...
https://www.datacite.org/members.html

source code

The DataCite assets server.
https://github.com/datacite/segugio
This repository holds the official metadata schemas from DataCite as required by the DataCite Metadata Store.
https://github.com/datacite/schema

Uses the middleman static site generator
https://middlemanapp.com/

Using Schema.org for DOI Registration

a "post" of the DataCite blog : https://doi.org/10.5438/0000-00CC

https://blog.datacite.org/schema-org-register-dois/

Three weeks ago we started assigning DOIs to every post on this blog "https://blog.datacite.or" (Fenner, 2016c). The process we implemented uses a new command line utility and integrates well with our the publishing workflow, with (almost) no extra effort compared to how we published blog posts before.

Given that DataCite is a DOI registration agency, we obviously are careful about following best practices for assigning DOIs. DataCite focusses on DOIs for research data, but many of the general principles can also apply to blog posts. And we have learned a few things already.

Using schema.org metadata embedded in landing pages

Our initial implementation collected the metadata required for DOI registration in a way that is specific to a particular type of blogging software, so-called static site generators. While popular, this leaves out a large number of blogs, for example every blog hosted by Wordpress, by far the most popular blogging platform. We have now relaunched our blog to collect metadata differently, generic enough to work for any blog, but also well aligned with best practices for DOIs.

Our practice is that every DOI should resolve to a landing page, and that landing page should provide both human- and machine-readable metadata. 

Machine-readable metadata can be embedded into web pages in a number of ways. Traditionally this was done using HTML meta tags, more recent approaches to embedding metadata in HTML include microdata, microformats and RDFa. An alternative approach is to embed the metadata using JSON and a  script tag The latter approach is easier to implement, as all metadata are in a single place, and the JSON can be embedded dynamically via a script.

As for the vocabulary, the DataCite Metadata Schema has never been widely used for metadata embedded in web pages. Dublin Core Metadata (“Dublin Core Metadata Element Set, Version 1.1,” 2012) are often used for metadata in HTML meta tags. Schema.org is an initiative started in 2011 with many of the same goals as Dublin Core, namely to create, maintain, and promote schemas for structured data on the Internet.

(...)

DOI minting workflow

Publishing a blog post with embedded schema.org metadata, which is then used to mint a DOI and register DOI metadata, changes the DOI minting workflow for this blog. Although the publication workflow of a blog is much simpler than for peer-reviewed content, there are still three distinct phases:

• post is drafted by author
• post is shared for feedback with staff (and possibly others)
• post is published

Blog posts in JATS XML

Blog posts are web pages and the landing page for the DOI also contains the fulltext of the post. But there are good reasons to make a blog post also available in downloadable form, most importantly to facilitate reuse, and for archiving. Journal Article Tag Suite (JATS) is an XML standard for tagging journal articles, used by the PubMed Central full-text archive of biomedical literature and by an increasing number of scholarly publishers.

JATS is an appropriate format for the blog posts of this blog, and starting this week all of our posts are also available in JATS XML format. You can see the download URL in the schema.org markup (the JATS for this post is here), we will add a more visible link to all posts once some minor tagging issues are resolved. We will also start registering the download URL with the DataCite MDS as media, making the JATS XML available to DOI content negotiation, and thus direct download. This should facilitate reuse by others, e.g. aggregation of content from multiple sources and display of content in different formats. This blog uses the Creative Commons Attribution license, allowing the copying, redistribution and remixing of the material in any medium or format for any purpose.

liste des alternatives aux services google; Partage de PDF/ODP ODF sans google drive. CMS à l'Xml sans aucune base de données car les données sont stockées dans des fichiers xml.

Une initiative du réseau Framasoft en faveur d’un internet libre, décentralisé, éthique et solidaire
https://degooglisons-internet.org/alternatives

À moins de s’auto-héberger, le cloud ou les web services sont toujours dans la structure dépendance de l’ordinateur/serveurs de quelqu’un d’autre. Il est donc important de savoir à qui nous faisons confiance et ce que font les logiciels de nos données et de nos comportements.

Les services de base

Navigateur:
Firefox
Tor Browser

Réduction d’URL Lstu

Moteur recherche
https://github.com/asciimoo/searx
 Searx,
DuckDuckGo

Rédaction collaborative
http://etherpad.org/

Tableur collaboratif
https://ethercalc.org/

Slide
http://strut.io/
Store your presentations on Strut.io or use Strut in offline mode.
bof

Dessin vectoriel
https://github.com/SVG-Edit/svgedit
https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html

Stockage de documents
https://nextcloud.com/
https://github.com/nextcloud
Through Nextcloud you also access, sync and share your existing data on that FTP drive at the office, dropbox or a NAS you have at home.

free providers:
https://nextcloud.com/providers/
zaclis: 1Go free
unixcorn:
http://linuxfr.org/news/unixcorn-trois-mois-plus-tard-evolutions-remises-en-questions-et-stabilisation

partage photo/video
Wikimedia Commons
https://commons.wikimedia.org/wiki/Accueil?uselang=fr

Forge (no GitHub)
https://about.gitlab.com/
https://about.gitlab.com/features/

Partage de code
autre que Codepen ou jsFiddle
http://jsbin.com/?html,output
http://dabblet.com/

alternatives google BOOKS/amazon

wikisource
https://fr.wikisource.org/wiki/Wikisource:Accueil
et autre wiki

BicBucStriim
surtout pour du "in-house":
BicBucStriim streams books, digital books. It fills a gap in the functionality of current NAS devices that provide access to music, videos and photos -- but not books. BicBucStriim fills this gap and provides web-based access to your e-book collection.
BicBucStriim is a simple PHP application that runs in the Apache/PHP environment provided by the NAS. It assumes that you manage your e-book collection with Calibre. The application reads the Calibre data and publishes it in HTML form. To access the e-book catalog you simply point your ebook reader to your NAS, select one of your e-books and download it.

http://calibre-ebook.com/
https://github.com/rvolz/BicBucStriim

Calibre OPDS (and HTML) PHP Server : web-based light alternative to Calibre content server / Calibre2OPDS to serve ebooks (epub, mobi, pdf, ...)
In my opinion Calibre is a marvelous tool but is too big and has too much dependencies to be used for its content server.
PHP server
https://github.com/seblucas/cops

https://calibre2opds.com/

Partage de PDF/ODP ODF

à part scribd
https://www.scribd.com/
à éviter (pas licence CCC)...

http://webodf.org/
WebODF.js is a JavaScript library that makes it easy to add Open Document Format (ODF) support to your website and to your mobil.
https://github.com/kogmbh/WebODF

used by
http://webodf.org/apps/
ownCloud Documents
Tiki Docs

Add-on for Firefox
WebODF was also used to create a Viewer for OpenDocument Format office files for Mozilla Firefox. It can be downloaded and installed from Mozilla's Add-on website.

ViewerJS
ViewerJS is an Open Source document viewer that enables embedding ODF or PDF files directly in webpages, without any external server dependencies. It uses PDF.js for files in PDF and WebODF for files in the OpenDocument format. Get ViewerJS from the ViewerJS website.
http://viewerjs.org/getit/

The heavy lifting in ViewerJS is done by these awesome projects:
PDF.js (by Mozilla)
PDF.js is a library created by Andreas Gal and others at Mozilla Labs. It is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format (PDF) renderer without native code assistance. PDF.js is community-driven and supported by Mozilla Labs. Its goal is to create a general-purpose, web standards-based platform for parsing and rendering PDFs, and eventually release a PDF reader extension powered by PDF.js.
http://mozilla.github.io/pdf.js/
https://github.com/mozilla/pdf.js  (4000forks janv 2017)

WebODF gallery/directory
Using the web toolkit Ext.JS, a demo site was built. Here one can browser a set of documents and look at them in the browser.
http://webodf.org/demo/demobrowser/

CMS blog (style blogger) sans base de données

pluxml

Blog ou CMS à l'Xml

• Simple et léger
• Sans base de données
• Collaboratif
• Thèmes
• Plugins

http://www.pluxml.org/
https://github.com/PluXml

• Serveur Apache, Nginx ou Lighttpd
• PHP 5 ou supérieur
• Librairie GD pour la gestion des images
• Fonction php d'envoi d'email autorisée (non obligatoire)

Aucune base de données
Toutes les données sont stockées dans des fichiers xml.
Une simple copie de fichiers permet de déplacer votre site sur une clé usb, ce qui le rend complètement portable.
Outil collaboratif; 5 profils avec des niveaux d'autorisations différents.
Pour la famille, les amis, une entreprise, PluXml trouvera sa place.

Thèmes
PluXml s'habille suivant vos envies pour que votre site soit à votre image.

Plugins
Etendez votre PluXml sans aucune ligne de programmation en ajoutant facilement des nouvelles fonctionnalités.

publier du code HTML dans blogger blogspot ou votre blog. Exemple code: toggle hide show with smallest js and a button fixed position

table of contents external blogger

Just a javascript code generates table of contents (ToC) for blogger and internal links with all headings.
This v3 supports the compose/HTML mode toggle
with a ToC composed by "external/pseudo-internal" links.

http://jsdo.it/ex-ample.blogspot/yI7A

DON'T change the title of your post or page after the generation of ToC and internal links.

If you add new headings and you want to add a link in ToC, you have to add directly in HTML, both a link in your headings and in your ToC.

This post is just an example of the output.

Table of Contents

• Bookmark 1
• Bookmark B
• Bookmark c
• Bookmark D
• Bookmark last

Create anchor links or bookmark links for fast navigation.
Blabla...

Bookmark 1

Bookmark B

Bookmark c

aaa

Bookmark D

Bookmark last

Html headings tag, anchor tag # with id, internal link and blogger blogspot

Create anchor links or bookmark links for fast navigation
Anchor links allow readers to jump to a specific part of the page. If your article is really long or text-heavy, consider creating a table of contents or index using anchor links for quick navigation.

When I write longer articles here on xxx or my blogspot(s), I like to add a Table of Contents to the top to help my reader’s navigate to different sections of the post.

If you prefer to manually insert the Table of Contents into you posts rather than a plugin or javascript snippet adding it to every post/page, i will describe how to do.

Rem: Because SEO and headings are linked, the choice of the name of headings an its id are important.
"A la main" (manually insert)

1. first create your headings with an id (i=1 to 6):
     <h i id="synop"> Synopsis </h i>
2. and the link <a href="#synop">Synopsis</a> in your table of contents (or index)

Create anchor links or bookmark links for fast navigation
Anchor links allow readers to jump to a specific part of the page. If your article is really long or text-heavy, consider creating a table of contents or index using anchor links for quick navigation.

When I write longer articles here on xxx or my blogspot(s), I like to add a Table of Contents to the top to help my reader’s navigate to different sections of the post.

If you prefer to manually insert the Table of Contents into you posts rather than a plugin or javascript snippet adding it to every post/page, i will describe how to do.

Rem: Because SEO and headings are linked, the choice of the name of headings an its id are important.

"A la main" (manually insert)

1. first create your headings with an id (i=1 to 6):
     <h i id="synop"> Synopsis </h i>
2. and the link <a href="#synop">Synopsis</a> in your table of contents (or index)

Many tags in HTML, including the Heading tags (H1,H2,H3…H6) were developed not to assist formatting but to provide information on the structural hierarchy of a document. In order to facilitate accessibility as well as standards, it is best to use the tags for the intended purpose in the information hierarchy rather than for pure formatting purposes. In many cases, this will make your document easier to edit as well.

examples

At the beginning of your post or your html, write (it's an internal link to "synop"):
<a href="#synop">Synopsis</a>
When you clic on this "internal link" you will go to "synop".

In your text you have this headings (i=1 to 6):
<h i><a id="synop"></a>Synopsis</h i>
<a id="synop"></a> is an anchor tag.

remember that a classic HTML links is also defined with the <a> tag but with "href":
<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

Bookmark with the id attribute.

It's shorter than the anchor tag:
<h i id="synop"> Synopsis </h i>
Then, add a link to the bookmark ("Synop"), from within the same page:
<a href="#synop">Synopsis</a>
Or, add a link to the bookmark ("Synop"), from another page (of your domain).
<a href="other_page.html#synop">Visit the Useful Synop Section</a>
Ref: http://www.w3schools.com/html/html_links.asp

The anchor tag

<a id="WhateverNameYouWant">The landing place of the link</a>
and for example at the beginning of your post

See the classic example for the "page content"
http://accessibility.psu.edu/headingshtml/

https://www.w3.org/TR/html4/struct/links.html#h-12.2.3
http://www.w3schools.com/tags/tag_a.asp
Fragment identifiers:
https://www.w3.org/TR/html4/intro/intro.html#fragment-uri
for dummies:
http://stackoverflow.com/questions/8192742/what-is-the-meaning-of-in-url-and-how-can-i-use-that

blogspot:
http://theedifier.com/blogging-blogger/classical-template-modify.php
http://blogknowhow.blogspot.fr/2010/11/add-internal-links-within-blogger-posts.html

Automatically create heading anchor

a javascript
http://renaysha.me/anchorific-js/
I always create single-page project documentations with anchored headings and anchored-based navigations to jump from one section to another. However, I feel that it is repetitive to create the anchored headings and anchored-based navigations manually. I want to focus on writing the documentation and let jQuery generates the anchored headings and nested navigations for me. Thus, Anchorific.js was born.
https://github.com/renettarenula/anchorific.js

some links:
https://www.itsupportguides.com/tech-tips-tricks/jquery-how-to-automatically-create-heading-anchors-for-links/
http://jeroensormani.com/automatically-add-ids-to-your-headings/
http://wordpress.stackexchange.com/questions/94663/dynamically-add-id-to-heading-tags

Other aspects of the structure of an HTML

There's some ambiguity and debate around the proper use of the heading tags, specifically with the use of sectioning elements, like <article> and <section>.

section element 

According to the most recent public draft of the W3C HTML 5.1 specification 4.3.3 The section element:

The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.  

Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section's nesting level.

https://www.w3.org/TR/html51/semantics.html#the-section-element

article element

According to the specification 4.3.2 The article element:

The <article> element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Authors are encouraged to use the <article> element instead of the <section> element when it would make sense to syndicate the contents of the element.

http://www.w3schools.com/html/html_layout.asp
http://accessiblehtmlheadings.com/

Blogspot

Sitemap:

http://helplogger.blogspot.fr/2013/12/add-sitemap-table-of-contents-to-blogger.html
a widget:
https://github.com/garafu/blogger.toc

Blogger / Blogspot Image jpeg gif URL Structure for Resizing. Example: animated map marker

original image GIF 89a: 400x400px.
If you download without option, you will get for the href:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aQY4_qVYeLw8P9MDQ5lPG-s3MReU6qlNn-tc-J1h8HJYwqGfWwdGyfKHAr6zmsrN3tRj_dRxHBLuM3Z3ij-niKzanWzZzyBWkHM_512Kx10XiNQhat_UbIiqtxKC4DxnfQ-gc1uUv2xD/s1600/eatsmarker.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aQY4_qVYeLw8P9MDQ5lPG-s3MReU6qlNn-tc-J1h8HJYwqGfWwdGyfKHAr6zmsrN3tRj_dRxHBLuM3Z3ij-niKzanWzZzyBWkHM_512Kx10XiNQhat_UbIiqtxKC4DxnfQ-gc1uUv2xD/s100-c/eatsmarker.gif

Original Image

After you upload image to your post, and choose to display it as original, your image URL will be like: /s1600/name
The text /s1600/ in the URL will tell with Blogger / Blogspot image hosting that you want the original size version of the image.

However, in some special cases, Blogger will only show a small version at s1600 for very long / big images. In that case, you must increase the size to equal your image height to access the real original version, example: s5000 if your image height is 5000 pixels.

If you want to load image which is NOT LARGER than 200px in width (height is auto), you will replace s1600 to w200

Similar with the max width parameter, if you want to load the image which is NOT LARGER than 30px in height, you will replace s1600 to h30.

If you want to load a version with specific for both max width and max height, example:NOT LARGER than 200px  in width and NOT LARGER than 30px in height, you will replace s1600 to w200-h30

If you want to load image with EXACTLY width and height, example 300px in width and 100px in height, you must replace s1600 to w300-h100-c. The -c text at the end is “crop”.

If you want to crop image as SQUARE, example, loading size 300px in both width and height, you can replace s1600 to s300-c

If you want to provide a download link for image, you can add -d at the end of size.

If you want to provide a XML object for image, you can add -g at the end of size.

Ref: http://sneeit.com/2015/09/using-blogger-blogspot-image-url-structure-for-cropping-and-resizing.html

collection of sites to test your Codes Online

start coding on line with many web services

Full workspace

https://c9.io/
Cloud9 combines a powerful online code editor with a full Ubuntu workspace in the cloud
Workspaces are powered by Docker Ubuntu containers that give you full freedom over your environment, including sudo rights. Do a git push, compile SASS, see server output, and Run apps easily with the built-in Terminal and Runners.
Each new project is stored in a subfolder where you can generate real physical files. HTML, CSS, JS, PHP, anything you need to code will be saved locally in your account. Then you can later export these files as a whole project and download them to your computer.

Many langages

http://codepad.org/
codepad is an online compiler/interpreter, and a simple collaboration tool.
Paste your code below, and codepad will run it and give you a short URL
C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Plain Text, Python, Ruby, Scheme, Tcl,

http://ideone.com/
Ideone is an online compiler and debugging tool which allows you to compile source code and execute it online in more than 60 programming languages.

javascript/html/CSS

http://jsbin.com/
Gist support: import and export
"add library" menu: you can select between any number of JS libraries – jQuery, JQuery UI...

https://jsfiddle.net/
jsFiddle also supports the inclusion of libraries such as jQuery. You can include additional external resources to JS/CSS files into each testing document. Incredibly their app even supports XHR Ajax where you can pass data back-and-forth between the server and client browser window.
https://jsfiddle.net/about

http://jsdo.it/
you must login but you have access to many codes and you can fork.
Here you can share JavaScript, HTML5 and CSS3 code snippets. Their app is not as open as the others, requiring a much more formal registration process. This requires connecting into any other social network such as Facebook, Twitter, Google, or Github. Then you select a username and off we go to code.
Many of the apps appear to have Japanese writing.
What I love about their interface is how you can actually upload files you’ve already created and store them into a project.

https://codepen.io/pen/

http://www.jslint.com/
JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool.

CSS

http://cssdesk.com/
you can fork.

For Google API 

 Google code sandbox "explorer".
https://developers.google.com/apis-explorer/?csw=1#p/

si vous voulez inclure un post sur votre blogspot:
https://developers.google.com/apis-explorer/?csw=1#p/blogger/v3/blogger.posts.insert

gérer votre google drive:
https://developers.google.com/apis-explorer/?csw=1#p/drive/v3/
https://developers.google.com/apis-explorer/?csw=1#p/sheets/v4/

Il faut aussi voir:
https://developers.google.com/
https://developers.google.com/maps/documentation/javascript/

Ref:

http://www.hongkiat.com/blog/tools-to-coding-online/

Try the blogger APIs explorer

Just a sample with the structured editor
https://developers.google.com/apis-explorer/?csw=1#p/blogger/v3/blogger.posts.insert

google+ photos profile, et goggle photos, et google drive, et ex picasa, et albumArchive et blogspot blogger

Du fait de la diversité des outils google pour y mettre des images, difficile de s'y retrouver...

your google+ profile, et aussi image valable pour tous les produits google

https://plus.google.com/u/0/photos/113300494682639557816/albums/profile
(c'est le dossier profile)
if you select
https://plus.google.com/u/0/photos/113300494682639557816/albums
you will get :
https://photos.google.com/u/0/?+info qui disparait pour
https://photos.google.com/u/0/
qui est votre homepage google photos.

albumarchive

Si vous regardez votre albumarchive
https://get.google.com/albumarchive/113300494682639557816

Profile photos you’ve chosen for any Google services you use, including Google+, Gmail, Hangouts & others. Changes you make here apply across all of Google, including when you communicate or share content.

dans "Auto Backup"
on a les photos/video des anciens "picasa album", des dossiers synchronisés avec google photos ou téléchargé avec photos
Photos and videos backed up from your devices and browser.

dans Photos from drive

on a les Photos & videos sauvées dans et avec Google Drive. 

Les Changements réalisés ici sont appliqués dans drive.

Bref utiliser les albums Google archivés:

Vous pouvez consulter, supprimer ou télécharger les photos que vous avez importées dans d'autres produits Google, dont :

• Picasa Albums Web
• Google+
• Blogger
• Hangouts
• Google Photos
• Google Drive

Blogspot/blogger

vos images de blog, visible dans drive (en ordre temporelle)  et album archive (apparaissent alors dans un dossier et par blog.
On a des options comme:
Show your Google Drive photos & videos in your album archive

google drive et google photos

https://photos.google.com/u/0/

permet de faire des albums, de la recherche poussée, du stockage synchronisé (avec l'appli)

mais sur le fond comme fichier et stockage final

avec google drive, peu de différence :

Google album archive : photos/videos from Picasa Web Albums, Google+, Blogger, Hangouts Google, Photos, Google Drive.

Check the album archive:
https://get.google.com/albumarchive
See, delete, or download photos you've uploaded to other Google products, including:

• Picasa Web Albums
• Google+
• Blogger
• Hangouts
• Google Photos
• Google Drive

optimiser son blog (i.e. blogger) avec les en-têtes (headings, headlines,HTML tags h1, h2, h3, h4.

Il est important d'utiliser les systèmes des paragraphes pour un blog.
http://www.w3schools.com/tags/tag_hn.asp
les HTML <h1> to <h6> Tags.

Ils sont importants pour de très nombreuses raisons:
http://www.w3schools.com/html/html_headings.asp

Dans blogspot, Blogger (post page) utilise cette heading distribution:

<h1>Blog Title</h1> et Post-Title

<h2>Sidebar Gadget title</h2>
C'est bizarre mais c'est comme cela! Par contre la talle de la police de caractère est plus petite pour les "Sidebar Gadget title" (voir ci-contre).

Ref: http://www.bloggerplugins.org/2013/04/optimize-h1-h2-h3-heading-tags-in-blogger.html

http://www.mybloggertricks.com/2015/06/Optimize-Headline-H1-H2-Tags-In-Blogger.html

Les <h1> à <h6> tags sont aussi utilisés pour définir les  HTML en-tête "headings".
Par défaut ils apparaissent en gras avec une taille décroissante si on utilise seulement le style suivant:
<h3> mon texte </h3> et aucun changement dans son "template".

Comment modifier l'apparence des titres des articles : changer la police, la taille, la couleur, ajouter une image en fond:
https://ladybirdr.blogspot.fr/2014/11/personnaliser-et-ajouter-une-image-aux.html
http://www.leblogger.com/2011/11/entetes-h2-h3-h4-article-referencement.html

En changeant le template (ajout de 7 lignes, voir ci-dessous)
on obtient (h1 est pour le titre du post, voir ci-dessus)

h2

h3

h4

Dans l'éditeur de blogger, il n'est pas wysiwyg, les en-têtes apparaissent en gras et de taille différente.

Pour installer cette mise en forme des en-têtes:

1/ aller dans template, le sauvegarder puis un clic sur edit HTML:

Un clic sur *** pour dérouler la mise en forme de votre blogspot (c'est le bloc CSS) : 

 Aller à la fin de ce bloc et mettre les "7 lignes" just'avant ]]><b:skin>

Les "7 lignes" sont les suivantes:

h2 { font-size: 22px; font-weight: normal; border-style: solid; border-left: 7px solid red;border-width: 0 0 0px 7px; background-color: #fcfcfc; padding: 3px; margin-top: 10px; }
h2.date-header { font-size: 15px; font-weight: normal;border-style: hidden;background-color:#ffefdb;}
h2.title { font-size: 15px; font-weight: normal;border-style: hidden;background-color:#ffffff;}
h3 { font-size: 20px; font-weight: normal; border-style: solid; border-color: #ccdef0; border-width: 0 0 2px 5px; padding: 3px; margin-top: 10px; }
h3.post-title { background-color: #eedfcc; font-size: 22px; font-weight: normal; border-style: solid; border-color: #555500; border-width: 0 0 2px 10px; padding: 5px; margin-top: 10px; }
h4 { font-size: 18px; font-weight: normal; border-style: solid; border-color: #eedfcc; border-width: 0 0 1px 3px; padding: 3px; margin-top:10px; margin-bottom:5px; }
h5 { font-size: 15px; border-style: solid; border-color: #555500; border-width: 0 0 2px 0px; padding-left: 3px; }

Remarques:

la balise <hr> signifie un changement thématique majeur dans la page (barre horizontale).

Utilisation de scoped (The scoped attribute is new in HTML5):
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_style_scoped

Jusqu'au tag h4, on peut changer leur style avec class, dir, id, lang, style, title:
http://www.websitesbymark.co.uk/posts/the-h4-html-tag/
 id and class attributes sont liés au CSS styling stocké dans le <head> de la webpage ou dans un fichier externe.

police google font et blogspot blogger. Astuces pour les images.

Google Fonts

Google Fonts makes product and web pages run faster by safely caching fonts without compromising users’ privacy or security. Our cross-site caching is designed so that you only need to load a font once, with any website, and we'll use that same cached font on any other website that uses Google Fonts.
Using the code generated by Google Fonts, our servers will automatically send the smallest possible file to every user based on the technologies that their browser supports. For example, we use WOFF 2.0 compression when available. This makes the web faster for all users—particularly in areas where bandwidth and connectivity are an issue. Now everyone can enjoy the same quality and design integrity in their products and web pages, no matter where they are in the world.

Collaborate with Open Source

All the fonts in our catalog are free and open source, making beautiful type accessible to anyone for any project. This means you can share favorites and collaborate easily with friends and colleagues. Google Fonts takes care of all the licensing and hosting, ensuring that the latest and greatest version of any font is available to everyone.
https://fonts.google.com/
https://github.com/google/fonts

You can download all Google Fonts in a simple ZIP snapshot (over 250Mb) from https://github.com/google/fonts/archive/master.zip

http://karlajaramillo.github.io/2015/03/16/make-beautiful-websites-using-google-fonts/

For blogger blogspot:

https://ladybirdr.blogspot.fr/2016/09/utiliser-des-polices-google-fonts.html#more
http://blogavecblogger.blogspot.fr/2014/02/images-et-photos-astuces.html

The Ultimate Guide to Markdown and how to publish on your blog.

Markdown is a plain text formatting syntax for writers. It allows you to quickly write structured content for the web, and have it seamlessly converted to clean, structured HTML.

Back in 2004, Apple pundit John Gruber came up with the idea after becoming frustrated by writing long, laborious HTML tags to properly format his content. He devised a simple writing system which would make web based documents both easier to write, and easier to read in their raw state.


https://blog.ghost.org/markdown/

use a browser extension (or web app) for your blogs

StackEdit 

https://stackedit.io/editor
https://chrome.google.com/webstore/detail/stackedit/iiooodelglhkcpgbajoejffhijaclcdg
the Markdown editor powered by PageDown

- Synchronize with Google Drive or Dropbox
- Publish directly on GitHub, Gist, Blogger, WordPress, Tumblr or any SSH server
- Google Drive multiple sign in

Cons: bad function for inserting an image.

> NOTE:
> Documents are stored in the browser's local storage, which means they are not shared between different browsers/computers. Furthermore, clearing your browser's data may delete all your local documents.
> Full access to Dropbox or Google Drive is required to be able to import any document in StackEdit. Imported documents are downloaded in your browser and are not transmitted to a server.


StackEdit is a free, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.

### StackEdit can:

 - Manage multiple Markdown documents online or offline
 - Export your documents in Markdown, HTML or PDF and format it using a template
 - Synchronize your Markdown documents in the Cloud
 - Edit existing Markdown documents from Google Drive, Dropbox and your local hard drive
 - Post your Markdown document on Blogger/Blogspot, WordPress, Tumblr
 - Publish your Markdown document on GitHub, Gist, Google Drive, Dropbox or any SSH server
 - Share a link to a Markdown document that renders it in a nice viewer
 - Show statistics about your document
 - Convert HTML to Markdown

### Features:

 - Real-time HTML preview with Scroll Link feature to bind editor and preview scrollbars
 - Markdown Extra/GitHub Flavored Markdown support and Prettify/Highlight.js syntax highlighting
 - LaTeX mathematical expressions using MathJax
 - WYSIWYG control buttons
 - Configurable layout
 - Theming support with different themes available
 - A la carte extensions
 - Offline editing
 - Online synchronization using Google Drive (multi-accounts) and Dropbox
 - One click publish on Blogger, Dropbox, Gist, GitHub, Google Drive, SSH server, Tumblr, WordPress

test of several blog editors (markdown) on mac OSX (an iOS) or with a browser (blogger.js) for google blogspot blogger. Extreme markup editor for blogger: blogger.js.(Hatena markup)

Browser-based interfaces are  clumsy, and require you to be connected to the internet just to use them. Browsers are perfect for reading web content, but not so great for creating it.

The blogspot's editor is very old...

Mars Edit (shareware 30-day trial)

https://red-sweater.com/marsedit/

Nice: autodetect you blog.
Quickly scan your iPhoto Photos, Lightroom, or Flickr libraries, and insert images into your blog post with the click of a button.
Build a template to match your blog, then let MarsEdit's live preview show you how your posts will look before you publish them. Use Markdown? MarsEdit will preview that, too.
Combine the power of MarsEdit with your favorite editor. Integrates cleanly with BBEdit, TextMate, WriteRoom, TextWrangler, or any editor that supports the ODBEditor suite.

Problem:
"insert image" ---> src="https://lh3.googleusercontent.com/..."
It's different from the blogspot editor---> "https://XX.XX.blogspot.com/...."
Then flipcard does not work.

👻

Blogo

https://getblogo.com/

Built-in Image Editor: Image editing and handling made easy

● Crop, resize and set aspect ratio of your images
● Adjust brightness, contrast and color temperature
● Easy Instagram-esque filters such as B&W, Sepia, and Vintage
● Drag and drop placement of images with live preview
● Set your "Featured Image” with 1-click
● Add alt text, caption, and tooltip information

A fully featured editor: Writing was never so enjoyable

● Markdown or Rich Text mode
● Elegant formatting bar for headings, lists, quotes, links and more
● Writing goals (characters, words, reading time) with live update
● Inline HTML. Perfect for tables, forms and HTML embeds
● Code block, supporting all major code languages

Same problem for inserting image: "googleusercontent.com"


-------------

You can use Extreme Markup Editor for Blogger™ on both Google Chrome and Firefox.
In fact near of Hatena Markup (blog platform : http://www.hatena.com/)

http://extreme-markup.blogspot.fr/p/syntax-and-features.html

open source:
https://github.com/harai/blogger-hatena-markup

blogger.js is a 815 lines of javascript.

Features
* Paragraphs
* Headings
* Hierarchical Lists
* Definition Lists
* Tables
* Blockquotes
* Pre-formatted Texts
* Source Code
* Footnotes
* Raw HTML Tags
* Links
* Images

* LaTeX

how to add an gif to google blogger blogspot

   
Go to  GIF host site like giphy.
http://giphy.com/gifs/nikefootball-3oD3YooLLYg0AfOPdK
and copy the embed code in you post (HTML mode).

Sure it does not work with flipcard option...

the best tool for publishing a photo on a blog, blogger blogspot: google drawings. ScreenShots and blogging on google blogger blogspot (5 best tools).

If you are regularly blogging, you will encounter a lot of images and sometimes, you want to change these images.

As many blog platform (CMS) the blog editor with the usual features, including WYSIWYG editing, image "editing" is not sufficient.

The best solution: you will need a screenshot application and the use of google drawings.

Use a screnshot app (with automatic copy in your clipboard in jpg or png. jpg is better).
Go to you drive.
Select Google drive and drawing.
Google drawing is a very good web service.
Name your drawing if you want (up right, "Untitled drawing");
Paste
You can rotate, crop...
Explore menu: you can change color brigthness...
And also you can change the mask...

Menu File->Publish to the web
select small size.
copy the link.

go to you blogger and "add image" and copy URL.
All it takes to create a totally-customized .png or .jpeg image with a transparent background:

Use a background color or find free textures (insert image->select search) or http://www.texturepalace.com/) to use for the background. Go to Insert > Image to upload the texture file. Resize the texture to fit the background. You can also set a background color (Right Click > Background).

If you will change your file, it will be dynamic.
The drawing is inserted as an image, but it continues to be editable (only in google drawings) after you add it to the document. Google uses SVG in Firefox, Opera, Chrome and other browsers that support it and VML in Internet Explorer, so you don't need third-party plug-ins. 

You have a lot of sharing possibilities (change the file or comment...) ->revision history...
It is a real-time collaborative application.
All your drawings are automatically saved and stored in Google Drive. Access them wherever you go, from any device.
You can also use chrome extension:
https://chrome.google.com/webstore/detail/google-drawings/mkaakpdehdafacodkgkpghoibnmamcme
--> Google drawings works offline.

file .gdraw
http://www.file-extensions.org/google-drawings-file-extensions
A .gdraw file contains web link to a drawing created and saved in Google Drive. These files do not contain the actual drawing just encoded URL link.
These files are typically found in your Google Drive folder that is synchronized with the service. Opening it results in launching Google Drive in your Web browser so you can edit the drawing.
Google drawing can import and export jpeg, png and SVG files.

While more sophisticated apps exist, this one is very durable, fast, doesn't lag, saves, shares, reloads clean. One user wanted ability to add user-shaped arrows etc. Free fonts abound online, a good assortment for charting.

But it does not work with the function "blogspot.fr/view/flipcard"!!!!

In order to select the size and to use flipcard option,
use your screenshot apps when you have finished your drawings
(You loose the dynamic view).

-------------

Desktop Blog Editors 

8 Desktop Blog Editors To Make Your Blogging Faster
https://www.blogmarketingacademy.com/desktop-blog-editors/
------------

Screenshots

Screenshot apps

• Save images in multiple formats
• Take screenshots of specific resolution
• Annotations (Arrows, Highlight, Tags, Blue, Text)
• Easy Share to cloud services
• Fast Loading and Lightweight
• Full-Screen Capture (For Long Web Pages)
• Screen Recording, excellent high-quality tools to capture screenshots
• Support for shortcut keys
• Basic Image Editing Features like cropping, rotating, etc.

mac:

InstantShot! (freeware)

It creates an icon in the menu bar. Clicking on the icon, a small menu will appear. Select the capture type from the menu (whole screen, a portion of screen, timed screenshot or multiple captures) or, if you want to change the save format, select the desired one from the submenus and then... capture!
http://projects.digitalwaters.net/instantshot.html

Very fast but no editor's functions and no contextual name of the file.

Skitch (freeware)

https://evernote.com/skitch/
You must drag to save a file.
Editor is OK. Link with evernote (free evernote cloud site (only 60MB)).
Mobile App is also available (Android/iOS)

Windows:

picpick

http://ngwin.com/picpick
editor: OK

Open source:
https://getsharex.com/features/

Linux

http://shutter-project.org/

Browser

Nimbus Screenshot (Chrome and Firefox Plugin)

Image Editing Features are pretty basic.

Awesome Screenshot

Capture, Annotate and Share

http://www.awesomescreenshot.com/

and web Free Photo Editing Tools like PicMonkey, BeFunky,


PS:
https://fonts.google.com/

Embedding Instagram posts is an easy way to add Instagram photos and videos to the stories

Embedding Instagram posts is an easy way to add Instagram photos and videos to the stories you want to tell on articles or websites. You can embed your own content as well as photos and videos from public profiles. As always, people own their Instagram content, and embedded posts give the proper attribution by showing the username and linking back to the original content on Instagram.

Embedded posts are responsive and automatically resize if the embedding container becomes smaller. This means that the content will look great both on desktop and mobile websites.


https://www.instagram.com/developer/embedding/


PS:
WordPress makes it even easier to embed Instagram content on your blog. All you have to do is to copy the Instagram URL of the media page and paste it on its own line in the WordPress editor. For example:

https://www.instagram.com/p/bNd86MSFv6/

You can also use the Wordpress shortcode which allows you to remove the caption or manually specify the width. Just paste this in your blog post as an example:

[instagram url=https://www.instagram.com/p/bNd86MSFv6/ hidecaption=true width=320]

You can check out the WordPress documentation for more information on how to use and customize embedded posts: http://support.wordpress.com/instagram/instagram-images/

https://wordpress.org/plugins/flickr-album-gallery/

cartoDB odyssey.js storymap.js and many examples of "story map" (pour de l'histoire, des voyages, des ballades, des excursions, road trips).

cartodb and odyssey.js 

very good open source (2014):
javascript "cartodb": odyssey.js

When you're ready to go and build the narrative/navigation part of your application. We're going to use Odyssey.js for this. Odyssey.js is actually a JavaScript library that you can use on your own web server, but CartoDB has implemented a Sandbox that allows non-programmers to deploy a story map with very little coding and without any web server infrastructure, at all. Odyssey.js uses a very simple text matkup language called Markdown.
http://cartodb.github.io/odyssey.js/

Three possibilities:
http://cartodb.github.io/odyssey.js/documentation/#the-odyssey-sandbox
sandbox: http://cartodb.github.io/odyssey.js/sandbox/sandbox.html

Templates control the overall structure and layout of your story. They define the position of your map and story elements and define the method by which your story will progress. We have developed three templates to get you started.

Slide template

The slide template acts like a Keynote or PowerPoint presentation. Your story is broken down into different states or slides, so you can go forward or backward just by clicking the arrows on the screen buttons or by pressing the forward/back arrows on your keyboard. This is perfect for stories that don’t have too much text and you want to highlight the map as the principal element.

See a live example (in the sandbox)

Scroll template

The scroll template moves based on when the viewer scrolls the page. As you scroll up or down, the story moves forward or backward. This template works really well with stories that have a lot of editorial content such as images and texts, and where the map adds more context to the story.

See a live example (in the sandbox)

Torque template

Use this template if your data is animated. This template adds triggers to your animated map so when reaching a certain point on the timeline your contextual information changes. This is perfect for adding extra information to animated stories. But it is more complex....

-------
best tools specially for students:
THE ODYSSEY SANDBOX
The Odyssey Sandbox allows you to link map changes and movements to different elements in a web document through the use of Markdown. We have included a small number of webpage templates to help you quickly create your stories.
Sandbox:

1. Start a new history
2. Publish your story
3. Save your story

http://cartodb.github.io/odyssey.js/documentation/#advanced-use-of-the-sandbox

See the syntax of markdown : http://daringfireball.net/projects/markdown/syntax

Sharing your story map

Once you have created all the slides you are interested in putting into your Story Map, you are ready to share your work with the world. The Odyssey.js Sandbox allows you to do this in three ways:

1/Sharing with an URL or Embed code

Odyssey.js can export your Story Map directly to a site called http://bl.ocks.org/, which is just a platform for sharing and rendering JavaSript code, or give you an IFRAME code snippet to paste into your blog, or other website.


2/You can also download the code for your Story Map and host it on your own Web Server

3/ others

See this exemple:
http://mapninja.github.io/CartoDB_Odyssey_Tutorial_for_Story_Maps/

Training:
Each student was responsible for researching a location, writing the text and assembling the materials, writing the Markdown Code, etc to support a series of online map narratives about San Francisco
https://cartodb.github.io/training/special/stanford-odyssey.html

fund:
http://www.knightfoundation.org/articles/testable-moment-for-media-innovation
http://blog.vizzuality.com/
http://www.vizzuality.com/projects/global-forest-watch


questions
http://gis.stackexchange.com/search?q=odyssey.js
http://gis.stackexchange.com/questions/124043/using-odyssey-js-with-cartodb-js

storymap.js

open source (2014-now) but no sandbox
https://github.com/NUKnightLab/StoryMapJS

StoryMapJS is a simple tool to help you tell stories with maps. If you're not a programmer, you don't need to spend much time on the GitHub page—instead, go StoryMapJS:
https://storymap.knightlab.com/

choose Gigapixel if:
To preface the instructions, the gigapixel feature of StoryMap is not as easy to use as most of our other tools because it requires hosting a folder of images on a web server. If you are unable to serve your images and make them accessible through the web, you won't be able to use the gigapixel feature of StoryMap.
You'll start with a large image for your gigapixel project. It doesn't actually need to be a gigapixel image, but images you take with your phone won't be big enough to be interesting. You need to know the image width and height in pixels as part of starting a gigapixel StoryMap.
Once you have a large image, export it as tiles. Windows and Mac users can use the Zoomify Express app. Or, if you have Photoshop, you can use its "Zoomify" export feature. (show me how) More technically-minded users can use command-line tools such as ZoomifyImage or VIPS.
This is when you'll need to be able to put your image folder onto a web server. You'll use the base url of the image folder for your exported tiles to make your gigapixel StoryMap.
After you have your image tiles up on a server, go to make a new StoryMap and choose the "gigapixel" button. (). Give your new project a name and enter the base url of your image tile folder on the web. Then enter the image width and height mentioned above, and you're ready to tell your gigapixel story. 

some users:
http://ursilaa.tumblr.com/post/95926012537/understanding-storymap-js-101
medium
http://s3.amazonaws.com/uploads.knightlab.com/storymapjs/bf3baae30cab35dca6e1e3d208a86c1f/karpatyrocks/index.html (texte is not available)

If you want information on creating JSON with your own code and embedding it, see the "Advanced" documentation on the StoryMap website:
https://storymap.knightlab.com/advanced/

Some users/demo(s) : many story maps

storymap.js

https://storymap.knightlab.com/examples/aryas-journey/
https://storymap.knightlab.com/examples/bosch-garden/

odyssey.js

the best (pop-up and custom with cartDB import data):
1/
http://bl.ocks.org/anonymous/raw/409cb9de4c713e082dee/#0
http://mapninja.github.io/CartoDB_Odyssey_Tutorial_for_Story_Maps/
https://github.com/mapninja
2/
with popup text click and hover (and custom)
http://web.stanford.edu/~maples/maps/odyssey/odyssey.html


http://www.burdgis.com/cumberShaw/
http://www.burdgis.com/blog/archive/map-stories/

http://www.nydailynews.com/new-york/nyc-crime/bloody-weekend-19-injured-bullets-cops-arrest-2-article-1.1846552
-->http://multimedia.nydailynews.com/css/maps/48hours/index3.html?123456789000
http://multimedia.nydailynews.com/css/maps/shootings-2/index.html

The Voyage of the HMS Beagle:
http://bl.ocks.org/anonymous/raw/7d67c4ef3348192da613/

http://seeread.info/experiments/santiago/ (classic)


1/history of the wall (Berlin)
http://bl.ocks.org/namessanti/e7432a85159fca12978e
from this template:
http://bl.ocks.org/anonymous/f888598531665f34f864

2/ evolution of some lakes:
http://bl.ocks.org/auremoser/raw/d2e883314470768a07f8/
https://gist.github.com/auremoser/c644c9be4879498a429f

an introduction to odyssey.js:
https://gist.github.com/auremoser/c644c9be4879498a429f


3/special:
http://bl.ocks.org/anonymous/raw/2f1e9a5a74ceeb88e977/

4/classic (Français):
 https://gist.github.com/jonathanlurie/0b8785bc83b56693c089
-----

http://blockbuilder.org/search#text=odyssey.js

---
https://gist.github.com/lokal-profil/8427ce6a1acda3c34f15
Running odyssey.js with the md as an external file

----
https://carto.com/blog/odyssey-js-examples-in-the-wild/

http://lifewatch.inbo.be/blog/posts/tracking-eric.html
(bird, BIRD TRACKING, open data)
many mapping resources
https://gist.github.com/auremoser/da1b8fe8de23fe6365923b1a4d8f7b7d

---
http://karlajaramillo.github.io/2014/07/14/the-story-of-james-rodriguez-/

For this project I chose CartoDB, a cloud platform that lets users build map applications in a very easy way. Their new open-source tool named Odyssey.js let me create “The story of James Rodriguez”. You can use the Odyssey sandbox or get the code straight-away. I felt it would be better to download the files and start to write my code using Aptana Studio (web application IDE).
http://www.aptana.com/
At this stage I had made changes to the code, so the next step would be find a place to keep my code safe and create a webpage to host my project. What to use? An easy question for me, since I have been meaning to take advantage of the huge benefits of Git for a long time, the open-source version control system (VCS). This would be the perfect time to do so.

I started from scratch, so the first thing I did was complete the TryGit offer by Code School and GitHub, an introductory free course makes up of 25 challenges to review the basic concepts of Git.
https://www.codeschool.com/courses/try-git

I joined GitHub but also after grasping some Git fundamentals from Pro Git book, a practical tutorial with examples and explanations by Scott Chacon.
https://git-scm.com/book/en/v2

I installed Git on Mac, set it up in my Terminal application with the git config command and fortunately I could create my first repository on GitHub.
I would say the most difficult part for me was move and commit my repository files to a webpage, but thanks to the GitHub tutorial I could generate a proper project site.
https://pages.github.com/

----project clhenrick

http://clhenrick.github.io/BushwickCommunityMap/
https://github.com/clhenrick/BushwickCommunityMap

http://clhenrick.github.io/data/web-scraping/node/js/web-mapping/flickr-api/cartodb/2015/05/29/scraping-photo-metadata/

While each photo was taken with geo location tracking enabled, there was some poor management of the photographs collected by various teams. Granted the photos were logically grouped by census tract in folders on Google Drive, yet no unified naming convention was used to name the photographs.
For example, a sensible naming convention could have been something like:

<building-number>-<street>-<census-tract>.jpg

The way in which the Urban Ecologies students then mapped the photos after they were collected was using Google Earth to produce a KML file of the photos’ locations. The problem with this approach is that for some reason unknown to me, the KML they produced only has ~700 features while there are a total of 1008 photos. I didn’t learn this until after the Urban Ecologies group shared then survey data, KML, and photos with me.

To make working with the photos easier I first uploaded all 1008 photos to Flickr which genorously gives all users a whole terabyte of free storage. I then used the Flickr API to grab the URLs and title for each uploaded photo and store them in a JSON file. For some reason I wasn’t able to see the geo data for the photos using this method which definitely would have helped save some time.

My original solution was to merge all the layers in the KML file, then convert it to a GeoJSON format and then join it to the Flickr JSON data using the joiner module for Node JS. Yet I soon realized this was not a good strategy as the KML file was missing locations for ~300 photos.

Thankfully one last solution occured to me; I could scrape the Exif metadata from the photos which includes latitude and longitude coordinates (only if geolocation was enabled from the camera).

The question was, how to do this?
Node JS to the Rescue
I ended up finding a Node JS library that worked pretty well called Exif. This module allows to retreive the Exif metadata in a JSON format. From here I wrote a script that iterates over the Exif data from all of the photos and outputs a GeoJSON file which I was then able to join to the Flickr JSON data. I ended up doing the join in CartoDB because they make it so easy to do.

The end result is that I successfully geocoded 1006 out of 1008 of the photos so that they can now be added to the Bushwick Community Map.

--------

gist.github.com and bl.ocks.org

For example, if your Gist URL is:

https://gist.github.com/mbostock/1353700

Replace “gist.github.com” with “bl.ocks.org” in the URL to view it:

https://bl.ocks.org/mbostock/1353700

The main source for your example is in index.html. This file can contain relative links to other files in your Gist, such as images, scripts or stylesheets. And of course you can use absolute links, such as CDN-hosted D3, jQuery or Leaflet. To explain your example, add a README.md written in Markdown. (You can omit the index.html if you just want to write, too.)

Customize the appearance of your Block by adding a .block YAML configuration. The following options are supported:

license - a supported SPDX license code
height - the iframe height in pixels; defaults to 500
scrolling - yes if the iframe should scroll; defaults to no
border - no if the iframe should not have a border; defaults to yes
To add a thumbnail preview, add a 230×120 thumbnail.png to your Gist. For social media, you can also add a larger 960×500 preview.png or preview.jpg.


Ref:
http://bl.ocks.org/-/about

---------
PS:
"histoire et géo"
réalisé en 2012, un blog avec mapping sur l'histoire de la révolte en Jamaique de 1760-1761 par Charles Warren (Professor of History and Professor of African and African-American Studies), y compris un mode diaporama (que du texte et des trajets des révoltés):
http://revolt.axismaps.com/map/