Contenu : Structure d'un projet Web - EDI
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Contenu :
• Structure d’un projet Web
• EDI
• Micro-projets
CFP Arts Genève
Johann Sievering https://cfparts.ch/
v05
OBJECTIFS du COURS
Structure d’un projet Web et environnement
Découverte d’un EDI
Codes JavaScript
Exemples de codes JavaScript
Objectifs :
➢ Savoir structurer un projet Web simple et préparer son environnement
➢ Savoir préparer ses fichiers *.html, *.css, *.js et ressources
➢ Être capable d’écrire des codes JavaScript
➢ Être capable d’élaborer un projet Web
page 2 sur 17 – v05 johann.sievering@edu.ge.ch
STRUCTURE D’UN PROJET WEB page 3 sur 17 – v05 johann.sievering@edu.ge.ch
Répertoires (dossiers)
➢ Afin de conserver une uniformité tout au long du cours, je
vous propose de structurer tous les projets ainsi :
Racine du projet
css
style.css
js
script.js
res
audio
img
video
index.html
page 4 sur 17 – v05 johann.sievering@edu.ge.ch
Liste des tâches de votre projet
A vous de jouer !
MON PREMIER ENVIRONNEMENT :
Sur votre machine,
créez la structure de projet
vue dans ce chapitre.
page 5 sur 17 – v05 johann.sievering@edu.ge.ch
ENVIRONNEMENT DE DÉVELOPPEMENT (EDI) Environnement de Développement Intégré page 6 sur 17 – v05 johann.sievering@edu.ge.ch
Introduction
➢ EDI («Environnement de Développement Intégré»)
➢ IDE («Integrated Development Environment»)
➢ Ensemble complet d’outils de programmation intégrés dans
une seule application :
o Concevoir;
o Ecrire du code, avec des facilitateurs;
o Tester;
o Compiler, exécuter;
o Debugger;
o Documenter;
o Publier;
o Gérer les versions;
o Travail en équipe;
o Etc.
page 7 sur 17 – v05 johann.sievering@edu.ge.ch
EDI : Visual Studio Code
➢ Orienté développement technologies Web ;
➢ Codage, mais pas seulement : HTML, CSS, JavaScript, PhP ;
➢ Editeur de codes multi-plateforme (Windows, Mac et Linux) ;
➢ Open source et gratuit, développé par Microsoft ;
➢ Fonctionnalités :
o IntelliSense :
▪ une technologie avancée qui propose, outre à la mise en évidence de la syntaxe et la complétion
automatique du code, un système d'inférence articulé et basé directement sur la logique du code
source ;
oIntégration native avec Git :
▪ le logiciel implémente le système de gestion de versions Git directement dans l'interface de l'éditeur,
ce qui représente un avantage pour pouvoir effectuer les opérations de versioning plus aisément ;
oLigne de commande intégrée :
▪ toujours dans l'interface de l'éditeur, il est possible de lancer la ligne de commande et exécuter toutes
les commandes disponibles sur le système d'exploitation ;
oEco-système d'extensions :
▪ les extensions sont au coeur du projet et il existe même un système assez simple pour
développer/publier ses propres extensions
oDebugging intégré :
▪ pour les développeurs plus avancés, il existe également des fonctionnalités de débugging directement
à l'intérieur de l'éditeur.
page 8 sur 17 – v05 johann.sievering@edu.ge.chIDE : Visual Studio Code
https://code.visualstudio.com/
page 9 sur 17 – v05 johann.sievering@edu.ge.chIDE : Visual Studio Code
➢ Tutos
o https://code.visualstudio.com/
➢ Tour
o https://www.youtube.com/watch?v=RwO62RAuZPA
➢ Débuter HML5
o https://www.youtube.com/watch?v=1OyRRxmsNtY
➢ Installation et Astuces Indispensables
o https://www.youtube.com/watch?v=1Z1JCuwXmiQ
page 10 sur 17 – v05 johann.sievering@edu.ge.chListe des tâches de votre projet
A vous de jouer !
5 min
Démarrer VSC :
Créez les fichiers :
index.html, style.css, script.js
page 11 sur 17 – v05 johann.sievering@edu.ge.chMICRO-CODES JAVASCRIPT page 12 sur 17 – v05 johann.sievering@edu.ge.ch
Enoncé général pour tous les codes
➢ Phase I
o Lire attentivement l’énoncé ;
o Ressortir
▪ Les données (variables et constantes) ;
▪ Le type de chaque variable;
o Elaborer un logigramme ;
o Traduire chaque étape du logigramme en instruction.
➢ Phase II
o Créer une structure de projet ;
o Nommer votre « workspace »
▪ Cours04_Exercice01 02 03 …
o Utiliser l’EDI pour produire votre code ;
o Tester votre code.
page 13 sur 17 – v05 johann.sievering@edu.ge.chPratique (1/3) Pratique 01 : Addition 1) Ajouter deux nombres; 2) Afficher le résultat de la somme. Pratique 02 : La multiplication 1) Multiplier 3 nombres ; 2) Afficher les trois nombres et leur produit. Pratique 03 : Bienvenue 1) Saisir le prénom ; 2) Concaténer «Bienvenue» avec le prénom saisi ; 3) Afficher le résultat de la concaténation. Pratique 04 : Es-tu majeur.e ? 1) Saisir l’âge ; 2) Vérifier si la personne est majeure : est majeur si plus grand ou égal à 18 ans ; 3) Si la personne est majeure : écrire MAJEUR. Sinon, écrire MINEUR. page 14 sur 17 – v05 johann.sievering@edu.ge.ch
Pratique (2/3)
Pratique 05 : saisies de 3 articles dans un site eCommerce
1) Saisir de manière consécutive trois articles
• Nom de l’article (p. ex. ‘crayon’, ‘peinture’, ‘carton’).
2) Afficher les trois articles les uns sous les autres.
Pratique 06 : le livret de 6
1) Afficher le livret de 6 de la manière suivante :
1x6=6
2 x 6 = 12
…
12 x 6 = 72
Pratique 07 : Afficher n’importe quel livret
1) Reprendre l’exercice 02 ;
2) Saisir le livret concerné ;
3) Afficher le livret.
page 15 sur 17 – v05 johann.sievering@edu.ge.chPratique (3/2) Pratique 08 : Tant que cela n’est pas valide, il faut recommencer 1) Le mot de passe est défini : « id4 » ; 2) L’utilisateur saisit le mot de passe ; 3) Tant que le mot de passe n’est pas valide, redemander une saisie ; 4) Lorsque le mot de passe est correct, afficher un message de bienvenue. Pratique 09 : jeu – trouver le nombre 1) Un nombre X est tiré au hasard entre 1 et 10 ; 2) Le joueur saisit son choix ; 3) Le programme indique si le choix est plus petit ou plus grand que le nombre X ; 4) Si le joueur devine le nombre, un message de félicitations s’affiche. page 16 sur 17 – v05 johann.sievering@edu.ge.ch
QUESTIONS / RÉPONSES
CFPA_ID4_04.05_EDI_MicroProjets_(2021-09-24.10.01)_JSI_v05
page 17 sur 17 – v05 johann.sievering@edu.ge.chVous pouvez aussi lire
