diff --git a/README.md b/README.md
index f381cd630e4d51b0990d3a15b1d2f5bb04ed3035..24633acb5efa289bf025df3b055440186ab24572 100644
--- a/README.md
+++ b/README.md
@@ -7,27 +7,57 @@
- et en profiter pour poser les bases de l'application ***"Pizzaland"*** 🍕 que nous développerons tout au long des différents TPs
## Préparatifs
-1. **Créer un dossier pour ce TP et y placer le contenu du dossier de démarrage fourni dans ce repo.**
-2. **Lancer un serveur http dans le dossier créé** :
+1. **Clonez ce repo dans un dossier de votre choix :**
```bash
- cd /chemin/vers/votre/dossier/demarrage
- python3 -m http.server 8000
- ```
- python se met alors en attente d'une connexion http et affiche une ligne du type :
- ```bash
- Serving HTTP on 0.0.0.0 port 8000 ...
+ mkdir ~/ws-js
+ git clone https://gitlab.univ-lille.fr/js/tp1.git ~/ws-js/tp1
```
- **NB:** *Si vous utilisez votre propre machine et que vous ne disposez pas de python3, vous pouvez installer un serveur http comme [XAMPP](https://www.apachefriends.org/fr/index.html), placer vos fichiers le dossier `htdocs` du répertoire d'installation puis tester votre page sur http://localhost.*
-3. **Vérifier dans le navigateur que la page index.html fournie s'affiche correctement** en ouvrant l'url http://localhost:8000. Le résultat attendu est le suivant : <br><a href="images/readme/pizzaland-00.jpg"><img src="images/readme/pizzaland-00.jpg" width="80%"></a>
+2. **Lancez un serveur http dans le dossier du TP**.
+
+ Pour consulter notre appli web dans un navigateur, il nous faut un serveur http. On pourrait, pour cet exercice, utiliser n'importe quel serveur http (apache, tomcat, etc.) mais je vous propose d'utiliser Node.JS (déjà installé sur les machines des salles de TP) et 2 utilitaires qui fournis avec : [npm (Node Package Manager)](https://fr.wikipedia.org/wiki/Npm) et [npx](https://www.npmjs.com/package/npx).
+
+ ***NB**: Si vous utilisez votre propre machine, installez la dernière version de Node : https://nodejs.org/en/download/current/*
+
+ 1. **Pour commencer, configurez le proxy :**
+ ```bash
+ npm config set proxy http://cache.univ-lille1.fr:3128
+ ```
+
+ 2. **Lancez un serveur http avec npx** :
+ ```bash
+ cd ~/ws-js/tp1
+ npx serve -l 8000
+ ```
+ Node télécharge alors le paquet "serve" puis le lance dans le dossier tp1. Node se met alors en attente de connexions http et affiche quelque chose comme ceci :
- *Si la page ne s'affiche pas correctement, vérifiez que vous avez bien lancé python dans le dossier de démarrage, c'est à dire celui où se trouve le fichier `index.html`.*
-4. **Installer un éditeur de code optimisé pour le développement web et particulièrement le JS moderne**. Je vous recommande notamment [Visual Studio Code](https://code.visualstudio.com/) (vscode). C'est un éditeur de code opensource et développé avec [Electron](https://electronjs.org/), c'est donc un outil qui est lui-même développé en JS !
+ <img src="images/readme/npx-serve.gif" />
- Pour l'installer sur Linux en mode portable (sans les droits d'admin) téléchargez la version .targz [ici](https://code.visualstudio.com/docs/?dv=linux64), décompressez la dans le dossier de votre choix, puis créez un sous-dossier nommé `"data"` dans le répertoire de vscode. Lancer enfin l'exécutable "code".
- <br>Il ne reste plus qu'à ouvrir le dossier du projet en le glissant dans la fenêtre de vscode.
- **Raccourcis clavier utiles :**
+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 : <br><a href="images/readme/pizzaland-00.jpg"><img src="images/readme/pizzaland-00.jpg" width="80%"></a>
+
+ *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`).*
+
+4. **Installez un éditeur de code optimisé pour le développement web et particulièrement le JS moderne**. L'un des éditeurs les plus populaires actuellement est [Visual Studio Code](https://code.visualstudio.com/) (vscode). C'est un éditeur opensource et développé avec [Electron](https://electronjs.org/), c'est donc un outil qui est lui-même développé en JS !
+
+ Malheureusement des questions de licence liées à Microsoft [plus ou moins obscures](https://vscodium.com/#why) viennent ternir un peu le tableau. Je vous conseille donc d'utiliser la distribution "vraiment opensource" du logiciel qu'est **[VSCodium](https://vscodium.com/)** :
+
+ **Pour l'installer sur Linux en mode portable (sans les droits d'admin) :**
+ - téléchargez la version "linux x64" disponible sur https://github.com/VSCodium/vscodium/releases/latest.
+ - décompressez-la dans le dossier de votre choix,
+ - créez un sous-dossier nommé `"data"` et `"data/tmp"` dans le répertoire de vscodium. Lancer enfin l'exécutable "code".
+ - ajoutez le dossier `"bin"` à votre path :
+ ```bash
+ cd chemin/vers/vscodium
+ export PATH=$PATH:$(pwd)/bin
+ ```
+ - vous pouvez maintenant ouvrir VSCodium dans le dossier de votre projet :
+ ```bash
+ cd ~/ws-js/tp1
+ codium .
+ ```
+
+ **Les 3 raccourcis clavier à connaître :**
- <kbd>CTRL</kbd>+<kbd>P</kbd> : ouvrir un fichier à partir de son nom
- <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>P</kbd> : lancer n'importe quelle commande des menus.
- <kbd>CTRL</kbd>+<kbd>/</kbd> : commenter/décommenter
@@ -35,10 +65,10 @@
## A. Intégration du JS dans la page
-1. **Inclure le fichier `main.js` dans le fichier `index.html`** à l'aide d'une balise `<script>`. (*Pour ouvrir le fichier dans vscode, utilisez le raccourci* <kbd>CTRL</kbd>+<kbd>P</kbd>)<br>
+1. **Inclure le fichier `main.js` dans le fichier `index.html`** à l'aide d'une balise `<script>`. (*Pour rappel, pour ouvrir le fichier dans vscodium, utilisez le raccourci* <kbd>CTRL</kbd>+<kbd>P</kbd>)<br>
Comme vu pendant le cours il existe plusieurs manières d'intégrer du code JavaScript dans une page HTML :
- - *en "inline"* c'est à dire directement dans les attributs d'une balise. Dans l'exemple ci-dessous le code JS s'exécutera lorsque l'utilisateur cliquera sur le lien :
+ - *en "inline"* c'est à dire directement dans les attributs d'une balise. Dans l'exemple ci-dessous, le code JS s'exécutera lorsque l'utilisateur cliquera sur le lien :
```html
<a href="#" onclick="alert('Welcome to Westeros');return false;">
GOT
@@ -57,10 +87,11 @@
**Attention :** Pour éviter que le chargement du fichier JS ne bloque le chargement de la page HTML (comportement par défaut), il existe 2 solutions :
- placer la balise `<script>` en toute fin de fichier html, juste **avant** la balise fermante `</body>`
- placer la balise `<script>` dans le `<head>` du fichier, mais y ajouter un attribut **`defer`** (cf. [doc](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer))
- C'est cette dernière solution que je préconise car elle présente l'avantage de ne pas mélanger le contenu du document (le `<body>`) avec des informations annexes comme le chargement de scripts JS (qui relèvent plutôt du `<head>`) par ailleurs le support navigateur est très bon (IE10, Android 3+, iOS 5+, etc.) cf. https://caniuse.com/#feat=script-defer :
+ C'est cette dernière solution que je préconise car elle présente l'avantage de ne pas mélanger le contenu du document (le `<body>`) avec des informations annexes comme le chargement de scripts JS (qui relèvent plutôt du `<head>`) par ailleurs le support navigateur est très bon (IE10, Android 3+, iOS 5+, etc.) cf. https://caniuse.com/#feat=script-defer
+
+2. **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".
-2. **Testez la page pour vérifier que le js est correctement chargé** : Ouvrir les outils de développement de votre navigateur (touche <kbd>F12</kbd> sur Chrome) et ouvrir le panneau "Console".
-<br>Si le fichier `main.js` est correctement chargé, le texte 'welcome to PizzaLand 🍕 !' doit s'afficher dans la console. En effet, le fichier main.js contient l'instruction
+ Si le fichier `main.js` est correctement chargé, le texte 'welcome to PizzaLand 🍕 !' doit s'afficher dans la console. En effet, le fichier main.js contient l'instruction
```js
console.log('Welcome to PizzaLand 🍕 !');
```
diff --git a/images/readme/npx-serve.gif b/images/readme/npx-serve.gif
new file mode 100644
index 0000000000000000000000000000000000000000..96fef1deccb50b65248b5a04166864fb296acdb5
Binary files /dev/null and b/images/readme/npx-serve.gif differ