maj screenshots

B-poo.md

@@ -148,7 +148,7 @@ Pour pouvoir utiliser ces syntaxes, nous allons modifier la configuration de Bab
 	```
 	*Pour ne pas alourdir trop le code de la méthode render() je vous recommande de créer une nouvelle méthode `renderAttribute()` -appelée dans la méthode `render()`- qui va être en charge du rendu de l'attribut html.*
 
-	Testez ce nouveau code, le rendu devra cette fois être :<br><a href="images/readme/pizzaland-03.jpg"><img src="images/readme/pizzaland-03.jpg" width="80%"></a>
+	Testez ce nouveau code, le rendu devra cette fois être :<br><a href="images/readme/pizzaland-03.png"><img src="images/readme/pizzaland-03.png" width="80%"></a>
 ## B.4. Héritage : La classe Img
 1. **Créez maintenant une nouvelle classe `Img`** qui hérite de `Component` et dont le constructeur s'utilise comme ceci :
 	```js
@@ -158,7 +158,7 @@ Pour pouvoir utiliser ces syntaxes, nous allons modifier la configuration de Bab
 	```js
 	document.querySelector( '.pizzasContainer' ).innerHTML = img.render();
 	```
-	Le rendu doit être identique à la capture précédente : <br><a href="images/readme/pizzaland-03.jpg"><img src="images/readme/pizzaland-03.jpg" width="80%"></a>
+	Le rendu doit être identique à la capture précédente : <br><a href="images/readme/pizzaland-03.png"><img src="images/readme/pizzaland-03.png" width="80%"></a>
 
 ## Étape suivante
 Si vous avez terminé cette partie sur la POO, il est l'heure de mettre en place les modules dans la partie suivante : [C. Les modules](C-modules.md).
\ No newline at end of file

C-modules.md

@@ -76,9 +76,9 @@ Dans un premier temps nous ferons abstraction de ces questions de compatibilité
 	export default function checkValue(value){...} // OK aussi !
 	```
 
-2. **Compilez votre code et testez la page dans le navigateur** : le résultat doit être identique à celui obtenu précédemment :<br><a href="images/readme/pizzaland-05.jpg"><img src="images/readme/pizzaland-05.jpg" width="80%"></a>
+2. **Compilez votre code et testez la page dans le navigateur** : le résultat doit être identique à celui obtenu précédemment :<br><a href="images/readme/pizzaland-03.png"><img src="images/readme/pizzaland-03.png" width="80%"></a>
 
-3. **Ouvrez l'onglet Réseau/Network des devtools, vous devez normalement voir le chargement automatique des différents modules** (une ligne par fichier JS) :<br><a href="images/readme/pizzaland-06-modules.jpg"><img src="images/readme/pizzaland-06-modules.jpg" width="80%"></a>
+3. **Ouvrez l'onglet Réseau/Network des devtools, vous devez normalement voir le chargement automatique des différents modules** (une ligne par fichier JS) :<br><a href="images/readme/pizzaland-06.png"><img src="images/readme/pizzaland-06.png" width="80%"></a>
 
 ## C.3. Rendre les modules compatibles avec les vieux navigateurs
 
@@ -128,7 +128,7 @@ Comme vu en cours, le bundler le plus employé en JS est [Webpack](https://webpa
 	```
 5. **Lancez la compilation** : stoppez le watch précédent (<kbd>CTRL</kbd>+<kbd>C</kbd>), effacez tout le contenu du dossier `build` et relancez la compilation à l'aide de la commande `npm run watch` (*qui lancera cette fois webpack et plus Babel*)
 
-6. **Enfin, vérifiez dans le navigateur que la page s'affiche toujours** et que dans l'onglet "Réseau"/"Network" vous n'avez maintenant bien plus qu'un seul fichier JS téléchargé par le navigateur : le `build/main.bundle.js`<a href="images/readme/pizzaland-07-modules-webpack.jpg"><img src="images/readme/pizzaland-07-modules-webpack.jpg" width="80%"></a>
+6. **Enfin, vérifiez dans le navigateur que la page s'affiche toujours** et que dans l'onglet "Réseau"/"Network" vous n'avez maintenant bien plus qu'un seul fichier JS téléchargé par le navigateur : le `build/main.bundle.js`<a href="images/readme/pizzaland-07.png"><img src="images/readme/pizzaland-07.png" width="80%"></a>
 
 ## C.4. mode dev vs mode prod
 

D-poo-avancee.md

@@ -47,7 +47,7 @@
 	);
 	document.querySelector( '.pizzasContainer' ).innerHTML = c.render();
 	```
-	doit afficher la page suivante :<br><a href="images/readme/pizzaland-04.jpg"><img src="images/readme/pizzaland-04.jpg" width="80%"></a>
+	doit afficher la page suivante :<br><a href="images/readme/pizzaland-04.png"><img src="images/readme/pizzaland-04.png" width="80%"></a>
 
 3. **Créez une classe `PizzaThumbnail`** (dans `js/components/PizzaThumbnail.js`) qui hérite de la classe `Component` :
 	+ le constructeur prend en paramètre un objet nommé `pizza` dont le format correspond à celui d'un élément du tableau `data` (cad. propriétés `nom`, `base`, `prix_petite`, `prix_grande` et `image`)
@@ -72,6 +72,7 @@
 		const pt = new PizzaThumbnail(data[0]);
 		document.querySelector( '.pizzasContainer' ).innerHTML = pt.render();
 		```
+		<br><a href="images/readme/pizzaland-04b.png"><img src="images/readme/pizzaland-04b.png" width="80%"></a>
 
 ## D.2. La classe HomePage
 
@@ -82,7 +83,7 @@
 
 	***NB:** en théorie, un simple override du constructor et l'utilisation de la méthode [Array.map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) doivent suffire !*
 
-	Le résultat attendu est le suivant :<br><a href="images/readme/pizzaland-05.jpg"><img src="images/readme/pizzaland-05.jpg" width="80%"></a>
+	Le résultat attendu est le suivant :<br><a href="images/readme/pizzaland-05.png"><img src="images/readme/pizzaland-05.png" width="80%"></a>
 
 ## D.3. *Propriétés et méthodes statiques :* La classe PageRenderer
 1. Créez une classe `Page` (dans un module `js/pages/Page.js`)  :