Différences

Ci-dessous, les différences entre deux révisions de la page.

--- outils:vscode:web [2021/08/11 09:19] – modification externe 127.0.0.1
+++ outils:vscode:web [2023/09/12 16:05] (Version actuelle) – phil
@@ Ligne 1: / Ligne 1: @@
-{{ :suivant.png?nolink&30|}} {{ :retour.png?nolink&30|}} [[web:accueilweb|{{ :iconemaison.jpg?nolink&30|Sommaire Web}}]]
+[[web:accueilweb|{{ :iconemaison.jpg?nolink&25|Sommaire Web}}]]
-===== Préparer un projet de site Web avec l'IDE VSCode  =====
+==== IDE VSCode - Préparer un projet de site Web ====
-[Mise à jour le 4/9/2020]
+[Mise à jour le 12/9/2023]
-{{ :arduino:vscode.png?nolink&150|}} {{  :web:web.png?nolink&150|}}
   * **Lien**
-    * **Site** Visual Studio Code : <html><a href="https://code.visualstudio.com/" target="_blank">lien</a></html>
+    * **Site** <html><a href="https://code.visualstudio.com/" target="_blank"> Visual Studio Code</a></html>
   * **Lecture connexe**
     * Installation du logiciel : voir les **généralités** sur le [[outils:vscode:accueilvscode|Wiki VSCode]]
+----
-===== 1. Visual Studio Code =====
+=== 1. Visual Studio Code ===
 **Visual Studio Code** est un **éditeur de code source** léger, mais puissant, disponible pour **Windows**, macOS et Linux. Il est livré avec un support intégré pour JavaScript, TypeScript et Node.js et possède des extensions pour d'autres langages (tels que Arduino, C++, C#, Java, Python, PHP, Go etc.) et des runtimes (.NET et Unity) .
 **L'interface utilisateur**
-<note>Comme beaucoup d'autres éditeurs, VS Code présente un **explorateur** sur la gauche de son interface montrant tous les fichiers et dossiers auxquels vous avez accès, un **éditeur** sur la droite, montrant le contenu des fichiers que vous avez ouverts.</note>
+<callout type="primary" icon="true">Comme beaucoup d'autres éditeurs, VS Code présente un **explorateur** sur la gauche de son interface montrant tous les fichiers et dossiers auxquels vous avez accès, un **éditeur** sur la droite, montrant le contenu des fichiers que vous avez ouverts.</callout>
 {{ :arduino:uivscode.jpg?nolink |}}
@@ Ligne 27: / Ligne 28: @@
   * **La barre d’état** (Status Bar) donne des informations sur le projet ouvert et les fichiers que vous modifiez.
-<note>Chaque fois que vous chargez un projet dans VS Code, il apparaît dans le **même état** que lors de sa dernière fermeture. Le dossier, la disposition et les fichiers ouverts sont conservés.</note>
+<callout type="primary" icon="true">Chaque fois que vous chargez un projet dans VS Code, il apparaît dans le **même état** que lors de sa dernière fermeture. Le dossier, la disposition et les fichiers ouverts sont conservés.</callout>
-===== 2. Projet de site Web =====
+=== 2. Projet de site Web ===
 Le logiciel et ses extensions étant installés sur votre PC, vous allez découvrir son utilisation à travers l'activité développée dans la suite du document. Nous nous fixons l'objectif suivant :
-<note warning>Préparer VS Code à un **projet de site Web**. C'est à dire : créer l'arborescence des dossiers d'un projet et concevoir les templates .html et .css .</note>
+<callout type="warning" icon="true">Préparer VS Code à un **projet de site Web**. C'est à dire : créer l'arborescence des dossiers d'un projet et concevoir les templates .html et .css .</callout>
 ----
@@ Ligne 43: / Ligne 44: @@
 ----
-=== Étape 1 : créer un dossier===
+== Étape 1 : créer un dossier ==
-    * Effectuez un clic droit sur le bureau du PC et créez un dossier (**Nouveau** -> **Dossier**) que vous nommerez **//MonSitedeTest//**.
+    * Effectuez un clic droit dans le dossier **www** de votre compte sur le NAS_SIN et créez un dossier (**Nouveau** -> **Dossier**) que vous nommerez **//MonSitedeTest//**.
-<note>Avec l'IDE VS Code, un **projet** de site Web doit être contenu dans un **dossier**.</note>
+<callout type="primary" icon="true">Avec l'IDE VS Code, un **projet** de site Web doit être contenu dans un **dossier**.</callout>
-===Étape 2 : placer le dossier dans Visual Studio Code===
+== Étape 2 : placer le dossier dans Visual Studio Code ==
-    * Ouvrez **VSCode** en cliquant sur l'icône {{:arduino:vscodeico.png?nolink&25|}} présente dans la **barre des tâches** du bureau.
+  * Ouvrez **VSCode** en cliquant sur l'icône {{:arduino:vscodeico.png?nolink&25|}} présente dans la **barre des tâches** du bureau.
-    * Faites glisser le dossier **//MonSitedeTest//** dans VSCode.
+  * Dans le menu, sélectionnez **Fichier -> Ouvrir le dossier** et entrez le chemin d'accès à **//MonSitedeTest//**.
+    * __Exemple__
+{{ :outils:vscode:bdialoguedossier.png?nolink |}}
+  * Sélectionez **//MonSitedeTest//** et cliquez sur {{:outils:vscode:bpselec.png?nolink|}} et autoriser un éventuel message de sécurité
+  * Le dossier doit apparaître dans VSCode comme ci-dessous.
-===Étape 3 : créer les sous-dossiers===
+== Étape 3 : créer les sous-dossiers ==
   * Dans la **barre d'activité**, cliquez sur l'icône **Explorateur** si celui-ci n'apparaît pas comme ci-dessous. {{ :outils:vscode:explorateur.png?nolink |}}
@@ Ligne 62: / Ligne 67: @@
   * Répétez l'opération pour les autres dossiers du cahier des charges.
-===Étape 4 : Créer les fichiers===
+== Étape 4 : Créer les fichiers ==
   * Cliquez sur l'icône "//nouveau fichier//" représentée ci-dessous et nommez-le //index.html//.
 {{ :web:fichiervscode.png?nolink |}}
@@ Ligne 71: / Ligne 76: @@
 {{ :outils:vscode:sitedetest.png?nolink |}}
-===Étape 5 : Créer la structure de la page Web===
+== Étape 5 : Créer la structure de la page Web ==
   * Sélectionnez le fichier **index.html** dans l'explorateur.
@@ Ligne 109: / Ligne 114: @@
 </code>
-===Étape 6 : Positionner les fenêtres dans l'éditeur===
+== Étape 6 : Positionner les fenêtres dans l'éditeur ==
-<note tip>Lorsque la taille de l'écran le permet, il est pratique de disposer, en côte à côte, **au moins deux fenêtres** dans l'éditeur.</note>
+<callout type="tip" icon="true">Lorsque la taille de l'écran le permet, il est pratique de disposer, en côte à côte, **au moins deux fenêtres** dans l'éditeur.</callout>
 //Exemple// : travail simultané sur les fichiers index.html et style.css.