Objectifs du cours
Introduction général au WEB : 0,5 cours
Bonnes pratiques HTML : 2 cours
Bonnes pratiques CSS : 2 cours
Partiel HTML-CSS : 0,5 cours
Bonnes pratiques JavaScript : 3 cours
L’objectif est de savoir coder une page HTML-CSS avec du JavaScript côté client.
Plan du cours 2024-2025 - 1er semestre
J-1 Lundi 21/10 : Introduction et bases du langage
Introduction_au_WEB : Slides 1 à 28 et 44 à 47 : -> ici
Le_HTML_et_le_CSS_en_peu_de_temps : : le HTML - § 1 à 13 -> ici
Ressource pour exercice : Intranet_anthropocene : -> ici
Ressource pour exercice : Atlas anthropocene : -> ici
A faire pour la prochaine fois :
Relisez tous les documents et codes du jour :
1 : Introduction_au_WEB : Slides 1 à 28 et 44 à 47
2 : Le_HTML_en_peu_de_temps : - § 1 à 13
Coder ou recoder tous les exercices du jour (HTML sans CSS) : §4, §7, §13 : TP1 (intranet) et TP2 (w3school)
J-2 Lundi 28/10 : Introduction et bases du langage, premiers TP de rappel
Introduction_au_WEB :
Usages pro : 44-47.
Les réseaux derrière le WEB : 19- 31
Architecture logicielle : 32 à 38, surtout 34 et 37
2 TPs :
0-Sujet_TP1-intranet-atpc ->
ici
0-Sujet-TP2-w3school-css ->
ici
Eléments théoriques :
Le_HTML_et_le_CSS_en_peu_de_temps - CSS §14 : -> ici
Mise en page flex détaillée : -> ici
Media queries - design responsive : -> ici
Documents et code du jour ->
ici
A faire pour la prochaine fois :
Relisez tous les documents et codes du jour :
1 : Introduction_au_WEB : J1 + la fin
2 : Le_HTML_en_peu_de_temps : J1 (HTML) + la fin (CSS)
3 : les codes de la séance
Finir le TP1-intranet-atpc : suivez les étapes qui sont dans 0-TP.txt ->
ici
Faire le TP2-w3school-css : suivez les étapes qui sont dans TP-w3Schools-css.txt ->
ici
J-3 Lundi 4/11 : Suite (et fin ?) des rappels-présentation rapide du HTML-CSS
On revoit les éléments théoriques :
Le_HTML_et_le_CSS_en_peu_de_temps - CSS §14 : -> ici
Mise en page flex détaillée : -> ici
Media queries - design responsive : -> ici
On finit les exercices : intranet-atpc et w3school-css
Le corrigé complet de l’intranet-atpc est là : ->
ici
La page w3school à coder est ici : -> ici
Le sujet du TP est là : suivez les étapes qui sont dans TP-w3Schools-css.txt ->
ici
Documents et code du jour ->
ici
A faire pour la prochaine fois :
Relisez tous les documents et codes du jour :
1 : Le code de l’intranet anthropocène
2 : Le code de la page W3School
Finissez de coder la page W3School : le CSS et les mediaquery. Au minimum, vous faites le style 1. Vous pouvez aussi en faire un 2ème pour vous entrainer. Essayez d’obtenir un résultat très proche du modèle : regardez-le bien pour tout prendre en compte.
J-4 Lundi 18/11 : Fin du HTML - CSS. Début du JavaScript.
On regarde le travail sur le site W3School : CSS stylesheet 1. Le corrigé complet est là : -> ici
On code le CSS du stylesheet-3. La solution sera donnée ici ->
ici
Pour coder, on utilise VS Code et l’environnement de développement dans le navigateur
Début du cours JavaScript :
L’environnement de développement dans le navigateur
Le JavaScript côté client. Cours en 5 minutes ->
ici
Le cours en 5 minutes s’appuie sur des exemples qui sont dans le zip
On a fait 1, 2 et 3
TP JavaScript (pas fait) : faites fonctionner le TP w3school avec les 3 cas : stylesheet-1, style-sheet3 et no-stellsheet. On s’aidera de ce exemple : ->
ici
Documents et code du jour ->
ici
A faire pour la prochaine fois :
Relisez tous les documents et codes du jour :
1 : Les codes HTML et CSS de 4-version-stylesheet-3
2 : Les 3 premiers chapitres du cours JavaScript_en_5_minutes : Cours_JavaScript.txt
J-5 Lundi 25/11 : JavaScript - suite.
Projet : le but est de faire une application pratique : un porte-folio CDA
C’est un site pour montrer ses compétences en tant que CDA : concepteur-développeur d’applications.
Ce site sera du HTML-CSS-JavaScript. Il pourra à terme mener sur des applications réalisées et hébergées pour montrer leur fonctionnement.
C’est un site vitrine : son objectif est de montrer vos compétences, de faciliter l’obtention d’une certification CDA RNCP-6, de séduire des employeurs.
Il faut donc faire un site HTML-CSS design responsive et y intégrer du JavaScript pour dynamiser certains usages :
Des boutons pour changer certaines apparences
la date du jour
Peut-être un menu déroulant basique
Peut-être des données à trier peut-être (pour montrer que vous savez le faire.
Etc.
Le but du projet est de vous faire réfléchir de façon pratique aux compétences que vous avez acquises et qu’il vous reste à acquérir pour devenir CDA.
Côté théorie JavaScript : Dans les ressources, on trouve un cours détaillée. Sur le lien au bout de la ligne, on trouve un document présentant de la théorie élémentaire très pratique et des TP d’exemple : ici
J-6 Lundi 2/12 : JavaScript - suite.
1ère partie du cours (avant la pause à 11h00) : exemples 5, 6, 7 et 8 et cours_javascript.txt associé : ici
2ème partie du cours (après la pause) : TP de mise en pratique : ici
Vous pouvez aussi faire le TP de mise en pratique sur votre site vitrine CDA
Documents et code du jour ->
ici
A faire pour la prochaine fois :
Relire les paragraphes 7, 8 et 9 du Cours_JavaScript.txt
Relire les codes des test_6 et test_8.
Avancer le TP : vous pouvez lire le code proposé dans : 0_TP_Javascript_menu_films_debut_solutions
J-7 Lundi 9/12 : JavaScript - suite. Début AJAX.
On commence par charger les documents et codes du jour de J6. On les ouvre dans VS Code.
1ère partie du cours (avant la pause à 11h00) : exemples 9, 11, 21. Et cours_javascript.txt associé : cf. les documents et code du jour de J-6.
Exemple 21 : API et JSON :
Accès à des données JSON ->
ici
Autres exemples de données JSON ->
ici
Autres exemples de données JSON ->
ici
Autres exemples de données JSON ->
ici
Autres exemples de données JSON ->
ici
Visualisation de données JSON dans son navigateur : JSON formatter
2ème partie du cours (après la pause) : Suite du TP de mise en pratique. Cf. les documents et code du jour de J-6.
Vous pouvez aussi faire le TP de mise en pratique sur votre site vitrine CDA
Documents et code du jour ->
ici
A faire pour la prochaine fois :
Relire les paragraphes 9, 11 et 21 du Cours_JavaScript.txt
Relire les tableaux de cours : bien comprendre le format JSON en testant les fichiers proposés.
Avancer le TP. Le sujet est dans : "0_TP_Javascript_menu_films". Vous pouvez lire le code proposé dans : "0_TP_Javascript_menu_films_debut_solutions"
J-8 Lundi 16/12 : JavaScript - suite. Début AJAX.
On part de la livraison de la semaine dernière
On avance le TP
Modalités d’examens
L’examen se fera sur papier, sans machine, sans téléphone, sans réseau, sans document, sans communication avec d’autres personnes.
L’examen portera sur le HTML-CSS : vous devez savoir faire les exemples vus en cours.
L’examen portera aussi sur le Javascript côté client : vous devez savoir faire les exemples vus en cours (tests 1 à 10 (pas de menus déroulant pour l’examen). Et test 21 : AJAX en version Fetch.
Sur le site, on trouve tous les exemples de code utiles pour l’examen.
Ressources
Raccourcis VS Code ->
ici
HTML-CSS
Introduction à la programmation WEB : -> ici
Bases du HTML (ancien cours) : -> ici
Bases du CSS (ancien cours) : -> ici
Mise en page en CSS (ancien cours) : -> ici
HTML avancé (ancien cours) : -> ici
W3 School : ->
ici
W3 School CSS : ->
ici
Alsacreations : ->
ici
Mozilla HTML : ->
ici
Mozilla CSS : ->
ici
JavaScript
JavaScript, bases du langage (anciens cours) : -> ici
JavaScript 01 - Bases : article - Exemples —>
ici
JavaScript 02 - DOM - BOM - Button - Evenements - Form - Animation : article
JavaScript 03 - JQuery : article
Installations de base :
Chrome ou Firefox. Pas Edge !!!
Visual Studio Code
Usages PRO de base sur PC :
N’utilisez jamais Edge ! Soit Chrome, soit Firefox, (soit Brave).
Désinstallez One Drive
Dans votre explorateur de fichiers : affichez le détail et l’extension des fichiers
Sur PC, ayez un CCleaner installé
Sur votre barre des tâches, mettez de gauche à droite : un explorateur de fichiers, une invite de commandes, un ccleaner, un chrome, un VS Code, un sublime text
Ouvrez par défaut vos fichiers texte avec sublime text.
Utilisez toujours VS Code avec des dossiers
