---
tags: option, info, informatique, projet, cours
title: Projet de l'option informatique 2024-2025
description: Projet 2024-2025 de l'option informatique de 3ème
author: Mathieu Drillet
---
| Collège George Sand de La Châtre | Option Informatique | [](https://mathsalors.jimdofree.com/) |
| :--------: | :--------: | :--------: |
# Projet de l'option informatique 2024-2025
:::success
💡 L'idée est de coder un programme Python qui pose des questions à l'utilisateur, puis le programme crée une page internet personnalisée en fonction des réponses fournies par l'utilisateur.
✍ Nous pourrions conseiller des métiers dans le numérique et présenter des personnes travaillant dans l'informatique. Il est important de présenter des femmes informaticiennes pour montrer aux jeunes filles que ce n'est pas une filière réservée aux garçons.
:::
:::spoiler sommaire
[toc]
:::
## Ressources
### Un exemple
Voici le programme Python que j'ai rédigé pour la présentation de l'option informatique :
:::spoiler Dérouler pour voir le code
```python
import datetime
myDate = datetime.date.today()
def questions():
reponses=[]
reponses.append(input('Quelle classe ?'))
reponses.append(input('Quelle couleur ? (en anglais)'))
reponses.append(input("Quel prénom ?"))
return(reponses)
#reponses=['4D','red','Augustin']
def ecriture_HTML(reponses) -> None:
fichier = open('Option_Informatique.html', 'w',encoding="utf-8") # w pour write
fichier.write('<!DOCTYPE html> \n <html> \n <head> \n <meta charset="UTF-8"> \n <meta http-equiv="X-UA-Compatible" content="IE=edge"> \n <meta name="viewport" content="width=device-width, initial-scale=1.0"> \n <link rel="stylesheet" href="style.css"><title> Présentation de l Option Informatique</title> \n </head> \n <body> \n')
fichier.write('<h1>Bonjour les '+ reponses[0]+'</h1> \n')
fichier.write('<p>')
fichier.write("C'est la présentation de l'option informatique.")
fichier.write('</p>')
fichier.write('<hr/>')
fichier.write('<p>')
fichier.write("Vous avez remarqué, c'est écrit dans la couleur préférée de <strong>"+reponses[2]+"</strong>.")
fichier.write('</p>\n <hr/>')
fichier.write('<p>')
fichier.write("L'option informatique, il y a 20 places, c'est 1h par semaine.\n <br/>\n Nous apprendrons à écrire en <strong>Python</strong> et en <strong>HTLM</strong>.")
fichier.write('</p>')
fichier.write('<p id="boite">')
fichier.write("Il n'y aura pas de travail à faire à la maison.\n Nous travaillerons sur des projets.")
fichier.write('</p>')
fichier.write('<h2>')
fichier.write('Vous voulez apprendre à coder, inscrivez-vous !')
fichier.write('</h2>')
fichier.write('</br>\n <footer> © M.Drillet, le ')
fichier.write('<span id="current_date">\n <script>\n date = new Date();\n year = date.getFullYear();\n month = date.getMonth() + 1;\n day = date.getDate();\n document.getElementById("current_date").innerHTML = day+"/" + month + "/" + year;\n </script>\n </span>')
fichier.write('</footer>')
fichier.write('</body>\n')
fichier.write('</html> \n')
fichier.close()
print('Vos fichiers sont créés.')
def ecriture_CSS(reponses) -> None:
fichier = open('style.css', 'w',encoding="utf-8")
fichier.write('h1 \n { text-align: center; background-color: skyblue; }')
fichier.write('h2 \n{ text-align: center; font-family: "Gill Sans", sans-serif; font-style: italic; color:')
fichier.write(reponses[1])
fichier.write('; }')
fichier.write('p \n { font-size: x-large; color:')
fichier.write(reponses[1])
fichier.write(';}')
fichier.write('#boite{ font-size: x-large;background: linear-gradient(to bottom, #ffe8d4, #f69d3c); border: 1px solid #696969; padding: 10px; border-radius: 10px; box-shadow: 2px 2px 1px black;}')
fichier.write("#boite:before { content: 'ℹ️'; margin-right: 10px;}")
fichier.write('footer {\n display: flex; justify-content: center; padding: 5px; background-color: #45a1ff; color: #fff;}')
fichier.close()
reponses=questions()
ecriture_HTML(reponses)
ecriture_CSS(reponses)
```
:::
N'hésitez pas à le copier/coller pour le tester.
### L'exposition
L'association [Femmes&Maths](https://femmes-et-maths.fr/) a créé une magnifique exposition :
"**Mathématiques, Informatique ... avec elles**"
➡ https://femmes-et-maths.fr/femmes-en-maths/maths-info-avec-elles/
Cette exposition présente des personnes et leur métier qui est en lien avec les mathématiques et l'informatique.
Vous pouvez retrouver des extraits de l'interview et des vidéos :
{%pdf https://femmes-et-maths.fr/wp-content/uploads/2022/04/Marie_Blin.pdf%}
<center>
<iframe width="560" height="315" src="https://www.youtube.com/embed/szlVXJOCtDg?si=4npEIYdKetPKLA95" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</center>
### Le cours
Retrouver les TP de l'année ici
➡ https://mathsalors.jimdofree.com/coll%C3%A8ge/option-informatique/ 
## Première partie : Choix
1. Choix de la mise en place : soit tout le groupe classe ensemble soit deux groupes ? ➡
:::success
🧠
Brainstorming :
>**Idées de métiers :**
> * Crypto ➡ Anne Canteaut
> * Designer numérique
> * Modélisateur 3D
> Un métier et une personne de ce métier
> Déscription du métier : avantages et inconvéniants
> Lien avec le site de l'Onisep
> **Questions :**
> * ~~Dans l'informatique, quel métier vous intéresse ? (donner une liste)~~
>Créer une page internet, avec tous les métiers proposés en lien (descriptifs par métier avec photo de personnes puis quizz (python)) Création d'une BD pour présenter. voir https://bdnf.bnf.fr/fr
<center>
**Page d'intro**
</center>
> Quizz : test de personnalité pour conseiller un métier
Premières idées :
:::
2. Choix :
* Un seul projet : plusieurs équipes
*
3. Choix des équipes :
* équipe 1 : Marion, Enola, Savannah, Juliette, Marie, Adam
* équipe 2 : Gabriel, Noah, Jean-Pierre, Johann, Malo, Apolline
* équipe 3 : Maxime, Dorian, Evan, Keiran, Mme Conchon.
* équipe 4 : qui se complète en fonction de l'avancée
4. Travail
* Fond
* Découverte et analyse de l'exposition. *(Nous sélectionnerons les personnes dont le métier à un lien avec l'informatique)*. ➡ équipe 1
* Quelles questions ? ➡ équipe 3
* Les autres métiers ? ➡ équipe 4
* Forme
* Code en Python ➡ équipe 3
* Code Html ➡ équipe 1
* Code CSS ➡ équipe 2
*
## Travail en groupe
<i class="fa fa-users" aria-hidden="true"></i>
1. Travail en groupe sur le fond.
2. Travail en groupe sur la forme.
* lien vers le HTML et CSS : **f3b0-4512641**
* lien vers Python : **79ac-4512741**
**Les avancés** :
### Groupe HTML
* Recherches de métiers
* Recherches de personnes
* Architecture des pages en lien avec l'équipe CSS
* mise en commun pour la page via ➡ fichier de sauvegarde dans Commun Classes ➡ 📂Informatique ➡ HTML
:::warning
Présentation du contenu
<center>
</center>
:::
### Groupe CSS
* Architecture des pages en lien avec l'équipe HTML
* Test des couleurs et de la présentation
➡ fichier de sauvegarde dans Commun Classes ➡ 📂Informatique ➡ HTML et CSS
:::spoiler Code
h1{
color : darkblue;
border: 2px solid green;
background-color: transparent;
padding: 10px;
}
nav{
color : black;
}
h2{
Quelques domaines dans l'informatique
color : black;
}
body{
background-color: whitesmoke;
}
p{
color : blue;
}
p#para_trois{
color : green;
}
section{
background-color : lightblue;
display : flex ;
}
div{
background: linear-gradient(to bottom right, darkcyan, lightblue);
color:white;
display: flex;
align-items: center;
justify-content: center;
}
:::
:::warning
Présentation des styles
:::
### Groupe Python
* création de listes pour les questions et le stockage des réponses.
* Activité partagée par Maxime
*
:::warning
++Questions :++
* Quelle question après "non" à créatif ? [⬆](#Première-partie--Choix)
:::
:::info
**Liste de questions :**
```python
questions=['Quel est ton prénom ? ','Aimes tu l informatique ? (répondez par oui ou non) ', 'Es-tu créatif ? (répondez par oui ou non) ',"Aimes tu les metiers de la gestion ? (répondez par oui ou non) ","Aimes tu les metiers techniques ? ","Aimes tu les metiers de l'industrie ?","Aimes tu les metiers des sciences ?"]
print(questions)
```
:::
## Point d'étape du 07/03
### Equipe 1 : HTML
Création :
* d'une page commune
* de 4 pages personnalisées (une par domaine)
* d'une page de fin ➡ "Va manger des gauffres"
### Equipe 2 : CSS
* création du fond, de la police
* Question sur les boîtes
* choix des couleurs :
* H1 en rouge encadré
* H2 en rouge
* H3 en noir
* P en bleu
* gérer la taille des encadrements ➡ Voir cette [page](https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Sizing)
### Equipe 3 : Python
création de l'arbre et des questions
⚠ Attention à la liste des réponses : initialiser
```python
reponses=[0,0,0,0,0,0,0]
```
### A faire
* Finir les pages personnalisées et la page de sortie.
* L'écriture par Python des pages personnalisées.
* Gérer la barre de navigation ➡ voir cette [page](https://www.alsacreations.com/astuce/lire/5-comment-faire-un-lien-vers-un-endroit-prcis-de-la-page-ancrenbsp.html) pour gérer les "ancres".
## Finalisation
1. Regrouper les travaux des différents groupes.
Codes du projet :
* Quiz Python **871a-6482074**
* Pages web : **d672-6418925**
2. Procéder à des tests.
3. Apporter des améliorations.
4. Réfléchir à une présentation.
## Arbre de décision
<center>
</center>
---
<div style="text-align:right;">
*Mathieu Drillet*
</div>
---
<style>
h1{color:#FFFFFF;margin-bottom:.75em!important;background-color: #000080;border-bottom:3px solid #6e3dba!important;}
h2{color:#000080;padding-top:0.5em;border-bottom:3px solid #000080!important;margin-bottom:.75em!important;}
h3{color:#008080 ;padding-top:0.5em;margin-bottom:.75em!important;}
h4{color:#00BFFF ;padding-top:0.5em;margin-bottom:.75em!important;}
details {
margin-bottom: 10px;
border-radius: 6px;
padding-top: 0.4em;
box-shadow: 0 5px 10px -9px rgba(0, 0, 0.5, 0.5),
0 10px 10px -5px rgba(0.2, 0, 0.7, 0.2);
}
details > summary{
cursor: pointer;
transition: .3s;
user-select: none;
padding: 0.3em;
background-color: #000080;
border-radius: 4px;
font-family: 'Marianne';
color: #FFFFFF;
}
</style>