maj instructions vs nouvelle skin

- maj screenshots
- maj code html à générer
- mise en forme
- ajout images manquantes

B-integration.md

@@ -32,7 +32,7 @@ On pourrait, pour cet exercice, utiliser n'importe quel serveur http (apache, to
 
 3. **Vérifiez dans votre navigateur que la page index.html** (fournie dans ce repo) **s'affiche correctement** en ouvrant l'url http://localhost:8000. Le résultat attendu est le suivant :
 
-	<img src="images/readme/pizzaland-00.jpg" >
+	<img src="images/readme/pizzaland-00.png" >
 
 	> _**NB :** Si la page ne s'affiche pas correctement, vérifiez que vous avez bien lancé votre serveur Node avec npx dans **le bon dossier** (c'est à dire celui où se trouve le fichier `index.html`)._
 
@@ -73,17 +73,21 @@ C'est cette solution que je préconise car elle présente l'avantage de ne pas m
 ## B.3. Tester la page
 **Testez la page pour vérifier que le js est correctement chargé** : Ouvrez les outils de développement de votre navigateur (touche <kbd>F12</kbd> sur Chrome) et ouvrez le panneau "Console".
 
-Si le fichier `main.js` est correctement chargé, le texte `'welcome to Pizzaland !'` doit s'afficher dans la console. <br>
+Si le fichier `main.js` est correctement chargé, le texte `'welcome to Pizzaland !'` doit s'afficher dans la console.
+
+<img src="images/readme/pizzaland-00-console.png" >
+
 En effet, le fichier `main.js` contient l'instruction :
+
 ```js
-console.log('Welcome to Pizzaland !');
+console.log('Welcome to PizzaLand 🍕 !');
 ```
 
 Cette instruction `console.log()` permet d'afficher du texte ou des variables dans la console.
 
-> _**NB :** Si le texte ne s'affiche pas, c'est probablement que le fichier `main.js` n'est pas correctement intégré dans la page html :_
+> _**NB :** **Si le texte ne s'affiche pas**, c'est probablement que le fichier `main.js` n'est pas correctement intégré dans la page html :_
 >
-> _Ouvrez le panneau "Network"/"Réseau" des devtools puis rechargez la page en désactivant le cache navigateur : touche <kbd>CTRL</kbd>+<kbd>F5</kbd>, ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>R</kbd> selon les navigateurs. Assurez-vous que cette fois le fichier `main.js` figure bien dans la liste des fichiers téléchargés. Si ce n'est toujours pas le cas, c'est que votre balise `<script>` n'est pas correcte (vérifiez le chemin vers le fichier)._
+> _Ouvrez le panneau **"Network"**/**"Réseau"** des devtools puis rechargez la page en désactivant le cache navigateur : touche <kbd>CTRL</kbd>+<kbd>F5</kbd>, ou <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>R</kbd> selon les navigateurs. Assurez-vous que cette fois le fichier `main.js` figure bien dans la liste des fichiers téléchargés. Si ce n'est toujours pas le cas, c'est que votre balise `<script>` n'est pas correcte (vérifiez le chemin vers le fichier)._
 
 **_Pour la suite du TP, tout le code se fera dans ce fichier `main.js`, le fichier html ne devra pas être modifié !_**
 

D-chaines.md

@@ -45,10 +45,10 @@ Si ce n'est pas le cas, le choix entre guillemets simples ou double est une ques
 **Entrons dans le vif du sujet :**
 
 1. **Effacez le code contenu dans le fichier `main.js`** pour repartir d'un fichier vide.
-2. **Créez une constante appelée `nom`** et assignez lui la chaîne de caractères `Regina`
+2. **Créez une constante appelée `name`** et assignez lui la chaîne de caractères `Regina`
 3. **Créez une constante nommée `url`.** Sa valeur initiale sera la concaténation de :
 	- la chaîne de caractères `'images/'`,
-	- la valeur de la variable `nom` transformée en minuscules à l'aide de la méthode `.toLowerCase()` cf. [doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)
+	- la valeur de la variable `name` transformée en minuscules à l'aide de la méthode `.toLowerCase()` (_cf. [la doc de `toLowerCase()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase)_)
 	- et de la chaîne de caractères `'.jpg'`
 
 	Affichez la valeur de `url` dans la console, vous devez obtenir :
@@ -71,7 +71,7 @@ Si ce n'est pas le cas, le choix entre guillemets simples ou double est une ques
 
 ## D.4. Injection dans la page HTML
 
-5. **C'est le moment d'afficher le contenu de la variable `html` dans la page.**
+1. **C'est le moment d'afficher le contenu de la variable `html` dans la page.**
 
 	Même si nous n'avons pas encore vu comment manipuler la page html grâce à l'API DOM (prochains chapitres), vous trouverez ci-dessous le code qui va permettre d'injecter notre balise `<a>` dans la page. A la fin de votre code, ajoutez donc l'instruction suivante :
 	```js
@@ -83,22 +83,34 @@ Si ce n'est pas le cas, le choix entre guillemets simples ou double est une ques
 	- voir le texte 'images/regina.jpg' dans la page de votre navigateur.
 	- pouvoir cliquer sur ce texte et être redirigé vers une image de pizza !
 
-	<img src="images/readme/pizzaland-01.jpg" />
+	<img src="images/readme/pizzaland-01.png" />
 
-6. **Modifiez encore la variable html avant son affichage** en remplaçant le texte contenu dans la balise `<a>` par
-	- **une balise `<img>`** dont la source (_attribut `src`_) sera la chaîne `images/regina.jpg` valeur initiale de la variable `html`.
-	- **une balise `<h4>`** contenant le `nom` de la pizza
+2. **Modifiez encore la variable html avant son affichage** en remplaçant le texte contenu dans la balise `<a>` par
+	- **une balise `<img>`** dont la source (_attribut `src`_) sera la chaîne `images/regina.jpg`
+	- **une balise `<section>`** contenant le `name` de la pizza
 
 	Contrôlez dans l'inspecteur d'éléments que le résultat obtenu est bien :
 	```html
 	<a href="images/regina.jpg">
 		<img src="images/regina.jpg"/>
-		<h4>Regina</h4>
+		<section>Regina</section>
 	</a>
 	```
 
 	Le rendu doit être celui-ci :<br>
-	<img src="images/readme/pizzaland-02.jpg" />
+	<img src="images/readme/pizzaland-02.png" />
+
+3. **Pour améliorer un peu le rendu (_grâce aux CSS fournies_) ajoutez une balise `<article class="pizzaThumbnail">`** autour du `<a>`. Le code généré sera :
+	```html
+	<article class="pizzaThumbnail">
+		<a href="images/regina.jpg">
+			<img src="images/regina.jpg"/>
+			<section>Regina</section>
+		</a>
+	</article>
+	```
+	<img src="images/readme/pizzaland-02b.png" />
+	Ah ! C'est mieux !
 
 
 ## Étape suivante <!-- omit in toc -->

E-tableaux-objets.md

@@ -17,18 +17,24 @@ const data = ['Regina', 'Napolitaine', 'Spicy'];
 Parcourez ce tableau afin de générer 3 liens sur le modèle de celui réalisé à l'étape [D. les chaînes de caractères](./D-chaines.md) :
 
 ```html
+<article class="pizzaThumbnail">
 	<a href="images/regina.jpg">
 		<img src="images/regina.jpg"/>
-	<h4>Regina</h4>
+		<section>Regina</section>
 	</a>
+</article>
+<article class="pizzaThumbnail">
 	<a href="images/napolitaine.jpg">
 		<img src="images/napolitaine.jpg"/>
-	<h4>Napolitaine</h4>
+		<section>Napolitaine</section>
 	</a>
+</article>
+<article class="pizzaThumbnail">
 	<a href="images/spicy.jpg">
 		<img src="images/spicy.jpg"/>
-	<h4>Spicy</h4>
+		<section>Spicy</section>
 	</a>
+</article>
 ```
 
 Utilisez pour cela **au moins 2 techniques parmi les 4 suivantes** :
@@ -41,7 +47,7 @@ Utilisez pour cela **au moins 2 techniques parmi les 4 suivantes** :
 
 Le résultat obtenu sera identique dans les 4 cas :
 
-<img src="images/readme/pizzaland-03.jpg" />
+<img src="images/readme/pizzaland-03.png" />
 
 ## E.2. Les Objets littéraux
 Modifiez le tableau `data` : au lieu de 3 chaînes de caractères, on va maintenant y mettre 3 objets littéraux :
@@ -49,24 +55,24 @@ Modifiez le tableau `data` : au lieu de 3 chaînes de caractères, on va mainten
 ```js
 const data = [
 	{
-		nom: 'Regina',
+		name: 'Regina',
 		base: 'tomate',
-		prix_petite: 6.5,
-		prix_grande: 9.95,
+		price_small: 6.5,
+		price_large: 9.95,
 		image: 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
 	},
 	{
-		nom: 'Napolitaine',
+		name: 'Napolitaine',
 		base: 'tomate',
-		prix_petite: 6.5,
-		prix_grande: 8.95,
+		price_small: 6.5,
+		price_large: 8.95,
 		image: 'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300'
 	},
 	{
-		nom: 'Spicy',
+		name: 'Spicy',
 		base: 'crème',
-		prix_petite: 5.5,
-		prix_grande: 8,
+		price_small: 5.5,
+		price_large: 8,
 		image: 'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
 	}
 ];
@@ -74,10 +80,10 @@ const data = [
 
 Modifiez la boucle pour générer un code de ce type :
 ```html
-<article class="media">
+<article class="pizzaThumbnail">
 	<a href="https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300">
 		<img src="https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300" />
-		<section class="infos">
+		<section>
 			<h4>Regina</h4>
 			<ul>
 				<li>Prix petit format : 5.50 €</li>
@@ -90,7 +96,7 @@ Modifiez la boucle pour générer un code de ce type :
 
 Le rendu final devra correspondre à ceci :
 
-<img src="images/readme/pizzaland-04.jpg" />
+<img src="images/readme/pizzaland-04.png" />
 
 ***Attention au formatage des prix** (examinez bien la capture d'écran) !*
 

F-babel.md

@@ -2,6 +2,8 @@
 
 # F. Compiler avec Babel <!-- omit in toc -->
 
+<img src="images/readme/header-babel.jpg" />
+
 _**Jusque là on ne s'est pas préoccupé de la compatibilité navigateur du code que l'on a tapé.**_
 
 En revanche dans la vraie vie, si l'on veut que tous les internautes puissent utiliser notre application sans encombre, **il faut compiler notre code ES6+ en ES5**. Cette compilation se fait avec [Babel](https://babeljs.io).
@@ -26,7 +28,7 @@ L'installation de Babel se fait avec npm (Node Package Manager - l'outil fourni
 	```bash
 	npm init
 	```
-	Répondez alors aux questions qui vous sont posées (donnez le nom "pizzaland" au projet, vous pouvez ensuite taper <kbd>Entrée</kbd> pour toutes les autres questions). À la fin du questionnaire vous verrez qu'un fichier `package.json` a été créé. Celui-ci nous sera utile par la suite.
+	Répondez alors aux questions qui vous sont posées (_donnez le nom "pizzaland" au projet, vous pouvez ensuite taper <kbd>Entrée</kbd> pour toutes les autres questions_). À la fin du questionnaire vous verrez qu'un fichier `package.json` a été créé. Celui-ci nous sera utile par la suite.
 
 3. **Installez babel :**
 	```bash

G-filtres-tri.md

@@ -14,16 +14,16 @@
 A l'aide de la [méthode `.sort()` de la classe Array](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort), triez les pizzas :
 1. Par ordre alphabétique
 
-	<img src="images/readme/pizzaland-05.jpg" />
+	<img src="images/readme/pizzaland-05.png" />
 
 1. Par prix petit format croissant
 
-	<img src="images/readme/pizzaland-06.jpg" />
+	<img src="images/readme/pizzaland-06.png" />
 
 
 1. Par prix petit format croissant et en cas d'égalité, par prix grand format croissant
 
-	<img src="images/readme/pizzaland-07.jpg" />
+	<img src="images/readme/pizzaland-07.png" />
 
 
 
@@ -31,15 +31,15 @@ A l'aide de la [méthode `.sort()` de la classe Array](https://developer.mozilla
 A l'aide de la [méthode .filter()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter), n'affichez que les pizzas dont :
 1. la propriété `base` est 'tomate'
 
-	<img src="images/readme/pizzaland-08.jpg" />
+	<img src="images/readme/pizzaland-08.png" />
 
 1. le prix petit format est inférieur à 6€
 
-	<img src="images/readme/pizzaland-09.jpg" />
+	<img src="images/readme/pizzaland-09.png" />
 
 1. le nom contient deux fois la lettre "i"
 
-	<img src="images/readme/pizzaland-10.jpg" />
+	<img src="images/readme/pizzaland-10.png" />
 
 ## G.3. Destructuring