Formation Développement Web

Dates

Jour 1 - Introduction : 31 janvier 2025
Jour 2 - Pour le public : 3 février 2025
Jour 3 - Pour la structure : 6 février 2025

Intention et objectif du module

Le développement web est long et chiant, mais c'est surtout un métier à part entière. Ce module sert donc à acculturer les médiateur·ices numérique au code, à avoir les moyens de transmettre le code à leur public, et à s'outiller pour communiquer dans sa structure (ce qui est demandé par la structure employeuse), notamment en sachant déployer un CMS, ici Wordpress, et l'utiliser.
Donc, à l'issue du module, les apprenant.es sont capables d'éditer leur propre site internet.

Programme de formation

Coder par blocs avec Scratch
Schématiser l'architecture d'internet
Créer un jeu vidéo avec Stencyl
Mettre en commun des ressources pédagogiques
Installer un serveur en local XAMPP
Créer site Wordpress

1. Coder par blocs avec Scratch

Intentions pédagogiques : découvrir, comprendre et appliquer le code par blocs.

Explications

Le codage par blocs, aussi appelé "programmation visuelle", permet de créer un programme à partir de blocs, représentant des concepts ou fonctions de codes plus ou moins complexes, à manipuler et connecter facilement dans une interface visuelle.

Des éditeurs basés sur des blocs sont utilisés dans de multuples domaines :

Sites web interactifs et dynamiques. Exemple : Wordpress, un CMS (Content Management Systems, ou système de gestion de contenu) permettant de créer, modifier et gérer le contenu web sans nécessiter de connaissances approfondies en codage.
Prototypes de jeux vidéo. Exemples : Bolt de Unity, pour concevoir visuellement la logique du jeu, le comportement des personnages et les interactions sans écrire de code volumineux. Ou GDevelop pour les jeux mobiles.
Automatisation et robotique. Exemples : appareils IoT (Internet Of Things, ou l’Internet des objets) comme des montres connectées, enceintes connectées intelligentes, ou systèmes de domotique.
Data Science ou science des données. Exemples : programmation informatique, les statistiques ou intelligence artificielle. Data Science with Blockly in JupyterLab (Google).
Algorithmes d'apprentissage automatique (ou Machine Learning). Exemple : ScratchML, expérimenter des algorithmes d'apprentissage automatique, champ d'étude de l'intelligence artificielle ordinateurs la capacité d'« apprendre » à partir de donnée, résoudre des tâches sans être explicitement programmés, ssans se plonger dans un code complexe. facilement créer et entraîner des modèles.
Micro-contrôleurs. Exemple : MakeCode (Microsoft) art numérique interactif en codant des effets visuels, des animations

En gros, il n'y a pas besoin d'être expert et maîtriser une sythaxe complexe. Le codage par bloc est intuitif, ludique, cohérent et permet d'organiser et réorganiser son programme rapidement et facilement.

Le chevalier

"Le chevalier de la programmation", Jeux éducatifs : https://www.logicieleducatif.fr/jeu/le-chevalier-de-la-programmation
Objectif : Terminer le jeu.

Le chat et la souris

"Scratch", MIT : https://scratch.mit.edu/
Objectif : Créer un jeu "le chat et la souris".

Se créer un compte.
Suivre le tutoriel - prise en main : https://scratch.mit.edu/ideas "Essaie-le !".
Suivre le tutoriel - créer un jeu : (exemple) https://scratch.mit.edu/projects/825160286/.
Les participant·es votent le top 3 des meilleurs jeux présentés (critères : rapport entre l'appétence initiale au sujet et le resultat final).

2. Schématiser architecture d'Internet

Intentions pédagogiques : découvrir, comprendre et associer les mots clés de l'architecture d'internet.

Schéma

Objectif : Le groupe entier créer un schéma de l'architecture d'internet.

Diviser le groupe (travail individuel, en binômes ou sous-groupes) et distribuer tous les mots. Seul le mot "Internet" est affiché au centre du tableau blanc (tangible ou en ligne).
Chacun·e cherche la définition du des mots clés et détermine les liens.
Lorsque le temps est écoulé, chaque personne vient au tableau déposer ses mots clés et explique le lien avec les autres déjà présents. Ainsi, il est possible de dessiner autour de ces mots pour mieux illustrer son propos. Les autres peuvent donner leur avis et corriger le placement si besoin.
Exporter le schéma final et le rendre accessible.

Les mots clés peuvent être sur des post-it tangibles à accocher sur un tableau blanc ou sur un tableau blanc collaboratif en ligne à projeter.

Internet
WWW - Le Web
Routeur
Pare-feu
Switch
Serveurs informatiques
Proxy
FTP
E-Mail
Base de donnée (B2D ou BDD)
Client
Terminal
WAN
LAN
MAN
Neutralité du Net
Protocole IP
Fournisseur
Navigateur Web
Moteur de recherche
HTML
CSS
JavaScript
Page web
Page ou site statique
Page ou site dynamique
MySQL
MariaDB
PHP
Protocole de communication
HTTP
SSL
FTP
Hébergeur
VPS
Adresse IP
Localhost
Nom de domaine (NDD)
DNS
Registar
Propagation
URL
CMS
Permalien
Centre de données (data center)
Infrastructures
Réseau informatique
Services réseau
Hypertexte
Protocole de communication
Protocoles réseaux
Adresse web
Modèle OSI
Logiciels de gestion des protocoles
HTTP (127.0.0.1 : 80)
HTTPS (127.0.0.1 : 443)
TCP/IP
IP, internet protocole
Accès à internet
Données
VPN
GML
Ports réseau
Héxadécimal
Binaire

3. Créer un jeu vidéo

Intentions pédagogiques : comprendre et pratiquer la programmation de jeux vidéo, pour mieux accompagner les besoins et questionnements des publics.

Stencyl

Objectif pédagogique : Créer un plateformer.

Suivre les tutoriels ici : https://zoomacom.net/wiki/?TutorielStencyl
Faire tester son jeu à la personne à sa gauche.

S'il y a plus de temps

"Exposition pédagogique sur les jeux vidéos"", Zoomacom.
"Les métiers du jeux vidéo", Gaming Campus.
"Cartographie des métiers du numérique", La Grande École du Numérique.
"La carte Interactive - emploi et formation au numérique", La Grande École du Numérique.

4. Trouver des ressources

Intentions pédagogiques : chercher et sélectionner des ressources pédagogiques adaptées à son public.

Recherches

Objectif pédagogique : Sélectionner au moins quatre animations existantes, répondant à des critères donnés :

Typologie du public réel
Besoins du public
Contraintes du public
Moyens humains et matériels à disposition

S'il y a plus de temps

Créer une fiche projet et formuler des objectifs pédagogiques univoques.

5. Installer un serveur en local

Intentions techniques et pédagogiques :

Il n'est pas possible financièrement de mettre un VPS à disposition pour chaque apprenant·es,
Les apprenant·es pourront être autonomes pour tester leur site internet avant de payer un serveur,
C'est une porte d'entrée pour les apprenant·es intéressé·es par le développement web pour aller plus loin.

Objectif pédagogique :

Créer une base de donnée Wordpress sur un serveur en local créé avec XAMPP.

Contenu :

6. Administrer un site Wordpress

Intentions pédagogiques : réfléchir (création et organisation humaine et temporelle) et gérer (répartition et vérifications humaine et temporelle) son site internet.

Contenant

Objectif pédagogique :

Différencier un logiciel permettant de créer un serveur, un serveur, une base de données et un site internet.
Créer le compte administrateur du site Wordpress.
Identifier les fonctionnalités de base de Wordpress : thèmes, page d'accueil, écrire, prévisualiser et publier des articles, gérer les rôles et installer des extensions (plug-in).

Ressources :

https://zoomacom.net/wiki/?FormaDevWebWordpress
"Wordpress ou Wordpress.com ?" : https://zoomacom.net/wiki/?TutoWordpress

Contenu

Objectif pédagogique : Rédiger les textes de la page d'accueil et de l'article selon la méthode "donner à voir/à comprendre/à faire".
Ressources :