Workshop French translation update for OpenLayers v4.6.5

.travis.yml

@@ -9,12 +9,14 @@ cache:
     - node_modules
 before_deploy:
   - npm run archive:en
+  - npm run archive:fr
 deploy:
   provider: releases
   api_key:
     secure: ag2ObhNaZYbULIABDARbHyvqk9DChYg6j6HZUmocdfM4Go/MF/OckpR0VntiMKpv+eQ8vdmTyRWVcW4Y/B+AOkMs/fhRs4rYOLq7BXWyLLbcvNaXP+3n6HDB/RZBPcNCYdQUo+oDDOyk7W9vF5T3o4aKlXFRLQIVQgABrwEQC1I=
   file:
     - openlayers-workshop-en.zip
+    - openlayers-workshop-fr.zip
   on:
     repo: openlayers/workshop
     tags: true

archive.sh

@@ -44,9 +44,9 @@ build_archive() {
   npm run build
   mkdir -p ${BUILD}/openlayers-workshop-${1}
   cp doc/${1}/README.md ${BUILD}/openlayers-workshop-${1}/
-  cp src/${1}/*.* ${BUILD}/openlayers-workshop-${1}
-  cp -r src/${1}/data ${BUILD}/openlayers-workshop-${1}/data
-  cp -r src/${1}/examples ${BUILD}/openlayers-workshop-${1}/examples
+  cp src/en/*.* ${BUILD}/openlayers-workshop-${1}
+  cp -r src/en/data ${BUILD}/openlayers-workshop-${1}/data
+  cp -r src/en/examples ${BUILD}/openlayers-workshop-${1}/examples
   cp -r ${BUILD}/openlayers-workshop/${1} ${BUILD}/openlayers-workshop-${1}/doc
   cp -r ${BUILD}/openlayers-workshop/gitbook ${BUILD}/openlayers-workshop-${1}/gitbook
   cd ${BUILD}

doc/fr/README.md

@@ -4,26 +4,26 @@ Bienvenue au **Workshop OpenLayers**. Ce workshop est conçu pour vous donner un
 
 ## Configuration
 
-Ces instructions assument que vous avez récupéré l'archive `openlayers-workshop-fr.zip` depuis la [dernière version du workshop](https://github.com/openlayers/workshop/releases).  En plus, vous devez avoir [Node](https://nodejs.org/) installé pour lancer une serveur de développement pour la bibliothèque OpenLayers.
+Ces instructions assument que vous avez récupéré l'archive `openlayers-workshop-fr.zip` depuis la [dernière version du workshop](https://github.com/openlayers/workshop/releases).  En plus, vous devrez avoir [Node](https://nodejs.org/) v6 ou supérieur installé pour lancer une serveur de développement pour la bibliothèque OpenLayers.
 
 Après extraction du fichier zip, allez dans le répertoire `openlayers-workshop-fr` et installez quelques dépendances additionnelles:
 
     npm install
 
-Maintenant, vous êtes prêts à démarrer le serveur pour le workshop.  Il sert la documentation du workshop en plus de fournir un chargeur pour le debug pour la bibliothèque OpenLayers.
+Maintenant, vous êtes prêts à démarrer le serveur pour le workshop.  Il sert la documentation du workshop en plus de fournir un "bundler" de modules pour la bibliothèque OpenLayers.
 
     npm start
 
-Cela va démarrer un serveur de développement où vous pourrez lire la documentation du workshop et avancez sur les exercices: {{ book.workshopUrl }}.
+Cela va démarrer un serveur de développement où vous pourrez lire la documentation du workshop et avancez sur les exercices.  Vous devriez être capable de confirmer que les choses marchent en voyant une popup d'alerte sur {{book.workshopUrl}}/.  Vous pouvez lire la documentation du workshop sur {{book.workshopUrl}}/doc/.
 
 ## Vue d'ensemble
 
 Ce workshop est présenté comme un jeu de modules.  Dans chacun de ces modules, vous devrez effectuer un ensemble de tâche conçues pour assimiler un but spécifique à ce module.  Chaque module enchaîne les leçons vues dans les modules précédents et est conçu pour vous faire monter en compétence par étapes.
 
 Les modules suivants seront couverts par ce workshop:
 
-* [Les basiques](basics/README.md) - Apprendre comment ajouter une carte dans une page web avec OpenLayers.
-* [Les couches et les sources](layers/README.md) - Apprendre à propos des couches et sources.
-* [Les `Controls` et les `Interactions`](controls/README.md) - Apprendre comment utiliser les `controls` et les `interactions` au sens Openlayers.
-* [Les sujets liés aux vecteurs](vector/README.md) - Explorer les couches vecteur en profondeur.
-* [Les `build` personnalisés](custom-builds/README.md) - Créer des `build` personnalisés d'OpenLayers.
+* [Les bases](basics/README.md) - Apprendre comment ajouter une carte dans une page web avec OpenLayers.
+* [Données vecteur](vector/README.md) - Travailler avec des données vecteur.
+* [Tuiles vecteur](vectortile/README.md) - Créer des belles cartes avec des tuiles vecteur.
+* [Opérations Raster](raster/README.md) - Manipuler des pixels avec une source raster.
+* [Déployer](deploying/README.md) - Créer des applications pour la production.

doc/fr/SUMMARY.md

@@ -1,28 +1,25 @@
 # Sommaire
 
-* [Les basiques](basics/README.md)
-  * [Créez une carte](basics/map.md)
-  * [Disséquez votre carte](basics/dissect.md)
-  * [Ressources OpenLayers utiles](basics/resources.md)
-
-* [Les couches et les sources](layers/README.md)
-  * [Sources WMS](layers/wms.md)
-  * [Sources tuilées](layers/cached.md)
-  * [Fournisseurs de tuiles propriétaires](layers/proprietary.md)
-  * [Données vecteur](layers/vector.md)
-  * [Source image vecteur](layers/imagevector.md)
-
-* [Les control et les interaction](controls/README.md)
-  * [Le control barre d'échelle `ScaleLine`](controls/scaleline.md)
-  * [L'interaction de sélection `Select`](controls/select.md)
-  * [L'interaction de dessin `Draw`](controls/draw.md)
-  * [L'interaction de modification `Modify`](controls/modify.md)
-
-* [Les sujets liés aux vecteurs](vector/README.md)
-  * [Aparté sur les formats](vector/formats.md)
-  * [Concepts de styles](vector/style-intro.md)
-  * [Styles personnalisés](vector/style.md)  
-
-* [Les `build` personnalisés](custom-builds/README.md)
-  * [Concepts](custom-builds/concepts.md)
-  * [Créer des `build` personnalisés](custom-builds/create.md)
+* [Les bases](basics/README.md)
+  * [Créer une carte](basics/map.md)
+  * [Zoomer sur votre position](basics/geolocation.md)
+  * [Dessiner un point à votre position](basics/point-feature.md)
+  * [Montrer une popup au clic d'un objet géographique](basics/popup.md)
+* [Données vecteur](vector/README.md)
+  * [Faire le rendu d'un GeoJSON](vector/geojson.md)
+  * [Glisser-déposer](vector/drag-n-drop.md)
+  * [Modifier les objets géographiques](vector/modify.md)
+  * [Dessiner de nouveaux objets géographiques](vector/draw.md)
+  * [Magnétisme ou snapping](vector/snap.md)
+  * [Télécharger des objets géographiques](vector/download.md)
+  * [Rendre l'éditeur plus joli](vector/style.md)
+* [Tuiles vecteur](vectortile/README.md)
+  * [La couche VectorTile](vectortile/map.md)
+  * [Interagir avec les objets géographiques de VectorTile](vectortile/interact.md)
+  * [Styler une couche VectorTile](vectortile/ugly.md)
+  * [Rendre les choses "brillantes"](vectortile/bright.md)
+* [Opérations raster](raster/README.md)
+  * [Configuration de la carte](raster/map.md)
+  * [Faire le rendu des données élévation](raster/elevation.md)
+  * [Faire le rendu du niveau de la mer](raster/raster.md)
+* [Déploiement](deploying/README.md)

doc/fr/basics/README.md

@@ -1,5 +1,8 @@
-# Les basiques
+# Les bases
 
-* [Créez une carte](map.md)
-* [Disséquez votre carte](dissect.md)
-* [Ressources OpenLayers utiles](resources.md)
+Maintenant que nous avons configuré notre environnement de développement, commençons en créant une page web simple avec une carte OpenLayers et ajoutons-lui un peu d'animation et d'interaction.
+
+* [Créer une carte](map.md)
+* [Zoomer sur votre position](geolocation.md)
+* [Dessiner un point à votre position](point-feature.md)
+* [Montrer une popup au clic d'un objet géographique](popup.md)

doc/fr/basics/geolocation.md

@@ -0,0 +1,21 @@
+# Zoomer sur votre position
+
+Les navigateurs fournissent une API pour avoir l'emplacement actuel de l'utilisateur. Nous voulons utiliser cette fonctionnalité pour zoomer sur la carte à l'endroit où l'utilisateur est actuellement. Pour rendre plus facile à l'utilisateur de voir ce qui se passe sur la carte, nous voulons animer le zoom.
+
+## Changements de l'application
+
+Tout d'abord, nous devons assigner la carte à une constante, afin que nous puissions y accéder depuis d'autres composants que nous allons ajouter dans cet exercice:
+
+[import:'map-const'](../../../src/en/examples/basics/geolocation.js)
+
+Pour ajouter la fonctionnalité de géolocalisation, nous ajoutons un petit bloc de code à notre fichier `main.js`:
+
+[import:'geolocation'](../../../src/en/examples/basics/geolocation.js)
+
+Cela nécessite un nouvel import pour la fonction `proj.fromLonLat()`, qui convertit les coordonnées longitude/latitude dans le système de coordonnées qu'OpenLayers utilise par défaut pour la vue de la carte (Web Mercator, EPSG: 3857).
+
+[import:'import-proj'](../../../src/en/examples/basics/geolocation.js)
+
+### Voir le résultat
+
+Quand nous regardons la carte dans le navigateur web ({{book.workshopUrl}}/), nous aurons surement une demande qui va demander si nous voulons donner accès à la page à notre emplacement. Après avoir répondu 'Oui', un zoom animé devrait nous conduire sur notre position actuelle.

doc/fr/basics/map.md

@@ -1,60 +1,37 @@
 # Créez une carte
 
-Dans OpenLayers, une carte est une collection de couches avec plusieurs `interactions` et `controls` pour gérer les interactions utilisateurs. Une carte est générée avec trois ingrédients basiques: les balises, les déclarations de style et l'initialisation du code.
+Dans OpenLayers, une carte est une collection de couches qui est rendue dans une page web. Pour créer une carte, vous avez besoin de balises (HTML) qui crée une fenêtre de carte (c'est à dire un élément `<div>`), un peu de style pou donner à la fenêtre de carte les dimensions appropriéesà votre page et le code d'initialisation de la carte.
 
 ## Exemple fonctionnel
 
-Jetons un oeil à un exemple pleinement fonctionnel d'une carte OpenLayers.
-
-```html
-<!doctype html>
-<html lang="en">
-  <head>
-    <link rel="stylesheet" href="/ol.css" type="text/css">
-    <style>
-      #map {
-        height: 256px;
-        width: 512px;
-      }
-    </style>
-    <title>OpenLayers example</title>
-    <script src="/loader.js" type="text/javascript"></script>
-  </head>
-  <body>
-    <h1>My Map</h1>
-    <div id="map"></div>
-    <script type="text/javascript">
-      var map = new ol.Map({
-        target: 'map',
-        layers: [
-          new ol.layer.Tile({
-            title: 'Global Imagery',
-            source: new ol.source.TileWMS({
-              url: 'https://ahocevar.com/geoserver/wms',
-              params: {LAYERS: 'nasa:bluemarble', TILED: true}
-            })
-          })
-        ],
-        view: new ol.View({
-          projection: 'EPSG:4326',
-          center: [0, 0],
-          zoom: 0,
-          maxResolution: 0.703125
-        })
-      });
-    </script>
-  </body>
-</html>
-```
-
-### Tâches
-
-1.  Assurez-vous d'avoir bien complété les [instructions de configuration](../) pour installer les dépendances et avoir le serveur de debug qui fonctionne.
-
-1.  Copiez le texte ci-dessus dans un nouveau fichier appelé `map.html`, et sauvez-le à la racine du répertoire du workshop.
-
-1.  Ouvrir la carte dans votre navigateur web: {{ book.workshopUrl }}/map.html
-
-![Un carte fonctionnelle affichant une image du monde](map1.png)
-
-Après avoir créé avec succès votre première carte, nous allons continuer en regardant plus précisément chacune des [différentes parties](./dissect.md).
+Assurez-vous d'avoir bien complété les [instructions de configuration](../) pour installer les dépendances et avoir le serveur de debug qui fonctionne.
+
+Maintenant, créons un exemple fonctionnel complet d'une carte OpenLayers. Au minimum, nous avons besoin d'une balise avec un élément "container" pour une carte, et une instance `Map` de OpenLayers que nous configurons avec une couche et une vue.
+
+### Les balises HTML
+
+En premier, nous créons un fichier `index.html` à la racine du répertoire de workshop:
+
+[import](../../../src/en/examples/basics/map.html)
+
+Notez que nous n'avons pas besoin d'inclure la moindre balise `<script>` pour notre application. Notre configuration webpack se charge de cela. Notre `<style>` permet au container de carte de remplir la page complète, et nous utiliserons le container `<div>` avec l'id `map-container` comme cible pour la carte.
+
+### L'application
+
+Pour travailler avec OpenLayers, nous importons [le package `ol`](https://www.npmjs.com/package/ol) depuis npm. C'est fait avec un `npm install` dans notre terminal:
+
+    npm install --save ol
+
+Ensuite, comme point d'entrée de l'application, nous créons un fichier `main.js`, et le sauvons aussi à la racine du répertoire du workshop:
+
+[import](../../../src/en/examples/basics/map.js)
+
+Tout en haut, nous faison un import des modules requis depuis le package `ol`. Notez l'import `'ol/ol.css'`, qui ajoute les styles dont OpenLayers a besoin pour ces composants graphiques (UI) de base. Avec tout ce que nous avions besoin d'importer, nous avançons et créons une `Map`. La `target` (cible) pointe vers le container `<div>` que nous avons dans notre markup. Nous configurons la carte avec une couche image tuilée (`TileLayer`) et une `XYZSource`. Enfin, la `View` (vue) définit le centre (`center`) et le `zoom` initiaux.
+
+### Voir la carte
+
+Maintenant, notre application est prête à être testée. Ouvrons la carte fonctionnelle dans une navigateur web: {{book.workshopUrl}}/. C'est ce à quoi elle devrait ressembler:
+
+![Une carte du monde](map.png)
+
+Dans le chapitre final du workshop, nous apprendrons comment créer un "build" de production d'application pour le déploiement.