Internet & atelier numérique

Exemple interactif

Animation principale

Le voyage d’une WebApp

https://

Navigateur Chrome, Safari, Firefox

DNS Annuaire d’Internet

Serveur Infomaniak ou MAMP

PHP Logique serveur

MySQL Mémoire de l’app

Affichage Page visible

Explication simple

Adresse saisie

L’utilisateur tape une adresse dans le navigateur.

Mécanisme réel

Le navigateur reçoit une URL et prépare une requête.

Exemple technique

https://canalalpha.ch

Zone technique

Ce que les acteurs échangent

// Les échanges apparaissent ici pendant la simulation.

Explication simple

HTTP ou HTTPS : pourquoi y a-t-il un S ?

Connexion et confidentialité

Le S signifie Secure

Mode HTTP

HTTP

HTTP signifie HyperText Transfer Protocol. C’est la règle de conversation entre le navigateur et le serveur.

HTTPS

HTTPS signifie HyperText Transfer Protocol Secure. Le S veut dire Secure : les données sont chiffrées pendant le transport.

Navigateur

http://academy.test/login

Login Mot de passe

Serveur

Arrivée serveur

En attente

Les données apparaîtront ici à l’arrivée.

En HTTP, les informations voyagent en clair. Une personne placée sur le trajet pourrait les lire.

Zone réseau Le trajet entre le navigateur et le serveur

Sortie navigateur Trajet réseau Entrée serveur

👀 Observateur réseau Il voit passer les données sur le trajet.

Données prêtes à partir

login=
password=

Que signifie le cadenas ?

Site fiable

Site officiel

Connexion chiffrée

MAMP ou Infomaniak : qui joue le rôle du serveur ?

Serveur local ou serveur public

Le même rôle, pas le même endroit

Local

MAMP

MAMP transforme ton Mac en petit serveur local. Les fichiers, PHP, MySQL et la base de données restent sur ton ordinateur par défaut.

fichiers du projet
pour tester

Accessible : moi, sur mon ordinateur.

En ligne

Infomaniak

Infomaniak héberge ton application sur un serveur distant. Elle peut être accessible depuis Internet, un smartphone ou un autre ordinateur selon les accès configurés.

fichiers du site
pour publier sur un

Accessible : depuis Internet selon les droits.

Où vit l’application ? MAMP : sur mon Mac Infomaniak : sur un

Où sont les données ? MAMP : dans la sur mon Mac Infomaniak : dans une base sur le serveur Infomaniak

Qui peut y accéder ? MAMP : moi, sur mon ordinateur Infomaniak : les personnes avec un via Internet

Données sensibles ? MAMP : oui pour tester ou travailler seul, car tout reste local par défaut Infomaniak : oui seulement avec une vraie configuration d’accès, de sécurité et de sauvegarde

Smartphone ? MAMP : non en usage simple Infomaniak : oui

Utilisation principale MAMP : apprendre, tester, développer Infomaniak : publier, partager, accéder à distance

Adresse utilisée MAMP : Infomaniak :

Attention données sensibles

Une application qui tourne dans MAMP reste sur votre ordinateur. En revanche, si vous copiez des dans une , une ou un , ces données quittent votre environnement local.

MAMP est ton serveur d’entraînement. Infomaniak est ton serveur public. Local ne veut pas dire magique : les données restent sur le Mac tant qu’on ne les envoie pas volontairement ailleurs.

Anatomie vivante d’une WebApp

Mini-laboratoire

Active ou désactive les briques d’une WebApp

Observe ce qui change

HTML CSS JavaScript PHP MySQL

Aperçu de la page

5 briques actives

http://localhost/premiere-webapp

Première WebApp

Bienvenue

Voici ma première WebApp.

En attente d’interaction.

Horloge 09:00:00

Code / données

HTML

HTML crée la structure de la page.

Trajet de l’ajout

Action serveur

Navigateur PHP MySQL

Ajoute un article, puis observe la table et l’aperçu.

Base de données simulée

TABLE articles

ID	Titre	Texte

Explication simple : Sans base de données, les informations disparaissent après un rechargement.

Explication avancée : MySQL permet de stocker les données afin qu'elles puissent être retrouvées plus tard.

Organisation des fichiers

Architecture PHP / MySQL

Une WebApp est un projet organisé

Clique sur une carte

ma-webapp/

├── index.php ├── assets/ css · js · img ├── controllers/ ├── api/ ├── includes/ └── sql/

La porte d'entrée

index.php

Mission: C'est souvent le premier fichier appelé lorsque quelqu'un arrive sur le site.
Exemple concret: Affiche la première page de l'application.
Quand il est utilisé: Lorsque le navigateur arrive sur le domaine.
Phrase pédagogique: Le navigateur frappe généralement à la porte index.php.

Synthèse

Comment une WebApp travaille

index.php controllers sql / base de données api assets navigateur

Aide à coder avec Codex

Comment parler à Codex

Trop vague

Ajoute une fonctionnalité.

Plus précis

Ajoute un bouton dans index.php, crée un endpoint dans api/save_progress.php et ajoute le JavaScript dans assets/js/app.js.

Comprendre JSON

Données transportables

Du JSON brut à une carte visible

JSON est un format de données. Il sert à transporter des informations avec des paires clé / valeur, par exemple "title": "Comprendre Internet". Une WebApp peut ensuite lire ces données pour afficher une carte, une liste ou un profil.

JSON brut

Exemple 1

{
  "title": "Comprendre Internet",
  "author": "Remo"
}

Modifie le JSON : la carte se met à jour automatiquement.

Résultat affiché

Carte

Comprendre Internet

par Remo

Tableau JSON

1 objet = 1 carte, 3 objets = 3 cartes

[
  { "title": "Article 1" },
  { "title": "Article 2" },
  { "title": "Article 3" }
]

Ajoute par exemple "author": "Julie" dans un objet.

Article 1

Article 2

Article 3

Explication simple : JSON est un format utilisé pour transporter des données.

Explication avancée : Les API échangent souvent leurs données au format JSON.

JSON

{
  "title": "Bonjour"
}

XML

<article>
  <title>Bonjour</title>
</article>

XML transporte aussi des données, mais il utilise des balises ouvrantes et fermantes. Pour une débutante, JSON est souvent plus direct à lire, car il ressemble davantage à une liste de champs et de valeurs.

Comment parler à Codex

Prompt utile

Une bonne demande donne une direction claire

Compare les deux demandes

Demande trop vague

“Fais-moi une application.”

Trop vague : Codex ne connaît ni le contexte, ni l’objectif, ni les contraintes.

Fais-moi une application.

Premiers bugs

Mission guidée

localStorage : la mémoire du navigateur

Mémoire locale

Pourquoi les idées restent après un rafraîchissement

Dans ce navigateur

localStorage, c’est comme un petit post-it collé dans le navigateur. La page peut y écrire une information, puis la relire plus tard.

Sans localStorage, les informations disparaissent au rafraîchissement. Avec localStorage, elles restent dans ce navigateur.

Chrome · localStorage

Post-it du navigateur

Mini simulateur

Nouvelle idée

Ajoute une idée, puis rafraîchis pour vérifier qu’elle reste visible.

Où vont les données ?

Les données restent dans ce navigateur.
Elles ne sont pas envoyées à MySQL.
Elles ne sont pas envoyées à Infomaniak.
Elles ne sont pas envoyées à Codex.
Elles ne sont pas partagées avec un autre ordinateur ou smartphone.

localStorage

simple
local au navigateur
parfait pour débuter
pas adapté aux données sensibles professionnelles si l’ordinateur n’est pas maîtrisé
pas partagé entre appareils

MySQL

base de données serveur
partage possible entre plusieurs utilisateurs
accessible depuis plusieurs appareils si l’application est en ligne
plus robuste pour une vraie application

Résumé visuel du module

Synthèse visuelle

Le voyage d’une idée

Résumé officiel

Une idée

Tout commence par un besoin ou une envie.

Codex

L’IA aide à construire la solution.

Projet

Les fichiers sont organisés dans un dossier.

MAMP

Le Mac devient un serveur local.

Localhost

On teste l’application.

WebApp

Le résultat devient utilisable.

Une WebApp, c’est un dossier de fichiers, un serveur pour les exécuter, des données à afficher et un navigateur pour les voir.

Vocabulaire

WebApp

Application qui fonctionne dans un navigateur, comme Gmail, Notion, Trello ou SIRIUS Academy.

Navigateur

Logiciel comme Chrome, Safari ou Firefox qui reçoit du code et affiche une interface.

Serveur

Ordinateur distant qui reçoit des demandes et renvoie des réponses.

DNS

Annuaire d’Internet qui relie un nom de domaine à une adresse IP.

Adresse IP

Adresse numérique utilisée par les machines pour trouver un serveur.

URL

Adresse complète saisie dans le navigateur.

Requête HTTP

Demande envoyée par le navigateur au serveur.

Réponse HTTP

Réponse renvoyée par le serveur au navigateur.

HTML

Structure de la page.

CSS

Apparence visuelle de la page.

JavaScript

Interactions exécutées dans le navigateur.

PHP

Langage qui travaille côté serveur.

MySQL

Base de données qui stocke les informations.

JSON

Format de données utilisé pour échanger des informations.

Localhost

Serveur qui tourne sur son propre ordinateur.

MAMP

Outil qui installe Apache, MySQL et PHP sur Mac.

Hébergement

Espace en ligne où sont placés les fichiers de l’application.

Nom de domaine

Nom lisible par un humain, par exemple academy.de-tomi.com.

HTTPS

Version sécurisée des échanges entre navigateur et serveur.

Prompt Codex

Pourquoi ce prompt ?

Dans Sirius Academy, les prompts ne servent pas à impressionner l’IA. Ils servent à être précis.

Plus votre demande est claire, plus Codex produit une application proche de ce que vous imaginez.

Ce que ce prompt va apprendre

✅ Décrire un besoin
✅ Donner des contraintes
✅ Demander une structure
✅ Tester dans MAMP

Crée une petite WebApp PHP appelée “Mini carnet d’idées”.

Objectif :
Créer un outil simple pour noter des idées rapidement.

Fonctionnalités :
- un champ texte pour écrire une idée
- un bouton “Ajouter”
- une liste des idées ajoutées
- un bouton “Supprimer” pour chaque idée
- les idées doivent rester visibles après un rafraîchissement de la page grâce à localStorage

Contraintes :
- compatible MAMP
- PHP 8+
- HTML / CSS / JavaScript
- pas de base de données
- pas de MySQL
- stockage uniquement avec localStorage
- interface moderne, claire et responsive
- fichiers séparés si utile

Donne-moi :
1. l’arborescence du projet
2. le contenu des fichiers
3. les étapes pour tester dans MAMP
4. les fichiers à modifier si je veux changer le design

Défi maison

Améliorer son carnet d’idées

À la maison, améliore ton mini carnet d’idées avec Codex.

Le but n’est pas de tout réussir parfaitement du premier coup. Le but est d’apprendre à demander une amélioration précise à Codex, puis à tester le résultat.

Ajouter une catégorie à chaque idée : Travail, Perso, Projet, Urgent.
Ajouter une date automatique à chaque idée.
Ajouter un filtre par catégorie.
Ajouter un bouton “Exporter en JSON”.
Ajouter un bouton “Réinitialiser le carnet”.

Essaie d’abord de créer ton propre prompt d’amélioration. Ensuite, reviens ici et clique sur le bouton pour découvrir un prompt idéal.

Prompt idéal d’amélioration

Améliore mon mini carnet d’idées.

Contexte :
L’application existe déjà et fonctionne avec localStorage.

Objectif :
Ajouter des fonctionnalités sans repartir de zéro.

À ajouter :
- une catégorie pour chaque idée : Travail, Perso, Projet, Urgent
- une date automatique d’ajout
- un filtre par catégorie
- un bouton “Exporter en JSON”
- un bouton “Réinitialiser le carnet”

Contraintes :
- conserve la structure actuelle
- ne supprime aucune fonctionnalité existante
- garde localStorage
- garde une interface simple et responsive

Explique-moi :
1. les fichiers modifiés
2. ce que tu as changé
3. comment tester chaque nouvelle fonctionnalité

Internet & atelier numérique

Bienvenue dans l’atelier numérique

Exemples de WebApps

Le voyage d’une WebApp

Adresse saisie

Ce que les acteurs échangent

Comprendre Internet

Découvrir MAMP

Créer avec Codex

WebApp

DNS

Navigateur

Serveur

HTML / CSS / JavaScript

PHP / MySQL / JSON

Localhost

Codex

Le S signifie Secure

Arrivée serveur

Que signifie le cadenas ?

Le même rôle, pas le même endroit

MAMP

Infomaniak

Attention données sensibles

Active ou désactive les briques d’une WebApp

Aperçu de la page

Bienvenue

Code / données

Trajet de l’ajout

Base de données simulée

Une WebApp est un projet organisé

index.php

Comment une WebApp travaille

Comment parler à Codex

Du JSON brut à une carte visible

JSON brut

Résultat affiché

Comprendre Internet

1 objet = 1 carte, 3 objets = 3 cartes

Article 1

Article 2

Article 3

JSON

XML

Une bonne demande donne une direction claire

“Fais-moi une application.”

Observe le symptôme, puis découvre la cause

localhost refuse la connexion

Créer sa première WebApp avec Codex et MAMP

🎉 Mission accomplie !

Pourquoi les idées restent après un rafraîchissement

Post-it du navigateur

Mini simulateur

Où vont les données ?

localStorage

MySQL

Le voyage d’une idée

Une idée

Codex

Projet

MAMP

Localhost

WebApp

WebApp

Navigateur

Serveur

DNS

Adresse IP

URL

Requête HTTP

Réponse HTTP

HTML

CSS

JavaScript

PHP

MySQL

JSON

Localhost

MAMP

Hébergement