Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Workshop French translation update #85

Closed
wants to merge 12 commits into from
Prev Previous commit
Next Next commit
Complete 1st French translation with end of raster and deploying content
  • Loading branch information
ThomasG77 committed Aug 27, 2017
commit 918f560a1d85eb299aa2642438a20f292477835e
13 changes: 7 additions & 6 deletions doc/fr/deploying/README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
# Déploiement

Throughout the workshop, we've been using a development server to view the examples. This is similar to the setup you would use when developing an application with the [`ol` package](https://www.npmjs.com/package/ol). When you're ready to deploy your application, you'll want to create a minified bundle of your application entry point with a build step.
Tout au long du workshop, nous utilisons un serveur de développement pour voir les exemples. Ceci est similaire à la configuration que vous utiliserez lors du développement d'une application avec le [package `ol`](https://www.npmjs.com/package/ol). Lorsque vous êtes prêt à déployer votre application, vous voudrez créer un bundle minifié de votre point d'entrée de l'application avec une étape de build.

We've been using [webpack](https://webpack.js.org/) for module bundling during development. The `webpack.config.js` at the root of the workshop directory includes webpack configuration profiles for `dev` and `prod` environments. When we started the development server with `npm start`, we were using the `dev` profile. The `prod` profile adds two webpack plugins: the [`EnvironmentPlugin`](https://webpack.js.org/plugins/environment-plugin/) and the [`BabiliPlugin`](https://github.com/webpack-contrib/babel-minify-webpack-plugin). This provides a good starting point for your `prod` build profile. Explore the other [webpack plugins](https://webpack.js.org/plugins/) to see what else you might want to bring in.
Nous avons utilisé [webpack](https://webpack.js.org/) pour le bundling de modules pendant le développement. Le `webpack.config.js` à la racine du répertoire de workshop comprend les profils de configuration du serveur web pour les environnements `dev` et `prod`. Lorsque nous avons démarré le serveur de développement avec `npm start`, nous utilisions le profil` dev`. Le profil `prod` ajoute deux plugins webpack: le [`EnvironmentPlugin`](https://webpack.js.org/plugins/environment-plugin/) et le [`BabiliPlugin`](https://github.com/webpack-contrib/babel-minify-webpack-plugin). Cela constitue un bon point de départ pour votre profil de build `prod`. Explorez les autres [plugins du site web](https://webpack.js.org/plugins/) pour voir ce que vous pourriez souhaiter apporter.

To build assets for deployment, we run our `build` script from `package.json`:
Pour créer des ressources pour le déploiement, nous exécutons notre script `build` à partir de` package.json`:

npm run build

This runs `webpack --env=prod`, but doesn't require that `webpack` is on our path.
Cela exécute `webpack --env=prod`, mais ne nécessite pas que` webpack` soit sur notre chemin.

After the build finishes, you'll have artifacts in the `build` directory. These are the assets that you would deploy to your production server (or S3, or wherever you want to host your application). You can see what the app looks like by opening the `index.html` file in your browser.
Une fois le build terminé, vous aurez des artefacts dans le répertoire `build`. Ce sont des assets que vous déployeriez sur votre serveur de production (ou S3, ou n'importe où vous souhaitez héberger votre application). Vous pouvez voir à quoi ressemble l'application en ouvrant le fichier `index.html` dans votre navigateur.

open build/index.html

That's it. You're done!
C'est tout. Vous avez terminé!

12 changes: 6 additions & 6 deletions doc/fr/raster/elevation.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
# Faire le rendu des données élévation

We're going to work with elevation data that is encoded in PNG tiles (see [the Mapbox post](https://blog.mapbox.com/global-elevation-data-6689f1d0ba65) on Terrain-RGB for more detail). For this exercise, you'll need to [sign up for a Mapbox account](https://www.mapbox.com/signup/) and use your access token for tiles.
Nous allons travailler avec des données d'élévation encodées dans les tuiles PNG (voir [le post de Mapbox](https://blog.mapbox.com/global-elevation-data-6689f1d0ba65) sur Terrain-RGB pour plus de détails). Pour cet exercice, vous devez souscrire à un compte Mapbox (https://www.mapbox.com/signup/) et utiliser votre token d'accès pour les tuiles.

Add your default public token to `main.js`:
Ajoutez votre token public par défaut à `main.js`:

```js
const key = '<your-default-public-token>';
```

We want to manipulate the elevation data before rendering, but initially we'll add the Terrain-RGB tiles to the map just to see what they look like. To do this, create an XYZ source with the Terrain-RGB URL and your access token.
Nous voulons manipuler les données d'élévation avant le rendu, mais nous allons d'abord ajouter les tuiles Terrain-RGB à la carte pour voir à quoi elles ressemblent. Pour ce faire, créez une source XYZ avec l'URL Terrain-RGB et votre token d'accès.

[import:'elevation'](../../../src/en/examples/raster/elevation.js)

Next, create a tile layer that uses the elevation source. Add this layer your map's `layers` array in `main.js`:
Ensuite, créez une couche de tuilée qui utilise la source d'élévation. Ajoutez cette couche au tableau JavaScript `layers` de votre carte dans `main.js`:

[import:'layer'](../../../src/en/examples/raster/elevation.js)

You should [now see]({{book.workshopUrl}}/) some oddly colored tiles shown over your base layer. The elevation data in the Terrain-RGB tiles is encoded in the red, green, and blue channels. So while this data isn't meant to be rendered directly, it is interesting to look at.
Vous devriez [maintenant voir]({{book.workshopUrl}}/) des tuiles bizarrement colorées affichés par dessus votre couche de fond. Les données d'élévation dans les tuiles Terrain-RGB sont encodées dans les canaux rouge, vert et bleu. Donc, alors que ces données ne sont pas censées être rendues directement, il est intéressant de les examiner.

![Terrain-RGB tiles rendered over Boston](elevation.png)
![Tuiles Terrain-RGB rendues au niveau de Boston](elevation.png)
22 changes: 11 additions & 11 deletions doc/fr/raster/raster.md
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
# Faire le rendu du niveau de la mer

In the previous step, we rendered the Terrain-RGB tiles directly on the map. What we want to do is render sea level on the map instead. And we want users to be able to adjust the height above sea level and see the adjusted height rendered on the map. We'll use a raster source to work with the elevation data directly and get the user input from an input slider on the page.
Dans l'étape précédente, nous avons rendu les tuiles Terrain-RGB directement sur la carte. Ce que nous voulons faire est de rendre le niveau de la mer sur la carte à la place. Et nous voulons que les utilisateurs puissent régler la hauteur au-dessus du niveau de la mer et voir la hauteur ajustée rendue sur la carte. Nous allons utiliser une source raster pour travailler directement avec les données d'élévation et obtenir l'entrée de l'utilisateur à partir d'un slider sur la page.

Let's add the controls to the page first. In your `index.html`, add the following label and input slider:
Ajoutons d'abord les contrôles à la page. Dans votre `index.html`, ajoutez l'étiquette suivante et le slider:

[import:'controls'](../../../src/en/examples/raster/raster.html)

Now add some style to those controls (in the `<style>` of your `index.html`):
Ajoutez maintenant un style à ces contrôles (dans le `<style>` de votre `index.html`):

[import:'style', lang:'css'](../../../src/en/examples/raster/raster.html)

Instead of directly rendering the R, G, B, A values from the Terrain-RGB tiles, we want to manipulate the pixel values before rendering. The raster source allows you to do this by accepting any number of input sources and an *operation*. This operation is a function that gets called for every pixel in the input sources. We only have one input source (elevation), so it will get called with an array of one pixel, where a pixel is a `[red, green, blue, alpha]` array. The operation also gets called with a `data` object. We'll use the `data` object to pass along the value of the input slider.
Au lieu de rendre directement les valeurs R, G, B, A des tuiles Terrain-RGB, nous voulons manipuler les valeurs des pixels avant le rendu. La source raster vous permet de faire ceci en acceptant un nombre quelconque de sources en entrée et une *opération*. Cette opération est une fonction appelée pour chaque pixel dans les sources en entrée. Nous avons seulement une source en entrée (élévation), de sorte qu'il sera appelé avec un tableau d'un pixel, où un pixel est un tableau `[red, green, blue, alpha]`. L'opération est également appelée avec un objet `data`. Nous utiliserons l'objet `data` pour transmettre la valeur du slider en entrée.

Add the function below to your `main.js`. This function decodes the input elevation datatransforming red, green, and blue values into a single elevation measure. For elevation values at or below the user selected value, the function returns a partially transparent blue pixel. For values above the user selected value, the function returns a transparent pixel.
Ajoutez la fonction ci-dessous à votre `main.js`. Cette fonction décode les données d'élévation en entréetransformant les valeurs rouge, vert et bleu en une seule mesure d'élévation. Pour les valeurs d'élévation à ou en dessous de la valeur choisie par l'utilisateur, la fonction renvoie un pixel bleu partiellement transparent. Pour les valeurs au-dessus de la valeur sélectionnée par l'utilisateur, la fonction renvoie un pixel transparent.

[import:'flood'](../../../src/en/examples/raster/raster.js)

Create a raster source with a single input source (the elevation data), and configure it with the `flood` operation.
Créez une source raster avec une seule source en entrée (les données d'élévation) et configurez-la avec l'opération `flood`.

[import:'raster'](../../../src/en/examples/raster/raster.js)

Listen for changes on the slider input and re-run the raster operations when the user adjusts the value.
Écoutez les changements sur l'entrée du slider et relancez les opérations raster lorsque l'utilisateur ajuste la valeur.

[import:'controls'](../../../src/en/examples/raster/raster.js)

The `beforeoperations` event is fired before the pixel operations are run on the raster source. This is our opportunity to provide additional data to the operations. In this case, we want to make the range input value (meters above sea level) available.
L'événement `beforeoperations` est déclenché avant que les opérations de pixel ne soient exécutées sur la source raster. C'est notre opportunité de fournir des données supplémentaires aux opérations. Dans ce cas, nous voulons que la plage de valeurs en entrée (en mètres au-dessus du niveau de la mer) soit disponible.

[import:'beforeops'](../../../src/en/examples/raster/raster.js)

Finally, render the output from the raster operation by adding the source to an image layer. Replace the tile layer with an image layer that uses our raster source (modify the `layers` array in `main.js`):
Enfin, faire le rendu depuis l'opération raster en ajoutant la source à une couche image. Remplacez la couche tuilée par une couche image qui utilise notre source raster (modifiez le tableau `layers` dans` main.js`):

[import:'layer'](../../../src/en/examples/raster/raster.js)

With all this in place, [the map]({{book.workshopUrl}}/) should now have a slider that let's users control changes in sea level.
Avec tout cela en place, [la carte]({{book.workshopUrl}}/) doit maintenant avoir un slider qui permet aux utilisateurs de contrôler les changements du niveau de la mer.

![Sea level rise in Boston](raster.png)
![Montée de la mer dans Boston](raster.png)