iphone batterie test réseau, symptome et vérification des activités

Trois solutions pour sonder les "entrailles" d'un iphone:

1. avec une application sur l'iphone
2. avec une application sur mac ou windows
3. avec Xcode (application Instruments)

avec une application sur iphone

http://www.tomsguide.com/us/pictures-story/711-best-battery-saving-apps.html#s5

ou juste pour savoir le temps qui reste pour diverses fonctions:

https://itunes.apple.com/fr/app/batterie-hd-gratuite/id331453283?mt=8

avec une application sur mac ou windows

il existe un logiciel nommé iBackupbot (iTunes Backup Manager) qui est une solution très simple pour trouver ces précieuses informations et pour ne rien gâcher il est disponible gratuitement pour Mac et Windows (en version limitée trial).
Démarrez le logiciel puis connectez votre appareil Apple via son câble USB.
http://www.icopybot.com/itunes-backup-manager.htm

bien sur il faut brancher son iphone et faire un backup avec itunes...

avec Xcode 

https://www.podfeet.com/blog/tutorials-5/activity-monitor-for-ios-using-instruments-in-xcode/


Ref:
http://infoidevice.fr/connaitre-etat-batterie-iphone-ipad-nombre-cycle-recharge/

test réseau

deux méthodes:

1/ par le test field intégré à iOS pour

afficher la puissance exacte du signal réseau sur l'iPhone 

avec un nombre et non en 5 points en haut à gauche:

http://www.iphon.fr/post/comment-afficher-la-puissance-exacte-du-signal-reseau-sur-iphone-828786

2/ par une application:

https://itunes.apple.com/us/app/opensignal-speed-test-3g-4g/id598298030?mt=8

how to create an accordion menu with collapsible contents

How to create an accordion menu with collapsible contents 

 to toggle between hiding and showing large amount of content.

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

best free OCR online

Best desktop app (not free)

• Omnipage for instance, costs $150, but is especially good at recognizing different languages. 
• Adobe Acrobat Pro DC costs an eye-watering $400 but has incredible accuracy. 
• ABBYY FineReader costs $150, but is fantastic at converting documents such as magazines and brochures into searchable text.

free online

http://free-online-ocr.com/

The site claims to be able to support PDF, GIF, BMP, JPEG, TIFF, and PNG as input. Outputs can either be DOC, a PDF text document, RTF, and TXT. 

http://www.i2ocr.com/

The tool recognizes over 60 languages, can handle multi-column layouts (by removing the formatting), has no file-size limits, can convert uploaded files and from URLs. And you don’t need to register to use this tool either.
The service works by simply extracting the text from your image, then outputting unformatted text. You can quickly correct any mistakes in the side-by-side view, before copying the text to other programs, or downloading as DOC, PDF, or HTML.

http://www.onlineocr.net/

Online OCR currently supports 46 different languages, and can convert PDF, JPG, BMP, TIFF, and GIF into Word, Excel, or Plain Text format. The site claims “converted documents look exactly like the original — tables, columns and graphics”.
The version you can use without registering allows you to convert up to 15 images per hour (5mb limit). If you sign up for an account, you can purchase more pages on top of this limit, while also being able to convert multi-page documents and ZIP archives, too. 

Absolutely fantastic results from Online OCR. The only downside I see is that there’s no way to download the converted documents as PDFs as the output formats mentioned include DOCX, XLSX, and TXT only.

https://finereaderonline.com/en-us

ABBYY FineReader Online (10-Page Trial)
As mentioned earlier, ABBYY is one of the market leaders in OCR software, costing around $150 for their full, downloadable program. They do offer a 10-page free trial for their online tool, though (registration required). For a $5 subscription, their online tool will allow you to convert 200 pages every month.

Google drive (see below)

Ref:
http://www.makeuseof.com/tag/4-free-online-ocr-tools-put-ultimate-test/

Scan & Manage Your Receipts

Smartphone Scanners

 There are some excellent apps out there for scanning paper to file, regardless of which operating system you use. 

The Best Mobile Scanning Apps of 2016:

http://www.pcmag.com/roundup/349681/the-best-mobile-scanning-apps

 I decided to use Evernote’s Scannable app (Free on iOS and Android). 

https://evernote.com/products/scannable/?var=c

for android, see:

https://www.androidpit.com/best-scanning-apps-for-android

Camscanner (free without OCR).

Google Drive

Not everybody knows about Google Drive’s scanning capabilities, so if you have the app they may come as a pleasant surprise. All you need to do is tap Add New and you should see the option to scan.

As you’d expect, your scans are automatically stored on your Drive (in PDF format), but what you might not expect from a free app is Drive’s built-in optical character recognition. That means your scans are searchable for specific words or phrases, which can be an enormous time saver.

other

Scan Smarter Using A Document Scanner...

voix vers texte, Speech-To-Text (STT), avec api speech recognition Google chrome ou Cloud system, et comparaison avec d'autres systèmes

Google utilise le speech recognition dans la barre de recherche depuis longtemps:

google

la demo pour le web speech recognition (online lié à chrome):
https://www.google.com/intl/en/chrome/demos/speech.html

Google cloud
Google envisage de rivaliser avec Nuance (Dragon NaturallySpeaking) et autres sociétés de reconnaissance vocale en ouvrant sa reconnaissance de la parole API aux développeurs tiers. Pour attirer les développeurs, le soft sera gratuit au lancement avec des prix destinés à être introduits à une date ultérieure.
Le prix a été fixé l'été 2016:
https://cloud.google.com/speech/pricing
Chaque requête est arrondie à l'incrément de 15 secondes le plus proche. Par exemple, trois requêtes distinctes, chacune contenant 7 secondes d'audio, seraient facturées en 45 secondes (3 × 15 secondes) d'audio.
60minutes/mois=gratuit
sinon $0.006 / 15 seconds de 61minutes à 1 million de minute.

La Speech API Cloud de Google couvre 80 langues et fonctionne avec n’importe quelle application à en streaming temps réel ou en mode batch. Le système cloud offre un ensemble complet d’API pour les applications « voir, entendre et traduire ». Il est basé sur la même technologie réseau neuronal qui alimente la recherche vocale de Google dans le Google app et la voix en tapant dans clavier Google. Il y a quelques autres fonctionnalités intéressantes, comme travailler dans un environnement bruyant et en temps réel:
https://cloud.google.com/speech/

post de 2016:
https://techcrunch.com/2016/03/23/google-opens-access-to-its-speech-recognition-api-going-head-to-head-with-nuance/

les updates pour le web:
https://developers.google.com/web/updates/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API

pour le domaine du cloud:
https://cloud.google.com/speech/docs/rest-tutorial
https://github.com/GoogleCloudPlatform/nodejs-docs-samples/blob/master/README.md#how-to-run-a-sample

via le logiciel de Google 

API Chrome speech to text service
Une brève introduction à la spécification de l'API.

La spécification Web Speech API a été introduite en 2012 par la communauté W3C. Son but était de permettre aux navigateurs modernes de reconnaître et de synthétiser la parole. À partir de juillet 2015, Chrome est le seul navigateur qui a mis en œuvre cette spécification, en utilisant les moteurs de reconnaissance vocale de Google.
En tant que développeurs web, nous devrions être très heureux à ce sujet, car il nous ouvre un tout nouvel univers d'opportunités pour les nouvelles applications Web et de nouvelles fonctionnalités d'interaction dans les applications existantes. En outre, depuis que Google a ouvert son propre moteur de reconnaissance vocale pour supporter cette API, les développeurs sont en mesure de l'incorporer. À ce stade - l'API de Google est gratuit, mais il n'y a aucune garantie qu'elle continuera à l'être.

speechlogger speechnotes

Les deux web applications suivantes sont très proches et ne fonctionnent que sur les navigateurs Chrome (mobile/web):

• https://speechnotes.co/fr/
  et sa version hébergée par google (appspot) plus orientée dvpment:
• https://speechlogger.appspot.com/fr/
• https://speechlogger.appspot.com/en/speechnotes.jsp (elle est plus vieille que speechnotes.co/fr/)

mais offrent des petits services différents...

en extension chrome:
https://chrome.google.com/webstore/detail/speechnotes-speech-to-tex/opekipbefdbacebgkjjdgoiofdbhocok?hl=en
pour android sous play:
https://play.google.com/store/apps/details?id=co.speechnotes.speechnotes&hl=en
avec apk:
http://www.apkmonk.com/app/co.speechnotes.speechnotes/

---
https://lilyspeech.com/
2.5$/mois

comparaison

http://www.capterra.com/speech-recognition-software/

https://www.brainasoft.com/braina/download.html
29$/an; la version gratuite n'a pas la fonction
 Dictate (Speech to Text) in any Software or Website in 40 Languages.

development chrome HTML5 speech to text

https://speechlogger.appspot.com/developers/

les langages:
http://stackoverflow.com/questions/14257598/what-are-language-codes-for-voice-recognition-languages-in-chromes-implementati

bug de chrome qui permettait d'espionner ce que vous dites:
https://www.talater.com/chrome-is-listening/

un petit js pour commander tous les navigateurs à la voix
https://www.talater.com/annyang/

En 2014, "Understanding the Code":
http://apprentice.craic.com/tutorials/37
de la demo pour le web speech recognition (online lié à chrome):
https://www.google.com/intl/en/chrome/demos/speech.html

bloquer site firefox chrome

Trois moyens pour bloquer l'accès à une liste de sites

1. avec le fichier 'hosts' (DNS)
2. avec une extension dans votre navigateur
3. avec l'antivirus avast.

1/ Ce tuto a pour but de vous enseigner le moyen de bloquer très simplement les adresses internet que vous voulez via le fichier 'hosts':
http://comment-astuce.blogspot.fr/2010/07/bloquer-du-contenu-avec-le-fichier.html

2/ L'excellente extension gratuite 'block site' sur chrome et firefox,
https://chrome.google.com/webstore/detail/block-site/eiimnmioipafcokbfikbljfdeojpcgbh?hl=en-GB
et aussi pour empêcher de la désactiver:
https://chrome.google.com/webstore/detail/add-ons-settings-history/gjnnmmhkhjdokoddghejcfbfnoigpbfp/related?hl=en-GB
Add-ons, Settings, History Locker
hélas qui est payante.

3/Avast
http://www.malekal.com/tutoriel-antivirus-avast/
L’agent WEB, inclue un bloqueur de sites.
Cela se fait dans les paramètres de l’agent WEB => bloqueur des sites.
On peut mettre un mot de pass pour les services.

courte analyse du code "markdown odyssey.js" et ajout popup tooltip icon

http://cartodb.github.io/odyssey.js/

il y a des fonctionnalités "cachées" (c'est du leaflet.js):

pour avoir des tooltips (hover) et popup, on peut faire dans le markdown:
L.marker([40.7348, -73.9970],{title:"I am a tooltip"}).bindPopup("<b>Hello world!</b><br>I am a popup.").actions.addRemove(S.map)

et une fonction associée:
L.marker([40.7348, -73.9970]).on("click", function(e){alert("You clicked the map at " + e.latlng);}).actions.addTo(S.map)
Ici cela ouvre une fenêtre "alert" (avec un bouton "OK"):
          cartodb.github.io indique :
          You clicked the map at LatLng(40.7348, -73.997)

Ref: https://github.com/CartoDB/odyssey.js/issues/171

on a aussi :
ce que fait le bouton "add":
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
Creates an action that adds the marker instance to the specified map when the story enters in the action and removes when the story leaves it.
mais on a aussi:
L.marker([37.8250, -122.0430]).actions.addTo(S.map)

http://cartodb.github.io/odyssey.js/documentation/#leaflet-object
On peut donc mettre du html après L.marker dans le fichier markdown avec la structure leaflet.js.

pour de l'audio:
L.marker([44.7348, -67.5645],{title:"I am a tooltip", opacity: 0.5}).bindPopup('<b>Hello world</b><br>  <mark> blue </mark><span style="color:blue">blue</span>..............................................................................................<br><audio controls autoplay loop> <source src="http://www.zapsplat.com/wp-content/uploads/2015/sound-effects-blastwave-fx/Blastwave_FX_ChurchBells_BW.60957.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>').actions.addRemove(S.map)

pour un lien vers une image:
L.marker([40.7348, -73.9970],{title:"I am a tooltip", opacity: 0.7}).bindPopup('<b>Hello world</b><br>
<span style="color:blue">blue</span>..........................................................................................<br>
<a href="http://farm6.staticflickr.com/5344/25373090639_4a33c061fe_h.jpg"><img src="http://farm6.staticflickr.com/5344/25373090639_4a33c061fe_n.jpg" alt="Icon"></a>').actions.addRemove(S.map)

pour les video youtube par exemple:
<iframe width="480" height="360"src="https://www.youtube.com/embed/AekYJ62Knno?autoplay=1"></iframe>
elle déborde en largeur car pour la fenêtre popup, par défaut
maxWidth= 300 Max width of the popup.
minWidth= 50 Min width of the popup.
maxHeight= null If set, creates a scrollable container of the given height inside a popup if its content exceeds it.
http://leafletjs.com/reference.html#popup


Si le media dépasse 340px de large, il faut passer à autre chose qu'un simple bindPopup("<b>Hello world!</b><br>") mais aller en plus dans les options du popup:
L.marker([44.7348,-69.96]).bindPopup(L.popup({maxWidth:500}).setContent(
'<b>video with width=480 and L.popup maxWidth:500 </b><mark>OK</mark><br><span style="color:blue">blue</span>...<br><iframe width="480" height="360" src="https://www.youtube.com/embed/AekYJ62Knno?autoplay=1"></iframe>'
)).actions.addRemove(S.map)

utiliser maxWidth: "auto"

pour une video
L.marker([44.7348,-68.96],{title:"I am a tooltip for video", opacity: 0.7}).bindPopup(L.popup({maxWidth:500}).setContent('<b>video with width=480 and L.popup maxWidth:500 </b><mark>OK</mark><br><span style="color:blue">blue</span>...........................................................................<br><iframe width="480" height="360" src="https://www.youtube.com/embed/QmES8eumLa8?autoplay=1"></iframe>')).actions.addRemove(S.map)

pour l'icône des marqueurs:
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png',iconSize: [22, 40], iconAnchor: [12, 39]})}).actions.addRemove(S.map)
```
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png',iconSize: [22, 40], iconAnchor: [12, 39]})}).actions.addRemove(S.map)


**from GitHub**
https://raw.githubusercontent.com/Concept211/Google-Maps-Markers/master/images/marker_blue7.png


**from your blogspot**
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWF7sYMJQpYwjWXRtpJPXgwB-HSk7dsbWlwlJ_KROyrSKKY70rwi5X_IHO49XjA77L1gfTDMzfHNsXKxQH6vAE6u467Sm0e1-LajztXNlJ4KVvdRPD40zKnwydqONHXWN1Xq1vS4TO5bT/s1600/church-2.png

**random with Placeholder Images **
L.marker([44.7348, -67.5655], {icon:L.icon({iconUrl:'http://lorempixel.com/64/64/',})}).actions.addRemove(S.map)

Sandbox html: cartodb.github.io/odyssey.js/sandbox

Lorsque l'on arrive sur la page  "slides" "Your first odyssey.js story", nous avons sur une page html (avec CSS et javascript interne et externe) hébergé par GitHub que tout compte peut réaliser de type:
http://cartodb.github.io/odyssey.js/sandbox avec username.github.io puis sa repository.

Dans le head, le titre de cette page est <title>Odyssey.js Sandbox</title>

A/ La liste des librairies js utilisées dans le "head":

http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js
    https://modernizr.com/
    Modernizr tells you what HTML, CSS and JavaScript features 
    the user’s browser has to offer.
   dec 2016=latest version:  3.3.1

B/dans les scripts:

http://d3js.org/queue.v1.min.js
       Data-Driven Documents= D3; https://d3js.org/
       D3.js has been extensively used for GIS map making, managing both GeoJSON 
       and Topojson files as input.   https://en.wikipedia.org/wiki/D3.js
http://cartodb.github.io/odyssey.js/dist/odyssey.js
http://cartodb.github.io/odyssey.js/vendor/d3.js
    version: "3.3.10";  dec 2016= the latest version (4.4.0)
http://cartodb.github.io/odyssey.js/vendor/codemirror/codemirror.js
http://cartodb.github.io/odyssey.js/vendor/codemirror-markdown.js
    // CodeMirror version 3.22
    // CodeMirror is the only global var we claim
   CodeMirror is a versatile text editor implemented in JavaScript for the browser. 
   It is specialized for editing code, and comes with a number of language modes
   (>100, also Markdown) and addons 
   that implement more advanced editing functionality.
   It is the editor used in the dev tools for both Firefox and Chrome
    https://codemirror.net/
  Cela permet d'avoir le code markdown en couleur...
http://cartodb.github.io/odyssey.js/vendor/jszip.js
    les fonctions .zip (bouton "download story" qui sauve en .zip
http://cartodb.github.io/odyssey.js/vendor/ZeroClipboard.min.js
    * The ZeroClipboard library provides an easy way to copy text to the clipboard 
       using an invisible Adobe Flash movie and a JavaScript interface.
     * http://zeroclipboard.org/
     * v1.3.5  (now dec 2016, Current config: v2.2.0)
http://cartodb.github.io/odyssey.js/dist/sandbox.js

../vendor/jquery-1.10.2.min.js; /vendor/jquery.imageload.js; ./vendor/jquery.spriteanim.js célèbre jquery librairie... Juste un mot sur ce odyssey.js/vendor/markdown.js (un fork) qui est de 2013/09: https://github.com/cadorn/markdown-js https://github.com/evilstreak/markdown-js/ C'est un analyseur markdown pour JavaScript.  Vous entrez du markdown et obtenez du HTML en out.  Quelques points de vue sur le code:  produire du HTML bien formé. Cela signifie que em et strong nesting est important, de même que la capacité de sortie en tant que HTML et XHTML  une représentation intermédiaire pour permettre le traitement des données analysées (nous avons en fait deux, à la fois JsonML: un arbre markdown et un arbre HTML ). http://www.jsonml.org/ JSON Markup Language (JsonML). Étant facilement extensible pour ajouter de nouveaux dialectes sans avoir à réécrire la mécanique d'analyse entière. il est bien documenté... https://github.com/CartoDB/odyssey.js/search?utf8=%E2%9C%93&q=markdown.toHTML a fonction fondamentale est "markdown.toHTML" Dans odyssey.js, il y est 5 fois: https://github.com/CartoDB/odyssey.js/blob/59e194e8cf18154d095f004e01f955b6af9348f9/dist/odyssey.js aux lignes 1071 : _slide.html = function() {     if (!html) {       html = markdown.toHTML(['markdown'].concat(md_tree));     }     return html;   }; 5389: /** * toHTMLTree( markdown, [dialect] ) -> JsonML * toHTMLTree( md_tree ) -> JsonML * - markdown (String): markdown string to parse * - dialect (String | Dialect): the dialect to use, defaults to gruber * - md_tree (Markdown.JsonML): parsed markdown tree * * Turn markdown into HTML, represented as a JsonML tree. If a string is given * to this function, it is first parsed into a markdown tree by calling * [[parse]]. **/ Markdown.toHTMLTree = function toHTMLTree( input, dialect , options ) { 5418: /** * toHTML( markdown, [dialect] ) -> String * toHTML( md_tree ) -> String * - markdown (String): markdown string to parse * - md_tree (Markdown.JsonML): parsed markdown tree * * Take markdown (either as a string or as a JsonML tree) and run it through * [[toHTMLTree]] then turn it into a well-formated HTML fragment. **/ Markdown.toHTML = function toHTML( source , dialect , options ) { 6724: expose.toHTML = Markdown.toHTML;   expose.toHTMLTree = Markdown.toHTMLTree; C/ un petit js de 10lignes  initAnim Dans le body un iframe qui renvoie sur un html pour l'initialisation http://cartodb.github.io/odyssey.js/sandbox/slides.html et 2 div dont le "share_dialog" d'inialisation ---- Si on inspecte les éléments DOM avec le CSS. Il y a 4 grandes structures. Dans la iframe "map" class="leaflet-container leaflet-fade-anim" div class="leaflet-map-pane" (carte "baseMap liée au début du fichier markdown) "slides_container" le cadre avec texte de l'histoire qui s'affiche qui contient 3 sous-cadres: "dots" pour aller d'une slide à l'autre "slides" la narration avec le texte+image+URL "navButtons" les flèches préc et suivante "credits": c'est la barre en bas avec "title et "author" (liés au début du fichier markdown) Après les scripts, on a un div "editor_modal".  Ce cadre/DOM contient 4 div: "header" (barre en haut) qui contient 2 choses un bouton "expandButton" qui étend ou réduit cette fenêtre un bouton "show_slide"qui renvoie sur la page de choix du template slides/scroll... "options" qui est la barre d'en bas qui contient 2 <ul> (<ul> tag defines an unordered (bulleted) list) qui ont des popups: "h_left" : bouton "?" qui renvoie sur l'URL documentation" et                 bouton qui renvoie sur "change map" "h_right" : avec les 3 boutons en bas à droite   qui renvoie  sur des events "toggle collapse mode", "download story" et "share story". "actions_bar"  (barre à gauche) il y a un ::before et ::after car c'est une zone qui se déroule. L'apparence y montre les boutons qui permettent 3 choix dont mettre un marqueur  sur la carte mais en fait ces boutons forment une classe "actionButton".  class="CodeMirror cm-s-default CodeMirror-wrap" il y a un ::before et ::after car c'est une zone qui se déroule. Elle contient des zones "collapsées" de la structure de codemirror, mais 3 structures y sont: "CodeMirror-vscrollbar" sur la droite "CodeMirror-scroll"  qui contient le texte  "actionButton" sur la gauche avec 3 choix dont mettre un marqueur  sur la carte En fait la liste des dépendances est plus importante: https://libraries.io/github/CartoDB/odyssey.js  package.json Requirements Latest Stable Latest Release Licenses browserify ^4.1.5 13.1.1 13.1.1 MIT d3 3.3.10 4.4.0 4.4.0 BSD-3-Clause hammerjs ~1.1.3 2.0.8 2.0.8 MIT phantomjs ~1.9.0 2.1.7 2.1.7 Apache-2.0 smash 0.0 0.0.15 0.0.15 BSD-3-Clause https://libraries.io/npm/hammerjs A javascript library for multi-touch gestures https://libraries.io/npm/phantomjs Headless WebKit with JS API https://libraries.io/npm/smash Concatenate files together using import statements. This project has been marked as deprecated and is not recommended for use anymore.

analysis of JS: create your own Storymap with leaflet and hosted by GitHub Pages

Scroll-driven story map, with point markers and narrative text in GeoJSON, using Leaflet and jQuery
https://github.com/jackdougherty/leaflet-storymap

Features

Scroll-driven navigation, using screen swipe, trackpad, or keyboard down-arrow. Initial map displays all point markers.
Viewers can pan and zoom the map independently of the narration, or click on any point to go directly to that chapter.
Easy-to-learn template to create your own storymap.
Upload text, point coordinates, zoom levels, and image links to a CSV generic spreadsheet, and drag into http://geojson.io to create a GeoJSON data file.
Images can be stored in local subfolder or pulled from an external URL.

Limitations

Due to GeoJSON data limitations, there is no easy way to insert hyperlinks inside the 'description' text. They must be created outside, in fields such as "source-link" (see below in "comment")

Requires open-source libraries

• Leaflet.js 1.0
• leaflet.extra-markers (leaflet >0.5)
  https://github.com/coryasilva/Leaflet.ExtraMarkers
  Custom Markers for Leaflet JS based on Awesome Markers
• jQuery
• Font Awesome

Now use the plugin leaflet.extra-markers to create a marker like this:

  // Creates a red marker with the coffee icon

  var redMarker = L.ExtraMarkers.icon({

    icon: 'fa-coffee',

    markerColor: 'red',

    shape: 'square',

    prefix: 'fa'

  });

  L.marker([51.941196,4.512291], {icon: redMarker,}).addTo(map);

Comments

The Leafet 1.x code includes a 'fly to' feature that animates the distance traveled from one map point to the next. Users with some coding skills can easily modify the background map, or add map overlays, or extend the code by adding new features.

Click on map.geoJSON. You can directly open the map in GitHub.

Click on map.CSV. You can directly open the tab in GitHub.

The structure of the HTML:

div "title"

div "narration"

• "contents"
• "space-at-the-top"
• "container1"
• "container2",  etc...

Dans chaque container1:

<div id="container1" class="image-container inFocus">

• <p class="chapter-header">Hartford Public High School 1847</p>
• <div class="img-holder"><img src="img/1847-HPHS-Catalog1904p164.jpg"></div>
  <a href="https://www.flickr.com/photos/56513965@N06/21047067205" target="_blank" class="source">
  Source: HPHS Quadrennial Catalogue 1904</a>
• <p class="description">This scroll-driven storymap is built on an open-source Leaflet template. The design is ideal for telling a story that narrates different locations on a map. Or users can click any marker point to go directly to the chapter narrative.</p>

</div>

https://github.com/JackDougherty/leaflet-storymap/blob/master/script.js

it's a small JS.

// create map

// loads the GeoJSON map data file from a local folder

1.  // first, creates numerical icons to match the ID numbers avec ExtraMarkers.icon and put on the map (layer.setIcon)
2. // creates the contents of each chapter from the GeoJSON data. Unwanted items can be removed, and new ones can be added. Rem: It's easy to add new structure.
3. // Calculating total height of blocks above active
4. Only one scroll for all slides (in "contents")
   Where there is an event  scroll of "contents", you have this js:
   $('div#contents').scroll(function() {
              if ($(this).scrollTop() >= areaTop && $(this).scrollTop() < areaBottom) {
                 $('.image-container').removeClass("inFocus").addClass("outFocus");
                 $('div#container' + feature.properties['id']).addClass("inFocus").removeClass("outFocus");
   
                 map.flyTo([feature.geometry.coordinates[1], feature.geometry.coordinates[0] ], feature.properties['zoom']);
               }
             });
5. map.flyTo is only available with leaflet v1
   Sets the view of the map (geographical center and zoom) performing a smooth pan-zoom animation.
   http://leafletjs.com/reference-1.0.0.html#map-flyto
6. end (initMap)

Tuto

Before you begin, review previous tutorials in this book:

• Edit and Host Code Templates with GitHub
• Create and Convert Map Data with GeoJson.io

Go to the GitHub repository template (https://github.com/jackdougherty/leaflet-storymap) and fork a copy of this repo to your own GitHub account. Requires signup for a free GitHub account. 

Reminder: if you have already forked one copy, go to your GitHub repository Settings to rename or delete the first copy, so that you may create a second copy.

Go to your copy on GitHub and click the "download" button to create a zipped (compressed) copy on your local computer. On most computers, double-click to unzip the folder.

The input

The map.csv file contains the map data in an easy-to-edit format. 

Open map.csv with any spreadsheet tool and replace the existing data with your own.

The structure is:

1. id -- Assign numbers 1, 2, 3. . to each point, in desired order of appearance.
2. chapter -- Add title for each section of the narrative.
3. zoom -- Insert a zoom level for each chapter, usually between 11 (zoomed out) and 18 (zoomed in).
4. image -- If storing images in local "img" folder, follow this format: img/photo1.jpg. Or if loading images from an external site, insert the full URL. Currently, images must be about 300px wide and roughly similar height.
5. source-credit -- Add caption to credit the origin of the image. Write in this format: Source: ABC or leave blank if none.
6. source-link -- Add a URL to make the source-credit appear as a hyperlink, or leave blank if none. (If you want a link in your text, you must put here)
7. description -- Add text to display in the narrative. Currently, the length is not adjustable.
8. lon and lat -- Insert the longitude and latitude coordinates of each point. 

To find coordinates in Google Maps, right-click any point and select What's Here. Reminder: Google Maps stores points in lat-lon format, but GeoJSON stores them in the reverse order (lon-lat, the same as X-Y coordinates in mathematics), so enter carefully into the map.csv spreadsheet.

Save the spreadsheet in CSV format. 

Open geojson.io in a browser.

Drag in the map.csv file to inspect your point data. 

To export, save in GeoJSON format, and the browser will download a file named: map.geojson.

Go to your forked repository of leaflet-storymap 

Go to your forked repository of leaflet-storymap in your GitHub.com account. Click on 'branches' and keep the master branch, but delete any others (such as gh-pages and/or dev).

In the master branch of your repo, click on Upload Files button, upload the two new files you created on your local computer, and replace the existing files with those names.

map.csv

map.geojson

1. In your master branch, click on the index.html file, 
2. click on the pencil icon to turn on the editor, and edit lines 7 and 22 to change the titles that will be displayed. 
3. When done, scroll down and click the clean Commit Changes button to save your edits to the master branch.

Host your storymap code on the live web with GitHub Pages. At the top level of your repo on GitHub.com, select the master branch drop-down menu, and type in this new branch name: gh-pages. When you first create this branch, it contents may take several minutes to appear the first time on the public web, but updates will take only seconds to appear. Your public URL follows this format: http://USERNAME.github.io/REPO_NAME.

Learn more about how to edit your GitHub branches and make 'pull requests' to save changes from one branch to the other in the GitHub section in this book.

https://www.datavizforall.org/leaflet/storymap/#leaflet-point-storymap-with-scrolling-narrative

leaflet L.marker and its options

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 37 KB of gzipped JS code, it has all the mapping features most developers ever need.

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms out of the box, taking advantage of HTML5 and CSS3 on modern browsers while being accessible on older ones too. It can be extended with a huge amount of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.
https://github.com/Leaflet/Leaflet

marker

http://leafletjs.com/reference-1.0.2.html#marker

• http://leafletjs.com/reference-1.0.2.html#icon
• popup methods like bindPopup()
  http://leafletjs.com/reference-1.0.2.html#popup
  If you want to just bind a popup to marker click and then open it, it's really easy:
  marker.bindPopup(popupContent).openPopup();
• Tooltip
  Used to display small texts on top of map layers.
  marker.bindTooltip("my tooltip text").openTooltip();

GitHub, GitPages, GitBooks, Data Visualizalion, One Tool for Everything?

Sign up for a free GitHub account, a free multi-purpose tool that allows you to:

• View and fork a copy of open-source code from other users
• Make simple edits to your code directly in the browser
• Share your code and receive or suggest revisions to others
• Host a live version of your web code with GitHub Pages

a tutorial

https://www.datavizforall.org/edit/github/

and
 If you're already familiar with GitHub Pages, you may be interested to know that behind the scenes:
https://github.com/blog/2289-publishing-with-github-pages-now-as-easy-as-1-2-3

Les restrictions Google Maps avec un clé (key) gratuite.

On n'a pas accès à:
Google Maps Directions API
Google Maps Distance Matrix API
Google Maps Roads API
Google Maps Time Zone API

Google Places API Web Service 150 000 free requests per day (after credit card validation).

Ref:
https://developers.google.com/maps/pricing-and-plans/#details

Un post de fin 2016

Voir les services associés à la clé (pour le suivi des nombres de map):
https://maps-apis.googleblog.com/2016/10/key-improvements-for-your-maps-api.html

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

google spreadsheet and google interactive chart.js

some interesting charts:
https://stef42530.github.io/jack1/

Dual-Y charts

https://developers.google.com/chart/interactive/docs/gallery/scatterchart

Envoyer SMS/MMS gratuit vraiment gratis depuis son PC ou mac ou tablette, android, ipad.

Il y a 4 méthodes:

1. depuis un web service fait pour cela,
2. depuis un web service de votre opérateur,
3. avec une appli de synchronisation sur son téléphone et sur son PC (c'est d'office dans le monde mac, mais sur Android il faut ajouter une application (mode miroir).
4. depuis son ordinateur branché ou connecté via bluetooth à son téléphone (mode modem)

depuis un web service fait pour cela

pour envoyer

https://drfone.wondershare.com/fr/message/free-sms-websites-to-send-sms-online.html

pour recevoir

https://drfone.wondershare.com/fr/message/receive-message-online.html

depuis un web service de votre opérateur

par exemple avec bouygues telecom et un compte chez eux.

https://www.assistance.bouyguestelecom.fr/mobiles/sms-mms-mobile/envoi-sms-gratuitement-internet

Connectez-vous à votre Compte Client et sélectionnez votre ligne mobile.

Rendez-vous dans la rubrique « Mon mobile et mon forfait ».

Dans le bloc « Mon Forfait », cliquez sur  « Envoyer des SMS depuis mon Espace Client ».

Une fenêtre s'ouvre : saisissez le(s) numéro(s) de mobile du/des destinataire(s) et écrivez votre message.

Confirmez l’envoi de votre SMS en cliquant sur « Valider ». Vous recevez un message de confirmation lorsque votre SMS est envoyé.

Ce service, réservé aux Clients Mobile Bouygues Telecom, vous permet d’envoyer 5 SMS gratuits par jour (soit >150SMS/mois) à un ou plusieurs destinataires vers tous les opérateurs.

Valable uniquement vers la France métropolitaine..

Le n° d'envoi de votre SMS est celui de votre numero de ligne.

Pour les MMS on peut seulement les lire.

depuis son ordinateur connecté à son téléphone

C'est la solution classique dans un lieu ou vous captez la 3G ou la 4G mais où aucune connexion Wifi n’est disponible pour votre PC/mac ou votre tablette.

Il suffit de transformer son smartphone/téléphone en modem pour partager sa connexion 3G/4G avec d’autres appareils.

Une fonctionnalité d’Android qui ne date pas d’hier puisque celle-ci est disponible depuis la version 2.2!

 il est possible d’utiliser votre appareil comme modem en le branchant en USB sur votre ordinateur. Pour commencer, activez bien la 4G/3G sur votre smartphone.

Raccordez votre smartphone à votre PC via un câble USB

Rendez-vous ensuite dans les Paramètres de votre smartphone

Une fois dans l’onglet « Sans-fil et réseaux », cliquez sur « Plus » pour faire apparaître les options supplémentaires.

Rendez-vous dans le menu « Partage de connexion », « Partage connexion et point accès mobile » ou « Partage du réseau mobile », selon le modèle de votre smartphone.

Cochez la case « Partage de connexion USB »

Une notification apparaît ensuite sur votre ordinateur. Vous êtes maintenant connecté et vous pouvez utiliser votre smartphone  pour surfer sur internet.

Méthode 2 : connexion à internet via Wi-Fi

La connexion via Wi-Fi sera sans doute plus accessible pour vous si votre opérateur n’a pas fourni la possibilité de se connecter via USB ou pas de cable USB sous la main.

Rendez-vous dans les Paramètres de votre smartphone

Une fois dans l’onglet « Sans-fil et réseaux », cliquez sur « Plus » pour faire apparaître les options supplémentaires.

Rendez-vous dans le menu « Partage de connexion », « Partage connexion et point accès mobile » ou « Partage du réseau mobile »

Cochez la case « Point d’accès Wifi Mobile » pour activer la connexion

Rendez vous dans le menu Partage point d’accès Wifi mobile > Configurer le point d’accès Wifi

Une fenêtre s’ouvre alors, cochez la case « Afficher le mot de passe ». C’est ce mot de passe que vous devrez ensuite saisir sur votre PC pour vous connecter.

Dès lors, vous n’avez plus qu’à actualiser la liste des connexions Wi-Fi disponibles sur votre PC/Mac.

Si tout s’est bien passé, vous devriez retrouver le nom de l’accès que vous avez configuré juste avant. Cliquez dessus pour vous connecter. Là, on vous demandera de rentrer la clé de sécurite.

Validez et vous devriez réussir à vous connecter sur internet grâce à votre smartphone utilisé alors comme hotspot Wi-Fi !

Mais la connection USB est meilleur donc c'est le plan B.

Le mode USB est le mode probablement le plus efficace, cependant souvent le plus long à établir avec beaucoup de paramètres à mettre en place. Ses principaux avantages sont la rapidité de transmission de l'information et la moindre utilisation de la batterie du téléphone. 

Pour Android Ice Cream Sandwich, Google a configuré une auto-configuration pour Windows. Sous Windows 7 ainsi que les versions récentes de Linux, il suffit de brancher le téléphone via le câble USB et de cocher "modem USB" pour accéder à internet sans aucune autre configuration.

Pour les téléphones Samsung, le logiciel "Samsung Kies" disponible pour Mac et Windows contient tous les drivers pour une utilisation immédiate.

Sur Mac, la connexion est plus compliquée avec les appareils Android. Cependant, HoRNDIS, un projet très récent, permet une configuration automatique du téléphone Android au Mac. Ce projet est une série de driver qui permettent d'utiliser le protocole RNDIS qui n'est pas supporté par défaut sur Mac OS X. Une fois les drivers installés et le mobile détecté, il faut choisir "Via DHCP" (dans préférence Système/réseau). Il faut ensuite remplir "serveur DNS" par une adresse locale (par exemple 169.192.1.1) et cliquer sur "appliquer". La connexion devrait être active.

driver: http://joshuawise.com/horndis

for Mac OS X that allows you to use your Android phone's native USB tethering mode ( mode modem affilié: https://fr.wikipedia.org/wiki/Modem_affili%C3%A9 ) to get Internet access. It is known to work with Mac OS X versions 10.6.8 (Snow Leopard) through 10.12.

vieux lien mais quelques astuces: http://elliptips.info/tethering-partage-de-la-connexion-internet-de-votre-android-sur-mac-osx/

avec une appli de synchronisation ou dédiée sur son téléphone

L’une des fonctionnalités les plus appréciées par les utilisateurs d’iPhone et de MAC (y compris ipad sans carte sim) c’est le fait de pouvoir répondre aux SMS directement depuis l’ordinateur (en mode partagé entre les deux). 

https://drfone.wondershare.com/fr/message/how-to-send-and-receive-messages-from-computer.html

Il est possible de faire la même chose sur Android.

Pour pouvoir envoyer des SMS depuis votre ordinateur avec un smartphone Android il existe plusieurs solutions, deux des plus appréciés sont : Aidroid, Pushbullet et MightyText. 

Avant de parler de ces appli, utiliser WhatsApp ou l'équivalent.

 WhatsApp vous permettra d'envoyer des messages aux personnes qui possèdent l'application. Il faut que vous installiez l'application sur votre téléphone (fonctionne sur iOS, android, windows phone, et aussi Blackberry, Nokia, y compris les anciens en symbian 60, 40...). 

Vous vous créez un compte 

https://www.whatsapp.com/

puis vous allez sur https://web.whatsapp.com pour votre phone et vous suivez les instructions données. Vous devez avoir internet depuis votre téléphone (wifi ou data) et depuis votre ordinateur.

Avec ce type de solution, vous consommez votre enveloppe data.

Airdroid

https://airdroid.com/fr/

pour ajouter à chrome:

https://chrome.google.com/webstore/detail/airdroid/hkgndiocipalkpejnpafdbdlfdjihomd

ou sur votre mac ou PC en application locale.

pour ajouter sur votre android:

https://play.google.com/store/apps/details?id=com.sand.airdroid&hl=en

Pushbullet

On commence par Pushbullet. À la base, c’est un programme puissant qui permet de relayer les notifications de votre smartphone (ou de votre tablette) vers vos ordinateurs. Pour se faire, il nécessite la création d’un compte gratuit sur le site des développeurs. Ensuite il suffit de synchroniser les différentes machines ensemble.

Rien de plus simple, il faut télécharger l’application sur son appareil Android et l’extension correspondante à votre navigateur préféré (Chrome, Firefox …) sur votre ordinateur (PC, Mac). Notons que depuis peu, il existe même une application pour Windows qui permet sensiblement la même chose que les versions pour navigateurs.

Ce mode miroir des notifications permet de voir sur son PC toutes les notifications reçues sur votre appareil, même s’il est loin de vous. Il nécessite seulement d’être relié à Internet via Wifi ou 3G/4G. Plutôt pratique, mais l’application va plus loin puisqu’au fil de son développement et ses mises à jour, il est devenu possible d’interagir avec son smartphone ou sa tablette. En particulier sur les SMS comme nous allons le voir au sein de ce tutoriel.

Prérequis

Pushbullet est parfaitement fonctionnel sur un appareil non-rooté, ce que vous apprécierez probablement à sa juste valeur.

Créer un compte gratuit sur le site officiel de Pushbullet. Vous pouvez utiliser votre compte Google habituel pour simplifier l’opération si vous le souhaitez.

Télécharger et installer l’extension correspondante à votre navigateur ou l’application Windows.

Se connecter via l’extension fraîchement installée avec son compte Pushbullet.

Télécharger et installer Pushbullet sur son appareil Android.

Se connecter via l’application Android avec le même compte Pushbullet que son ordinateur.

Comment envoyer vos SMS depuis votre ordinateur grâce à Pushbullet ?

Vous allez voir c’est très simple d’utilisation

Lancer l’application Pushbullet installée précédemment.

L’assistant vous demande alors d’avoir accès aux notifications. Il s’agit d’un paramètre sensible qu’il faut néanmoins autoriser pour faire fonctionner Pushbullet correctement.

Rendez-vous dans votre navigateur avec l’extension Pushbullet.

Cliquer dessus pour vous rendre jusque dans l’onglet SMS.

Rédiger votre SMS et choisir le contact approprié (votre répertoire devrait s’afficher, car partagé avec Pushbullet).

Malheureusement si on veut accéder à toutes les fonctionnalités il faut maintenant payer, le plus gros problème de la version payante c’est sa limitation à 100 SMS envoyés par mois, bien trop peu pour utiliser l’application au quotidien, en tout cas pour les gros consommateurs de SMS. Le tarif est de 4,99 dollars par mois ou 39,99 dollars par an.

MightyText

C’est pourquoi on vous propose aussi de découvrir MightyText qui fait un peu la même chose, mais avec une limitation de 250 SMS déjà plus conséquente.

Contrairement à PushBullet l’application a dès le début été pensée pour répondre aux SMS depuis son ordinateur, ainsi elle se concentre uniquement sur cette tâche, vous ne recevrez pas d’autres notifications. L’application est donc très simple et efficace.

Malheureusement comme pour Pushbullet, il y a une version gratuite et une « Pro ». La version gratuite est assez limitée, par exemple vous ne pouvez pas synchroniser tous vos SMS sur l’ordinateur, ou encore la fonction très pratique de programmer un message depuis l’ordinateur n’est pas non plus disponible. Cependant sa limitation est de 250 SMS/mois envoyés depuis l’ordinateur, ce qui est déjà un peu plus conséquent.

Le tarif de MightyText est de 3,33$ par mois ou 39,99$ par an.

Prérequis

MightyText est parfaitement fonctionnel sur un appareil non-rooté, ce que vous apprécierez probablement à sa juste valeur.

Créer un compte gratuit sur le site officiel de MightyText. Vous pouvez utiliser votre compte Google habituel pour simplifier l’opération si vous le souhaitez.

Télécharger et installer l’extension correspondante à votre navigateur.

Se connecter via l’extension fraîchement installée avec son compte.

Télécharger et installer MightyText sur son appareil Android.

Ref: http://www.phonandroid.com/astuce-envoyez-vos-sms-depuis-votre-pc.html