Web

Cours de développement web. On y verra la partie front, le back, la gestion d'une API.

Trinité html/css/js

Découverte d'html

1. Introduction avec les outils de développement
2. Introduction à html chez soit dans un seul fichier
3. Différence entre exécuter un fichier soit et sur un serveur : Qu'est qu'une url ?
4. Projet html

Découverte de css

1. Introduction à css
2. Unités et couleurs
3. Sélecteurs css
4. modèle de boîtes
5. balise anonymes
6. positionnement
7. Projet css
8. flex + grid (TBD)

• ajouter animations et fin css de ce cours https://web.dev/learn/css/
• TBD à présenter :
  • flex + grid
  • bootstrap

Gestion des fichiers

Ayez :

1. un dossier spécifique où vous rangez tout votre site
2. à l'intérieur de ce dossier, le fichier index.html est l'entrée de votre site
3. ayez des dossiers spécifiques pour ranger les différents types de fichiers que vous utiliserez

Bibliothèques css

• exercice à présenter

exercices : bibliothèque css. Utilisation avec un cdn.

• bootstrap
• lib à la mode en 2023
• ...

Comment :

• cdn
• téléchargement des fichiers (on verra plus tard comment faire mieux avec npm)
• node_modules (npm pour gérer des paquets et utilisation de npm sans node pour le front)

Découverte de Javascript

1. Bases de javascript
2. Manipuler l'arbre DOM en javascript
3. gestion des événements

• à faire : partie 1 niveau 2 et changer la lib css par bootstrap. A présenter sur le site perso
• éxo à présenter : js avec node. https://www.w3schools.com/js/js_graphics_d3js.asp

Projet front

Gestion des données

1. Lire des données

Serveur web

Avant de vous langer dans la création de site web, lisez le lien suivant qui vous donnera les bases réseaux nécessaire pour comprendre ce qui va suivre :

3. Serveur web

à faire : décathlon, faire un client/serveur : tous

Gestion de données Serveur

1. côté serveur
2. utilisation de bases de données

Gestion de données Clients

1. côté client
2. cookies

Projets

Les projets de cette partie ont vocation à :

• illustrer le cours
• apporter des bonnes pratique de développement
• montrer des astuces et autres utilisation adéquates de structures de code

A vous : Décathlon

• règles :
  • sur le site du créateur : https://www.knizia.de/wp-content/uploads/reiner/freebies/Website-Decathlon.pdf
  • en français : http://www.jeuxprintandplay.fr/Fiches jeux/Fiche jeu Decathlon.html
• supports pour y jouer en vrai : http://juegosrollandwrite.com/remake-reiner-knizias-decathlon/

Choisissez un sport et faite toute la partie jet de dés côté serveur pour éviter la triche.
Ne stockez pas de données côté serveur.

Certains présenteront la fois d'après.

Numérologie

Ce projet en 5 parties (dont les 3 premières sont des support applicatif du cours) vous montrent la création complète d'un petit site web avec une partie front, une partie back et des données.

Commentaires

TBD : à mettre en œuvre

Pour aller plus loin

TBD :

• pré-processeur : less /SCSS
• post-processeur : postcss (exemple de tailwindcss)
• packageur front.
• générateur de front (eleventy)
• angular/vue/...