# Projet Pédagogique : Le journal papier et numérique du collège Victor Vasarely
## Description du projet :
Le projet "Le journal papier et numérique du collège Victor Vasarely" vise à initier les élèves de 5e et 4e à la rédaction, à l'édition et à la publication d'articles sur un espace Web dédié.
L'idée est d'utiliser l'application [`md2html`](https://ciaconelli.forge.aeif.fr/md2html/index.html) pour écrire des articles en Markdown et les convertir en HTML (responsive : afin qu'ils soient lisibles sur différents appareils).
En parallèle, l'application [`a4`](https://eyssette.forge.aeif.fr/a4/convert.html) sera utilisée pour générer des versions imprimables des articles à partir du même code Markdown.
**Exemple**
- Cette proposition de projet a été rédigé sur `md2html`.
_Aperçu sur téléphone_
- Et voici deux possibilités d'aperçu de version pdf imprimables (générées sur `a4`) :
_Version portrait 3 colonnes_
_Version paysage 4 colonnes_
## Objectifs pédagogiques :
1. Favoriser l'apprentissage de la rédaction et du journalisme.
2. Initier les élèves à des technologies modernes comme Markdown, HTML et CSS.
3. Développer la collaboration et le travail en équipe.
4. Encourager l'expression créative et critique.
## Compétences du socle travaillées :
1. Maîtrise de la langue française.
2. Compétence en TICE (Technologies de l'Information et de la Communication pour l'Éducation).
3. Coopération et réalisation de projets.
4. Esprit critique.
## Restitution prévue :
1. Publication mensuelle d'articles sur le site Web du journal dédié.
2. Édition trimestrielle d'un journal papier.
3. Présentation du projet lors de la journée portes ouvertes du collège.
## Critères d'évaluation :
1. Qualité de la rédaction et du contenu.
2. Utilisation effective des outils numériques.
3. Contribution au travail en équipe.
4. Réception par la communauté scolaire et les parents.
## Besoins :
1. Formation (dans l'établissement) en Markdown et en HTML pour les élèves et les enseignants impliqués.
2. Temps de travail dédié pour la rédaction et la revue des articles (1h par semaine).
3. Accès à des ordinateurs et à une connexion Internet.
## Moyens matériels :
1. Ordinateurs avec accès à Internet.
2. Les logiciels `md2html` et `a4` (si nécessaires).
3. Imprimante pour les versions papier.
## Moyens humains :
1. Deux enseignants : un coordinateur numérique/encodage et un coordinateur média/écriture.
2. Élèves volontaires de 5e et 4e.
3. Éventuellement, visites de professionnels du journalisme pour des ateliers spécifiques.
## Moyens financiers :
1. Logiciels libres: 0€
2. Hébergement sur le site web de l'école : 0€
3. Coût d'impression des versions papier : 50€ par trimestre
## Coût du projet :
Total estimé : 150€ pour l'année scolaire.
<style>
html {
background-color: #f2f2f2; /* Gris clair */
margin: 0;
padding: 0;
}
/* Style pour le corps de la page */
body {
font-family: Arial, sans-serif;
margin: 0 auto;
padding: 0;
max-width: 900px;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background-color: #fff;
}
/* Style pour le titre principal */
h1 {
color: #003f5c; /* bleu foncé */
position: relative;
font-size: 2.75rem;
text-align: center;
}
h1::before {
content: "";
position: absolute;
bottom: -0.1em;
left: 0;
right: 0;
height: 0.05em;
background-color: #9eb6d7;
}
/* Style pour le titre secondaire */
h2 {
font-size: 2.25rem;
color: #2f4b7c;
position: relative;
}
h2::before {
content: "";
position: absolute;
bottom: -0.1em;
left: 0;
right: 0;
height: 0.025em;
background-color: #a5b6c4;
}
h3 {
font-size: 1.75rem;
color: #665191;
}
h4 {
font-size: 1.5rem;
color: #665191;
}
h5 {
font-size: 1.3rem;
color: #665191;
}
/* Style pour le paragraphe */
p {
font-size: 1.5rem;
line-height: 1.5;
margin-bottom: 1rem;
}
/* Style pour le texte en gras */
strong {
color: #800000;
}
/* Style pour le texte en italique */
i {
font-style: italic;
color: darkblue;
}
/* Style pour les images */
img {
max-width: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
display: block;
margin: auto;
}
blockquote {
font-style: italic;
font-size: 1.2rem;
margin: 1rem 0;
padding: 1rem;
background-color: #f9f9f9;
border-left: 4px solid #ccc;
border-left: 4px solid #ccc;
}
/* Style pour le code en ligne */
code {
font-family: "Courier New", monospace;
font-size: 1.1rem;
background-color: #f9f9f9;
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
/* Style pour le code en bloc */
pre {
font-family: "Courier New", monospace;
font-size: 1.1rem;
background-color: #f9f9f9;
padding: 1rem;
white-space: pre-wrap;
}
/* Style pour les liens */
a {
color: #007bff;
text-decoration: none;
}
/* Style pour les liens visités */
a:visited {
color: #6610f2;
}
/* Style pour les titres de liens */
a:hover, a:focus {
color: #007bff;
text-decoration: underline;
}
/* Style pour les listes */
ul, ol {
font-size: 1.5rem;
line-height: 1.2;
margin-bottom: 1rem;
}
table {
border-collapse: collapse;
width: 50%;
}
th, td {
border: 1px solid #ddd;
text-align: left;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Media query pour les téléphones */
@media only screen and (max-width: 600px) {
body {
padding: 0.5rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 2.37rem;
}
h4 {
font-size: 2.23rem;
}
h5 {
font-size: 2.10rem;
}
h6 {
font-size: 2rem;
}
p {
font-size: 1.75rem;
}
ul, ol {
font-size: 1.75rem; /* Nouvelle taille de police pour les listes sur les téléphones */
}
img {
max-width: 100%;
}
}
</style>