Web

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

URL ?

Différence entre exécuter un fichier soit et sur un serveur.

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. 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

https://getbootstrap.com/

Comment :

• cdn
• téléchargement des fichiers
• node_modules (npm pour gérer des paquets et utilisation de npm sans node pour le front)

Si vous avez des soucis avec l'exécution des scripts powershell : https://www.it-connect.fr/autoriser-lexecution-de-scripts-powershell/

Modifier votre page animal préféré avec bootstrap

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

Serveur web

Bases de réseau

Avant de vous langer dans la création de serveurs web, commençons par dégrossir un peut la notion de réseau et de protocole.

Créer un serveur web

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

Gestion des données

Lecture asynchrone

La lecture de donnée est un processus asynchrone et doit être traité avec des promesses :

La suite du projet numérologie qui intègre une route et échange des données avec le serveur.

Gestion de données Serveur

Gestion de données Clients

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/...