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.

Ce qui se passe vraiment

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.

Ce qui se passe vraiment

Explication simple

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

Comprendre JSON

Données transportables

Du JSON brut à une carte visible

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>

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

Mission Codex + MAMP

Créer “Mon premier atelier numérique”

0/7 étapes

Objectif : afficher un titre, une phrase, une liste des logiciels installés et une carte “Ce que j’ai compris”.

Ouvrir Codex. Créer un dossier de projet dans htdocs. Demander à Codex de générer une page PHP simple. Lancer MAMP. Ouvrir http://localhost/nom-du-projet. Modifier le texte. Rafraîchir la page.

Résumé visuel du module

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

Crée une petite application PHP appelée “Mon premier atelier numérique”.

Objectif :
Afficher une page simple qui explique mon environnement de travail.

Contenu demandé :
- un titre
- une phrase d’introduction
- une liste des outils installés : Codex, MAMP, Chrome, FileZilla
- une carte “Ce que j’ai compris”
- un design moderne, simple et responsive

Contraintes :
- PHP 8+
- HTML/CSS
- pas de base de données
- fichiers séparés si utile
- compatible MAMP

Donne-moi :
1. l’arborescence
2. le contenu des fichiers
3. les étapes pour tester dans MAMP

Défi maison

Notes formateur

Internet & atelier numérique

Bienvenue dans l’atelier numérique

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 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 une maison organisée

index.php

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 “Mon premier atelier numérique”

Le parcours complet d’une première WebApp

Je construis

Je teste

Je comprends

Je publie plus tard

WebApp

Navigateur

Serveur

DNS

Adresse IP

URL

Requête HTTP

Réponse HTTP

HTML

CSS

JavaScript

PHP

MySQL

JSON

Localhost

MAMP

Hébergement

Nom de domaine

HTTPS

Notes

Timing conseillé

Messages clés à dire