lafrite/2020-2021
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Feat: couleurs en snt
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Bertrand Benjamin 2020-12-10 20:52:14 +01:00
parent e548e2c956
commit a6c0536f87
7 changed files with 118 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
SNT/02_Image_Numerique/fig/couleurs.bmp → SNT/02_Image_Numerique/fig/couleurs.ppm
View File

BIN
SNT/02_Image_Numerique/fig/rosette.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
SNT/02_Image_Numerique/fig/rosette.xcf Normal file
View File

Binary file not shown.

BIN
SNT/02_Image_Numerique/fig/roue_couleurs_128_corr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

30
SNT/02_Image_Numerique/index.rst
View File

@ -55,11 +55,31 @@ Cours: image gris et couleurs
Étape 3: Les couleurs des images Étape 3: Les couleurs des images
================================ ================================
Format de couleurs: RGB, HSV. On revient sur le codage des couleurs en RBG. Les élèves doivent avec Gimp colorier les ronds avec les bonnes couleurs et compléter avec le nom de la couleur (on ne sera pas trop pointilleux dessus..!
Les 3 couches de couleurs sur GIMP. .. image:: ./fig/roue_couleurs_255.png
:height: 200px
:alt: Roue des cours avec des composantes à 255
.. image:: ./fig/roue_couleurs_255.png
:height: 200px
:alt: Roue des cours avec des composantes à 255
Utilisation des connaissances sur les couleurs pour colorer sa page web. Ensuite on prend l'exemple d'une photo d'une nébuleuse où 3 photos en niveaux de gris ont été prises et où l'on va assigner une couleur à chaque "calque" pour donner de la couleur à l'image.
.. image:: ./fig/rosette.jpg
:height: 200px
:alt: Image de reference
`Ficher GIMP à travailler pour faire une belle image en manipulant les calques <./fig/rosette.xcf>`_
On conclue cette exploration des couleurs en revenant sur la page web où l'on va donner des couleurs aux éléments grâce au RBG dans le fichier css.
Les deux fichiers doivent être enregistré dans le même répertoire.
- `Code html (clique droit - enregistrer sous pour l'enregistrer sur son ordinateur <./page_css/page_avec_css.html>`_
- `Code css (clique droit - enregistrer sous pour l'enregistrer sur son ordinateur <./page_css/style.css>`_
On laissera ensuite les élèves commencer leur page html sur le métier qu'ils auront choisis.
Étape 4: les métadonnées Étape 4: les métadonnées
======================== ========================
@ -91,8 +111,8 @@ Idées de métiers:
Tous les élèves préparent une page web. Seuls quelqu'un passent à l'oral pour la présentation. Tous les élèves préparent une page web. Seuls quelqu'un passent à l'oral pour la présentation.
Évaluation (/10): Évaluation (/10) + 5 si vous passez à l'oral:
- 5pts sur la description du métier - 5pts sur la description du métier
- 5pts sur l'écrire de la page web (utilisation des balises et validité du code) - 5pts sur l'écrire de la page web (utilisation des balises, des couleurs en css et de la validité du code)
- 5pts présentation orale - 5pts présentation orale

85
SNT/02_Image_Numerique/page_css/page_avec_css.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<!-- en-tête -->
<meta charset="UTF-8">
<meta name="Author" content="Fabrice Sincère">
<link rel="stylesheet" href="style.css" />
<title>Un exemple de page web en HTML5</title>
</head>
<body>
<!-- corps -->
<h1>Un exemple de page web en HTML5 (titre en taille 1)</h1>
<h2>Un titre (taille 2)</h2>
<h3>Un titre (taille 3)</h3>
<h4>Un titre (taille 4)</h4>
<h5>Un titre (taille 5)</h5>
<h6>Un titre (taille 6)</h6>
<p>Un paragraphe.</p>
<p>Un deuxième paragraphe.
Il n'y a pas de saut de ligne.</p>
<p>Un troisième paragraphe.<br>Avec un saut de ligne.</p>
<p>Un mot en <strong>gras</strong>, en <em>italique</em>.</p>
<p>Une liste :</p>
<ul>
<li>Chapitre 1</li>
<li>Chapitre 2</li>
<li>Chapitre 3
<ul>
<li>Exercice 3.1</li>
<li>Exercice 3.2 </li>
</ul>
</li>
<li>Chapitre 4</li>
</ul>
<p>Une table :</p>
<table>
<tr>
<!-- en-tête de la table-->
<th>Courant (A)</th>
<th>Tension (V)</th>
<th>Puissance (W)</th>
</tr>
<tr>
<td>1,0</td>
<td>5,0</td>
<td>5,0</td>
</tr>
<tr>
<td>2,0</td>
<td>15,0</td>
<td>30,0</td>
</tr>
<tr>
<td>3,0</td>
<td>20,0</td>
<td>60,0</td>
</tr>
</table>
<p><a href="http://fr.wikipedia.org/wiki/HTML5">Un lien hypertexte vers l'article HTML5 du site web de WikiPédia</a></p>
<p>Un autre lien hypertexte <a href="http://fr.wikipedia.org/wiki/Hyperlien">ici</a>.</p>
<p>Une photo de Richard Stallman (située sur le site web de Wikipédia).<br>
Passez la souris sur chacune des images :</p>
<p>Un trait horizontal :</p>
<hr>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://fsincere.free.fr/isn/python/picto/valid-html.png" alt="Valid HTML5" height="31" width="88"></a></p>
</body>
</html>

8
SNT/02_Image_Numerique/page_css/style.css Normal file
View File

@ -0,0 +1,8 @@
body {
}
p{
}
h1{
}