Arborescence

Parcours de formation

Programmer en Python

De l'algorithme sur papier à la première page web publiée.

12 h 30Dès 10 ans, adolescents, adultes débutants5 fiches

Le parcours commence sans ordinateur, parce que la difficulté n'est pas le langage mais la décomposition d'un problème. Il se termine par une page web publiée : quelque chose de réel, montrable.

—Sommaire

  1. Penser en algorithmes1 h 30
  2. Python 1 — variables, saisie, conditions3 h
  3. Python 2 — boucles et fonctions3 h
  4. Déboguer avec méthode1 h 30
  5. Sa première page web3 h

Programmer

Penser en algorithmes

Avant tout langage : décomposer un problème en étapes qu'une machine peut suivre.

1 h 30Dès 9 ans, sans ordinateurFiche G1

01Objectif

À la fin de cette séquence : Décomposer une tâche en instructions non ambiguës, reconnaître les trois structures qui composent tout programme, et détecter une consigne impossible à exécuter.

02L'essentiel

Un algorithme n'admet aucun implicite

« Mets la table » suppose des dizaines de savoirs. Une machine exige : prendre une assiette, la poser devant la chaise, répéter pour chaque convive.

Trois structures suffisent à tout

La séquence (faire ceci puis cela), le choix (si... alors... sinon), la répétition (tant que... faire). Tout programme, du plus simple au plus complexe, n'est qu'un assemblage de ces trois.

Une répétition doit pouvoir s'arrêter

« Tant qu'il reste des assiettes » s'arrête, car le nombre diminue. Une condition qui ne change jamais produit une boucle infinie : la machine ne s'arrête plus.

L'ordre change le résultat

Verser le café puis le lait ne donne pas la même chose que l'inverse. C'est la source la plus fréquente d'erreurs chez les débutants comme chez les professionnels.

03Le schéma

Repetition1Verifier lacondition2Executer l'action3Modifier l'etat4Revenir au test
Si l'étape 3 ne modifie pas ce que l'étape 1 vérifie, la boucle tourne indéfiniment. C'est la première panne que tout programmeur apprend à reconnaître.

04À retenir

  • Séquence, choix, répétition : les trois briques de tout programme.
  • Aucun implicite. Ce qui n'est pas dit ne sera pas fait.
  • Toute boucle doit progresser vers sa sortie, sinon elle ne s'arrête jamais.

05Exercice

Écrivez la marche à suivre pour dessiner un carré, à donner à quelqu'un les yeux fermés qui n'a jamais vu de carré. Faites-la exécuter à la lettre. Ce qui rate indique ce que vous aviez supposé sans le dire.

Indice — Comptez les angles : si vous n'avez pas précisé « tourner d'un quart de tour », le résultat sera surprenant.

06Vérification des acquis

Qu'est-ce qu'une boucle infinie ?

Une répétition dont la condition d'arrêt n'est jamais atteinte, parce que rien dans le corps de la boucle ne la fait évoluer. Le programme se fige.

Pourquoi l'ordre des instructions compte-t-il autant ?

Parce que chaque instruction modifie l'état de la machine, et que la suivante travaille sur cet état modifié. Inverser deux lignes peut changer entièrement le résultat.

Programmer

Python 1 — variables, saisie, conditions

De la première ligne exécutée au premier programme qui réagit à l'utilisateur.

3 hDès 10 ansFiche G2

01Objectif

À la fin de cette séquence : Écrire un programme qui demande une information, la traite selon une condition, et affiche un résultat juste — en comprenant chaque ligne écrite.

02L'essentiel

Une variable est une boîte étiquetée

age = 12 met la valeur 12 dans une boîte nommée age. Le signe égal n'est pas une égalité mathématique : c'est un rangement.

Les types ne se mélangent pas impunément

input() rend toujours du texte. "12" + 1 échoue ; il faut convertir : int(input()). C'est la toute première erreur de chaque débutant.

La condition compare, l'affectation range

Un seul = range une valeur, deux == comparent. Confondre les deux est la deuxième erreur la plus fréquente.

L'indentation est la syntaxe

En Python, ce sont les espaces en début de ligne qui disent ce qui est à l'intérieur du if. Un décalage n'est pas une question de style : il change le programme.

03Le schéma

1Demander al'utilisateur2Convertir le texte ennombre3Tester la condition4Afficher le resultat
L'étape 2 est celle qu'on oublie, et l'erreur qui en résulte semble incompréhensible : le programme additionne des textes au lieu de nombres.

04Le code

age = int(input("Quel est votre age ? "))

if age < 12:
    print("Tarif enfant")
elif age < 65:
    print("Tarif adulte")
else:
    print("Tarif senior")

05À retenir

  • input() rend du texte, toujours. Convertissez avec int() ou float().
  • Un = range, deux == comparent.
  • L'indentation fait partie du code, pas de la présentation.

06Exercice

Écrivez un programme qui demande un âge et répond « tarif enfant », « tarif adulte » ou « tarif senior » selon trois tranches. Testez-le avec une valeur limite exacte, par exemple 18.

Indice — Les bornes sont le piège : vérifiez si vous avez écrit < ou <=, et ce que cela change à 18 ans.

07Vérification des acquis

Pourquoi input() doit-il souvent être converti ?

Parce qu'il rend toujours une chaîne de caractères, même si l'utilisateur tape des chiffres. Sans int(), toute comparaison ou addition numérique échoue ou donne un résultat absurde.

Quelle est la différence entre = et == ?

= affecte une valeur à une variable. == pose une question et rend vrai ou faux. Employer l'un pour l'autre est une erreur classique.

Programmer

Python 2 — boucles et fonctions

Ne plus jamais écrire deux fois la même chose.

3 hDès 10 ansFiche G3

01Objectif

À la fin de cette séquence : Répéter une action avec for et while, et regrouper un traitement dans une fonction réutilisable avec paramètres et valeur de retour.

02L'essentiel

<code>for</code> quand on sait combien, <code>while</code> quand on ne sait pas

for i in range(10) répète dix fois. while continue tant qu'une condition tient : idéal pour attendre une saisie correcte.

Une fonction est un outil qu'on fabrique

def aire(largeur, hauteur): crée une opération réutilisable. Écrire une fonction, c'est nommer une intention : le code devient lisible.

<code>return</code> n'est pas <code>print</code>

print montre à l'écran, return rend une valeur au programme pour continuer à calculer. Confondre les deux bloque toute composition.

Trois lignes répétées appellent une fonction

Dès qu'un bloc apparaît deux fois, il doit devenir une fonction. Sinon la correction devra être faite à chaque copie — et une sera oubliée.

03Le schéma

for i inrange(n)1i prend la valeursuivante2Le corps s'execute3Reste-t-il desvaleurs ?4Sinon, on sort
La variable de boucle avance seule : c'est ce qui distingue for de while, où l'avancement est à votre charge — et donc oubliable.

04Le code

def moyenne(notes):
    if len(notes) == 0:
        return 0
    return sum(notes) / len(notes)

notes = []
for i in range(3):
    n = -1
    while n < 0 or n > 20:
        n = float(input("Note sur 20 : "))
    notes.append(n)

print("Moyenne :", moyenne(notes))

05À retenir

  • for = nombre connu, while = condition.
  • return rend, print montre. Ce ne sont pas des synonymes.
  • Deux fois le même code = une fonction à écrire.

06Exercice

Écrivez une fonction qui reçoit une liste de notes et rend la moyenne. Puis une boucle qui redemande une note tant que la valeur saisie n'est pas entre 0 et 20.

Indice — Pour la moyenne, sum(notes) / len(notes) — mais que se passe-t-il si la liste est vide ?

07Vérification des acquis

Pourquoi une fonction qui affiche au lieu de retourner pose-t-elle problème ?

Parce qu'on ne peut plus réutiliser son résultat : impossible de l'additionner, de le stocker ou de le tester. La valeur est partie à l'écran, elle n'existe plus dans le programme.

Quand une boucle while est-elle préférable ?

Quand le nombre de répétitions dépend de quelque chose d'imprévisible : une saisie utilisateur, une lecture de fichier, une condition qui évolue.

Programmer

Déboguer avec méthode

Cinq étapes qui transforment la panique en diagnostic.

1 h 30Dès 10 ansFiche G4

01Objectif

À la fin de cette séquence : Lire une trace d'erreur, isoler la cause, formuler une hypothèse vérifiable et corriger — au lieu de modifier au hasard jusqu'à ce que ça passe.

02L'essentiel

Lire l'erreur avant de toucher au code

La trace nomme le type d'erreur et la ligne. Elle se lit de bas en haut : la dernière ligne dit quoi, l'avant-dernière dit où.

Réduire jusqu'au plus petit cas qui échoue

Supprimez tout ce qui n'est pas nécessaire à reproduire le problème. Neuf fois sur dix, la cause devient évidente pendant cette réduction.

Une hypothèse à la fois

Changer trois choses puis relancer : en cas de succès, on ne sait pas laquelle. On formule une hypothèse, on la teste, on note le résultat.

Afficher les valeurs, ne pas les imaginer

Un print bien placé montre ce que contient vraiment la variable. La plupart des bugs viennent d'une valeur différente de celle qu'on supposait.

03Le schéma

Deboguer1Lire l'erreur2Reproduire a coupsur3Reduire au minimum4Une hypothese, untest5Corriger et verifier
Le cycle se répète jusqu'à la disparition du symptôme. Sauter l'étape 2 est l'erreur la plus coûteuse : on ne peut pas corriger ce qu'on ne sait pas reproduire.

04À retenir

  • La trace d'erreur se lit de bas en haut.
  • Reproduire d'abord. Un bug non reproductible n'est pas corrigeable.
  • Une hypothèse, un test. Deux changements simultanés ne prouvent rien.

05Exercice

Prenez un programme qui fonctionne, introduisez volontairement trois erreurs — une faute de frappe, une confusion de type, une boucle infinie. Faites-le corriger par quelqu'un d'autre en lui demandant de dire à voix haute son hypothèse avant chaque essai.

Indice — L'exercice porte sur la verbalisation : c'est elle qui empêche les modifications au hasard.

06Vérification des acquis

Pourquoi lire une trace d'erreur de bas en haut ?

Parce que la dernière ligne indique la nature exacte de l'erreur, et celles au-dessus le chemin d'appels qui y a mené. On part du symptôme précis pour remonter à la cause.

Pourquoi ne changer qu'une chose à la fois ?

Parce que si le problème disparaît après trois modifications, vous ignorez laquelle a agi — et vous en avez peut-être introduit une nouvelle sans le voir.

Programmer

Sa première page web

HTML donne le sens, CSS donne l'apparence. Comprendre cette séparation, c'est comprendre le web.

3 hDès 11 ansFiche G5

01Objectif

À la fin de cette séquence : Écrire une page structurée en HTML, la mettre en forme avec CSS, et la publier en ligne gratuitement.

02L'essentiel

HTML décrit le sens, pas l'apparence

<h1> signifie « titre principal », pas « gros texte ». Cette distinction rend la page lisible par les moteurs de recherche et les lecteurs d'écran.

CSS habille sans toucher au contenu

Un seul fichier de style change l'apparence de cent pages. Mélanger style et contenu, c'est se condamner à tout refaire à chaque évolution.

Tout est une boîte

Chaque élément occupe un rectangle avec un contenu, une marge intérieure, une bordure et une marge extérieure. Comprendre ces quatre couches résout la majorité des problèmes d'alignement.

Penser mobile d'abord

La majorité des visites vient d'un téléphone. Une page conçue pour un grand écran puis rétrécie est presque toujours mauvaise ; l'inverse fonctionne.

03Le schéma

Comportement — JavaScriptreagitApparence — CSShabilleStructure et sens — HTMLporte le contenubase matérielle en bas · usage en haut
Les trois couches du web, dans l'ordre où on les apprend. Une page sans CSS reste lisible ; une page dont le sens est porté par le CSS ne l'est pas.

04Le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Ma page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Bonjour</h1>
  <p>Ma premiere page web.</p>
</body>
</html>

05À retenir

  • HTML pour le sens, CSS pour l'apparence. Ne jamais confondre.
  • Un titre est un titre, pas un texte agrandi : les balises ont une signification.
  • Mobile d'abord : concevez pour le petit écran, élargissez ensuite.

06Exercice

Créez une page de présentation de vous-même : un titre, deux paragraphes, une image, une liste. Ajoutez une feuille de style qui change les couleurs et la police. Publiez-la gratuitement sur un hébergeur de pages statiques.

Indice — Enregistrez le fichier avec l'extension .html et ouvrez-le directement dans le navigateur : aucun logiciel spécial n'est nécessaire.

07Vérification des acquis

Pourquoi ne pas utiliser un titre juste pour grossir du texte ?

Parce que la balise porte un sens exploité par les moteurs de recherche et les lecteurs d'écran. Pour grossir sans hiérarchiser, on utilise le CSS.

À quoi sert la séparation HTML / CSS ?

À changer l'apparence de tout un site depuis un seul fichier, et à garder un contenu compréhensible même si le style ne se charge pas.